# HTML 위젯 배치 핵심 원칙

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

***

### 기본 구조

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

***

### 위젯 배치 원칙

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

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

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

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

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

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

**3. 페이지 하단**

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

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

***

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

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


---

# 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://devcenter-help.nhn-commerce.com/design_editor/part3_guide/principle.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.