컬러 시스템: HSL vs RGB, 접근성 팔레트 만들기

컬러 시스템, 대체 왜 이렇게 복잡한 건데?

솔직히 말해보자. 처음 AI 스타트업에 뛰어들었을 때, 가장 나를 당황하게 했던 것 중 하나가 바로 '컬러 시스템'이었다. 디자이너 출신 PM으로서 톤앤매너, 브랜드 아이덴티티는 익숙했지만, 엔지니어들과의 협업 과정에서 등장하는 HSL, RGB, HEX 같은 용어들은 마치 외계어처럼 느껴졌다. "이 버튼 색깔, RGB 값으로 100, 150, 200 해주세요." "아니, HSL로 하면 더 직관적인데요?"...

그때 깨달았다. 단순한 색상 선택을 넘어, 일관성 있고 효율적인 컬러 시스템 구축이 얼마나 중요한지를. 특히 AI 서비스처럼 복잡하고 다층적인 인터페이스를 가진 제품에서는 더욱 그렇다. 오늘은 PM으로서 겪었던 시행착오와 실전 경험을 바탕으로, HSL과 RGB의 차이점, 그리고 무엇보다 중요한 '접근성'을 고려한 컬러 팔레트 설계법을 이야기해보려 한다. 개발자만 쫓아가지 말고, 우리 PM들이 이 게임의 룰을 알아야 하지 않겠나?

HSL vs RGB: 어떤 걸 써야 할까?

개발자들과 컬러 시스템에 대해 논할 때 가장 먼저 나오는 질문은 아마 'HSL이냐, RGB냐'일 것이다. 둘 다 색상을 표현하는 방식이지만, 접근 방식이 다르다. 마치 같은 목적지를 가는 두 개의 다른 내비게이션 같다고 할까?

• RGB (Red, Green, Blue): 가장 익숙한 방식일 거다. 빛의 삼원색을 조합해서 색을 만든다. 0부터 255까지의 숫자로 각 색상의 강도를 조절하는데, 직관적으로 이해하기 쉽지만, 특정 색조나 채도를 조절하려면 세 가지 값을 모두 건드려야 해서 번거로울 때가 많다. 게다가 '이 색깔에서 조금 더 밝게' 또는 '이 색깔에서 채도를 낮춰서'라고 말로 설명하기가 쉽지 않다. 마치 '이 믹스커피에 설탕 10g, 프림 5g 더 넣어줘'라고 말하는 것과 같다.
• HSL (Hue, Saturation, Lightness): 색상(Hue), 채도(Saturation), 명도(Lightness)로 색을 표현한다. 색상은 0~360도의 원형 그래프로, 채도와 명도는 퍼센트로 표현된다. HSL의 가장 큰 장점은 직관성이다. "기본 파란색에서 채도를 좀 빼고 명도를 약간 높여줘"라고 하면, HSL 값만 조절하면 된다. 마치 "이 믹스커피에서 설탕은 그대로 두고 프림만 반 스푼만 더 넣어줘"라고 말하는 것과 같다. 특히 UI 디자인에서 일관된 톤앤매너를 유지하거나, 다양한 명도/채도의 색상을 쉽게 생성할 때 빛을 발한다. 내가 AI 스타트업에서 수많은 UI 컴포넌트의 색상을 관리할 때, HSL을 적극적으로 활용하면서부터 훨씬 수월해졌다. 디자이너 경험을 가진 PM으로서, 이 직관성은 협업의 질을 엄청나게 향상시켰다.

결론적으로, HSL은 색상 자체의 '의미'를 조절하기에 더 용이하고, RGB는 특정 '픽셀 값'으로 색을 명확히 지정할 때 유용하다. 최근 많은 디자인 시스템에서는 HSL 기반으로 색상 변형을 관리하고, 최종적으로는 RGB나 HEX 값으로 변환하여 사용한다. 이것이 바로 '시스템'의 힘이다.

접근성이란 무엇이고, 왜 PM이 신경 써야 하는가?

여기서부턴 정말 중요한 이야기다. '접근성(Accessibility)', 즉 A11y라고도 불리는 이 개념은 단순히 '장애인을 위한 배려'를 넘어, 모든 사용자가 우리 제품을 불편함 없이 이용할 수 있도록 하는 것을 의미한다. 시각 장애, 청각 장애, 운동 능력 저하, 고령자, 심지어는 일시적인 상황 (예: 밝은 햇빛 아래서 스마트폰을 보는 상황)까지 모두 포함한다.

내가 겪었던 일이다. 한참 서비스 개선 작업 중이었는데, 특정 버튼의 텍스트 색상과 배경색의 대비가 너무 낮아 시력이 좋지 않은 사용자나, 화면 밝기가 낮은 환경에서 이용하는 사용자들이 텍스트를 인지하기 어렵다는 피드백을 받았다. 그때 느꼈다. 내가 아무리 멋진 기능을 만들고, 최적의 UX를 설계해도, 색상 때문에 사용자가 정보를 제대로 얻지 못한다면 그 모든 노력이 수포가 된다는 것을.

PM으로서, 그리고 제품의 '최종 책임자'로서, 나는 다음과 같은 이유로 접근성을 최우선으로 고려해야 한다고 생각한다:

1. 더 넓은 사용자층 확보: 접근성을 개선하면 더 많은 사람이 우리 제품을 사용할 수 있게 된다. 이는 곧 비즈니스 기회 확대와 직결된다.
2. 법적 준수 및 기업 이미지: 많은 국가에서 웹 접근성 관련 법규를 시행하고 있다. 또한, 접근성을 중요시하는 기업은 긍정적인 이미지를 구축할 수 있다.
3. 뛰어난 사용자 경험: 접근성은 결국 모든 사용자의 경험을 개선하는 데 기여한다. 명확한 대비, 쉬운 탐색 등은 모든 사용자에게 이롭다.
4. 개발 효율성 증대: 처음부터 접근성을 고려하여 시스템을 설계하면, 나중에 수습하는 것보다 훨씬 효율적이다. '나중에 고치겠지'라는 생각은 결국 더 큰 비용으로 돌아온다.

접근성을 고려한 컬러 팔레트 설계하기

자, 그럼 어떻게 '접근성'을 고려한 컬러 팔레트를 만들 수 있을까? 여기서 'AI 도구'의 힘을 빌릴 때가 왔다. 복잡한 계산이나 규칙을 사람이 직접 하는 것은 비효율적이다. 우리는 도구를 똑똑하게 사용해야 한다.

1. 색상 대비(Contrast)는 생명이다.

가장 중요한 것은 텍스트와 배경색 간의 색상 대비다. WCAG(Web Content Accessibility Guidelines)에서는 AA 등급의 경우 4.5:1, AAA 등급의 경우 7:1 이상의 대비율을 권장한다. 이 숫자가 낮으면 텍스트가 배경색과 섞여 보이기 쉽다.

• 실전 팁: Figma, Sketch 같은 디자인 툴에는 내장된 컬러 대비 검사 기능이 있다. 또는 WebAIM Contrast Checker와 같은 온라인 도구를 활용하자. 디자인 초안 단계에서부터 이 도구를 습관적으로 사용하면, 나중에 큰 수정 없이 넘어갈 수 있다.

2. 정보 전달에 색상만 의존하지 마라.

색상만으로 정보를 전달하는 것은 위험하다. 색맹이나 색약인 사용자, 혹은 흑백 모니터를 사용하는 사용자에게는 정보가 전달되지 않는다. 예를 들어, 오류 메시지를 빨간색으로만 표시하는 것은 좋지 않다. 빨간색과 함께 아이콘(X 표시 등)이나 명확한 텍스트 설명을 함께 제공해야 한다.

• 실전 팁: **시맨틱 컬러(Semantic Colors)**를 디자인 시스템에 포함시키자. 예를 들어, 'Error' 상태는 단순히 빨간색이 아니라, 'Error-Light', 'Error-Dark', 'Error-Text' 와 같이 정의하고, 각 상태에 맞는 텍스트, 배경, 테두리 색상 조합을 명확히 정의한다.

3. HSL 기반의 '동적' 팔레트 구축

앞서 HSL이 직관적이라고 했다. 이를 활용하면 동적인 컬러 시스템을 구축할 수 있다. 브랜드의 메인 컬러를 HSL 값으로 정의하고, 이를 기반으로 채도와 명도를 조절하여 다양한 톤의 컬러를 자동으로 생성하는 것이다.

• AI 도구 활용: Paletton.com이나 Adobe Color 같은 도구를 활용하여 기본 색상을 기반으로 보색, 유사색, 삼색 배색 등을 생성할 수 있다. 더 나아가, Canva Color Palette Generator와 같은 AI 기반 도구는 이미지에서 색상 팔레트를 추출해주기도 한다. 물론, 여기서 생성된 팔레트가 바로 최종 결과물은 아니다. 반드시 색상 대비 검사를 통과하는지 확인해야 한다.
• 디자인 시스템과의 연동: PM으로서, 이러한 동적 팔레트 생성 규칙을 디자인 시스템에 명시적으로 문서화하는 것이 중요하다. "기본 컬러 (X, Y, Z)에서 채도 10% 감소, 명도 5% 증가는 (A, B, C) 컬러가 된다"와 같은 규칙을 정의해두면, 디자이너와 개발자 모두 일관성을 유지하며 작업할 수 있다.

4. '정보'와 '기능'에 대한 명확한 구분

모든 색상이 동등한 중요도를 가지는 것은 아니다. 어떤 색상은 단순히 미적인 요소를 위한 것이고, 어떤 색상은 사용자에게 중요한 '정보'를 전달하거나 '기능'을 수행한다. 접근성 측면에서는 후자에 더 집중해야 한다.

• 실전 팁: PM으로서, 주요 인터랙션 컬러, 정보 전달 컬러(에러, 성공, 경고 등), 브랜드 컬러 등을 명확히 구분하고, 각 카테고리별로 안전한 색상 대비율을 만족하는 팔레트를 우선적으로 확보해야 한다. 특히, 인터랙션이 필요한 요소(버튼, 링크 등)는 사용자가 명확하게 인지할 수 있도록 충분한 대비를 갖춰야 한다.

마무리하며: 컬러, 더 이상 '감'이 아니다.

디자이너 출신 PM으로서, 나는 디자인을 '감'이나 '느낌'으로만 접근해서는 안 된다고 늘 생각한다. 특히 AI 서비스처럼 복잡한 환경에서는 더욱 그렇다. 컬러 시스템은 단순히 예쁜 색을 고르는 것을 넘어, **사용자 경험, 브랜드 아이덴티티, 기술적 구현, 그리고 무엇보다 '접근성'**을 모두 아우르는 전략적인 결정이어야 한다.

HSL과 RGB를 이해하고, AI 도구와 명확한 규칙을 활용하여 접근성을 고려한 컬러 팔레트를 설계하는 것. 이것이 바로 우리가 더 많은 사용자에게 사랑받는 제품을 만들 수 있는 길이다. 다음번 디자인 미팅이나 개발 논의에서, '색깔 왜 이래?'라고 묻기 전에, '이 컬러 시스템은 접근성을 얼마나 고려했나요?'라고 질문할 수 있는 PM이 되자. 우리의 작은 질문 하나가 제품 전체의 사용자 경험을 바꿀 수 있다.

당신은 컬러 시스템 설계 시, 가장 중요하게 고려하는 요소는 무엇인가?