기존 HTML 페이지를 Elementor로 옮길 때는 보통 두 가지 나쁜 선택지 중 하나를 고르게 됩니다. 사실상 편집할 수 없는 HTML 위젯 하나에 통째로 붙여넣거나, 모든 섹션을 손으로 다시 만드는 것입니다. 이 가이드는 세 번째 방법, 즉 HTML을 네이티브로 편집 가능한 Elementor 구성요소로 변환하는 방법을 소개합니다.
여기서 말하는 “편집 가능”의 정확한 뜻
이것이 핵심이므로 정확히 짚고 넘어갈 필요가 있습니다. 페이지를 HTML 위젯에 넣으면 Elementor는 그것을 속을 알 수 없는 하나의 블록으로 취급합니다. 캔버스에서 보이기는 하지만, 제목을 클릭해 크기를 바꿀 수 없고, 아이콘 선택기에서 아이콘을 바꿀 수도 없으며, 클라이언트는 코드를 건드리지 않고는 텍스트 하나 고칠 수 없습니다. 페이지가 Elementor 안에 들어 있을 뿐, Elementor로 만들어진 페이지는 아닌 셈입니다.
네이티브 변환은 다릅니다. 각 제목은 자체 타이포그래피 컨트롤을 가진 제목 위젯이 됩니다. 각 단락은 텍스트 편집기가 됩니다. 스타일이 적용된 링크는 링크, 색상, 패딩 컨트롤을 가진 버튼이 됩니다. 감싸는 요소는 실제 flex 또는 grid 설정을 가진 컨테이너가 됩니다. 변환 후에는 여러분과 콘텐츠 사이에 HTML 위젯이 끼어 있지 않습니다. 시작이 HTML이었을 뿐인 평범한 Elementor 페이지입니다.
그냥 손으로 다시 만들면 안 될까요?
그래야 할 때도 있습니다. 소스가 간단한 히어로 하나라면 다시 만드는 데 10분이면 되고, 완벽하게 Elementor다운 결과를 얻을 수 있습니다. 변환이 진가를 발휘하는 것은 페이지가 길 때, 간격과 타이포그래피가 까다로워서 정확히 보존할 가치가 있을 때, 또는 이 작업을 반복할 때입니다. 랜딩 페이지 여러 개를 이전하거나, AI나 디자인 도구에서 나온 HTML을 일상적인 작업 흐름의 일부로 실제 페이지로 만드는 경우가 그렇습니다.
1. HTML을 붙여넣거나 드롭하기
변환기를 연 다음 .html 파일을 드롭 영역으로 끌어다 놓거나 코드 상자에 소스를 붙여넣으세요. 인라인 CSS와 Base64 이미지도 처리됩니다. 모든 작업은 브라우저 안에서 실행되며 파일은 서버에 절대 업로드되지 않습니다. 덕분에 클라이언트 작업도 기밀 유지 문제를 따로 논의할 필요 없이 변환할 수 있습니다.
스타일이 파일에 포함되지 않은 별도의 스타일시트에 들어 있다면, 미리보기에서 페이지가 스타일 없이 렌더링되고 바로 그 스타일 없는 상태가 변환됩니다. 변환하기 전에 CSS가 인라인으로 들어가 있거나 <style> 블록 안에 있는지 확인하세요.
2. 네이티브 구성요소 모드 선택하기
옵션 패널에서 네이티브 구성요소 모드를 선택하세요. HTML 블록 하나가 아니라 실제 위젯을 만들어 내는 설정이 바로 이것입니다. 이때 다른 옵션 세 가지도 잠깐 살펴볼 만합니다.
- 아이콘 — Elementor 아이콘 라이브러리에 매칭하도록 선택하면 아이콘이 잠긴 SVG가 아니라 바꿔 끼울 수 있는 실제 아이콘이 됩니다.
- 이미지 — HTML에 미디어 라이브러리 URL이 아직 없다면 빈 자리표시자를 선택하세요. 각 슬롯은 alt 텍스트를 캡션으로 유지하므로 어떤 사진이 어디에 들어가는지 알 수 있습니다.
- 색상과 글꼴 — 기존 브랜드 사이트에 넣을 것이라면 사이트 값을, 디자인을 충실하게 재현하려면 원본 값을 사용하세요.
3. 구조 맵 검토하기
내보내기 전에 구조 맵 탭을 여세요. 실시간 미리보기 옆에 정확한 Elementor 트리가 표시되고, 행에 마우스를 올리면 양쪽에서 해당 부분이 강조 표시됩니다.
여기서 확인할 것은 세 가지입니다. 신뢰도 점: 녹색은 요소가 네이티브 위젯으로 직접 변환되었다는 뜻이고, 빨간색은 HTML로 유지되었으니 살펴볼 필요가 있다는 뜻입니다. 최대 중첩 깊이: 대략 6을 넘는다면 소스에 필요 이상으로 래퍼 요소가 많다는 신호입니다. 그리고 구성요소 수는 붙여넣을 양이 대략 얼마인지 알려 줍니다.
범위를 조절하는 곳도 이 탭입니다. 행의 과녁 모양 아이콘을 누르면 그 행이 복사 루트가 되어 해당 하위 트리만 내보내지고, 바깥쪽 페이지 래퍼는 제외됩니다. 십자 아이콘은 행을 통째로 제외합니다. 긴 페이지라면 이런 식으로 한 섹션씩 변환하는 편이 전체를 한꺼번에 가져오는 것보다 훨씬 검증하기 쉽습니다.
4. 복사하거나 다운로드하기
Elementor 데이터 복사를 누른 다음, Elementor 편집기의 빈 영역을 오른쪽 클릭하고 “다른 사이트에서 붙여넣기”를 선택하세요. 이미 열어 둔 페이지에 섹션을 추가할 때 가장 빠른 방법입니다.
또는 JSON 템플릿을 내려받아 Elementor 템플릿 라이브러리에서 가져올 수도 있습니다. 결과물을 재사용할 수 있고 어디로든 옮길 수 있는 파일로 갖고 싶을 때 더 좋은 방법입니다. 페이지 전체를 옮기거나, 팀과 공유하거나, 시간을 두고 구성요소 라이브러리를 쌓아 갈 때가 그렇습니다.
짧은 마무리 작업을 예상하세요
HTML과 Elementor는 결코 똑같이 렌더링되지 않으며, 어떤 것들은 정말로 넘어오지 못합니다. 다음 작업에 10~15분 정도를 잡아 두세요. 버튼 호버 상태 설정(CSS 호버 규칙은 정적인 페이지에서 읽을 수 없습니다), 자리표시자 이미지 채우기, 메뉴와 폼을 실제 WordPress 소스에 연결하기, 그리고 세 가지 기기 화면을 차례로 확인하기입니다. 어느 것도 어렵지 않지만, 나중에 하나씩 발견하는 것보다 처음부터 체크리스트로 처리하는 편이 낫습니다.
더 깔끔한 결과를 위한 팁
- 시맨틱 태그(
<h2>,<p>,<button>)를 사용하세요. 그래야 변환기가 CSS로 추측하지 않고 네이티브로 매핑할 수 있습니다. - 스타일 없이 깊게 중첩된 래퍼
<div>는 피하세요. 배경이나 패딩이 있는 래퍼는 하나하나가 또 다른 컨테이너가 됩니다. - 자식마다 margin을 주기보다 flex나 grid 부모에
gap을 쓰세요. gap은 컨트롤 하나로 매핑됩니다. - Elementor에서 바꿀 수 있는 아이콘을 원한다면 인라인 SVG 대신 Font Awesome 아이콘 클래스를 쓰세요.
- 문제는 소스에서 고친 뒤 다시 변환하세요. 편집기 안에서 결과물을 수리하는 것보다 거의 항상 빠릅니다.