brunch

You can make anything
by writing

C.S.Lewis

by 강원양 Oct 06. 2017

<잃어버린 대통령> 제작기

진보와 보수 20년, 데이터로 보는 정권 성적표

뉴스젤리 콘텐츠팀은 2017년 4월 말, 제 19대 대선을 맞아 지난 20년 진보와 보수, 역대 정권의 성과를 데이터로 알아보는 <잃어버린 대통령 – 진보와 보수 20년, 데이터로 보는 정권 성적표> 인터랙티브 데이터 시각화 콘텐츠를 발행하였다. 

잃어버린 대통령 – 진보와 보수 20년, 데이터로 보는 정권 성적표

이번 포스팅에서는 <잃어버린 대통령 – 진보와 보수 20년, 데이터로 보는 정권 성적표>(이하 ‘<잃어버린 대통령>’) 콘텐츠의 제작기를 공유하되, 앞서 2월 포스팅을 통해 소개 한 바 있는 책 ‘『Data Visualisation : A Handbook for Data Driven Designs에서 언급된 데이터 시각화 콘텐츠 제작 프로세스 각 단계에 맞춰서 리뷰해보고자 한다.




데이터 시각화 콘텐츠 제작의 4단계

데이터 시각화 프로세스, 『Data Visualisation : A Handbook for Data Driven Designs


책 『Data Visualisation : A Handbook for Data Driven Designs』은 데이터 시각화 콘텐츠 제작의 흐름을 4단계로 소개한다. 각 단계는 ‘1. Formulating your Brief’, ‘2. Working with data’, ‘3. Establishing your editorial thinking’, ‘4. Developing your design solution’이다. 4개의 단계는 순서대로 한 방향으로만 이어지는 것이 아니며, 각 단계 사이의 유기적인 이동을 반복하며 콘텐츠가 완성된다. 



Stage 1. Formulating your Brief 


‘Formulating your Brief’는 데이터 시각화 콘텐츠 제작에 있어서 주제 선정, 문제 정의 등 콘텐츠의 전반적인 내용을 기획하고 설계하는 첫 번째 단계이다. <잃어버린 대통령> 콘텐츠는 1) 전국민적인 관심이 모이는 ‘19대 대선’을 주제로 2) 인터랙티브 데이터 시각화 콘텐츠를 제작하는 것을 기본 방향으로 설정하고 3) 시의성에 맞춰서 제작 및 발행이 가능한 형태의 결과물을 만들고자 하는 의도에서 만들어졌다. 


콘텐츠의 세부 주제, 콘셉트 등에 대한 아이디에이션 단계에서는 다양한 방법을 통해 아이디어를 구상하고 이를 공유한다. ‘19대 대선’을 주제로 풀어낼 수 있는 데이터를 먼저 리스트업하고 전달할 수 있는 메시지가 무엇인지 제시하는 방법, 사람들의 흥미를 이끄는 콘셉트 안을 구상한 뒤 활용 가능한 데이터를 확인하는 방법 등이 있다. <잃어버린 대통령> 콘텐츠는 미국 언론 뉴욕타임즈의 ‘You Draw It: What Got Better or Worse During Obama’s Presidency’ 콘텐츠에서 아이디어를 얻어 제작되었다.

뉴욕타임즈, You Draw It: What Got Better or Worse During Obama’s Presidency

뉴욕타임즈 콘텐츠에서 독자는 오바마 정권의 성과를 예상해 차트 위에 수치를 그려보고, 이에 대한 실제 데이터를 확인할 수 있다. ‘대선’을 주제로 함에 있어서 지난 정권을 평가한다는 점, 이미 완성된 시각화 차트를 통해 일방적으로 메시지를 전달하는 것이 아니라, 인터랙션 요소를 활용해 콘텐츠에 대한 독자의 적극적 개입을 유도하여 데이터 시각화를 경험할 수 있도록 한 점이 매력적이었다.


이런 점을 차용해 <잃어버린 대통령>은 최근 4개 정권(김대중, 노무현, 이명박, 박근혜)에 대한 성과를 비교하는 방식으로 제작하기로 하였다. 각 정권에 대한 성과를 비교할 수 있는 동시에 정치에서 중요한 의미를 갖는 진보(김대중, 노무현), 보수(이명박, 박근혜) 정권의 성과를 비교할 수 있다는 점이 강점이 된다. 또한 진보, 보수가 주장하는 주요한 가치와 실제 정권의 성과가 일치했는지를 확인할 수 있도록 해 독자 입장에서 편견을 깰 수 있는 기회가 될 것으로 보았다.



Stage 2. Working with data

‘Working with data’는 단어 그대로 시각화 이전에 필요한 데이터를 수집하고 정제하여 준비하는 단계이다. 본격적인 데이터 수집 이전에 활용 가능하고, 필요한 데이터 지표가 무엇인지를 파악하는 것이 우선이다. 

정권별 지표 선정을 위한 데이터 리서치 및 정리 결과

역대 정권을 평가할 수 있는 데이터 지표를 리서치 및 리스트업 하였다. 공공데이터를 개방하는 주요 포털에서는 국민의 삶과 관련된 지표를 선정하여 제공하고 있다. 통계청의 국민 삶의 질 지표E-나라지표의 국가 주요 지표 등이 대표적이며, 이를 활용해 영역별(경제, 문화, 환경, 복지, 교육, 행정 등) 지표를 리스트업 했다. 이외에도 정권 평가의 기준이 될 수 있는 지표(예로 정부발의 법률안 처리)는 개별적으로 리서치하여 추가하였다. 동시에 각 지표별 데이터 출처, 데이터 수집 가능 기간을 정리했다. 데이터 수집 가능 기간은 김대중부터 박근혜 정권을 비교하기 위해 해당 기간의 데이터가 있는지를 판단하는 기준으로 사용하였다. 

지표별 차트 시각화 사례

<잃어버린 대통령> 콘텐츠에 활용한 데이터는 대다수 통계형 데이터이므로, 공공데이터를 개방하는 통계청, E-나라지표, 한국은행 등의 데이터 개방 포털을 통해 수집하였으며, 특별한 정제 과정을 거치지 않았다. 각 포털을 통해 수집한 데이터는 구글 스프레드시트 내에서 간단한 차트로 시각화 해 인사이트를 바로 확인하였다. 역대 정권의 성과를 비교하는 동시에 진보, 보수 정권에 대해 갖고 있는 편견을 깰 수 있도록 한다는 콘텐츠 콘셉트에 따라 각 지표별 인사이트는 다수의 지표 중 주요 지표를 선정하는데 중요한 판단 기준이 되었다.



Stage 3. Establishing your editorial thinking 


‘Establishing your editorial thinking’은 독자에게 전달하고자 하는 메시지를 구체화하고, 실제 콘텐츠의 구성을 상세하게 기획하는 단계로 보면 된다. 앞서 두 단계(1. Formulating your Brief, 2. Working with data)를 통해 준비된 것들을 기반으로 <잃어버린 대통령> 콘텐츠 콘셉트 및 구성을 구체화했다.


구체적인 기획 방향을 두고 2개의 방안, 1안 – 영역별(경제, 교육 등) 별 지표로 보는 역대 정권 비교, 2안 – 진보, 보수를 기준으로 한 정권 비교가 제시되었다. 지표별 차트가 줄줄이 이어져 다소 지루할 수 있는 1안 대신 사람들의 흥미를 끌 수 있는 콘셉트를 가진 2안으로 콘텐츠의 기획 방향을 확정하였다. 

콘텐츠에 활용된 context

이후 기획 방향에 따라 콘텐츠 안에 들어갈 내용(context)을 정리하였다. 경제, 문화 등의 영역별로 구분하였던 지표는 진보와 보수가 대립하는 주요 가치 ‘작은 정부 vs 큰 정부’, ‘성장 vs 분배’, ‘안보 vs 평화’에 따라 재분류하였다. 또한 정권에 대한 직접적인 평가 외 정권의 성과로 인해 국민의 삶이 어떻게 변화했는지를 확인할 수 있는 지표를 하나의 분류로 활용하였다. 최종적으로 4개의 분류 기준에 따라 25개 지표를 선정하였다.


시각화 차트와 함께 사용한 텍스트는 각 지표에 대한 기본적인 사전 설명과 독자 인터랙션 이후 등장할 인사이트 내용으로 나누어 작성하였다. 동시에 분류별 지표들의 배치 순서를 결정했다. 순서는 각 지표가 가진 의미, 인사이트 등 내용상 연결성을 고려하였다. 콘텐츠의 첫 화면에 보일 타이틀과 기획 의도 텍스트는 콘텐츠 제작이 마무리되는 시점에 논의를 거쳐 결정하였다. 이 시점에 작업을 하는 이유는 콘텐츠의 모든 구성 요소가 최종적으로 확정, 디자인 요소까지 반영이 완료된 시점이 되어야 콘텐츠의 전체적인 톤 앤 매너 등을 고려해 가장 적합한 타이틀을 선택할 수 있기 때문이다. <잃어버린 대통령> 콘텐츠의 타이틀과 기획 의도 텍스트는 팀원 각자가 아이디어 및 초안을 작성하여 제안, 단어와 문장을 함께 수정하는 과정을 통해 최종 결정되었다.



Stage 4. Developing your design solution 


‘Developing your design solution’ 단계는 데이터 시각화 유형을 선정 및 구현, 인터랙션, 어노테이션(annotation) 등의 요소를 더해 디자인적 관점에서 콘텐츠를 완성하는 단계이다. 콘텐츠의 높은 완성도는 디테일한 요소를 얼마나 고려하느냐에 따라 달려 있으므로, 제작 완료의 이르기까지 세심히 살펴야 한다. 

차트 인터랙션

라인 차트 유형을 활용하되 독자가 수치를 예상해 그려보는 기간 부분의 라인은 감춰두고, ‘숨겨진 영역 보기’를 클릭할 시 실제 수치에 해당하는 라인이 그려지는 동시에 차트 하단에 텍스트(인사이트)가 등장하도록 하였다. 

숨겨진 영역 클릭하여 실제 데이터 확인하기

차트 인터랙션 이후의 텍스트 등장 방식도 차이가 있다. 뉴욕 타임즈 콘텐츠는 독자가 차트의 빈 영역에 선을 그린 후 ‘show me how i did’ 버튼을 클릭해야만 실제 데이터를 나타내는 선과 하단 영역에 텍스트가 등장한다. 반면 <잃어버린 대통령> 콘텐츠에서는 독자가 차트의 빈 영역을 그리지 않고서도 ‘숨겨진 영역 보기’ 버튼을 클릭하면 실제 데이터와 하단의 텍스트가 등장하도록 하였다. 콘텐츠 내 25개 차트 모두 독자가 선을 그려야만 볼 수 있다면, 독자 입장에서 다소 힘들 수(혹은 귀찮을 수) 있다고 판단하였고 빠르게 콘텐츠를 소비하는 유형의 독자를 고려한 판단이었다.


더불어 독자 인터랙션 이후 등장하는 텍스트의 투명도를 조절하여 ‘숨겨진 영역 보기’ 버튼 뒤에 배치하였다. 독자 입장에서 흐릿하게 무언가 쓰여 있음을 짐작하게 해, ‘숨겨진 영역 보기’ 버튼 클릭에 대한 유도율을 높이고자 하였다. 등장한 텍스트 문장 가운데에서 중요한 부분은 미리 볼드(굵게) 스타일을 적용하여 독자가 집중할 수 있도록 하였다.


차트 안의 디테일을 살펴보면, 선 색상은 진보, 보수 비교 콘셉트에 맞춰 비교할 수 있도록 진보는 파란색 계열, 보수는 빨간색 계열로 대비되도록 하였다. 또한 각 정권 초기와 말기, 특이점을 보이는 데이터의 경우 숫자 레이블을 표시하였고, 선과 겹치지 않도록 위치를 배치했다. y축의 데이터 범위와 단위 텍스트는 차트 안쪽 영역에 배치했는데, 이는 모바일 화면에서 차트의 크기를 최대로 확보하기 위함이다. 

분류 기준별 빠르게 이동하기 – 퀵필터

부가적인 요소로 대통령 얼굴 일러스트 이미지를 차트 위에 배치해 재미를 더했다. 또한 지표를 분류한 4개의 기준은 페이지 상단에 고정해 각 분류 기준으로 빠르게 이동할 수 있게 하였고, 데이터 출처는 각 지표 타이틀 텍스트에 하이퍼링크로 연결하였다. 

타이틀 및 일러스트 효과

콘텐츠 첫 화면 타이틀은 텍스트의 투명도 조절하여 페이지 접속 시 서서히 등장하는 느낌을 주는 동시에 청와대는 회색 컬러만을 사용하였다. 이는 잃어버린 정부, 국민의 기대에 못 미친 정치에 대한 허무함 등을 간접적으로 표현한 것으로 전체적인 콘텐츠의 의도를 반영한 것이다. 마지막으로 더 많은 사람들이 볼 수 있도록 콘텐츠 최상단 우측에 페이스북, 트위터로 바로 공유할 수 있는 기능을 추가하였다.




지금까지 데이터 시각화 콘텐츠 제작의 4단계에 맞춰서 <잃어버린 대통령 – 진보와 보수 20년, 데이터로 보는 정권 성적표> 콘텐츠 제작기를 소개했다. 이번 콘텐츠는 대선에 대한 사람들의 높은 관심에 따라 웹 발행 이후 소셜상에서 뜨거운 반응을 얻기도 했다.


* 이 글의 원문 출처는 뉴스젤리 블로그 '[콘팀 블로그] <잃어버린 대통령 - 진보와 보수 20년, 데이터로 보는 정권 성적표> 제작기'입니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari