> 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/canvas-settings.md).

# 사이트 캔버스 설정하기

### 개요

캔버스는 스튜디오 에디터에서 사이트 화면을 편집하는 작업 영역입니다. 사용자는 캔버스에서 페이지가 어떤 너비로 어떻게 보이는지 확인하고, 데스크톱과 모바일 화면에 맞춰 디자인을 조정할 수 있습니다.

### 1. 데스크톱과 모바일 캔버스 설정

스튜디오 에디터에서는 데스크톱 캔버스와 모바일 캔버스를 각각 설정할 수 있습니다.

데스크톱 캔버스는 PC 화면을 기준으로 페이지를 편집할 때 설정하고, 모바일 캔버스는 스마트폰 화면을 기준으로 설정할 수 있습니다. 각 설정 옵션을 아래와 같습니다.

<table><thead><tr><th width="167.3759765625">구분</th><th>설명</th></tr></thead><tbody><tr><td>데스크톱 캔버스</td><td>PC 화면 기준으로 페이지 너비와 배치를 확인합니다.</td></tr><tr><td>모바일 캔버스</td><td>스마트폰 화면 기준으로 콘텐츠 흐름과 간격을 확인합니다.</td></tr><tr><td>배율</td><td>캔버스를 에디터 안에서 얼마나 크게 또는 작게 볼지 조정합니다.</td></tr><tr><td>너비</td><td>현재 캔버스가 기준으로 삼는 화면 너비입니다.</td></tr><tr><td>최대 너비</td><td>콘텐츠가 표시될 수 있는 최대 영역 기준을 설정할 때 사용합니다.</td></tr></tbody></table>

### 2. 캔버스 설정 열기

캔버스 설정은 스튜디오 에디터 안에서 열 수 있습니다.

1. 스튜디오 에디터를 엽니다.
2. 캔버스 오른쪽 상단에 위치한 **모니터**(PC) 또는 **스마트폰**(모바일) 아이콘을 눌러, 어떤 뷰포트의 캔버스 설정을 변경할지 결정합니다.
3. 뷰포트를 선택했다면 현재 캔버스의 **화면 너비와 배율이 표시된 영역**을 찾습니다.

   <div align="left"><figure><img src="/files/PBA2fyIC6QOdvzu98g1l" alt=""><figcaption></figcaption></figure></div>
4. 해당 영역을 클릭합니다.
5. 캔버스 설정 메뉴가 나오며, 현재 캔버스의 너비와 배율을 조정할 수 있습니다.

   <div align="left"><figure><img src="/files/oe1ksObyVgoO2S79UymA" alt=""><figcaption></figcaption></figure></div>

### 4. 캔버스 설정하기

#### 데스크톱 캔버스 설정하기

* 데스크톱 캔버스는 PC 화면을 기준으로 사이트를 편집할 때 사용합니다. 넓은 화면에서 섹션, 레이아웃, 블록이 어떻게 배치되는지 확인할 수 있습니다.
* 데스크톱 캔버스는 최대 너비를 너무 좁게 설정하면 PC 화면에서의 여백과 배치감을 확인하기 어렵고, 너무 넓게 설정하면 일반적인 사용자 화면과 다르게 보일 수 있습니다. 사이트 성격에 맞는 기준 너비를 정한 뒤 작업하세요.

#### 모바일 캔버스 설정하기

* 모바일 캔버스는 스마트폰 화면을 기준으로 사이트를 확인할 때 사용합니다. 모바일에서는 화면 너비가 좁기 때문에 데스크톱에서 나란히 배치한 콘텐츠가 세로로 쌓이거나, 일부 요소의 간격을 다시 조정해야 할 수 있습니다.
* 예를 들어, 375px 기준으로 확인하면 일반적인 스마트폰 화면에서 페이지가 어떻게 보이는지 점검할 수 있습니다. 텍스트가 너무 길게 줄바꿈되지 않는지, 버튼이 누르기 어려울 만큼 작지 않은지, 이미지가 잘리지 않는지 확인합니다.

#### 배율 조정하기

* 배율은 캔버스를 에디터 안에서 얼마나 크게 또는 작게 볼지 조정하는 설정입니다. 배율을 낮추면 더 넓은 화면을 한 번에 볼 수 있고, 배율을 높이면 세부 요소를 더 크게 보면서 편집할 수 있습니다.
* 배율은 실제 사이트의 크기를 바꾸는 설정이 아닙니다. 에디터 안에서 캔버스를 보는 크기만 조정합니다. 실제 화면 너비를 바꾸려면 캔버스 너비를 조정해야 합니다.

#### 최대 너비 확인하기

* 최대 너비는 콘텐츠가 지나치게 넓게 퍼지지 않도록 기준을 잡을 때 사용하는 설정입니다. 화면이 넓어져도 콘텐츠가 일정한 너비 안에서 정리되면, 텍스트와 이미지의 균형을 더 안정적으로 유지할 수 있습니다.
* 특히 회사소개, 블로그, 긴 설명이 많은 페이지에서는 콘텐츠가 너무 넓게 퍼지면 읽기 어려울 수 있습니다. 이 경우 최대 너비를 기준으로 본문 영역을 정리하면 더 안정적인 화면을 만들 수 있습니다.