HTML을
편집 가능한 Elementor 페이지로

흔히 쓰는 두 가지 방법의 문제

완성된 HTML 페이지가 이미 있고 이를 WordPress에 넣어야 할 때, 보통 두 가지 방법이 있는데 어느 쪽도 좋지 않습니다. 첫 번째는 마크업을 통째로 HTML 위젯 하나에 붙여넣는 것입니다. 렌더링은 제대로 되지만 Elementor는 이를 불투명한 한 덩어리로 취급합니다. 제목을 클릭해 크기를 바꿀 수도, 아이콘을 교체할 수도 없고, 클라이언트는 코드를 열지 않고는 문장 하나 고칠 수 없습니다. 페이지가 Elementor 안에 있지만 그 일부가 되지는 못한 것입니다.

두 번째 방법은 모든 섹션을 손으로 다시 만드는 것입니다. 결과물은 자연스럽고 완전히 편집 가능하지만, 긴 마케팅 페이지라면 몇 시간짜리 작업이 되고, 원본의 간격과 타이포그래피를 정확히 맞추는 일은 지루하고 실수하기 쉽습니다.

변환은 세 번째 길입니다. 마크업을 그대로 보존하거나 손으로 다시 만드는 대신, 브라우저가 페이지를 읽는 방식 그대로 — 실제 계산된 스타일로 — 페이지를 읽고, 각 부분을 가장 잘 맞는 Elementor 위젯에 매핑합니다.

왜 스타일시트가 아니라 계산된 스타일인가

변환기는 CSS를 파싱하려 하지 않습니다. 페이지는 격리된 프레임 안에서 실제로 렌더링되고, 각 요소는 브라우저가 실제로 계산해 낸 값으로 측정됩니다. 이 차이는 생각보다 훨씬 중요합니다.

즉 클래스 기반 CSS, 캐스케이드, 상속, 커스텀 속성, 축약형이 모두 그대로 동작합니다. 읽히는 값이 최종값이기 때문입니다. CSS 변수로 쓴 색은 해석된 색으로, clamp로 쓴 글자 크기는 실제 적용된 크기로 도착합니다. 브라우저와 의견이 다를 CSS 파서 자체가 없습니다.

동시에 이해해 둘 가치가 있는 문제도 하나 생깁니다. 아래에서 설명하는 신중한 처리 대부분이 여기서 비롯됩니다. 브라우저는 상대값을 절대 픽셀로 해석합니다. 100% 너비는 픽셀 숫자로 보고되고, auto 좌우 여백은 그 순간 요소를 가운데 두던 픽셀값으로, 분수로 쓴 그리드 열은 픽셀 너비로 보고됩니다. 이 숫자들을 그대로 베끼면 레이아웃은 변환이 실행되던 그 너비에 얼어붙게 됩니다.

그래서 상대적 의도는 베끼는 게 아니라 재구성됩니다. 이미지는 컨테이너 대비 백분율로 표현하고, 전체 너비 이미지에는 고정 너비를 아예 쓰지 않습니다. max-width와 좌우 대칭 auto 여백을 가진 블록은 가운데 정렬로 인식되어 Boxed 컨테이너가 되고, 어떤 화면 크기에서도 네이티브로 가운데 정렬됩니다. 동일한 그리드 트랙은 서브픽셀 반올림을 허용하며 수치로 비교한 뒤 분수 단위로 되돌려 써서, 그리드가 계속 리플로우되게 합니다.

구조: 컨테이너, 그리고 만들지 말아야 할 때를 아는 것

마크업의 모든 블록 레벨 래퍼는 Elementor 컨테이너가 되어 패딩, 배경, 테두리, 모서리, 그림자, flex/grid 설정을 그대로 가져갑니다. 충실한 매핑이지만 문자 그대로 하면 깊은 트리가 됩니다. section 안에 wrapper, 그 안에 row, 그 안에 column — 제목에 닿기도 전에 컨테이너가 네 개입니다.

이를 줄여 주는 장치가 두 가지 있습니다. 시각적으로나 레이아웃상 아무 효과가 없는 래퍼 — 배경, 테두리, 패딩, 그림자, 최대 너비, 최소 높이가 없고 flex/grid도 아닌 — 는 접힙니다. 없애도 아무것도 달라지지 않기 때문입니다. 그리고 사실상 콘텐츠 하나를 감싼 스타일 프레임에 불과한 카드는 통째로 평탄화되어, 프레임이 위젯 자체로 옮겨집니다.

바로 이 두 번째 규칙 덕분에 이미지 카드 다섯 장짜리 행은 'Image Box 위젯 다섯 개를 담은 그리드'가 됩니다. '위젯 하나씩 담은 컨테이너 다섯 개를 담은 그리드'가 아니라요. 이는 숙련된 Elementor 사용자가 손으로 만들 법한 구조이며, 나중에 스타일을 바꾸기도 훨씬 쉽습니다.

태그만이 아니라 패턴을 인식한다

제목을 Heading 위젯에 매핑하는 것은 당연한 일입니다. 진짜 유용한 작업은 형태를 인식하는 데 있습니다. 아이콘 하나, 제목 하나, 짧은 문단 하나를 담은 컨테이너는 Icon Box입니다. 이미지 하나, 제목 하나, 문단 하나를 담은 컨테이너는 Image Box입니다. 각 행에 아이콘 하나와 텍스트가 들어 있는 반복 행 목록은 행마다 편집 가능한 항목을 가진 Icon List가 됩니다.

이 감지는 의도적으로 엄격합니다. 카드에 제목과 문단 외의 텍스트 — 단계 번호, 배지, 가격 — 가 있으면 패턴을 적용하지 않고 블록은 일반 컨테이너로 남습니다. 그 텍스트를 잃는 것이 트리가 한 단계 깊어지는 것보다 훨씬 나쁘기 때문입니다. 믿을 수 있는 보수적 감지가, 매번 확인해야 하는 공격적 감지보다 가치 있습니다.

버튼도 같은 방식입니다. 실제 행동 유도 버튼 대부분은 button 요소가 아니라 CSS를 입힌 앵커이므로, 여러 신호가 일치할 때만 링크를 버튼으로 취급합니다. 짧은 텍스트, 블록 레벨 자식 없음, 배경 또는 테두리, 모서리 반경, 실제 패딩, 블록형 display. 이 중 하나만 봐서는 오탐이 생깁니다.

아이콘과 이미지: 결정이 필요한 두 가지

아이콘은 Elementor 아이콘 라이브러리의 실제 항목이 되어, 이후 아이콘 선택기에서 바로 교체할 수 있습니다. 소스가 아이콘 폰트 클래스를 쓸 때 그렇습니다. 손으로 그린 인라인 SVG라면 그래픽은 아이콘 컨트롤에 아예 들어갈 수 없고, 크기와 선을 페이지 CSS에 의존하던 SVG는 페이지에서 떼어내는 순간 그 스타일도 잃습니다. 이름으로 매칭되지 않는 아이콘은 잘못된 추측으로 채우는 대신 의도적으로 비워 둡니다.

이미지는 또 하나의 결정입니다. data-URL 이미지나 로컬 파일 경로는 WordPress 미디어 첨부가 될 수 없어 빈 슬롯이 됩니다. 각 슬롯은 원본 alt 텍스트를 캡션으로 유지하므로 어떤 그림이 어디에 들어가는지 알 수 있습니다. 소스가 실제 업로드된 이미지 URL을 참조한다면 수작업 없이 그대로 들어옵니다. 이미지를 먼저 업로드해 두는 것이 가져오기 후 작업을 가장 많이 줄여 주는 단 하나의 변화입니다.

변환되지 않는 것들 — 솔직하게

스크립트는 제거됩니다. 커스텀 JavaScript로 움직이던 것은 모두 정적 마크업으로 도착하며, 대응하는 네이티브 위젯으로 다시 만들어야 합니다. 폼 제출 동작은 떼어냅니다. 엔드포인트를 그대로 가져오면 방문자 데이터가 당신이 선택하지 않은 곳으로 전송되기 때문입니다. 내비게이션 메뉴는 실제 WordPress 메뉴를 가리켜야 합니다. 호버·포커스 상태는 정지된 페이지에서 읽을 수 없어 이후에 설정해야 합니다. 애니메이션, 트랜지션, 스티키 동작은 Elementor 자체 컨트롤로 다시 적용하는 편이 낫습니다.

의사 요소는 따로 언급할 가치가 있습니다. 사람들을 놀라게 하기 때문입니다. before와 after로 그린 장식 도형, 인용 부호, 밑줄 악센트는 애초에 DOM 노드가 아니므로 위젯이 될 수 없습니다. 변환 후 디자인 디테일이 사라졌다면 가장 먼저 여기를 확인하세요.

가장 깔끔한 결과를 얻으려면

변환 품질은 대부분 입력하는 마크업이 결정합니다. 시맨틱 태그는 모호함 없이 매핑됩니다. 섹션마다 래퍼 하나인 얕은 DOM은 트리를 편집 가능하게 유지합니다. 인라인이거나 단일 style 블록에 모인 CSS는 실제로 측정할 수 있지만, 로드되지 않는 프레임워크 스타일시트는 스타일 없는 페이지만 남깁니다. gap으로 지정한 간격은 여러 개가 아니라 하나의 컨트롤이 됩니다.

내보내기 전에 매번 15초만 구조 맵을 보는 것이 좋습니다. 컴포넌트 수, 최대 중첩 깊이, 신뢰도 분포가 표시되고 트리와 연동된 실시간 미리보기도 있습니다. 깊이가 높거나 여러 행이 HTML로 남았다면, 소스를 고쳐 다시 변환하는 편이 Elementor 안에서 출력물을 수리하는 것보다 언제나 빠릅니다.

긴 페이지는 한 번에 한 섹션씩 옮기세요. 원하는 블록에 복사 루트를 지정하면 그 서브트리만 내보내지고, 페이지 바깥 래퍼와 헤더·푸터는 남겨집니다. 작은 단위가 검증하기 훨씬 쉽고, 다시 쓸 것은 그때그때 템플릿 라이브러리에 저장하면 됩니다.