디자이너를 위한 데이터 시각화 - 2편
Adobe Spectrum으로 배우는 데이터 시각화
✦ 디자이너를 위한 데이터 시각화 - 1편에서 나온 개념을 참고하시면 좋습니다 ✦
Adobe Spectrum's Data Visualization 下
Part 2. Colors
색상 유형의 분류
1. 범주형 색상 (Categorical colors)
범주형 색상은 사용자가 숫자와 연관되지 않는 값들을 표현하는데 유용합니다. 각각의 색상이 특정한 의미나 카테고리를 나타내게끔 합니다. 이 색상들은 서로 명확하게 구분될 수 있도록 설계되었고, 색각 장애가 있는 사용자들도 쉽게 구분할 수 있도록 만들어졌습니다.
출처 : adobe spectrum2. 순차형 색상 (Sequential colors)
순차적 색상은 밝은 색에서 어두운 색으로 변화하는 그라데이션 팔레트로 숫자적인 의미를 표현하는데 유용합니다. Spectrum에서는 Viridis, Magma, Rose, Cerulean, Forest의 다섯가지 팔레트를 제시합니다.
이 색상 팔레트 중 Viridis와 Magma는 통계 분석 및 데이터 시각화에 사용되는 [R]에서 사용되는 팔레트입니다. 해당 팔레트에 더 알고싶으시다면 해당 사이트를 참고해보세요.
출처 : adobe spectrum3. 발산형 색상 (Sequential colors)
발산형 색상은 가운데에서 만나는 두가지 색상의 그라데이션 팔레트로, 두가지 극단을 가지고 있는 데이터를 표현하는데 유용합니다. Spectrum에서는 Orange-Yellow-Seafoam, Red-Yellow-Blue, Red-Blue 세가지의 팔레트를 제시합니다.
출처 : adobe spectrum주요 색상 유형 사용 가이드라인
어도비 스펙트럼에서는 색상 제시 이후에 실제로 색상을 시각화에 어떻게 적용해야하는지 가이드라인을 제시하고 있습니다. 다양한 가이드라인 중에서 디자이너가 놓치기 쉬운 범주형 색상에 대한 항목을 좀 더 자세히 살펴보겠습니다.
범주형 색상은 특정 상황에서만 사용합니다.
각 항목에 서로 다른 색상을 부여하여 구분하는 대신, 색상을 부차적 차원을 표현하는 데 사용하세요. 가능하면 값의 종류가 적은 차원이면 좋습니다. 단, 동일한 범주에 대해 색상을 사용하는 다른 차트와 함께 사용되는 경우는 예외입니다.
좌측의 차트는 스펙트럼에서 좋은 예시로 보여주고 있는 사례입니다. 이 차트는 현재 하나의 차원(Dimension, Y축의 브라우저)과 하나의 측정값(Metric, X축의 방문객 수)으로 구성되어 있습니다. 해당 차트에서는 차원을 모두 동일한 색상으로 나타내고 있습니다.
우측의 차트는 두개의 차원과 하나의 측정값으로 구성되어 있습니다. 해당 차트에서 주요 차원(Primary Dimension, Y축의 브라우저)은 특정한 색상값을 가지지 않고, 부차적 차원(Secondary Dimension, 상단의OS)이 색상값을 가지게됩니다. 여기서 주요 차원은 4개의 항목, 부차적 차원은 3개가 존재하며 색상을 최대한 적게 사용하기 위해 항목이 적은 차원을 부차적 차원으로 사용하여 시각화하는 것이 이상적인 방법입니다.
하나의 차원을 시각화할때는 하나의 색상만을 사용하고, 두개 이상의 차원을 시각화 할때는 색상을 통해 부차적 차원을 표현하는 방식을 통해 시각적 일관성을 유지하고, 데이터의 집중도를 향상시킬 수 있습니다.
결론
지금까지 Adobe Spectrum의 데이터 시각화 가이드라인을 통해 어떻게 데이터를 분류하고 어떤 색상스킴을 사용해 각 스케일별로 시각화를 진행해야하는지 배워보았습니다. 이를 통해 디자이너는 시각적 명확성과 접근성을 동시에 고려한 데이터 시각화를 구현할 수 있습니다.
더욱 자세한 정보는 Adobe Spectrum 공식 사이트를 확인해보시길 바랍니다.
