그래프-다시 02
Bar chart : 30분 초과 출발 지연율 Top 10
여행은 그 자체로 즐겁지만 가장 두근거리는 순간은 역시 공항 가는 길이다. 공항 가는 버스를 탄 순간 여행이 시작된 것 같고, 향하는 어딘가에 대한 기대가 가득하지만 정작 공항에서 마주하는 건 지루한 탑승수속. 짐을 부치고 끝없이 넓은 공항을 걷고 걸어 탑승게이트에서 비행기 문이 열리기만을 기다린다. 언제 비행기 타나 문 앞에서 기웃, 전광판 앞을 기웃, 그러다 심심하면 괜히 비행기 보이는 창가에서 사진도 찍다가 안내방송이 나오면 고개가 저절로 입구로 향한다. 하지만 비행기 출발이 지연된다는 안내뿐.
모두가 한 번쯤 겪은 이 경험에서 탄생한 바로 이 기사.
이번 글에서 다시 그릴 차트는 바로 위 기사에 실린 '30분 초과 출발 지연율 Top 10 항공사', '정시 출발률 Top 10 항공사' 그래프다.
그래프를 보기 전에, 그리는 단계를 설명하고 넘어가려고 한다. 크게 5단계로 나뉜다.
1. 데이터 이해 : 데이터가 무엇을 말하는가? 어떤 의미가 있는지 이해한다.
2. 메시지 선정 : 차트로 표현할 데이터와 차트를 통해 보여주고 싶은 메시지를 결정한다.
3. 차트 유형 선정 : 데이터와 메시지를 표현하는 데 적합한 차트 유형을 선택한다.
4. 그리기 : 폰트, 색상, 레이아웃 등을 고려해 그래프를 그린다.
5. 수정 : 1차로 차트를 그리고 나서, 여러 사람에게 피드백을 받고 수정한다.
고치는 것도 이 흐름에 따라 고치려고 한다. 먼저 기사에 실린 그래프를 보자.
[마부작침] 30분 초과 출발 지연율 Top10 항공사, 정시 출발률 Top 10 항공사기사의 데이터는 '항공기 출발 및 도착정보'를 분석해 각 항공사마다 전체 출발 횟수 중 '지연율'을 집계한 것이다. 즉, 데이터의 단위는 전체를 100으로 하는 백분율(%)인데 지연율은 '정시 출발률'과 대비되는 개념이다. 예를 들면 차트에서 언급된 피치항공의 지연율은 48%, 반대로 보면 피치항공의 정시 출발률은 (100% - 지연율 48% = 52%)라는 말이다.
데이터의 단위와 개념을 언급하는 이유는 기사에 나온 차트들 때문이다. 현재 해당 기사에 실린 지연율 관련 차트는 총 4개로 (30분 초과 출발 지연율 Top 10 / 정시 출발률 Top 10 / 김포공항 국내선 항공기 지연율 / 제주공항 국내선 항공기 지연율)이다. 3개는 지연율, 1개는 정시 출발률로 서로 반대되는 데이터를 보여준다. 하지만 위에서 알 수 있듯 30분 초과 지연율 차트도, 정시 출발률 차트도 모두 왼쪽을 기준점으로 시작해 얼핏 보면 비슷한 데이터로 혼동하기 쉽다. 당시에는 색상으로 지연율(빨강), 정시 출발률(파랑)을 구분했지만 기사를 꼼꼼히 보지 않고서는 구분하기 쉽지 않다. 게다가 모바일에서는 엄지손가락으로 스크롤 넘기면서 기사를 빠르게 읽는 게 사용자의 특성이니까.
또 다른 문제는 기사의 데이터는 모두 백분율이지만 축의 범위가 어떤 그래프는 0에서 50%, 어떤 그래프는 0에서 100% 등 다 다르다. 항목 간의 격차를 보여주기 위한 선택이었지만 전체를 봤을 때는 축이 바뀌기 때문에 헷갈릴 수 있다.
이제 데이터와 메시지를 전달하는 부분에서 차트가 가진 문제는 파악했다. 그러면 차트의 유형은 어떤 걸 선택해야 할까? 고치기 전 차트에서는 지연율만 보여주는 막대그래프를 사용했지만, 비율을 보여줘야 하기 때문에 전체를 분할하는 100% 누적 막대그래프를 사용하려고 한다.
(* 막대그래프는 데이터를 짧게 보여줘야 할 때, 시간이 없을 때 등 난처한 상황에서 선택하면 그래도 본전은 건질 수 있는 가장 기본적인 차트 유형이다. 하지만 동시에 높낮이 조절로 데이터를 왜곡하기 가장 쉬운 차트이기도 하다.)
데이터도 이해하고, 차트 유형도 정했으면 다음은 그리는 단계인데 보통 여기서 그래프를 좀 더 재밌게 하는 요소를 추가하게 된다. 어떤 요소를 활용해볼까 생각하다가, 공항에서 가장 많이 보이는 전광판의 요소를 적용해보기로 했다.
인천공항 전광판 사진공항 전광판을 자세히 보면 '글자 한 개 = 사각형 한 칸'으로 돼있다. 그리고 전광판 색보다 약간 진한 색이 글자 바탕에 깔려있다. 인천공항 전광판을 보면 전광판 자체는 약간 진한 청바지 같은 파란색, 글자 바탕은 문서 프로그램에서 파란색 설정하면 나오는 가장 기본적인 파란색, 글자는 하얀색이다.
그래프의 문제
1. 반대되는 개념의 데이터의 시작점이 동일함.
2. 데이터는 모두 백분율로 단위가 동일하지만 축의 범위가 그래프마다 다름.
수정한 그래프 : 30분 초과 출발 지연율 Top 10
수정한 그래프 : 정시 출발률 Top 10이전 그래프에서는 '지연율', 혹은 '정시 출발률' 둘 중에 하나만 표현했지만 수정한 그래프에는 지연율과 출발률을 둘 다 썼다. 지연율의 수치는 왼쪽에, 정시 출발률 수치는 오른쪽에 써서 대비되도록 했다.
또한 각 축을 없애고 '한 칸 = 10%'로 대략적인 비율을 보여줬다. 그 이유는 비슷한 순위에 있는 항공사의 지연율 차이가 1~5% 정도라서 요소를 작게 표현하면 작은 화면에서 봤을 때(특히 모바일) 시각적으로 큰 차이가 없기 때문이다. 그래서 1자리 숫자가 0~5면 숫자를 버리고, 5~10이면 숫자를 올려서 각 칸의 색을 채웠다. (36% = 4칸, 32% = 3칸) 하지만 이렇게 하면 왜곡의 위험이 있기 때문에 막대그래프의 칸은 작게 하고 숫자를 크게 해서 정확한 수치가 먼저 보이게 했다.
그리고 그래프가 좀 더 전광판스럽도록 전체 바탕은 회색, 지연율과 정시 출발률은 검정 계열과 대비되는 형광 노란색과 파란색을 사용했다.
수정사항
1. 반대되는 두 개념을 동일한 위치에서 모두 보여줌. '지연율' 수치는 왼쪽에, '정시 출발률' 수치는 오른쪽 정렬.
2. 지연율 Top 10 그래프는 지연율의 색을 강조해 지연율에 집중하게 하고, 정시 출발률 Top 10 그래프는 정시 출발률 색을 강조해 정시 출발률에 집중하게 함.
3. 축을 없애고 '한 칸 = 10%'로 비율을 보여줌. 하지만 이렇게 하면 왜곡의 위험이 있기 때문에 각 칸의 크기를 작게 해서 정확한 숫자를 먼저 보이게 함.
4. 공항 전광판의 느낌으로 요소를 디자인함.
