OpenColor
Formula-Driven Color Token Generator. (기획,디자인,개발)
https://open-color.com
디자이너가 만든 컬러 시스템 자동화 도구
대부분의 디자이너들은 제품에 적용할 컬러토큰을 만들때 상당한 시간을 투자합니다. 1개에서 많게는 3~4개까지의 키컬러들을 기반으로 모든 구성요소들의 용도와 상태변화에 맞춰서 컬러값 하나하나를 정의하고 테스트 하면서 다듬는 과정을 반복하죠. 그 과정에서 전체 컬러의 채도나 명도가 균일하게 보이지 않거나 부자연스러운 조합들이 종종 만들어지기 때문에 제품에 반영하고 나서도 오랜 시간동안 100여개 이상의 컬러값을 일일이 튜닝하는 과정을 거치게 됩니다.
저는 제품을 만들때마다 디자이너에게 반복되는 이런 과정을 더 개선된 색상시스템을 기반으로 자동화 할 수 있지 않을까 생각하고 직접 도구로 만들어 보기로 했습니다. 전통적인 RGB나 HSL기반이 아닌 OKLCH 색공간을 사용하고, 사용자의 입력이나 선택으로 1~4개의 키컬러를 설정하면 이 컬러값들을 기반으로 모든 컬러토큰의 용도와 상태변화에 맞춰서 수식화된 엔진을 통해서 130여개의 컬러토큰 조합과 색상을 생성함과 동시에 모든 페어링 검수와 WCAG 대비기준에 맞춰서 자동 보정된 토큰 데이터로 완성해 주는 도구입니다.
이렇게 수식을 기반으로 제어되는 컬러 시스템 환경에서는 사용자가 키컬러만 수정하면 연동된 모든 파생 토큰값들을 한번에 업데이트할 수 있으므로 디자이너들이 초기에 많은 양의 컬러토큰들을 셋업하는 데 들어가는 시간을 줄일 수 있고 또 디자이너 없이 개발하는 분들에게는 간단한 선택만으로 제품에 바로 적용할 수 있는 안정된 컬러시스템을 한번에 만들 수 있는 장점이 있기도 합니다.
이 제품을 직접 디자인하고 클로드코드와 함께 수식화 엔진을 만들고 DB를 연동하고 서비스로 배포하는데 까지의 모든 과정을 디자이너인 제가 다 할 수 있는 세상이 되었습니다. 물론 쉽지 않았지만 그만큼 의미있는 작업이었던것 같습니다.