차트 및 대시보드 시각적으로 강조하기

차트 및 대시보드 디자인을 설계할때, 대시보드에서 시각적으로 강조하기 위해서는 '시각적인 대비' 를 어떻게 줄지에 대해 신경을 써야한다. 시각적인 요소를 활용해서 대시보드를 보는 사람이 명확하고 단순하게, 그리고 빠르게 의미를 파악할 수 있도록 해야한다.

https://seaforest76.tistory.com/29

대시보드 기획 및 설계

 

1. 색상

적합한 색상을 사용하여 대시보드를 만들면, 보다 효과적으로 인사이트를 전달할 수 있다. 예를 들어 '증가'를 나타낼 때 빨간색을 사용하고, '감소'를 나타낼 때 파란색을 사용하면 한눈에 증감을 확인할 수 있다. 잘 선택된 색상은 사용자가 대시보드를 보고 인사이트를 얻는 시간을 줄일 수 있고, 메세지를 빠르게 이해할 수 있게 되기 때문에 사용자의 효율성이 향상된다.

(1) 일관된 색상 사용

- 기본 색상 3개 or 보조 색상 2개 정도 선택하는게 좋음 (전체적인 대시보드 톤의 통일성 중요)

- 브랜드를 잘 나타내는 색상이 있다면 해당 브랜드의 색상 사용

- 일관성 있는 색상을 사용해야함 (증가는 빨강, 감소는 파랑으로 표시했다면 모든 증감을 빨강/파랑으로 표현해야함)

 

(2) 색상 파레트

- 단일 색상(그라데이션) :  값의 높고 낮음을 한눈에 확인 가능

- 보색 : 정반대의 색상을 사용해서 강한 대비 표현 가능

- 범주형 : 여러가지 색상을 사용해서 카테고리 구분 가능

 

(3) 상황별로 많이 쓰이는 색상

- 빨강 : 증가하는 경우, 성능이 좋지 않거나 상대적으로 약한 포인트를 강조하기 위해 사용

- 녹색 : 긍정적인 성장, 상향 추세 등에 사용

- 파란색 : 감소하는 경우 

- 노란색 : 보통인 경우

 

(4) 예시

- 색으로 값의 높고 낮음을 한눈에 확인 가능

 

- 색상으로 상위 매출 월과 하위 매출 월 한눈에 확인 가능

- 색상으로 매출의 많고 적음을 한 눈에 확인 가능

 

(5) 색상 참고 사이트

- color drop

https://colordrop.io/

ColorDrop

- adobe color

https://color.adobe.com/ko/explore

https://color.adobe.com/ko/explore

 - color hunt

https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt

- Tableau Public : Datafam Colors by Ken Flerlage

https://public.tableau.com/app/profile/ken.flerlage/viz/DatafamColors/StartPage

Datafam Colors

 

2. 기준선 사용

기준선을 사용하면 정보 전달력을 높일 수 있다. 예를 들어 할인율이 15% 이상인 제품군을 찾을때, 기준선이 없다면 눈으로 모두 확인해야하지만, 기준선(ex. 할인율 15%)을 추가하면 한눈에 확인 가능하고, 색상으로 구분까지 하면 더 빠르게 확인 가능하다. 

 

3. 크기 대비

크기로 차트에서 전달하려고 하는 내용을 극대화 할 수 있다. 

 

4. 차트 활용

- 달성률, 할인율 등을 표현하는 경우 (2개의 막대차트 활용)

 

5. 모양

 모양을 잘 활용하면 보다 직관적인 대시보드를 만들 수 있다. 

- 증가와 감소를 ▲,▼로 표시하는 경우

- 성별을 텍스트만으로 표시하는게 아니라 이미지로 같이 표시하는 경우