클로드 디자인 내보내기: html2wp 앱에서 WordPress 테마로 변환하기
html2wp 앱에서는 터미널 없이 Claude Design의 디자인을 WordPress로 바꿀 수 있습니다. 클로드 디자인 내보내기는 디자인을 HTML로 저장하는 것으로 시작합니다. 그다음 앱에 추가하고 Flash 또는 Full을 고르면, 마지막에 디자인과 똑같이 보이는 WordPress 테마를 내려받습니다.
앱으로 WordPress 테마를 만들 때 필요한 것
- Apple 실리콘을 탑재한 Mac(M1 이상)과 macOS 12 이상.
- ChatGPT 계정. 변환은 사용자 본인 구독의 AI가 수행하므로, 크레딧 비용을 저희에게 따로 내지 않습니다.
- Claude Design에서 내보낸 파일: HTML 파일로 저장한 디자인입니다. 페이지가 여러 개라면 각각 별도 파일로 저장하세요.
앱이 먼저 빌드하거나 브라우저에서 열 필요가 없으므로, Claude의 HTML은 테마로 가는 가장 짧은 경로입니다. 무료 요금제는 최대 5페이지짜리 사이트 3개를 변환합니다. 클라이언트 작업에는 요금 페이지의 Pro 라이선스가 필요합니다.
설치, 환경 준비, 로그인
Mac용 앱을 내려받아 응용 프로그램 폴더로 옮기세요. "Settings"(설정)에서 Prepare environment를 클릭하면 앱이 Docker와 변환 환경을 내려받습니다. 그다음 Connect with ChatGPT로 로그인하세요. 각 단계는 앱용 Lovable 가이드에서 스크린샷과 함께 자세히 설명하며, Claude에서도 단계는 같습니다.
클로드 디자인 내보내기 파일을 앱에 추가하기
Claude Design에서 내보내려면 Claude에서 아티팩트를 .html 파일로 내려받으세요. 폴더를 만들고 그 안에 index.html로 저장합니다. 디자인이 파일 밖의 이미지를 참조한다면, 코드가 기대하는 위치에 맞춰 같은 폴더에 넣으세요. 소개나 연락처 같은 다른 페이지는 그 옆에 about.html, contact.html로 둡니다. 앱은 파일 이름으로 어느 페이지가 무엇인지 판단합니다.
앱에서 New project(⌘N)를 클릭하고, 출력은 "HTML WordPress theme"을 그대로 두고 "Choose a folder"를 고르세요. 폴더를 ZIP으로 압축했다면 대신 "Import a ZIP"을 쓰세요.
WordPress 테마를 위한 Flash 또는 Full
Flash가 기본값입니다. 각 단계를 한 번씩 실행하며 약 30분이 걸립니다. Full은 모든 검사를 실행하고 오류를 고치려고 시도하므로 약 1시간이 걸립니다. 한 페이지짜리 디자인은 대개 짧은 쪽에 속하지만, 검사는 그래도 전부 실행됩니다.
변환하는 동안 "Overview" 탭에 앱이 하는 일이 표시됩니다. 잠시 멈추려면 Stop conversion을 클릭하고, "Continue"로 다시 이어 가세요.
앱에서 디자인 확인하기
Compare 탭은 원본과 WordPress 버전을 데스크톱 너비와 모바일 너비에서 나란히 보여 줍니다. 자동 검사가 대부분의 차이를 잡아내지만 전부는 아니므로, 모든 페이지를 직접 훑어보세요. 맞지 않는 부분이 있으면 채팅에 적으세요. 변경은 미리보기에 바로 반영되고, "Make release"가 새 버전의 테마를 패키징합니다.
클로드 디자인 내보내기 결과를 WordPress 테마로 저장하기
Exports 탭에서 WordPress 테마 옆의 "Save"를 클릭해 ZIP을 저장하세요. WordPress에서는 외모(Appearance) → 테마 → 새로 추가 → 테마 업로드에서 업로드합니다. 테마는 독립적으로 작동합니다. 페이지, 양식, 메뉴, SEO가 플러그인 없이 작동합니다.
Visual Edit 에디터를 추가하면 클라이언트가 클릭해서 편집할 수 있습니다. 터미널에서 작업한다면 Claude Code와 Codex용 플러그인 가이드가 같은 변환을 다룹니다.