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

# 섹션 추가하고 관리하기

### 개요

섹션은 페이지를 구성하는 가장 큰 콘텐츠 단위입니다. 하나의 페이지는 여러 개의 섹션으로 나뉘며, 각 섹션 안에 레이아웃과 블록을 넣어 화면을 구성합니다.

예를 들어 랜딩페이지를 만든다면 첫 화면, 서비스 소개, 장점, 후기, 문의 영역을 각각 하나의 섹션으로 나눌 수 있습니다. 이렇게 섹션을 나누면 페이지의 흐름을 정리하기 쉽고, 각 영역의 디자인을 따로 조정할 수 있습니다.

### 1. 섹션이란?

섹션은 페이지 안에서 콘텐츠 영역을 구분하는 단위입니다. 방문자가 페이지를 위에서 아래로 내려볼 때, 하나의 주제나 목적을 가진 화면 영역을 섹션으로 나누어 구성합니다.

예를 들어 회사소개 페이지는 다음과 같이 섹션을 나눌 수 있습니다.

```
회사소개 페이지
├ 첫 화면 섹션
├ 회사 소개 섹션
├ 사업 영역 섹션
├ 포트폴리오 섹션
└ 문의 섹션
```

섹션을 사용하면 페이지의 구조를 더 명확하게 만들 수 있습니다. 각 섹션마다 배경, 여백, 레이아웃, 블록을 다르게 설정할 수 있으므로, 페이지의 흐름과 강조점을 조정하기 좋습니다.

### 2. 섹션, 레이아웃, 블록의 차이 이해하기

스튜디오 에디터에서는 페이지를 섹션, 레이아웃, 블록 단위로 구성합니다. 섹션은 페이지의 큰 영역이고, 레이아웃은 섹션 안에서 콘텐츠를 배치하는 구조입니다. 블록은 텍스트, 이미지, 버튼, 폼처럼 실제로 화면에 표시되는 요소입니다.

```
페이지
└ 섹션
  └ 레이아웃
    └ 블록
```

<table><thead><tr><th width="150.45361328125">구분</th><th>설명</th></tr></thead><tbody><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>

섹션을 먼저 만들고, 그 안에 레이아웃과 블록을 추가하면 페이지를 안정적으로 구성할 수 있습니다.

### 3. 섹션 유형

스튜디오 에디터에서 섹션은 총 5가지 유형으로 분류됩니다.

페이지에 자유 지정 섹션을 추가하여 자유롭게 블록을 추가해 디자인하거나, 스택 섹션을 추가하여 정교하게 꾸밀 수도 있습니다. 슬라이더와 탭 섹션을 추가해 여러 콘텐츠를 넘겨가며 볼 수 있게 꾸미거나, AI를 통해 섹션 단위로 초안을 요청할 수도 있습니다.

{% hint style="info" %}
**도움말**: AI 섹션을 사용하면 보유하신 크레딧이 소모됩니다.
{% endhint %}

<table><thead><tr><th width="149.64752197265625">섹션 유형</th><th>설명</th></tr></thead><tbody><tr><td>자유 지정 섹션</td><td>섹션을 추가한 뒤 자유롭게 레이아웃과 블록을 구성합니다. 자유 지정 섹션은 구조를 직접 설계해야 하므로 처음에는 시간이 더 걸릴 수 있습니다. 대신 페이지 목적에 맞게 가장 자유롭게 화면을 구성할 수 있습니다.</td></tr><tr><td>스택 섹션</td><td>콘텐츠를 일정한 방향으로 정렬할 수 있는 구조가 포함된 섹션입니다. 스택 섹션은 콘텐츠의 정렬과 간격을 관리하기 좋습니다. 제목, 설명, 버튼처럼 순서가 있는 콘텐츠를 만들 때 사용합니다.</td></tr><tr><td>AI 섹션</td><td>입력한 내용에 맞춰 AI가 섹션 초안을 생성합니다. AI 섹션은 초안을 빠르게 만들 때 사용할 수 있습니다. 생성된 결과는 그대로 사용하기보다 사이트 목적과 브랜드 톤에 맞게 수정합니다.</td></tr><tr><td>슬라이더 섹션</td><td>여러 콘텐츠를 슬라이드 형태로 보여줄 때 사용합니다. 배너, 주요 소식, 포트폴리오 이미지처럼 여러 항목을 넘겨 보여줘야 할 때 적합합니다.</td></tr><tr><td>탭 섹션</td><td>여러 내용을 탭으로 나누어 보여줄 때 사용합니다.</td></tr></tbody></table>

### 4. 섹션 추가하기

페이지에 새로운 섹션을 추가하려면 아래의 절차에 따라 추가해 보세요.

1. 편집할 페이지를 엽니다.
2. 상단 툴바 왼쪽 영역에서 **디자인**을 클릭합니다.
3. 왼쪽에서 사이드바가 열리면 **섹션**을 클릭합니다.
4. 추가할 **섹션 유형**을 클릭합니다.
5. 선택한 섹션이 페이지에 추가됩니다.

섹션을 추가한 뒤에는 캔버스에서 섹션 위치를 확인하고, 필요한 콘텐츠를 배치할 수 있습니다.

### 5. 섹션 선택하고 설정하기

섹션을 추가한 뒤에는 캔버스에서 섹션을 선택해 설정을 변경할 수 있습니다. 섹션을 선택하면 오른쪽 사이드바에서 배경, 여백, 크기, 정렬 같은 설정을 조정할 수 있습니다.

1. 캔버스에서 수정할 섹션을 클릭합니다.
2. 오른쪽 사이드바에서 선택된 항목을 확인합니다.
3. 필요한 설정 항목(배경, 여백, 크기, 정렬 등)을 변경합니다.
4. 캔버스에서 변경 결과를 확인합니다.

섹션 설정은 페이지의 전체 인상에 큰 영향을 줍니다. 특히 배경과 여백은 섹션 간 구분과 화면의 안정감에 영향을 주므로, 미리보기에서 함께 확인합니다.

### 7. 섹션 순서 변경하기

히어로 섹션을 문의 섹션 위로 옮기거나, 서비스 소개 섹션을 첫 화면 아래로 이동하는 등 섹션을 원하는 위치로 이동시킬 수 있습니다.

1. 이동할 섹션을 선택합니다.
2. 섹션 하단부에 **위, 아래 화살표** 아이콘을 클릭하여 원하는 위치로 이동합니다.
3. 섹션 순서가 변경됩니다.

### 8. 섹션 복제하기

같은 구조를 반복해서 사용해야 할 때는 섹션을 복제할 수 있습니다. 예를 들어 서비스 소개 섹션과 기능 소개 섹션의 구조가 비슷하다면, 기존 섹션을 복제한 뒤 내용만 수정할 수 있습니다.

1. 복제할 섹션을 선택합니다.
2. 섹션 하단부에 **섹션 복제** 아이콘을 클릭합니다.
3. 기존 섹션과 같은 구조의 섹션이 복제한 섹션 아래 섹션으로 추가됩니다.

### 9. 섹션 삭제하기

사용하지 않는 섹션은 삭제할 수 있습니다. 섹션을 삭제하면 그 안에 들어 있던 레이아웃과 블록도 함께 삭제될 수 있습니다.

1. 삭제할 섹션을 선택합니다.
2. 섹션 하단부에 **섹션 삭제** 아이콘을 클릭합니다.
3. 선택한 섹션이 페이지에서 삭제됩니다.

### 10. 모바일 화면 확인하기

섹션을 추가하거나 수정한 뒤에는 모바일 화면에서도 확인하는 것이 좋습니다. PC에서는 가로로 자연스럽게 보이는 섹션이 모바일에서는 세로로 쌓이거나 간격이 달라질 수 있습니다.

1. 캔버스 오른쪽 상단에 위치한 모바일 아이콘을 눌러 모바일 뷰포트로 전환합니다.
2. 모바일 화면에서 섹션 순서가 자연스러운지 확인합니다.
   1. 텍스트가 잘리지 않는지 확인합니다.
   2. 이미지가 화면 너비에 맞게 표시되는지 확인합니다.
   3. 버튼을 누르기 쉬운 크기로 보이는지 확인합니다.