HTML 파일 가져오기와 섹션 분리

다른 도구로 만든 랜딩 페이지나 AI 도구가 써 준 HTML 파일이 있다면, 에디터에서 처음부터 다시 만들지 않아도 됩니다. 에디터의 HTML 가져오기는 .html 파일을 읽어 섹션 단위로 나누어 페이지에 넣어 주는 기능입니다. 이 글에서는 가져오는 순서와, 파일이 어떤 기준으로 섹션으로 나뉘는지를 살펴봅니다.

1. HTML 가져오기는 어디에 있나요

웹사이트 에디터 상단바 왼쪽, 페이지 이름 바로 옆에 HTML 가져오기 버튼이 있습니다. 빈 페이지에서도, 이미 섹션이 있는 페이지에서도 같은 자리에 보입니다. 선택할 수 있는 파일은 확장자가 .html 또는 .htm 인 파일이며, 한 번에 파일 하나를 가져옵니다.

2. 가져오는 순서

이 글에서는 아래처럼 헤더, 본문 섹션 세 개, 푸터로 이루어진 작은 빵집 소개 파일을 예로 듭니다. 브라우저에서 파일을 열어 본 모습입니다.

1. HTML 가져오기를 누르고 파일을 고릅니다.
2. 확인 창이 열리고 HTML 파일에서 5개의 섹션을 가져오시겠습니까?처럼 가져올 섹션 수가 표시됩니다. 취소를 누르면 페이지는 그대로입니다.
3. 가져오기를 누르면 섹션이 페이지에 들어옵니다.
4. 마음에 들면 상단 저장을 눌러 페이지에 남깁니다. 에디터에는 자동 저장이 없습니다.

가져온 섹션은 원본의 색, 배경, 글자 크기를 유지한 채 캔버스에 나타나고, 섹션 단위로 선택해 편집할 수 있습니다. 파일의 style 안에 있던 CSS는 섹션과 함께 들어옵니다.

이미 섹션이 있는 페이지에서 가져오면 기존 내용을 지우지 않고 맨 뒤에 이어서 붙습니다.

3. 파일이 섹션으로 나뉘는 기준

• body 바로 아래의 요소 하나가 섹션 하나입니다. header, main, section, footer처럼 태그 이름이 정해져 있지 않아도 됩니다.
• 감싸는 요소 안에 섹션이 여럿이면 한 겹 풀어 줍니다. main 안에 section, header, footer, article, nav, main 같은 요소가 둘 이상 들어 있으면 그 안의 요소마다 섹션이 됩니다. 예시 파일은 header 1개, main 안의 section 3개, footer 1개로 모두 5개입니다. 감싸는 요소의 class는 각 섹션에 그대로 따라가므로, 그 class에 걸려 있던 CSS도 유지됩니다. 풀어 주는 것은 한 겹뿐입니다.
• 제외되는 것은 script, style, link, meta, 가로줄(hr), 줄바꿈(br), class가 divider인 구분선, 내용이 없는 빈 요소입니다. 예시 파일의 가로줄, 구분선, 빈 section은 섹션 수에 들어가지 않습니다.

파일에서 섹션으로 쓸 내용을 하나도 찾지 못하면 HTML 파일에서 섹션을 찾을 수 없습니다.라는 안내가 나옵니다. body 안에 내용이 있는 요소가 있는지 확인해 주세요.

4. 자바스크립트는 어떻게 되나요

파일에 script가 있으면 확인 창에 자바스크립트 1개는 좌측 사이드바의 Head/Body Scripts로 옮깁니다.라는 안내가 붙습니다. 옮겨진 스크립트는 페이지 설정의 Head Scripts, Body End Scripts에서 볼 수 있고, 배포된 페이지에서만 실행되며 에디터 화면에서는 실행되지 않습니다. 버튼 클릭 같은 인라인 동작(onclick 등)은 옮길 수 없어 제외되며, 확인 창에 몇 곳인지 안내됩니다. 글꼴과 반응형 점검은 별도 글에서 다룹니다.

5. 레이어 패널로 결과 확인하기

왼쪽 레일의 레이어를 열면 가져온 섹션이 섹션 1부터 순서대로 나열됩니다. 확인 창에서 안내한 개수와 같은지 보면 어떤 부분이 하나로 묶였는지 알 수 있습니다.

6. 이렇게 활용해 보세요

• 외부에서 만든 랜딩 HTML을 가져온 뒤, 섹션마다 문구와 이미지를 고쳐 내 페이지로 만들어 보세요.
• AI 도구가 만들어 준 HTML을 가져와 섹션 순서를 바꾸거나 복제해 구성을 다듬어 보세요.
• 필요 없는 섹션은 가져온 뒤 섹션 삭제로 지우면 됩니다.

7. 알아 두실 점

• HTML 가져오기는 AI 기능이 아니라 파일을 읽어 나누는 기능입니다.
• 같은 파일을 한 번 더 가져오면 섹션이 한 벌 더 붙습니다.
• 페이지 전체를 소스로 직접 바꾸고 싶다면 상단 전체 소스를 쓰며, 별도 글에서 다룹니다.

파일 하나가 어떤 기준으로 섹션이 되는지만 알면, 가져온 결과가 예상과 다를 때도 원본 HTML의 구조에서 이유를 쉽게 찾을 수 있습니다.