변환기는 두 가지 내보내기 경로를 제공합니다. 둘이 만들어 내는 구성요소는 완전히 같습니다. 차이는 오로지 작업 방식, 이식성, 그리고 결과물을 이후에 어떻게 쓸 생각인지에 있습니다.
방법 A — Elementor 데이터 붙여넣기
Elementor 데이터 복사를 클릭하고, Elementor에서 대상 페이지를 연 다음, 캔버스의 빈 영역을 오른쪽 클릭해 “다른 사이트에서 붙여넣기”를 선택하세요. 클릭한 위치에 구성요소가 바로 들어갑니다.
내부적으로는 Elementor 자체의 복사-붙여넣기 기능이 쓰는 형식의 JSON 데이터가 클립보드에 들어갑니다. 그래서 “다른 사이트에서” 붙여넣기 메뉴를 써야 합니다. 일반 붙여넣기는 같은 설치 환경 안에서 복사한 콘텐츠를 기대하지만, 이 메뉴는 다른 곳에서 온 데이터를 받아들입니다.
- 알맞은 경우: 빠르게 그 자리에 넣을 때. 이미 편집 중인 페이지에 변환한 섹션 하나를 추가하는 경우입니다.
- 필요한 것: 대상 사이트에서 열려 있는 Elementor 편집기, 그리고 브라우저의 클립보드 접근 권한.
- 주의할 점: 클립보드 권한입니다. 일부 브라우저와 개인정보 보호 확장 프로그램은 스크립트가 클립보드에 쓰는 것을 막습니다. 복사가 아무 반응 없이 실패한다면 JSON 방식을 쓰세요.
방법 B — JSON 템플릿 내려받기
.json 템플릿 다운로드를 클릭한 다음, Elementor에서 템플릿 → 저장된 템플릿을 열고 템플릿 가져오기를 선택하세요. 결과물은 템플릿으로 들어오며, 파일을 가져온 사이트라면 어디서든 어느 페이지에나 삽입할 수 있습니다.
- 알맞은 경우: 페이지 전체, 여러 사이트에서의 재사용, 동료에게 작업 넘기기, 또는 자신의 파일 저장소에 버전별로 보관하기.
- 필요한 것: 대상 사이트의 템플릿 라이브러리 접근 권한.
- 덤: 파일이 평범한 JSON입니다. 버전 관리에 넣거나, 두 번의 내보내기 결과를 diff로 비교하거나, 특정 날짜의 디자인을 그대로 보관해 둘 수 있습니다.
어느 쪽을 써야 할까요?
간단한 규칙이 있습니다. 한 번만 넣을 것은 붙여넣고, 두 번 이상 쓸 것은 내려받으세요.
지금 만들고 있는 페이지에 카드 하나, 히어로 하나, 가격표 행 하나를 넣으려는 건가요? 붙여넣으세요. 클릭 두 번이면 끝납니다. 랜딩 페이지 전체를 옮기거나, 앞으로의 프로젝트에서 꺼내 쓸 재사용 블록 라이브러리를 만들기 시작하는 건가요? JSON을 내려받고, 파일 이름을 제대로 붙여, 다시 찾을 수 있는 곳에 두세요.
클라이언트나 팀원과 함께 일한다면 고려할 점이 하나 더 있습니다. JSON 파일은 보낼 수 있습니다. 클립보드 데이터는 그렇지 않습니다.
내보내기 범위부터 정하세요
어느 경로를 택하든 내보내기 전에 범위를 정하세요. 구조 맵에서 행의 과녁 모양 아이콘을 누르면 그 행이 복사 루트가 되어 해당 하위 트리만 내보내집니다. 이렇게 해야 실제로 원하던 섹션과 함께 페이지의 바깥 래퍼, 헤더, 푸터까지 끌려오는 일을 피할 수 있습니다. 십자 아이콘으로는 개별 행을 제외합니다.
이 설정은 붙여넣기 방식에서 더 중요합니다. 붙여넣은 데이터는 오른쪽 클릭한 위치에 그대로 들어가므로, 범위를 너무 넓게 잡으면 나중에 걷어 내기가 번거롭습니다.
붙여넣기가 되지 않을 때
붙여넣었는데 아무 일도 일어나지 않는다면 원인은 몇 가지로 좁혀집니다. 가능성이 높은 순서대로 정리하면 다음과 같습니다.
- 잘못된 메뉴 항목. 일반 붙여넣기는 같은 설치 환경 안에서 복사한 콘텐츠를 기대합니다. 변환한 데이터에는 다른 사이트에서 붙여넣기가 필요합니다. 같은 오른쪽 클릭 메뉴에서 한 칸 아래에 있습니다. 다른 원인을 모두 합친 것보다 이 경우가 더 많습니다.
- 클립보드 쓰기가 차단되었습니다. 일부 브라우저와 개인정보 보호 확장 프로그램은 스크립트의 클립보드 접근을 거부합니다. 이런 경우 변환기는 조용히 실패하지 않고 알려 줍니다. JSON 다운로드 방식은 클립보드가 전혀 필요 없으므로 믿을 만한 대안입니다.
- 중간에 다른 것이 클립보드를 덮어썼습니다. 복사 버튼을 누른 뒤 붙여넣기 전에 URL이나 스크린샷 같은 다른 것을 복사하면 데이터가 바뀝니다. 다시 복사해서 곧바로 붙여넣으세요.
- 클립보드에 페이지가 아니라 소스 코드가 들어 있습니다. Lovable, v0, Bolt 같은 AI 앱 빌더를 쓰다 온 사람들이 자주 겪는 경우입니다. 이 도구들은 React와 JSX 프로젝트를 만들며, JSX 컴포넌트 소스는 HTML이 아니므로 여기에 붙여넣어도 쓸모 있는 결과가 나오지 않습니다. 변환기가 읽는 것은 렌더링된 페이지입니다. 도구의 미리보기를 브라우저에서 열고 그 페이지의 HTML을 가져오면 다른 페이지와 똑같이 변환됩니다.
가져온 뒤
두 경로 모두 같은 짧은 마무리 작업이 필요합니다.
- 버튼 링크를 다시 거세요. 안쪽 블록만 내보냈다면 바깥을 감싸던 앵커가 빠졌을 수 있어서, 버튼이 링크 없이 들어올 수 있습니다.
- 버튼과 링크의 호버 상태를 설정하세요. 호버 상태는 정적인 페이지에서 읽을 수 없으며, 마무리되지 않은 가져오기를 가장 눈에 띄게 드러내는 흔적입니다.
- 내비게이션 메뉴 위젯과 폼 위젯을 실제 WordPress 소스에 연결하세요. 메뉴에는 사이트의 메뉴 중 하나가 필요하고, 폼에는 사이트에서 설정한 액션이 필요합니다. 둘 다 옮겨 올 수 없습니다.
- 각 슬롯의 캡션을 보고 어떤 사진이 어디에 들어가는지 확인하며 자리표시자 이미지를 채우세요.
- 페이지를 완료로 보기 전에 세 가지 기기 화면을 확인하세요.
Elementor 버전에 대한 참고
붙여넣거나 가져온 콘텐츠는 대상 사이트의 Elementor 버전이 해석합니다. 한 사이트에서 내보내 더 오래된 버전을 쓰는 다른 사이트로 가져오면, 새로운 컨테이너나 그리드 설정 일부를 인식하지 못할 수 있습니다. 대상 사이트의 Elementor를 최신 상태로 유지하면 “내보낼 때는 제대로 보였는데” 같은 헷갈리는 문제를 피할 수 있습니다.