HTML 미리보기로 실제 사이트처럼 보기

웹사이트 기획서는 카드와 목록으로 읽는 화면이라, 완성된 사이트가 어떤 모습일지 한눈에 그려지지 않을 때가 있습니다. HTML 미리보기는 기획서에 담긴 페이지와 섹션 내용을 실제 웹사이트처럼 위에서 아래로 이어 붙여 보여 주는 화면입니다. 상단 메뉴로 페이지를 넘겨 가며 전체 흐름을 확인하고, 기획서 화면으로 되돌아올 수 있습니다. 이 글에서는 미리보기를 여는 방법과 화면 구성, 보이는 내용과 보이지 않는 내용을 설명합니다.

1. 어디에서 여나요

기획서 상세 화면 위쪽 버튼 줄의 맨 왼쪽에 보라색 HTML 미리보기 버튼이 있습니다. 누르면 기획서 화면은 그대로 두고 미리보기가 새 탭으로 열립니다.

미리보기는 로그인한 상태에서만 열립니다. 주소를 로그인하지 않은 브라우저에 붙여 넣으면 로그인 화면으로 이동하므로, 다른 사람에게 보여 주려면 이 화면이 아니라 공유 기능을 써야 합니다.

2. 화면 구성

미리보기 맨 위에는 상단 바가 고정되어 있고, 그 아래에 현재 고른 페이지의 섹션들이 차례로 이어집니다.

• 이름: 바 왼쪽에는 비즈니스 이름이 나옵니다. 브라우저 탭 제목은 기획서 이름 뒤에 Preview가 붙은 형태입니다.
• 페이지 메뉴: 이름 옆에 기획서의 페이지 이름이 순서대로 나열됩니다. 지금 보고 있는 페이지는 연한 배경으로 표시됩니다.
• 기획서로 돌아가기: 바 오른쪽 끝의 버튼입니다. 누르면 같은 탭에서 기획서 상세 화면으로 이동합니다.
• 섹션: 페이지에 들어 있는 섹션 내용이 순서대로 쌓입니다. 기획서 화면의 카드에 있던 복사, 직접 편집, AI 편집, 순서 이동, 삭제 버튼은 미리보기에 나타나지 않습니다.

3. 페이지 넘겨 보기

상단 메뉴에서 페이지 이름을 누르면 화면 전환 없이 그 페이지의 섹션들로 바뀝니다. 주소는 바뀌지 않고, 선택한 메뉴 항목이 강조됩니다. 처음 열면 항상 첫 번째 페이지가 보입니다.

내용이 없는 곳은 어떻게 보이나요

• 섹션은 있지만 아직 내용이 채워지지 않았다면 그 섹션은 미리보기에서 건너뜁니다. 위 화면의 메뉴 안내 페이지에는 기획서에 섹션이 세 개 있지만 내용이 있는 두 개만 보입니다.
• 섹션이 하나도 없는 페이지는 이 페이지에는 아직 섹션이 없습니다. 안내만 나옵니다.

4. 미리보기에 나오지 않는 것

미리보기는 페이지별 섹션 내용만 보여 줍니다. 비즈니스 정보, 디자인 콘셉트, SEO 설정 카드의 내용은 따로 나오지 않으며, 섹션의 모양도 기획서 안에서 쓰는 기본 서식으로 그려집니다. 완성된 사이트의 최종 디자인이 아니라 "기획한 내용이 이렇게 배치된다"를 확인하는 화면입니다.

돌아갈 때는 바 오른쪽의 기획서로 돌아가기를 누르면 됩니다. 누르면 미리보기 탭이 기획서 화면으로 바뀌어 기획서 탭이 두 개가 되므로, 하나는 닫으셔도 됩니다.

5. 이렇게 활용해 보세요

• 섹션을 고치거나 순서를 옮긴 뒤 미리보기를 새로 열어 보면 페이지 흐름이 자연스러운지 한눈에 확인할 수 있습니다.
• 페이지가 여러 개일 때는 메뉴를 차례로 눌러 가며 이름과 내용이 서로 이어지는지 점검해 보세요.
• 내용이 비어 건너뛰어진 섹션이 있다면 기획서 화면에서 해당 섹션을 열어 내용을 채운 뒤 다시 확인하세요.

6. 알아 두실 점

• 미리보기는 기획서의 현재 저장 내용을 그대로 읽어 그립니다. 기획서 화면에서 내용을 바꿨다면 미리보기 탭을 새로 고치거나 다시 열어야 반영됩니다.
• 미리보기에서는 내용을 수정할 수 없습니다. 고칠 부분은 기획서 화면의 섹션 카드에서 고칩니다.
• 미리보기를 열거나 페이지를 넘겨도 AI는 사용되지 않으므로 크레딧이 차감되지 않습니다.