컬러 시스템, AI로 접근성까지 완벽하게 설계하는 PM의 실전 노하우

솔직히 인정하자. 컬러 시스템을 제대로 설계하는 건 정말 피곤한 일이다. 디자이너 시절부터 수없이 많은 팔레트를 만져봤지만, 이걸 개발팀과 완벽하게 공유하고, 무엇보다 '모두'를 위한 디자인을 만드는 건 늘 숙제였다. 특히 AI 스타트업에서 제품을 맡다 보니, 속도와 효율성, 그리고 '포용성'까지 고려해야 하는 압박감이 더 컸다. 오늘은 내가 AI 도구와 실전 경험을 버무려 컬러 시스템을 설계하고, 접근성까지 챙기는 과정을 날것 그대로 풀어보려고 한다.

HSL vs RGB, 왜 PM에게 HSL인가?

개발자라면 당연히 RGB 값을 다룰 테지만, PM인 나는 조금 다른 각도에서 접근한다. HSL(Hue, Saturation, Lightness)은 색조, 채도, 명도로 이루어져 있어서 직관적으로 색상의 변화를 조절하기가 훨씬 용이하다. 예를 들어, 브랜드의 메인 컬러를 정하고 나서 "이것보다 조금 더 연하게, 하지만 색상은 유지해줘" 같은 요구사항을 HSL로 변환하면 감각적인 톤앤매너를 유지하면서도 개발팀이 이해하기 쉬운 값으로 전달할 수 있다.

PM의 HSL 활용법: 톤앤매너 조절의 마법

내가 HSL을 선호하는 가장 큰 이유는 '일관성'과 '확장성' 때문이다. 메인 컬러의 HSL 값을 기반으로, 명도를 조금씩 낮추거나 채도를 조절해서 다양한 톤의 컬러를 파생시킬 수 있다. 이렇게 생성된 컬러들을 기반으로 UI 요소별, 상태별(예: 기본, 호버, 클릭, 비활성화) 컬러를 정의하면, 디자인 시스템 전체에 걸쳐 통일감 있는 시각적 경험을 제공할 수 있다. 마치 음악의 '조성'처럼, HSL은 컬러 팔레트의 '기본 틀'을 잡아주는 역할을 한다. 나 역시 예전에는 "이 색깔 좀만 밝게 해주세요" 같은 막연한 요청을 남발했지만, HSL을 이해하고 나서는 훨씬 명확하고 효율적으로 소통할 수 있게 되었다.

AI, 컬러 시스템 설계의 게임 체인저

솔직히 말해, 맨땅에 헤딩으로 컬러 시스템을 구축하는 건 시간 낭비다. 특히 제한된 시간 안에 복잡한 요구사항을 만족시켜야 하는 스타트업 환경에서는 더욱 그렇다. 이때 AI 도구들이 구세주처럼 등장한다. 내가 주로 활용하는 AI 도구들은 다음과 같은 역할을 한다.

1. 시드 컬러 기반 팔레트 생성

브랜드 아이덴티티를 나타내는 몇 가지 핵심 컬러(시드 컬러)를 AI에 입력하면, 해당 컬러들과 조화로운 수십 가지의 팔레트를 순식간에 생성해 준다. 이 팔레트들은 단순히 예쁜 색들의 나열이 아니라, 특정 목적(예: UI 디자인, 브랜딩, 데이터 시각화)에 맞춰져 있다는 것이 놀랍다. 나는 이 생성된 팔레트들을 보면서 영감을 얻고, 우리 제품의 핵심적인 컬러 방향성을 빠르게 잡을 수 있었다.

2. 접근성(Accessibility) 고려 팔레트 제안

이 부분이 내가 AI를 사랑하는 결정적인 이유다. 단순히 보기 좋은 색을 넘어, 시각 약자를 포함한 모든 사용자가 인지할 수 있도록 명도 대비(Contrast Ratio)를 고려한 팔레트 생성이 가능하다. AI는 WCAG(Web Content Accessibility Guidelines) 기준에 맞춰 텍스트와 배경 간의 명도 대비가 최소 4.5:1 이상이 되도록 자동으로 색상을 조정해 준다. 이를 통해 나는 디자인 초기 단계부터 접근성을 '필수'로 고려하게 되었고, 개발팀과의 불필요한 커뮤니케이션 비용을 크게 줄일 수 있었다.

3. 브랜드 가이드라인 기반 팔레트 최적화

기존에 가지고 있던 브랜드 가이드라인이나 특정 컬러 톤을 AI에 학습시키면, 이를 벗어나지 않으면서도 목적에 맞는 새로운 팔레트를 생성하거나 기존 팔레트를 최적화할 수 있다. 이는 브랜드 일관성을 유지하면서도 디자인의 신선함을 더하는 데 큰 도움이 된다. 물론, AI가 제안하는 모든 것을 맹신할 수는 없다. 최종 결정은 PM인 내가, 그리고 우리 팀의 경험과 판단을 거쳐야 한다. 하지만 AI는 '최적의 출발점'과 '다양한 옵션'을 제공함으로써 우리의 의사결정 과정을 훨씬 풍부하게 만들어준다.

실전: PM의 컬러 시스템 설계 워크플로우

내 워크플로우는 다음과 같다.

1. 목표 정의: 이 컬러 시스템이 어떤 제품/기능에 사용될 것인가? (예: 웹사이트 UI, 모바일 앱, 마케팅 콘텐츠)
2. 핵심 컬러 선정: 브랜드 아이덴티티와 제품의 핵심 가치를 반영하는 2~3가지 시드 컬러를 정한다.
3. AI 팔레트 생성 (접근성 최우선): AI 도구를 활용하여 시드 컬러 기반의 다양한 팔레트를 생성한다. 이때, WCAG AA 또는 AAA 레벨을 충족하는 대비 값을 가진 팔레트들을 우선적으로 선택한다. (나는 주로 'Colorable'이나 'Adobe Color' 같은 도구들을 AI와 함께 활용한다.)
4. HSL 기반 톤앤매너 조절: 생성된 팔레트 중에서 가장 마음에 드는 것을 기준으로, HSL 값을 활용하여 명도나 채도를 미세 조정하며 브랜드의 고유한 톤앤매너를 더한다. 예를 들어, 좀 더 차분한 느낌을 원한다면 명도를 약간 낮추고, 활기찬 느낌을 원하면 채도를 높이는 식이다.
5. 주요 UI 요소별 컬러 할당: 메인 컬러, 보조 컬러, 강조 컬러, 텍스트 컬러, 배경 컬러, 상태별 컬러(성공, 오류, 경고, 정보) 등을 정의하고, HSL 기반으로 일관성 있게 할당한다. 이때, 텍스트와 배경의 대비 값을 다시 한번 확인하며 접근성 문제를 사전에 차단한다. (내 경험상, 텍스트 컬러는 회색 계열보다 블랙에 가까운 컬러가, 배경 컬러는 순백색보다 약간 톤이 다운된 화이트가 눈의 피로를 덜어준다.)
6. 개발팀 전달 및 협업: HSL 값과 함께, 각 컬러가 어떤 용도로 사용될 것인지 명확하게 정의된 문서(예: Figma 컴포넌트 라이브러리, Notion 페이지)를 전달한다. 개발팀에서는 이를 기반으로 CSS 변수나 Tailwind CSS 설정 등으로 구현하게 된다. 디자인과 개발 간의 '언어'를 통일하는 것이 핵심이다.

디자인 시스템, '모두'를 위한 약속

컬러 시스템은 단순히 예쁜 웹사이트를 만드는 도구를 넘어선다. 그것은 우리 제품을 사용하는 모든 사람, 즉 '모두'를 위한 약속이다. 시각적 즐거움을 제공하는 것을 넘어, 정보를 명확하게 전달하고, 사용자가 불편함 없이 서비스를 이용할 수 있도록 하는 기반이 되어야 한다. PM으로서 나는 이 '약속'을 지키기 위해, AI의 도움을 받아 기술적으로 가장 완벽하고, 감성적으로는 가장 풍부한 컬러 시스템을 구축하려고 노력한다.

이제, 당신의 컬러 시스템은 안녕하신가? 혹시 놓치고 있는 부분은 없는지, AI와 함께 점검해볼 시간이다.