<대한민국 우울증 보고서> 제작기
스크롤링 기반의 데이터 시각화 콘텐츠
의료데이터 시각화 콘텐츠 <대한민국 우울증 보고서>뉴스젤리 콘텐츠팀은 2015년 건강보험심사자료 데이터를 활용하여 대한민국 우울증 환자 및 치료 현황에 대해 알아보는 <대한민국 우울증 보고서> 콘텐츠를 제작, 서울신문(기사 : 우울증 앓는 20대… 4년 새 환자 24% 늘어, 20~24세 男 우울증 44% 급증…“취업난·각자도생 경쟁 탓)과 공동으로 발행하였다. 이번 포스팅에서는 <대한민국 우울증 보고서> 콘텐츠 제작기와 함께 제작에 참고한 스크롤링 기반의 데이터 시각화 콘텐츠 사례를 간단히 리뷰해보고자 한다.
<대한민국 우울증 보고서>, 어떻게 만들어졌나?
1. 주제 기획 및 데이터 정제
<대한민국 우울증 보고서>는 2015년 건강보험심사자료 데이터를 활용하였다. 데이터는 2015년 한 해 동안 진료받은 환자의 명세서 내역, 진료 내역, 상병 내역 등 건강보험진료 통계를 통해 공개되지 않은 방대한 양의 정보를 포함한다. 주제 기획 단계에서는 데이터가 포함하고 있는 필드 정보를 확인, 도출 가능한 예상 인사이트를 기반으로 콘텐츠의 방향을 설정하였다. 특정 질병에 대한 분석, 병원 평가 정보 분석, 의약품 처방 현황 분석 등이 언급되었고, 이 중 특정 질병에 대한 분석으로 ‘우울증’을 주제로 한 콘텐츠를 제작하기로 하였다.
콘텐츠는 총 4개의 파트 -1. 대한민국 우울증 환자 현황 2. 우울증 환자 진단 및 진료 현황 3. 우울증 치료 현황 4. 당신의 우울증 보고서(개인화 요소)-로 구성해 우울증 환자 및 치료 현황 전반에 대해 알아보고자 하였다. 각 파트별로 필요한 데이터는 수집 및 정제를 진행했다. 파트 1의 경우 보건의료 빅데이터 개방 시스템의 건강보험진료 통계 데이터를 다운로드 해 정제하였다. 파트 2, 3의 경우 2015년 건강보험심사자료 데이터 중 우울증 진단 경험이 있는 환자 데이터를 샘플링하여 추출하였다. 파트 3은 항우울제의 종류, 정신요법 치료에 대한 정의 등의 정보 리서치, 데이터 형태로 정리하여 활용하였다.
2. 스크롤링 기반의 데이터 시각화 콘텐츠
스크롤링 기반의 데이터 시각화 콘텐츠 <대한민국 우울증 보고서>주제 선정, 상세 구성 기획, 데이터 수집 및 정제 준비 과정을 거친 <대한민국 우울증 보고서> 콘텐츠는 스크롤링 기반의 데이터 시각화 콘텐츠 형태로 제작되었다. 스크롤링 기반의 콘텐츠는 웹 페이지 간의 이동 없이 하나의 페이지 안에서 독자가 스크롤링을 통해 콘텐츠를 구독하는 형태다. 주로 스토리텔링을 목적으로 하는 콘텐츠 사례로 쉽게 접할 수 있다. 따라서 <대한민국 우울증 보고서> 콘텐츠의 독자는 스크롤링을 통해 파트 1부터 파트 4까지의 내용을 순차적으로 확인할 수 있다.
3. Parallax Scrolling을 통한 인터랙션
Parallax Scrolling 사례 – ‘EVERY LAST DROP’Parallax Scrolling(화면을 구성하는 배경 이미지들과 기타 이미지들 간의 움직임이나 동작 시간을 스크롤에 따라 다르게 하는 페이지 구성 방식 - 사례 참고 'Every Last Drop') 기법을 인터랙션 요소로 적용하였다. 이를 통해 독자는 스크롤링을 하면서 콘텐츠 안의 텍스트, 차트 등의 요소가 마치 연결된 것 같은 느낌을 받게 된다.
PART1 우울증 대한민국파트 1, 2에서 데이터를 표현하는 하나의 요소가 우울증 진료 인원의 특정 수를 나타내도록 하고 그 형태를 원(Circle)로 결정하였다. 스크롤링에 따라서 원의 개수, 크기, 위치, 컬러 등 조건에 변화를 주어 상위 차트와 하위 차트가 이어지는 듯한 인터랙션을 주었다.
PART2 우울증 환자특히 파트 2는 우울증 표본 진료인원 전체가 ‘진료 횟수 100회’, ‘요양일수 100일’, ‘요양급여비용 100만 원’ 등의 기준으로 할 때 어떻게 나뉘는지를 표현하였는데, 전체 인원수를 나타내는 원의 수는 동일하게 하고 스크롤링 시 변화하는 기준에 따라서 원의 위치를 다르게 해 구성 비중의 변화를 볼 수 있도록 하였다.
또한 콘텐츠 전체적으로 좌측 텍스트의 경우 스크롤링에 따라서 투명도(opacity)를 다르게 하는 progress를 반영해 자연스럽게 등장할 수 있도록 하였다.
4. 데이터와 메시지에 적합한 시각화 유형
PART2 우울증 환자, 시각화 유형 bubble파트 2의 일부, 파트 3의 경우 데이터의 형태와 전달하고자 하는 메시지(정보)에 따라 파트 1, 2와 는 다른 시각화 기법을 사용하였다. 파트 2의 마지막 내용인 ‘우울증 동반 주요 질병’은 우울증 진료를 받은 인원이 우울증과 함께 진단받은 질병에 대한 정보를 시각화한 것으로 우울증 진료 인원수를 중앙에 나타내고, 그 주변에 질병별 인원수를 버블의 크기로 시각화하였다. 질병을 나타내는 버블 위에 마우스 오버를 하면 우울증 진료를 받은 인원 중 해당 질병으로 진료받은 인원이 하이라이팅 되며 그 수를 텍스트로 표시한다.
PART3 우울증 치료, 시각화 유형 circle packing항우울제 처방 현황, 정신요법 치료 현황을 시각화한 파트 3의 경우 데이터 특성상 계층 정보를 포함하고 있어 시각화 유형으로 서클 패킹(circle packing)을 사용하였다. 명칭만으로는 그 내용을 정확히 알기 어려워 차트 위 특정 항목에 마우스 오버를 하면 해당 항목에 대한 정보를 좌측 텍스트 하단 영역에서 확인할 수 있도록 하였다.
PART4 당신의 우울증 보고서, 대시보드파트 4 ‘당신의 우울증 보고서’에서는 독자가 개인의 정보를 직접 입력하여 조건에 해당하는 데이터를 바로 확인할 수 있도록 대시보드 형태를 구성하였다.
5. 부가 요소를 통한 정보 전달력 향상
콘텐츠 전체적으로 부가적인 요소를 더해 정보 전달력을 높이도록 하였는데, 대표적으로 1) 차트 영역 내 annotation 삽입 2) 텍스트 강조 및 하이퍼링크 연결 3) 표, 동영상 등 요소 삽입을 꼽을 수 있다.
1) 차트 영역 내 annotation 삽입
차트 영역 내 annotation 삽입스크롤링과 함께 텍스트가 포함된 박스가 등장해 각 장표별 핵심 정보를 요약한다. 경우에 따라서 차트의 레이블 형태로 텍스트를 표시하기도 한다.
2) 텍스트 강조 및 하이퍼링크 연결
텍스트 강조 및 하이퍼링크 연결좌측 텍스트 기사 중 핵심 정보에 해당하는 텍스트는 컬러를 다르게 해 강조했다. 콘텐츠 페이지 외 부가적인 정보를 전달할만한 개념의 경우 텍스트에 밑줄을 표현했고, 클릭 후 관련 페이지로 링크 연결되도록 하였다.
3) 표, 동영상 등 요소 삽입
표, 동영상 등 요소 삽입각 장표별 부가적인 정보를 줄 수 있는 요소로서 데이터 표, 인터뷰 내용을 좌측 기사 하단에 직접 삽입, 인터뷰 영상은 링크 연결을 하되 동일한 웹페이지에서 팝업 형태로 볼 수 있게 하였다.
스크롤링 기반의 데이터 시각화 콘텐츠 사례
스크롤링 기반의 데이터 시각화 콘텐츠인 <대한민국 우울증 보고서>를 제작함에 있어서 유사한 해외의 콘텐츠 사례를 다수 리뷰하였다. 대표적인 사례 몇 가지를 간단히 살펴보자.
1. R2D3, A Visual introduction to machine learning
R2D3, A Visual introduction to machine learning머신러닝을 주제로 한 데이터 시각화 콘텐츠 ‘A Visual introduction to machine learning’은 스크롤링에 따라 각 차트의 요소가 변화하며 상위 차트와 하위 차트가 연결되는 시각적 효과를 갖고 있다. 이와 같은 인터랙션은 차트 요소의 투명도(opacity), 위치, 크기 등의 변화를 통해 이루어진다. 타 사례 가운데에서도 스크롤링에 기반한 차트 요소의 변화가 가장 다이나믹한 사례였다.
2. The Washington Post, 1,000 Times gold
The Washington Post, 1,000 Times gold미국의 올림픽 금메달 1000개를 주제로 한 데이터 시각화 콘텐츠 ‘1,000 Times Gold’는 스크롤링에 따라서 달라지는 기준(종목, 성별, 연도)에 따라서 금메달의 구성 비중이 어떻게 달라지는지를 시각화 한 콘텐츠이다. 스크롤링에 따라서 금메달 수를 의미하는 원의 위치가 달라지면서 새롭게 Grouping 된다. 기준에 따라 구성이 어떻게 달라지는지를 보여주는 시각화 기법, 좌측 기사 영역에서 컬러, 아이콘 등의 요소로 텍스트를 강조하는 점이 인상적이었다.
3. The New york Times, How the Recession Reshaped the Economy, in 255 Charts
The New york Times, How the Recession Reshaped the Economy, in 255 Charts미국 경제 대불황으로 인해 산업별 직업의 수가 어떻게 변화했는지를 보여주는 데이터 시각화 콘텐츠 ‘How the Recession Reshaped the Economy, in 255 Charts’는 스크롤링에 따라 화면 전면에 다수의 라인 차트가 등장, 위치 및 컬러가 변화하면서 특정 내용이 강조되도록 하였다. 또한 각 개별 차트 위에 마우스를 오버하면 툴팁을 통해 부가 정보를 전달한다. 콘텐츠의 마지막에는 각 산업별로 차트를 모아 스몰 멀티플즈 형태로 다시 요약해주며, 각 개별 차트에서의 마우스 오버로 인터랙션도 가능하다. 시각화 요소를 화면 가득 배치해 압도적인 인상을 주었고, 툴팁 등의 인터랙션 요소로 상세 데이터를 확인할 수 있도록 한 점이 인상적이었다.
* 이 글의 원문 출처는 뉴스젤리 블로그 '[콘팀블로그] 의료 데이터 시각화, <대한민국 우울증 보고서> 제작기 – 스크롤링 기반의 데이터 시각화 콘텐츠'입니다.
