[Tableau 신병훈련소 26기][학습]9일차_대시보드

1. 명확한 대시보드 목표 설정

잘 만든 대시보드의 시작은 대시보드 설계의 목적을 명확히 하는 것에서 출발합니다. 대시보드를 만들기 전에, 다음 세 가지 질문에 대해 답할 수 있는지 확인하세요.

• 대시보드의 성격은 무엇인가요?
• 대시보드를 소비하는 대상이 누구인가요?
• 대시보드의 목표는 무엇인가요?

2. 적합한 시각화 유형 선택

시각화 유형을 결정하기 전에 다음의 질문을 고려하면 적합한 시각화 유형을 결정하는 데 도움이 됩니다.

• 무엇을 시각화하고 싶은가요?
• 데이터의 특성은 무엇인가요?
• 어떤 질문에 답하고자 하나요?
• 메시지를 최대한 다듬으세요!

⚠️ Visual Vocabulary를 참고하세요!
링크 보러가기: https://public.tableau.com/app/profile/andy.kriebel/viz/VisualVocabulary/VisualVocabulary

Visual Vocabulary

Visaul Vocabulary는 데이터의 특성과 시각화 목적에 따라 적합한 차트 유형을 정리한 차트 사전 📖 입니다.화려한 시각화가 아니라, 단순하지만 목적이 명확한 시각화가 무척 중요하니, 익혀보기로 해요!

 

3. 색상을 효과적으로 사용

색상은 대시보드에서 가장 시각적으로 많은 정보를 전달하는 요소입니다. 그런 만큼, 어떤 요소에 색상을 부여하기 전에 해당 요소가 “과연 필요한가"를 신중히 고민하여 적용하세요.

• 너무 과도하게 색상을 사용하면 사용자의 집중을 오히려 분산시킵니다.

왼쪽과 오른쪽 모두 ‘국가별 월별 매출 추이'를 나타낸 차트입니다. 그러나, 시선이 어디로 집중되느냐에서는 차이가 있다는 것이 느껴지시죠? 왼쪽 그림에서는 모든 국가에 대해 서로 다른 색상으로 구분하다 보니, 오히려 그 어떤 내용에도 집중할 수 없어 시선이 분산됩니다.
반면에 오른쪽 그림에서는 ‘강조’하여 표현하고자 하는 국가를 사용자가 동적으로 변경할 수 있는 매개변수를 활용하여 매개변수에서 선택된 국가만 ‘빨간색'으로 색상을 부여하여 확실히 시선을 집중시키고 있습니다.

 

• 색상의 의미를 명확히 하고, 일관성 있게 사용하세요.

초심자의 대표적인 실수 중 하나가 ‘의미 없이 색상을 사용하는 것’입니다. 일관성 있게 색상이 사용되도록 하기 위해서는 워크시트 단위에서의 정보 중요도 이전에, 각 워크시트를 조합한 대시보드 단위에서의 정보 중요도를 고려하여야 합니다. 대시보드 전체 이미지를 결정하는 메인 색상을 사전에 정의해보세요. 한층 통일화 된 대시보드를 작성할 수 있습니다.

 

 

4. BANs 사용

BANs는 "Big A** Numbers"의 약자로, 데이터 시각화 및 대시보드 설계에서 중요한 정보나 지표를 의미합니다. 사용자들이 대시보드에서 가장 중요한 정보를 빠르게 인지하고 파악할 수 있도록 주로 큰 글씨와 눈에 잘띄는 디자인으로 최상단 혹은 가장 좌측에 배치합니다.

위 그림에서 🔲 박스친 구간이 BANs인데요, 해당 대시보드에서 가장 중요한 숫자라는 것을 알 수 있죠. 오른쪽 그림처럼 중요한 숫자에 대한 최근 추이를 단순화하여 라인/막대 차트 형태로 표현하는 것도 해당 지표에 대한 추가적인 정보를 제공하는 효과적인 방법 중의 하나입니다.

 

5. 의도가 분명해지도록 텍스트 위치/효과/크기 설정

왼쪽과 오른쪽 중, 어떤 대시보드에서 ‘정보'에 더 집중할 수 있으신가요? 아마도 오른쪽이라고 답하셨을 것입니다. 왼쪽은 무언가 정신이 없어 보이죠. 어떤 요소가 변화하였는지 하나 하나 함께 살펴볼까요?

 

제목

제목을 변경하고, 왼쪽 상단으로 옮겨 더 중요한 정보인 2016년 진도율 차트가 더 많은 공간을 가질 수 있도록 조정했습니다. 또한, 제목에 대한 음영을 제거하여 대시보드가 너무 복잡해 보이지 않도록 하였습니다. 대신에 실제 데이터가 잘 보이게 되었죠!

 

BANs

BANs

데이터는 가장 중요한 정보이기 때문에 크기를 키우고, 글자 색상을 회색에서 검정색으로 변경하여 더 눈에 띄도록 하였습니다. 숫자가 제목보다 중요하기 때문에 제목은 작게, 숫자는 더 크게 조정하였고요. 이는 우리가 제목이 아니라 데이터를 전달하려는 목적이 있기 때문입니다.

 

차트 유형

막대 차트는 언제나 옳지만, 대시보드의 중앙 부분에 색상과 요소가 너무 많아 복잡해보입니다. 대안으로 선택한 롤리팝 차트는 잉크의 사용을 줄이면서도 값의 위치를 통해 여전히 효과적으로 정보를 전달합니다.

 

소제목 및 축제목

가로로 나열된 소제목들을 왼쪽으로 이동하였는데요, 이렇게 함으로써, 데이터 자체에 더 많은 공간을 제공하고,Y축 레이블을 제거할 수 있었습니다. 사용자들이 축을 읽기 위해 고개를 돌릴 필요가 없어진 것이죠. 사용자의 노력을 줄여주면 데이터에 집중하기가 더 쉬워진다는 것을 기억하세요.

 

축 레이블

왼쪽의 대시보드를 보면, X축이 세 번 반복되어 있는데, 가능한 한 중복된 요소는 제거하는 것이 좋겠지요.

이 사례에서 볼 수 있듯이, 대시보드에서 데이터 외에 텍스트를 어떻게 배열하고 강조할지 결정하는 것은 전체적인 인상에 큰 영향을 줍니다. 사용자가 데이터에 집중할 수 있도록 하기 위해서는, 대시보드 해석에 필요한 노력을 최소화하는 방법을 고려해야 합니다.

 

6. 효과적인 컨텐츠 배열 (Z형 배열과 역피라미드 배열)

대시보드 컨텐츠를 배열할 때는 사용자의 시선 흐름과 정보의 중요성을 고려하여 위치를 결정해야 합니다. 이 때 사용할 수 있는 배치방법이 바로 Z와 역피라미드인데요.

Z형 배열

일반적으로 사람들은 왼쪽 상단에서 시작하여 오른쪽 상단으로, 그 다음 왼쪽 하단을 지나 오른쪽 하단으로 시선을 이동시키는 경향이 있는데요, Z형 배열은 바로 이 시선 경로를 고려하여 대시보드에 컨텐츠를 배열하는 것을 말합니다. 이렇게 하면 사용자가 대시보드를 자연스럽게 읽으며 주요 정보를 쉽게 찾을 수 있겠지요.

 

역피라미드형 배열

저널리즘의 기사 작성 방식에서 유래한 것으로, 기사의 핵심 내용을 앞부분에 배치하고, 자세한 내용을 뒤에 배치하는 방식을 말합니다. 이를 대시보드 배열에 적용해보면 대시보드 상단에는 핵심 정보를, 하단으로 갈수록 추가적인 세부 정보나 부가적인 정보를 배치합니다.

 

두 가지 배열 방식이 모두 적용된 대시보드 사례입니다. 컨텐츠 중요도와 시선의 흐름을 꼭 기억하세요!

 

7. 사용자를 위한 가이드 추가

대시보드에 존재하는 모든 요소는 명확한 목적과 의미가 있어야 합니다. 제목과 도구설명은 대시보드를 읽는 사용자를 안내하는 가이드가 되어주므로, 대시보드의 완성도를 높이기 위해서는 반드시 한번 더 신경 써야 할 요소입니다.

제목 더 분명하게 하기 - 매개변수 삽입

매개변수에 따라 변동되는 부분을 제목에 반영해보세요. 컨텐츠의 가독성을 한층 더 높일 수 있습니다.
제목 편집 창에 가면 삽입 옵션 아래에서 매개변수 뿐만 아니라, 시트 이름, 페이지 번호, 데이터 업데이트 시간 등의 정보를 삽입할 수 있습니다.

 

도구설명 정돈하기

도구설명의 기본값 설정으로 그냥 두기보다는 정돈해주시면 한층 더 가독성을 높일 수 있습니다.

 

도구설명 안에 뷰 추가하기 (Viz in Tooltip)

도구설명 안에 워크시트를 삽입하는 방법도 적절히 활용하면 컨텐츠의 가독성과 추가 정보를 제공하는 데 도움이 될 수 있습니다. 공간을 절약하면서도, 상호작용성을 높일 수 있고, 마우스오버한 마크에 대한 추가 정보를 전달하는 효과를 줄 수 있습니다. 공간의 제약이 있는 모바일 환경에서 특히 효과적입니다.

자세한 방법이 궁금하시다면 다음 도움말 링크를 참고해보세요. 👉 도구 설명 안에 뷰 만들기(도구 설명 비주얼리제이션)

 

8. 인터랙티브한 대시보드

태블로 대시보드는 고정적이지 않아도 된다는 사실을 기억하세요! 인터랙티브한 요소를 포함하여 사용자들이 자신의 관심사나 질문에 맞게 데이터를 탐색하고 필요한 정보를 찾아가도록 유도하세요. 이를 위해서는 대시보드 기획 단계부터 인터랙티브한 요소를 어디에, 어떻게 적용할지 생각해두어야겠죠? 😉

 

9. 대시보드 크기 고정

태블로에서는 대시보드 크기를 자동, 고정된 크기, 범위로 사용할 수 있습니다.

대시보드 크기를 자동 또는 범위를 사용하면 사용자의 모니터마다 화면 크기가 최적화되어 렌더링 되는 장점이 있지만,
크기가 유동적이면 화면이 리사이징될 때마다 리소스를 다시 계산해야 하므로 성능이 저하될 수 있습니다.

따라서 대시보드 크기를 고정시켜 동일한 성능을 통해 사용자에게 정확한 정보를 전달할 수 있습니다.

10. 여백의 미 - Use Padding

미 중에 미 여백의 미를 사용하세요.

여백은 대시보드 디자인에서 중요한 역할을 합니다.
적절한 여백 설정은 정보를 시각적으로 분리하여 구분함으로써 사용자가 편안하게 정보를 읽을 수 있도록 돕습니다.
너무 밀집된 디자인은 사용자를 혼란스럽게 만들 수 있으므로, 여백을 활용하여 각 요소 간의 간격을 조절함으로써 시각적으로 깔끔하고 이해하기 쉬운 대시보드를 제공해 보세요.

여백 사용 X

 

여백 사용 O

예시 워크북 : Sample Soft Drink Sales.twbx
(출처 - https://public.tableau.com/app/profile/andy.kriebel/viz/SampleSoftDrinkSales/SoftSalesDashboard)

 

태블로 대시보드 레이아웃에서 바깥쪽 여백과 안쪽 여백을 설정하는 방법은 아래 영상으로 확인하세요.

 

옅은 색의 테두리를 추가하고, 여백을 활용하면 공간을 분리하는데 도움을 받을 수 있습니다.

 

각 요소들 사이에 충분한 여유를 두어 정보의 가독성과 시각적 효과를 향상시키는 여백을 활용합니다.