필자의 블로그는 3년 전, 티스토리를 떠나 직접 구축한 독립 리눅스 서버에 설치된 워드프레스에 정착해 있다. 그리고 워드프레스로 블로그를 구축하면 거의 필수적으로 사용하게 되는 테마는 여러 테마를 전전하다 제너레이트 프레스(GeneratePress)를 사용하고 있다.
제너레이트프레스(GeneratePress) 테마
워드프레스 사용자, 특히 한국의 사용자들은 제너레이트프레스 테마를 선호하는 경향이 강하다. 제너레이트프레스 테마를 선호하는 이유는 제너레이트프레스가 다른 상용 테마들 중에서 손꼽히게 가볍고 빠르며 깔끔하고 심플한 테마를 선호하는 한국의 블로거들에게 적합한 디자인을 비교적(?) 편하고 쉽게 구성할 수 있는 기능을 제공하기 때문이다.
하지만 제 아무리 가볍고 빠르다 하더라도 모든 사용자가 어떤 형태의 사이트든 디자인하고 만들 수 있게 설계되어 있기 때문에 너무 많은 옵션, 수백 개의 액션/필터 훅 등 자칫하면 속도 저하를 유발할 수 있는 요소들이 많다는 점과 처음 무료버전을 설치하면 “이게 뭐야?”라는 생각이 들 만큼 정말 “기본”만 제공한다. 정말 이 “기본” 기능만을 활용한다면 궂이 제너레이트프레스 테마를 사용해야 하는가? 라는 의구심이 들 수 밖에 없다.
바이브 코딩으로 워드프레스 테마를 만드는 방법
사용하지도 않을 수 많은 기능이 들어있는 상용 테마를 라이선스 없이 사용할거라면 꼭 필요한 기능만 들어 있는 나 만의 테마를 만들어 사용하고 상용 테마를 삭제하고 싶어졌다. 당연히 AI의 도움을 받아야 한다. 그렇지 않으면 한 달이 걸릴지, 두 달이 걸릴지 알 수 없다. 그런 시간을 낼 수도 없다.
먼저 워드프레스 테마 개발계획을 제미나이의 젬스(Gems)를 사용해 수립한다. 내가 사용할 워드프레스가 설치된 서버의 환경을 설명해주고 필수적으로 포함해야 할 기능을 구체적으로 설명해야 한다. 그냥 친구에게 설명하듯 자연스럽게 환경과 요구사항을 나열해주면 된다.
개인적으로 워드프레스를 사용해서 블로그를 구축해 운영하고 있어.(blogger.pe.kr)
이 블로그에는 제너레이트프레스 테마가 적용되어 있어. 그리고 Simple SEO, 구글 Sitekit, OMGF, WP Mail SMTP, WPS Hide Login, 단일 페이지 및게시물에 특성 이미지를 조건부로 표시, 댓글 답글 이메일 알림, WP-Optmize, WP Super Cache 같은 플러그인도 함게 설치해서 사용하고 있어.
운영체제는 Ubuntu 24.04.4 이고 웹서버는 apache 2.4.58에 PHP 8.3 FPM을 사용하고 있어.
이 환경에서 제너레이트프레스 대신에 사용할 테마를 직접 만들고 싶어. 필요한 기능은 다음과 같애.
1. 블로그의 가로 전체 폭을 직접 설정할 수 있다. 대략 1000px~1600px 정도로 사용할 예정
2. 맨 위는 헤더영역으로서 블로그의 타이틀을 표시하며 테마 설정에서 헤더에 표시할 문구를 입력할 수 있다. (폰트 크기와 글자색, 폰트타입과 좌,우,중앙 정렬을 선택할 수 있다.)
3. 헤더영역에 바탕 이미지를 업로드하여 배경으로 사용할 수 있으며 바탕이미지를 사용하지 않으면 백그라운드 색상을 선택할 수 있다.
3. 헤더영역아래는 메뉴 영역이며 메뉴를 개수에 따라 적절한 간격으로 배치하는데 중앙, 좌,우 정렬을 선택할 수 있다.
4. 메뉴는 워드프레스의 모양에서 생성한 메뉴를 연결한다.
5. 메뉴영역의 글자색, 굵기, 폰트크기, 배경색을 선택할 수 있도록 한다.
6. 메뉴 영역 아래는 왼쪽에 포스트의 목록과 포스트의 본문이 오는 컨텐츠 영역이고 오른쪽에는 사이드바가 위치한다.
7. 본문영역과 사이드바 영역의 폭을 전체 폭의 범위 내에서 50px 단위로 분할할 수 있도록 한다.
9. 그 아래에는 푸터영역으로서 다음의 저작권 표시를 한다.
2008 - 2026 Created by taeho. All rights reserved.
- 생성된개발 계획은 VSCode를 통해 제미니 에이전트에게 코딩을 맏길거야. 제미니 에이전트가 정확하게 판단하고 보안상 안전한 코드를 작성할 수 있도록 계획을 수립해줘.
- 혹시 내가 빠뜨리고 알려주지 못한게 있다면 감안해서 빠르고 안정적이고 안전한 워드프레스 테마 개발계획을 수립해줘.
- 잘 부탁할께~~ 제미니~이렇게 입력하고 연구를 시작하면 잠시 후 개발계획서를 만들어주는데 이 개발 계획서를 구글 드라이브에 docs 문서로 저장한 다음 구글 드라이브에 가서 파일을 열고 마크다운 문서(.md)로 PC로 다운로드 한다.
다운로드 한 문서를 VSCode에서 프로젝트로 사용할 새 폴더를 만들고 agent.md 파일로 저장한다. 그리고 VSCode에 Gemini Code Assist 익스텐션을 설치하고 아래 화면과 같이 Gemini Code Assist의 Agent 모드를 켜준다.
Agent 모드를 켜 줘야 로컬 PC에 코드를 저장할 파일을 생성하고 이미 존재하는 파일을 열어 내용을 읽거나 수정하여 저장할 수 있다. Agent 모드를 켜지 않으면 현재 VSCode에서 열려있는 창의 내용만 Gemini가 읽고 수정할 수 있다.
그리고 “File” 메뉴의 “Open Folder” 메뉴에서 agent.md 파일이 있는 폴더를 연 다음 Gemini와의 대화 창에 @agent.md 파일을 참조해서 워드프레스 테마를 코딩해달라고 지시를 한다. 그러면 Gemini가 개발 계획서의 내용대로 테마를 뚝딱~ 만들어 준다. 이후 수정할 때도 Gemini는 agent.md 파일을 참조해서 해당 프로젝트가 어떤 프로젝트인지를 파악하기 때문에 프로젝트를 일일이 설명하지 않아도 된다.
물론 개발계획서에 없는 추가 기능들도 대화창에서 요구하면 뚝딱~뚝딱~ 잘 만들어준다. 하지만 가끔 뻘짓도 한다. (이럴 땐 “인간적이네..” 싶기도 하다.) 그래서 제미니의 뻘짓을 잡아낼 정도의 프로그래밍 지식이 있으면 더 좋다. 그럴 때면 “얘가 날 시험하나?”라는 생각도 든다.
추가 기능들을 agent.md의 개발 계획서에 추가해 달라고 하면 agent.md 파일도 잘 관리할 수 있다.
Gemini가 만들어준 워드프레스 테마 설치
Gemini가 만들어준 코드들은 모두 VSCode에서 Open한 폴더에 생성된다. 탐색기에서 생성한 폴더의 상위 폴더에서 생성한 폴더를 통채로 zip 파일로 압축한다. (꼭 상위폴더에서 생성한 폴더를 선택해 “보내기”를 통해 zip으로 압축할 것을 권한다.)
그리고 다음과 같이 워드프레스의 “모양” – “테마” 메뉴에서 압축한 zip 파일을 사용해 설치하면 된다. 이후의 사용법은 다른 테마들과 동일하다.아래 화면에 “활성” 상태의 테마가 필자가 만들어 설치한 테마 파일이다. 스크린샷도 내 맘대로다.
현재 이 블로그의 테마가 바로 Gemini의 도움을 받아 만든 자작 테마다. 나는 워드프레스의 테마를 만들기 위해 그 어떤 워드프레스 문서도 참고하지 않았다.
단, 워드프레스 대문과 카테고리에 표시할 글목록 페이지를 만들기 위해서 이 테마와 함께 앞의 포스트에서 만든 Postlist 플러그인을 사용해 대문페이지와 카테고리의 글 목록 페이지를 만들 것을 권한다.
필자의 현재 블로그는 이렇게 바이브 코딩을 통해 제작한 테마와 플러그인을 사용해 구성하고 있다. 일부 SEO 관련 플러그인을 비롯해 관리를 위한 플러그인만 상용 플러그인을 사용하고 있다.
이 테마는 github에 공개되어 있으니 필요하다면 언제든 마음껏 퍼가서 사용해도 된다. 라이선스? 그런거 없다.
[Github 가기] https://github.com/taeho9/wp_taeho_theme.git
#워드프레스 #테마만들기
이제 일반인도 바이브 코딩으로 테마를 만들 수 있는 시대가 되었네요. 저도 필요한 코드만 남겨서 최대한 가벼운 테마를 만들면 좋겠다는 생각이 들었지만, 추후에 레이아웃을 변경하고 싶을 때 쉽게 레이아웃을 바꿀 수 있도록 GP 테마를 사용하고 있습니다.😄
정말 워드프레스에 조금만 관심이 있어도 충분히 테마를 만들 수 있는 시대가 된 것 같습니다. 저도 GP테마를 사용하다가 자작 테마를 만들어 조금씩 수정하는 것도 재미있겠다 싶어서 시작한거죠. 워드프레스 전문 카페를 운영하시니 워프 전문가이신 워드님은 더 좋은 테마를 만드실 수 있을 겁니다~ ^^