스크롤링 기반의 인터랙티브 데이터 시각화 콘텐츠 – <대한민국 우울증 보고서> 제작기
‘인터랙티브 콘텐츠’에 대해서 혹시 들어보신 적이 있나요? 최근 다양한 형태의 인터랙티브 콘텐츠에 대한 관심이 늘어나고 있는데요! 인터랙티브 콘텐츠란 한 방향으로 사용자에게 제공되는 콘텐츠가 아닌, 콘텐츠 내에서 사용자가 여러 가지 방식으로 액션하고 이에 따라 변화하는 콘텐츠를 기반으로 쌍방향으로 소통할 수 있는 콘텐츠를 말합니다.
웹 콘텐츠의 경우 웹 페이지에서 사용자가 마우스를 이용해 클릭하거나, 스크롤을 내리거나 등의 방식으로 소통하는 것이 일반적인데요! 사용자의 반응에 따라 변화하는 콘텐츠는 사용자의 참여를 유도해 몰입감과 공감을 더한다는 장점을 갖고 있습니다.
인터랙티브 콘텐츠의 장점은 시각화 콘텐츠와 접목되었을 때에도 그 효과를 발합니다. 특히, 시각화 차트의 경우 그 자체로도 인터랙티브 요소를 더해 ‘인터랙티브 시각화 차트’로서 사용자의 자유로운 데이터 탐색과 인사이트 도출을 가능하게 하는데, 인터랙티브 시각화 차트를 활용한 인터랙티브 콘텐츠는 데이터 스토리텔링을 강화하는 동시에, 사용자의 데이터 활용 경험을 가능하게 하는 것이 가장 큰 장점입니다.
이에 따라 해외 유수의 언론사 -대표적으로 뉴욕타임즈, 워싱턴포스트 등-에서는 인터랙티브 데이터 시각화 콘텐츠를 바탕으로 데이터 저널리즘을 실현하고 있습니다. (제가 여러 채널을 통해 공유하고 있는 시각화 콘텐츠 사례 중 다수가 이들 언론사인 이유도 여기에 있습니다!) 또 해외의 여러 기업은 자사의 데이터를 활용한 인터랙티브 시각화 콘텐츠를 제작, 이를 바탕으로 브랜딩, 마케팅을 진행하고 있습니다.
뉴스젤리는 데이터를 활용한 인터랙티브 시각화 콘텐츠를 제작한 경험이 있는데요! 오늘은 의료데이터를 활용한 인터랙티브 시각화 콘텐츠 <우울증 보고서>의 제작 후기를 통해 인터랙티브는 어떤 과정으로 만들어지고, 제작 과정상 어떤 점들이 고려되는지 등을 이야기해보고자 합니다.
이 글을 다 읽고 나시면, 인터랙티브 콘텐츠는 무엇인지 또 왜 효과적인지 공감하실 수 있으리라 생각합니다.
의료데이터 시각화 콘텐츠 <대한민국 우울증 보고서>란?
뉴스젤리가 제작하고, 서울신문과 공동 발행한 <대한민국 우울증 보고서>는 2015년 건강보험심사자료 데이터를 활용한 대한민국 우울증 환자 및 치료 현황에 알아보는 인터랙티브 시각화 콘텐츠입니다. 웹 콘텐츠 페이지 내에서 사용자가 마우스 스크롤을 내리는 액션을 하면, 이에 따라 데이터 시각화의 패턴이 달라지는 방식으로 콘텐츠를 기획 및 제작하였습니다.
<대한민국 우울증 보고서>, 어떻게 만들어졌나?
1. 시각화 콘텐츠의 주제 기획과 데이터 정제하기!
데이터 시각화 콘텐츠의 핵심은 뭐니 뭐니해도 데이터입니다. <대한민국 우울증 보고서>는 2015년 건강보험심사자료 데이터를 활용했습니다. 데이터에는 2015년 한 해 동안 진료받은 환자의 명세서 내역, 진료 내역, 상병 내역 등 건강보험진료통계 웹 사이트를 통해 공개되지 않은 많은 양의 정보를 포함하고 있습니다.
데이터 시각화 콘텐츠의 기획 단계에서는 활용 데이터가 포함하고 있는 필드 정보를 확인하고, 도출 가능할 것으로 예상되는 인사이트를 바탕으로 주제의 방향을 설정합니다. 데이터를 리뷰한 뒤에 이뤄진 논의에서는 특정 질병 중심의 분석, 병원 평가 정보 분석, 의약품 처방 현황 분석 등이 언급되었고, 이 중 특정 질병에 대한 분석으로 ‘우울증’을 주제로 한 콘텐츠를 제작하기로 하였습니다.
우울증의 현황을 효과적으로 보여주는 콘텐츠의 세부 파트는 총 4개로 1) 대한민국 우울증 환자 현황, 2) 우울증 환자 진단 및 진료 현황, 3) 우울증 치료 현황, 4) 당신의 우울증 보고서(탐색형 대시보드)로 구성하였습니다. 이를 위해서 각 파트별로 필요한 데이터를 별도로 수집 및 정제하여 활용합니다.
- 1) 대한민국 우울증 환자 현황
- 보건 의료 빅데이터 개방 시스템의 건강보험진료 통계 데이터를 다운로드 한 뒤 정제
- 2) 우울증 환자 진단 및 진료 현황
- 2015년 건강보험심사자료 데이터 중 우울증 진단 경험이 있는 환자 데이터 샘플링 및 추출
- 3) 우울증 치료 현황
- 2015년 건강보험심사자료 데이터 중 우울증 진단 경험이 있는 환자 데이터 샘플링 및 추출
- 항우울제의 종류, 정신요법 치료에 대한 정의 등 외부 정보는 리서치 후 데이터 형태로 정리하여 활용
2. 스크롤 기반의 쌍방향 커뮤니케이션, 콘텐츠는 인터랙티브하게!
주제 선정, 상세 구성 기획, 데이터 수집 및 정제의 준비 과정을 거친 <대한민국 우울증 보고서> 콘텐츠는 스크롤링 기반의 인터랙티브 데이터 시각화 콘텐츠 형태로 제작하였습니다.
스크롤링 기반의 인터랙티브 콘텐츠는 웹 페이지 간의 이동 없이 하나의 페이지 안에서 독자가 스크롤링을 통해 콘텐츠를 소비하는 방식입니다. 주로 스토리텔링을 목적으로 하는 콘텐츠에서 쉽게 볼 수 있는 사례이기도 합니다. <대한민국 우울증 보고서> 콘텐츠는 독자의 스크롤링을 통해 데이터 인사이트를 쉽게 알 수 있도록 제작하였습니다. 따라서 앞서 언급한 4가지의 세부 파트를 차례대로 확인할 수 있습니다.
특히 단순히 콘텐츠의 세부 파트가 순차적으로 이어지는 것에서 나아가, 마우스 스크롤링에 따라 차트가 연결된 상태에서 변화하는 모습을 보여주는 인터랙티브 효과 활용에 집중하였습니다. 흔하지 않은 차트 간 인터랙션을 통해 독자의 몰입도를 높이기 위한 목적을 달성하기 위한 선택이었습니다. 글로만 보면 어떤 효과인지 이해하기가 쉽지 않은데요! 각 파트를 사례로 자세히 알아보겠습니다.
파트 1), 2)에서는 데이터를 표현하는 하나의 요소로 원(circle)을 활용하였습니다. 원 하나는 우울증 진료 인원 5만 명을 의미하는데요! 스크롤링에 따라 원의 개수, 크기, 위치, 컬러 등의 조건이 변화하도록 하여, 데이터의 변화를 보여주는 동시에 마치 위의 차트와 아래의 차트가 이어지는 것처럼 보이도록 하였습니다.
특히 파트 2)의 시각화를 보면, 그 효과를 보다 직관적으로 경험할 수 있는데요! 먼저 이 파트에서는 우울증 표본 진료 인원 전체가 ‘진료 횟수 100회’, ‘요양일수 100일’, ‘요양 급여비용 100만원’ 등을 기준으로 할 때 어떻게 나뉘는지를 볼 수 있습니다. 스크롤링에 따라 데이터를 나누는 기준이 달라지는데요! 전체 인원수를 나타내는 원의 수는 동일하게 하고 스크롤링에 따라 변화하는 데이터의 기준마다 원의 위치를 다르게 하여 전체 중 구성 비중의 변화를 쉽게 파악할 수 있습니다.
참고로 차트뿐만 아니라, 콘텐츠 전체적으로 차트 옆 왼쪽 텍스트가 자연스럽게 등장하는 효과를 만들기 위해, 마우스 위치에 따라 텍스트의 투명도(opacity)를 다르게 하기도 하였습니다.
마지막으로 파트 4) ‘당신의 우울증 보고서’는 독자가 개인의 정보를 직접 입력하고, 입력한 결과에 따라 개별적인 데이터를 바로 확인할 수 있는 인터랙티브 시각화 대시보드를 구성하였습니다. 콘텐츠 전반부에서 데이터 인사이트를 쉽게 파악했다면, 콘텐츠의 가장 마지막 부분에서는 개인 정보를 선택하여 나만의 데이터 인사이트를 찾으면서, 콘텐츠의 몰입을 더하고 데이터 탐색 및 활용 경험을 각인시키기 위한 목적이라고 할 수 있습니다. 꼭 자신의 정보만 입력해보라는 법은 없으니, 그 외 다양한 조건을 선택하고 그에 따라 달라지는 시각화 결과물을 바탕으로 다양한 인사이트를 찾을 수 있습니다.
3. 데이터와 메시지에 적합한 시각화 유형 활용하기는 기본!
<대한민국 우울증 보고서>를 보면, 익숙한 차트도 볼 수 있고 또 그렇지 않은 차트도 볼 수 있는데요! 파트 2)의 일부, 그리고 파트 3)의 경우에는 데이터의 형태와 전달하고자 하는 메시지에 따라 다소 낯선 형태의 시각화 유형을 활용했습니다. 파트 2)의 마지막 내용인 ‘우울증 동반 주요 질병 현황’은 우울증 진료를 받은 사람들이 우울증과 함께 진단받은 질병에 대한 정보를 시각화한 것으로, ‘동반하여 유발된다’는 의미를 직관적으로 전달하기 위해 우울증 인원을 의미하는 중앙의 버블 주변에 각 질병별 인원수를 의미하는 버블이 서서히 나타나도록 하였습니다.
그뿐만 아니라 동반 질병을 의미하는 원 중 하나에 마우스 오버를 하면, 중앙의 우울증 진료를 받은 인원을 표현한 버블 중 일부가 하이라이팅 되도록 하였습니다. 하이라이팅된 버블은 우울증과 해당 질병을 동반으로 진단받고 진료받은 인원을 의미합니다. 중앙의 시각화 위에는 텍스트로 질병명과 인원수를 텍스트로 표기해 더욱 직관적으로 데이터를 이해할 수 있습니다.
파트 3)은 우울증 치료에 대한 데이터를 시각화하여 보여주는 부분으로, 항우울제 처방 현황 데이터를 시각화하는데 있어서 써클패킹(circle packing)이라는 시각화 유형을 활용했습니다. 그 이유는 써클 패킹이 항우울제의 종류와 종류별 성분 유형 정보를 포함하는 계층형 데이터를 한 번에 시각화 할 수 있는 시각화 유형이기 때문입니다.
더불어 항우울제 성분 이름만으로는 각 성분이 어떤 것인지 알기 어렵기 때문에, 써클패킹의 특정 부분에 마우스 오버를 하면 왼쪽 텍스트 하단에 네모 박스 영역이 나타나게 하고, 해당 성분에 대한 정보를 추가로 볼 수 있도록 하였습니다. 독자는 인터랙티브 콘텐츠 내에서 마우스 액션을 바탕으로 더 많은 정보를 알 수 있습니다.
4. 정확하고 효과적인 스토리텔링을 위해 부가 요소 활용하기
인터랙티브 시각화 콘텐츠의 장점이 스토리텔링임을 생각해보면, 단순히 효과적인 시각화 차트를 활용하는 것에서 나아가 다각도로 콘텐츠를 발전시킬 필요가 있습니다. 시각화 차트 하나를 그려도, 정확히 데이터를 전달하고, 쉽고 빠른 인사이트를 제시하기 위해 부가 요소로 선을 긋거나, 텍스트를 직접 표기하는 등의 방법을 활용하는 것과 같은 맥락이라고 볼 수 있습니다.
<대한민국 우울증 보고서> 콘텐츠에서는 콘텐츠의 메시지 전달, 스토리텔링 강화를 위해 크게 3가지의 부가 요소를 사용했습니다.
하나. 차트 영역 내 어노테이션(annotation) 표기
마우스로 화면의 스크롤을 내리면, 차트 영역 가운데 텍스트가 포함된 네모 박스가 나타납니다. 네모 박스 중앙에는 차트의 핵심 인사이트가 텍스트로 요약되어 있습니다. 빠르게 데이터 인사이트를 확인할 수 있는데요! 때에 따라서는 차트에 레이블을 표시하는 형태로도 표현되었습니다.
둘. 표, 동영상 등 부가 정보 요소 직접 삽입
콘텐츠와 직접적으로 관련하여 스토리텔링을 강화하는 요소는 데이터 인사이트를 이해하는 데에서 나아가 공감하는데 적절한 역할을 합니다. 따라서, 표, 동영상 등을 부가 요소로 콘텐츠 내 삽입하였습니다. 대표적인 예가 우울증 환자의 인터뷰 내용인데, 우울증 진료 인원을 보여주는 파트에서 인터뷰 주요 내용을 텍스트로 확인할 수 있도록 하고, 필요한 경우 관련 영상을 볼 수 있도록 하였습니다.
특히, 관련 영상 보기를 하면 페이지 이동 없이 팝업창에서 동영상을 볼 수 있는데, 부가 정보를 얻기 위해 페이지 이동을 해야 하는 번거로움을 줄이는 동시에 콘텐츠 주제에 대한 몰입을 더하는 효과가 있습니다.
셋. 텍스트 강조 및 하이퍼링크 연결
콘텐츠 전반적으로 차트 왼쪽에는 해당 차트의 정보와 주요한 인사이트를 요약한 줄글을 볼 수 있습니다. 기사 형태의 줄글 가운데 핵심 정보에 해당하는 부분은 텍스트의 컬러를 다르게 하여 강조하였습니다. 시각적으로 빠르게 인사이트를 확인할 수 있어서, 흔히 사용하는 방법입니다.
또 부가적인 정보로 전달해야 하는 양이 많은 경우, 하이퍼링크를 걸어서 아예 별도의 페이지 링크로 이동할 수 있도록 하였습니다. 콘텐츠 전체의 흐름을 방해하지 않으면서도, 더 많은 정보를 알고 싶은 독자에게 가이드가 되기 위함입니다.
효과적인 데이터 인사이트 전달과 스토리텔링 강화를 위한 인터랙티브 콘텐츠
지금까지 살펴본 <대한민국 우울증 보고서> 인터랙티브 데이터 시각화 콘텐츠를 통해 우리는 무엇을 알 수 있을까요? 정리하자면, 인터랙티브 데이터 시각화 콘텐츠를 만들기 위해서는 적합한 데이터를 수집하고 정제하는 과정이 필요하고 이를 효과적으로 표현하기 위해 적합한 데이터 시각화 유형과 인터랙티브 요소를 활용하게 되는 것을 알 수 있습니다. 여기에 더해 차트가 나타나는 방식, 또 부가 정보를 추가로 제공하는 방식에 있어서 사용자 경험을 고려하여 콘텐츠를 설계하고 구현해야한다는 것 역시 알 수 있습니다.
데이터 시각화가 효과적으로 데이터 인사이트를 전달하는데 강점이 있다면, 인터랙티브 콘텐츠는 스토리텔링이 강화될 수 있도록 독자의 관심을 유도하고 집중할 수 있도록 하는데 강점이있으므로, 이 둘이 적절히 합쳐진다면 우리는 데이터를 통해 누구나 효과적으로 설득할 수 있다고 생각합니다. 또 개인적으로는 국내의 경우 데이터 시각화 분야에 있어서 인터랙티브 콘텐츠의 활용이 ‘흥미’ 위주의 개인화 콘텐츠가 대다수라, 데이터 스토리텔링에 집중한 인터랙티브 시각화 콘텐츠 제작에 대한 시도도 이루어지면 좋을 것 같다는 생각이 들기도 합니다. (물론, 현재의 모습이 이러한 것에도 다 이유가 있겠지만요..!)
오늘의 글로 인터랙티브 콘텐츠의 효과, 또 데이터 시각화를 중심으로 한 인터랙티브 데이터 시각화 콘텐츠의 효과에 대해 관심을 갖게 된 분들이 늘어나길 바라며, 글을 마무리합니다!
BY. 브랜드마케팅팀 강원양
