데이터 시각화의 색상: 차트, 그래프 및 지도

데이터 시각화의 색상은 장식이 아닙니다. 위치, 길이, 크기와 마찬가지로 정보를 전달하는 채널인 인코딩입니다. 컬러를 잘 활용하면 보는 사람은 패턴을 단번에 파악하게 된다. 부주의하게 사용하면 차트는 청중 전체를 오도하거나 혼란스럽게 하거나 배제하게 됩니다.

이 가이드에서는 세 가지 표준 색상 스케일 유형, 색맹이 데이터 시각화 결정을 어떻게 바꾸는지, 견고한 작업을 훼손하는 가장 일반적인 실수를 다룹니다.

색상이 강력하면서도 위험한 인코딩인 이유

지각 연구에서 연구된 사전 주의적 시각적 특성 중에서 색상은 원시 속도를 가장 잘 나타냅니다. 시청자는 의식적인 검색 없이 밀리초 내에 수천 개의 산점도에서 뚜렷한 색상의 지점을 감지합니다. 이 힘은 실제적이지만 제약이 따른다.

색상은 다음과 같은 경우에만 정보를 효과적으로 인코딩합니다.

1. 시청자는 인코딩된 값을 구별할 수 있습니다.
2. 인코딩은 직관적입니다(임의적이지 않음).
3. 색상 선택은 다양한 시청 조건(인쇄, 프로젝터, 색맹)에도 적용됩니다.

이 중 하나라도 위반하면 색상은 유용한 신호가 되지 않고 노이즈가 되기 시작합니다. 아래 척도 유형은 이러한 각 제약 조건에 대한 구조화된 응답입니다.

순차적 색상 스케일: 밝은 것부터 어두운 것까지

순차적 척도는 일반적으로 낮은 값에서 높은 값으로, 희소한 값에서 밀도가 높은 값으로 한 방향으로 이동하는 데이터를 나타냅니다. 정의적인 특징은 밝기와 때로는 채도가 달라지는 단일 색상입니다.

순차적 스케일의 작동 방식

순차적 스케일은 가장 밝은 색조를 가장 낮은 데이터 값에 고정하고 가장 어두운 색조를 가장 높은 데이터 값에 고정합니다. 모든 중간 값은 해당 연속체를 따라 비례적으로 배치된 색상을 받습니다.

지리적 인구 밀도에 대한 실용적인 단일 색상 순차 척도:

이 인코딩은 직관적입니다. 파란색이 많을수록 더 많은 것을 의미합니다. 색상 구별이 아닌 휘도에 따라 작동하기 때문에 색상 인식이 있는 시청자는 눈금을 읽을 수 있습니다.

실무 지침

• 순차적 컨텍스트에서 무지개(스펙트럼) 그라데이션을 피하세요. 스펙트럼 그라데이션(빨간색에서 주황색, 노란색, 녹색에서 파란색)은 색상 경계에 잘못된 가장자리를 만듭니다. 중간점 주변에서 노란색에서 녹색으로 갑자기 이동하는 것은 데이터에 존재하지 않는 범주형 구분을 나타냅니다. 인지적으로 균일한 순차 팔레트(예: OKLCH 또는 CIELAB에서 파생된 팔레트)는 이 아티팩트를 방지합니다.
• 지각적으로 균일한 진행을 사용합니다. 균일이란 데이터의 동일한 단계가 동일한 모양의 색상 단계를 생성한다는 것을 의미합니다. 균일하지 않은 진행은 특정 값 범위를 지나치게 강조합니다.
• 포화 끝점, 불포화 원점. 약간 포화된 흰색에 가까운 원점과 완전히 포화된 어두운 끝점은 가장 넓은 인식 범위를 제공합니다.

팔레트 생성기의 기본 색상에서 시작하고 이를 색조 생성기와 결합하여 부드러운 단계를 보장함으로써 단일 색상 순차 스케일을 구축할 수 있습니다.

다양한 색상 척도: 두 개의 색조 끝점

발산하는 척도는 의미 있는 중간점이 있는 데이터를 나타냅니다. 해당 중간점 위와 아래의 값이 양적으로만 다른 것이 아니라 개념적으로 다른 경우 발산하는 척도로 인해 두 절반이 동시에 표시됩니다.

발산 척도를 사용해야 하는 경우

클래식 사용 사례는 다음과 같습니다.

• 선거 결과: 공화당이 유리한 경우 빨간색, 민주당이 유리한 경우 파란색, 50/50 분할인 경우 중립 보라색 또는 흰색
• 재무 성과: 손실은 빨간색, 이익은 녹색, 손익분기점은 중립
• 기온 이상: 평균 이하인 경우 파란색, 평균 이상인 경우 빨간색, 역사적 표준인 경우 흰색
• 감정 점수: 부정적인 감정에서 긍정적인 감정으로, 중심은 중립입니다.

다양한 규모 설계

발산 스케일에는 세 개의 앵커, 즉 두 개의 색조 끝점과 중립 중심이 필요합니다.

설문조사 만족도 척도의 예(매우 불만족 → 보통 → 매우 만족):

중립 중심은 거의 무채색(연한 회색 또는 황백색)이어야 합니다. 그래야 중간점 양쪽의 값이 별개의 범주로 읽혀집니다.

함정

• 양쪽의 지각 범위가 동일하지 않습니다. 빨간색과 녹색은 동일한 채도 수준에서 시각적 강도가 동일하지 않습니다. 도구를 사용하여 두 개의 극단 끝점이 숫자상으로만 등거리가 아니라 중립에서 지각적으로 등거리에 있는지 확인하세요.
• 색맹인 시청자를 위해 붕괴되는 색상 쌍 선택. 빨간색-녹색 발산 스케일이 가장 일반적인 원인입니다. 이에 대해서는 아래의 색맹 섹션에서 자세히 다룹니다.

범주형(질적) 색상 척도: 뚜렷한 색상

범주형 척도는 명목 데이터, 즉 고유한 순서가 없는 범주를 인코딩합니다. A 국가는 B 국가보다 높지도 낮지도 않습니다. 그것은 단지 다를 뿐입니다. 이를 위해서는 묵시적인 순서나 계층 없이 가능한 한 서로 지각적으로 구별되는 색상이 필요합니다.

좋은 범주형 팔레트의 원칙

최대 지각 거리. 색상은 클러스터되지 않고 색상환 주위에 분산되어야 합니다. 파란색 3개, 녹색 2개, 보라색 1개를 사용하는 팔레트는 보는 사람이 비슷한 색상을 혼동하기 때문에 작동하지 않습니다.

명도는 대략 동일합니다. 일부 범주는 밝고 다른 범주는 어두우면 더 중요하지 않더라도 어두운 범주가 시각적으로 지배적입니다. 모든 범주 색상에서 유사한 휘도를 목표로 합니다.

범주는 7~10개 이하, 이상적으로는 그보다 적습니다. 인간의 단기 기억은 대략 7개의 청크를 보유합니다. 시청자에게 7개 이상의 서로 다른 색상과 카테고리 간의 연관성을 추적하도록 요청하면 차트를 약화시키는 인지적 부담이 가해집니다. 15개 국가가 있는 경우 색상이 올바른 인코딩인지 다시 생각해 보세요.

균형 잡힌 6색 범주형 팔레트:

파란색, 빨간색, 녹색, 호박색, 보라색, 주황색은 색상환 주위에 넓게 퍼져 있으며 비슷한 밝기 값을 갖습니다.

범주형 팔레트 테스트

마무리하기 전에 다음과 같은 경우 팔레트가 작동하는지 확인하세요.

• 흑백으로 인쇄됨(휘도 유사성을 확인해도 구별이 없어지지 않음)
• 범례에서 작은 크기로 표시됨
• 색맹이 있는 사람이 시청함(아래 참조)

세 번째 테스트는 색맹 시뮬레이터에서 처리합니다.

데이터 시각화의 색맹

남성의 약 8%, 여성의 0.5%가 어떤 형태로든 유전성 색각 이상을 갖고 있습니다. 50명의 일반적인 직장 청중에서 3~4명의 시청자는 색상을 다르게 경험할 가능성이 높습니다. 공개 시각화에서는 그 숫자가 무시할 수 없습니다.

Dataviz와 가장 관련성이 높은 유형

Deuteranopia / Deuteranomaly: 녹색에 대한 민감도가 감소했습니다. 가장 흔한 형태입니다(남성의 ~5%). 빨간색과 녹색은 색상이 비슷해 보입니다. 구별은 황갈색-회색 범위로 무너집니다.

Protanopia / Protanomaly: 빨간색에 대한 민감도가 감소했습니다. 덜 일반적입니다(남성의 ~1%). 빨간색은 더 어둡고 채도가 낮아 보입니다. 적록혼란이 발생합니다.

삼맹증: 드물게(~0.001%). 파란색-노란색 혼란. 거의 영향을 미치지 않지만 파란색이 기본 범주 색상인 경우 관련성이 높아집니다.

적록 재해

가장 일반적인 데이터 시각화 색맹 오류는 재무 데이터, 지도 및 상태 표시기에 지속적으로 사용되는 빨간색-녹색 발산 눈금입니다. Deuteranopic 및 Protanopic 뷰어의 경우 두 가지 색조 끝점이 거의 동일한 갈색 또는 올리브 톤으로 축소됩니다. 차트는 남성 시청자의 약 6%에게 정보를 거의 전달하지 않습니다.

대안:

빨간색-녹색을 다음으로 바꾸십시오.

• 청색-주황색(#1D4ED8 ~ #EA580C): 모든 일반적인 색각 유형에서 널리 구별 가능
• 보라색-녹색(#7C3AED ~ #059669): 녹색맹 및 녹색맹에서도 강력함
• 밝기 차이가 강한 빨간색-파란색: 밝기 대비가 충분히 강한 경우 대부분의 양식에서 작동합니다.

신호등(빨간색-노란색-녹색) 상태 표시기에도 동일한 문제가 있습니다. 기본 인코딩을 모양과 레이블로 바꾸고, 색상을 보조 중복 신호로 사용하세요.

색맹 견고성을 위한 설계 전략

1. 색상 대비뿐만 아니라 휘도 대비를 사용합니다. 밝기가 크게 다른 색상은 휘도 인식이 대부분 보존되기 때문에 대부분의 색맹 유형에서도 구별할 수 있습니다.

2. 중복 인코딩을 추가하세요. 색상에만 의존하지 마세요. 사용:

3. 꺾은선형 차트의 다양한 선 스타일(실선, 점선, 점선)
4. 산점도의 다양한 점 모양
5. 데이터 계열에 대한 직접 레이블

6. 막대 차트의 해칭 또는 패턴

7. 시뮬레이터로 테스트하세요. 게시하기 전에 색맹 시뮬레이터를 사용하여 듀테라노픽, 프로타노픽, 트리타노픽 필터를 통해 팔레트를 확인하세요.

8. 확립된 접근 가능한 팔레트를 사용하십시오. Wong(2011)은 색맹 견고성을 위해 특별히 설계된 8가지 색상 팔레트(검은색, 주황색, 하늘색, 청록색, 노란색, 파란색, 주홍색 및 붉은 보라색)를 발표했습니다.

모범 사례 및 일반적인 실수

모범 사례

척도 유형을 데이터 유형과 일치시킵니다. 순서가 지정된 연속형 데이터의 경우 순차입니다. 의미 있는 중심을 가진 데이터에 대한 분기. 정렬되지 않은 명목 데이터에 대한 범주형입니다. 이를 혼합하면(범주형 데이터에 대해 순차적 척도 사용) 오해를 불러일으키는 암시적인 순서가 생성됩니다.

가장 중요한 데이터에 가장 어두운 색상을 배치하세요. 값이 어두울수록 더 많은 관심을 끌 수 있습니다. 가장 높은 값이 가장 실행 가능한 경우 이를 순차적 척도의 어두운 끝에 고정하면 시각적 주의를 데이터 우선순위에 맞추게 됩니다.

배경을 고려하세요. 흰색, 회색, 어두운 배경에서는 색상이 다르게 나타납니다. 흰색 배경에 디자인된 저울은 회색 대시보드에서는 밋밋하거나 탁해 보일 수 있습니다. 실제 배경에서 테스트해 보세요.

관련 차트 전체에 일관된 배율을 사용합니다. 대시보드의 세 차트가 모두 판매 수치를 표시하는 경우 동일한 측정항목에 대해 동일한 색상 배율을 사용합니다. 불일치로 인해 시청자는 모든 전설을 다시 읽게 됩니다.

범례를 데이터에 가깝게 유지하세요. 범례가 멀수록 시청자가 색상을 해독하기 위해 더 많은 인지 작업을 수행해야 합니다. 직접 레이블은 범례 조회를 완전히 제거합니다.

일반적인 실수

연속 데이터에 대한 무지개 척도. 위에서 언급한 것처럼 스펙트럼 그라데이션은 잘못된 지각 가장자리를 도입하고 데이터를 왜곡합니다. 지각적으로 균일한 단일 색상 스케일이 거의 항상 우수합니다.

색상을 유일한 인코딩으로 사용. 회색조로 변환할 때 차트가 완전히 실패한다면 차트가 색상에 과도하게 의존하고 있는 것입니다. 모양, 위치 또는 직접 레이블을 추가합니다.

범주 색상이 너무 많습니다. 범례에 7~8개 이상의 고유 색상이 있다는 것은 더 큰 팔레트가 필요하다는 의미가 아니라 데이터를 재구성해야 한다는 신호입니다.

지도 채우기의 색상 대비가 낮습니다. 지리 지도는 작은 다각형 크기에서 다양한 색상을 동시에 표시합니다. 단독으로 뚜렷하게 보이는 색상은 지도 축척에서 구별하기가 매우 어려울 수 있습니다. 실제 디스플레이 크기로 테스트합니다.

프로젝터 효과를 무시합니다. 프로젝터는 색상을 상당히 바래게 합니다. 화면에서 아름답게 읽히는 팔레트는 회의실 프레젠테이션에서 모든 중간 범위 구별을 잃을 수 있습니다. 대비 버퍼를 추가합니다.

인쇄 시 색상만 사용하여 인코딩합니다. 인쇄는 화면과 다르게 색상을 재현할 수 있으며 인쇄 자료에 대한 접근성도 마찬가지로 중요합니다. 그레이스케일 인쇄를 염두에 두고 디자인하세요.

주요 내용

• 하나의 극단이 무언가의 "더 많은" 것을 의미하는 순서가 지정된 연속 데이터에는 순차 척도(밝은 색에서 어두운 색, 단일 색상)를 사용합니다.
• 재정적, 정치적, 기준선과의 편차 등 의미 있는 중간점이 있는 데이터에는 발산 척도(두 개의 색상 끝점, 중립 중심)를 사용합니다.
• 묵시적인 순서가 없는 명목 데이터에는 범주형 척도(지각적으로 구별되는 색상)를 사용합니다. 최대 7~10개의 카테고리로 제한됩니다.
• 순차 데이터에 대한 무지개 그라데이션을 피하세요. 잘못된 가장자리와 오해의 소지가 있습니다.
• 남성의 약 6~8%가 빨간색-녹색 인코딩에 실패합니다. 파란색-주황색 또는 보라색-녹색 분기 쌍으로 교체합니다.
• 게시하기 전에 색맹 시뮬레이터로 모든 팔레트를 테스트하세요.
• 중복 인코딩(모양, 레이블, 선 스타일)을 추가하여 색상이 실패해도 시각화를 계속 읽을 수 있도록 합니다.
• 팔레트 생성기를 사용하여 특정 데이터 유형에 대한 색상 팔레트를 구축하고 평가합니다.