> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/studio-editor/editor/preview.md).

# 웹사이트 미리보기

### 개요

웹사이트 미리보기는 사이트를 게시하기 전에 화면과 동작을 확인하는 기능입니다. 에디터 캔버스에서 작업한 내용이 실제 방문자 화면에 가깝게 보이는지 확인할 수 있습니다.

미리보기에서는 페이지 구성, 메뉴 이동, 버튼 링크, 폼 입력, PC와 모바일 화면을 함께 점검합니다. 사이트를 게시하기 전에는 반드시 미리보기에서 전체 흐름을 확인하는 걸 추천합니다.

<figure><img src="/files/DRPZEYFHVm1ab7gLyixJ" alt=""><figcaption></figcaption></figure>

### 1. 웹사이트 미리보기란?

웹사이트 미리보기는 편집 중인 사이트를 방문자 화면에 가깝게 확인하는 기능입니다. 에디터 캔버스는 작업을 위한 화면이고, 미리보기는 작업한 결과가 실제 사이트처럼 보이는지 확인하는 화면입니다.

예를 들어, 에디터에서는 자연스럽게 보였던 여백이나 이미지 비율이 미리보기에서는 다르게 보일 수 있습니다. 메뉴나 버튼도 에디터 안에서는 확인하기 어렵기 때문에, 미리보기에서 직접 클릭해 확인하는 것이 좋습니다.

### 2. 에디터 화면과 미리보기 화면의 차이 이해하기

에디터 화면과 미리보기 화면은 목적이 다릅니다. 에디터 화면에서는 요소를 선택하고 수정하며, 미리보기 화면에서는 방문자가 보는 방식에 가깝게 사이트를 확인합니다.

<table><thead><tr><th width="177.54693603515625">구분</th><th>설명</th></tr></thead><tbody><tr><td>에디터 캔버스</td><td>섹션, 레이아웃, 블록을 선택하고 수정하는 작업 화면입니다.</td></tr><tr><td>미리보기</td><td>방문자 화면에 가깝게 사이트를 확인하는 화면입니다.</td></tr><tr><td>게시된 사이트</td><td>실제 주소로 방문자가 접속하는 공개 사이트입니다.</td></tr></tbody></table>

에디터에서 보이는 화면과 미리보기 화면이 항상 완전히 같게 느껴지지는 않을 수 있습니다. 특히 브라우저 너비, 모바일 화면, 이미지 비율, 줄바꿈에 따라 보이는 방식이 달라질 수 있습니다.

### 3. 미리보기 열기

미리보기는 스튜디오 에디터 상단 툴바 오른쪽 영역에서 열 수 있습니다. 편집 중인 페이지나 사이트 전체를 확인할 때 사용합니다.

{% hint style="info" %}
**도움말**: 미리보기는 편집 중인 사이트를 확인하기 위한 화면입니다. 사이트를 외부 방문자에게 공개하려면 게시 과정을 진행해야 합니다.
{% endhint %}

1. 스튜디오 에디터에 진입합니다.
2. 상단 툴바 오른쪽 영역을 확인합니다.
3. **사이트 미리보기** 버튼을 클릭합니다.
4. 새 탭에서 미리보기 화면이 열립니다.

### 4. 미리보기 설정으로 해상도별 화면 확인하기

미리보기 탭이 켜지면 **미리보기 설정**을 통해 기기 및 해상도별 화면을 미리볼 수 있습니다.

<div data-with-frame="true"><figure><img src="/files/uTgdzebRKysTBFxXjRGn" alt=""><figcaption></figcaption></figure></div>