Elementor 템플릿은 JSON으로 저장됩니다. 즉 HTML 페이지를 JSON 템플릿 파일로 변환해 다른 Elementor 템플릿과 똑같이 가져올 수 있습니다. 어디로든 옮길 수 있고, 재사용할 수 있으며, 클립보드에 의존하지 않습니다. JSON 방식이 어떻게 동작하는지, 언제 선택하면 좋은지 설명합니다.
두 가지 내보내기 형식, 동일한 구성요소
HTML을 변환한 뒤에는 두 가지 방법으로 내보낼 수 있습니다. Elementor 데이터 복사는 열려 있는 편집기에 바로 붙여넣을 수 있도록 JSON 데이터를 클립보드에 넣습니다. JSON 템플릿 다운로드는 같은 구조를 .json 파일로 저장합니다. 구성요소는 똑같습니다. 차이는 파일은 어디로든 옮길 수 있지만 클립보드 데이터는 그렇지 않다는 점입니다.
JSON 파일이 알맞은 경우
- 여러 사이트에서 재사용. Elementor가 설치된 어떤 WordPress 사이트에서든 같은 파일을 가져올 수 있습니다.
- 버전 관리. 파일이 평범한 JSON이므로 저장소에 보관하거나, 두 번의 내보내기 결과를 diff로 비교하거나, 특정 날짜의 디자인을 그대로 보관해 둘 수 있습니다.
- 공유. 동료나 클라이언트에게 파일은 보낼 수 있지만, 클립보드는 보낼 수 없습니다.
- 라이브러리 구축. 이름을 붙인 JSON 템플릿을 모아 둔 폴더는 앞으로의 페이지를 조립하는 구성요소 라이브러리가 됩니다.
Elementor에 JSON 템플릿을 가져오는 방법
- HTML을 변환한 뒤 JSON 템플릿 다운로드를 클릭하세요.
- WordPress에서 템플릿 → 저장된 템플릿을 엽니다.
- 템플릿 가져오기를 클릭하고
.json파일을 선택하세요. - 템플릿이 라이브러리에 나타납니다. Elementor 라이브러리 버튼을 이용해 어느 페이지에든 삽입할 수 있습니다.
JSON 안에 들어 있는 것
이 파일은 Elementor 요소 트리를 기술합니다. 레이아웃, 배경, 테두리, 간격 설정을 가진 컨테이너와, 콘텐츠 및 스타일 설정을 가진 위젯입니다. Elementor 고유의 형식이므로 모든 것이 HTML 블록이 아니라 편집 가능한 위젯으로 들어옵니다. 제목, 텍스트, 이미지, 버튼, 아이콘 박스, 이미지 박스, 그리드가 모두 바로 편집할 수 있는 상태로 도착합니다.
실무적으로 알아 둘 점이 하나 있습니다. JSON의 이미지 참조는 파일이 포함된 것이 아니라 URL입니다. 소스가 실제 미디어 라이브러리 URL을 썼다면 가져올 때 그대로 연결되지만, 로컬 경로와 Base64 이미지는 나중에 채워야 하는 빈 자리표시자가 됩니다. 이미지를 먼저 업로드하는 것, 이 한 가지만 바꿔도 JSON 템플릿이 깔끔하게 들어옵니다.
저장하기 전에 템플릿을 특정 사이트에 묶이지 않게 만드세요
색상과 글꼴을 고정해 둔 템플릿은 다음에 가져가는 사이트에서 어색하게 보입니다. 재사용할 블록을 내보내기 전에 대상 사이트 색상 상속과 대상 사이트 전역 글꼴 상속로 변환하세요. 그러면 템플릿이 대상 사이트가 정의한 팔레트와 글꼴을 그대로 따르므로, 같은 JSON이 어디에 가져가든 원래 그 사이트의 것처럼 보입니다.
구조를 깔끔하게 유지하세요
좋은 재사용 템플릿은 최상위 컨테이너 하나에 얕은 트리가 들어 있는 형태입니다. 내보내기 전에 구조 맵을 확인하세요. 중첩 깊이가 낮고, 카드 행이 카드마다 컨테이너로 감싼 형태가 아니라 위젯을 직접 담은 그리드라면, 가져온 뒤 템플릿의 스타일을 바꾸기가 훨씬 쉽습니다. 깔끔한 입력이 깔끔한 JSON을 만듭니다.
파일의 실제 구조
특별한 비밀은 없으며, 필드를 알고 나면 형식이 훨씬 덜 부담스럽게 느껴집니다. 내려받은 템플릿은 키 다섯 개를 가진 JSON 객체 하나입니다.
content— 요소 트리입니다. 컨테이너와 위젯이 각자의 설정과 함께 들어 있습니다.page_settings— 페이지 수준 설정으로, 변환된 블록에서는 비어 있습니다.version— Elementor 템플릿 스키마 버전인"0.4"입니다.title— 템플릿 이름 필드에 입력한 값이며, 기본값은 “HTML Converted Page”입니다.type—"page"입니다.
눈여겨볼 것은 이 type 값입니다. 템플릿을 섹션이 아니라 페이지로 선언하므로, 저장된 템플릿에 페이지 템플릿으로 들어갑니다. 그래도 라이브러리 버튼으로 기존 페이지 어디에든 삽입할 수 있으니 잃는 것은 없고, 오히려 이 템플릿에서 바로 새 빈 페이지를 시작할 수도 있습니다.
클립보드 데이터가 다르게 생긴 이유
복사 버튼이 클립보드에 넣는 내용을 살펴보면 같은 객체가 아닙니다. type: "elementor", siteurl, 그리고 요소 배열이 들어 있고, version도 title도 없습니다.
이것은 Elementor의 템플릿 형식이 아니라 붙여넣기 형식입니다. 오른쪽 클릭으로 다른 사이트에서 붙여넣기를 선택하면, 편집기는 바로 그 표시를 찾아 클립보드 내용이 일반 텍스트가 아니라 Elementor 데이터임을 알아봅니다. 가져오기 단계 없이 붙여넣기가 되는 것도 이 때문이고, 클립보드 데이터를 파일로 저장해 가져올 수 없는 것도 이 때문입니다. 두 형식은 같은 구성요소를 기술하더라도 서로 바꿔 쓸 수 없습니다.
평범한 JSON이니 진짜 버전 관리가 됩니다
이 파일은 바이너리 묶음이 아니라 읽을 수 있는 JSON이라서 소스 코드처럼 다룰 수 있습니다. 덕분에 정말 유용하지만 페이지 섹션에는 거의 쓰이지 않는 몇 가지가 가능해집니다.
- 두 내보내기 결과를 diff로 비교하기. 블록을 변환하고, 소스를 바꾸고, 다시 변환한 다음 두 파일을 diff로 비교하면 어떤 설정이 바뀌었는지 정확히 보입니다. 특정 변환 옵션이 실제로 무엇을 바꾸는지 이해하는 가장 빠른 방법입니다.
- 특정 시점의 디자인 보관하기. 날짜를 붙인 JSON 파일은 섹션이 어떤 모습이었는지를 정확히 기록해 둔 것이며, 실제 페이지가 알아볼 수 없을 만큼 수정된 뒤에도 되살릴 수 있습니다.
- 가져오기 전에 검토하기. 파일에서
http를 검색하면 참조하는 이미지 URL이 모두 보이므로, 다른 사이트에 깔끔하게 들어갈지 바로 알 수 있습니다.
마지막 방법은 10초면 되고, 가장 흔한 가져오기 실패를 잡아냅니다. 대상 사이트가 접근할 수 없는 사이트를 가리키는 URL로 가득한 템플릿입니다.
복사할까, 다운로드할까: 간단한 규칙
지금 편집 중인 페이지에 한 번만 넣을 것이라면 클립보드 데이터를 붙여넣으세요. 두 번 이상 가져오거나, 공유하거나, 보관할 것이라면 JSON 파일을 내려받으세요. 같은 변환 결과에 목적지가 두 가지일 뿐이니, 다른 곳으로 옮길 필요가 있는지에 따라 고르면 됩니다.