왜 우리는 RGB와 HSL에서 OKLCH로 전환했을까요? (번역)

• OKLCH 색상 공간은 기존의 RGB나 HSL과 달리 사람의 인식에 기반하여 더 정밀하고 예측 가능
• 디자인 시스템과 접근성 향상에 적합하며, 특히 P3 같은 광색역 색상 표현에 강점을 가져 최신 디바이스와 더 잘 호환됨
• oklch()는 읽기 쉽고 직관적인 색상 형식으로, 코드 기반 색상 조작이 간편해짐. 밝기(L), 채도(C), 색상(H), 불투명도(a)를 구분함
• CSS Colors 4/5 사양과 함께 네이티브 색상 조작 기능이 강화되고 있어, OKLCH는 미래지향적인 선택임
• Stylelint, Figma 플러그인, JS 라이브러리 등 생태계도 빠르게 발전 중이며, 디자인-개발 협업에도 긍정적임
• 다만 아직 생태계가 성숙하지 않았으며, 일부 조합은 모든 모니터에서 보이지 않을 수 있음

프로젝트에 OKLCH 적용하기

1. 기존 CSS의 색상 값을 찾아 OKLCH로 변환하고, Figma 플러그인이나 변환 도구를 활용해 OKLCH 색상 복사 및 적용
2. CSS 내 색상들을 커스텀 속성 팔레트로 정리해 재사용성과 유지보수성 향상
3. Stylelint와 plugin을 사용해 OKLCH 외 색상 사용을 자동 감지 및 방지
4. CI 환경에 Stylelint를 통합해 색상 일관성 검사를 자동화

OKLCH 전환 후 얻은 이점

1. 더 나은 코드 가독성
2. 예측 가능한 색상 수정
3. 상대 색상 기반 디자인 시스템 구축
4. P3 색상 등 고급 시각 표현 지원
5. 디자인팀과의 더 나은 협업 가능성