CSS Variable 기반의 4px Base Unit 설계를 통한 전역 UI 밀도 제어 시스템

Flexible density for all the UI

Dimon2026년 6월 25일3분intermediate

AI 요약

Context

픽셀 단위의 고정 간격 정의로 인한 UI 유연성 부족 및 브랜드별 테마 차별화의 어려움 발생. 단순한 스타일 변경을 넘어 레이아웃 붕괴 없이 전체 인터페이스의 밀도를 동적으로 조정해야 하는 요구사항 존재.

4px Base Unit(--unit: 0.25rem)과 단일 --density 변수를 곱한 calc() 기반의 Semantic Variable 체계 구축
User Override → Brand Default → System Default(1.0) 순의 CSS Cascade 구조를 통해 계층적 밀도 제어 구현
사용자 정의 범위를 ±20%(0.8~1.2)의 5단계 Discrete Stop으로 제한하여 레이아웃 왜곡 방지 및 의사결정 비용 감소
브랜드 차별화를 위해 0.7~1.35의 확장된 밀도 범위를 적용하여 Editorial-style과 Terminal-style의 시각적 분리 달성
max() 함수를 이용한 Control Height Floor 설계를 통해 간격은 자유롭게 축소하되 인터랙션 요소의 최소 클릭 영역 확보
Pointer-type 미디어 쿼리를 통한 Touch(44px)와 Desktop(36px) 환경별 최적화된 하한선(Floor) 분리 적용

실천 포인트

1. 하드코딩된 픽셀 값 대신 Base Unit × Density 변수 기반의 Semantic Token 체계 도입 검토

2. UI 밀도 조정 시 `max()` 함수를 사용하여 Accessibility 기준(최소 터치 영역)을 강제하는 Floor 값 설정

3. 무한한 자유도 대신 Discrete Steps(예: 5단계 프리셋)를 제공하여 사용자 경험의 일관성과 결정 속도 개선

4. 디바이스의 입력 방식(Pointer type)에 따라 서로 다른 하한선 변수를 할당하는 적응형 설계 적용

태그