정적 HTML 웹사이트를 Elementor가 설치된 WordPress로 이전하는 일은 큰 작업처럼 들리고, 잘못된 방식으로 하면 실제로 큰 작업이 됩니다. 변환기를 이용해 페이지 단위로 진행하면 대부분 기계적인 작업입니다. 전체 과정을 감당할 만한 규모로 유지하면서, 마지막에 편집 가능한 진짜 Elementor 페이지를 얻는 방법을 소개합니다.
WordPress 쪽부터 먼저 준비하세요
무엇이든 변환하기 전에 옮겨 갈 곳을 준비하세요. Elementor가 활성화된 WordPress, 원본이 웹 글꼴을 썼다면 등록해 둔 글꼴(사이트 설정 → 사용자 정의 글꼴), 그리고 가져온 페이지가 브랜드 색상을 따르게 하려면 전역 색상으로 설정해 둔 브랜드 색상이 필요합니다. 이것을 먼저 해 두면 변환한 페이지를 대체 글꼴이나 임시 색상이 아니라 실제 사이트를 기준으로 판단할 수 있습니다.
한 번에 한 페이지씩 변환하세요
사이트 전체를 한 번에 가져오려고 하지 마세요. 페이지 단위로 진행하고, 긴 페이지는 그 안에서 섹션 단위로 진행하세요. 변환한 단위 하나하나는 검증하기 쉽지만, 사이트 전체를 한꺼번에 검증하기는 어렵습니다. 조각으로 나눠 변환하면 예전 사이트의 헤더, 푸터, 쿠키 배너를 모든 페이지에 끌고 들어오는 일도 막을 수 있습니다.
각 페이지마다 HTML을 열고, CSS가 인라인이나 style 블록 안에 있는지 확인한 다음, 네이티브 구성요소 모드로 설정한 변환기에 붙여넣으세요. 제목, 텍스트, 이미지, 버튼, 레이아웃이 네이티브 Elementor 위젯과 컨테이너가 되고, 간격, 색상, 타이포그래피가 실제 컨트롤에 옮겨집니다.
페이지가 많을 때 가장 빠른 방법: 일괄 변환
페이지가 몇 개를 넘는다면 하나씩 넣을 필요가 없습니다. HTML 파일을 모두 한꺼번에 변환기에 놓으세요. 파일이 두 개 이상이면 일괄 변환 모드로 바뀝니다. 파일들은 같은 설정으로 차례로 변환되고, 페이지마다 Elementor JSON 템플릿이 하나씩 담긴 ZIP 파일 하나를 내려받게 됩니다.
그러면 WordPress 쪽 작업은 변환 작업이 아니라 가져오기 작업이 됩니다. 템플릿 → 저장된 템플릿 → 가져오기에서 템플릿을 들여온 뒤, 각 템플릿으로 페이지를 만들면 됩니다. 이 모든 과정은 여전히 브라우저 안에서 실행되므로, 30페이지짜리 사이트라도 파일 하나 어디에도 업로드되지 않습니다.
솔직하게 밝혀 둘 한계가 두 가지 있습니다. 일괄 변환은 자동 매핑을 사용합니다. 항목별 매핑 패널과 복사 루트는 파일 하나를 변환할 때만 쓸 수 있는 기능이므로, 무엇을 무엇으로 바꿀지 직접 조정하고 싶은 페이지는 나중에 따로 변환하는 것이 좋습니다. 또 일괄 변환은 각 파일을 주어진 그대로 변환하므로, 공통 헤더와 푸터가 모든 템플릿 안에 들어갑니다. 파일을 넣기 전에 HTML에서 잘라 내거나, 가져온 각 템플릿에서 해당 컨테이너를 삭제하세요. 공통 요소가 많은 사이트라면 파일을 먼저 다듬는 편이 확실히 빠릅니다.
공통 헤더와 푸터는 한 번만 처리하세요
정적 사이트는 모든 HTML 파일에 헤더와 푸터를 반복해서 넣습니다. WordPress에서는 이것들이 페이지 콘텐츠 안에 있으면 안 됩니다. 한 번 만들어 모든 곳에 적용되는 테마 헤더와 푸터(또는 Elementor 테마 빌더 템플릿)로 두어야 합니다. 그러니 페이지를 변환할 때는 구조 맵의 복사 루트로 그 페이지의 본문 콘텐츠만 가져오고 헤더와 푸터는 남겨 두세요. 헤더와 푸터는 따로 한 번만 만들면 됩니다.
이미지와 링크는 따로 챙겨야 합니다
- 이미지: 미디어 라이브러리에 업로드하고 실제 URL을 참조하면 수동 작업 없이 가져와집니다. 로컬 파일 경로와 Base64 이미지는 첨부 파일이 될 수 없으므로 빈 자리표시자로 들어옵니다. 각 자리표시자는 alt 텍스트를 캡션으로 유지하므로 무엇을 업로드해야 하는지 알 수 있습니다.
- 내부 링크: 정적 사이트는
.html파일끼리 서로 링크합니다. 가져온 뒤에는 이 링크가 새 WordPress URL을 가리키도록 고치세요. 어떤 이전 작업에서든 피할 수 없는 지루한 부분이지만, 페이지당으로 보면 금방 끝납니다. - 폼과 메뉴: 폼의 전송 액션은 넘어오지 않으므로 사이트의 Elementor 폼에 연결하세요. 내비게이션은 실제 WordPress 메뉴가 됩니다.
잘 변환되는 것과 다시 만들어야 하는 것
레이아웃, 간격, 색상, 타이포그래피, 이미지, 아이콘, 구조는 충실하게 변환됩니다. 스크립트는 제거되므로 JavaScript로 동작하던 기능은 네이티브 위젯으로 다시 만듭니다. 호버 상태와 애니메이션은 Elementor에서 다시 적용합니다. 이 구분을 미리 알고 있으면 이전 작업이 예상 밖의 일의 연속이 아니라 예측 가능한 체크리스트가 됩니다.
효과적인 이전 순서
- 공통 헤더와 푸터를 한 번만 만드세요.
- 홈페이지, 주요 랜딩 페이지, 내부 페이지 순서로 변환하세요.
- 페이지마다 복사 루트를 설정해 콘텐츠를 가져와 붙여넣은 뒤, 내부 링크와 이미지를 고치세요.
- 슬라이더, 탭 같은 상호작용 요소는 네이티브로 다시 만드세요.
- 기능 그리드, CTA 띠처럼 재사용할 섹션은 작업하면서 템플릿 라이브러리에 저장하세요. 그러면 이후 페이지는 새로 짓는 것이 아니라 조립하는 작업이 됩니다.
- 검색 순위를 유지할 수 있도록 예전
.htmlURL에서 새 URL로 리디렉션을 설정하세요.
이렇게 진행하면 HTML 웹사이트를 Elementor로 가져오는 일은 페이지 단위로 꾸준히 진행하는 과정이 되고, 마지막에는 편집 가능한 WordPress 사이트가 남습니다. 처음부터 다시 만드는 것도, 편집할 수 없는 코드 블록 더미도 아닙니다.