레이아웃 패턴
SLUR UI System에서 레이아웃(Layout)은
페이지와 컴포넌트를 감싸는 전역 구조의 틀입니다.
레이아웃 패턴은 UI를 배치하기 위한 기술이 아니라,
구조 책임을 명확히 나누기 위한 설계 기준입니다.
레이아웃 패턴의 역할
Section titled “레이아웃 패턴의 역할”레이아웃은 다음 역할만을 담당합니다.
- 전역 영역의 구조 정의
- 콘텐츠가 배치될 영역 제공
- 공통 UI 영역의 기준점 역할
레이아웃은
콘텐츠를 설명하지 않고,
콘텐츠가 놓일 자리만 정의합니다.
레이아웃 패턴의 기본 원칙
Section titled “레이아웃 패턴의 기본 원칙”SLUR UI System의 레이아웃 패턴은 다음 원칙을 따릅니다.
- 레이아웃은 페이지나 컴포넌트의 내용을 알지 못합니다.
- 레이아웃은 구조만 제공하고, 의미를 가지지 않습니다.
- 레이아웃 내부 요소는 레이아웃 전용 요소로 제한합니다.
- 레이아웃은 재사용 가능한 구조 단위입니다.
레이아웃은
UI의 뼈대 역할만 수행해야 합니다.
레이아웃과 페이지의 관계
Section titled “레이아웃과 페이지의 관계”레이아웃과 페이지는
포함 관계가 아닌 조합 관계입니다.
- 레이아웃 안에 페이지가 배치될 수 있습니다.
- 페이지는 레이아웃의 내부 요소가 아닙니다.
- 레이아웃은 페이지의 구조를 간섭하지 않습니다.
이 분리가 유지될수록
UI 구조는 안정적으로 유지됩니다.
레이아웃과 컴포넌트의 관계
Section titled “레이아웃과 컴포넌트의 관계”컴포넌트는
레이아웃 안에 배치될 수 있지만,
레이아웃의 일부로 동작하지는 않습니다.
- 레이아웃은 컴포넌트를 제어하지 않습니다.
- 컴포넌트는 레이아웃에 의존하지 않습니다.
- 배치만 공유할 뿐, 책임은 공유하지 않습니다.
레이아웃은
컴포넌트를 담는 그릇일 뿐입니다.
레이아웃 패턴 설계 기준
Section titled “레이아웃 패턴 설계 기준”레이아웃을 설계할 때는 다음을 기준으로 판단합니다.
- 이 구조가 여러 페이지에서 재사용되는가
- 콘텐츠 의미가 포함되어 있지 않은가
- 페이지나 컴포넌트로 분리하는 것이 더 적절하지 않은가
- 구조 변경이 전체 UI에 미치는 영향이 명확한가
레이아웃이 복잡해질수록
구조 설계를 다시 점검해야 합니다.
레이아웃 패턴의 목적
Section titled “레이아웃 패턴의 목적”레이아웃 패턴은
전역 UI 구조를 안정적으로 유지하고,
페이지와 컴포넌트 설계를 단순화하기 위한 기준입니다.
레이아웃이 명확할수록
UI 전체 구조는 더 예측 가능해집니다.