순수 HTML, CSS, JavaScript로 만든 페이지가 있고, 이 페이지를 Elementor 안에서 계속 편집하고 싶다고 해 봅시다. 처음부터 다시 만들고 싶지도 않고, 코드 위젯 안에 가둬 두고 싶지도 않을 것입니다. 바로 이런 작업에 변환기가 필요합니다. 다만 세 부분(HTML, CSS, JS)은 각각 다르게 동작하므로 하나씩 살펴보는 것이 좋습니다.
목표: 삽입이 아니라 편집 가능한 상태
기존 HTML을 Elementor로 가져오는 방법 중에는 사실상 해결책이라 할 수 없는 방법이 두 가지 있습니다. HTML 위젯에 붙여넣으면 시각적으로 편집할 수 없는 하나의 블록으로 삽입될 뿐입니다. 손으로 다시 만들면 되기는 하지만 이미 가지고 있는 마크업을 버리게 됩니다. 실제로 원하는 것은 제목은 제목 위젯으로, 텍스트는 텍스트 편집기 위젯으로, 버튼은 버튼 위젯으로, 레이아웃은 실제 컨테이너로 바뀌어서 나중에 Elementor 패널에서 모든 부분을 편집할 수 있는 상태입니다.
HTML은 네이티브 위젯이 됩니다
HTML을 변환기에 붙여넣고 네이티브 구성요소 모드를 선택하세요. 각 요소는 그에 맞는 Elementor 위젯으로 매핑됩니다. 제목은 제목 위젯으로, 단락과 목록은 텍스트 편집기로, 이미지는 이미지 위젯으로, 버튼 모양으로 꾸민 링크는 버튼 위젯으로, 감싸는 요소는 컨테이너로 바뀝니다. 결과를 Elementor에 붙여넣고 나면 중간에 코드 위젯이 끼어 있지 않은, 평범한 페이지가 됩니다.
CSS는 버려지지 않고 읽힙니다
사람들이 가장 걱정하는 부분이지만, 실제로는 가장 잘 동작하는 부분입니다. 변환기는 스타일을 버리지 않습니다. 브라우저가 실제로 계산한 스타일을 읽어 해당 위젯 컨트롤에 기록합니다. 패딩, 마진, 색상, 테두리, 모서리 반경, 그림자, 배경, 글꼴 패밀리, 크기, 굵기, 줄 높이, 자간이 모두 네이티브 Elementor 필드로 옮겨지므로, 스타일시트 안에 묶여 있지 않고 계속 편집할 수 있습니다.
이렇게 되려면 변환할 때 CSS가 함께 있어야 합니다. 인라인 스타일이나 단일 <style> 블록은 완벽하게 읽힙니다. 붙여넣는 파일에 포함되지 않은 외부 스타일시트는 읽히지 않습니다. 페이지가 스타일 없이 렌더링되고, 그 스타일 없는 상태가 그대로 변환되기 때문입니다. 따라서 CSS를 인라인으로 넣거나, 먼저 스타일시트를 <style> 블록에 붙여넣으세요. 시각적 선택 도구도 있는데, 블록 하나를 고르면 페이지 스타일시트까지 함께 가져오므로 클래스 기반 스타일도 올바르게 변환됩니다.
JavaScript는 솔직히 말해 예외입니다
JavaScript는 변환되지 않으며, 이는 의도된 것입니다. 스크립트는 안전을 위해 제거됩니다. 붙여넣기만으로 임의의 JS를 사이트에 들여오는 것은 위험하고, 어차피 편집기 안에서 안정적으로 실행되지도 않습니다. 따라서 JS가 만들어 내던 것(슬라이더, 탭, 아코디언, 카운터, 스크롤 애니메이션)은 모두 정적 마크업으로 도착합니다.
올바른 방법은 스크립트를 다시 붙여넣는 것이 아니라, 해당 상호작용 하나를 알맞은 Elementor 위젯으로 다시 만드는 것입니다. Elementor에는 탭, 아코디언, 캐러셀, 카운터, 진행 표시줄 같은 네이티브 위젯과, 애니메이션을 위한 자체 모션 효과가 있습니다. 가져온 스크립트보다 유지 관리하기 쉽고, 이미 사이트가 불러오는 번들에 포함되어 있습니다. 실제로는 페이지 전체를 몇 초 만에 변환한 뒤, 상호작용이 있는 몇 안 되는 부분을 네이티브로 다시 만드는 데 몇 분을 쓰면 됩니다.
현실적인 진행 순서
- HTML과 CSS를 마크업과 단일 스타일 블록으로 이루어진 하나의 파일로 합치세요. 이미지가 로컬 경로로 참조되어 있다면 미디어 라이브러리에 업로드해 그 URL을 쓰거나, 자리표시자로 두는 것을 받아들이세요.
- 변환기에 붙여넣고 네이티브 구성요소 모드를 선택한 다음, 아이콘을 Elementor 라이브러리에 매칭할지, 색상과 글꼴에 사이트 값과 원본 값 중 무엇을 쓸지 정하세요.
- 구조 맵에서 구성요소 수, 중첩 깊이, 그리고 어떤 행이 HTML로 남았는지 확인하세요.
- Elementor 데이터를 복사해 페이지에 붙여넣거나, JSON 템플릿을 내려받아 가져오세요.
- JS로 동작하던 상호작용은 알맞은 네이티브 위젯으로 다시 만들고, 버튼 호버 상태를 설정한 뒤, 세 가지 기기 화면을 차례로 확인하세요.
최종 결과
평범한 Elementor 페이지입니다. 원래 HTML 구조는 위젯과 컨테이너로 그대로 남고, CSS는 편집 가능한 컨트롤에 들어가며, 손으로 다시 만든 것은 애초에 마크업에 속하지 않았던 상호작용 동작뿐입니다. 그 뒤로는 여러분도 클라이언트도 Elementor의 다른 페이지와 똑같이 편집할 수 있습니다. 코드 위젯도, 별도의 스타일시트도, 빌드 단계도 필요 없습니다.