데이터 시각화와 UX
Data visualization
요즘은 하나의 금융 서비스에서 은행, 보험, 증권 등의 정보를 한 번에 관리하기도 하고, 헬스 서비스에서는 IoT 기기가 추적한 운동 기록 데이터와 건강검진 기록까지 연동할 수 있어 흩어져있는 다양한 정보를 쉽게 관리할 수 있게 되었습니다.
IDC 최근 연구에 따르면 2025년까지 전 세계 데이터 양이 163조 기가바이트에 달할 것으로 예상했는데요, 관리해야 하는 데이터의 양이 많아지는 만큼 정보를 쉽게 전달하는 데이터 시각화의 역할은 점점 더 중요해지고 있습니다.
서비스의 이해를 돕고 사용자 여정을 만드는 UX 분야에서도 데이터 시각화의 중요성이 커지고 있습니다.
* IDC 연구데이터 시각화란?
데이터 시각화의 사전적 의미는 양적 정보를 시각적으로 일관성 있게 전달하는 방법입니다.
데이터 시각화는 수세기 전부터 사용되어 왔습니다. 지도가 가장 큰 예시이며, 원형 차트는 약 19세기부터 쓰였습니다. 1800년대 초 러시아는 전 지역의 지도를 그리기 위해 그래프를 사용했습니다. 인간의 감각기관 중 시각을 통해 얻는 정보가 80% 이상인만큼 이렇게 오래전부터 정보의 시각화가 활용되었던 이유는 당연할지도 모르겠습니다.
우리는 쉽고 정확하게 해석할 수 있는 그래프를 볼 때, 사고를 통한 인지가 아니라 잠재의식적 처리를 통해 사전적으로 정보가 이해됩니다. 그렇기 때문에 깊게 생각할 시간이 적을수록 좋은 시각화라고 할 수 있습니다.
숫자로 이루어진 로우 데이터는 인간의 두뇌가 이해하고 처리하기 쉬운 시각적 요소로 변환되고 사용자에게 인지됩니다. Cleveland & McGill의 연구에서는 그래픽 요소가 인지되는 순서에 따라 순위를 매겨 이론을 정립했습니다. 그 요소는 위치, 길이, 방향, 각도, 면적, 부피, 곡률, 음영 및 색상 등으로 이러한 요소들은 주로 차트의 구성 요소로 사용됩니다.
* 출처 uxdesign.cc/how-to-design-data-visualizations-that-are-actually-valuable데이터 시각화의 유형
모든 데이터 시각화를 차트와 그래프의 형태로 표현하는 것이 가장 효과적인 방법은 아닙니다.
상황에 따라 간단하고 잘 정리된 테이블이 더 유용하기도 하고 디자인 요소를 통해 전달하려는 메시지에 힘을 실을 수도 있습니다. 정보를 간략하게 정리하고 핵심 정보를 위치, 크기, 색상 등을 활용해 효율적으로 전달하는 것이 중요합니다.
레이아웃과 대비
레이아웃을 활용해 사용자의 시선을 집중시키고 우선순위를 표현할 수 있습니다.
데이터에 대한 분석을 명확하게 분류하면 사용자가 데이터 자체를 해석할 필요가 없기 때문에 이해하기 위한 노력을 줄일 수 있습니다. 사용자의 시각적인 인지는 화면의 **왼쪽 상단** 이나 **중앙** 을 더 많이 볼 가능성이 높기 때문에 가장 중요한 정보의 영역을 고려하여 위치시키는 것이 좋습니다. 또한 대비를 사용하여 중요한 정보를 강조할 수 있는데요, 크고 굵은 폰트는 눈에 잘 띄는 반면 작고 얇은 폰트는 인식되는 순서가 낮습니다. 또한 밝은 색상은 눈에 잘 띄는 반면 옅은 색상은 배경으로 표시됩니다. 또 다른 일반적인 규칙은 일관성을 깨는 색상이 중요한 메시지로 인식됩니다. 때문에 이러한 대비를 적절히 사용하여 효과적인 정보 전달을 할 수 있습니다.
* kakao pay app, Apple health app디자인 요소 활용
데이터 시각화에 디자인 요소를 추가하면 추가하면 사용자의 주의를 환기시키고 어려운 정보를 이해하는 데 도움이 될 수 있습니다. 사람들은 텍스트보다 이미지를 더 오래 기억하는 경향이 있습니다. 또한 데이터와 관련성 있는 디자인은 매력적인 방식으로 데이터의 주제와 중요성을 전달하는 데 도움이 되며 시각적인 표현의 퀄리티를 느끼게 합니다.
* IOPE Skin Geno Service도식적인 시각화 표현
도식적인 형태는 정량적 정보의 일반적인 시각적 표현, 모든 파이 및 라인 차트, 히스토그램 및 스펙트로그램, 테이블, 다양한 점 도표가 포함됩니다. 많은 데이터 시각화에서 막대그래프, 파이 차트, 선 그래프 등의 동일한 공통 형식과 구조를 사용하는 데에는 이러한 차트 형식은 효율적이고 많이 알려져 있습니다. 그리고 사용자에게 친숙함은 빠르고 명확하게 이해하는데 도움을 줍니다.
* Toss app, Apple stock app데이터 시각화에서 디자이너의 고려사항
시각화할 데이터를 검토하는 동안 사용자가 해당 정보를 어떻게 사용할 것인지 고려하며 데이터의 대상과 목적을 이해하는 것이 중요합니다. 이를 위해서는 사용자 조사를 통해 사용자가 결정을 내리는 데 어떤 데이터를 사용하고 어떤 추가 데이터가 필요한지 이해하는 것이 좋습니다.
다양한 차트를 실험하여 데이터의 스토리를 가장 잘 표현할 수 있는 차트를 확인하는 것이 좋지만, 직관적인 정보 전달을 위해 어떤 방법이 적합한지에 대한 이해가 필요합니다. 차트를 사용한다면 데이터의 구분하여 보여줄 기준을 파악하고 '비교', '시간 별 변화', '비중', '관계' 등의 유형으로 분류하여 효과적인 차트를 선택하여 활용하는 것이 좋습니다. 시각화 과정에서는 올바른 유형의 시각화 선택, 시각화를 단순하게 유지, 사용자가 쉽게 이해하는 것에 집중하는 것이 중요합니다.
또한 사용자가 어떠한 환경에서 사용하는지를 파악하는 것이 좋습니다. 모바일 서비스가 많아지면서 점점 작은 화면의 기기에서 정보를 접하게 됩니다. 이런 환경을 고려하여 데이터의 양과 밀도, 또는 인터렉션을 활용하여 사용자에게 밀접한 데이터를 제공할 수 있습니다.
디자인 과정에서 고려하면 좋은 질문
- 사용자에게 데이터를 제공하는 이유는?
- 사용자가 보고 싶어 하는 데이터와 데이터의 양은?
- 데이터가 어떻게 구성되었는지?
- 데이터는 서로 어떻게 연관되어 있는지?
- 데이터를 어떤 방법으로 탐색할 수 있는지?
프로젝트를 하면서 항상 정보를 어떻게 하면 이해하기 쉽게 전달할지 고민했었는데요, 정보의 시각화에 대한 궁금증을 시작으로 글을 쓰게 되었습니다.
같은 고민을 하고 있을 디자이너분들에게 도움이 되길 바랍니다.
- 라이트브레인 가치디자인그룹 방민아
타이틀 이미지
* Metatron Energy Optimizer - https://www.rightbrain.co.kr/RB/portfolio-item/skt-energy-optimizer/
참고 문헌
[10 Elements of Good Data Visualization - Radian Developers](https://www.raddevelopers.com/10-elements-of-good-data-visualization/)
[Data visualization: basic principles](https://paldhous.github.io/ucb/2016/dataviz/week2.html)
[Data Visualization in UX Discipline](https://mockitt.wondershare.com/ui-ux-design/data-visualization.html)
[Material Design](https://material.io/design/communication/data-visualization.html)
[눈과 시각 - Sciencetimes](https://www.sciencetimes.co.kr/?news=%EB%88%88%EA%B3%BC-%EC%8B%9C%EA%B0%81)
[3 UX Design Principles for Better Data Visualization](https://medium.com/analytics-vidhya/3-ux-design-principles-for-better-data-visualization-70548630ff28)
[Fundamentals of Data Visualization](https://clauswilke.com/dataviz/preface.html)
