> For the complete documentation index, see [llms.txt](https://devcenter-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://devcenter-help.nhn-commerce.com/design_editor/part3_guide/principle.md).

# HTML 위젯 배치 핵심 원칙

이 페이지에서는 **모든 필수 페이지 작업에 공통으로 적용되는 HTML 위젯 배치 원칙**을 안내합니다. 페이지별 작업을 시작하기 전에 이 원칙을 먼저 숙지해 보세요.

***

### 기본 구조

모든 필수 페이지 작업의 출발점은 동일합니다. 시스템이 제공하는 필수 섹션을 유지한 채, 그 위아래로 HTML 위젯을 조립하는 방식입니다.

***

### 위젯 배치 원칙

**1. 페이지 최상단**

브랜드 배너, 안내 문구 등 브랜드 요소를 HTML 위젯으로 배치합니다.

* 카테고리 소개 배너
* 시즌 프로모션 안내
* 브랜드 아이덴티티 비주얼

**2. 시스템 필수 섹션**

상품 목록, 상품 상세 정보, 장바구니 등 시스템이 제공하는 핵심 영역입니다.

> 현재 삭제·숨김이 불가합니다. 섹션 삭제 및 HTML 편집 기능은 추가될 예정입니다.

**3. 페이지 하단**

관련 상품 추천, 프로모션 안내 등 전환을 유도하는 콘텐츠를 HTML 위젯으로 배치합니다.

* 관련 상품 추천 영역
* 브랜드 스토리 띠 배너
* 프로모션 안내

***

### 위젯 설계 시 고려할 것

* 각 위젯이 **독립적으로 동작**하도록 설계합니다.
* **PC·모바일 반응형** 레이아웃을 반드시 적용합니다.
* 시스템 필수 섹션과 HTML 위젯 간 **레이아웃 충돌**이 없는지 확인합니다.
* 운영자가 이후 **표시/숨김·순서 변경**을 직접 할 수 있도록 위젯 단위를 적절히 분리합니다.