UI 구조 모델
UI를 스타일의 집합이 아닌, 명확한 역할과 관계를 가진 구조로 정의합니다.
UI 구조 모델은 모든 규칙이 적용되는 기본 설계 기준입니다.
UI 구조 모델의 목적
Section titled “UI 구조 모델의 목적”UI 구조 모델은 다음과 같은 목적을 가집니다.
- UI를 구성하는 단위를 명확히 정의합니다.
- 각 단위의 역할과 책임 범위를 구분합니다.
- 구조를 기준으로 CSS와 JavaScript를 설계할 수 있도록 합니다.
- 재사용 가능하고 확장 가능한 UI 설계를 가능하게 합니다.
이 모델은 이후 네이밍 규칙과 CSS 작성 방식의 기준이 됩니다.
기본 구성 단위
Section titled “기본 구성 단위”UI 구조는 크게 다음 세 가지 단위로 구성됩니다.
블록 (Block)
Section titled “블록 (Block)”블록은 UI를 구성하는 독립적인 구조 단위입니다.
레이아웃, 컴포넌트, 페이지 등 UI의 기준이 되는 가장 상위 단위로 사용됩니다.
- 단독으로 의미를 가집니다.
- 다른 블록에 의존하지 않습니다.
- 하나의 책임을 가집니다.
블록은 SLUR UI System 구조의 시작점입니다.
내부 요소 (Internal Element)
Section titled “내부 요소 (Internal Element)”내부 요소는 블록 내부에 종속된 구성 요소입니다.
블록 없이는 의미를 가지지 않으며, 항상 특정 블록의 내부에서만 사용됩니다.
- 블록의 하위 구성 요소입니다.
- 단독으로 사용하지 않습니다.
- 블록의 구조를 세분화하는 역할을 합니다.
수정자 (Modifier)
Section titled “수정자 (Modifier)”수정자는 블록이나 내부 요소의 상태 또는 변형을 표현합니다.
구조를 변경하지 않고, 기존 구조의 조건을 표현하는 용도로 사용됩니다.
- 상태, 크기, 변형 등을 표현합니다.
- 단독으로 사용하지 않습니다.
- 항상 블록 또는 내부 요소와 병렬 결합(이중 클래스)하여 사용됩니다.
구조 계층의 기준
Section titled “구조 계층의 기준”UI 구조를 다음과 같은 계층 기준으로 설계합니다.
- 블록 → 내부 요소
- 구조는 위에서 아래로 단방향으로 흐릅니다.
- 구조적 의존성은 명확하게 드러나야 합니다.
이 계층을 벗어나는 구조는 유지보수성과 가독성을 저하시킨다고 판단합니다.
UI 구조 모델의 특징
Section titled “UI 구조 모델의 특징”UI 구조 모델은 다음과 같은 특징을 가집니다.
- 구조만 보아도 UI의 역할을 이해할 수 있습니다.
- 구조가 명확해질수록 재사용성이 높아집니다.
- 프로젝트 규모가 커져도 구조가 쉽게 무너지지 않습니다.
이 모델은 이후 모든 SLUR UI System 규칙의 판단 기준으로 사용됩니다.