UI 구조 모델

UI를 스타일의 집합이 아닌, 명확한 역할과 관계를 가진 구조로 정의합니다. UI 구조 모델은 모든 규칙이 적용되는 기본 설계 기준입니다.

UI 구조 모델의 목적

UI 구조 모델은 다음과 같은 목적을 가집니다.

UI를 구성하는 단위를 명확히 정의합니다.
각 단위의 역할과 책임 범위를 구분합니다.
구조를 기준으로 CSS와 JavaScript를 설계할 수 있도록 합니다.
재사용 가능하고 확장 가능한 UI 설계를 가능하게 합니다.

이 모델은 이후 네이밍 규칙과 CSS 작성 방식의 기준이 됩니다.

기본 구성 단위

UI 구조는 크게 다음 세 가지 단위로 구성됩니다.

블록 (Block)

블록은 UI를 구성하는 독립적인 구조 단위입니다. 레이아웃, 컴포넌트, 페이지 등 UI의 기준이 되는 가장 상위 단위로 사용됩니다.

단독으로 의미를 가집니다.
다른 블록에 의존하지 않습니다.
하나의 책임을 가집니다.

블록은 UI 구조의 시작점입니다.

내부 요소 (Internal Element)

내부 요소는 블록 내부에 종속된 구성 요소입니다. 블록 없이는 의미를 가지지 않으며, 항상 특정 블록의 내부에서만 사용됩니다.

블록의 하위 구성 요소입니다.
단독으로 사용하지 않습니다.
블록의 구조를 세분화하는 역할을 합니다.

수정자 (Modifier)

수정자는 블록이나 내부 요소의 상태 또는 변형을 표현합니다. 구조를 변경하지 않고, 기존 구조의 조건을 표현하는 용도로 사용됩니다.

상태, 크기, 변형 등을 표현합니다.
단독으로 사용하지 않습니다.
항상 블록 또는 내부 요소와 병렬 결합(이중 클래스)하여 사용됩니다.

구조 계층의 기준

UI 구조를 다음과 같은 계층 기준으로 설계합니다.

블록 → 내부 요소
구조는 위에서 아래로 단방향으로 흐릅니다.
구조적 의존성은 명확하게 드러나야 합니다.

이 계층을 벗어나는 구조는 유지보수성과 가독성을 저하시킨다고 판단합니다.

최상위 단위의 역할: 레이아웃 · 페이지 · 컴포넌트

블록으로 쓰이는 최상위 단위는 각각 고유한 책임 범위를 가집니다.

레이아웃(Layout) — 배치 틀. 페이지와 컴포넌트를 감싸는 전역 구조의 틀입니다. 전역 영역의 구조를 정의하고, 콘텐츠가 배치될 영역을 제공하며, 공통 UI 영역의 기준점 역할을 합니다. 콘텐츠를 설명하지 않고 콘텐츠가 놓일 자리만 정의합니다.

페이지(Page) — 흐름과 조합. 하나의 화면 단위를 구성하는 콘텐츠 중심 구조입니다. 화면 단위 콘텐츠의 구조를 정의하고, 페이지 전용 UI 흐름을 관리하며, 컴포넌트를 배치하고 조합합니다. 특정 화면에 한정된 구조 단위이며 재사용을 전제로 하지 않습니다.

컴포넌트(Component) — 재사용 단위. 여러 페이지에서 재사용될 수 있는 독립적인 UI 단위입니다. 명확한 하나의 기능 또는 목적을 수행하고, 내부 구조와 상태를 관리합니다. 컴포넌트는 작을수록 재사용성이 높아집니다. 내부 구조는 내부 요소로, 상태 변화는 수정자로 표현하며, 그 표기 기준은 접두사 기준표를 따릅니다.

수평 독립성 (조합 관계)

수직 계층이 블록 내부의 종속 관계를 다룬다면, 서로 다른 최상위 단위 사이의 관계는 수평 독립성으로 설계합니다.

레이아웃, 페이지, 컴포넌트, 팝업은 서로의 내부 요소가 아닙니다.

서로를 내부 요소로 포함하지 않습니다.
서로의 구조나 상태를 제어하지 않습니다.
각자 독립적인 책임을 가진 채로 나란히 놓입니다.

이 관계는 포함이 아니라 조합입니다. 한 단위가 다른 단위 안에 종속되는 것이 아니라, 독립적인 단위들이 조합되어 화면을 구성합니다.

UI 구조 모델의 특징

UI 구조 모델은 다음과 같은 특징을 가집니다.

구조만 보아도 UI의 역할을 이해할 수 있습니다.
구조가 명확해질수록 재사용성이 높아집니다.
프로젝트 규모가 커져도 구조가 쉽게 무너지지 않습니다.

이 모델은 이후 모든 규칙의 판단 기준으로 사용됩니다.