AI 어시스턴트로 페이지를 생성하거나 디자인 도구에서 HTML을 내보내면 대부분의 작업이 끝납니다. 이를 유지보수 가능한 Elementor 페이지로 변환하는 것은 짧고 반복 가능한 파이프라인입니다.
1단계 — 먼저 이미지부터 정리하세요
사람들이 가장 자주 건너뛰는 단계이며, 이로 인해 재작업이 가장 많이 발생합니다. AI는 실제 사진을 HTML에 포함할 수 없고, 디자인 도구에서 내보낸 파일은 로컬 경로나 데이터 URL을 사용하는 경우가 많습니다. 이 중 어느 것도 미디어 라이브러리 첨부파일이 될 수 없습니다.
좋은 방법은 두 가지입니다. 먼저 이미지를 미디어 라이브러리에 업로드하고 HTML에서 실제 URL을 참조하거나, 빈 플레이스홀더를 사용하고 나중에 Elementor에서 채우는 것입니다. 플레이스홀더 방식을 사용한다면 모든 이미지에 의미 있는 alt 속성이 있는지 확인하세요. 그 텍스트는 슬롯의 캡션으로 유지되므로 어떤 그림이 어디에 들어가는지 알 수 있습니다.
2단계 — 변환하기 좋은 마크업을 요청하세요
모델에 프롬프트를 입력할 때 필요한 것을 명시하세요. 시맨틱 태그, 섹션마다 하나의 래퍼만 있는 얕은 DOM, 모든 CSS를 하나의 style 블록에, 인라인 SVG 대신 Font Awesome 아이콘 클래스, 외부 스크립트나 글꼴 없음. 이 몇 가지 제약 조건은 이후에 무엇을 하든 결과에 더 큰 영향을 미칩니다.
3단계 — 올바른 옵션으로 변환하세요
- 네이티브 컴포넌트 모드: 하나의 HTML 블록이 아닌 편집 가능한 위젯을 얻을 수 있습니다.
- 아이콘: Elementor 아이콘 라이브러리에 맞추기, 아이콘이 실제로 교체 가능한 아이콘이 됩니다.
- 색상 및 글꼴: 브랜드 사이트에 적용할 경우 사이트 값, 디자인을 재현하는 경우 원본 값을 사용하세요.
- 이미지: 실제 URL이 이미 있는 경우가 아니라면 빈 플레이스홀더를 사용하세요.
4단계 — 내보내기 전에 구조를 검토하세요
구조 맵을 엽니다. 컴포넌트 수, 최대 중첩 깊이, 신뢰도 분석을 확인하세요. 빨간색 행은 HTML로 유지된 것이므로 살펴볼 필요가 있습니다. 깊이가 높다면 트리의 더 깊은 곳에 복사 루트를 설정하거나 소스를 단순화한 후 다시 변환하세요. 입력을 수정하는 것이 출력을 수리하는 것보다 거의 항상 빠릅니다.
5단계 — 붙여넣고 마무리하세요
Elementor에 붙여넣은 다음 표준 마무리 작업을 실행하세요. 버튼 링크를 다시 연결하고, 호버 상태를 설정하고, 폼이나 메뉴를 연결하고, 플레이스홀더 이미지를 업로드하고, 데스크톱·태블릿·모바일에서 하나씩 확인하세요.
6단계 — 재사용 가능한 부분을 저장하세요
다시 사용할 모든 것 — 가격 책정 행, 기능 그리드, 사용 후기 블록 등 — 은 바로 템플릿 라이브러리에 저장하세요. 몇 번의 프로젝트를 거치면 다음 빌드가 훨씬 빨라지는 컴포넌트 라이브러리가 되며, 이는 변환된 단일 페이지보다 더 큰 가치가 있습니다.
프롬프트에서 가장 중요한 네 가지 지시사항
결과의 대부분은 2단계에서 결정되므로 어떤 지시사항이 실제로 결과를 바꾸는지 구체적으로 아는 것이 중요합니다. 영향력이 큰 순서대로 나열하면 다음과 같습니다.
- “이미지를 Base64 데이터 URL로 포함하지 마세요.” 그대로 두면, 하나의 독립된 페이지를 요청받은 모델은 모든 이미지를 인라인으로 넣고, 이미지가 12개인 페이지는 0.5MB를 훌쩍 넘어갑니다. 이런 이미지는 미디어 라이브러리 첨부파일이 될 수 없으므로 모두 빈 슬롯으로 들어옵니다. 대신 실제 호스팅 URL이나 일반 플레이스홀더 경로를 요청하세요.
- “아이콘에는 인라인 SVG가 아닌 Font Awesome 클래스를 사용하세요.” Font Awesome 클래스 이름은 Elementor 아이콘 라이브러리에 그대로 매핑되어 실제로 교체 가능한 아이콘이 됩니다. 손으로 그린 인라인 SVG는 해당 컨트롤에 전혀 들어갈 수 없고 원시 HTML로 남습니다. 이 한 줄이 편집 가능한 아이콘과 빨간 HTML 블록으로 가득한 페이지의 차이입니다.
- “DOM을 평평하게 유지하세요 — 섹션당 하나의 래퍼, 불필요한 중첩 없이.” 변환기는 마크업을 그대로 반영하므로 입력의 중첩이 출력의 중첩이 됩니다. 모델은 대부분의 학습 데이터가 그렇기 때문에 기본적으로 깊게 중첩된 래퍼 div를 생성합니다.
- “시맨틱 태그를 사용하세요.” 실제
<h1>–<h3>,<p>,<button>,<ul>를 사용하세요. 시맨틱 태그는 네이티브 위젯에 매핑됩니다. 전부 스타일된 div로만 구성된 페이지는 변환기가 활용할 수 있는 것이 훨씬 적습니다.
이 네 가지를 모두 담은 바로 사용할 수 있는 프롬프트는 AI 프롬프트 페이지에 있으며, 그중에는 이미지 우선 워크플로를 위해 특별히 작성된 것도 있습니다.
디자인 도구 내보내기가 AI 출력과 다르게 동작하는 이유
두 소스는 서로 반대 방향으로 실패하며, 어떤 소스를 다루고 있는지 알면 어디를 살펴봐야 할지 알 수 있습니다.
AI 생성 HTML은 대체로 시맨틱 구조가 괜찮습니다. 문서를 학습했기 때문에 실제 제목과 단락을 사용합니다. 약점은 인라인 Base64 이미지, 인라인 SVG 아이콘, 레이아웃에 필요 이상으로 많은 래퍼 div입니다. 이 세 가지는 프롬프트를 바꾸고 다시 생성하면 해결되며 몇 초밖에 걸리지 않습니다.
디자인 도구 내보내기는 그 반대입니다. 이미지와 에셋은 보통 올바르게 참조되지만, 마크업은 절대 위치가 지정된 div와 생성된 클래스 이름으로 이루어져 있고 시맨틱 구조가 전혀 없는 경향이 있습니다. 도구가 문서가 아니라 캔버스를 설명하고 있기 때문입니다. 제목 요소가 전혀 없는 경우가 많아 Heading 위젯이 될 수 있는 것이 하나도 없습니다.
두 번째 경우는 사실 변환 문제가 아닙니다. 절대 위치 캔버스 출력은 어떤 Elementor 레이아웃과도 일치하지 않으며, 어떤 도구도 표현된 적 없는 문서 구조를 추론할 수 없습니다. 내보낸 결과가 그런 형태라면, 솔직한 답은 변환하는 대신 구조를 다시 구축하거나, 디자인 도구로 돌아가 시맨틱하고 흐름 레이아웃 버전을 제공한다면 그걸 내보내는 것입니다.
수리하지 말고 다시 생성하세요
이 파이프라인을 빠르게 만드는 습관은 소스를 일회용으로 취급하는 것입니다. 구조 맵에 깊이 8과 빨간 HTML 블록 6개가 표시되면 Elementor를 열고 수정을 시작하지 말고, 프롬프트에 두 줄을 추가하고 다시 생성한 후 다시 변환하세요. 이 루프는 약 1분이면 됩니다.
같은 문제를 Elementor 안에서 수리하는 데는 한 시간이 걸리고 다음 페이지에서 반복해야 합니다. 프롬프트를 고치면 이후에 생성하는 모든 페이지가 해결되며, 이것이 바로 이 워크플로를 설정할 가치가 있는 이유입니다.