Asher

SEED Design의 컬러 팔레트 다시 설계하기 #1: 문제 분석하기

11 min read

SEED 디자인 시스템의 컬러 시스템은 오랜 기간 사용되었으나, 지속적인 피드백과 색상 시스템에 대한 이해도가 높아지면서 여러 문제점이 발견되었어요. 당근 디자인 시스템팀이 어떻게 SEED Design System의 컬러 팔레트를 재설계했는지 그 여정을 공유해요.

이번 글에서는 발견한 문제점들을 분석하고, 타사 사례 조사를 바탕으로 개선 가능한 방향을 제시하고, 이어서 SEED Design의 컬러 팔레트 다시 설계하기 2 - 문제 해결하기 에서 실제로 어떻게 개선했는지 소개해요.

문제 살펴보기

구분이 어려운 색상 단계

  • 구분이 어려울 정도로 유사한 구간이 있었어요.
    • red 500-700, carrot 500-700
  • 어떤 색을 써야 할지 판단하기 어렵고, 일관된 선택이 어려워 전반적인 시각적 통일성 하락으로 이어졌어요.

라이트 모드에서 충분히 어두운 색이 부족함

  • 콜아웃 배너와 같이 투톤으로 사용할 경우, 충분히 어두운 색이 부족해 뚜렷한 시인성을 제공하기 어려웠어요.

단계와 명도 사이의 일관성 부족

  • 동일한 단계라도 carrot, blue, red, …각각의 느낌이 많이 달랐어요.
  • 컴포넌트의 색상 variant를 만들 때 종종 다른 단계를 찾아야 하고, 학습하기 어려웠어요.
  • “기본 배경 위에서는 600부터 텍스트 색으로 사용 가능”과 같은 접근성 가이드를 제시하기 어려웠어요.

다크모드에서 충분히 어두운 배경색을 제공하지 않음

  • 다크모드에서 충분히 어두운 배경색이 존재하지 않아 투명도가 포함된 컬러 토큰을 높은 빈도로 사용하게 되었어요.
  • 디자인/구현 시에 컬러가 중첩되는 경우까지 고려해야 해 비용이 높아져요.
  • 라이트 모드를 기준으로 디자인 하는 경우가 많은데, blue-50과 blue-alpha-50을 의도치 않게 혼용하는 경우가 발생해요.

다크모드에서 밝은 색의 채도가 지나치게 낮음

  • 채도가 지나치게 낮아 회색이 섞인 느낌을 주며, 의미가 잘 드러나지 않게 되었어요.
  • 위의 “다크모드에서 충분히 어두운 색이 없는 문제”와 연관되어 콜아웃 배너의 텍스트 가시성을 확보하기 위한 시도로 추정되나, 실제로는 배경 색을 해결해야 할 문제였어요.

분석

분석 방법

Scale Color 팔레트를 Perceptually uniform(인지적으로 균일한) 색공간 위에서 명도, 채도 그래프를 그려보고, 타사 사례와 비교하며 각 사항에 대한 원인을 분석해 보았어요.

인지적으로 균일한 색공간?

  • RGB 색공간에서 정의되는 HSL은 동일한 Lightness를 가지더라도 Hue에 따라 실제로 인식되는 밝기가 달라지는 문제가 있었어요.
  • 사람이 색을 인식하는 방법에 대한 연구를 통해, 동일한 Lightness라면 서로 다른 Hue에서도 거의 동일한 밝기로 인식하는 방법들이 제시되었고, 이렇게 만들어진 색공간들을 인지적으로 균일한 색공간 (Perceptually Uniform Color Space)라고 불러요.
  • 이번에는 최근에 웹에 보급되기 시작한 OKLCH 색공간을 사용할거에요.
    • L: 명도(Lightness): 0-100% 범위
    • C: 채도(Chroma): 0-100% 범위
    • CSS의 OKLch는 100%=0.4로 계산하지만, 이번 분석에서는 100%=1로 계산하고 있어요.
    • H: 색상(Hue): 0-360 범위 (각도)

구분이 어려운 색상 단계

  • 단계에 따른 명도 변화량이 500-700 구간에서 적게 나타나고 있어요. 특히 carrot, red에서 두드러지고 있어요.
  • 반대로, 400-500 구간의 간격이 넓어 인터랙션에 따른 색 변화가 너무 크게 느껴질 때도 있었어요.
  • 타사 사례에서는 각 단계별 명도 차이가 인지하기에 충분할 정도로 넓게 구성하고 있어요.

더 어두운 색이 필요하며, 단계별 일관성이 부족함

  • 500 이후로 carrot과 다른 스케일의 명도 진행에 큰 차이를 보이고 있어요.
    • 배경/텍스트를 똑같이 100/900으로 매칭해도 carrot과 다른 색들의 결과가 달라져요.
  • carrot은 950의 명도가 49%, 나머지는 33-39% 가량으로 이루어져 있는데, 투톤으로 사용할 때 충분히 어두운 색을 표현하지 못할 수 있어요.
  • 타사 사례에서는 가장 어두운 단계의 명도를 30% 이하로 낮게 구성하는 것이 일반적이에요.

다크모드에서 충분히 어두운 배경색을 제공하지 않음

  • 가장 어두운 색이 낮게는 32%, 높게는 42%의 명도를 가지고 있어 Callout, Button등의 컴포넌트 배경색으로 사용할 때 의도한 것 이상으로 주목을 끌거나, 텍스트와 밝기 대비가 충분하지 않은 문제가 있었어요.
    • 이런 문제들을 우회하기 위해 그동안은 투명도를 포함한 색상을 많이 사용해왔지만, 투명도에 의존하는 것은 배경 색의 영향을 같이 받게 되는 문제가 있었고, 의도한 색을 표현하는 데 지장이 있었어요.
  • 타사 사례에서는 다크모드에서 가장 어두운 색상을 23-28% 정도의 명도를 가지도록 구성하는 것이 일반적이에요.

다크모드에서 밝은 색의 채도가 지나치게 낮음

  • 950에서의 채도가 낮아(blue 제외 1-2%) 회색이 섞인 느낌을 주고 있어요.
  • 타사 사례에서는 가장 밝은/어두운 색에서도 최소 3-4%의 Chroma(채도)를 가지도록 구성하는 것이 일반적이에요.

타사 디자인 시스템 사례 분석

Adobe, Github, IBM의 컬러 시스템을 동일한 방식으로 분석해 보았어요.

라이트 모드

Adobe Spectrum

Github Primer

IBM Carbon

  • 특성은 조금씩 다르지만, 공통적으로 모든 스케일에 대해 동일한 명도 진행을 보이고 있어요.
  • 가장 어두운 단계의 명도를 충분히 낮게(30% 이하로) 잡고 있어요.

Dark Mode

Adobe Spectrum

Github Primer

  • 가장 어두운 단계의 명도를 충분히 낮게 (29% 이하로) 잡고 있어요.
  • 최소 Chroma(채도)를 너무 낮지 않게 (3-4% 이상으로) 잡고 있어요.
  • Chroma가 완만한 포물선을 그리도록 구성되어 있어요.

개선 가능한 부분

명도 진행의 일관성 확보

  • 모든 스케일이 동일한 명도 진행을 가질 수 있도록 한다.
  • 각 단계별로 명도 간격이 인지하기에 충분히 넓어야 한다.
  • 단계별 간격은 동일하지 않고, 낮은 대비에서는 높은 대비에서보다 좁은 간격을 가진다. (스티븐스 멱법칙)

충분히 어두운 색 제공

  • 모든 스케일이 충분히 어두운 색을 가질 수 있도록 한다.
  • 라이트 모드의 950 기준, 30% 이하의 명도를 제공한다. (OKLch 기준)
  • 다크 모드의 50 기준, 30% 이하의 명도를 제공한다. (OKLch 기준)

적용 예시

색조를 최대한 유지하면서, 타사 사례와 유사하게 단계별 명도를 조정한 예시를 만들어 보았어요.

각 단계별 색의 구분이 쉬워지고, 각 케이스별로 적합한 색을 결정하기 쉬워져요.

라이트, 다크모드 모두 충분히 어두운 색을 표현할 수 있어요.

  • 투명도를 사용하지 않아도 다크모드에서 충분히 주목도 낮은 색을 얻을 수 있어요.

적용 예시를 통해, 개선 방향성을 확인할 수 있었어요. 이어서 SEED Design의 컬러 팔레트 다시 설계하기 2 - 문제 해결하기 에서 실제로 어떻게 개선했는지 소개해요.

참고자료

그래프 뷰

백링크