요즘은 AI 덕에 웹사이트 만들기가 참 쉬워졌죠? 워드프레스도 마찬가지입니다. AI로 워드프레스 사이트를 만드는 방법도 꽤 다양해졌죠. 크게 보면 세 갈래가 있습니다:
- 프롬프트 빌더. WordPress.com AI 빌더처럼 설명을 입력하면 호스팅된 사이트 초안을 만들어 줍니다.
- 코딩 에이전트. Codex나 Claude Code 같은 에이전트가 테마와 플러그인 코드를 직접 짜고 로컬 워드프레스에서 돌려 봅니다.
- 사이트를 조작하는 에이전트. 워드프레스 7.0의 Abilities API와 MCP Adapter로 에이전트가 운영 중인 사이트를 다룹니다. 이 방식은 일전에 따로 정리한 적이 있구요.
이 글은 두 번째 방식입니다. 어쩌면 이런 생각이 들 수도 있습니다(저도 처음엔 그랬구요).
굳이 이런 스킬이나 도구들 쓸 필요 있나? 그냥 AI 에이전트에게 요건 지정하고 워드프레스 테마 만들어 줘 하면 되는 거 아냐?
맞습니다. 그래도 됩니다. 그 답이 궁금하다면 조금 시간을 내어 끝까지 읽어 주세요.
이 글에서는 Codex에 WordPress Studio를 연결해서 가상의 동네 카페 ‘골목커피’ 사이트를 만들어 봅니다. 로컬에서 만들고 확인하는 데까지만 다루고, 운영 서버 배포는 생략합니다.
※ 2026년 11월 9일 기준, Codex(ChatGPT 데스크톱 앱, GPT-6.1 Sol), WordPress Studio 2.1.1, 워드프레스 7.1.4로 실습했습니다.
WordPress Studio 준비하기
WordPress Studio(이하 ‘Studio’)는 내 컴퓨터에서 워드프레스 사이트를 띄워 주는 데스크톱 앱입니다. 자체 AI 에이전트(Studio Code)도 들어 있지만, 여기서는 Codex가 사이트를 다룰 수 있게 해 주는 로컬 환경으로만 씁니다.
Studio를 설치하고 사이트 목록의 + 버튼을 눌러 빈 사이트(Blank site)를 하나 만듭니다. 이름은 golmokcoffee로 했습니다.
그런데 사이트를 만들고 나서 사이트 폴더(~/Studio/golmokcoffee)를 열어 보면 워드프레스 파일 말고도 낯선 파일이 몇 개 보입니다:
AGENTS.md,CLAUDE.md: 에이전트가 처음 읽는 안내 파일.STUDIO.md와DESIGN.md를 따르라고 적혀 있습니다.STUDIO.md: Studio 사이트에서 일하는 법.wp대신studio wp를 쓸 것, 데이터베이스가 MySQL이 아니라 SQLite라는 점, 클래식 테마 대신theme.json기반 블록 테마로 만들 것 같은 규칙이 들어 있습니다.
Studio가 사이트를 만들 때 에이전트용 작업 지침까지 같이 깔아 두는 거죠(사람용 README보다 에이전트용 README를 먼저 챙기는 셈이랄까요). Codex는 작업 폴더의 AGENTS.md를 먼저 읽으니, 자연스럽게 이 지침을 따라 일하게 됩니다. 작업 중에는 사이트의 색과 간격을 정리한 DESIGN.md도 생기구요.
설정 → 스킬에서는 ‘블록 테마’ 같은 스킬을 골라 켤 수도 있습니다. 켜면 사이트 폴더의 .agents/skills/에 스킬 파일이 들어갑니다. 이번 실습 결과물은 이 스킬을 켜기 전에 만든 것입니다.
※ 여러 에이전트용 플러그인으로 묶은 build-with-wordpress 저장소도 있지만, Studio MCP만 연결해도 지침과 스킬이 따라오기 때문에 여기서는 쓰지 않았습니다.
Codex에 Studio MCP 연결하기
이제 Codex와 Studio를 이어 볼까요? Studio의 설정 → MCP 화면에 방법이 나와 있습니다.
먼저 Studio CLI를 설치하고, Codex에 wordpress-studio MCP 서버를 추가합니다.
npm install -g wp-studio
codex mcp add wordpress-studio -- studio mcpCodex CLI가 없다면 ~/.codex/config.toml에 직접 넣어도 됩니다. ChatGPT 데스크톱 앱의 Codex도 이 설정을 읽어서, 설정 → 플러그인 → MCP 목록에 wordpress-studio가 나타납니다.
# ~/.codex/config.toml
[mcp_servers.wordpress-studio]
command = "studio"
args = ["mcp"]Codex의 작업 폴더를 사이트 폴더로 정하고 연결이 됐는지 확인해 봅니다.
7초 만에 골목커피 사이트가 실행 중이라고 알려 주네요. 이 MCP 서버로 Codex는 사이트를 만들고 켜고 끄는 일부터 WP-CLI 실행, 블록 테마 뼈대 만들기, 블록 마크업 검증, 화면 캡처까지 할 수 있습니다.
요건만 주고 사이트 만들기
Codex에 준 요건은 마크다운 문서 하나입니다. 가게 정보(주소, 전화, 영업시간), 페이지 5개(홈, 메뉴, 원두, 소개·오시는 길, 소식), 디자인 방향(“커피향 드는 골목, 로스팅한 원두 색”), 그리고 운영 조건을 적었습니다. 운영 조건은 이렇습니다:
- 카페 사장은 개발자가 아니니 관리자 화면(사이트 에디터)에서 직접 고칠 수 있어야 한다
- 영업시간, 메뉴, 이번 주 원두처럼 자주 바뀌는 정보는 한 곳만 고치면 되게 한다
테마 구조나 theme.json 같은 기술적인 지시는 일부러 넣지 않았습니다. 요건 전문은 예제 저장소에 올려 두었습니다.
요건을 붙여 넣자 Codex는 “WordPress Studio의 사이트 제작 스킬을 적용하겠다”고 밝히고 일을 시작합니다. 색은 크림색과 짙은 원두색으로, 홈 첫 화면 아래에는 영업시간과 주소를 두겠다고 스스로 방향을 정하구요. 약 5분 뒤, 모바일과 데스크톱 화면까지 확인했다며 결과를 알려 줍니다.
카페 사장님이 무엇을 어디서 고치면 되는지까지 표로 정리해 줬네요. 처음 결과에는 이미지가 없어 좀 허전해서, 같은 대화에서 커피잔 SVG와 원두 이미지를 추가로 부탁했습니다. 그렇게 완성된 홈 화면입니다.
결과물 확인하기
그럼 Codex가 무엇을 만들었는지 열어 볼까요? 테마 폴더(wp-content/themes/golmokcoffee)에는 style.css, theme.json, templates/, parts/ 정도만 있습니다. 블록 테마로 치면 최소 구성에 가깝죠.
정작 가게 정보는 테마 파일에 없습니다. Codex는 영업시간·주소, 대표 메뉴, 이번 주 원두를 동기화 패턴(synced pattern)으로 만들어 데이터베이스에 넣고, 각 페이지가 이 패턴을 불러다 쓰게 했습니다. 영업시간을 고치려면 사이트 에디터의 패턴 화면에서 패턴 하나만 고치면 되는 거죠.
여기서 “푸터에 전화번호 넣어줘”라고 한 번 더 시켜 봤습니다.
전화번호를 그냥 푸터에 적어 넣지 않고, 전화번호만 담은 패턴을 따로 만들어 푸터와 방문 안내가 같이 쓰게 바꿨네요. 처음 요건의 “한 곳에서 관리”를 기억하고 있는 거죠.
몇 가지를 더 점검해 봤습니다:
- 토큰화: 색과 크기를
theme.json에 정의한 값(프리셋)으로 쓰는지. 블록 속성에 색상값이나 px를 직접 쓴 곳이 없고, 색은 모두 팔레트 6색을 씁니다. - 블록 유효성: 사이트 에디터에서 페이지와 템플릿을 열어도 “Invalid block” 같은 경고가 뜨지 않습니다.
- 패턴 수정: 사이트 에디터에서 패턴을 고쳐도 모든 페이지에 문제없이 반영됩니다.
토큰화는 테마 폴더에서 아래 명령으로 확인했습니다. 아무것도 나오지 않으면 통과입니다.
grep -rnE '#[0-9a-fA-F]{3,8}\b|[0-9]+px' templates parts다만 유의할 점도 있습니다:
- 콘텐츠가 데이터베이스에 있으니 테마 폴더만 복사해서는 사이트가 재현되지 않습니다.
- 이미지 주소가
http://localhost:8881/...로 저장되어, 운영 서버로 옮길 때는 주소를 바꿔 줘야 합니다(워드프레스의 원래 동작이구요). - 헤더·푸터 같은 템플릿 파트를 사이트 에디터에서 고치면 그 내용이 데이터베이스에 저장되어 테마 파일보다 우선합니다. 그 뒤에 에이전트에게 파일 수정을 시키면 화면에 반영되지 않을 수 있습니다. 이번 실습에서 직접 재현해 보지는 않았습니다.
마무리
여기서는 Codex에 Studio를 연결해서 요건 문서 하나와 추가 요청 두 번으로 카페 사이트를 만들어 봤습니다. 그동안 제가 직접 고친 파일은 하나도 없습니다.
처음 질문으로 돌아가 볼까요? 워드프레스 사이트는 보통 로컬에서 만들어 테스트한 뒤 운영 환경에 올리죠. 이때 Studio를 쓰면 여러모로 편합니다. 특히 Codex 같은 에이전트와 워드프레스를 잇는 MCP 설정과 스킬 설정을 Studio가 처리해 주니, 훨씬 쉽게 사이트를 만들 수 있습니다.
게다가 블록 테마는 클래식 테마보다 LLM이 학습한 지식이 적을 수 있습니다. WordPress/agent-skills도 AI가 예전 방식의 블록 마크업을 써서 “Invalid block”을 내는 문제를 막으려고 만든 스킬 모음이구요. 그래서 블록 테마 작업이라면 에이전트에게 그냥 맡기기보다 Studio와 연동해서, 스킬도 켜 두고 작업하기를 권합니다.
Codex를 쓰고 계시다면 오늘 카페 사이트 하나 만들어 보세요. 생각보다 금방입니다. 🙂