피드로 돌아가기
Dev.toFrontend
원문 읽기
OKLCH 도입과 시스템적 Palette 설계를 통한 UI 색상 일관성 확보
Why Your UI Colors Look Wrong — And How to Fix Them in 10 Minutes
AI 요약
Context
전통적인 HEX, RGB, HSL 방식의 Color Space 사용으로 인해 인간의 인지 능력과 괴리된 불규칙한 색상 변화 발생. 개별 색상 지정 방식의 워크플로우로 인한 디자인 확장성 결여 및 Dark Mode에서의 단순 반전 처리로 인한 시각적 피로도 증가 문제를 겪음.
Technical Solution
- Perceptually Uniform한 OKLCH Color Space 채택을 통한 예측 가능한 Lightness 제어 및 색상 스케일 구축
- 50부터 900까지 정의된 단계별 Design Token 시스템 도입으로 컴포넌트별 색상 참조 일관성 확보
- WCAG 및 APCA Contrast Checker를 활용한 Foreground/Background 대비 검증 프로세스 정립
- 단순 Inversion 방식에서 탈피하여 Softened Value 기반의 전용 Dark Theme Token 설계
- Lightness, Chroma, Hue를 분리 제어하여 색상 채도 유지와 명도 조절을 독립적으로 수행하는 구조 설계
실천 포인트
1. WCAG 표준 기반의 텍스트 대비 검증 수행
2. OKLCH 포맷을 활용한 일관된 Color Scale 생성
3. 하드코딩된 HEX 값 대신 단계별 Design Token 시스템 적용
4. Dark Mode 설계 시 순수 블랙(#000000) 대신 저채도 다크 그레이 톤 적용