brunch

매거진 꿈꾸는데이터저널리스트

라이킷 28 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 배여운 May 30. 2016

반응형 시각화란 작은 실험

뉴욕타임즈 그래픽팀의 어떤 실험과 도전

아쉽게 Malofiej 24는 올해도 결국 가지 못했다. 직접 현장에서 전 세계 데이터 시각화 전문가(저널리스트)들로부터 많은 것을 배울 수 있는 자리일 텐데... 다음을 기약하며 구글에서 관련 자료나 슬라이드를 뒤적여봤다. NICAR의 경우는 친절하게 모든 강의 슬라이드와 GitHub 링크를 정리해서 주는 천사가 있었기에 기대를 해봤는데 Malofiej는 없다... 그 대신 발표자의 슬라이드를 찾았다. (죽으란 법은 없나 보다)

2016 워크숍은 뉴욕타임즈 그래픽팀 팀장(부장?!) Archie Tse님께서 해주셨다. Amanda Cox, Kevin Quealy와 함께 늘 닮고 싶은 인물 중 한 분이기에 기대하면서 슬라이드를 열어봤다.

슬라이드 제목이 다소 충격적이다. 인터랙티브를 찬양하는 건 아니지만(사람은 피를 봐야 교훈을 얻지요) 뉴욕타임즈 그래픽팀에서 나올 말은 아닌 듯했다. 인터랙티브 데이터 시각화로 얼마나 많은 Malofiej 어워드를 수상 했고, 설리번 상을 몇 번이나 가져갔는데 뭔가 싶었다...

Why We Are Doing Fewer Interactives

특히, 슬라이드는 왜 인터랙티브의 비중을 줄였는지를 설명한다. 무척 공감 가는 말이다. 가장 와 닿는 이유는 역시나 인터랙티브의 비효율성이다. 많은 친구들이 데이터 시각화에 관심을 가지고 공부를 하기 시작하고 있다. 하지만, 시각화의 원리나 이론을 먼저 두들기고 그 다음에 제작을 하기보다는 그 화려함을 구현하기 위해 기술적인 접근부터 하는 경우가 많다. (나 역시 그렇게 2년이란 시간을 겪고 나서야 다시 원점으로 돌아왔다)

인터랙티브가 절대 나쁜건 아니다. 정말 좋은 기획과 데이터 시각화가 잘 어우러진다면 강력한 메시지 전달력을 가지며 많은 정보를 효과적으로 전달해줄 수 있다. 다만 효율적인 데이터 시각화가 먼저란 이야기다.

예를 들면, One-dimension의 성격을 지닌 데이터를 활용하는 Bar chart의 경우 사실 직관적인 게 최고다. 엑셀에서 이미지를 만들던, 구글 차트를 활용하든 색감이나 디자인이 조금 구리다 치더라도 시각화 규칙을 지키고 이미지로 뽑아내면 과정에서 잘못된 게 하나도 없다. 그렇게 만드는 Bar chart는 5분이면 충분하다. 하지만 인터랙티브 한 차트를 만들면서 d3.js를 활용했다고 하면 사람마다 다르겠지만 꽤 걸린다. 색도 바꾸고 나름 신경 쓴 차트를 (width 750px짜리로 만들고) hover 효과도 주고 animation 효과도 줘서 멋있게 만들고 싶을 것이다.

하지만 브라우저를 750px 밑으로 줄이는 순간 잘린다. 차트로서 생명은 끝일뿐 아니라, 스마트폰에서 보면 화난다. 아쉬운 인터랙티브 차트의 현실이다. 보다 친절한 디자이너라면(혹은 개발자라면) 차트의 반응형 코드를 넣어줘서 반응형은 구현하겠지만 단순히 비율만 줄여버리기 때문에 의미가 없다.

잠깐 다른 이야기를 해보면, 해외에선 2010년 이후 많은 미디어에서 폭발적으로 데이터 시각화를 활용하고 있으며 그 관심은 Malofiej 수상 현황을 봐도 알 수가 있다. 뉴욕타임스뿐만 아니라 다양한 언론에서 데이터 시각화를 다루기 시작하고 기사에 많은 차트를 활용하기 시작했지만 위의 저 부분이 고민이었다.

2012년 이후 Malofiej Awards Online 부분 언론사별 수상 현황. 2012년 뉴욕타임즈가 압도적이지만 2015년 이후 다양한 언론사들이 수상하고 있다

그래서 2014-2015년 몇몇 해외 미디어에선 미디어 쿼리란 기술을 활용해서 모바일에서는 아예 차트를 보이지 않게 해줬다. (웹에선 정말 훌륭한 인터랙티브를 만들었다) 잘린 상태로 보여주는 것보단 아예 안 보여주는 게 낫다는 판단을 했다고 난 생각한다. 특히 뉴욕타임즈 Upshot에선 종종 그랬다.

정리하면 우린 다양한 디바이스를 통해 콘텐츠를 소비하기 때문에 데이터 시각화의 분야 역시 이 부분을 간과할 수가 이젠 없다. SBS 데이터저널리즘팀 '마부작침'은 올해 초, <여의도 마블>이란 기사를 통해 큰 이슈를 받았다.

개인적으로 대단하다고 생각했던 건, 모바일에서도 마블 게임을 할 수 있도록 지원했다는 것이다. 품은 많이 갔지만 많은 이들이 다양한 디바이스에서 소비할 수 있었다.

근데 매번 이렇게 긴 시간을 들여 콘텐츠를 만들 수 없는 게 언론사의 현실이다. 뉴스는 매일 생산되고 차트 역시 데이터 역시 많이 활용되고 시각화한다. 그래서 뉴욕타임즈 그래픽팀은 고민했고 실험했으며 2016년 뜬금없이 'Less Interactive'라고 한다. 그 바탕엔 바로 그들의 철저한 고민과 실험이 깔려 있다.

다음 기사를 보자. 인터랙티브 기사는 전혀 아니다. 차이점은 디바이스별로 보이는 시각화가 다르다. 시각화는 html로 제작되었고 텍스트 역시 폰트로 인식된다. 거기에 모바일에서는 해당 지역에 대한 설명이 아래로 내려왔으며 이미지는 정사각형으로 바뀌었다. 별게 아닌 것 같지만 정말 중요하다. 데이터 시각화와 정보 시각화에서 가장 중요한 건 결국 이해하기 힘든 데이터와 정보를 직관적인 그래픽으로 만들어 독자에게 전달하는 것이다. 만약 왼쪽 이미지를 비율만 줄여 모바일에서 봤다면 텍스트는 겹쳐지고 작아져서 알아보지 못했을 것이다. 하지만 뉴욕타임즈 그래픽팀은 시각화를 디바이스별로 다르게 보여준다. html, css로 제작됐지만 개발자가 만든 것이 아니고 디자이너가 만들었다. 게다가 그 디자이너는 일러스트레이터에서 제작만 했을 뿐 코딩을 하지 않았다. 이게 핵심이다. (빠르고 쉽게 효과적인 시각화 제작이 가능하다)

2011년부터 뉴욕타임스는 ai2html이란 sciprt를 제작했다. (얼마 전 워싱턴포스트에서도 이걸 활용한 시각화를 구현했다) 쉽게 말해서 일러스트레이터의 플러그인이라고 볼 수 있는데 디자이너가 일러스트레이터에서 디바이스별 이미지를 각각 제작하고 export 해주면 자동으로 각각의 이미지에 해당하는 html, css가 생성된다. 다음에 기회 되면 step by step으로 튜터리얼을 올릴 예정인데 오늘은 output만 확인해보자. (저기 아래 GIF) 2014년 지방선거 마지막 여론조사 데이터를 바탕으로 시각화를 한 것이다. (시각화의 오류로 많이 언급되는데 그걸 바로잡은 차트다)

ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.

일러스트레이터 결과물을 코드로 변환한다

간단하게 요약하면 일러스트레이터 artboard 위에서 모든 디자인 작업을 한다. 웹, 태블릿, 모바일 각각 제작한다면 3개의 artboard를 세팅하고 width px값을 설정해준다. 다음, sciprt의 도움을 받아서 클릭하면 별도의 폴더가 생성되며 html 문서가 생기고 반응형 javascript를 엮어주면 끝이다. (말만 하면 너무 쉽다?!)

거기에 텍스트가 이미지가 아닌 폰트로 인식이 되는데 코드로 위치 잡아주는 그 고생을 하지 않아도 된다. 그래픽과 텍스트의 조정과 수정이 넘나 쉬운 것!

그 결과 아래 GIF처럼 창의 크기에 따라 다른 차트가 만들어지는 것을 확인할 수 있다. 다만 한계라면 국내 언론의 CMS에 적용시키려고 할까 싶다. 그보다 더 큰 산은 네이버, 다음이란 포털이 있긴 하지만. (정말 외부 스크립트 막는건 이해할 수 없다. 참고로 Infogram, cartoDB등 외부에서 제작한 콘텐츠 iframe은 삽입이 불가능하다. Youtube만 허용되어 있음)

웹에서는 전체를, 태블릿에선 중요한 부분만을 강조, 모바일에선 세로형 차트를 각각 보여주게끔 만들었다

ai2html은 번거로운 세팅 과정과 웹에 대한 약간의 이해가 필요하다. 요즘 진행하고 있는 서울정보디자인연구소 워크숍에서 디자이너들을 대상으로 교육을 해봤는데 조금(?!) 어려워했던 것 같다. 하지만, 언론사 혹은 관련 직무를 꿈꾸는 디자이너라면 개인적으론 꼭 알았으면 좋겠다. 디자이너의 역할은 크다고 생각한다. 그렇기 때문에 data literacy, graph literacy가 필요하고 요즘 워크숍을 통해 계속 강의하고 공유하고 싶다. 워크숍은 6월말 - 7월초 2기가 예정되어 있습니다!

(서울정보디자인 연구소 워크샵 강의 모습)

해외는 데이터 시각화와 정보 시각화 분야가 빠르고 정확한 지점을 향해 달려가고 있다. 우리나라와 비교해보면 부럽기도 하고 무섭기도 하다. 하지만, 누군가는 따라가야 하고 먼저 개발하고 앞서진 못하지만 하지 않는 것보단 하나씩 해보면서 느리게 따라잡아야 하지 않나 싶다. (사실 시각화에 대한 오류를 범하지 않는 것부터 하자!)

얼마전, 데이터시각화와 정보시각화 해외 원서를 엄청 많이 구매했는데, 간략하게나마 소개할 예정이다. 확실히 이론과 기본기를 다루는 해외 원서는 시각화의 근육을 키우는데 큰 도움이 된다.