데이터 시각화, 직관적으로 디자인하기
데이터 시각화가 도구가 아닌 퍼즐이 되어버리는 순간
*원문 출처를 번역한 글입니다.
종종 나를 완전히 혼란스럽게 만드는 시각화 결과물을 마주하곤 합니다. 차트에 무엇이 표시되어 있는지는 알겠지만 뇌가 그 비중을 가늠하지 못하거나 이 시각화가 도대체 왜 존재하는지 이해하지 못하는 경우입니다. 이런 차트를 어떻게 '읽어내야' 할지 파악하는 데는 꽤 많은 시간이 필요합니다.
혹시 남의 일 같지 않으신가요?
분명 그럴 겁니다. 읽기 어렵고 혼란스러운 차트와 이상한 인포그래픽이 도처에 널려 있으니까요. 내가 무언가를 놓치고 있어서 나에게만 문제인 건가 싶을 수도 있습니다. 하지만 저는 어릴 때부터 지도와 차트를 보는 게 익숙했고 성인이 되어서는 대시보드를 직접 디자인하기도 했습니다. 전문가인 저도 이런데 일반 사용자가 예쁘기만 하고 이해할 수 없는 차트를 보면 어떤 기분이 들까요? 결코 좋은 기분은 아닐 겁니다.
사용자들은 본인이 멍청하다고 느끼거나 답답함을 느끼며 때로는 속았다는 기분까지 듭니다.
데이터 시각화의 본질은 복잡한 것을 단순하게 만드는 데 있습니다. 정보를 명확하게 전달하여 사람들의 시간과 인지적 노력을 아껴주어야 합니다.
하지만 기초적인 비중을 이해하기 위해 시각화를 따로 '공부'해야 한다면 그것은 더 이상 도구가 아닙니다. 그저 풀기 어려운 퍼즐일 뿐입니다.
이런 현상이 왜 발생하는지 이해하고 이를 피하는 방법을 아는 것이야말로 유용한 도구를 만드는 마법의 열쇠입니다. 삶을 더 편리하게 만들고 사람들이 제품을 좋아하게 만드는 그런 도구 말이죠.
어드민 대시보드: 인시던트 관리를 위한 데이터 중심 인사이트1. 특별한 독자층은 없습니다. 오직 사람만 있을 뿐입니다.
디자이너들은 분석가를 위한 대시보드를 만들 때 그들이 똑똑하기 때문에 어떤 차트든 즉시 이해할 것이라고 지레짐작하곤 합니다.
하지만 이는 큰 오해입니다. 물론 차트에 익숙한 사람이라면 디자인 퍼즐을 푸는 데 시간을 덜 쓸 수도 있겠지만 항상 그런 것은 아닙니다.
어떤 시각화 형태는 뇌가 제대로 처리하지 못하거나 아주 느리게 반응하는 정신적 연산을 요구합니다. 이는 어떤 인간의 뇌라도 마찬가지입니다.
시각적 인지 유형은 다양하지만 결코 고정되어 있지 않습니다. 동일한 사람이라도 상황이나 맥락에 따라 정보를 받아들이는 전략을 바꿀 수 있습니다. 대부분의 경우 타고난 인지 유형보다 주어진 맥락이 데이터를 읽는 방식을 더 크게 좌우합니다.
그렇다면 어떤 사람들은 차트를 더 빨리 이해하고 어떤 사람들은 그렇지 못한 진짜 이유는 무엇일까요?
정답은 바로 경험입니다. 반복을 통해 얻어지는 자동화 말이죠. 수년 동안 차트를 다뤄온 숙련자의 경험은 초보자의 것과는 확연히 다릅니다. 하지만 숙련자가 나쁜 시각화 결과물을 더 잘 읽어내는 것은 아닙니다. 그들은 그저 나쁜 결과물을 견뎌내는 법을 배웠을 뿐입니다.
이런 상황을 상상해 보세요. 막대차트에 익숙한 분석 팀에게 어느 날 갑자기 도넛 차트라는 새로운 디자인이 '하사'되었습니다. 아마 분노 섞인 비명이 들려올지도 모릅니다. 물론 시간이 지나면 사람들은 적응하겠지만 처음에는 더 많은 시간이 걸리고 짜증을 유발할 것입니다.
데이터를 무의식적으로 읽는 데 익숙해진 사람에게는 새로운 형식이 아무리 더 많은 정보를 담고 있더라도 초기에는 성능 저하로 느껴질 수밖에 없습니다.
이것이 바로 테스트의 함정입니다. 분석 환경에서는 작업 속도를 높여주지 못하는 시각화는 기본적으로 나쁜 디자인으로 간주됩니다.
동시에 초기 테스트 결과가 전체를 대변하지 못할 수도 있다는 점을 명심해야 합니다. 사람들에게는 새로운 디자인에 적응할 시간이 필요하기 때문입니다.
피트니스 앱을 위한 어드민 분석 대시보드2. 지배적 인지 유형에 대한 근거 없는 믿음
어떤 독자층은 특정 차트를 더 잘 이해하고 다른 독자층은 또 다른 차트를 더 잘 이해한다고 단정 짓는 것은 불가능합니다.
고정된 인지 유형에 대해 신뢰할 만한 데이터는 존재하지 않습니다. 하지만 인간의 뇌가 어떤 시각화 결과물을 더 빠르고 쉽게 읽어내는지에 대해서는 이미 입증된 사실들이 있습니다.
디자이너 여러분께는 안타까운 소식이지만 예쁜 도넛 차트나 파이 차트는 단순한 막대형 차트보다 이해도가 훨씬 떨어집니다.
- 대부분의 사람은 길이나 위치를 비교할 때 가장 높은 인지 효율을 보입니다.
대다수의 사람은 길이를 기반으로 한 형태인 막대나 선 그래프를 훨씬 쉽게 읽어냅니다. 클리블랜드와 맥길의 연구에 따르면 이는 데이터 시각화 분야에서 가장 신뢰할 수 있는 연구 결과 중 하나입니다.
- 이것은 개인의 '인지 유형' 문제가 아니라 보편적인 '인지적 우위'의 문제입니다.
반대로 대부분의 사람은 각도나 면적 그리고 부피를 비교하는 데 서툽니다.
즉 원형이나 버블 차트 그리고 방사형 그래프는 특정 독자층뿐만 아니라 거의 모든 사람에게 인지적 혼란을 줄 수 있다는 뜻입니다.
- 대부분의 사람에게는 언어적인 보조 장치가 필요합니다.
다양한 사용자층에게 텍스트는 매우 중요합니다. 레이블과 주석 그리고 구체적인 설명이 거의 모든 사용자의 이해도를 높여준다는 사실은 여러 연구를 통해 일관되게 증명되었습니다.
가상자산 투자 및 대출 플랫폼의 UI 요소3. 시각화가 인지에 미치는 영향
인지 방식이 차트를 이해하는 과정에 영향을 주듯 차트 또한 사용자의 인지를 형성합니다.
선택한 차트의 종류는 사람들이 정보를 이해하고 해석하는 방식을 결정합니다. 차트는 생각보다 쉽게 사용자를 기만할 수 있으며 이것이 반드시 의도적인 결과는 아닐 수도 있습니다.
왜 이런 일이 일어날까요? 사람은 먼저 보고 그다음에 생각하기 때문입니다. 비판적 사고가 작동하기 전 차트가 이미 첫인상을 형성해 버립니다. 일단 인상이 형성되고 나면 논리는 그저 그 인상을 정당화하는 도구로 전락하곤 합니다.
- 대부분의 사람은 텍스트보다 시각적 요소를 더 신뢰합니다.
사용자는 차트를 다음과 같이 받아들입니다.
객관적임
기술적임 "숫자는 거짓말을 하지 않는다(의견이 아니다)"
- 사소한 시각적 결정이 큰 변화를 만듭니다.
다음과 같은 요소들이 기만적인 설계를 유도할 수 있습니다.
잘린 축(데이터 왜곡)
척도
선택
차트
유형
색상
카테고리
정렬 순서
기술적으로 데이터 자체에는 거짓이 없을지 모릅니다. 하지만 형태와 표현 방식이 사용자의 인지를 왜곡합니다.
- 어떤 형식은 본질적으로 기만적인 속성을 가집니다.
예를 들면 다음과 같습니다.
3D 효과
값이 비슷한 원형 차트
방사형 차트
이중 축
이러한 형식들은 차이를 과장하거나 반대로 차이를 교묘하게 감추어 독자가 알아채지 못하게 만듭니다.
기만은 악의적인 의도에서만 시작되는 것이 아닙니다. 시각적 형태가 보는 이를 특정 결론으로 몰아넣고 의구심을 가질 여지조차 주지 않을 때 시작됩니다.
데이터 시각화는 단순히 정보를 담는 중립적인 그릇이 아닙니다. 이는 타인에게 영향을 미치는 강력한 도구입니다. 따라서 디자이너는 자신의 선택에 따르는 책임을 깊이 이해해야 합니다.
시간 추적 및 데일리 태스크 관리 플랫폼 4. 나쁜 인지란 없습니다. 오직 나쁜 디자인이 있을 뿐입니다.
나쁜 디자인이란 과업의 본질을 무시하거나 인지 부하를 고려하지 않는 디자인입니다. 혹은 그저 예쁘고 인상적으로 보이기 위해 디자인 그 자체만을 목적으로 존재하는 경우입니다.
심미적인 부분만 신경 쓰는 디자이너는 보통 이렇게 생각합니다. "막대 그래프만 있으면 디자인이 너무 단조롭고 지루해 보이니까 역동성을 주기 위해 파이 차트를 섞어보자." 혹은 "차트가 전부 회색이라 심심하네. 강조를 하고 싶으니 이 차트만 파란색으로 바꿔야지."
그 결과 첫 번째 경우에는 전체적인 논리를 깨뜨리는 불필요하고 가독성 낮은 파이 차트가 만들어집니다. 두 번째 경우에는 파란색 차트가 회색 차트보다 더 중요하다는 인상을 주면서 의도치 않은 기만적인 강조 효과가 발생합니다.
비즈니스 성과 추적을 위한 대시보드 위젯5. 사용자가 아닙니다. 시각화가 문제입니다.
문제가 있는 시각화 결과물에는 한 가지 공통점이 있습니다. 바로 인간의 뇌가 잘 처리하지 못하는 영역인 면적과 각도 그리고 부피와 원근을 비교하도록 강요한다는 점입니다.
그 밖에도 여러 문제가 있습니다. 예를 들어 도넛 차트는 아주 인기가 높지만 정작 사용자의 시선이 가장 먼저 어디로 향하는지 아시나요? 바로 도넛 중앙의 텅 빈 공간입니다. 우리 뇌는 이곳을 그저 '아무것도 없는 구멍'으로 인식합니다. 가운데 구멍이 커질수록 시각화의 효율은 더욱 나빠집니다.
비즈니스 성과 및 재무 인사이트 위젯가장 까다롭고 문제가 많은 데이터 시각화 유형들
1. 파이 차트 대신 사용하는 도넛 차트
흔히 파이 차트의 개선된 버전처럼 소개되지만 실상은 다음과 같습니다. 중앙의 구멍이 기준점을 없애버립니다. 면적을 비교하기가 훨씬 더 어려워집니다. 레이블이 주로 바깥쪽으로 밀려나 시선이 분산됩니다.
다음과 같은 경우에만 제한적으로 허용됩니다. 중앙에 배치할 핵심 지표가 단 하나이며 그 숫자가 정말 중요할 때 데이터 조각이 몇 개 안 되고 값의 차이가 아주 클 때 이 외의 모든 경우에 도넛 차트는 그저 파이 차트보다 더 해로운 존재일 뿐입니다. 그 이상도 이하도 아닙니다.
2. 레이더 / 스파이더 차트
프레젠테이션이나 전략 슬라이드에서 단골로 등장하는 차트입니다. 사람들은 이 차트를 보며 "이 도형이 훨씬 강력해 보이네"라고 생각하지만 정확히 무엇이 얼마나 더 큰지는 파악하지 못합니다.
문제점:
비교를 위한 선형 척도가 없습니다.
각도와 모양이 데이터의 중요도에 대한 착시를 일으킵니다.
면적을 논리적으로 분석하기보다 감정적으로 받아들이게 됩니다.
사용이 적절한 경우:
분석 환경에서는 거의 쓸 일이 없습니다.
수치를 바탕으로 의사결정을 내릴 필요가 없는 하이레벨 스토리텔링 환경에서만 가끔 사용합니다.
AI 기반 웹사이트 및 플랫폼 감사 도구3. 버블 차트
서로 다른 반지름과 색상이 뒤섞일 때 특히 더 큰 문제가 발생합니다.
문제점:
우리 뇌는 원의 면적을 비교하는 데 서툽니다.
버블의 크기가 실제보다 과대평가되는 경우가 많습니다.
여기에 색상과 위치 정보까지 더해지면 인지 부하가 한계치에 도달합니다.
이미 3~4개의 변수를 한꺼번에 다루는 셈이라 대다수 사람에게는 무리입니다.
다음과 같은 경우에만 적절합니다.
정확한 수치 비교보다 데이터의 분포를 보여주는 것이 더 중요할 때
툴팁 같은 인터랙티브 요소가 보조해줄 때 차트 해석 능력을 갖춘 숙련된 사용자를 대상으로 할 때
4. 누적 막대 그래프
참 다루기 까다로운 형식입니다.
문제점:
가장 아래에 있는 첫 번째 세그먼트만 비교하기 쉽습니다.
나머지 세그먼트들은 공통된 기준선 없이 공중에 '떠 있는' 형상이라 비교가 어렵습니다.
막대 간의 데이터를 비교하기 시작하는 순간 인지 체계가 빠르게 무너집니다.
다음과 같은 경우에만 사용하세요.
단일 막대 안에서 내부 구조를 보여줘야 할 때
여러 막대 사이의 비교가 굳이 필요하지 않을 때
비교가 필요한 순간 데이터를 읽고 이해하는 과정에서 오류가 발생하기 시작합니다.
FinPath — 금융 포트폴리오 관리 대시보드5. 맥락이 결여된 히트맵
아주 트렌디해 보이지만 그만큼 위험합니다.
문제점:
색상이 수치적 사고를 대체해 버립니다.
범례와 척도가 없다면 데이터가 아닌 순수한 감정으로만 차트를 읽게 됩니다.
맥락과 상관없이 무의식적으로 "빨간색은 나쁨 / 초록색은 좋음"으로 해석하는 경향이 생깁니다.
다음과 같은 경우에만 적절합니다.
데이터의 전반적인 밀도를 한눈에 파악해야 할 때
이상치를 탐지하기 위한 용도로 사용할 때
최종 결론을 내리는 도구가 아니라 정보를 훑어보는 첫 번째 레이어로 활용할 때
6. 이중 축 차트
분석가들은 좋아하지만 정작 사용자는 기겁하는 형식입니다.
문제점:
거짓 상관관계를 만들어냅니다.
우리 눈은 두 선 사이의 연관성을 무의식적으로 연결하려 합니다.
서로 다른 척도가 데이터를 기만적으로 보이게 할 수 있습니다.
다음과 같은 경우에만 제한적으로 허용됩니다.
사용자에게 두 축의 차이를 명시적으로 경고했을 때
사용자가 서로 다른 척도를 보고 있다는 사실을 완벽히 인지하고 있을 때
그렇지 않으면 이 차트는 잘못된 결론을 내리게 만드는 원흉이 됩니다.
AI 기반 Web3 트레이딩 플랫폼을 위한 위젯 UX/UI 디자인7. 산키 다이어그램(플로우 차트)
시각적으로 매우 압도적이지만 인지 부하가 상당히 큽니다.
문제점:
첫눈에 직관적으로 파악하기 어렵습니다.
데이터의 양이 많아지면 확장성이 떨어집니다.
정보를 해석하는 데 많은 시간과 주의력이 요구됩니다.
다음과 같은 경우에만 사용을 권장합니다.
데이터의 흐름(Flow) 자체가 정보의 핵심적인 의미를 담고 있을 때
부가적인 정보가 아닌 페이지 전체를 대표하는 메인 차트로 사용할 때
Cascade — 분석 페이지방금 구글에 '막대 그래프'를 검색해 봤습니다. 검색 결과 최상단에 무엇이 떴는지 아시나요? 바로 '막대 그래프를 흥미롭고 아름답게 만드는 방법'이었습니다.
그 아티클은 모서리를 둥글게 깎는 법을 설명합니다. 아마 뇌가 그 둥근 모서리 하나하나에 더 매달리게 해서 결국 더 빨리 지치게 만들려는 모양입니다. 혼란을 즐기는 사람들을 위해서는 롤리팝 차트를 제안하고 고통을 더하고 싶다면 눈금 표시를 추가하라고 조언하죠. 심지어 여백에 대한 철학적 사색을 즐기는 이들을 위해 테두리만 있는 막대 그래프를 추천하기까지 합니다.
사용자가 아름다움을 위해 고통받아서는 안 됩니다.
이런 식의 디자인은 리텐션에 전혀 도움이 되지 않습니다. 불필요한 인지적 장벽에 부딪혀 뇌 에너지를 소진하고 나면 사람들은 짜증을 느끼며 페이지를 떠나버립니다.
우리 모두는 아름다운 디자인을 사랑합니다. 하지만 디자인의 본질은 정보 이해를 돕는 것이지 결코 방해가 되어서는 안 된다는 사실을 잊지 말아야 합니다.
Next World — Components원문 출처: https://uxplanet.org/data-visualization-how-to-make-it-understandable-f123460511a0
