brunch

매거진 데이터 시각화의 모든 것

라이킷 1 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 강원양 Dec 31. 2017

<2017 대한민국 과로 리포트> 제작기

당신은 지금도 과로중?

오늘도 과로한 당신? 사실... 나도.

혹시 여러분도 과로를 하고 계신 건 아닌가요? 서울신문, 엠브레인의 설문조사 결과에 따르면, 우리나라 직장인 10명 중 7명은 "이렇게 일하다 죽을 수도 있겠다"라고 느낀 적이 있다고 응답했다고 합니다. 잘 먹고 잘 살자고 하는 '일'인데, '이렇게 일하다가 죽을 수도 있겠다'라니... 우리나라 직장인이 처한 처절한 현실이 느껴지는 대목입니다.

지난주 뉴스젤리는 서울신문과 함께 일에 지친 대한민국의 과로 실태를 한눈에 알아보기 위해 <2017 대한민국 과로 리포트 : 당신은 지금도 과로 중?> 인터랙티브 데이터 시각화 콘텐츠를 발행하였습니다. 서울신문, 엠브레인의 설문조사 결과 데이터를 콘텐츠의 메인 자료로 활용하였으며, 독자는 개인의 조건에 따라 얼마나 과로를 하고 있는지, 과로에 대해서 어떤 생각을 갖고 있는지 등을 알 수 있습니다.

이번 글에서는 <2017 대한민국 과로 리포트 : 당신은 지금도 과로 중?>(이하 '과로 리포트') 콘텐츠의 주요 특징-1) 개인화 요소, 2) 데이터 필터링 기능을 활용한 데이터 탐색, 3) 스크롤링 기반의 원 페이지(One-page) 콘텐츠-을 리뷰해보도록 하겠습니다. 이 과정에서 데이터 인사이트를 도출하는 방법, 제작 과정에 숨겨진 비하인드 스토리 등의 이야기를 더해, '과로 리포트' 콘텐츠를 샅샅이 파헤쳐 보고자 합니다.

1. 개인화 요소의 활용 - 나와 같은 사람, 나와 다른 사람은 어떻게 일하고 있을까?

'과로 리포트' 콘텐츠의 핵심이 무엇이냐 물으신다면, '개인화 요소'라고 답할 수 있습니다. 독자는 개인화 요소 항목인 '성별, '나이', '직업', '연장근로시간' 항목에 대한 자신의 조건을 입력하고, 해당 조건에 따른 데이터를 구체적으로 확인할 수 있습니다. 뿐만 아니라 이는 데이터를 탐색, 인사이트를 도출하는 중요한 기능으로 활용됩니다. 가령 나의 조건을 입력해 데이터를 확인하여 '나와 같은 사람'의 과로 실태는 어떤지, '나와 다른 사람'의 과로 실태는 어떤지 확인하고 비교해보면서 데이터의 의미를 찾게 됩니다.

개인화 요소 입력 화면

처음 콘텐츠 링크에 접속하면 '성별'을 선택할 수 있는 화면이 나옵니다. '성별'을 선택한 이후에는 차례로 '연령대', '직업'을 선택합니다. 각 단계에서 조건을 선택하면 화면 상단 영역에는 입력값이 버튼으로 생성됩니다. 한 번 입력한 값은 콘텐츠 페이지 내에서 언제든 변경해볼 수 있도록 버튼으로 제작하였습니다. 마지막 입력 값인 '연장근무시간' 항목의 경우 직접 숫자를 기입하도록 하였으며, 숫자 기입 후 엔터(enter)를 하면 하단의 '나의 과로 수준 확인하기' 버튼이 활성화되며 화면이 하단으로 이동됩니다. 활성화된 버튼을 클릭하면 개인화 조건에 따른 상세 데이터를 확인할 수 있습니다.

개인화 요소 입력값에 따라 맞춤형 정보를 제공해주는 부분

독자가 선택한 개인화 요소 입력 값에 따라 확인할 수 있는 사항은 크게 세 가지 부분입니다. ① 나와 동일한 조건의 대한민국 사람의 평균 연장 근무 시간 보다 내가 얼마나 더 일하고 있는지, ② 나와 동일한 조건의 사람들의 근무 시간 분석 결과, ③ 나와 동일한 조건의 사람들이 생각하는 과로 실태 탐색하기입니다.

개인화 조건 입력 값을 다르게 하여 데이터의 변화를 확인

개인화 조건 입력값을 나타내는 버튼은 콘텐츠 페이지 영역 중 상단에 고정되어 표시됩니다. 이에 따라 독자는 콘텐츠를 읽는 과정 중 언제든지 조건을 변경하여, 데이터의 변화를 확인할 수 있습니다. 조건 변경 시 영향을 받는 부분은 위에서 언급한 세 가지 부분 중 ② 나와 동일한 조건의 사람들의 근무 시간 분석 결과, ③ 나와 동일한 조건의 사람들이 생각하는 과로 실태 탐색하기입니다. 이처럼 개인화 조건 값 변경에 따라 데이터가 달라지는 것을 '데이터 필터링'의 개념으로 이해하시면 됩니다.

2. 데이터 필터링 - 시각화를 통한 데이터 탐색, 인사이트는 '비교하기'를 통해서!

데이터에서 인사이트를 도출하기 위해서는 데이터를 탐색하는 과정 속 '비교하기'가 필수적입니다. 이 과정에서 유용하게 활용되는 방법은 바로 '데이터 필터링'입니다. 특정 조건의 입력 값을 달리하여 해당 조건별로 달라지는 결과 값을 비교하고, 어떤 차이를 보이는지 등을 알아내는 것입니다!

'과로 리포트' 콘텐츠에서도 필터링 기능을 삽입하여 독자가 데이터 탐색 및 인사이트 도출을 자유롭게 할 수 있도록 하였습니다.

20대 사무/기술직 남성의 근무시간 분석 결과(좌), 동일 조건 여성의 근무시간 분석 결과(우)

가장 큰 범위의 데이터 필터링은 앞서 위에서 언급한 개인화 조건 입력 값에 따른 것입니다. 이로써 독자는 자신과 동일한 특성의 사람과 그렇지 않은 사람의 데이터를 비교해 볼 수 있습니다. 예를 들어 사무직으로 근무하는 20대 남녀의 근로 실태를 각각 비교해 볼 수 있다는 것입니다. 이 조건을 변경하면 '근무 시간 분석 결과'와 '과로 실태 탐색기' 시각화 차트의 데이터가 동시에 필터링 됩니다.

사업장 규모 기준 값을 다르게 선택해 결과 값 데이터를 필터링

근무시간 분석 결과를 보여주는 4개의 100% 누적 가로 막대 차트에서도 데이터 필터링을 해볼 수 있습니다. 근로 실태와 관련된 4가지 항목 시간-① 연장 근무시간 ② 주말 근무시간 ③ 하루 평균 수면시간 ④ 수면시간 외 휴식시간-에 대한 설문조사 응답자 분포를 '사업장 규모'를 기준으로 비교해볼 수 있습니다. 이 차트는 막대의 길이가 길고, 색이 진할수록 많은 응답을 한 것으로 이해하면 됩니다. '사업장 규모' 기준의 데이터 필터링으로 우리가 알 수 있는 점은 동일한 성·연령, 직업군의 직장인이라도 사업장 규모에 따라 서로 다른 근로시간 패턴을 보일 수 있다는 것입니다. (나랑 동일한 조건의 동종업계 직장인이라도... 대기업이면 뭔가 다르지 않을까...?라는 질문 한 번쯤 가져봤을 법한데요... 그 답을 여기에서 확인해 볼 수 있다는 의미입니다!)

'과로 실태 탐색기' 차트 인터랙션 예시 화면

'과로 실태 탐색기'라는 이름의 다소 낯선 시각화 차트에서도 데이터 필터링을 해볼 수 있습니다. 이 차트는 앞서 '근무시간 분석 결과'의 4가지 항목 시간 조건별 직장인이 과로에 대해 어떤 생각을 갖고 있는지 알아보기 위해 만들어졌습니다. 따라서 시간의 기준은 X 축의 값으로 선택할 수 있게 하였고, 과로에 대한 생각을 알 수 있는 결과 질문의 값은 Y 축의 값으로 선택하도록 하였습니다. X ·Y 축의 입력 값을 무엇으로 하는지에 따라 필터링 되는 데이터를 시각화 패턴의 변화로 확인할 수 있습니다.

이 차트로 데이터를 탐색하고 해석하는 방법의 순서는 이렇습니다. ① 시간 조건(X축) 항목을 선택합니다. ② 결과로 볼 질문(Y 축)을 선택합니다. 제가 ①, ②의 선택 값으로 '주말 근무시간'과 '피로의 업무 수행 영향도'를 선택할 경우 '주말 근무 시간 정도에 따라 피로가 업무 수행에 영향을 미친다고 응답한 사람의 분포'를 알 수 있습니다. 다음으로 ③ 선택한 X ·Y 축 기준 조건에 따라 달라진 시각화 차트를 확인합니다. ④ 차트 영역 내 특정 막대 위에 마우스 오버(모바일의 경우 터치)를 하면 툴팁으로 수치 데이터를 확인할 수 있습니다. 차트 영역 내 막대의 색이 진할수록 응답자가 많음을 의미합니다. ⑤ 위 이미지상 제가 선택한 막대의 정보를 해석하면, 주말 근무시간으로 4~6시간 일한 사람(남성, 20대, 사무/기술직 조건) 전체를 100%로 볼 때 이 중 80%가 '영향을 받는다'라고 응답한 것을 알 수 있습니다.

이와 같은 방식으로 X ·Y 축 선택 값을 자유롭게 변경하면서 직장인의 과로 실태에 대한 다양한 인사이트를 도출 할 수 있습니다.

여기서 잠깐!
콘텐츠 제작 총 소요 시간에 비하면 매우... 짧은 비하인드 스토리 공개!

X · Y 히트맵과 '과로 실태 탐색기' 차트의 차이

이 시각화 차트는 얼핏 보면 X · Y 히트맵이라고 생각할 수 있습니다. 그러나 저희가 제작한 차트는 일반적인 X · Y 히트맵과 차이가 있습니다. 보통 X · Y 히트맵은 차트 영역 내 표현되는 X, Y 축의 기준에 따른 교차 지점별 수치 값의 전체 범위를 100%으로 보고 이를 기준으로 색을 달리해 표현합니다. 그러나 저희는 'X축 응답별로 Y 축 결과 항목별 비중(%)이 어떻게 달라지는지'를 보여주고 싶었기 때문에 이를 그대로 쓸 수 없었습니다. 따라서 X축 각 응답을 나타내는 막대별로 100%의 기준에 따라 색을 달리해 표현하였습니다.

100% 누적 막대 차트와 '과로 실태 탐색기' 차트의 차이

사실 저희의 의도를 쉽게 표현할 수 있는 방법도 있었습니다. 바로 100% 누적 막대 차트로 시각화하는 것입니다. 그러나 '모바일 뷰 최적화'를 목표로 한 콘텐츠에서 이와 같은 유형의 차트는 독자가 인터랙션 하기에 부적합하다는 판단이 있었습니다. 모바일에서 이 차트를 볼 때, 상세 데이터를 확인하기 위해서는 각 막대를 손가락으로 터치해야 합니다. 그런데 100% 누적 막대 차트로 시각화 할 경우 수치 값이 작으면 작을수록 막대의 길이가 짧아져 이를 특정하여 터치하기 어렵습니다. 따라서 100% 누적 막대 차트에서 '길이'로 데이터를 인코딩 하는 방식 대신, 각 항목별 길이는 동일하게 하되 색으로 데이터를 인코딩하는 방식을 적용했습니다. 결론적으로 '과로 실태 탐색기'는 X · Y 히트맵처럼 보이지만, 알고 보면 100% 누적 막대 차트를 약간 변형한 형태인 것입니다.

제작 과정상 '과로 실태 탐색기' 시각화 차트의 변화

관련하여 한 가지 비하인드 스토리를 더하자면, 바로 '낯선 차트의 유용함'과 관련된 내용입니다. 이는 '시계열 데이터의 시각적 분석(1) 어디까지 가능할까? 포스팅에서 살짝 언급한 적이 있는 '낯설지만 예쁜 차트, 과연 유용한가?'에 대한 논의와 관련 있기도 합니다. '과로 리포트' 콘텐츠의 경우 예뻐 보이기 위한 차트는 아니더라도 전달하고자 하는 메시지를 잘 보여주기 위한 의도에 따라 시각화 차트를 만들었으나, 독자에게 익숙한 차트 유형이 아니기 때문에 독자가 이해하기 어려울 수 있다는 문제에 직면하였고, 이를 해결하기 위한 방법을 찾아야 했습니다.

더군다나 초기 단계에 제작한 차트의 경우 X ·Y 축 선 밖의 영역에 또 하나의 막대가 있어 각 축의 응답별 비중(%)도 볼 수 있도록 하였는데, 하나의 차트로 너무 많은 정보를 제공하는 것이 오히려 독자에게 혼란함을 가중시킬 수 있다는 이슈도 있었습니다. 이와 같은 문제를 해결하기 위해 가장 먼저 내린 결정은 X ·Y 축 선 밖의 영역의 막대 요소를 제외한 것 입니다.

차트 해석에 도움이 되는 요소 : 1) 차트 읽는 법 2) 인사이트 요약 텍스트

뿐만 아니라 차트 하단에는 인사이트를 간략히 요약한 텍스트를 추가하였습니다. X · Y 축 조건 값을 변경할 때마다 인사이트 텍스트도 자동으로 변경됩니다. 차트 상단에는 '차트 읽는 법'을 직접적으로 설명하는 이미지를 도움말로 삽입하였습니다. '차트 읽는 법' 이미지는 모바일 뷰에서 상당한 부분을 차지하게 된다는 점을 고려해 클릭 시 접었다 펼쳤다 할 수 있도록 하였습니다. (사실... '차트 읽는 법'을 GIF 파일(움짤처럼)을 활용해 애니메이션으로 설명하는 방법도 있었지만... 페이지 로딩 시간, 제작 리소스 등을 감안해 이미지로 넣기로 최종 결정하였습니다. 콘텐츠 제작에 소요된 전체 시간, 그 과정의 논의 모두를 떠올리면... 매우 짧은 비하인드... 임이 분명합니다!)

3. 독자의 인터랙션 - 하나의 페이지에서 스크롤을 내려가며 읽는 콘텐츠!

'과로 리포트' 콘텐츠는 하나의 페이지 안에서 독자가 스크롤을 내려가면서 읽는 스크롤링 기반의 데이터 시각화 콘텐츠입니다. 콘텐츠 첫 화면에서 개인의 조건(성별, 연령대, 직업군, 연장근무시간)을 입력한 뒤 나타나는 화면부터 이를 경험할 수 있습니다. 한 화면에서 스크롤을 내려가며 콘텐츠를 보는 방식이기 때문에, 내용 구성상 여러 개의 파트로 나눠져 있을 경우 이를 독자가 직관적으로 알수 있도록 하는 것이 중요합니다.

'과로 리포트' 역시 내용 구성상 파트가 4개로 나뉩니다. 개인화 조건에 의해 데이터 탐색이 가능한 1) 근무시간 분석 결과 보기 2) 과로 실태 탐색기와 과로사 관련 단순 데이터 시각화 자료를 스토리텔링 방식으로 설명하는 3) 당신의 과로 앞으로도 괜찮을까요? 4) 어쩌면 당신의 미래?입니다. 따라서 독자가 각 파트가 구별됨을 직관적으로 인지하며 콘텐츠를 볼 수 있도록 하는 방법을 찾아야 했습니다.

각 파트별 타이틀이 스크롤링에 따라 고정

이를 위해 콘텐츠에 적용한 방식은 각 구성상 파트의 타이틀을 화면의 상단에 고정시키는 방식입니다. 첫 번째 파트가 끝나는 시점에 두 번째 파트의 타이틀이 함께 올라오고, 화면 가장 상단에 이를 때 또다시 고정됩니다. 독자가 이용하는 모바일 기기 사이즈가 상이해 한 화면에 보이는 콘텐츠의 영역이 다르다고 할지라도 언제나 가장 상단에는 타이틀이 배치되어 있어, 의미 맥락을 잊지 않고 콘텐츠를 볼 수 있습니다.

구글 뉴스랩, 'how to fix a toilet'(좌), 'I'm not feeling well'(우)

이와 같은 스타일은 스크롤링 기반의 원 페이지(One-page) 콘텐츠를 리뷰하던 중 찾은 사례로 구글 뉴스랩에서 발행한 'How to fix a toilet', 'I'm not feeling well'을 참고한 것입니다. 두 사례 모두 스크롤링에 따라 각 파트의 타이틀이 상단에 고정됩니다. 특히 'I'm not feeling well'의 경우 각 파트별 영역의 배경색을 다르게 하여 좀 더 직관적으로 파트를 구분하였습니다.

지금까지 뉴스젤리와 서울신문이 제작·발행한 인터랙티브 데이터 시각화 콘텐츠 <2017 대한민국 과로 리포트 : 당신은 지금도 과로 중?>의 제작기를 이야기해보았습니다. 콘텐츠 제작 과정의 이야기는 언제나 콘텐츠 뒤에 감춰져 있기에, 그 과정을 궁금해하시는 분들이 있으리라 생각됩니다. 이번 제작기는 어떠셨나요? 사실 위에서 이야기하지 못한 많은 이야기 -가령 데이터 자체의 한계, 디벨롭 할 수 있는 지점을 알고 있었으나 제작 리소스 및 기한의 한계로 시도하지 못한 점, 디테일을 통해 콘텐츠의 완성도를 높이는 방법 등-도 있습니다. 제작기를 쓰다보니, 기회가 된다면 언제나 들려드리고 싶은 애증(?)으로 가득 찬 시각화 콘텐츠 제작 과정 이야기를 꺼내보고 싶기도 하네요! 곧 그 기회가 있길 바라면서 이번 글을 마무리합니다:)

* 이 글의 원문 출처는 뉴스젤리 블로그 '[데이터 시각화] <당신은 지금도 과로 중? 2017 대한민국 과로 리포트> 제작기' 입니다.

keyword