# 기능 단위 조립 방식

이 페이지에서는 **HTML 위젯 모듈화 방식의 개념과 기존 하드코딩 방식과의 차이**를 설명합니다. 새로운 작업 패러다임을 이해하고 실무에 적용해 보세요.

***

### 작업 방식의 차이

전체를 하드코딩하는 대신, 필요한 기능만 HTML 위젯으로 개발하여 페이지에 조립합니다.

| 기존 하드코딩 방식          | HTML 위젯 모듈화 방식         |
| ------------------- | ---------------------- |
| 전체 페이지 파일을 처음부터 제작  | 필요한 기능 위젯만 선택적으로 개발    |
| 공통 UI(헤더·푸터)도 직접 구현 | 공통 UI는 시스템에 위임, 본문에 집중 |
| 수정 시 전체 코드 파악 필요    | 해당 위젯만 수정              |
| 납품 후 운영자 편집 불가      | 운영자가 위젯 표시/숨김·순서 직접 제어 |

***

### 조립 구조 이해하기

모든 필수 페이지 작업의 기본 구조는 동일합니다.

1.  **페이지 상단**\
   브랜드 배너, 안내 문구 등 → HTML 위젯 배치
2. **시스템 필수 섹션**\
   상품 목록, 장바구니 등 시스템이 제공하는 영역 → 현재 삭제·숨김 불가
3. **페이지 하단**\
   관련 상품 추천, 프로모션 안내 등 → HTML 위젯 배치

***

### 위젯 개발 원칙

* 각 위젯이 **독립적으로 동작**하도록 설계합니다.
* PC·모바일 **반응형 레이아웃**을 적용합니다.
* 헤더·푸터·공지 배너 등 공통 영역은 시스템이 관리하므로 **본문 커스텀에만 집중**합니다.


---

# 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/part2_widget/assembly.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.