HTML to Elementor
튜토리얼로 돌아가기

How to import an existing HTML website into Elementor

정적 HTML 웹사이트를 Elementor를 사용해 워드프레스로 마이그레이션하는 일은 큰 작업처럼 들리며, 잘못된 방식으로 하면 실제로도 그렇습니다. 변환기를 이용해 페이지별로 진행하면 대부분 기계적인 작업입니다. 다음은 전체 과정을 관리 가능하게 유지하고, 마지막에 실제로 편집 가능한 Elementor 페이지를 만들어 주는 접근 방식입니다.

먼저 워드프레스 쪽을 설정하세요

무엇이든 변환하기 전에 대상 환경을 준비하세요. Elementor가 활성화된 워드프레스 설치, 원본이 웹 글꼴을 사용했다면 등록된 글꼴(사이트 설정 → 사용자 정의 글꼴), 가져온 페이지에 브랜드 색상을 적용하려면 전역 색상으로 설정된 브랜드 색상이 필요합니다. 이 작업을 먼저 해 두면 대체 글꼴이나 임시 색상이 아닌 실제 사이트를 기준으로 각 변환 페이지를 판단하게 됩니다.

한 번에 한 페이지씩 변환하세요

전체 사이트를 한 번에 가져오려고 하지 마세요. 페이지별로 작업하고, 긴 페이지 안에서는 섹션별로 작업하세요. 변환된 각 단위는 검증하기 쉽지만, 전체 사이트를 한꺼번에 검증하기는 어렵습니다. 조각으로 나누어 변환하면 이전 사이트의 헤더, 푸터, 쿠키 배너까지 모든 페이지에 끌려 들어오는 일도 없습니다.

각 페이지에서 HTML을 열고, CSS가 인라인 또는 style 블록에 있는지 확인한 다음, 네이티브 구성 요소 모드의 변환기에 붙여넣으세요. 제목, 텍스트, 이미지, 버튼, 레이아웃은 네이티브 Elementor 위젯과 컨테이너가 되며, 간격, 색상, 타이포그래피가 실제 컨트롤에 반영됩니다.

공유 헤더와 푸터는 한 번만 처리하세요

정적 사이트는 모든 HTML 파일에 헤더와 푸터를 반복해서 넣습니다. 워드프레스에서는 그것들이 페이지 콘텐츠에 들어 있기를 원하지 않습니다. 한 번 만들어 모든 곳에 적용되는 테마 헤더와 푸터(또는 Elementor 테마 빌더 템플릿)로 두는 것이 좋습니다. 따라서 페이지를 변환할 때 구조 맵의 복사 루트를 사용해 해당 페이지의 주요 콘텐츠만 가져오고 헤더와 푸터는 남겨 두세요. 그것들은 별도로 한 번만 구축하면 됩니다.

이미지와 링크는 주의가 필요합니다

  • 이미지: 미디어 라이브러리에 업로드하고 실제 URL을 참조하면 수동 단계 없이 가져올 수 있습니다. 로컬 파일 경로와 Base64 이미지는 첨부 파일이 될 수 없으므로 빈 자리 표시자로 들어옵니다. 각 자리 표시자는 대체 텍스트를 캡션으로 유지하므로 무엇을 업로드해야 하는지 알 수 있습니다.
  • 내부 링크: 정적 사이트는 .html 파일 간에 링크합니다. 가져온 후에는 새 워드프레스 URL을 가리키도록 링크를 업데이트하세요. 이는 모든 마이그레이션에서 지루한 부분이고 피할 방법이 없지만, 페이지별로는 금방 끝납니다.
  • 폼과 메뉴: 폼 제출 액션은 그대로 넘어오지 않으므로 사이트의 Elementor 폼에 연결하세요. 내비게이션은 실제 워드프레스 메뉴가 됩니다.

잘 변환되는 것과 다시 만들어야 하는 것

레이아웃, 간격, 색상, 타이포그래피, 이미지, 아이콘, 구조는 충실하게 변환됩니다. 스크립트는 제거되므로 자바스크립트로 구동되는 동작은 네이티브 위젯으로 다시 구축해야 합니다. 호버 상태와 애니메이션은 Elementor에서 다시 적용합니다. 이 구분을 미리 알아 두면 마이그레이션이 예상치 못한 일의 연속이 아니라 예측 가능한 체크리스트가 됩니다.

효과적인 마이그레이션 순서

  1. 공유 헤더와 푸터를 한 번만 구축하세요.
  2. 홈 페이지, 주요 랜딩 페이지, 내부 페이지 순서로 변환하세요.
  3. 각 페이지에서 콘텐츠를 가져오도록 복사 루트를 설정하고, 붙여넣은 다음 내부 링크와 이미지를 수정하세요.
  4. 슬라이더, 탭 같은 인터랙티브 요소는 네이티브로 다시 구축하세요.
  5. 기능 그리드, CTA 밴드 같은 재사용 가능한 섹션은 작업하면서 템플릿 라이브러리에 저장하세요. 그러면 이후 페이지는 처음부터 구축하는 대신 조립하는 방식이 됩니다.
  6. 검색 순위를 유지하도록 이전 .html URL에서 새 URL로 리디렉션을 설정하세요.

이런 방식으로 작업하면 HTML 웹사이트를 Elementor로 가져오는 일은 꾸준한 페이지별 과정이 되고, 마지막에는 편집 가능한 워드프레스 사이트가 남습니다. 처음부터 다시 구축하는 것도 아니고, 편집할 수 없는 코드 블록 더미도 아닙니다.