마케터가 Codex와 함께 WordPress 사이트를 Hugo 다국어 사이트로 바꾼 과정

나는 개발자가 아닌 마케터다. 콘텐츠와 브랜드 메시지는 직접 다룰 수 있었지만, 사이트의 구조와 코드를 바꾸는 일에는 개발자의 도움이 필요했다.

이번에는 Codex와 함께 247COMPASS의 WordPress 홈페이지를 Hugo 기반의 한국어·영어 사이트로 재구축했다. 콘텐츠 이전에서 시작해 다국어 구성, 검색 설정, 배포와 운영 도구까지 차례로 정리했다.

이 글은 그 경험을 돌아보며, 다음 구축에서도 사용할 수 있도록 정리한 작업 프레임워크다.

가장 중요한 원칙은 하나였다. 큰 틀을 먼저 확정하고, 세부 요소는 그다음에 완성한다.

1. 무엇을 만들었나?#

목표는 홈페이지를 보기 좋게 바꾸는 데서 끝나지 않았다. 마케터인 내가 콘텐츠를 계속 수정하고 운영할 수 있는 구조를 만드는 것이 중요했다.

2. 첫 번째 결정: 준비된 디자인을 활용한다#

새로운 디자인을 처음부터 만들기보다, 회사 홈페이지에 어울리는 테마를 선택했다. 단순한 구성과 비즈니스 중심의 화면이 마음에 들었다.

홈, 서비스, 회사소개, 프로젝트 목록과 상세 레퍼런스 페이지의 기본 구조를 유지하고, 우리 회사의 콘텐츠로 바꾸는 방향을 정했다.

Codex에는 참고 페이지를 보여주고 이 구조를 유지하면서 내용을 변경해 달라고 요청했다. 여기에 적용 범위, 유지할 요소, 변경할 파일과 확인 기준을 구체적으로 덧붙였다.

3. 큰 틀부터 만드는 이유#

버튼 색상이나 개별 문장을 먼저 완성해도, 페이지 구조가 바뀌면 다시 조정해야 한다. 그래서 메뉴와 콘텐츠 유형, 다국어 경로를 먼저 정하고 세부 요소를 다듬었다.

큰 틀부터 시작하되, 대표 페이지에서는 실제 콘텐츠를 넣어 검증하는 것이 좋다. 빈 레이아웃만으로는 긴 제목이나 결과 목록, 모바일 줄바꿈에서 생기는 문제를 발견하기 어렵기 때문이다.

4. 다시 구축한다면: 7단계 프레임워크#

아래는 이번 경험을 바탕으로 다시 정리한 권장 순서다. 실제 작업에 걸린 시간을 나타내는 일정표가 아니라, 앞 단계의 결정이 다음 단계의 기준이 되는 순서다.

각 단계의 완료 기준을 확인한 뒤 다음 단계로 넘어간다. 뒤늦게 구조 문제가 발견되면 해당 단계로 돌아가 기준을 수정하고, 영향을 받는 페이지를 확인한다.

5. 이번 경험에서 바꾸고 싶은 순서#

큰 틀부터 진행한 방향은 유지하되, 다음에는 아래 작업을 더 앞당기고 싶다.

6. 마케터와 AI는 무엇을 나누어 맡았나?#

AI가 구현을 도와주어도, 회사가 전달할 메시지와 콘텐츠의 사실관계는 내가 확인해야 했다. 원하는 결과와 검토 기준을 명확하게 설명하는 것이 내 역할이었다.

7. 오류를 줄인 것은 정밀한 요청이었다#

실제 요청은 짧은 지시 한두 문장으로 끝나지 않았다. 역할과 목표를 먼저 설명하고, 프로젝트 환경과 파일 경로, 단계별 요구사항, 변경 금지 대상, 검증 방법과 출력 형식까지 정리했다.

특히 프롬프트 안에서 사용하는 단어와 조건이 서로 충돌하지 않도록 다듬는 과정에 신경 썼다. 같은 대상을 다른 이름으로 부르거나, 유지하라는 지시와 변경하라는 지시가 섞이면 원하는 결과에서 벗어날 수 있기 때문이다.

예를 들어 다국어 콘텐츠 작업에서는 국문을 번역 기준으로 삼는다는 원칙과 검토 완료된 서비스 파일을 수정하지 않는다는 예외를 함께 명시했다. CTA 작업에서도 결과 바로 아래라는 위치, 국문·영문 적용 범위, 기본 URL과 새 탭 속성을 구분해서 전달했다.

이런 요청의 정밀도가 오류를 줄이는 데 크게 기여했다고 느꼈다. 참고 화면과 스크린샷은 설명을 보완했고, 결과는 프리뷰와 검증 보고를 통해 확인했다.

8. 완성된 것과 다음에 할 것#

만들려는 계획을 명확히 하고, 단계별 완료 기준에 따라 하나씩 완성하고 최적화하면 Codex와 즐겁게 만드는 빌더가 될 수 있다. 큰 틀에서 시작하고, 마지막에는 작은 디테일과 보이지 않는 기술 설정까지 챙기자.