페이지 구조 패턴
SLUR UI System에서 페이지(Page)는
하나의 화면 단위를 구성하는 콘텐츠 중심 구조입니다.
페이지 구조 패턴은 화면을 나누는 기술이 아니라,
페이지가 가져야 할 책임 범위를 정의하기 위한 기준입니다.
페이지의 역할
Section titled “페이지의 역할”페이지는 다음 역할을 담당합니다.
- 화면 단위 콘텐츠의 구조 정의
- 페이지 전용 UI 흐름 관리
- 컴포넌트 배치와 조합
페이지는
전역 구조를 담당하지 않으며,
컴포넌트의 내부 구현에도 관여하지 않습니다.
페이지 구조의 기본 원칙
Section titled “페이지 구조의 기본 원칙”페이지 구조는 다음 원칙을 따릅니다.
- 페이지는 레이아웃의 내부 요소가 아닙니다.
- 페이지는 컴포넌트를 조합하는 역할만 수행합니다.
- 페이지 전용 구조는 페이지 내부에서만 사용합니다.
- 페이지 구조는 재사용을 전제로 하지 않습니다.
페이지는
특정 화면에 한정된 구조 단위입니다.
페이지와 컴포넌트의 관계
Section titled “페이지와 컴포넌트의 관계”페이지와 컴포넌트는
명확히 다른 책임을 가집니다.
- 페이지는 흐름과 배치를 담당합니다.
- 컴포넌트는 기능과 구조를 담당합니다.
- 페이지 내부에 컴포넌트는 배치될 수 있습니다.
- 컴포넌트 내부에 페이지는 존재할 수 없습니다.
이 관계가 깨지면
구조는 빠르게 복잡해집니다.
페이지 전용 구조 분리
Section titled “페이지 전용 구조 분리”페이지에서만 사용되는 구조는
페이지 전용 요소로 분리합니다.
- 페이지 전용 섹션
- 페이지 전용 그룹
- 페이지 전용 컨테이너
이러한 구조는
컴포넌트로 승격하지 않습니다.
페이지 구조 설계 기준
Section titled “페이지 구조 설계 기준”페이지 구조를 설계할 때는 다음을 점검합니다.
- 이 구조가 특정 페이지에만 필요한가
- 컴포넌트로 분리할 필요는 없는가
- 페이지 책임을 넘어서는 역할은 없는가
- 구조 변경이 다른 페이지에 영향을 주지 않는가
페이지 구조는
단순할수록 유지보수가 쉬워집니다.
페이지 구조 패턴의 목적
Section titled “페이지 구조 패턴의 목적”페이지 구조 패턴은
화면 단위 UI를 명확하게 구분하고,
컴포넌트 재사용성을 보호하기 위한 기준입니다.
페이지와 컴포넌트의 경계가 명확할수록
UI 구조는 더 안정적으로 유지됩니다.