데이터 시각화 작업 프로세스
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
목차
1.초안에서부터 시작하자.
2.기능과 데이터를 추가하자.
3.작은 것에 불과하다.
4.결국, 처음부터 다시 시작하자.
아무에게도 말하지 않았지만, 난 사실 그래프 덕후다. 안다, 이상하게 들린다는 거. 학사 논문을 쓸 때, 글을 쓰는 것보다 그래프를 디자인하는 데에 더 많은 시간을 할애했다. 그래프들을 완벽하게 만들어내고 싶었다. 내 논문은 그래프로 표현하려고 노력한 엄청난 양의 데이터로 구성되어있었다. 난 그것들이 멋지게 보였으면 했다. 이를테면 세련된 곡선이라든가… 수직선이 아름다운 간격으로 나뉘어있다든가… X, Y축이 완전하게 균형이 잡히도록.
한 달 전, 나는 현재 직장 Tink에서 새로운 프로젝트를 시작했다. 그건 내 꿈이 실현된 것과 마찬가지였다. 나는 이번 주 내내 거대한 분석 툴을 구축하는 데에 시간을 썼다. 어디에나 그래프가 있고, 소화해야 할 데이터가 있다. 그래서 학부 시절 그래프에 대한 추억을 떠올렸고, 7년 만에 그 논문을 다시 펼쳐보기로 했다. 뭔가 영감이 될 만한 게 있었으면 했다. 하지만 내가 문서를 열었을 때, 그래프를 보고 1초만에 컴퓨터를 닫았다.
오. 음. 헬인데? 1분 동안 빈 벽을 바라보다가(1시간 정도였을 수도…) 내 컴퓨터를 다시 켜고 문제를 해결하려 시도했다. 하지만 할 수 없었다. 너무나도 작은 공간에 지나치게 많은 정보가 들어있었다. 스캔본은 없지만, 여기 내가 몇 분 만에 만든 그래프가 얼마나 형편 없었는지 보여줄 수 있는 사례가 있다.
내 논문 그래프는 아니지만 거의 비슷하다.
난 현실로 돌아와서 내가 옛날에 만든 그래프를 보고 낮아진 자존감을 되살리려고 했다. 12개의 자존감 향상 유튜브 영상을 보고, 스케치를 켜고 새로운 그래프 프로젝트를 시작했다. 더 잘해야만 했다.
몇 주가 지나고, 나는 약 100개의 그래프를 만들었다. 그 일을 계속해서 반복하고, 피드백을 받고 보완했다. 적어도 괜찮은 그래프 정도는 만들 수 있게 되었다고 믿었다. 6장에서는 내 프로세스를 단계별로 살펴보고, 내가 어떻게 디자인하고 반복했는지, 그리고 최종 제품이 왜 지금과 같이 보이고 기능하는지 설명하겠다.
1장 - 초안에서부터 시작하자.
그래프의 초안은 말그대로 우리가 Tink에서 제작한 핀테크 앱을 위해 만든 그래프를 복사&붙여넣기하고 크기만 조절한 것이다.
장점
이 그래프의 좋은 점은 깔끔하다는 것이다. 어수선함이 전혀 없다. Y축과 X축의 범례/설명 없이 실제로 작동하는 파라미터는 그 수가 매우 적다.
단점
우리는 고도화된 분석 툴을 만들고 있다. 하지만 이 적은 정보만으로는 당신이 찾고있는 돌파구를 찾아낼 수 없을 것이다. 수정 여지가 거의 없는 지표를 건드린다는 건 어려운 일이다. 우리가 소개하고자 하는 잠재력이 큰 데이터에 비해서는 확장성이 떨어진다.
배울 점
단순하게 만들어라. 무엇을 말하는지 따로 공부하여 이해할 필요 없도록, 읽기 쉽게 만들어라.
이러한 점을 염두에 두고 그래프에 기능 및 데이터를 더 추가하라. (분명 추가할 만한 데이터가 있을 것이다.)
2장 - 기능과 데이터를 추가하자.
위의 미니멀리스틱한 그래프에서 시작해, 나는 더 많은 데이터와 더 높은 수준의 데이터를 시각화할 수 있는 데에 필요한 몇 가지 변화를 만들었다. 물론 데이터를 필터링하는 과정도 거쳐야 한다.
업데이트
시간대별 분류
끝 점에 마우스를 가져다대면 추가적인 정보를 보여주도록 수정했다.
데이터 우선순위를 보여줬다.
호버의 위치를 가르쳐주는 인디케이터 라인을 넣었다,
포함되어 있는 라인은 곡선이 되어서는 안된다. 모서리를 둥글리는 것은 더 자세한 정보를 보려고 호버링했을 때 정확한 정보를 보여줄 수 없다.
모바일 용이 아니므로 폰트 크기를 더 키웠다.
x축을 표시하는 선이 필요하다.
장점
이 그래프는 더 명확하다. 더 많은 데이터를 보여주고, 앱이 어떻게 돌아가는지에 대한 충분한 디테일을 제공한다. 특정한 정보를 원할 때, 호버링으로 자세한 정보를 제공해주는 것도 좋다. 선들이 그 이상으로 둥글지 않아서 더 정확하다. 날짜는 아래에 명확하게 표시되어있고 그 지표하나 뿐이기 때문에 읽기 쉽다.
단점
우상단이 지저분해보인다. 필터 섹션이 Y축과 함께 있어서 어지러워보인다. 그리고 이를테면, 500 데이터 포인트가 어디인지 알려주는 선이 매우 부족하다. 우리 브랜드 컬러가 저런 연어색이더라도, 내가 이걸 개발자에게 보여준다면 그들은 에러로 생각할 것이다.
배울 점
많은 것을 보여주지 않더라도 발전된 그래프를 보여줄 수 있다. 그러나 유저들이 행동함으로써 그들이 원하는 정보를 얻을 수 있도록은 해주어야 한다.(필터나 호버같이)
Y축에 있는 숫자들은 왼쪽으로 옮기는 것이 좋겠다.
컬러 수정이 필요하다.
3장 - 작은 것에 불과하다.
각 구성요소의 스타일을 개선하는 것은 그래프를 명확하게 하는 데에 도움이 되었다. 디자인을 발전시키는 부분을 반복하는 데에서, 우리 모두가 아는 부분을 다시 그릴 필요는 없을 것이다.: 한 요소 한 요소씩 고쳐나가다보면, 엄청난 결과물이 나오게 될 것이다.
업데이트
브랜드 컬러를 보조색으로 변경했다.: 진녹색
Y축을 왼쪽으로 옮겼다.
세부 요소를 더 잘 배열하기 위해 하단에 작은 라인들을 추가했다.
호버링 없이도 데이터를 읽을 수 있도록 라인 간에 라인을 삽입했다. 단, 다른 라인을 압도하지 않도록 느슨하게 추가했다.
필터를 폴더블 버튼을 활용하여 서브로 옮겼다. 필터가 필요없는 대다수의 유저를 배려하기 위함이다.
장점
이전에 축적된 모든 장점들을 여기 쏟아부었고, Y축 숫자를 왼쪽으로 옮김으로써 얻는 이익도 추가되었다. 가독성이 더 높아졌고, 액션(필터)은 오른쪽에 몰려있을 때보다 훨씬 도드라져보인다. 선은 가독성을 높여주고 그래프가 명확하게 보이게 도와준다. 우상단에 필터링이 많은 공간을 차지하지 않는다는 점이 보기 좋다. 필터 버튼이 여러 개 있었을 때는 꽤나 지저분해보였으니까.
단점
폴더형 필터는 유저에게 있어 최선의 선택은 아니다.
배울 점
작은 디테일을 여기저기 더하는 것은 분명 가독성을 높여준다.
그러나 추가적인 디테일을 최소화하는 것은 명확성을 높여준다.
이 그래프를 동료에게 보여줬더니, 이 데이터에는 바 형태가 좋은 옵션이 아니라고 말해주었다…
그래서 마지막 배울 점은 모든 것을 다시 생각해보는 것이다. 난 이미 많은 시간을 보냈으니 좋은 일이라고는 못 하겠지만, 좋기도 하다. 왜냐하면 많은 개선의 여지가 있기 때문이다.
4장 - 결국, 처음부터 다시 시작하자.
선 그래프의 경우, 한 포인트와 다음 포인트 간 거리만이 데이터에 대한 시각적 요소이다.
만약 당신의 신용카드 소비 내역 같은 돈을 보여주고 싶다면, 선 그래프는 좋은 선택일 수 있다. 왜냐하면 포인트 a, b간 사이에서 자세한 돈의 가치를 확인할 수 있기 때문이다.
그러나 아래 그래프에 보이는 것처럼, 딱딱 떨어지는 데이터가 아닐 경우에는 사람들이 이해하지 못하는 부분을 제대로 보여주기 위해 노력해야 한다. 감소한다는 건 알지만, 초당 감소량을 기록할 수는 없으니 정확하게 얼마나 감소하는 건지는 모르니까.
배울 점
데이터 포인트 a, b가 선으로 설명될 수 없다면, 바 차트를 사용해보자.
5장 - 신세계
피드백을 받고, 나는 선 대신 바 그래프를 그려보았다. 그랬더니 x축 값이 매우 명확하게 보였고, 그걸 볼 때 3%나 가까이에서 니르바나를 접하는 기분이었다.
업데이트
선 대신 바
장점
x축에서 정확한 값이 보인다. 일자를 더 쉽게 읽을 수 있다. 일자를 바로 보여주는 것은 선으로 다양한 일정을 보여주는 것보다 더 정확하다. 스캔하기가 쉬워진다.
단점
각 그래프 사이에 여백이 지나치게 많다. 하지만 바 크기와 거리를 조절함으로써 충분히 해결할 수 있다.
6장 - 요약
이 과정을 통해 얻은 몇 가지 추가적인 인사이트와 함께 본 아티클을 마무리하려고 한다.
1.간단하게 만들기
왼쪽을 보면, 데이터가 두 가지 다른 그래프로 나뉘어져있는 대신에, 전환하여 볼 수 있다. 이는 그래프를 더할수록 지저분해지고 가독성이 떨어지기 때문이다.(오른쪽에서 볼 수 있듯이) 두 가지 선을 보여주는 것도 작동은 하겠으나, 이상적인 것은 아니다. 두 개 이상의 선을 쓰면 뭐가 내가 원하는 그래프이고 아닌지 알아맞히기 게임이 되어버릴 수도 있다.
한 그래프에 선을 여러가지 넣는 것에 대한 마지막 노트: 그들이 완전히 같은 내용의 데이터라면 무슨 일이 생길까? 각자가 서로의 최상단 레이어에 위치하며, 어느 하나를 가리는 방식으로 표현될 것이다.
2.중요한 것에는 하이라이트하기
특정 바나 데이터에 대한 디테일을 보고싶을 때는 그것을 읽기 쉽고 이해하기 쉽게 만들어라. 왼쪽을 보면, 유저가 특정 데이터를 호버링하면 나머지 바는 흐릿해져서 읽기 쉽게 되어져있다. 나머지 바가 완전히 없어지지는 않는다. 왜냐하면 원한다면 선택한 바와 비교할 수 있도록 해야 하기 때문이다. 오른쪽을 보면, 사라지는 효과를 넣지 않아서, 원하는 바를 읽기가 어렵다.
3. Tabular(네모꼴) vs Proportional(탈네모꼴)
*네모꼴: 글자들이 일정한 크기의 사각형 안에서 디자인 된 것
*탈네모꼴: 글자들이 각각의 모양에 맞게 각기 다른 크기로 디자인 된 것
탈네모꼴 폰트를 사용하는 게 죽을 죄는 아니지만, 테이블이나 그래프에 기반한 데이터에 많이 노출되고, 영향을 받는 제품을 만들고 있다면 숫자를 표현하기에 적합한 네모꼴 세컨 폰트를 지정해두는 것이 좋다. 너비와 간격을 일정하게 배열해주기 때문에 숫자가 일렬적으로 나열되어서 보기 좋다. 여기에 좀 더 관심이 간다면 Matthew Strom이 쓴 이 아티클을 읽어보자.
내가 일하는 곳에선 폰트를 여러 개 쓰는 것이 죽일 죄라, 그래프에서도 탈네모꼴 폰트를 쓰긴 한다. 하지만 내 조언은 다음과 같다. : 만약 당신이 당신의 회사나 새로운 회사를 시작해서 폰트를 고를 수 있는 과정에 있다면, 네모꼴 버전을 제공받을 수 있는지 체크해보자. 돈을 더 주고서라도 살 가치가 있다.
저자 : William Bengtsson
원문 링크:https://medium.com/@william.bengtsson/learnings-from-designing-graphs-9033e9034ca0
*무단 전재 및 재배포 금지(링크 공유 가능)
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
