구조 계층: 레이아웃 · 페이지 · 컴포넌트

레이아웃 · 페이지 · 컴포넌트는
UI를 구성하는 세 가지 구조 단위입니다.
각 단위는 서로 다른 책임 범위를 가지며,
이 문서는 각 단위의 고유 역할을 정리합니다.

---

레이아웃: 배치 틀

레이아웃(Layout)은
페이지와 컴포넌트를 감싸는 전역 구조의 틀입니다.

• 전역 영역의 구조를 정의합니다.
• 콘텐츠가 배치될 영역을 제공합니다.
• 공통 UI 영역의 기준점 역할을 합니다.

레이아웃은
콘텐츠를 설명하지 않고,
콘텐츠가 놓일 자리만 정의합니다.

---

페이지: 흐름과 조합

페이지(Page)는
하나의 화면 단위를 구성하는 콘텐츠 중심 구조입니다.

• 화면 단위 콘텐츠의 구조를 정의합니다.
• 페이지 전용 UI 흐름을 관리합니다.
• 컴포넌트를 배치하고 조합합니다.

페이지는
특정 화면에 한정된 구조 단위이며,
재사용을 전제로 하지 않습니다.

---

컴포넌트: 재사용 단위

컴포넌트(Component)는
여러 페이지에서 재사용될 수 있는 독립적인 UI 단위입니다.

• 명확한 하나의 기능 또는 목적을 수행합니다.
• 내부 구조와 상태를 관리합니다.
• 다양한 환경에서 재사용될 수 있습니다.

컴포넌트는
작을수록 재사용성이 높아집니다.

내부 구조는 내부 요소로, 상태 변화는 수정자로 표현하며,
그 표기 기준은 접두사 기준표를 따릅니다.

---

단위 간 관계

세 단위는 포함 관계가 아닌 조합 관계입니다.
레이아웃과 페이지, 페이지와 컴포넌트, 컴포넌트 간의 상호 비종속 관계 원칙은
구조 모델에서 정의합니다.

경계가 명확할수록
UI 구조는 더 안정적으로 유지됩니다.