> For the complete documentation index, see [llms.txt](https://godomall-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://godomall-help.nhn-commerce.com/design-editor-guide/basics/section.md).

# 06. 섹션 추가하고 편집하기

### ⬜ 섹션이란?

섹션은 페이지 본문을 구성하는 레이아웃의 기본 단위예요. \
슬라이드 배너나 상품 목록처럼 한 묶음의 콘텐츠를 담는 영역으로, 섹션 안에 위젯(또는 그룹)을 배치해 화면을 완성하죠.

페이지에 섹션을 추가하고, 순서를 변경하며, 배경과 글자색을 다듬는 과정은 웹사이트 본문을 꾸미는 핵심 작업이랍니다. 😊

### 🔑 섹션 유형과 권한

섹션은 속한 영역과 생성 주체에 따라 네 가지 유형으로 나뉘며, 각 유형별로 사용할 수 있는 기능이 달라요.

<table><thead><tr><th width="200">섹션</th><th width="100">추가</th><th width="100">복사</th><th width="100">숨기기/보이기</th><th width="100">삭제</th><th width="100">명칭 
변경</th></tr></thead><tbody><tr><td>본문 (사용자 추가)</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><td>본문 (기본 제공)</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td></tr><tr><td>공통 (팝업, 공지 배너)</td><td>❌</td><td>❌</td><td>✅</td><td>❌</td><td>❌</td></tr><tr><td>공통 (헤더, 푸터)</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td></tr></tbody></table>

* 헤더와 푸터는 항상 노출되어야 하는 영역이므로 숨기기를 포함한 모든 편집 기능이 제한돼요.
* 팝업 섹션은 메인 페이지에서만 노출 및 설정할 수 있으며, 다른 페이지의 트리에는 표시되지 않아요.
* 이름 변경은 운영자가 직접 추가한 본문 섹션에서만 가능해요. 공통 섹션과 기본 제공 본문 섹션의 이름은 변경할 수 없는 고정값이에요.

> 💡 **참고** 헤더·푸터·팝업·공지 배너 등 공통 섹션의 세부 설정은 별도의 가이드에서 다룰 예정이에요. 이 페이지에서는 본문 섹션을 추가하고 편집하는 방법을 중심으로 안내해 드릴게요.

### ➕ 섹션 추가하기

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

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

다음 두 가지 경로를 통해 섹션을 추가할 수 있어요.

<table><thead><tr><th width="200">경로</th><th>방법</th></tr></thead><tbody><tr><td><ol><li>왼쪽 사이드바</li></ol></td><td>섹션 트리의 [섹션 추가] 버튼을 클릭해요.</td></tr><tr><td><ol start="2"><li>캔버스</li></ol></td><td><p>섹션의 위·아래 또는 본문 영역에 표시되는 추가 아이콘을 클릭해요.</p><p> 페이지에 섹션이 하나도 없을 때는 캔버스 중앙에 [섹션 추가] 버튼이 나타나요.</p></td></tr></tbody></table>

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

\[섹션 추가] 버튼을 누르면 모달 창이 열려요. 좌측에서 카테고리별로 분류된 섹션을 탐색하거나 키워드로 검색할 수 있고, 섹션명에 마우스를 올리면 우측에서 레이아웃 미리보기를 확인할 수 있어요.

> 💡 **참고** 섹션 추가는 운영자가 직접 구성하는 본문 섹션만 가능해요. 헤더, 푸터, 팝업, 공지 배너 등의 공통 섹션은 임의로 추가할 수 없어요.

#### 추가할 수 있는 섹션

<table><thead><tr><th width="160">구분</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><tr><td>정보</td><td>소개 / 분할텍스트 / 서식이 있는 텍스트 / 동영상</td></tr></tbody></table>

{% hint style="info" %}
💡 본문 섹션은 한 페이지에 최대 **20개**까지 추가할 수 있어요. 한도를 넘겨 추가하거나 붙여넣기를 시도하면, "본문에는 최대 20개의 섹션만 추가할 수 있습니다."라는 안내 메시지가 나타나요.
{% endhint %}

### 📋 섹션 복사하고 붙여넣기

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

운영자가 추가한 본문 섹션은 복사해서 붙여넣을 수 있어요. 단, 공통 섹션은 복사와 붙여넣기가 모두 제한돼요.

* \[복사] 버튼을 클릭하거나 복사 단축키를 사용하면 해당 섹션이 클립보드에 임시 저장돼요.
* 복사된 섹션은 기존 섹션의 모든 설정과 하위 위젯을 그대로 유지하며, 원본과는 분리된 별개의 섹션으로 새롭게 관리돼요.
* 붙여넣는 위치는 다음 기준에 따라 결정돼요.

<table><thead><tr><th width="280">상태</th><th>붙여넣기 위치</th></tr></thead><tbody><tr><td>선택된 섹션이 있는 경우</td><td>해당 섹션 바로 아래에 추가돼요.</td></tr><tr><td>선택된 섹션이 없는 경우</td><td>본문 영역 가장 아래에 추가돼요.</td></tr></tbody></table>

> 💡 **참고** 섹션과 위젯은 하나의 클립보드를 함께 사용해요. 가장 최근에 복사한 항목만 붙여넣을 수 있으며, 이전에 복사한 내용은 새로운 내용으로 덮어씌워져요.

### 👁️ 섹션 숨기기와 보이기

특정 섹션을 화면에서 잠시 감추고 싶을 때 '숨기기' 기능을 활용해 보세요.

숨기기 및 보이기는 사용자가 추가한 본문 섹션과 팝업, 공지 배너에서만 설정할 수 있어요. 기본 제공되는 헤더·푸터는 항상 노출되어야 하므로 숨길 수 없답니다.

* 왼쪽 사이드바의 섹션명 옆에 있는 눈 아이콘이나, 캔버스에서 섹션을 클릭했을 때 나타나는 눈 아이콘을 눌러 상태를 전환(토글)할 수 있어요.
* 숨김 처리된 섹션은 하위 위젯까지 모두 캔버스에서 사라지며, 실제 고객이 보는 화면과 동일한 상태로 표시돼요.
* 사이드바 트리에는 항목이 그대로 남아 있어요. 대신 눈 아이콘에 사선이 그어지고 섹션명이 회색으로 흐려져, 현재 숨김 상태임을 쉽게 확인할 수 있어요.

{% hint style="info" %}
💡 본문의 모든 섹션을 숨기거나 삭제하면, 캔버스에 "이 페이지를 고객에게 보이도록 섹션을 추가하세요"라는 안내가 나타나요. 이 문구를 클릭하면 곧바로 \[섹션 추가] 패널이 열립니다.
{% endhint %}

### ✏️ 섹션 편집하기

섹션의 상세 속성은 오른쪽 사이드바에서 편집할 수 있어요. 편집 영역으로 진입하는 경로는 다음과 같이 두 가지예요.

* 왼쪽 사이드바에서 원하는 섹션 항목 클릭하기
* 캔버스에서 편집할 섹션 영역을 직접 클릭하기

#### 섹션명 변경

운영자가 직접 추가한 본문 섹션은 오른쪽 사이드바 상단의 제목 영역을 클릭해 이름을 바꿀 수 있어요. 단, 공통 섹션과 기본 제공 본문 섹션의 이름은 변경할 수 없어요.

#### 배경과 글자색 설정

오른쪽 사이드바에서는 섹션의 배경(이미지, 동영상, 색상)과 글자색을 설정할 수 있어요.\
섹션의 종류에 따라 지원하는 설정 항목이 다르며, 대표적인 차이는 다음과 같습니다.

<table><thead><tr><th width="200">섹션</th><th>배경 이미지</th><th>배경 동영상</th><th>배경 색상</th><th>글자색</th></tr></thead><tbody><tr><td>빈 섹션</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><td>슬라이드 배너 / 배너</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td></tr><tr><td>이미지+텍스트 / 상품목록 / 콜렉션카드 / 소개 / 분할텍스트 / 서식이 있는 텍스트 / 동영상</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr><tr><td>이미지+상품</td><td>✅</td><td>✅</td><td>✅</td><td>❌</td></tr></tbody></table>

> 💡 **TIP** 배경을 이미지나 동영상으로 설정할 때는 오버레이(어둡게 덮기)와 투명도를 조절해 위에 적힌 글자가 더 잘 보이도록 다듬을 수 있어요. 동영상 배경은 YouTube나 Vimeo 링크를 활용해 넣을 수 있답니다.

또한 섹션마다 정렬, 위치, 너비, 간격 등 다양한 레이아웃 옵션이 함께 제공돼요. 슬라이드 배너 및 배너처럼 이미지가 중심이 되는 섹션은 데스크톱과 모바일 환경에 맞게 높이나 비율을 각각 따로 지정할 수 있어요.&#x20;

참고로 등록하는 이미지는 최대 5MB까지 업로드 가능하며, JPG · JPEG · PNG · GIF · WEBP · BMP · ICO · TIFF · TIF · AVIF 형식을 지원해요.

### 🗑️ 섹션 삭제하기

섹션 삭제는 운영자가 직접 추가한 본문 섹션에 한해서만 가능해요. 공통 섹션과 기본 제공 본문 섹션은 삭제할 수 없습니다.

참고로 메인 페이지의 본문은 모두 사용자가 추가한 섹션으로 구성되어 있어 삭제가 가능하지만, 메인을 제외한 MVP 페이지의 본문 섹션은 기본 제공 섹션이므로 삭제할 수 없어요.

섹션을 삭제하는 방법은 다음과 같아요.

* 캔버스의 섹션 작업 도구에서 \[삭제] 버튼 클릭
* 섹션을 선택한 상태에서 키보드의 Delete 키 누르기
* 왼쪽 사이드바에서 \[삭제] 버튼 누르기
* 오른쪽 사이드바에서 \[삭제] 버튼 누르기

> 💡 **참고** 실행취소·재실행(Undo/Redo) 기능을 지원하므로, 섹션을 삭제할 때 별도의 확인 팝업(얼럿)이 나타나지 않아요. 실수로 삭제했더라도 상단 메뉴의 \[실행취소] 버튼이나 단축키를 사용해 바로 되돌릴 수 있답니다. 단, 페이지를 이동하거나 새로고침하여 작업 히스토리가 초기화된 이후에는 복구할 수 없으니 주의해 주세요.

### 💡 자주 묻는 질문

<details>

<summary>섹션이 더 이상 추가되지 않아요.</summary>

본문 섹션은 한 페이지당 최대 20개까지만 추가할 수 있어요.\
한도에 도달했다면 사용하지 않는 섹션을 삭제한 후 다시 추가해 보세요.

</details>

<details>

<summary>헤더·푸터 섹션이 삭제되지 않아요.</summary>

헤더와 푸터는 모든 페이지에 항상 노출되어야 하는 공통 영역이라 삭제는 물론 숨기기도 불가능해요.\
디자인을 변경하고 싶으시다면 삭제 대신 배경이나 글자색 등의 설정을 수정해 조정해 보세요.

</details>

<details>

<summary>팝업 섹션이 트리에 보이지 않아요.</summary>

팝업 섹션은 메인 페이지에서만 노출 및 설정할 수 있어요.\
다른 페이지의 섹션 트리에는 팝업 영역 자체가 표시되지 않으니, 메인 페이지로 이동한 후 다시 확인해 주세요.

</details>

<details>

<summary>섹션을 실수로 삭제했어요. 되돌릴 수 있나요?</summary>

상단 메뉴의 \[실행취소] 버튼이나 단축키를 사용해 삭제 직전의 상태로 되돌릴 수 있어요.\
단, 페이지를 이동하거나 새로고침하면 작업 히스토리가 초기화되어 복구가 불가능해져요. 되돌리기를 원한다면 반드시 페이지를 벗어나기 전에 실행취소를 해주세요.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://godomall-help.nhn-commerce.com/design-editor-guide/basics/section.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.