{3줄 요약}

컬러 시스템은 색에 역할과 규칙을 부여해 화면 전체를 연결하는 구조예요.
색을 즉흥적으로 고르면 제품이 커질수록 화면마다 다른 언어를 쓰게 돼요.
시스템을 만들면 어떤 화면에서도 같은 색 원칙으로 일관되게 설계할 수 있어요.

색을 즉흥으로 고르면 어떻게 되나요

초기에는 괜찮아요.
화면이 몇 개 없고, 한 명이 다 만들면 눈에 보이지 않는 일관성이 유지돼요.

하지만 제품이 커지고 여러 팀이 동시에 화면을 만들기 시작하면 달라져요.
어떤 화면의 버튼은 #0066FF이고, 다른 화면의 비슷한 버튼은 #0057E7이에요.
사용자는 "이게 같은 버튼인가?"라고 헷갈려요.

오류 메시지는 빨간색인데, 어떤 화면에서는 #FF3B30이고 다른 화면에서는 #E53935예요.
둘 다 빨강이지만 조금씩 달라서 전체가 어수선해 보여요.

Color System은 이 혼란을 방지하는 구조예요.

색에 역할을 부여해요

Color System의 핵심은 색에 역할을 정의하는 거예요.
어떤 색이 예쁜지가 아니라, 어떤 역할을 하는 색인지를 먼저 정해요.

브랜드 색 (Brand Color) - 제품의 정체성을 나타내는 색이에요.
토스의 파란색, 카카오의 노란색처럼요.
로고, 주요 버튼, 핵심 UI에 써요.

주요 액션 색 (Primary) - 가장 중요한 CTA(Call to Action) 버튼에 쓰는 색이에요.
화면에서 사용자가 가장 해주길 바라는 행동에 써요.

보조 색 (Secondary) - 덜 중요한 행동, 보조 버튼, 보조 정보에 써요.

상태 색 (Semantic Colors) - 의미를 가진 색이에요.

  • Success: 초록 계열 (완료, 성공, 정상)
  • Error: 빨강 계열 (오류, 실패, 위험)
  • Warning: 주황/노랑 계열 (주의, 확인 필요)
  • Info: 파랑 계열 (안내, 정보)

중성 색 (Neutral) - 배경, 경계선, 비활성 텍스트에 써요.
회색 계열이 대부분이에요.

색 토큰으로 관리해요

Design Token(디자인 토큰)은 색 값에 의미 있는 이름을 붙이는 방식이에요.

#0066FF 대신 color. primary.500이라고 이름을 붙이면, 이 토큰 하나만 바꾸면 제품 전체의 주요 색상이 바뀌어요.
각 화면마다 16진수 값을 찾아서 바꿀 필요가 없어요.

브랜드 색이 바뀔 때 이 장점이 극대화돼요.
리브랜딩을 할 때 토큰 시스템이 없으면 수백 개 화면의 색값을 하나씩 바꿔야 해요.
토큰이 있으면 하나만 바꾸면 전부 반영돼요.

Material Design의 Color System

Google의 Material Design이 Color System을 잘 보여주는 사례예요.

Material Design은 색상 팔레트를 100~900의 숫자로 계층화해요.
500이 기본 색조이고, 100으로 갈수록 밝아지고 900으로 갈수록 어두워져요.

이 구조로 배경에는 100, 일반 사용에는 500, 강조에는 700처럼 일관된 규칙으로 색을 쓸 수 있어요.
모든 팀이 같은 팔레트 언어를 쓰니까 어떤 화면을 만들어도 전체와 어우러져요.

GOV.
UK 디자인 시스템도 비슷한 방식으로 색을 체계화해서 정부 서비스 전체에 일관된 색상 언어를 유지해요.

Color System을 만드는 순서

처음부터 완벽하게 만들 필요 없어요. 이 순서로 시작하면 돼요.

1단계 - 브랜드 색 정의 : 제품에서 가장 핵심이 되는 색 1~2가지를 정해요.

2단계 - 역할별 색 정의 : Primary, Secondary, Error, Warning, Success, Info를 각각 정해요.

3단계 - 색조 확장 : 각 색의 밝은 버전, 어두운 버전, 배경용 버전을 만들어요.

4단계 - 토큰 이름 붙이기 : 16진수 값이 아니라 역할 기반 이름으로 관리해요.

5단계 - 다크 모드 대응 : 밝은 테마와 어두운 테마에서 같은 토큰이 다른 값으로 작동하도록 설계해요.

색을 이 시스템으로 관리하기 시작하면 색 관련 질문이 "어떤 색이 예쁠까요?"에서 "이 상황에 어떤 역할의 색을 써야 할까요?"로 바뀌어요.
훨씬 빠르고 일관된 결정이 가능해져요.

색채 이론 기초와 색 대비는 색채 이론 기초에서, Color System이 디자인 시스템 안에서 어떻게 작동하는지는 Design System에서 다뤄요.

관련 아티클

참고 문헌

  • Alla Kholmatova, 《Design Systems》(2017) - 디자인 시스템 안에서 색상 체계를 구성하는 방법을 다뤄요.
  • GOV.UK Design System - https://design-system.service.gov.uk/
  • U.S. Web Design System (USWDS) - https://designsystem.digital.gov/
  • William Lidwell, 《Universal Principles of Design》(2010) - 색의 인지적 역할과 시스템 설계 원칙이에요.