기본 변환 외에도, Elementor 페이지가 얼마나 깔끔하고 편집하기 쉬운 상태로 완성될지를 결정하는 설정이 세 가지 있습니다. 아이콘, 이미지, 구조를 어떻게 처리하느냐입니다. 내보내기 전에 이 세 가지를 제대로 맞춰 두느냐에 따라, 자신 있게 넘겨줄 수 있는 페이지가 되느냐 한 시간 동안 정리해야 하는 페이지가 되느냐가 갈립니다.
세 가지 모두 공통점이 하나 있습니다. 변환기는 소스에 실제로 있는 것만 다룰 수 있다는 점입니다. 각 설정은 결국 변환기가 깔끔하게 매핑할 수 있는 재료를 주는 일이며, 그럴 수 없을 때 어떻게 할지 아는 일이기도 합니다.
1. Elementor 아이콘 라이브러리에 들어가는 아이콘
HTML이 Font Awesome 클래스(예: <i class="fas fa-check"></i>)를 사용한다면 아이콘 옵션을 Elementor 아이콘 라이브러리에 매칭으로 설정하세요. 각 아이콘이 잠긴 SVG가 아니라, Elementor 아이콘 선택기에서 바꿀 수 있는 실제 편집 가능한 아이콘이 됩니다.
더 좋은 점도 있습니다. 아이콘 + 제목 + 짧은 텍스트로 이루어진 카드는 단일 아이콘 박스 위젯으로 변환됩니다. 변환기는 아이콘의 클래스와 카드 제목을 이용해 이름으로 아이콘을 매칭하고(예: “Reusable” → recycle), 아이콘 크기, 간격, 타이포그래피를 가져옵니다. 일치하는 아이콘을 찾지 못하면 직접 고를 수 있도록 아이콘을 비워 둡니다.
팁: 손으로 그린 사용자 정의 SVG는 Elementor의 아이콘 컨트롤에 들어갈 수 없으므로, 라이브러리 아이콘을 원한다면 소스에서 Font Awesome 클래스를 쓰는 편이 좋습니다.
2. 이미지: Elementor에서 채우기
AI는 실제 이미지 파일을 HTML 텍스트에 넣을 수 없으므로 이미지가 가장 까다로운 부분입니다. 가장 간단한 방법은 이미지를 빈 이미지 자리표시자로 설정하는 것입니다. 모든 이미지가 빈 슬롯이 되고, 각 슬롯은 alt 텍스트를 캡션으로 유지합니다. 그래서 Elementor에서 업로드할 때 어떤 사진이 어디에 들어가는지 알 수 있습니다.
- 가장 좋은 방법: 먼저 이미지를 미디어 라이브러리에 업로드한 뒤 HTML에서 그
https://URL을 사용하세요. 수동 작업 없이 가져와집니다. - 피해야 할 것: Base64로 삽입한 이미지와 로컬 파일 경로입니다. 변환기는 기본적으로 이런 이미지를 빈 자리표시자로 바꿉니다.
3. 구조 맵: 내보내기 전에 검토하세요
구조 맵 탭을 열면 실시간 미리보기 옆에 정확한 Elementor 트리가 표시됩니다. 어느 행이든 마우스를 올리면 양쪽에서 해당 부분이 강조 표시됩니다.
- 행의 과녁 모양 아이콘은 복사 루트를 설정합니다. 그 블록만 내보내고 바깥 래퍼는 제외합니다.
- ✕ 아이콘은 해당 부분을 복사에서 제외합니다(원하지 않는 요소가 끼어 있을 때 유용합니다).
- 개요에는 구성요소 수, 중첩 깊이, 그리고 신뢰도 분류(직접 / 부분 / HTML로 유지)가 표시됩니다.
여기서 잠깐 훑어보기만 해도, 깔끔하게 매핑되지 않은 부분을 실제 사이트에 닿기 전에 잡아낼 수 있습니다.
세 가지를 함께 쓰면
이 설정들은 효과가 서로 겹쳐 커집니다. Font Awesome 아이콘, 실제 이미지 URL, 얕은 마크업으로 만든 카드 행은 깔끔한 아이콘 박스나 이미지 박스 위젯을 담은 Grid로 변환됩니다. 손으로 직접 만들었어도 만족했을 결과입니다. 같은 행을 인라인 SVG, Base64 이미지, 다섯 단계의 래퍼로 만들면, 잠긴 그래픽이 들어 있는 깊은 컨테이너 트리로 변환됩니다. 도구도 페이지도 같지만, 오후 시간은 전혀 다르게 흘러갑니다.
빠른 결정 가이드
- 기존 브랜드 사이트에 섹션을 가져오나요? 아이콘은 라이브러리에 매칭하고, 사이트 색상과 사이트 타이포그래피를 쓰세요. 블록이 자동으로 브랜드에 맞춰집니다.
- 디자인을 충실하게 재현하나요? 아이콘은 라이브러리에 매칭하고, 원본 색상과 원본 타이포그래피를 쓰세요. 그런 다음 결과를 판단하기 전에 사용자 정의 글꼴을 Elementor에 등록하세요.
- 이미지를 아직 업로드하지 않았나요? 빈 자리표시자를 쓰고, 그 전에 소스의 모든 이미지에 의미 있는 alt 텍스트가 있는지 확인하세요.
- 페이지가 긴가요? 복사 루트를 설정해 한 번에 한 섹션씩 가져오세요.
들여 둘 만한 습관
문제가 보일 때만이 아니라, 내보내기 전에는 매번 구조 맵을 여세요. 구성요소 수, 중첩 깊이, 신뢰도 분류를 읽는 데는 15초면 충분하고, 이 세 숫자가 지금 내보내도 될지, 돌아가서 소스를 고쳐야 할지를 알려 줍니다. 입력을 고쳐 다시 변환하는 것이 Elementor 안에서 결과물을 수리하는 것보다 언제나 빠르며, 이 습관이 매끄러운 작업과 답답한 작업을 가르는 차이입니다.