변환된 페이지를 Elementor에서 열어 보면 컨테이너 안에 컨테이너, 그 안에 또 컨테이너가 들어 있는 경우가 있습니다. 무작위로 생긴 것이 아니라 HTML 구조를 그대로 반영한 결과입니다. 규칙을 이해하면 쉽게 제어할 수 있습니다.
기본 규칙: 블록 요소 하나에 컨테이너 하나
변환기는 DOM을 순회합니다. 모든 블록 수준 래퍼(<div>, <section>, <article>, <header>, <figure>…)는 Elementor 컨테이너가 되고, 계산된 패딩, 배경, 테두리, 모서리 반경, 그림자, 플렉스/그리드 레이아웃이 그 컨테이너로 옮겨집니다. 텍스트, 제목, 이미지, 버튼은 그 안의 위젯이 됩니다.
따라서 section > div.wrap > div.row > div.col > h2 같은 마크업 체인은 제목에 도달하기 전에 중첩된 컨테이너 네 개를 만듭니다. 깨진 것은 없지만 편집하기는 번거롭습니다.
이미 자동으로 정리되는 것
시각적 효과나 레이아웃 효과가 전혀 없는 래퍼는 자동으로 제거됩니다. 구체적으로 <div>가 자식 요소를 정확히 하나만 가지고 있고 배경, 배경 이미지, 테두리, 패딩, box-shadow, max-width, min-height, 플렉스/그리드 display 중 어느 것도 없으면 정리됩니다. 변환기는 이런 래퍼의 수를 세어 구조 맵 개요에 “병합된 중복 래퍼”로 표시합니다.
래퍼에 작은 패딩이나 배경이 하나라도 있으면 그대로 유지됩니다. 제거하면 레이아웃이 바뀌기 때문입니다.
카드는 단일 위젯으로 평탄화됩니다
두 번째로, 더 강력한 평탄화가 있습니다. 카드가 사실상 하나의 콘텐츠를 감싼 스타일 프레임일 뿐이라면, 프레임이 위젯 자체로 옮겨지고 래퍼는 사라집니다. 이를 일으키는 패턴은 두 가지입니다.
- 이미지 + 제목 + 짧은 텍스트 → 단일 이미지 박스 위젯
- 아이콘 + 제목 + 짧은 텍스트 → 단일 아이콘 박스 위젯
두 경우 모두 카드의 배경, 테두리, 모서리 반경, 그림자, 패딩이 위젯 자체의 고급 설정에 기록됩니다. 그래서 카드 다섯 개가 있는 행은 위젯 다섯 개를 담은 그리드가 되며, 각각 위젯 하나씩을 담은 컨테이너 다섯 개를 담은 그리드가 되지 않습니다. 직접 만들 때와 정확히 같은 방식입니다.
더 평평한 결과를 얻는 방법
- 더 얕은 HTML을 작성하세요. 보통 섹션당 래퍼 하나면 충분합니다. AI로 HTML을 생성한다면 프롬프트에 이를 명확히 적으세요.
- 필요 없는 레이아웃용 div를 추가하지 마세요. 그리드나 플렉스 부모는 자식을 직접 배치할 수 있습니다. 최신 CSS에서는 항목마다
.col래퍼를 추가로 둘 필요가 거의 없습니다. - 복사 루트를 사용하세요. 구조 맵에서 실제로 원하는 행의 과녁 모양 아이콘을 클릭하세요. 그 위에 있는 모든 것이 제외되므로 바깥쪽 페이지 래퍼는 Elementor에 전달되지 않습니다.
- 필요 없는 것은 제외하세요. 행의 ✕ 아이콘을 사용하면 됩니다.
정확한 판정 기준, 그리고 패딩 임계값이 2px인 이유
실제 규칙을 살펴볼 가치가 있습니다. 대부분의 의외의 결과를 설명해 주기 때문입니다. 래퍼는 다음 조건이 모두 참일 때만 제거됩니다. 플렉스나 그리드가 아니고, 위치 지정(fixed, absolute, sticky)이 없으며, 배경색과 배경 이미지가 없고, 전체 테두리 너비가 0이며, 전체 패딩이 2px 이하이고, 박스 그림자가 없으며, max-width가 없고, min-height가 0이며, 좌우 마진 중 어느 쪽도 auto가 아니어야 합니다.
2px 허용치는 의도된 것입니다. 브라우저는 계산된 패딩을 소수점 픽셀로 보고하며, 스타일시트에서 패딩이 없다고 선언한 래퍼도 반올림, 테두리, 확대/축소가 관여하면 흔히 0.4px 정도로 계산됩니다. 정확히 0인지를 검사하면 아무 역할도 하지 않는 래퍼 수백 개가 남게 됩니다. 몇 픽셀의 노이즈를 허용하면 디자이너가 실제로 의도한 패딩은 버리지 않으면서 그런 래퍼를 제거할 수 있습니다.
마진과 max-width 두 조건은 한 가지 특정 패턴, 즉 가운데 정렬된 콘텐츠 열을 위해 존재합니다. max-width: 1100px; margin: 0 auto를 가진 래퍼는 배경도 패딩도 없어 비어 보이지만, 페이지에서 가장 중요한 레이아웃 역할을 하고 있습니다. 이를 정리하면 콘텐츠가 화면 가장자리까지 퍼지게 됩니다. 그래서 이 래퍼는 유지되고 Boxed 컨테이너로 바뀝니다.
패딩이 있는 래퍼를 자식과 병합하지 않는 이유
한 걸음 더 나아가자는 아이디어는 그럴듯하게 들립니다. 컨테이너가 컨테이너 하나만 담고 있다면 둘을 병합하고 패딩을 합치자는 것입니다. 사람들이 가장 먼저 요청하는 기능이지만, 이 도구는 의도적으로 그렇게 하지 않습니다.
카드를 생각해 보세요. 바깥 래퍼에는 카드 사이 간격을 만드는 24px 패딩이 있고, 그 안의 박스에는 카드 가장자리와 텍스트 사이 공간을 만드는 자체 24px 패딩과 흰색 배경이 있습니다. 이 두 패딩은 계산된 스타일에서는 똑같아 보이지만 의미는 완전히 다릅니다. 병합하면 패딩이 48px인 박스 하나가 생기고, 원래 간격이던 부분까지 배경이 덮으며, 카드 행에는 더 이상 카드 사이 간격이 없게 됩니다.
계산된 스타일만으로는 이 둘을 확실히 구별할 방법이 없고, 잘못 판단하면 원인을 추적하기 정말 어려운 방식으로 레이아웃이 조용히 깨집니다. 그래서 자동 처리는 아무 역할도 하지 않는다는 것이 확실한 래퍼만 제거하고, 애매한 것은 사용자에게 맡깁니다. 복사 루트와 제외 컨트롤이 바로 그 용도입니다.
깊이가 실제로 치르게 하는 비용
깊은 중첩은 정확성의 문제가 아닙니다. 페이지는 정상적으로 렌더링됩니다. 비용은 그 이후에 하는 모든 작업에서 발생합니다.
- 요소 선택. 캔버스에서 제목을 클릭하면 가장 안쪽 요소가 선택됩니다. 섹션 래퍼에 도달하려면 매번 탐색 경로를 네다섯 번 거슬러 올라가야 합니다.
- 반응형 작업. 다섯 단계로 중첩된 구조에서 세 가지 기기 크기별 패딩을 설정하면, 세 개면 될 설정이 열다섯 개가 됩니다.
- 출력 용량. 모든 컨테이너는 자체적으로 생성된 CSS 규칙을 가진 실제
<div>입니다. 섹션 스무 개에 걸쳐 깊이가 8이면, 두 단계면 충분한 레이아웃에 비해 마크업이 너무 많습니다. - 인계. 나중에 클라이언트나 동료가 페이지를 편집할 때, 깊은 트리는 그들이 포기하고 여러분에게 대신 해 달라고 부탁하게 되는 지점입니다.
실제 예시
대부분의 페이지 빌더와 AI 생성기가 만들어 내는 구조는 다음과 같습니다.
section.features > div.container > div.row > div.col-4 > div.card > div.card-body > h3
제목에 도달하기까지 일곱 단계입니다. 변환 후 div.container는 max-width 가운데 정렬을 담당한다면 남고, div.row는 자체 스타일이 없는 단순한 플렉스 부모라면 정리됩니다. 그리고 .card가 아이콘, 제목, 짧은 단락을 담고 있다면 카드 분기 전체가 아이콘 박스 위젯 하나로 평탄화됩니다. 아무것도 손대지 않아도 일곱 단계가 대략 세 단계로 줄어듭니다.
소스를 section.features > div.grid > div.card > h3로 다시 작성하면 두 단계가 됩니다. 요령은 이것뿐입니다. 변환기는 마크업을 충실하게 반영하므로, 얕은 마크업만이 얕은 Elementor 트리를 얻는 확실한 방법입니다.
내보내기 전에 확인하세요
구조 맵 개요에는 최대 중첩 깊이가 표시됩니다. 7이나 8 같은 숫자가 보이면 트리의 더 깊은 곳에 복사 루트를 설정하거나, 소스 마크업을 단순화하고 다시 변환하라는 신호입니다. Elementor 편집기에서 작업하기에는 깊이 3–5가 적당합니다.