# 03. 페이지 구성 이해하기

## 🪜 페이지 구조 한눈에 보기

고도몰 디자인 에디터의 모든 화면은 **폴더 → 페이지 → 섹션 → 위젯**으로 구성돼요. \
각 단계가 어떤 역할을 하는지 먼저 이해하면 이후 작업을 더 쉽게 진행할 수 있어요. 😊

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

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

<table><thead><tr><th width="230">단위</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>섹션으로 구성된 영역. 쇼핑몰의 실제 화면 단위예요.</td></tr><tr><td><ol start="3"><li>섹션</li></ol></td><td>위젯으로 구성된 영역. 페이지 본문을 구성하는 레이아웃 기본 단위예요.</td></tr><tr><td><ol start="4"><li>위젯</li></ol></td><td>관리자가 추가할 수 있는 최소 단위예요.</td></tr></tbody></table>

## 📍 페이지 영역 살펴보기

페이지 안에는 4가지 고정 영역이 있어요. 영역의 성격에 따라 어디에 무엇을 배치해야 하는지 정해져 있어요.

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

<table><thead><tr><th width="150">영역</th><th width="150">노출 범위</th><th>설명</th></tr></thead><tbody><tr><td><ol><li>팝업</li></ol></td><td>메인 페이지 전용</td><td>메인 페이지가 선택되었을 때만 노출 및 관리할 수 있어요.</td></tr><tr><td><ol start="2"><li>헤더</li></ol></td><td>모든 페이지 공통</td><td>상단 고정 영역이에요.<br>메뉴, 로고, 검색·로그인·장바구니 등이 위치해요.</td></tr><tr><td><ol start="3"><li>본문</li></ol></td><td>현재 페이지 전용</td><td>관리자가 자유롭게 섹션·위젯을 추가/삭제할 수 있는 메인 콘텐츠 영역이에요.</td></tr><tr><td><ol start="4"><li>푸터</li></ol></td><td>모든 페이지 공통</td><td>하단 고정 영역이에요.<br>로고, 이용 약관, 법적 필수 정보 등이 위치해요.</td></tr></tbody></table>

> 💡 **참고** 헤더와 푸터는 모든 페이지에 일괄 적용되니 정보가 압축되고 시각적 피로도가 낮은 구성이 권장돼요. 페이지마다 다른 콘텐츠를 보여주려면 본문 영역을 활용하세요.

## 🌳 왼쪽 사이드바 - 작업도구 트리에서 만나는 화면

왼쪽 사이드바 - 작업도구의 \[섹션] 아이콘을 클릭하면 상세 패널에 페이지 트리가 나타나요.

자주 만나게 되는 주요 화면 요소들을 정리했으니, \
각 요소가 어떤 의미인지 미리 알아두면 작업을 더 쉽게 진행할 수 있어요.

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

<table><thead><tr><th width="250">화면 요소</th><th>의미</th></tr></thead><tbody><tr><td><ol><li>페이지명</li></ol></td><td><p>작업 중인 페이지를 확인할 수 있어요.</p><p>페이지 복사·설정 아이콘이 노출돼요.</p></td></tr><tr><td><ol start="2"><li>섹션명</li></ol></td><td><p>섹션 이름이 표시돼요.</p><p>호버·활성화·숨김 상태가 시각적으로 구분돼요.</p></td></tr><tr><td><ol start="3"><li>위젯명</li></ol></td><td><p>위젯 이름이 표시돼요.</p><p>섹션과 동일하게 상태별 시각 구분이 적용돼요.</p></td></tr><tr><td><ol start="4"><li>[섹션 추가], [위젯 추가] 버튼</li></ol></td><td><p>마우스를 올리면 섹션 또는 위젯 추가 위치에 노출돼요.</p><p>클릭하면 추가 모달이 열려요.</p></td></tr></tbody></table>

## 🔢 뎁스(Depth) 규칙

레이아웃 구조는 최대 **8뎁스**까지만 만들 수 있어요. \
8뎁스에 도달하면 그 아래에는 더 이상 위젯을 추가하거나 이동할 수 없어요.

<table><thead><tr><th width="150">뎁스</th><th width="150">허용 요소</th><th>비고</th></tr></thead><tbody><tr><td>1뎁스</td><td>섹션</td><td>항상 섹션으로만 구성돼요.</td></tr><tr><td>2~7뎁스</td><td>위젯 또는 그룹</td><td>그룹은 하위 위젯을 가져야 하므로 8뎁스에는 배치할 수 없어요.</td></tr><tr><td>8뎁스</td><td>위젯</td><td>더 이상 하위 요소 추가할 수 없어요.</td></tr></tbody></table>

> 💡 **TIP** 위젯과 그룹은 같은 역할을 하지만, 그룹은 **여러 위젯을 묶어 함께 관리**하고 싶을 때 사용하는 묶음이에요.

## 🔄 캔버스와의 양방향 동기화

왼쪽 사이드바 - 상세 패널과 캔버스는 실시간으로 포커스 상태를 공유해요.

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

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

<table><thead><tr><th width="230">방향</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>캔버스에서 위젯을 직접 클릭하면 사이드바 트리가 해당 위젯이 속한 뎁스까지 자동으로 펼쳐지며 활성화돼요.</td></tr><tr><td><ol start="3"><li>숨김 처리된 항목</li></ol></td><td>사이드바에서 클릭해도 캔버스에서는 보이지 않으므로 캔버스에 별도 반응이 없어요.</td></tr></tbody></table>

> 💡 **TIP** 캔버스에서 원하는 위젯을 직접 클릭하는 게 가장 빠른 편집 방법이에요. 트리에서 깊은 뎁스를 일일이 펼치지 않아도 자동으로 해당 위치로 이동해요.

## 💡 자주 묻는 질문

<details>

<summary>본문 영역에 있는 위젯을 헤더로 옮기고 싶어요.</summary>

요소의 이동은 자신이 속한 고정 영역(헤더 / 팝업 / 본문 / 푸터) 내부에서만 허용돼요. \
본문에 있는 위젯을 헤더나 푸터로 드래그해 옮기는 것은 불가능합니다.

</details>

<details>

<summary>팝업이 안 보여요. 어디서 설정하나요?</summary>

팝업 섹션은 **메인 페이지에서만** 노출 및 설정할 수 있어요.

다른 페이지의 트리에는 팝업 영역 자체가 표시되지 않으니, 메인 페이지로 이동한 뒤 다시 확인해 주세요.

</details>

<details>

<summary>8뎁스가 한도라고 했는데, 그룹을 8뎁스에 둬도 되나요?</summary>

그룹은 하위 위젯을 가져야 하므로 8뎁스에 배치할 수 없어요.&#x20;

그룹은 2\~7뎁스에서만 사용해 주세요. \
위젯은 8뎁스까지 배치할 수 있지만, 그 아래에는 추가가 제한돼요.

</details>


---

# Agent Instructions: 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:

```
GET https://godomall-help.nhn-commerce.com/design-editor-guide/essentials/page-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.