변환 품질은 대부분 입력하는 HTML에 의해 결정됩니다. 이것은 변환기에 붙여넣기 전에 확인할 가치가 있는 체크리스트입니다.
1. 시맨틱 태그 사용하기
제목은 <h1>–<h6>, 본문은 <p>, 행동 유도 요소는 <button> 또는 <a class="button">, 목록은 <ul>로 사용하세요. 네이티브 태그는 네이티브 위젯에 매핑됩니다. 스타일이 적용된 <div>로 가짜 제목을 만들어도 감지될 수 있지만, 실제 태그는 결코 모호하지 않습니다.
2. DOM을 얕게 유지하기
섹션당 래퍼는 하나만 사용하세요. 중첩 단계가 늘어날 때마다 편집기에서 클릭해서 통과해야 하는 또 다른 컨테이너가 됩니다. 스타일이 없는 순전히 장식용 래퍼는 자동으로 축소되지만, 패딩이나 배경이 있는 래퍼는 제거하면 레이아웃이 달라지므로 유지됩니다.
3. CSS를 자체 포함하기
인라인 스타일이나 단일 <style> 블록이 가장 잘 변환됩니다. 변환기는 브라우저가 실제로 계산한 스타일을 읽기 때문입니다. 외부 프레임워크 스타일시트가 로드되지 않으면 페이지가 스타일 없이 렌더링되며, 바로 그 스타일 없는 상태가 변환됩니다.
4. 이미지를 먼저 정리하기
가장 좋은 방법: 미디어 라이브러리에 업로드하고 실제 https:// URL을 사용하세요. 그렇지 않으면 이미지 옵션을 빈 이미지 자리표시자로 바꾸고 나중에 채우세요. 각 슬롯은 alt를 캡션으로 유지합니다. Base64 이미지와 로컬 파일 경로는 WordPress에 안정적으로 가져올 수 없으므로 의도적으로 자리표시자로 대체됩니다.
5. 인라인 SVG보다 Font Awesome 클래스 선호하기
클래스 기반 아이콘만 Elementor 아이콘 라이브러리에 편집 가능한 아이콘으로 들어갈 수 있습니다. 인라인 SVG는 아이콘 컨트롤에 들어갈 수 없으며, 페이지 CSS에 있던 크기와 선 색상이 사라집니다.
6. 자식별 margin 대신 gap 사용하기
플렉스 또는 그리드 부모의 gap은 단일 Elementor gap 컨트롤에 매핑됩니다. 각 자식에 적용된 margin은 위젯별로 전달되므로 나중에 조정하기가 훨씬 더 번거롭습니다.
7. max-width + auto margin으로 중앙 정렬하기
max-width + margin:0 auto 패턴이 인식되어 박스형 컨테이너가 되며, 모든 화면 크기에서 기본적으로 중앙 정렬됩니다.
8. 가져가고 싶지 않은 것 제거하기
스크립트, 추적 태그, 쿠키 배너, 타사 임베드는 안전을 위해 제거되거나 무력화됩니다. 폼은 제출 액션을 잃습니다. Elementor 폼은 사이트의 실제 대상에 다시 연결해야 합니다. 내비게이션 메뉴는 실제 WordPress 메뉴를 가리켜야 합니다.
9. 섹션별로 변환하기
큰 페이지의 경우 비주얼 피커를 사용하거나 구조 맵에서 복사 루트를 설정해 한 번에 한 섹션씩 가져오세요. 작은 단위가 훨씬 검증하기 쉽고, 사이트 헤더와 푸터를 실수로 가져오는 것을 피할 수 있습니다.
10. 내보내기 전에 구조 맵 검토하기
구성요소 수, 최대 중첩 깊이, 신뢰도 분석을 확인하세요. 녹색 행은 직접 변환되었고, 빨간색 행은 HTML로 유지되었으며 다시 한번 살펴볼 가치가 있습니다. 소스를 수정하고 다시 변환하는 것이 일반적으로 Elementor 내부에서 결과를 수리하는 것보다 빠릅니다.
11. 먼저 각 브레이크포인트에서 소스 열기
이 목록에서 가장 가치가 높고 가장 자주 건너뛰는 항목입니다. 레이아웃은 각 브레이크포인트 너비에서 다시 측정되며, 브라우저가 그곳에서 계산한 값이 그대로 저장됩니다. 정리해 주는 해석 계층이 없습니다.
따라서 변환하기 전에 브라우저에서 소스 크기를 대략 820px와 390px로 조정하세요. 390px에서 이미 깨진 레이아웃은 충실하게 깨진 모바일 레이아웃으로 변환되며, 처음부터 소스에 있던 문제를 변환 탓으로 돌리며 한 시간을 허비하기 매우 쉽습니다. 크기 조정 2분이면 변환하려는 것이 작동하는지 알 수 있습니다.
12. 조용히 변환되지 않는 세부 사항 확인하기
소스에서는 멀쩡해 보이지만 변환 후에는 그냥 사라지는 네 가지가 있습니다. 미리 확인해 두면 각 항목이 미스터리가 아니라 예상된 작업이 됩니다.
- 의사 요소 장식.
::before또는::after로 그려진 모든 것(인용 부호, 강조 바, 그라데이션 오버레이, 밑줄 장식)은 DOM 노드가 아니므로 위젯이 될 수 없습니다. 디자인 디테일이 사라진다면 가장 먼저 의심할 대상입니다. - 인라인 블록 링크가 아닌 직각 모서리 버튼. 실제
<button>요소와 인라인 블록이거나btn/button클래스를 가진 링크는 항상 변환됩니다. 그 외의 모든 것(플렉스 스타일 앵커, 클릭 가능한 div)은 최소 3px의 모서리 반경을 포함하는 지오메트리 테스트를 통과해야 하므로, 모서리가 각진 것은 스타일이 적용된 텍스트로 남습니다. 링크에btn클래스를 추가하면 모두 한 번에 해결됩니다. - 갖고 있지 않은 글꼴. 패밀리 이름은 전달되지만 글꼴 파일은 전달되지 않습니다. 변환하기 전에 WordPress 사이트에 글꼴을 설치하세요. 그렇지 않으면 대체 글꼴로 결과를 평가하면서 실제로는 존재하지 않는 차이를 쫓게 됩니다.
- 호버 및 포커스 상태. 계산된 스타일에서는 기본 상태만 읽을 수 있습니다. 모든 호버 색상은 가져오기 후 작업이므로, 시작하기 전에 페이지에 대화형 요소가 몇 개인지 기록해 두는 것이 좋습니다.
좋은 소스의 모습
위의 모든 내용은 한 문단으로 요약됩니다. 가장 잘 변환되는 HTML은 시맨틱하고, 얕고, 자기 완결적입니다. 실제 제목과 문단 태그, 섹션당 하나의 래퍼, flex 또는 grid와 gap으로 구성된 레이아웃, Font Awesome 클래스 아이콘, 실제 호스팅 URL 이미지, 단일 스타일 블록에 모든 CSS, 그리고 스크립트가 없어야 합니다.
이는 우연이 아니라 원래 잘 작성된 HTML의 모습이기도 합니다. 소스를 물려받는 것이 아니라 생성하는 경우, 프롬프트에 이러한 속성을 요청하는 데 한 문장이면 충분하며 이 체크리스트의 대부분을 제거할 수 있습니다.
가져오기 후
버튼 링크를 다시 연결하고, 폼과 메뉴를 다시 연결하고, 세 가지 기기 뷰를 단계별로 확인하고, 자리표시자 이미지를 다시 업로드하세요. 그러면 일반 Elementor 페이지가 됩니다. 여러분과 콘텐츠 사이를 가로막는 HTML 위젯 없이 완전히 편집 가능합니다.