Color System

잘 합의된 디자인 시스템은 커뮤니케이션 비용을 엄청나게 낮출 수 있고 일관성 있는 사용자 경험을 제공할 수 있기 때문에 꼭 해야 하는 일이었지만 입사하자마자 리브랜딩과 프로덕트 전체 개편을 맡아서 극 초기부터 시스템을 만든다는 게 부담이었어요.

하지만 프로덕트 디자인을 혼자 맡고 있어서 무조건 수정이 쉽게, 효율적인 개발자와의 협업을 위해 할 수 있는 것부터 차근차근 해야겠다고 생각했어요.

그래서 우선 컬러부터 구축하기로 했습니다.

디자인이 어느 정도 진행되고 나서 시스템을 구축해도 시행착오가 많았을 텐데 극초기부터 하다 보니 삽질도 많이 했고 계속해서 새로운 기능을 만들고 테스트하기 때문에 정말 많은 부분이 정말 자주 변경되었어요. 이러한 과정들을 거치면서 효과를 보고 있는 지금까지의 이야기를 공유드립니다.

저희 컬러 시스템은 기본 컬러인 Basic 컬러와 UI에 적용되는 Semantic 컬러가 있습니다.

Basic 컬러는 기본 컬러 팔레트의 기능을 하며 톤 혹은 기능과 서비스에 따라 정의하고 Basic 컬러를 토대로 사용하는 목적과 UI에 따라 Semantic 컬러를 구축합니다.

Basic 컬러로는 Tint와 Gray 컬러가 있습니다.

Tint 컬러는 Main, Chart, Functional 컬러로 구성되어 있습니다.

$blue-600(#321FA2)가 Primary 컬러이고 필요에 따라 다른 톤의 컬러를 적절하게 사용할 수 있도록 9가지로 구성하였습니다.

피그마 플러그인 Color designer을 사용해서 컬러를 추출하고 디테일한 값을 수정하여 최종 컬러를 뽑았습니다.

크립토퀀트 차트 데이터 중에는 아래 이미지처럼 여러 데이터가 겹겹이 쌓이는 Stack 차트가 있는데 언제 어느 상황에 최대 몇 가지로 늘어날지 모르는 컬러들을 라이트, 다크 각각의 모드에 대응해야 했습니다.

이 아이템들을 라이트, 다크에 다 다른 Hex 코드를 지정해서 관리하는 것은 관리 비용이 많이 든다고 판단했어요. Content base가 되는 차트 박스의 백그라운드 컬러를 차트 내의 컬러들과 명확하게 구분되어 보이게 하기 위해 라이트에서는 White를 다크에서는 Black에 가까운 Dark gray를 사용하여 차트 컬러를 라이트와 다크에서 같은 Hex 코드의 컬러를 써도 명확히 구분될 수 있는 컬러로 정의하였어요.

같은 계열의 컬러를 명도 대비를 통해 최대한 많은 컬러를 사용할 수 있도록 구축하였습니다.

성공, 오류, 경고 등의 상황에 적절하게 사용할 수 있는 컬러입니다.

그레이 컬러까지 구축하고서 1:1 페어링을 통해 다크모드로 스위칭하면 최적화된 화면이 구현되지 않습니다.

라이트 모드에서는 한 컬러를 동시에 사용할 수 있는데 다크 모드에서는 각각 다른 컬러를 사용해야 하는 상황이 생겨요.

여기서 필요한 Semantic 컬러에 대해 아래 이미지와 같은 상황에서 살펴볼게요!

아래 이미지의 다크모드는 베이직 컬러에서 1:1 페어링한 컬러 그대로 다크모드에 적용한 모습이에요. 라이트 모드에서는 드롭다운 박스, 차트 내의 divider 라인, 안내 메시지 박스 등 레이어가 구분되는 반면 다크 모드에서는 구분되지 않고 있어요.

위와 같은 상황을 방지하고자 사용 목적에 따라 시멘틱한 이름의 컬러를 정의해서 새로운 페어링을 만듭니다.

베이직 컬러의 단순 컬러 팔레트 개념을 넘어서 추가로 사용되는 목적과 UI에 따라 Semantic 컬러를 구축합니다.

Semantic 컬러 체계를 구축하면 아래와 같은 편안한 다크모드 화면을 경험할 수 있습니다.

이렇게 다크 모드 대응을 위해서는 시맨틱 컬러가 필수이며 완전한 커버가 가능해집니다. 저희 크립토퀀트처럼 많은 컨텐츠가 들어가는 서비스는 지금까지 구축된 것에서 추가적으로 시맨틱 컬러를 정의하는 일이 생기겠지만 컬러 팔레트에서 파생되는 것이기 때문에 확장성에도 문제가 없습니다.

컬러는 피그마에서 관리하고 있고, 저는 라이트 테마로만 시안을 제작하는 편입니다.

아주아주 고마운 플러그인 Themer를 사용해서 클릭 한 번이면 다크모드로 스위칭할 수 있기 때문이에요!

마지막으로 피드백을 주고받으며 함께 만들어 나가는 팀워크가 필요해요. 컬러 뿐만 아니라 더 효율적인 디자인 시스템을 만들기 위해 오픈 마인드로 피드백을 주고 받으며 디벨롭 해나갈 프로덕트 디자이너를구합니다.