웹 디자인의 데이터 시각화
Today UX 아티클
우리는 데이터의 시대에 살아가고 있습니다. 오늘날 우리가 다루는 데이터 시스템은 사람이 그동안 만들어냈던 그 어떤 것보다 거대합니다. 한 사람이 하루에 소비하는 콘텐츠의 양이 평균 34 기가바이트를 넘어섰으며, 기술적 발전에 따라 그 양은 계속 늘어날 것으로 보입니다.
집중력은 점점 짧아지고 정보 과부하는 심해지는 이 시대에, 우리에게 필요한 것은 많은 양의 데이터를 종합하여 보여주는 간단한 방법입니다. 데이터는 더 나은 소비를 하게 해주는 유비쿼터스적 자원이어야 하며, 데이터를 시각적인 방법으로 표현하면 작은 공간 안에 많은 정보를 담을 수 있습니다. 데이터를 시각화하면, 데이터를 쉽게 탐색하고 소비할 수 있는 형태로 바꿀 수 있습니다.
이번 글에서는, 데이터 시각화(data visualization)가 무엇인지, 어떻게 활용될 수 있는지, 데이터를 시각화하고 싶다면 무엇을 고려해야 할지 설명하겠습니다.
데이터 시각화란?
데이터 시각화는 수집된 데이터를 특정한 형태로 보여주는 방법을 뜻합니다. 일반적으로 시각화된 데이터는 사람들이 의사결정을 내리는 데 도움을 줍니다. 핵심은, 데이터 시각화가 시각적 인코딩(visual encoding)에 대한 것이라는 점입니다. 시각화는 인식과 지각을 확장하는 데 활용됩니다.
데이터 시각화의 간단한 역사
데이터 시각화는 길고 재미있는 역사를 가지고 있는데, 이번 글에서 그 발전 과정의 모든 면을 다룰 수는 없겠지만, 정보 시각화의 두 가지 큰 발자취를 얘기하고 넘어가는 것이 의미 있을 것 같습니다.
지도
데이터를 시각적으로 보여주려고 하는 최초의 시도는 ‘지도제작(cartography)’으로 시작되었습니다 - 6000여 년 전 최초의 지도가 만들어졌습니다. 터키 남부의 코냐라는 도시의 지도는 데이터 시각화 사례 중 가장 오래된 기록물이라고 합니다.
터키의 코냐 타운 지도 – 세계에서 가장 오래된 것으로 알려진 지도. 기원전 6200년시간이 흘러, 지도는 진화했고, 더 자세해졌습니다.
포톨레마이오스의 세계지도 목판본오늘날 지도는 세계적으로 가장 널리 쓰이고 있는 시각화 방법입니다.
Google Maps과학
데이터 시각화의 역사는 과학의 역사이기도 합니다. 과학자들은 시각적 표현을 활용하여 기록을 하고 분석을 하기도 합니다.
아래는 갈릴레오(Galileo)와 동시대를 살았던 크리스토프 샤이너(Christoph Scheine)의 작업물입니다. 샤이너는 망원경으로 태양의 흑점을 관찰하고 자신이 본 것을 시각화하여 표현하였습니다. 이렇게 시각화한 자료는 과학적 관찰 내용의 기록물이자 향후 분석을 위한 데이터가 되었습니다.
시간의 흐름에 따른 흑점의 이동. 샤이너, 1626왜 시각화가 중요한가
아마도 데이터 시각화의 가장 좋은 정의 중 하나는 The Functional Art: An Introduction to Information Graphics and Visualization의 저자 알베르토 카이로(Alberto Cairo)가 내린 정의일 것입니다. 그는 데이터 시각화를 “사람들이 일반적으로 볼 수 없는 것(cannot normally see)을 보게 해 주려는 의도로 만든 그래픽적 표현(graphical representation)”이라고 설명합니다. 즉, 시각화는 사람들이 많은 양의 데이터에서 패턴을 뽑아내서 볼 수 있게 해 준다는 말입니다. 사람의 뇌는 시각적 패턴을 매우 잘 인식합니다. 그 인지적 과정은 잠재의식 속에서 일어나며, 디자이너들은 많은 정보를 매우 빠르게 전달해야 할 때 이러한 인간의 타고난 특성을 활용합니다.
예를 들어 1880년도부터 시작된 세계 기후 변화 데이터가 표현된 표와 같은 상당한 양의 데이터를 가지고 있다고 해봅시다. 숫자 더미 사이에서 패턴과 경향성을 추적하기란 쉽지 않습니다. 하지만, 같은 데이터가 시각적 형식(예: 차트)으로 표현되면 한눈에 경향성을 파악할 수 있습니다.
데이터 시각화는 데이터 안에 숨겨진 패턴을 드러내 보여줍니다.감각적 반응을 끌어내는 트리거(trigger)가 된다
데이터 시각화는 패턴을 발견하는 일뿐만 아니라 사람들 설득하는 일에 있어서도 강력한 툴입니다. 좋은 시각화 표현은 독자가 몰입할 수 있게 하면서도, 감각적으로 깊이 있게 독자에게 호소합니다. 디자이너는 데이터를 시각화할 때, 추상적인 것에서 그 의미를 끌어내어 실제적이고 실체가 있는 것으로 만들어냅니다. 따라서 누군가의 행동을 바꾸고 싶다면, 시각적 형식으로 정보를 표현해야 합니다.
데이터 시각화를 통해 세상을 보다 나은 곳으로 만들어 낸 두 가지 사례가 있습니다. 첫 번째 사례는 전쟁에서 목숨을 잃은 사망자의 규모를 양귀비로 표현한 Poppy Field 프로젝트입니다. 각각의 양귀비(poppy) 꽃잎은 전쟁을 나타내며, 줄기는 전장이 시작되었던 연도와 끝난 연도에 연결되어 있습니다. 꽃잎의 크기는 사망자 수를 나타내며, 꽃잎의 색상은 전쟁이 났던 지역을 나타냅니다.
Poppy Field는 지난 한 세기 동안 있었던 전쟁의 역사를 인터랙티브하게 시각화 한 사례입니다다음 사례는 Plane Truth로, 1993년 이후 있었던 비행기 사고를 보여줍니다. 상당수의 사고가 인적 오류로 인해 발생했다는 점을 잘 보여주며, 비행 과정을 보다 안전하게 만들 새로운 기술을 개발해야 할 이유를 알려줍니다.
Plane Truth는 1993년 이후 있었던 모든 비행기 사고를 시각화하였다. 각 네모의 사이즈는 사상자의 수를, 색상은 사고 원인을 나타냈다보다 기억에 남는 경험을 만들어준다
우리는 정보 자체에 반응하는 만큼 시각화 디자인에도 반응하게 됩니다. 잘 만든 시각화 표현은 보는 사람과의 관계를 고취시킵니다. 맞춤 제작한 그래픽은(능력 있는 시각화 디자이너가 손수 만든 그래픽은) 유저의 관심을 끌뿐만 아니라 누군가의 기억 속에 오래도록 남을 수 있는 기회를 제공하기도 합니다.
2013년도 시즌 동안 Washington Wizard의 슈팅 성공률을 보여주는 섬세한 데이터 시각화디지털 제품에서의 데이터 시각화
주요 콘텐츠를 서포트해주는 시각화
데이터 시각화는 뉴스 미디어에서 빠르게 인기를 얻고 있습니다. 뉴욕타임스나 CNN, 블룸버그 뉴스 등과 같은 인기 있는 뉴스 매체에서는 점점 더 많은 시각화 자료를 활용하고 있습니다. 독자들은 종종 이런 매체에서 전달되는 이야기의 질을 시각화 자료의 품질에 기반하여 평가하기도 하기 때문에, 매체에서는 지속적으로 데이터를 보여줄 수 있는 새로운 방법을 지속적으로 시도해보고 있습니다.
이런 유형의 시각화는 전체적인 글의 보조 수단으로 사용됩니다. 그 자체로만 사용되는 경우는 별로 없는데, 함께 전달되는 세부적인 정보 없이는 별로 의미가 없기 때문입니다.
WSJ은 데이터 시각화를 주기적으로 활용하고 있다. 위 사례는 전국 실업률 차트흥미로운 사실은, 어떤 페이지에든 차트를 넣게 되면 갑자기 페이지의 메시지가 보다 설득적으로 바뀐다는 것입니다(차트가 그 페이지에 있는 내용과 전혀 관련이 없다 해도 말이죠).
스토리를 전하는 시각화
데이터 시각화는 독자에게 이야기를 전하는 강력한 툴이 될 수 있습니다. 대중매체에서 출간되는 이야기 중 가장 강력한 힘을 발휘하는 이야기는 대부분 글로 쓰인 이야기가 아니라, 시각화되어 표현된 이야기입니다. 시각화는 복잡한 것을 이해하기 쉬운 것으로 번역해줄 수 있기 때문입니다.
음악이 어떻게 발전하였는가: 빌보드 핫 100, 1958-2016시각적 분석
시각적 분석(Visual Analysis)은 데이터를 보다 넓고 빠르게 탐색할 수 있게 해 줍니다.
대시보드
대시보드(dashboards)는 숫자를 분석하는 것보다 시각적 정보를 분석하는 것이 훨씬 더 쉽다는 생각을 기반으로 만들어졌습니다. 대시보드는 의사결정에 도움이 되도록 데이터를 단순화하여 보여줍니다. 대시보드에서 표현되는 데이터를 통해 데이터를 전반적으로 탐색할 수 있습니다. 예를 들어 머릿속의 가설을 검증하기 위해 대시보드로 데이터의 다이내믹스를 확인하는 것이죠. 대시보드의 또 다른 중요한 점은 시각화가 자동적으로 업데이트된다는 것입니다. 대시보드가 잘 만들어져 있으면, 부분의 경우 매번 데이터를 직접 변환하는 수고를 덜게 됩니다.
데이터 기반 지도
지리적인 데이터를 시각화할 때 지도를 선택하는 것은 자연스러운 선택입니다. 어떤 회사에서는 이런 유형의 시각화를 앱의 랜드마크로 삼기도 합니다. 그중 하나가 우버(Uber)인데, 우버에서는 다양한 니즈를 충족하기 위해 지도를 활용합니다. 대부분의 사용자는 운전자의 위치가 어디인지 어떤 루트를 통해 오고 있는지 파악하는 데 우버의 인터랙티브 지도를 사용하는 것에 익숙합니다.
주행 경로를 지도에 보여주는 것은 우버의 상징적은 시각화 중 하나입니다하지만 우버는 여기서 멈추지 않고 비주얼 레이어를 더하고 있습니다. 우버는 전 세계 도시에서 도로 상황 모니터링과 정책 결정을 도와주기 위해 수백만 건의 지리적 데이터 포인트를 시각화합니다.
마우스 커서를 지도에 올리면 해당 지역의 실시간 우버 탑승 기록을 보여줍니다데이터를 시각화할 때 무엇을 고려해야 하는가
다른 모든 디자인과 마찬가지로, 시각화 표현도 섬세하게 다뤄져야 합니다. 나쁜 시각화 표현은 사람들을 잘못 인도할 수 있습니다. 다음은 데이터를 시각화할 때 고려해야 할 4가지 핵심 원칙입니다.
1. 무엇을 전달하고 싶은지 안다
시각화 자료를 만들기 전에, 이 시각화 표현이 무엇을 위한 것인지 생각해봐야 합니다. 이 시각화를 통해 실현하고자 하는 것이 무엇입니까?
2. 진실을 전달한다
좋은 데이터 시각화는 반드시 좋은 데이터를 기반으로 만들어져야 합니다. 데이터는 전제 조건입니다 . 어떤 형식으로 데이터를 시각화하건, 데이터가 올바른지 먼저 확인해야 합니다. 아무리 미학적으로 훌륭하다 할지라도, 내용이 잘못되면 구제가 불가능합니다. 시청자를 존중하고 그들에게 믿을만한 정보만을 전달해야 합니다.
팁
다음 질문에 대한 답을 해보세요: “이 데이터는 어디서 나온 것인가”, “이 수치는 어떻게 계산된 것인가”
데이터가 정제되어 있는지, 정확히 정리된 것인지 이중으로 확인해보세요.
3. 적절한 양의 데이터만을 보여준다
시각화를 할 때는 관련된 데이터를 적절한 양만큼만 보여줘야 합니다. 디자이너들이 메시지를 지나치게 단순화하거나 지나치게 복잡하게 만드는 함정에 빠지는 경우가 많습니다. 데이터를 지나치게 단순화하거나 복잡화하는 것 모두 디자인에 좋지 않기 때문에, 적절한 균형을 찾아야 합니다. 시각화는 메시지를 명확하게 하는 일이기 때문에, 때로는 표현하는 데이터의 양을 줄여야 하기도 하고, 늘려야 하기도 합니다.
4. 청중을 이해한다
시청자(시각화 자료를 보게 될 사람)는 내가 아니라는 점을 이해하는 것이 중요합니다. 그들은 그들 자신만의 배경지식을 갖고 있으며 디자이너로서 우리는 그것을 고려해야 합니다. 타깃 시청자에게 맞는 시각화 유형을 찾아야 합니다. 사람들이 여러분이 보여주는 그래픽을 어떻게 해석하는지, 어떻게 시각화 자료를 읽는지 테스트해보아야 합니다.
흥미로운 사실은, 사람들이 시각화 자료를 잘못 해석하는 경우가 매우 많다는 것입니다. 2014년 Pew Research Center에서는 1000명을 대상으로 서베이를 실시하여 아래의 차트를 보여주고 무슨 의미라고 생각하는지 물었습니다. 오직 63%만이 이 차트를 정확하게 해석했습니다. 산점도는 데이터를 표현하는 상당히 표준적인 방법인데도 이 정도였다는 점을 감안한다면, 비표준적인 방식으로 데이터를 시각화하게 되면 이해하는 사람의 비율이 더 줄어들 수 있습니다.
Pew Research Center의 서베이 결과, 테스트 참가자의 63%만이 이 산점도를 정확하게 해석할 수 있었습니다결론
우리는 데이터 시각화의 황금기에 살고 있습니다. 많은 툴을 활용하면 최소한의 노력을 기울여서 데이터를 시각화할 수 있습니다. 이러한 모든 것들이 탐구와 혁신을 가능하게 합니다. 동시에 시각화가 단순히 효율적으로 정보를 표현하는 그래픽을 만드는 일에 그치지 않는다는 점을 기억해야 합니다. 디자이너로서 우리는 시각화 자료를 만드는 일이 실제 사람의 삶을 개선할 수 있는 수단이라는 점을 기억해야 합니다. 사람들이 살고 있는 세상을 보다 잘 이해할 수 있도록 도와주는 것이 우리의 책임입니다.
감사합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
