상태 기반 UI
SLUR UI System에서는
UI를 이벤트나 스타일 변화의 집합이 아닌,
명확하게 정의된 상태(State)의 집합으로 설계합니다.
상태 기반 UI는 UI 동작을 예측 가능하게 만들기 위한 핵심 원칙입니다.
상태 기반 UI의 개념
Section titled “상태 기반 UI의 개념”상태 기반 UI는
UI의 현재 모습을 개별 동작이 아닌 상태 값으로 표현하는 방식입니다.
- UI는 항상 하나 이상의 상태를 가집니다.
- 상태가 바뀌면 UI 표현이 바뀝니다.
- 상태가 정의되지 않은 동작은 허용하지 않습니다.
SLUR UI System에서는
상태를 기준으로 UI를 이해하고 설계합니다.
상태 표현 기준
Section titled “상태 표현 기준”UI 상태는 다음 기준에 따라 표현합니다.
- 상태는 명확한 이름을 가집니다.
- 상태는 데이터 속성으로 표현합니다.
- 상태는 Boolean 또는 명시적인 값으로 정의합니다.
상태는
암묵적인 클래스 조합이 아니라,
의도적으로 선언된 값이어야 합니다.
상태와 CSS의 관계
Section titled “상태와 CSS의 관계”SLUR UI System에서는
상태와 스타일의 책임을 명확히 분리합니다.
- 상태는 데이터 속성으로 전달됩니다.
- CSS는 상태 값을 해석해 스타일을 적용합니다.
- CSS는 상태를 판단하거나 변경하지 않습니다.
CSS는
상태의 결과를 표현하는 역할만 담당합니다.
상태와 JavaScript의 관계
Section titled “상태와 JavaScript의 관계”JavaScript는
UI 상태를 변경하고 관리하는 역할만 담당합니다.
- 이벤트에 따라 상태를 변경합니다.
- 상태 전이에 대한 로직을 관리합니다.
- 스타일을 직접 제어하지 않습니다.
JavaScript는
UI를 “어떻게 보이게 할지”가 아니라
“어떤 상태로 바꿀지”만 결정합니다.
상태 설계 시 판단 기준
Section titled “상태 설계 시 판단 기준”상태를 설계할 때는 다음을 기준으로 판단합니다.
- 이 동작이 새로운 상태로 분리될 필요가 있는가
- 상태 이름만으로 의미가 전달되는가
- 구조 변경 없이 상태로 표현 가능한가
- 다른 상태와 충돌하지 않는가
상태가 복잡해질수록
구조와 역할 분리를 다시 점검해야 합니다.
상태 기반 UI의 목적
Section titled “상태 기반 UI의 목적”상태 기반 UI는
UI 동작을 단순화하고,
CSS와 JavaScript의 책임을 명확히 분리하기 위한 기준입니다.
상태가 명확할수록
UI는 더 안정적이고 예측 가능하게 동작합니다.