03. 페이지 구성 이해하기

🪜 페이지 구조 한눈에 보기

고도몰 디자인 에디터의 모든 화면은 폴더 → 페이지 → 섹션 → 위젯으로 구성돼요. 각 단계가 어떤 역할을 하는지 먼저 이해하면 이후 작업이 훨씬 수월해진답니다! 😊

단위	역할
폴더	페이지로 구성된 영역. 용도가 비슷한 페이지들을 묶어 관리
페이지	섹션으로 구성된 영역. 쇼핑몰의 실제 화면 단위
섹션	위젯으로 구성된 영역. 페이지 본문을 구성하는 레이아웃 기본 단위
위젯	관리자가 추가할 수 있는 최소 단위

📍 페이지 영역 살펴보기

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

영역	노출 범위	설명
팝업	메인 페이지 전용	메인 페이지가 선택되었을 때만 노출 및 관리 가능
헤더	모든 페이지 공통	상단 고정 영역 메뉴, 로고, 검색·로그인·장바구니 등이 위치
본문	현재 페이지 전용	관리자가 자유롭게 섹션·위젯을 추가/삭제할 수 있는 메인 콘텐츠 영역
푸터	모든 페이지 공통	하단 고정 영역 로고, 이용 약관, 법적 필수 정보 등이 위치

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

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

왼쪽 사이드바 - 작업도구의 [섹션] 아이콘을 클릭하면 상세 패널에 페이지 트리가 나타나요. 자주 만나게 되는 주요 화면 요소들을 정리했으니, 각 요소가 어떤 의미인지 알아 두면 작업이 한결 수월해져요!

화면 요소	의미
페이지명	작업 중인 페이지 확인 페이지 복사·설정 아이콘 노출
섹션명	섹션 이름 표시 호버·활성화·숨김 상태가 시각적으로 구분됨
위젯명	위젯 이름 표시 섹션과 동일하게 상태별 시각 구분 적용
[섹션 추가], [위젯 추가] 버튼	(마우스 호버 시) 섹션 또는 위젯 추가 위치에 노출됨 클릭 시 추가 모달 열림

🔢 뎁스(Depth) 규칙

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

뎁스	허용 요소	비고
1뎁스	섹션	항상 섹션으로만 구성됨
2~7뎁스	위젯 또는 그룹	그룹은 하위 위젯을 가져야 하므로 8뎁스에는 배치 불가
8뎁스	위젯	더 이상 하위 요소 추가 불가

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

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

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

방향	동작
상세 패널 ➡️ 캔버스	사이드바에서 항목 클릭 시 캔버스가 해당 요소 위치로 자동 스크롤되며 활성화됨
캔버스 ➡️ 상세 패널	캔버스에서 위젯 직접 클릭 시 사이드바 트리가 해당 위젯이 속한 뎁스까지 자동으로 펼쳐지며 활성화됨
숨김 처리된 항목	사이드바에서 클릭해도 캔버스에서는 보이지 않으므로 캔버스에 별도 반응이 없음

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

💡 자주 묻는 질문

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

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

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

팝업 섹션은 메인 페이지에서만 노출 및 설정이 가능해요!

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

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

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

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