지난 1편에서는 SEED 디자인 시스템의 컬러 팔레트가 가진 문제점들을 자세히 살펴보았는데요. 이번 글에서는 우리가 어떻게 이러한 문제들을 해결했는지, 그 과정과 결과를 공유하려고 해요.
문제점 요약
- 구분이 어려운 색상 단계
- 라이트 모드에서 충분히 어두운 색이 부족함
- 단계와 명도 사이의 일관성 부족
- 다크모드에서 충분히 어두운 배경색을 제공하지 않음
- 다크모드에서 밝은 색의 채도가 지나치게 낮음
여러 문제점이 있지만, 공통적으로 “일관된 체계와 제약조건” 없이 팔레트를 구축했기 때문에 발생한 문제라고 생각해요. 따라서, 이번 팔레트 재설계에서는 이러한 문제점들을 해결하기 위해 체계적인 접근 방식을 설계하고 실행했어요. 먼저, 문제 분석을 통해 새로운 팔레트가 반드시 지켜야 할 중요한 특성을 정의했어요.
원칙
모든 스케일은 동일한 명도 진행을 가져야 한다.
색상 시스템의 일관성을 위해서는 모든 색상 스케일(red, blue, carrot 등)이 동일한 명도 진행을 가져야 해요. 이는 인지적으로 균일한 색공간에서 평가되어야 하며, 각 단계(100-900)에서 모든 색상이 유사한 명도값을 가져야 해요. 이렇게 일관성을 유지하면 더 많은 것이 예측 가능해지고, 앞으로 팔레트를 지속적으로 개선하기에도 유리해요. 예를 들어, 색상 단계를 추가하거나 제거할 때 모든 스케일을 따로 고려할 필요가 없어져요. 또, “기본 배경색 위에 600 이상은 접근성 대비를 충족한다”와 같은 일관된 지침을 제공하기 쉬워져요.
모든 색상 단계는 충분한 인지 차이를 가져야 한다.
각 색상 단계 사이에는 사용자가 명확하게 구분할 수 있는 충분한 인지적 차이가 있어야 해요. 특히 인터랙션 상태를 표현하는 인접한 단계들(예: 400-500, 500-600) 사이에서는 더욱 중요해요.
테마가 변경되어도 색상의 특성을 유지해야 한다.
라이트 모드 배경색 위에서의 red-900과 다크 모드 배경색 위에서의 red-900은 동일한 시각적 인지도를 가져야 해요.
라이트모드에서 가장 어두운 색상의 명도는 30% 이하여야 한다. (OKLch 기준)
타사 사례 분석 결과, 가장 어두운 단계(900-950)의 명도를 30% 이하로 설정하는 것이 일반적이에요. 이는 투톤으로 사용할 때 충분한 대비를 확보하고, 시각적 계층 구조를 명확하게 표현하기 위해 필요해요.
다크모드에서 가장 어두운 색상의 명도는 30% 이하여야 한다. (OKLch 기준)
다크모드에서도 마찬가지로 가장 어두운 단계의 명도를 30% 이하로 설정했어요. 이는 투명도에 의존하지 않고도 충분히 어두운 배경색을 제공하기 위함이에요.
의도된 모든 배경/전경 조합에 대해 접근성 기준을 충족해야 한다.
모든 의도된 배경/전경 색상 조합은 접근성 기준을 충족해야 해요. 기존 디자인 시스템에서는 접근성 기준을 충족하지 못하는 컴포넌트를 제공해 사용자 경험을 저해하는 경우가 있었어요. 이번 팔레트 재설계 및 디자인 시스템 개선에서는 접근성을 필수 요구사항으로 설정했어요.
구현
우리는 Github Primer의 Prism 도구를 활용해 팔레트를 설계했어요.
(Prism 도구에 대한 간단한 소개 및 스크린샷)
1. 기준 Lightness 커브 설정
Blue 스케일을 기준으로 라이트 모드의 명도 커브를 다음과 같이 정의했어요:
- 100: 95% (가장 밝은 색상)
- 200: 90%
- 300: 82%
- 400: 72%
- 500: 60%
- 600: 48%
- 700: 38%
- 800: 30%
- 900: 25% (가장 어두운 색상)
이 커브는 스티븐스 멱법칙을 반영하여 낮은 대비에서는 좁은 간격을, 높은 대비에서는 넓은 간격을 두어 인지적으로 균일한 변화를 만들어내요.
2. 라이트모드 초안 생성
정의된 명도 커브를 기반으로 다음 과정을 통해 전체 컬러 스케일을 생성했어요:
(TBD)
3. 이터레이션
초안에서 시작해, 디자인 시스템 라이브러리에 적용 및 피드백을 반복했어요.
- 모든 컴포넌트 및 디자인 시안이 심미적으로 만족스러운가?
- 의도된 모든 배경/전경 조합이 접근성 기준을 충족하는가?
이 과정에서 접근성 기준에서 예상치 못한 문제를 발견했어요. 당근의 브랜드를 나타내는 #FF6600 배경에 #FFFFFF 텍스트를 사용하는 것의 WCAG 대비가 2.93:1로 계산되었어요. Success Criterion 1.4.3 Contrast (Minimum)에서 요구하는 4.5:1 은 커녕, Large Text에서 요구하는 3:1 대비도 충족하지 못했어요.
하지만, 실제로 사용자 경험을 고려한 다른 사례를 더 찾아보기로 했어요.
20명의 색맹 사용자를 대상으로 한 Ericka O’Connor의 연구에 따르면, 오렌지색 배경(#E86826)의 버튼에서 WCAG 기준 검은색 텍스트(6.44:1)가 흰색 텍스트(3.26:1)보다 계산적으로 높지만, 실제 사용자 테스트에서는 61%가 흰색 텍스트를 더 읽기 쉽다고 응답했어요. 색맹 유형에 따라 선호도 차이가 나타났는데, protanopia(적색맹) 사용자의 71%는 흰색 텍스트를 선호한 반면, deuteranopia(녹색맹) 사용자들은 50:50으로 의견이 나뉘었다고 해요.
WCAG 2.0 대비율과 실제 사용자 경험 간의 불일치를 고려해, 우리는 더 정확한 접근성 평가를 위해 APCA(Advanced Perceptual Contrast Algorithm) 알고리즘을 적용해 보기로 했어요.
APCA 색상 대비 알고리즘
APCA는 인간의 시각적 인지 방식에 기반한 현대적인 색상 대비 평가 방법이에요. 기존 WCAG 2.0과 달리 다음과 같은 특징을 가져요:
- 텍스트 크기와 두께를 고려한 차등적인 대비 요구사항
- 낮은 명도에서 더 민감하고 높은 명도에서 덜 민감한 인간의 시각 특성 반영
- 범위 기반의 점수 시스템으로 디자인 유연성 제공
- 특히 다크 모드와 포화된 색상에서 더 정확한 가독성 예측
접근성 검증 Figma 위젯 개발
이터레이션을 반복하면서 APCA 점수를 매번 확인하는 것은 반복적이고 귀찮은 작업이었어요. 이를 효율적으로 해결하고 팀원 모두의 이해도를 높이기 위해, 접근성 검증 Figma 위젯을 개발했어요.
의도된 모든 배경/전경 조합에 대한 APCA 점수를 한눈에 보여주는 것으로, “텍스트가 읽혀야 하는” 조합에서 60점 미만이 나오는 경우와 같은 문제를 쉽게 파악할 수 있었어요.
4. 다크모드
다크모드 팔레트는 다음 원칙을 따라 설계했어요: (TBD)
적응형 컬러 팔레트
적응형 컬러 팔레트는 라이트 모드와 다크모드 모두에서 일관된 색상 경험을 제공하기 위해 설계되었어요. 이는 디자인 시스템의 확장성을 높이고, 모든 사용자에게 일관된 시각적 경험을 보장해요. (TBD)
결과
주요 개선 사항
-
일관된 시각적 경험 제공
- 모든 컬러 스케일에서 일정한 명도 진행
- 예: Blue-100/800과 Red-100/800의 대비가 동일하게 유지
-
접근성 대폭 향상
- 충분한 색상 범위로 가독성 확보
- 다크 모드의 알파 투명도 의존도 제거
-
작업 효율성 증가
- 컴포넌트 색상 Variant 제작 시간 단축
- 일관된 접근성 기준 적용
핵심 교훈
-
과학적 접근의 가치
- 인지적으로 균일한 색공간 활용으로 예측 가능한 결과
- APCA를 통한 정확한 가독성 평가
- 명도 커브를 통한 체계적인 색상 생성
-
이론과 실제의 균형
- WCAG 기준을 넘어선 실제 사용성 고려
- 사용자 경험 기반 검증의 중요성
-
시스템적 사고의 필요성
- 개별 색상이 아닌 전체 관계성 고려
- 일관된 명도 커브로 통합적 해결
마치며
이번 컬러 팔레트 재설계를 통해 우리는 단순히 문제를 해결하는 것을 넘어, 더 체계적이고 과학적인 접근 방식의 중요성을 배웠습니다. 앞으로도 SEED 디자인 시스템은 사용자 경험과 접근성을 최우선으로 고려하며 발전해 나갈 예정입니다.