솔직히 디자이너 초년 시절에는 컬러를 감각으로만 골랐습니다. "왠지 이 색이 예뻐 보인다"는 이유로 브랜드 컬러를 정했다가, 납품 직전에 접근성 기준 미달이라는 피드백을 받고 처음부터 다시 작업한 적도 있습니다. 그때 처음으로 컬러 이론이 실무에서 얼마나 중요한지 체감했습니다. 색상환 기반의 체계적인 배색과 WCAG 접근성 기준, 이 두 가지를 이해하고 나서야 컬러 작업이 훨씬 수월해졌습니다.
색상환으로 시작하는 배색 설계
일반적으로 컬러를 잘 고르려면 감각이 뛰어나야 한다고 알려져 있지만, 제 경험상 이건 절반만 맞는 말입니다. 감각보다 먼저 필요한 건 색상환(Color Wheel)에 대한 이해입니다. 색상환이란 빨강, 파랑, 노랑의 원색부터 이를 혼합한 2차색(주황, 초록, 보라), 그리고 3차색까지 색의 관계를 원형으로 배열한 구조를 말합니다. 색상환을 보면 어떤 색끼리 어울리는지, 어떤 색이 서로 긴장감을 만드는지 한눈에 파악할 수 있습니다.
배색 방식에도 이름이 있습니다. 보색(Complementary)은 색상환에서 정반대에 위치한 두 색을 함께 쓰는 방식으로, 강한 대비와 시각적 긴장감을 만들어냅니다. 유사색(Analogous)은 색상환에서 인접한 색들을 조합하는 방식으로, 자연스럽고 부드러운 분위기를 연출합니다. 삼각배색(Triadic)은 색상환에서 균등하게 120도 간격으로 떨어진 세 색을 동시에 사용하는 방식인데, 다양성과 균형을 동시에 잡을 수 있습니다.
제가 주로 쓰는 도구는 Adobe Color와 Coolors입니다. 처음에는 이런 툴 없이 직접 조합했는데, 색상환 기반으로 배색 방식을 설정하면 도구가 자동으로 어울리는 색 조합을 제안해 줘서 작업 속도가 체감상 두 배 이상 빨라졌습니다.
60-30-10 배색 비율과 브랜드 컬러 전략
색을 잘 고르는 것과 잘 배치하는 것은 다른 문제입니다. 이 차이를 깨닫기 전까지 저는 브랜드 컬러를 화면 전반에 균등하게 뿌리는 실수를 자주 했습니다. UI 배색의 기본 원칙으로 자주 언급되는 것이 60-30-10 법칙입니다. 여기서 60-30-10이란 주요색을 전체 화면의 60%, 보조색을 30%, 강조색을 10%의 비율로 배분하는 방식을 의미합니다. 강조색이 너무 넓은 면적을 차지하면 강조 효과가 사라지고, 오히려 시각적으로 산만해집니다.
토스, 카카오, 네이버 같은 국내 대형 서비스를 분석해보면 이 원칙이 일관되게 적용되어 있습니다. 토스의 파랑은 핵심 CTA에만 집중적으로 쓰이고, 카카오의 노랑은 배경이 아닌 포인트 요소로 활용됩니다. 각 브랜드가 얼마나 전략적으로 컬러를 배치하는지 의식적으로 관찰해보면, 단순히 "이 앱 색이 예쁘다"를 넘어 설계 의도가 읽히기 시작합니다.
색상의 심리적 효과도 무시할 수 없습니다. 빨강은 긴급함과 에너지를, 파랑은 신뢰와 안정감을, 초록은 성장과 자연을 연상시킵니다. 심리적 효과를 나열하면 다음과 같습니다.
- 빨강: 긴급함, 에너지, 할인·세일 UI에서 주로 활용
- 파랑: 신뢰, 안정, 금융·테크 서비스의 브랜드 컬러로 가장 많이 사용
- 초록: 안정, 성장, 헬스케어·환경 관련 서비스에 적합
제가 직접 여러 프로젝트에서 써봤는데, 브랜드 성격과 색상의 심리적 효과가 어긋날 때 사용자 반응이 눈에 띄게 달라졌습니다. 심리적 효과는 이론처럼 보이지만 실무에서 체감되는 영향이 생각보다 큽니다.
접근성 기준과 실무 적용의 현실
솔직히 이건 예상 밖이었습니다. WCAG(Web Content Accessibility Guidelines) 접근성 기준이라는 걸 처음 접했을 때 "이 정도면 그냥 넘어가도 되겠지"라고 생각했습니다. WCAG란 웹 콘텐츠를 시각 장애인을 포함한 모든 사용자가 이용할 수 있도록 만들기 위한 국제 접근성 지침을 말합니다. 여기서 텍스트와 배경 사이의 명도 대비 비율이 일반 텍스트 기준 4.5:1 이상이어야 한다는 조건이 있는데, 제가 작업한 프로젝트에서 클라이언트 브랜드 컬러가 이 기준에 미달된 적이 있었습니다.
당시 클라이언트는 브랜드 정체성 때문에 컬러를 절대 바꿀 수 없다고 했습니다. 그래서 Figma의 Stark 플러그인을 활용해 접근성 시뮬레이션을 돌려보고, 채도는 그대로 유지하면서 명도만 조정한 대안 컬러를 3가지 제안했습니다. Stark 플러그인이란 Figma 내에서 색맹 시뮬레이션과 대비 비율을 실시간으로 확인할 수 있는 접근성 검사 도구입니다. 결과적으로 클라이언트가 그 중 한 가지를 선택해서 마무리됐는데, 이때 처음으로 접근성을 타협의 여지가 없는 기준으로 대하게 됐습니다.
웹 접근성 기준은 국제적으로 W3C(World Wide Web Consortium)에서 관리하며, WCAG 2.2 기준이 현재 통용되고 있습니다(출처: W3C). 국내에서도 한국형 웹 콘텐츠 접근성 지침(KWCAG)이 별도로 존재하며, 공공기관 웹사이트에는 법적으로 적용이 의무화되어 있습니다(출처: 한국웹접근성인증평가원).
한 가지 아쉬운 점은, 이런 컬러 전략 논의에서 다크모드와 라이트모드의 컬러 변환 전략이 빠지는 경우가 많다는 것입니다. 같은 브랜드 컬러라도 흰 배경과 어두운 배경에서 명도 대비 비율이 완전히 달라집니다. 라이트모드에서는 접근성을 통과했던 컬러가 다크모드에서는 기준에 미달하는 경우가 실무에서 꽤 자주 발생합니다. 컬러 토큰이라는 개념도 여기서 중요해집니다. 컬러 토큰이란 디자인 시스템에서 색상 값을 변수처럼 관리하여 모드 전환 시 컬러를 일괄적으로 제어할 수 있는 구조를 말하는데, 이 개념 없이는 다크모드 대응이 결국 수작업이 됩니다.
컬러 시스템은 한 번 구축하고 끝나는 작업이 아닙니다. 서비스가 커질수록, 다크모드처럼 환경이 늘어날수록 관리 체계가 필요해집니다. 지금 당장 완벽하게 구축하기 어렵더라도, 처음부터 60-30-10 배색 비율과 WCAG 대비 기준을 지키는 습관을 들이는 것이 가장 현실적인 출발점이라고 생각합니다. Adobe Color나 Coolors로 색상환 기반 배색을 설계하고, Stark 플러그인으로 접근성을 검증하는 워크플로우만 갖춰도 컬러 작업의 질이 눈에 띄게 달라집니다. 감각을 키우는 것도 중요하지만, 기준을 먼저 세우는 것이 더 빠른 성장의 길이었습니다.