现代化 UI 架构：三层颜色体系与系统化设计方案

3계층 색상 아키텍처를 통한 UI 색상 정의의 완전한 Decoupling 및 유지보수 최적화

goodlords2026년 5월 19일6분intermediate

AI 요약

Context

색상 정의와 비즈니스 시맨틱 및 테마 로직의 과도한 Coupling으로 인한 유지보수 비용 증가 발생. 동일 색상의 중복 정의와 페이지 단위의 색상 바인딩으로 인해 Dark Mode 대응 시 리소스 복제 및 수정 누락 등의 비효율성 초래.

Technical Solution

Base Color Layer: 원시 색상 값만을 정의하여 브랜드 업데이트 시에만 수정하는 최하위 불변 계층 설계
Theme Adaptation Layer (t_): Base Color를 참조하는 매핑 계층을 구축하여 시스템 리소스 한정자를 통한 Day/Night 모드 자동 스위칭 구현
Functional Color Layer (func_): '색상계 x 직능 x 단계' 조합의 토큰 시스템을 도입하여 비즈니스 로직과 무관한 UI 역할 중심의 추상화 계층 구성
Strict One-way Dependency: func_ → t_ → Base Color 순의 엄격한 단방향 의존성을 강제하여 순환 참조 방지 및 수정 전파 범위 최소화
Semantic Abstraction: 'bg_login' 같은 페이지 기반 명명법을 배제하고 'func_black_bg_1' 형태의 직능 기반 명명법으로 재설계하여 컴포넌트 재사용성 극대화

실천 포인트

- 색상 정의 시 페이지 이름이나 비즈니스 용어를 포함하고 있는지 확인하여 제거 - Day/Night 모드 구현 시 코드 내 분기문 대신 리소스 매핑 계층(Theme Layer)을 통한 자동화 적용 - 새로운 색상 필요 시 임의의 값을 추가하지 않고 '색상계_직능_단계' 규칙에 따른 토큰 확장 검토 - 디자인 팀과 협의하여 Functional Color의 정의권과 관리 주체를 명확히 설정

태그

#Dark Mode #Design System #UI Architecture #Theme Token #Decoupling

원문 읽기