Lovable을 WordPress로: 프로젝트를 실제 테마로 변환하기

원본과 결과를 모두 열 수 있는 Lovable과 WordPress 예시

아래 내용은 모두 저희가 실제로 실행한 변환을 설명합니다. 원본은 사진 포트폴리오인 Lovable 앱 bruce-banner.lovable.app입니다. 결과는 WordPress에서 실행되는 bruce.html2wp.dev입니다. /wp-admin에서 사용자 이름 demo, 암호 demo로 관리자 화면에 들어갈 수 있습니다.

이 변환으로 bruce-banner 테마에 페이지 5개와 글 5개가 만들어졌습니다. 변환당 최대 5페이지를 키 없이 변환하는 무료 요금제 안에 들어가는 규모입니다. 계속 읽기 전에 두 사이트를 나란히 열어 두세요. 이 글은 두 사이트의 차이에 관한 것이므로, 그 차이를 직접 측정해 볼 수 있습니다.

Lovable 변환 두 건도 같은 방식으로 열어 볼 수 있습니다. 먼저 spark-remix-kindred.lovable.app은 WooCommerce 기반 니트웨어 쇼핑몰인 terra.html2wp.dev가 되었습니다. 그리고 bloom-echo-remix.lovable.app은 웨딩 사진작가 사이트인 soria.html2wp.dev가 되었습니다. 세 사이트 모두 WordPress 관리자 로그인은 demo / demo입니다.

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

빌드, 브라우저 작업, 모든 검사는 사용자의 컴퓨터에서 실행됩니다. 테마를 생성하는 서비스로는 빌드된 결과물만 갑니다. 그래서 ZIP을 업로드하는 웹 서비스가 아니며, 미리 알아 두어야 할 요구 사항이 있습니다.

• 빌드와 로컬 스크립트를 위한 Node 20 이상.
• Playwright와 Pillow 패키지가 설치된 Python 3. Playwright는 실제 브라우저를 조작하며, 이 방법으로 React 앱이 HTML로 바뀝니다.
• docker compose 명령이 포함된 Docker. 컴퓨터에서 임시 WordPress를 시작하며, 변환기는 사용자가 보기 전에 그곳에서 테마를 검사합니다.
• php-cli. 모든 PHP 파일은 ZIP에 들어가기 전에 문법 검사를 거치기 때문입니다.
• jq, curl, bash, tar. 대상 WordPress는 6.6 이상이어야 합니다.

플러그인은 첫 단계에서 이 모든 것을 확인하고 목록 두 개를 출력합니다. 첫 번째 목록은 사용자 폴더 안에 스스로 설치할 수 있는 것입니다. 두 번째 목록은 Docker, 새 Node, Docker 시작처럼 사용자가 결정해야 하는 것입니다. 두 번째 그룹은 절대 몰래 설치하지 않습니다.

플러그인 설치

플러그인은 에이전트별로 하나씩, 두 번 게시합니다. Claude Code용과 Codex용의 스크립트와 버전 번호는 같습니다. 사용하는 쪽을 고르세요.

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 데스크톱 앱(스크린샷이 있는 가이드)에서 실행할 수 있습니다.

Lovable 프로젝트를 디스크로 가져오기

운영 중인 사이트의 주소는 지원되는 입력이 아니며, 이는 의도된 것입니다. 게시된 페이지의 사본에는 렌더링된 결과만 남습니다. 어떤 경로가 있는지, 컴포넌트가 무엇인지, 빌드가 무엇을 만드는지 같은 소스 코드의 정보는 사라집니다.

그래서 입력은 폴더입니다. Lovable은 프로젝트를 GitHub 저장소와 동기화합니다. 저장소를 연결하고 클론하면 프로젝트가 로컬에 생깁니다. 이번 달 Lovable 화면이 어떻게 바뀌었든, 필요한 것은 저장소입니다. Lovable이 사이트를 빌드할 때 쓰는 바로 그 파일들입니다.

git clone https://github.com/<you>/<your-lovable-project>.git
cd <your-lovable-project>

npm install이나 빌드를 먼저 실행할 필요는 없습니다. 변환이 직접 처리합니다.

"convert this project" 입력하기

그 폴더에서 에이전트를 연 상태로 다음을 입력하세요.

/html2wp:html2wp

convert this project

Codex에는 슬래시 명령이 없습니다. 대신 convert this project into a verified WordPress block theme라고 말하면 Codex가 스스로 스킬을 찾습니다. Claude Code든 Codex든 이 문장이 지시의 전부입니다. 설정 파일을 쓸 필요도, 빌드 명령을 고를 필요도 없습니다.

페이지 수와 컴퓨터 속도에 따라 Flash는 약 30분, Full은 약 1시간이 걸립니다. 대부분 자동으로 진행되며 단계가 끝날 때마다 진행 상황을 알려 주므로, 조용히 기다리게 되지는 않습니다.

Lovable을 WordPress로 변환할 때 React에 일어나는 일

이것이 Lovable 프로젝트에서 추가되는 단계입니다.

예전 Lovable 앱(React와 Vite)에는 index.html이 하나뿐입니다. 그 본문은 React 앱이 마운트되는 빈 요소와 스크립트 태그뿐이라서 변환할 것이 없습니다. 먼저 변환기가 프로젝트를 빌드합니다. 그다음 레코더가 지켜보는 가운데 실제 브라우저가 모든 경로를 돌아봅니다. 결과는 경로마다 하나씩 만들어지는 정적 HTML이며, 나머지 과정에 필요한 것이 바로 이것입니다. TanStack Start로 만든 새 프로젝트는 이미 페이지를 서버에서 렌더링합니다. 그래도 변환기는 프로젝트를 빌드하고 모든 경로를 같은 방식으로 돌아봅니다.

레코더가 담아내는 것

• JavaScript가 실행된 뒤에만 존재하는 상태. 펼쳐진 아코디언, 드롭다운의 내용, 스크립트가 바꾸는 클래스가 여기에 해당합니다. 레코더는 이를 요소의 데이터로 저장하고, 작은 범용 런타임이 다시 재생합니다. 누구도 기억에 의존해 손으로 작성하지 않습니다.
• 픽셀 단위의 스크롤 기준점. scrollY > 40에서 바뀌는 헤더는 누군가 정한 숫자를 씁니다. 레코더는 그 숫자를 찾아 정확한 위치를 계산합니다. 대충 반올림한 값을 쓰면 헤더가 계속 엉뚱한 순간에 바뀝니다.
• "하나만 열릴 수 있는" 관계. A를 열고 B를 엽니다. A가 닫혔을까요? 요소를 하나씩 기록해서는 알 수 없으므로, 레코더가 이를 따로 테스트합니다.
• 스크롤 애니메이션도 유지됩니다. 레코더가 애니메이션을 담아내고, 테마는 원본과 똑같이 재생합니다. JavaScript가 없어도 콘텐츠는 보이고, 요소는 런타임이 실행되는 동안에만 숨겨지며, prefers-reduced-motion이 켜져 있으면 테마가 애니메이션을 건너뜁니다. 1:1 일치 여부는 애니메이션이 끝나 화면이 정지한 상태에서 측정합니다.

흉내 내지 않는 것

• 기록하지 못한 동작은 목록에 올라갑니다. 페이지마다 목록이 있습니다. 꼭 읽어 보세요.

이 단계에는 별도의 검사가 있습니다. 이후의 어떤 검사도 이 단계를 볼 수 없기 때문입니다. 변환기는 모든 경로를 실시간으로 캡처하고, 1440, 820, 390픽셀 너비에서 정적 캡처와 비교합니다. 차이가 있으면 이 단계는 실패합니다. 이후 단계는 모두 캡처에서 WordPress까지를 측정하므로, 여기서 생긴 결함은 그 검사들을 모두 빠져나갑니다.

건너뛸 수 없는 검토

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

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

보기에 맞는지와 함께 콘텐츠를 편집할 수 있는지도 확인하세요. 페이지가 픽셀 단위로 일치해도, 사이트 소유자가 FAQ나 기능 그리드를 편집하지 못할 수 있습니다. 실제로 그런 경우가 있었습니다. 질문 다섯 개짜리 아코디언이 똑같아 보였지만, 어떤 편집기에서도 편집할 수 없었습니다. 겉모습만 본 검토는 이를 통과시켰습니다. 그러니 페이지마다 반복되는 각 그룹과 각 텍스트 블록을 wp-admin에서 편집할 수 있는지 확인하세요.

테마 설치

프로젝트 폴더에는 테마 ZIP과 그 옆의 CONVERSION-REPORT.md만 생깁니다. 그 밖에는 아무것도 없습니다. 빌드가 담긴 작업 폴더는 프로젝트 밖의 캐시 폴더에 있으므로 저장소가 깔끔하게 유지됩니다. 보고서는 읽는 사람이 사용자이므로 예외입니다. 보고서에는 변환이 다룬 범위, 검토에서 발견한 것, 모든 경고(허용 가능한 경고 포함), 아직 남은 작업이 적혀 있습니다.

WordPress에서 외모(Appearance) → 테마 → 새로 추가 → 테마 업로드로 가서 ZIP을 선택하고 활성화하세요. 테마는 독립적으로 작동합니다. 페이지, 블로그, 양식, 메뉴, SEO, 리디렉션이 모두 테마 자체 코드입니다. 실행하는 데 플러그인이 필요 없고, 저희 서버와 통신하지도 않습니다.

Lovable에서 WordPress로 옮긴 사이트를 편집하는 세 가지 방법

블로그 글은 일반 WordPress 글이 되므로 블록 편집기에서 바로 쓸 수 있습니다. 페이지 텍스트는 HTML에 그대로 남습니다. 코드 없이 페이지를 편집하려면 알아 둘 만한 선택지가 두 가지 있으며, 그중 하나는 페이지 빌더입니다.

디자인을 지키려고 변환하는 것이라면, 페이지 빌더는 바로 그 디자인을 망가뜨립니다. 디자인을 손으로 빌더에 옮기면 사이트가 디자인과 달라지기 시작하며, 이 변환기는 그래서 존재합니다. 하지만 디자인이 출발점일 뿐이고 클라이언트가 다음 분기에 어차피 절반을 다시 만들 예정이라면, Elementor를 건네도 괜찮습니다.

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

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

Lovable 또는 WordPress? 하나만 고를 필요는 없습니다

흔히 둘 중 하나를 골라야 한다고 생각합니다. 콘텐츠 사이트라면 그럴 필요가 없습니다. Lovable에서는 디자인을 빠르게 만듭니다. WordPress에서는 사이트가 몇 년 동안 유지되고 다른 사람이 편집합니다. 변환은 앞의 것을 유지하고 뒤의 것을 옮겨 줍니다. 테마는 어떤 WordPress 호스팅에서도 작동하므로, 사이트가 만든 곳에 계속 머물 필요가 없습니다.

옮겨지는 것은 웹사이트입니다. 페이지, 블로그, 양식, 메뉴, SEO, 리디렉션이 여기에 해당합니다. 옮겨지지 않는 것은 그 뒤의 애플리케이션입니다. 로그인, 데이터베이스, 자체 API 호출이 여기에 해당합니다. Lovable 프로젝트가 대부분 이런 기능이라면 Lovable에 그대로 두세요. 쇼핑몰은 그 중간에 있습니다. Pro 라이선스가 있으면 Terra Studios처럼 상품 카탈로그가 WooCommerce가 됩니다.

Lovable을 WordPress로 변환하는 비용과 거부되는 경우

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

Pro 라이선스는 페이지 제한을 없애고 변환과 재실행을 무제한으로 만듭니다. 쇼핑몰을 WooCommerce로 바꾸는 단계도 추가됩니다. 이 단계는 무료 요금제에는 전혀 없습니다. 앱은 쇼핑몰이 있는 사이트의 무료 변환을 절반만 하지 않고 처음부터 거부합니다. Pro는 월 €49 또는 연 €490이며, 가격은 요금 페이지에 있습니다. 베타 기간에는 첫 결제가 30% 저렴하고, 키는 이메일로 도착합니다.

미리 알아 둘 만한 거부 사례가 두 가지 있습니다. 경로가 레코드별로만 존재하는 React 프로젝트(렌더링할 데이터가 없는 /product/:id)는 변환할 사이트가 아니라 웹 앱입니다. 변환기는 템플릿의 아무 인스턴스 하나를 내보내는 대신 이를 공개적으로 거부합니다. 그리고 이것은 베타입니다. 검사는 대부분의 차이를 잡아내지만 전부는 아닙니다. 그래서 페이지별 검토는 선택적인 마무리가 아니라 과정의 일부입니다.

전체 과정의 단계별 안내는 html2wp 앱 문서에 있습니다. 원본과 결과를 모두 열어 볼 수 있는 Lovable 변환 세 건은 이 글 첫머리의 예시에 있습니다.