[블로터] 같은 데이터, 다른 인터랙티브 그릇

모바일은 소비자가 있는 모든 분야에서 기본 조건이 됐다. 뉴스도, 쇼핑도, 금융도 모바일 안에서의 생존과 성공을 궁리한다.

PC를 전제로 하던 인터랙티브 데이터 시각화도 흐름을 피할 수 없게 됐다. 그런데 인터랙티브 시각화에 담아낸 방대한 양의 정보를 모바일에서 어떻게 풀어내는가에 대한 답은 국내도, 해외도 아직까지 찾아가는 단계로 보인다. 어떤 언론사는 PC로 보는 독자에게는 인터랙티브 시각화를, 모바일 독자에게는 이미지 형태로 데이터 시각화 콘텐츠를 제공한다. 어떤 언론사는 모바일에서도 동일하게 구동될 수 있도록 아예 간단한 형태의 인터랙티브 시각화만 삽입하기도 한다.

하나를 기획할 때마다 가로와 세로라는, 완전히 다른 두 바탕에서 어떻게 구현할 것 인가에 대한 고민이 많았다. 서로 다른 성격을 고려하지 않으면 나중에 디자인이나 개발 단계에서 품과 시간이 몇 배로 드니까. 그동안 만들었던 것들을 바탕으로 인터랙티브 시각화를 모바일에서 어떻게 구현했는지 경우의 수를 정리해보니 3가지로 나뉘었다.

1. 시각화 형태부터 요소 배치까지 완전히 바꾸는 경우
2. 요소 배치를 바꾸는 경우
3. 세로형으로 제작하는 경우

시각화 형태부터 요소 배치까지 완전히 바꾸는 경우

넓은 화면을 전제로 많은 정보를 담은 시각화가 여기에 속한다. 좁은 화면에서 정보를 한 번에 소화하기 힘들기 때문에 한 화면에 보이는 정보의 양을 잘게 나누고, 사용자 선택에 따라 데이터와 그래프가 변하도록 재구성했다. 넓은 가로 화면은 여러 그래프를 나열하고 펼쳐 보기 좋고, 좁은 세로 화면은 정보를 압축한 1개의 그래프를 보는 데 적합하기 때문이다.

예시 1) ‘힘내라 도시 : 건강 편’

PC에서는 각 지자체의 ‘힘내라 도시’ 지수를 동시에 볼 수 있도록 했다. 광역 단위를 선택하면 해당 기초 단위 지방자치단체의 건강 지수 그래프가 나타나도록 했다.

반면 모바일에서는 한 화면 안에서 사용자가 선택한 지역의 힘내라 도시 ‘살기 힘든 도시’ / ‘건강한 도시’만 비교하도록 했다. 그 이유는 ‘힘내라 도시’ 기획에서 사용자가 가장 궁금한 정보는 사용자가 궁금한 특정 지역에 대한 지수라고 판단했기 때문이다.

예시 2) 전국 시군구별 변호사 수 지도

지도 형태의 시각화는 넓은 화면에서 사용자를 시각적으로 압도하고, 동시에 방대한 정보를 직관적으로 표현할 수 있다. 그러나 모바일에서는 역으로 정보가 너무 많고, 불러오는 시간이 오래 걸리고, 광활한 화면이 주는 압도감을 가져갈 수 없다는 단점이 있다.

전국 시군구별 변호사 수 지도도 마찬가지였다. 한 가지 다행이었던 건, 이 지도는 카토그램 지도여서 지역별로 쪼갤 수 있었다는 점이었다. PC에서는 전국 지도를 보여주고, 모바일에서는 선택한 지역에 해당하는 카토그램만 나타나도록 했다.

1번에 속하는 예시들은 모두 1개의 주제당 선택할 수 있는 가짓수가 많았다. 예를 들면 전국 시군구에 대한 시각화는 전국 시군구 226개, 20대 국회의원 재산 시각화는 300개의 재산 데이터를 선택할 수 있다.

요소 배치를 바꾸는 경우

데이터 시각화 형태는 PC·모바일이 동일하고 제목과 버튼, 텍스트 등의 요소 배치만 적합하게 바꾼 경우다.  정보의 양이 내용을 나누지 않아도 모바일에서 소화할 수 있을 정도의 양이거나, 시각화 형태가 요소를 분리하기 힘든 형태가 여기에 속한다.

예시) 박근혜 대통령 – 최순실 게이트 관계도

박근혜-최순실 게이트에 연루된 사람들의 관계를 표현한 이 관계도는 각 요소를 분리하기 힘들어서 모바일에서도 PC의 형태를 그대로 가져온 경우다. 네트워크 시각화도 지도처럼 모바일에서 소화하기 힘든 시각화 유형이다. 네트워크 시각화를 모바일에서 구현하려면 기존의 형태와 다른 유형으로 재구성해야 할 것 같은데, 연결망 자체가 보여주는 의미가 있어 어떻게 해야 할지 고민되는 부분이다.

처음부터 세로형으로 만드는 경우 

데이터 시각화 형태가 세로형에 적합하거나, 모바일에 적합한 주제에 해당한다.

예시) 항공기 지연 확률

항공기 출발·도착 정보를 분석해 제작한 항공기 지연 확률 조회 시각화는 모바일에 맞춰 기획했다. 모바일 이용자가 많다는 사실과 기사와 함께 발행되는 시각화라는 사실과 별개로, 항공기 지연 정보가 궁금한 사람들은 주로 이동 중이거나 공항에서 모바일로 조회할 확률이 높을 것이라는 가정이었다. 그래서 처음 접속하면 사용자가 출발하는 공항을 선택하고, 항공사를 선택하면 정시 출발율을 보여주는 형태로 제작했다. 시각화 형태는 가장 기본적인 세로형 막대그래프를 선택했다.

각 예시 별로 다른 특징을 간단하게 서술했지만 PC와 모바일에서의 인터랙티브 시각화 구현은 기기의 특성에서 비롯된 사용자의 조작 특성, 데이터 시각화 형태, 하다못해 요소의 글씨 크기 하나까지 매우 많은 요소가 달라진다. 이렇게 다른 특성 때문에 어떤 방법이 적합한지에 대한 방법론부터, 인터랙티브 시각화를 모바일에서 제공해야 하는가에 대한 근본적인 물음까지 다양한 고민도 함께 존재한다. 그렇지만 이 모든 물음의 시작은 보다 많은 사람들에게 보다 쉽게 보다 적합한 형태로 제공해야 한다는 필요 아닐까.