모든 변환 도구에는 한계가 있습니다. 미리 알아 두면 당황스러운 상황이 5분짜리 계획된 작업으로 바뀝니다.
스크립트와 상호작용
모든 script 태그는 제거됩니다. 이는 안전을 위한 결정입니다. 붙여넣기 작업을 통해 임의의 JavaScript를 사이트로 가져오는 것은 위험하며, 어차피 편집기 안에서 안정적으로 작동하지도 않습니다. 사용자 정의 JS로 동작하는 요소(슬라이더, 탭, 카운터, 아코디언)는 정적 마크업으로 도착합니다.
해야 할 일: 해당하는 Elementor 위젯으로 상호작용을 다시 만드세요. 탭, 아코디언, 캐러셀, 카운터, 진행 표시줄은 모두 기본으로 제공되며, 가져온 스크립트보다 유지 관리하기 쉽습니다.
폼
폼의 제출 action과 method는 제거되고, 보이는 필드는 유지됩니다. 어딘가로 데이터를 전송하는 폼은 마크업이 아니라 연동입니다. 엔드포인트를 그대로 옮기면 방문자의 데이터가 다른 사람의 서버로 조용히 전송됩니다.
해야 할 일: Elementor 폼 위젯에 매핑하고, 사이트에서 직접 작업(이메일, 웹훅, 연동)을 구성하세요.
내비게이션 메뉴
nav는 내비게이션 메뉴 위젯을 만들 수 있지만, 그 위젯은 실제 WordPress 메뉴를 가리켜야 합니다. 다른 사람의 마크업에서 여러분 사이트의 메뉴 구조를 추론할 방법은 없습니다.
의사 요소
::before와 ::after 의사 요소는 DOM 노드가 아닙니다. 이런 방식으로 그린 장식 도형, 따옴표, 그라디언트 오버레이, 밑줄 강조는 요소로 존재하지 않으므로 위젯이 될 수 없습니다. 변환 후 디자인 세부 요소가 사라졌다면 가장 먼저 의사 요소를 의심하세요.
애니메이션, 전환 효과, 스티키 동작
키프레임 애니메이션, 스크롤 효과, 전환 효과, 스티키 위치 지정은 옮겨지지 않습니다. Elementor에는 자체 모션 효과와 스티키 컨트롤이 있으며, 어차피 편집기와 더 잘 통합되어 있습니다.
타사 임베드
YouTube와 Vimeo iframe만 유지됩니다. 알 수 없는 프레임을 가져오는 대신 나머지는 모두 제거됩니다. object와 embed 태그도 제거됩니다.
호버 및 포커스 상태
요소의 기본 상태만 읽을 수 있습니다. 호버 색상, 포커스 링, 활성 상태는 Elementor에서 다시 적용해야 합니다.
Base64 이미지와 로컬 경로
데이터 URL 이미지와 상대 파일 경로는 미디어 라이브러리 첨부 파일이 될 수 없으므로 빈 이미지 슬롯으로 바뀝니다. 원래 alt 텍스트는 캡션으로 유지되므로 어떤 사진이 어디에 들어가는지 알 수 있습니다.
CSS 사용자 정의 속성은 평평하게 풀려서 도착합니다
소스에서 --brand-500, --space-4 같은 디자인 토큰을 사용한다면 변수 자체는 남지 않습니다. 변환기는 계산된 스타일을 읽는데, 스타일이 계산될 때쯤이면 브라우저가 이미 모든 var() 참조를 리터럴 값으로 풀어 놓았기 때문입니다. 배경이 var(--brand-500)인 버튼은 그 변수에 대한 참조가 아니라, 그 시점에 변수가 담고 있던 색상으로 변환됩니다.
변환 후 이상해 보이는 곳이 없기 때문에 바로 이 부분에서 사람들이 함정에 빠집니다. 페이지는 올바르게 렌더링되지만, 디자인 시스템을 유지 관리할 수 있게 해 주던 속성은 사라졌습니다. 나중에 브랜드 색상을 바꾸면 위젯 서른 개를 손으로 편집해야 합니다.
해야 할 일: Elementor 쪽에서 토큰 계층을 다시 만드세요. 붙여넣기 전에 전역 색상에 팔레트를, 전역 글꼴에 타입 스케일을 정의한 뒤, 가져온 위젯을 그 전역 값에 다시 연결하세요. 한 번만 하면 되고, 단일 진실 공급원 방식을 되찾을 수 있습니다. 변환기에는 바로 이를 위한 대상 사이트 색상 상속 및 대상 사이트 전역 글꼴 상속 모드가 있습니다. 가져온 위젯에 색상과 타이포그래피를 넣지 않으므로, 값이 하드코딩되어 도착하지 않고 Elementor 전역 값을 상속합니다.
이름이 지정된 그리드 영역
그리드 레이아웃은 열과 간격 설정을 통해 변환됩니다. grid-template-columns는 Elementor Grid 컨테이너에 매핑되고, fr 단위는 유지됩니다. 매핑되지 않는 것은 grid-template-areas입니다. 레이아웃을 작은 ASCII 그림처럼 그리고 각 자식에 이름을 할당하는 이름 지정 영역 문법입니다.
Elementor Grid 컨테이너에는 이름 지정 영역에 해당하는 기능이 없으므로, 이 방식으로 만든 레이아웃은 배치 정보를 잃고 자식들은 일반적인 소스 순서로 돌아갑니다. 결과가 깨진 것은 아니지만 여러분의 레이아웃도 아닙니다.
해야 할 일: 소스를 직접 관리한다면 이름 지정 영역 대신 grid-template-columns와 명시적인 span으로 레이아웃을 표현하세요. 그렇지 않다면 Elementor 안에서 자식들을 한 번 다시 배치해야 한다고 예상하세요.
고정 위치 지정은 의도적으로 낮춰집니다
position: fixed가 지정된 요소는 변환 중에 position: absolute로 다시 작성되며, 안전 보고서에서 이를 알려 줍니다. 이 도구가 디자인을 재현하지 않고 의도적으로 변경하는 몇 안 되는 부분 중 하나입니다.
이유는 격리입니다. 고정 요소는 부모가 아니라 브라우저 뷰포트를 기준으로 배치됩니다. 따라서 다른 사람의 페이지에서 가져온 고정 헤더, 스티키 쿠키 바, 떠 있는 채팅 말풍선은 붙여 넣은 섹션을 벗어나 템플릿을 사용하는 모든 페이지에서 사이트 전체 위에 떠 있게 됩니다. absolute로 낮추면 요소가 가져온 블록 안에 머무르므로, 직접 보고 어떻게 할지 결정할 수 있습니다.
해야 할 일: 정말로 요소를 고정하고 싶다면 가져온 후 Elementor 자체 스티키 컨트롤로 설정하세요. 이 컨트롤은 편집기, 관리자 바, 헤더를 인식하지만 순수한 CSS 규칙은 그렇지 않습니다.
웹 글꼴: 이름은 옮겨지고 파일은 옮겨지지 않습니다
타이포그래피는 값으로 변환되며(패밀리 이름, 크기, 두께, 줄 높이, 자간), 이 값들은 Elementor의 타이포그래피 컨트롤에 들어갑니다. 글꼴 파일은 다른 문제입니다. @font-face 규칙은 소스 사이트에 호스팅된 woff2 파일을 가리킵니다. 그 파일을 여러분의 서버로 복사하는 것도, 그 패밀리를 WordPress에 등록하는 것도 없습니다.
따라서 자체 호스팅 글꼴을 쓰는 페이지에서 변환한 제목은 올바른 패밀리 이름을 가지지만, 실제로는 사이트에 있는 글꼴로 대체됩니다. 대개 충분히 비슷해 보여서 나란히 비교하기 전까지는 알아차리지 못합니다.
해야 할 일: 먼저 Elementor의 사용자 정의 글꼴, Google Fonts 선택, 또는 테마를 통해 사이트에 글꼴을 설치한 다음 변환하세요. 패밀리를 이미 사용할 수 있다면 가져온 타이포그래피가 바로 맞아떨어집니다.
어떤 한계에 걸렸는지 알아내는 방법
추측할 필요가 없습니다. 결과 화면의 두 가지가 직접 답해 줍니다.
- 안전 보고서에는 제거되거나 다시 작성된 항목이 나열됩니다. 제거된 스크립트, 정리된 폼 action, 버려진 임베드, fixed에서 absolute로의 변경, 제외된 Base64 이미지 등입니다. 세부 요소가 사라졌다면 대개 여기에 이름이 나와 있습니다.
- 구조 맵은 실시간 미리보기 옆에 Elementor 트리를 보여 주며, 마우스를 올리면 서로를 강조 표시합니다. 빨간색 HTML 위젯 블록으로 넘어온 것은 대응하는 네이티브 위젯이 없었던 것입니다. 마우스를 올리면 페이지의 어느 부분이었는지 정확히 볼 수 있습니다.
이 두 가지를 함께 보면 질문은 “왜 다르게 보이지?”가 아니라 “이 특정 요소가 이런 특정 방식으로 처리되었다”가 되며, 오후 내내 걸릴 일이 2분짜리 수정으로 바뀝니다.
솔직한 요약
구조, 텍스트, 이미지, 아이콘, 색상, 간격, 타이포그래피는 잘 변환됩니다. 동작, 연동, DOM에 존재하지 않는 것, 소스 서버에 있는 파일이나 데이터에 의존하는 것은 변환되지 않습니다. 가져온 후 폼, 메뉴, 호버 상태, 애니메이션, 글꼴을 다루는 짧은 점검 시간을 계획하면, 과정이 놀라움 대신 예측 가능한 작업이 됩니다.