데이터 시각화 콘텐츠를 제작할 때, 기본적으로 데이터를 정확하고 효과적인 시각화 유형으로 표현하는 것 외에도 고려해야 하는 여러 요소가 있습니다. 예를 들어 독자의 인터랙션에 따라 필터링 된 데이터를 보여주도록 하는 요소를 넣을 수도 있고, 시각화 차트 내 특정 부분을 강조하기 위해 어노테이션(annotation)이나 하이라이팅(highlighting) 요소를 적극적으로 활용할 수도 있습니다. 이와 같은 요소는 콘텐츠를 보는 독자에게 의도한 메시지를 정확히 전달해 콘텐츠의 스토리텔링을 강화하기 위한 장치로 활용됩니다. 오늘은 같은 맥락에서 데이터 시각화 콘텐츠에 애니메이션이 어떻게 사용되고, 어떤 효과를 가져오는지에 대해서 알아보고자 합니다.
시계열에 따른 데이터 변화, 자동으로 보여주기
일반적으로 데이터 시각화에서 애니메이션 효과의 활용은 하나의 화면 또는 한순간에 다 보여주지 못하는 시각화 유형의 한계를 극복하기 위해 사용됩니다. 사실 이러한 한계는 독자가 직접 데이터를 필터링할 수 있게 하거나, 특정 조건을 입력할 경우 결괏값을 보여주는 방식으로도 극복할 수 있지만, 애니메이션 효과를 활용하면 독자가 어떤 인터랙션을 하지 않더라도 자동으로 데이터의 변화를 보여주어 시각적으로 데이터에 집중하게 하는 효과가 있습니다. 움직이는 차트를 보는 순간 나도 모르게 차트에서 달라지는 것이 무엇인지 찾고 있는 모습을 통해 그 효과를 생각해 볼 수 있습니다.
가장 일반적인 사례로는 시계열 변화에 따른 데이터의 변화를 자동으로 보여주는 것입니다. 뉴욕타임스(The New York Times)의 ‘It’s not your imagination summers are getting hotter’ 기사 상단에 삽입된 시각화 차트는 10년을 기준으로 변화하는 여름 기온 분포를 보여줍니다. 최근으로 올수록 ‘hot’, ‘extremely hot’ 부분의 분포가 증가하고 있음을 알 수 있습니다. 뿐만 아니라 1983-1993의 데이터 시각화는 시계열 데이터 변화하여도 회색 음영으로 남아있어, 기간별 데이터를 시각적으로 비교할 수 있습니다.
<Quartz>의 ‘A beautiful data animation show unprecedented development of China’s rail system’은 데이터의 변화를 자동으로 보여줄 뿐만 아니라 독자가 이를 조정할 수 있는 요소도 포함하고 있습니다. 기사 페이지에 접속하면 자동으로 시계열 변화에 따라 변화하는 데이터를 확인할 수 있습니다. 2008년부터 2016년까지 순차적 변화에 따라 중국 도시별 기차 노선의 확장 현황 변화를 알 수 있습니다. 한 번 2016년까지 재생된 이후에는 자동으로 반복 재생되는 것이 아니라 좌측 상단의 ‘Play/Pause’ 아이콘을 독자가 클릭해 데이터 변화를 확인할 수 있습니다. 다소 긴 기간, 여러 항목의 데이터 변화를 보여주므로, 독자의 인터랙션을 바탕으로 데이터 탐색을 가능하게 한 점이 인상적입니다.
<Flowing Data>의 ‘A Day in the Life of Americans’은 앞선 사례와 달리 시계열 변화의 기준이 ‘분(minutes)’인 점이 차이입니다. 1,000명의 미국인이 하루 동안 평균적으로 하는 일을 시각화하였는데, 점 하나는 미국인 한 명을 의미하며 1분 단위로 각 개인이 하는 활동에 따라 컬러와 위치가 달라집니다. 시각화 차트 외 기사를 읽지 않아도 애니메이션을 보고 있으면 각 시간대별로 미국인이 가장 많이 하는 활동은 무엇인지 알 수 있습니다. 위 이미지상 애니메이션에 따른 데이터 변화를 보면 11시 30분쯤에 잠을 자는 사람이 늘어나는 것을 시각적 패턴을 통해 확인할 수 있습니다.
낯선 유형의 데이터 시각화, 읽는 방법 알려주기
Google News Lab ‘The Rhythm of Food’
<구글 뉴스 랩>(Google News Lab)의 ‘The Rhythm of Food’은 음식 키워드 검색 트렌드 데이터를 시각화 한 콘텐츠입니다. 해당 콘텐츠에서 애니메이션은 낯선 시각화 유형을 읽는 방법을 알려주기 위한 목적으로 사용되었습니다. 연도별 X 월별 키워드 검색량을 시각화할 때 연도 변수는 컬러로 인코딩하고 월별 검색량 변수는 좌측 원형 시각화 내 월별 영역 내에 표현합니다. 참고로 각 연도별 X 월별 검색량이 클수록 조건별 데이터를 나타내는 조각은 큰 반지름 위에 위치합니다.
3차원 데이터 시각화의 Overview로 독자 시선 사로잡기
3차원 형태의 데이터 시각화 유형을 바탕으로 시각화 인사이트를 도출하기 위해서는 각각의 면을 볼 수 있는 탐색 기능이 필수적입니다. 워싱턴포스트<The Washington Post>의 ‘Here’s every total solar eclipse happening in your lifetime. Is this year your best chance?’은 전 세계 일식·월식 흐름을 3차원 구의 형태인 지구본 위에 시각화, 자동으로 회전하도록 하였습니다. 독자가 지구본 위에서 어떤 인터랙션을 하지 않아도 현재 화면에서 보이는 지역 외 감춰진 지역이 애니메이션에 따라 자동으로 볼 수 있습니다. (물론 지구본 위에서 마우스 드래그를 해 원하는 지역의 데이터를 바로 확인해 볼 수도 있습니다.) 뿐만 아니라 흔치 않은 형태의 애니메이션 효과로 독자의 시선을 사로잡는 매력적인 요소로서의 효과도 있습니다. 부가적으로는 기사 링크에 접속했을 때 검은색 화면에서 흰색 화면으로 변화하는 애니메이션 효과로 ‘일식·월식’의 의미를 시각적으로 전달한 부분도 인상적입니다.
지금까지 데이터 시각화 콘텐츠에서 애니메이션 효과가 활용된 사례를 살펴보았습니다. 데이터의 변화를 효과적으로 보여줌과 동시에 독자의 시선을 사로잡을 수 있는 요소로서의 활용뿐만 아니라, 나아가 콘텐츠의 이해를 돕는 방법으로 활용되고 있습니다. 뿐만 아니라 콘텐츠 내에서 애니메이션 효과를 gif(움짤)로 만들어 소셜 상 공유하는 경우도 있습니다. 데이터 시각화 콘텐츠를 더욱 빛나게 하는 애니메이션 효과, 시각화 콘텐츠를 살펴볼 때 애니메이션 효과가 어떻게 활용되었는지 관점으로 살펴보는 것도 흥미로운 것 같습니다.
By 브랜드팀 강원양
