웹사이트 작업을 시작할 때 사장님이 가장 자주 건네는 자료는 "우리 브랜드 컬러는 이 색이에요" 한 줄입니다. 그러나 이 한 가지 색만 가지고는 사이트를 만들 수 없습니다. 모든 버튼이 같은 파랑이 되면 강조가 사라지고, 모든 글자가 검정으로만 들어가면 정보 위계가 무너집니다. 결국 디자이너는 즉흥적으로 색을 더 만들어 쓰게 되고, 시즌마다 페이지 색이 조금씩 어긋나는 일이 반복됩니다. 컬러 시스템은 미적 취향이 아니라 사이트의 일관성과 운영 비용을 결정하는 구조입니다.
가장 단순한 비율, 메인·보조·강조
인테리어에서 빌려온 익숙한 비율이 웹에서도 그대로 작동합니다. 화면의 큰 영역은 메인 베이스 색(보통 흰색이나 옅은 회색), 그다음 면적은 콘텐츠를 담는 보조색(헤더·카드·구획), 가장 좁은 영역은 사용자가 누르길 바라는 강조색(주로 CTA 버튼)에 할당하는 비율입니다. 강조색은 인색하게 써야 효과가 있습니다. 모든 버튼이 같은 강조색이면, 가장 눌리길 원하는 버튼이 더 이상 강조되지 않습니다.
컬러 시스템에 반드시 들어가야 할 다섯 가지 역할
메인 브랜드 색(Primary)
로고, 가장 중요한 CTA, 링크 호버 등 사용자에게 '이것이 이 브랜드'라고 느끼게 하는 색입니다. 한 가지가 아니라 보통 옅은 단계부터 짙은 단계까지 다섯에서 아홉 단계의 명도로 함께 정의합니다. 단계를 나누지 않으면 호버 색, 비활성 색, 배경 색을 만들 수 없어 결국 "투명도 절반"으로 즉흥 처리하게 됩니다.
보조색(Secondary)
메인을 도와 두 번째 강조를 만드는 색입니다. 메인이 차가운 블루라면 보조는 따뜻한 옐로나 코랄로 잡아 대비를 만들고, 카테고리 태그·보조 CTA·차트의 두 번째 막대 같은 자리에 씁니다. 보조색이 없으면 정보가 두 단계로만 보이고, 카드 안에서의 위계 표현이 어려워집니다.
중립색(Neutral)
본문 글자, 테두리, 보조 텍스트, 카드 배경, 구분선에 쓰이는 회색 계열입니다. 무채색 흑백을 그대로 쓰면 화면이 차갑고 인쇄물 같은 느낌이 들기 때문에, 메인 색의 색온도를 살짝 섞은 차가운 회색 또는 따뜻한 회색을 여러 단계로 만들어 둡니다. 중립색의 단계가 잘 짜여 있으면, 그림자나 투명도에 의존하지 않아도 깊이감이 표현됩니다.
시맨틱 색(Semantic)
성공·경고·오류·안내처럼 의미가 정해진 색입니다. 결제 완료 화면의 초록 체크, 폼 오류 메시지의 빨강 테두리, 재고 부족 안내의 노랑 배지에 쓰입니다. 시맨틱 색을 미리 정해 두지 않으면 화면마다 빨강이 다 다른 사이트가 되어, 사용자가 같은 의미인지 매번 새로 학습해야 합니다.
표면 색(Surface)
카드·모달·시트·토스트의 배경에 쓰이는 색입니다. 흰 배경 위에 흰 카드를 얹으면 그림자에만 의존하게 되어 다크 모드 전환 시 깨지기 쉽습니다. 표면 색을 한 단계, 두 단계, 세 단계 식으로 명도가 다르게 미리 정해 두면, 카드 위에 카드를 얹는 패턴도 일관되게 처리됩니다.
다크 모드까지 고려한다면
다크 모드는 색을 단순히 반전시키는 작업이 아닙니다. 검정 배경에 강한 채도의 메인 색을 그대로 올리면 눈이 피곤하기 때문에, 메인 색의 채도를 한 단계 낮추고 명도를 살짝 높인 '다크 모드 전용 변형'을 컬러 시스템에 함께 정의해 두어야 합니다. 처음부터 라이트와 다크 두 벌을 따로 만드는 것이 아니라, 단계로 나뉜 컬러 시스템 위에서 두 모드의 토큰을 다르게 매핑하는 구조가 유지보수에 훨씬 강합니다.
실무에서 흔히 빠뜨리는 두 가지
첫째, 접근성 명도 대비를 잊지 말아야 합니다. 본문 글자와 배경의 명도 대비가 충분치 않으면 디자인 단계에서 미리 검증해 두지 않을 경우 개발이 끝난 뒤 수정 비용이 큽니다. 둘째, 토큰화를 빠뜨리면 안 됩니다. 컬러는 항상 의미가 담긴 변수 이름으로 등록하고, 페이지나 컴포넌트에서는 그 변수만 참조하게 해야 합니다. 그래야 리브랜딩이나 다크 모드 추가가 한 줄 변경으로 끝납니다.
CYAN은 사이트 작업을 시작할 때 브랜드 컬러 한 가지를 받으면, 명도 단계와 보조색·중립색·시맨틱 색을 함께 설계해 컬러 시스템 한 장을 먼저 만들어 드립니다. 시즌이 바뀌고 페이지가 늘어나도 색이 어긋나지 않는 사이트의 출발점은, 디자인 시안을 그리기 전에 컬러 시스템부터 짜는 작업입니다.