ChatGPT Codex로 Blogger XML 테마 만들기: 블로그 4개에 적용한 제작 후기

구글 Blogger로 여러 블로그를 운영하다 보면 기본 테마나 기존 스킨에서 불편한 점이 하나둘 눈에 띈다. 나 역시 메뉴와 썸네일 문제를 겪으면서 테마를 손볼 필요를 느꼈다.

​

처음에는 기존 Blogger XML 테마에서 메뉴가 제대로 표시되지 않거나 썸네일이 사라지는 문제부터 해결하려 했다. 사용 중이던 공개 사제 XML 파일도 점점 복잡하고 무거워져, 전체 구조를 정리할 시점이었다.

​

하지만 수정할 항목을 살펴볼수록 기존 스킨을 계속 덧대기보다 디자인과 구조를 새로 만드는 편이 낫겠다는 생각이 들었다.

그래서 이번에는 ChatGPT Codex 6 아스트라와 6.1 SOL을 활용해 구글 Blogger 테마를 처음부터 제작하기로 했다.

​

원하는 디자인과 기능을 구체적으로 설명하고, Codex가 코드를 고치면 결과를 직접 확인하는 방식으로 진행했다.

막연한 홈페이지 제작 요청이 아니라, 실제 운영 중인 블로그 네 곳의 테마를 대상으로 한 작업이었다.

첫 번째 기준은 PC와 모바일 어디서든 글을 편하게 읽을 수 있어야 한다는 것이었다.

눈에 띄는 장식보다 읽기 쉬운 구성을 우선했다. 기존 메뉴와 링크는 가능한 한 유지하고, 필요한 기능을 더해 달라고 요청했다.

​

주요 요구사항은 아래와 같이 정리했다.

• PC·모바일 반응형 디자인

• 기존 메뉴와 카테고리 링크 유지

• 최근글·인기글 표시

• 썸네일과 블로그 검색 기능

• 다크 모드 지원

• 메인 화면 글 목록 24개 표시

• 다음 페이지 이동 기능

• 목록 중간에 적당히 광고 배치

​

메인 화면은 특히 글 하나씩 한 줄로 나열하는 목록형 디자인으로 구성했다. 제목과 썸네일을 한눈에 확인할 수 있게 배치하고, 한 페이지에 글 24개를 보여준 뒤 다음 페이지로 이동하도록 했다.

​

광고도 무작정 끼워 넣기보다 글 목록 사이에 적절히 배치하도록 조정했다.

이런 조건을 대화로 전달하면 Codex가 Blogger XML과 CSS, JavaScript를 수정하는 방식으로 작업했다.

처음부터 모든 기능이 한 번에 제대로 작동한 것은 아니다.

테마를 고치는 중 기존 메뉴가 사라지거나 썸네일이 표시되지 않는 문제가 생기기도 했다.

가장 기억에 남는 문제는 Blogger에서 지원하지 않는 조건식 때문에 XML 해석 오류가 발생한 일이었다.

코드가 그럴듯해 보여도 Blogger 편집기가 받아들이지 않으면 테마에 적용할 수 없다.

​

이럴 때는 편집기에 표시된 오류 메시지를 그대로 Codex에 전달하고, 원인을 확인해 해당 부분을 다시 수정하도록 했다.

메인 글 목록의 화살표도 처음에는 모양만 있고 실제 페이지 이동은 되지 않았다. 링크가 제대로 작동하도록 다시 손봤다.

​

이 과정을 거치며 분명히 알게 된 점은 AI가 코드를 작성했다고 해서 작업이 저절로 마무리되는 것은 아니라는 것이다.

미리보기와 실제 블로그에서 메뉴를 눌러 보고, 글 목록과 썸네일이 의도대로 보이는지 확인하는 테스트가 꼭 필요했다.

이번 작업의 중요한 목표는 네 블로그의 디자인을 통일하면서도 각 사이트에 필요한 기능은 그대로 살리는 것이었다.

​

사이트마다 코드를 완전히 따로 관리하면 공통 디자인을 바꿀 때 같은 수정을 네 번 반복해야 한다.

이를 줄이기 위해 공통 CSS와 JavaScript는 GitHub에서 관리하고, 블로그별 메뉴와 설정은 각 XML에 따로 유지하도록 구조를 나눴다.

덕분에 공통 디자인은 한곳에서 관리하면서도 사이트마다 다른 성격과 기능을 반영할 수 있었다.

​

또 기본 도메인과 trip 도메인에는 기존 태그를 이용한 5개 언어 선택 기능을 유지했고, news 블로그에는 지역별 뉴스를 고르는 기능을 적용했다.

같은 디자인 틀을 쓰되 각 블로그의 목적에 맞춰 기능을 달리한 것이다.

​

Google Blogger에 Cloudflare를 이용해 도메인을 연결하는 방법은 위 포스팅에서 확인할 수 있다.

수정과 점검을 거친 새 Blogger XML 템플릿을 실제 블로그에 적용했다.

PC와 모바일에서 번갈아 확인하며 메뉴, 썸네일, 검색, 페이지 이동 등 주요 기능이 정상적으로 작동하는지 살펴봤다.

ChatGPT Codex를 써 보며 가장 크게 느낀 것은 AI에 무엇을 만들어 달라고 하느냐만큼, 원하는 결과를 얼마나 구체적으로 설명하느냐가 중요하다는 점이다.

​

그저 예쁜 블로그를 요청하는 것과 글 목록 개수, 광고 위치, 기존 메뉴 유지 같은 조건을 명확히 제시하는 것은 결과에 차이를 만들었다.

오류가 났을 때도 막연히 안 된다고 하기보다 어느 화면에서 어떤 문제가 생겼는지 알려 주면 수정 방향을 찾는 데 도움이 됐다.

결국 이번 구글 Blogger 테마 제작은 AI가 모든 것을 알아서 끝낸 작업이 아니었다.

​

내가 요구사항을 정하고 Codex가 코드를 작성하고 고친 다음, 실제 블로그에서 결과를 확인하는 일을 반복해 완성했다.

웹디자인 경험이 많지 않아도 Blogger 스킨을 직접 바꿔 보고 싶다면 ChatGPT Codex 같은 AI 코딩 도구를 활용해 볼 수 있다. 다만 XML 오류가 없는지, 기존 기능이 유지되는지, 실제 사이트에서 제대로 작동하는지는 직접 확인해야 한다.

#구글블로거, #블로거테마, #구글블로거테마제작, #Blogger, #BloggerXML, #블로거스킨, #블로그테마, #테마제작, #ChatGPT, #ChatGPTCodex, #Codex, #아스트라6, #SOL6_1, #AI코딩, #AI블로그테마, #블로그디자인, #블로그꾸미기, #블로그운영, #블로그제작, #블로그개발, #반응형웹, #반응형블로그, #XML수정, #CSS, #JavaScript, #GitHub, #다크모드, #블로그SEO, #블로거테마후기, #AI활용후기