Claude Design을 WordPress로: 디자인을 테마로 변환하는 방법

Claude Design이 준 결과물은 무엇인가요?

Claude는 두 종류의 결과물을 만들며, 각각 다른 경로를 거칩니다. 변환에 걸리는 시간이 이에 따라 달라지므로, 시작하기 전에 어느 쪽인지 확인하세요.

Claude가 준 것	정체	경로
HTML 아티팩트	독립적인 .html 파일입니다. 코드, 스타일, 스크립트가 모두 파일 안에 있습니다.	이 글. 이미 정적 HTML이므로 변환기가 필요로 하는 입력 그대로입니다.
React 아티팩트	컴포넌트입니다. 페이지는 JavaScript가 실행된 뒤에야 나타나며, 주변 HTML은 앱이 마운트되는 빈 요소입니다.	Lovable 가이드: 같은 종류의 입력이고, 같은 추가 단계를 거칩니다.

잘 모르겠다면 파일을 열어 <body> 안을 보세요. 제목과 문단이 보이면 HTML 아티팩트이며, 이 글이 맞는 곳입니다. 본문이 빈 <div> 하나와 스크립트 태그뿐이라면 다른 종류입니다.

Claude Design에서 이미지까지 폴더로 내보내기

입력은 항상 내 디스크에 있는 폴더입니다. 운영 중인 사이트의 주소는 지원되는 입력이 아니며, 이는 의도된 것입니다. 게시된 페이지의 사본에는 렌더링된 결과만 남고, 소스 파일에 담긴 정보는 사라집니다.

그러니 Claude에서 디자인을 내보내고(아티팩트 다운로드), 폴더를 만들어 그 안에 index.html로 저장하세요. 디자인이 파일 밖의 이미지를 참조한다면, 코드가 기대하는 상대 위치에 맞춰 이미지를 파일 옆에 두세요.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

한 페이지인가요, 여러 페이지인가요?

아티팩트 하나는 한 페이지이며, 한 페이지짜리 사이트는 아무 문제 없이 변환됩니다. 그 페이지가 테마의 첫 페이지가 됩니다. 소개 페이지와 연락처 페이지가 있는 사이트를 원한다면 Claude에게 그 페이지들도 요청하고, 각각 별도의 .html 파일로 같은 폴더에 저장하세요. 파일 이름이 중요합니다. 분석 단계가 파일 이름을 읽고 blog.html이나 about.html 같은 파일을 이름으로 이해합니다.

파일이 5개 이하라면 전체 변환이 무료 요금제 안에 들어갑니다.

Claude Design을 WordPress로 변환할 때 컴퓨터에 필요한 것

짧은 경로도 사용자의 컴퓨터에서 실행되며, 요구 사항은 줄어들지 않습니다. 브라우저와 임시 WordPress는 결과를 만들기 위해서가 아니라 검사하기 위해 있습니다.

• Node 20 이상, 그리고 Playwright와 Pillow 패키지가 설치된 Python 3.
• docker compose 명령이 포함된 Docker. 컴퓨터에서 임시 WordPress를 시작하며, 변환기는 사용자가 보기 전에 그곳에 테마를 설치합니다.
• php-cli. 모든 PHP 파일은 ZIP에 들어가기 전에 문법 검사를 거치기 때문입니다.
• jq, curl, bash, tar. 대상 WordPress는 6.6 이상이어야 합니다.

첫 단계에서 이 모든 것을 확인합니다. 사용자 폴더 안에 스스로 설치할 수 있는 것과 사용자가 결정해야 하는 것을 구분합니다. 요청하지 않으면 Docker를 대신 설치하지 않습니다.

Claude Design을 WordPress로 변환하기

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

그다음 어디에서든 다음을 입력하세요.

/html2wp:html2wp

convert ./my-site

폴더 경로가 지시의 전부입니다. 설정 파일을 쓸 필요도, 빌드 명령을 고를 필요도 없습니다. Codex에서는 convert ./my-site with html2wp라고 입력하세요. 터미널에서 작업하고 싶지 않다면 같은 폴더를 html2wp 데스크톱 앱(스크린샷이 있는 가이드)에서 열 수 있습니다.

페이지 수와 컴퓨터 속도에 따라 Flash는 약 30분, Full은 약 1시간이 걸립니다. 한 페이지짜리 아티팩트는 짧은 쪽에 속하지만, 입력이 아무리 작아도 검사는 항상 전부 실행됩니다.

플러그인이 대신 정하는 것과 묻는 것

무엇이든 생성하기 전에 플러그인은 파일을 측정합니다. 페이지 목록을 만들고, 코드의 어느 부분이 공유되고 어느 부분이 고유한지 파악합니다. 디자인 토큰, 블로그처럼 보이는 것, 독립된 페이지도 찾아냅니다. 그런 다음 무엇을 할지 계획을 적고, 그 계획대로 변환합니다.

생성된 디자인에서는 두 가지 상황이 자주 생깁니다.

• 모든 디자인 변형이 유지됩니다. 페이지들의 헤더가 서로 다르면, 하나를 골라 나머지를 똑같이 맞추지 않습니다. 대신 변형마다 템플릿 파트를 만들고, 각 페이지를 실제로 쓰던 변형에 연결합니다. 서로 다른 Claude 대화에서 나온 아티팩트는 기억보다 차이가 큰 경우가 많습니다.
• 텍스트 안의 중괄호도 유지됩니다. 중간 단계는 JSX와 비슷한 형식을 씁니다. 그대로 두면 텍스트 안의 JSON이나 CSS 예시가 빌드를 깨뜨리거나 페이지에 {로 표시됩니다. 변환기가 이를 처리하므로 페이지에서도 중괄호는 중괄호로 남습니다.

카드, 후기, FAQ 같은 반복 그룹은 하드코딩된 마크업이 아니라 컬렉션으로 저장됩니다. 그래서 나중에 편집할 수 있는 것처럼 보이기만 하는 것이 아니라 실제로 편집할 수 있습니다.

건너뛸 수 없는 검토

변환기는 각 페이지를 원본과 나란히 한 이미지에 담고, 사용자는 모든 이미지를 위에서 아래까지 읽습니다.

어느 변환에서는 페이지 아래쪽 섹션 하나가 빠졌는데, 픽셀 비교 결과 차이가 0.4%에 불과해 검사를 통과했습니다. 숫자 기반 검사는 본질적으로 세 가지 결함을 볼 수 없습니다. 첫째는 완벽해 보이지만 아무 동작도 하지 않는 컨트롤입니다. 둘째는 템플릿의 출처가 된 한 페이지의 값이 하드코딩된 경우입니다. 셋째는 스크롤하거나 클릭하거나 양식을 제출한 뒤에만 드러나는 모든 것입니다.

콘텐츠를 편집할 수 있는지도 확인하세요. 페이지가 픽셀 단위로 일치해도 wp-admin에서 FAQ나 기능 그리드를 아무도 편집하지 못할 수 있습니다. 실제로 그런 일이 있었고, 이를 잡아낸 것은 자동 검사가 아니라 이 검토였습니다.

Claude Design을 WordPress로 옮긴 뒤 편집: 테마, Visual Edit, 페이지 빌더

폴더에 파일 두 개가 생깁니다. 테마 ZIP과 그 옆의 CONVERSION-REPORT.md입니다. 보고서에는 변환이 다룬 범위, 검토에서 발견한 것, 아직 남은 작업이 적혀 있습니다. 테마는 다른 WordPress 테마처럼 설치합니다(외모(Appearance) → 테마 → 새로 추가 → 테마 업로드).

테마는 독립적으로 작동합니다. 페이지, 블로그, 양식, 메뉴, SEO, 리디렉션이 모두 테마 자체 코드입니다. 실행하는 데 플러그인이 필요 없고, 저희 서버와 통신하지도 않습니다. 블로그 글은 블록 편집기에서 쓰고, 페이지 텍스트는 HTML에 그대로 남습니다. 코드 없이 페이지를 편집하려면 선택지가 두 가지 있는데, Visual Edit와 페이지 빌더입니다.

디자인이 출발점일 뿐이라면 페이지 빌더는 좋은 선택입니다. 디자인 자체가 납품물이라면 나쁜 선택입니다. 생성된 디자인을 WordPress에서 그대로 살리려고 변환하는 것이라면, 위젯으로 다시 만드는 순간 시작한 이유가 사라집니다. 하지만 다음 분기에 다른 사람이 레이아웃을 새로 짤 예정이라면, 그 사람의 Elementor 경험이 디자인 충실도보다 더 가치 있을 수 있습니다.

Visual Edit를 고른다면 Lite와 Pro 중 무엇을

AI 채팅은 본인의 API 키로 실행됩니다. 저희는 토큰을 판매하지 않으며, 비용은 제공업체와 직접 정산합니다.

가격, 그리고 변환이 거부되는 경우

키나 가입 없이 누구나 무료로 쓸 수 있습니다. 5페이지짜리 변환 3회와 재실행 총 5회가 제공됩니다. 두 횟수 모두 IP 주소별로 계산되므로, 주소 하나를 쓰는 사무실은 한도 하나를 받습니다. 무료 요금제는 도구 체험, 개인 사이트, 비상업적 작업을 위한 것입니다.

Pro 라이선스는 페이지 제한을 없애고 변환과 재실행을 무제한으로 만듭니다. 쇼핑몰을 WooCommerce로 바꾸는 단계도 잠금 해제합니다. 이 단계는 절대 무료가 아닙니다. 앱은 쇼핑몰이 있는 사이트의 무료 변환을 절반만 하지 않고 처음부터 거부합니다. Pro는 요금 페이지에서 월간 또는 연간으로 구매할 수 있으며, 베타 기간에는 첫 결제가 30% 할인됩니다.

주의할 점이 하나 있습니다. 이것은 베타입니다. 검사는 대부분의 차이를 잡아내지만 전부는 아닙니다. 그래서 각 페이지를 원본과 나란히 읽는 것은 선택적인 마무리가 아니라 과정의 일부입니다. 그리고 그래서 먼저 내 프로젝트를 무료로 변환해 보고 나서 신뢰해야 합니다.

전체 과정의 단계별 안내는 html2wp 앱 문서에 있습니다. 아티팩트가 React라면 Lovable에서 WordPress로 옮기는 가이드가 그 경로를 설명합니다.