시작하기 전에앱과 계정

앱으로 Lovable을 WordPress로 변환할 때 필요한 것

Apple 실리콘을 탑재한 Mac(M1 이상)과 macOS 12 이상.
ChatGPT 계정. 변환은 사용자 본인 구독의 AI가 수행하므로, 크레딧이나 토큰 비용을 저희에게 따로 내지 않습니다.
ZIP 또는 소스 코드 폴더 형태의 Lovable 프로젝트. 가져오는 방법은 아래에 있습니다.
디스크 공간. 실행 중인 변환 하나가 수 GB를 차지합니다.

Docker Desktop은 미리 설치하지 않아도 됩니다. 필요할 때 앱이 직접 내려받아 설치합니다. 무료 요금제는 최대 5페이지짜리 사이트 3개를 변환하므로, 작은 Lovable 사이트를 WordPress로 변환하기에는 충분합니다. 클라이언트 작업, 더 큰 사이트, WooCommerce 쇼핑몰에는 요금 페이지의 Pro 라이선스가 필요합니다.

html2wp 앱 설치

Mac용 앱을 내려받고, DMG 파일을 열어 html2wp를 응용 프로그램 폴더로 끌어 놓으세요. 이 가이드에서 버튼 이름은 화면에 표시되는 그대로 적었습니다.

환경 준비

앱의 "Settings"(설정)에서 Prepare environment를 클릭하세요. 앱은 필요하면 Docker를 내려받아 시작한 다음, 변환 환경과 WordPress 및 데이터베이스 이미지를 불러옵니다. 처음에는 몇 분이 걸립니다. Mac이 암호를 물어볼 수 있고, Docker가 라이선스 약관을 표시합니다.

html2wp 앱: 첫 변환 전 Prepare environment 버튼이 있는 설정 화면 — 첫 변환 전: 설정의 Prepare environment 버튼.

모든 준비가 끝나면 앱에 "Ready to work"가 표시되고 버튼이 Repair environment로 바뀝니다. 이 버튼은 나중에 환경이 망가졌을 때만 쓰면 됩니다.

환경 준비가 끝나고 Repair environment 버튼이 표시된 html2wp 앱 — 환경이 준비되었고, 사이드바에 "Environment ready"가 표시됩니다.

ChatGPT로 로그인

Connect with ChatGPT를 클릭하세요. 앱이 코드를 보여 주고, "Open sign-in page" 버튼이 OpenAI 페이지를 엽니다. 그곳에서 ChatGPT 계정으로 로그인하고 앱에 표시된 코드를 입력하세요. 암호는 OpenAI 페이지에서만 입력하므로 앱은 암호를 볼 수 없습니다.

OpenAI 페이지에서 코드로 html2wp 앱을 ChatGPT에 로그인하는 화면 — OpenAI 로그인 페이지에 앱의 코드를 입력합니다.

로그인한 뒤 "Conversion model"과 "Reasoning effort"를 고르거나 기본값을 그대로 두세요. Pro 라이선스가 있다면 설정에 키를 입력하고 Save & check를 클릭하세요. 무료 요금제는 키가 필요 없습니다.

ChatGPT 계정에 로그인되고 모델과 추론 수준 설정이 보이는 html2wp 앱 — 로그인한 계정과 변환에 쓸 모델 선택 화면.

변환Lovable에서 테마로

앱에 Lovable 프로젝트 추가하기

앱에는 운영 중인 사이트의 주소가 아니라 프로젝트의 소스 파일이 필요합니다. Lovable은 프로젝트를 GitHub 저장소와 동기화합니다. GitHub에서 저장소를 열고 Code → Download ZIP으로 내려받으세요. 앱이 직접 처리하므로 프로젝트를 빌드하거나 npm install을 실행할 필요는 없습니다.

앱에서 New project(⌘N)를 클릭하세요. "Output"에서 HTML WordPress theme을 그대로 두고 Import a ZIP을 선택하거나, 프로젝트 압축을 풀었다면 "Choose a folder"를 선택하세요. 앱은 사본으로 작업하므로 원본 파일은 바뀌지 않습니다.

html2wp의 New project 창: Lovable 프로젝트를 위한 WordPress 테마 출력과 폴더 또는 ZIP 가져오기 — New project: HTML WordPress theme 출력과 ZIP 또는 폴더 가져오기.

HTML WordPress 테마로 html2wp 앱에 가져온 Lovable 프로젝트 — 가져오기가 끝나면 앱이 원본 파일이 바뀌지 않았음을 확인해 줍니다.

Lovable을 WordPress로 변환할 Flash 또는 Full 선택

프로젝트 화면에서 앱이 Lovable 사이트를 WordPress로 얼마나 꼼꼼하게 변환할지 고릅니다. Flash가 기본값입니다. 각 단계를 한 번씩 실행하며 약 30분이 걸립니다. Full은 모든 검사를 실행하고 발견한 오류를 고치려고 시도하므로 약 1시간이 걸립니다. 정확한 시간은 페이지 수와 Mac의 속도에 따라 달라집니다.

Flash 또는 Full로 Lovable을 WordPress로 변환하기 전 html2wp 앱의 Lovable 프로젝트 — Flash와 Full 버튼, 그리고 테마 유형: HTML 또는 Astro 5.

WordPress가 필요 없다면 유형을 Astro 5로 바꾸세요. 그러면 앱이 정적 사이트를 빌드하고, 앱에서 바로 Cloudflare Pages에 배포할 수 있습니다.

변환 진행 과정

변환하는 동안 "Overview" 탭에는 변환 플러그인이 작업 중인 단계와 스스로 처리한 수정 사항이 표시됩니다. 대부분은 사용자 없이 진행됩니다. Lovable 프로젝트가 예전 React 앱이든 새 TanStack Start 프로젝트든, 앱은 먼저 프로젝트를 빌드하고 브라우저에서 열어 각 페이지를 완성된 HTML로 저장합니다. 그다음에야 그 HTML을 테마로 바꿉니다.

진행률과 Stop conversion 버튼이 보이는 html2wp 앱의 Lovable에서 WordPress로의 Flash 변환 — 진행 중인 Flash 변환과 진행률, 다음 단계.

잠시 멈추려면 Stop conversion을 클릭하고, "Continue"로 다시 이어 가세요. 플러그인이 어떤 단계에서 스스로 멈추면 Repair and continue로 오류를 고치고 계속 진행하게 할 수 있습니다.

Lovable 사이트와 WordPress 결과 비교하기

Compare 탭은 원본의 각 페이지를 WordPress 버전과 나란히 보여 줍니다. 데스크톱 너비(Desktop · 1440)와 모바일 너비(Mobile · 390)에서 차이를 퍼센트로 표시합니다. 모든 페이지를 직접 훑어보세요. 자동 검사는 대부분의 차이를 잡아내지만 전부는 아닙니다. 어느 변환에서는 섹션 하나가 통째로 빠졌는데 차이는 0.4%에 불과했습니다.

html2wp 앱의 Compare 탭: 왼쪽은 원본, 오른쪽은 WordPress 버전 — 데스크톱 너비에서 페이지를 비교하는 화면. 스크린샷은 예시 사이트입니다.

Preview 탭에서 "Open website"는 로컬 WordPress 사이트를, "WordPress admin"은 관리자 대시보드를 엽니다. 바꾸고 싶은 것이 있으면 오른쪽 채팅에 입력하세요. 변경 사항은 몇 초 안에 미리보기에 바로 나타납니다. 그런 다음 Make release를 클릭하면 앱이 미리보기에 보이는 그대로 테마를 패키징합니다.

채팅으로 변경한 뒤 Make release 버튼이 보이는 html2wp 앱 — 채팅으로 변경하면 앱이 변경 횟수와 Make release 버튼을 보여 줍니다.

Lovable을 WordPress로 변환한 뒤 테마 내보내기

Lovable을 WordPress로 변환하고 나면 완성된 파일은 Exports 탭에 있습니다. WordPress 테마 옆의 "Save"를 클릭해 ZIP을 저장하세요. PDF로 된 변환 보고서, 원본 프로젝트 ZIP, 그리고 Flash 변환 후에는 Astro 5 프로젝트도 이곳에 있습니다.

WordPress 테마 ZIP과 변환 보고서가 있는 html2wp 앱의 Exports 탭 — ZIP으로 된 테마, 변환 보고서, 원본 프로젝트.

WordPress에서 외모(Appearance) → 테마 → 새로 추가 → 테마 업로드로 가서 ZIP을 선택하고 테마를 활성화하세요. 페이지, 블로그, 양식, 메뉴, SEO, 리디렉션이 모두 테마에 들어 있어 플러그인 없이 작동합니다.

클라이언트가 페이지에서 바로 클릭해 텍스트와 이미지를 편집하게 하려면 Visual Edit 에디터를 추가하세요. 터미널에서 에이전트와 작업하는 편이 좋다면 Claude Code와 Codex용 플러그인 가이드가 같은 변환을 다룹니다.

Lovable을 WordPress로 변환: html2wp 앱 단계별 가이드