[6월 TIL #11] 기존 색을 살리며 OKLCH로 통합하기

1. 바쁜 날 가장 먼저 밀리는 것

요즘 마케팅, 유저 리서치까지 여러 일이 겹치면서 정신없이 바쁘다. 그런 날일수록 가장 먼저 밀리는 일은 늘 정해져 있다. 당장 급하지는 않지만 내 직무의 본질에 가까운 일. 나에게는 디자인 시스템이 그렇다.


5월에 쓴 [5월 TIL #13] 배우는 연기를, 나는 무엇을?에서 "보여지는 걸 붙잡지 말고 일의 본질을 끝까지 파고들자"고 적어두기도 했다. 그런데 정작 본질에 가까운 디자인 시스템은 계속 뒤로 밀렸다. 어제 쓴 [6월 TIL #10]에서 그 이유를 "성향의 문제가 아니라 매일 조금씩 나아갈 구조의 부재"라고 정리하고, 7일 챌린지를 선언했다.

2. 뭐부터 할지 막막해서, 진단부터

무엇부터 결정해야 할지가 너무 방대했다. 그래서 Claude Code와 함께 현황부터 진단했다.

진단 결과를 보고, 그중 가장 단순하면서도 체계가 없었던 색상부터 손대기로 했다. 우리 제품의 색상 토큰(색을 이름으로 관리하는 단위)은 세 갈래로 갈라져 있었고, 코드에 직접 박힌 색상 코드가 545번 등장했다. 접근성(WCAG 대비 기준) 통과율은 라이트 모드에서 20%에 그쳤다.

3. 기존 색을 버리지 않고 OKLCH로

색을 새로 다 갈아엎고 싶지는 않았다. 우리 제품이 쌓아온 브랜드 색은 살리되, 흩어진 것만 정리하고 싶었다. 여기서 우리 회사 AX팀의 디자이너 기성 님께서 만들어주신 OpenColor(키컬러 하나에서 OKLCH 기반 디자인 토큰을 자동 생성하고, 기존 토큰의 접근성을 감사해주는 도구)를 썼다.

OpenColor 소개
OpenColor는 키 컬러 1~4개로 130개의 프로덕션용 디자인 토큰을 자동 생성하는 색상 시스템 빌더입니다. OKLCH 지각 색공간 기반의 수식 엔진이 배경, 텍스트, 버튼, 입력창, 피드백, 데이터 시각화 등 모든 컴포넌트 토큰을 계산하며, WCAG 접근성 기준을 자동으로 충족합니다. 키 컬러 하나를 바꾸면 130개 토큰이 수학적으로 동시에 업데이트 됩니다.

1. OpenColor Web
- https://colors3.vercel.app/
- 키 컬러 1개 → 130개 토큰 자동 생성
- OKLCH 공식 기반으로 배경, 텍스트, 버튼, 피드백, 데이터 시각화 등 모든 토큰을 한 번에 생성
- 라이트 + 다크 모드 동시 지원
- 별도 작업 없이 두 모드 토큰을 함께 생성, 즉시 미리보기 가능
- WCAG 대비비 자동 보정
- AA / AAA 기준을 자동으로 충족하도록 색상 조정
- 다양한 포맷 내보내기
- CSS Variables, Tailwind, Style Dictionary, DTCG JSON(Figma/Tokens Studio 호환) 원클릭 export
- 레시피 기반 재현성
- 색상값이 아닌 수식으로 저장되어, 키 컬러를 바꿔도 모든 토큰이 수신을 기반으로 재생성
- 이미지/URL에서 색상 추출
- 브랜드 이미지나 웹사이트 URL로부터 키 컬러를 자동 추출해 바로 토큰 생성
- 전체 컬러토큰 생성 프로세스에 대한 설명은 https://colors3.vercel.app/about/pipeline

2. OpenColor Skill
https://github.com/corca-ai/open-color
- open-color
기존 프로젝트의 컬러 토큰을 4가지 기준으로 감사합니다. WCAG 대비비, hover/pressed 상태 구분, error/warning/success/info 색상 혼동, 색약 시뮬레이션 후 개선된 컬러를 제안합니다.
- open-color-gen
브랜드 키컬러 하나로 130개의 라이트/다크 디자인용 컬러토큰을 생성합니다. CSS 변수, JSON, Tailwind 설정 파일로 출력되며, WCAG 접근성 자동 보정이 적용되어 별도 수작업 없이 개발중인 제품에 사용할 수 있습니다.

OKLCH는 사람 눈에 보이는 밝기·채도·색조를 직관적으로 다루는 색 공간이다. 색조(hue)는 그대로 두고 밝기(L)만 내릴 수 있어서, "빨강은 빨강인데 접근성만 통과하도록" 같은 조정이 깔끔하게 된다.

흩어져 있던 240개의 색을 12개의 대표색(앵커)으로 통합했다. 접근성에 걸리던 색들은 색조를 유지한 채 밝기만 낮춰 기준을 통과시켰다. 예를 들어 흐린 텍스트 색은 대비 2.54에서 기준치(4.5)를 넘기도록, 에러 색은 색조 26°를 그대로 둔 채 밝기만 낮추는 식이다.

4. 눈으로 보는 전후

12개 대표색의 기존 색 ↔ OKLCH 보정 색 (Figma)

12개 대표색의 기존 색과 OKLCH 보정 색을 Figma에 나란히 정리했다. 보정된 색들도 색조는 그대로이고 밝기만 내려간 게 한눈에 보인다. 그리고 이 12개만 관리하면, 버튼의 hover·pressed 같은 상태와 라이트·다크 모드까지 포함한 130여 개의 토큰이 자동으로 파생된다. 관리할 색이 240개에서 12개로 줄어드는 셈이다.

5. 일단 첫날은 했다

너무 피곤한 첫날이었는데도, 챌린지 첫 날을 잘 해냈다. 어제 스스로 하네스(=선언했으므로 해야한다)를 만들어둔 게 컸다. 사실 진짜 업무 시간에 이 일을 할 시간이 없다는 게 약간 슬프기도 하지만 회사에 필요한 일을 우선으로 해야하는 건 어쩔 수 없으니, 나의 성장을 위해서라도 내 직무에 어울리는 것을 따로 할 수밖에 없는 거 같다. 암튼 남은 6일도 이렇게 한 칸씩 해나가야겠다.. 굿!