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

# 기능 단위 조립 방식

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

***

### 작업 방식의 차이

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

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

***

### 조립 구조 이해하기

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

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

***

### 위젯 개발 원칙

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