소개 — HTML to Elementor

이 도구는 WordPress와 Elementor로 9년간 작업해 온 풀스택 개발자 Leo가 만들고 유지 관리하며, 그 과정에서 189개 사이트를 Elementor로 옮겨왔습니다.

이 도구가 존재하는 이유

그 모든 마이그레이션은 같은 벽에 부딪혔습니다. 디자인, 다른 빌더에서 내보낸 결과물, 오래된 정적 사이트가 HTML과 CSS 덩어리로 도착합니다. 이를 Elementor로 가져오려면 두 가지 나쁜 선택지가 남습니다. 전체를 하나의 HTML 위젯에 붙여넣고 영원히 편집을 포기하거나, 컴포넌트별로 다시 만들어 페이지마다 하루를 잃는 것입니다. 처음 12개 사이트를 겪고 나면 그 타협을 받아들이지 않고 자동화하기 시작합니다. 이 도구는 바로 그 자동화를 정리하여 공개한 것입니다.

189번의 마이그레이션이 가르쳐 준 것

변환기의 거의 모든 규칙은 실제 프로젝트에서 잘못된 것에 대한 직접적인 해결책입니다.

스타일시트는 거짓말을 하고, 계산된 스타일은 그렇지 않습니다. 캐스케이드 순서, 미디어 쿼리, 상속된 값, 유틸리티 클래스 때문에 CSS 파일에서 읽은 규칙이 브라우저가 실제로 그리는 값인 경우는 드뭅니다. 변환기는 먼저 HTML을 렌더링하고 계산된 스타일을 읽습니다. 그래서 컴파일된 CSS가 페이지 내부에 있는 한, Tailwind 스타일 마크업과 프레임워크 CSS에서도 오류 없이 동작합니다. 외부 URL에서 로드되는 스타일시트는 안전을 위해 제거되므로 CSS를 먼저 인라인으로 포함하세요.
일대일로 매핑하면 중첩이 폭발합니다. 일반적인 페이지는 시각적 의미가 없는 래퍼 div로 가득합니다. 이를 그대로 복사하면 아무도 편집할 수 없는 10단 깊이의 Elementor 트리가 생깁니다. 스타일 효과가 없는 래퍼는 축소되고, 패딩, 배경 또는 그림자를 실제로 담당하는 래퍼는 유지됩니다. 그것들을 병합하면 레이아웃이 깨집니다.
인라인 SVG는 편집 가능한 Elementor 아이콘이 될 수 없습니다. 이는 변환 버그가 아니라 Elementor의 제한입니다. 아이콘 컨트롤은 아이콘 라이브러리 항목이나 미디어 라이브러리 파일만 허용하며 다른 것은 허용하지 않습니다. Font Awesome 클래스는 편집 가능한 아이콘으로 깔끔하게 매핑되지만, 직접 만든 SVG는 원시 HTML로 남아야 합니다. HTML을 생성하기 전에 이 사실을 알면 전체 재작업을 아낄 수 있습니다.
Base64 이미지는 가져오기 전까지는 멀쩡해 보입니다. 12개의 인라인 이미지가 있는 페이지는 0.5MB를 훌쩍 넘어 부풀어 오르고 미디어 라이브러리에 추가되지 못합니다. 대신 라벨이 붙은 빈 슬롯이 되므로 나중에 실제 파일을 넣고 어느 것이 어느 것인지 알 수 있습니다.
반응형은 하나의 설정이 아닙니다. 레이아웃 차이는 여러 너비에서 측정되어 Elementor 자체 반응형 필드에 기록됩니다. 하나의 데스크톱 레이아웃이 휴대폰에서 자연스럽게 줄어들기를 바라지 않습니다.
일부 항목은 실제로 변환되지 않습니다. 애니메이션, 스크립트 기반 상호작용, 의사 요소, 그리고 메뉴, 상품 루프, 쿼리처럼 사이트 자체 데이터에 의존하는 모든 것은 정적 HTML에서 추론할 수 없습니다. 이 도구는 그런 항목을 만나면 조용히 버리지 않고 알려줍니다.

이 도구가 하지 않는 일

픽셀 단위로 완벽한 출력을 약속하지 않습니다. HTML과 Elementor는 동일하게 렌더링되지 않으며, 그렇지 않다고 주장하는 변환기는 충분한 페이지를 변환해 보지 않은 것입니다. WordPress 사이트에는 손대지 않습니다. 이 도구는 데이터만 생성하고, 가져오기는 사용자가 직접 Elementor 안에서 수행합니다. 그리고 등록을 요구하지 않습니다.

또한 위험을 가져오지 않습니다. 스크립트, 위험한 링크, 외부 스타일시트, 양식 제출은 편집기에 도달하기 전에 제거되며, 가져온 스타일은 가져온 콘텐츠에만 범위가 지정되어 테마의 나머지 부분으로 새어 나가지 않습니다.

파일은 브라우저를 떠나지 않습니다

파싱, 변환, 미리보기는 모두 브라우저에서 로컬로 실행됩니다. HTML, 이미지, 그리고 생성된 Elementor 데이터는 이 사이트나 다른 곳으로 절대 전송되지 않습니다. 이는 나중에 없앨 수 있는 기능이 아니라 처음부터 내린 설계 결정입니다.

누구를 위한 도구인가

Elementor로 클라이언트 사이트를 구축하는 프리랜서와 소규모 팀.
죽은 코드 블록 대신 편집 가능한 페이지를 원하는, AI로 HTML을 생성하는 사람들.
여러 정적 페이지를 WordPress와 Elementor로 옮기는 모든 사람.

연락하기

질문, 버그 신고, 까다로운 변환 샘플은 모두 [email protected]으로 환영합니다. 무언가 변환이 잘 안 되면 HTML 스니펫을 보내는 것이 해결에 이르는 가장 빠른 방법입니다. 위의 규칙 중 일부는 누군가 정확히 그렇게 했기 때문에 존재합니다.