AI 어시스턴트로 페이지를 생성하거나 디자인 도구에서 HTML을 내보내면 작업의 대부분은 끝난 셈입니다. 그것을 유지 관리하기 쉬운 Elementor 페이지로 바꾸는 일은 짧고 반복 가능한 작업 순서로 처리할 수 있습니다.
1단계 — 이미지부터 먼저 정리하세요
사람들이 가장 자주 건너뛰는 단계이자, 재작업을 가장 많이 일으키는 단계입니다. AI는 실제 사진을 HTML에 넣을 수 없고, 디자인 도구에서 내보낸 파일은 로컬 경로나 데이터 URL을 쓰는 경우가 많습니다. 이 중 어느 것도 미디어 라이브러리 첨부 파일이 될 수 없습니다.
좋은 방법은 두 가지입니다. 먼저 이미지를 미디어 라이브러리에 업로드하고 HTML에서 실제 URL을 참조하거나, 빈 자리표시자를 받아들이고 나중에 Elementor에서 채우는 것입니다. 자리표시자 방식을 택한다면 모든 이미지에 의미 있는 alt 속성이 있는지 확인하세요. 그 텍스트가 슬롯의 캡션으로 남으므로 어떤 사진이 어디에 들어가는지 알 수 있습니다.
2단계 — 변환하기 좋은 마크업을 요청하세요
모델에게 프롬프트를 줄 때는 필요한 것을 분명히 말하세요. 시맨틱 태그, 섹션당 래퍼가 하나인 얕은 DOM, 하나의 style 블록에 모은 CSS, 인라인 SVG 대신 Font Awesome 아이콘 클래스, 그리고 외부 스크립트나 글꼴 없음입니다. 이 몇 가지 제약이 이후에 할 수 있는 어떤 작업보다 결과에 큰 영향을 줍니다.
3단계 — 올바른 옵션으로 변환하세요
- 네이티브 구성요소 모드: HTML 블록 하나가 아니라 편집 가능한 위젯을 얻을 수 있습니다.
- 아이콘: Elementor 아이콘 라이브러리에 매칭: 아이콘이 바꿔 끼울 수 있는 실제 아이콘이 됩니다.
- 색상과 글꼴: 브랜드가 정해진 사이트에 넣는다면 사이트 값을, 디자인을 재현한다면 원본 값을 쓰세요.
- 이미지: 실제 URL이 이미 있는 경우가 아니라면 빈 자리표시자를 쓰세요.
4단계 — 내보내기 전에 구조를 검토하세요
구조 맵을 여세요. 구성요소 수, 최대 중첩 깊이, 신뢰도 분류를 확인합니다. 빨간 행은 HTML로 유지된 것이므로 살펴볼 필요가 있습니다. 깊이가 깊다면 트리의 더 안쪽에 복사 루트를 설정하거나, 소스를 단순화해 다시 변환하세요. 입력을 고치는 것이 출력을 수리하는 것보다 거의 항상 빠릅니다.
5단계 — 붙여넣고 마무리하세요
Elementor에 붙여넣은 다음 표준 마무리 작업을 진행하세요. 버튼 링크를 다시 걸고, 호버 상태를 설정하고, 폼이나 메뉴를 연결하고, 자리표시자 이미지를 업로드하고, 데스크톱·태블릿·모바일 화면을 차례로 확인합니다.
6단계 — 재사용할 부분을 모아 두세요
가격표 행, 기능 그리드, 추천사 블록처럼 다시 쓸 것은 바로 템플릿 라이브러리에 저장하세요. 프로젝트를 몇 번 거치면 이것이 다음 작업을 훨씬 빠르게 해 주는 구성요소 라이브러리가 되며, 변환한 페이지 하나보다 훨씬 큰 가치가 있습니다.
프롬프트에서 가장 중요한 네 가지 지시
결과의 대부분은 2단계에서 결정되므로, 어떤 지시가 실제로 결과를 바꾸는지 구체적으로 짚어 볼 만합니다. 영향이 큰 순서대로 대략 정리하면 다음과 같습니다.
- “이미지를 Base64 데이터 URL로 넣지 마세요.” 그대로 두면, 자체 완결형 페이지를 요청받은 모델은 모든 이미지를 인라인으로 넣고, 이미지가 열두 장인 페이지는 0.5MB를 훌쩍 넘습니다. 이런 이미지는 미디어 라이브러리 첨부 파일이 될 수 없으므로 모두 빈 슬롯으로 들어옵니다. 대신 실제 호스팅 URL이나 단순한 자리표시자 경로를 요청하세요.
- “아이콘에는 인라인 SVG가 아니라 Font Awesome 클래스를 쓰세요.” Font Awesome 클래스 이름은 Elementor 아이콘 라이브러리에 그대로 매핑되어 바꿔 끼울 수 있는 실제 아이콘이 됩니다. 손으로 그린 인라인 SVG는 그 컨트롤에 아예 들어갈 수 없어 원시 HTML로 남습니다. 이 한 줄이 편집 가능한 아이콘과 빨간 HTML 블록으로 가득한 페이지를 가르는 차이입니다.
- “DOM을 평평하게 유지하세요. 섹션당 래퍼는 하나, 불필요한 중첩은 없이.” 변환기는 마크업을 그대로 반영하므로, 들어간 만큼의 중첩이 그대로 나옵니다. 모델은 학습 데이터 대부분이 그렇게 생겼기 때문에 기본적으로 깊게 중첩된 래퍼 div를 만듭니다.
- “시맨틱 태그를 쓰세요.” 실제
<h1>–<h3>,<p>,<button>,<ul>을 말합니다. 시맨틱 태그는 네이티브 위젯에 매핑됩니다. 스타일을 입힌 div만으로 만든 페이지는 변환기가 활용할 수 있는 재료가 훨씬 적습니다.
네 가지를 모두 담은 바로 쓸 수 있는 프롬프트는 AI 프롬프트 페이지에 있으며, 이미지 우선 작업 흐름을 위해 따로 작성한 프롬프트도 있습니다.
소스별로 실제로 얻게 되는 것
“디자인 도구”를 뭉뚱그려 말하기보다 이름을 하나하나 짚는 편이 더 유용합니다. 소스마다 서로 다른, 예측 가능한 방식으로 실패하기 때문입니다.
- ChatGPT, Claude 등의 AI 어시스턴트는 HTML을 바로 만들어 줍니다. 가장 다루기 쉬운 소스이며, 위의 프롬프트 규칙도 이 경우를 위해 쓴 것입니다.
- AI 앱 빌더: Lovable, v0, Bolt. 이 도구들은 React 프로젝트를 만들며, JSX 소스는 HTML이 아닙니다. 컴포넌트 코드를 붙여넣지 마세요. 빌더의 실시간 미리보기를 브라우저에서 열고, 렌더링된 페이지의 HTML을 거기서 가져오세요. 렌더링된 HTML은 다른 페이지와 똑같이 변환됩니다.
- Canva. Canva 웹사이트는 Canva가 호스팅하며 HTML로 내보낼 수 없고, 임베드 코드는 iframe입니다. 변환기는 의도적으로 이를 동작하는 프레임으로 옮기지 않습니다(정책상 YouTube와 Vimeo iframe만 남습니다). Canva에서 Elementor로 바로 가는 길은 없으며, 현실적인 방법은 Canva 디자인을 시각 자료로 삼아 AI 어시스턴트로 HTML을 생성하는 것입니다.
- Figma. 기본 HTML 내보내기 기능은 없지만 HTML 내보내기 플러그인이 있고, 품질 차이가 큽니다. 흐름 레이아웃(flex와 grid)으로 출력하는 플러그인은 잘 변환되고, 절대 위치 div로 출력하는 플러그인은 아래에서 설명하는 캔버스 문제에 부딪힙니다.
디자인 도구 내보내기가 AI 출력과 다르게 동작하는 이유
두 소스는 서로 반대 방향으로 실패하며, 어떤 소스를 다루고 있는지 알면 어디를 살펴봐야 할지 알 수 있습니다.
AI가 생성한 HTML은 대체로 시맨틱 구조가 괜찮습니다. 문서를 학습했기 때문에 실제 제목과 단락을 씁니다. 약점은 인라인 Base64 이미지, 인라인 SVG 아이콘, 그리고 레이아웃에 필요한 것보다 많은 래퍼 div입니다. 세 가지 모두 프롬프트를 바꿔 다시 생성하면 해결되며, 몇 초면 됩니다.
디자인 도구 내보내기는 그 반대입니다. 이미지와 에셋은 대개 제대로 참조되지만, 마크업은 생성된 클래스 이름이 붙은 절대 위치 div로 이루어져 있고 시맨틱 구조가 전혀 없는 경향이 있습니다. 도구가 문서가 아니라 캔버스를 묘사하고 있기 때문입니다. 제목 요소가 어디에도 없는 경우가 많아서 제목 위젯이 될 수 있는 것이 하나도 없습니다.
두 번째 경우는 사실 변환의 문제가 아닙니다. 절대 위치로 배치된 캔버스 출력은 어떤 Elementor 레이아웃과도 대응하지 않으며, 한 번도 표현된 적 없는 문서 구조를 추론할 수 있는 도구는 없습니다. 내보낸 결과가 그런 모양이라면 솔직한 답은 변환하는 대신 구조를 다시 만들거나, 디자인 도구가 지원한다면 돌아가서 시맨틱한 흐름 레이아웃 버전으로 다시 내보내는 것입니다.
수리하지 말고 다시 생성하세요
이 작업 순서를 빠르게 만드는 습관은 소스를 일회용으로 여기는 것입니다. 구조 맵에 깊이 8과 빨간 HTML 블록 여섯 개가 보인다면 Elementor를 열어 고치기 시작하지 마세요. 프롬프트에 두 줄을 추가하고, 다시 생성하고, 다시 변환하세요. 이 과정은 1분 정도면 끝납니다.
같은 문제를 Elementor 안에서 수리하면 한 시간이 걸리고, 다음 페이지에서 또 반복해야 합니다. 프롬프트를 고치면 이후에 생성하는 모든 페이지가 함께 고쳐지며, 이것이 바로 이 작업 흐름을 갖춰 둘 가치가 있는 이유입니다.