2014. 9. 22. 17:12ㆍRe-design!
지난주에 저희는 HCI2014 학회에 참가하였습니다. (글 쓰다가 내버려둔지 한참 됐네요. :) 학회 참가 기간 동안 몇가지 시간표들을 접하였는데요. 표의 열과 행에 빽빽하게 숫자를 나열한 익숙한 형태였지만 시간표를 활용하는 실제 사용 맥락에서는 정보를 이해하기 쉽지 않았습니다.
pxd에서는 이런 경우에 사내 전체 메일로 정보디자인 퀴즈를 내고 의견을 나누곤(주로 싸웁니다) 하는데, 업무가 바빴는지 참여가 저조했습니다. 그래서 이번에는 블로그를 통해 정보디자인에 관심있는 디자이너, 학생분들과 함께 고민해보려고합니다. 우선 제가 고민했던 부분을 공유합니다.
1. 리프트권 종류가 왜 이렇게 많아?
작년 학회 참가자들에게서 하이원 슬로프가 좋다는 얘기를 많이 들어와서, 저는 학회보다 스노우보드 타는데 더 관심이 있었습니다. 그래서 스키 신청 메일을 받자마자 바로 페이지를 열어봤는데요. 무슨 리프트권 옵션이 이렇게 많은지, 후야권, 야오권 이건 또 도대체 뭔지 알 수가 없어 많이 당황스러웠습니다.
리프트권 - 출처 : 하이원 홈페이지
시간을 어떻게 비교할까?
리프트권 구분에 임의로 만들어진 조어를 사용해서 이용시간을 꼼꼼히 살펴봐야만 나에게 적합한 리프트권을 선택할 수 있었습니다. 대충 보면 군더더기 없이 깔끔한 표이지만 막상 원하는 시간을 비교해 고르려면 정신이 혼미해집니다.
정보를 전달하는 입장에서는 이런 표가 가장 효율적이겠지요. 적은 노력으로 누락없이 정확한 시간 정보를 전달합니다. 하지만 정보를 소비하는 사용자 입장에서는 표를 보고 비교 선택하는데 인지 부담이 큽니다. 수치로된 시간을 머리 속에서 개념화하고 기억해 각각을 비교해야 하는데, 이런 정보 처리는 뇌가 익숙하게 할 수 있는 작업이 아니거든요. 단지 공간에 나열했다고 비교가 쉬운게 아닙니다.
머리 속으로 생각만 해서는 비교가 어려우니 뇌를 확장하려고 종이에 그려서 비교합니다. 이용 시간은 연속적인 시간의 구간이니까 공간의 한 축으로 치환해서 그래프로 시각화하기만 해도 비교가 수월해집니다. 그럼 해결은 간단합니다. 추가로 표에 시각적으로 쉽게 비교할 수 있는 그래프만 더하면 될 것 같습니다.
그래서 제가 바로 그려봤을까요? 디자인에서 매우 중요하다고 거듭 느끼는 부분인데요. 문제가 무엇인지 정의(가정)하고 바로 문제를 해결하려고 하는 건 좋은 디자인 접근이 아닙니다. 그 다음 할 일은 비슷한 문제를 남들은 어떻게 해결했는지 열심히 찾아보는 것입니다. 다른 사람들의 해결을 살펴보면 내가 미쳐 보지 못했던 문제나 제약이 무엇인지 배울 수 있습니다.
처음에는 국내 스키 리조트의 홈페이지들을 찾아봤습니다. 하지만 역시나 시간을 숫자로 쭉 나열한 건 모두 똑같더라구요. *
그래서 이번엔 외국의 사례를 찾아봤는데요. 스키 문화 자체가 다릅니다. 우리나라처럼 시간대별로 자잘하게 나눠서 리프트권을 파는게 아니라 하루권, 이틀권, 사흘권 이런 식이더군요. 일본의 근교 스키장 같은 경우에나 하루를 3개 정도 시간대로 나눠둔 정도이고요. 원하는 해결은 찾지 못했습니다. (좋은 사례를 아시면 알려주세요.)
그럼 이젠 직접 그려볼 차례입니다. 처음 한두개는 손으로 스케치를 해보다가 귀찮아서 표(HTML)의 시간을 읽어 그래프로 그려주는 스크립트를 만들었습니다.
redesign by 無異
숫자라는 심볼과 시간 개념(12 시간, 분과 시의 관계), 두 시간 간의 간격을 비교하려면 머리속에서 여러 차례 계산(변환) 과정을 거쳐야하지만 공간에 펼쳐놓으면 비교가 쉽습니다. 그래프의 위치와 길이 차이는 주의를 기울이지 않고도 바로 인지(pre-attentive processing)할 수 있거든요. 후야권이란건 오후+야간권이고 야오권은 야간+오전권 이었네요.
시간표는 24시간제로 표시하는게 정석이다?
시간을 일반인에게 익숙한 12시간제로 바꿨습니다. 제가 군인도 아니고, 제가 보는 시계도 12시간제로 되어 있습니다. 24시간제로 표기된 시간을 보면 머리 속에서 한번 더 변환 과정을 거쳐야 하니 인지 비용이 발생합니다. 24시간제는 정보를 전달하는 입장에서 효율적입니다. 물론 12시간제로 표시하면서 오전,오후를 반복하여 표기하면 24시간제보다 더 복잡해 보일 수 있습니다. 하지만 일상생활에서는 맥락을 통해서 오전인지 오후인지 대부분 알 수 있습니다. 평상시에 오전 오후를 생략해도 우리가 생활하는데 별 지장이 없습니다. 위 표에서는 그래프가 같이 있고 맥락상 오전 오후를 예측할 수 있어서 오전 오후 표시를 간결히 했습니다.
경험에 의해 개개인의 시간 개념이 시간이라는 심볼에 맵핑됩니다. 오후 6:30 분이라는 시간을 들었을때 겨울철에 날은 얼마나 어둑해지는지 해가 지고 얼마나 쌀쌀해지는지, 배가 출출해질 때인지 무한도전 봐야할 시간인지 등 다양한 경험이 바로 연상 되지만 18:30에는 바로 맵핑이 되어 있지 않습니다. 익숙하지 않은 시간 단위를 사용하면 경험의 연상을 잃게 됩니다. 가급적 익숙한 12시간제를 사용하는게 좋습니다.
24시간제는 leading zero가 붙어서 정렬이 쉬운데 12시간제로 표시할때는 정렬을 맞추기 위해서 주의가 필요합니다. 저는 오른쪽 정렬 대신 opacity가 0인 투명한 0을 붙여주는 꼼수를 사용했습니다. 핵심은 : 를 맞추는 건데 맞추진 못했습니다.
redesign by 無異
비교하기가 아니라 몇시부터 몇시까지인지 직관적으로 아는데는 방학 시간계획표처럼 아날로그 시계판에 표시하면 낫지 않을까 생각이 들어서 그려봤는데, 그닥 좋지는 않네요. 주간과 야간을 색으로 구분해봤는데 별 도움이 되지 않는 것 같습니다. 망했어요.
* 국내 스키 리조트 홈페이지의 리프트권 표시 방식이 모두 똑같다고 했는데 사실 모두 그런건 아닙니다. 곤지암 리조트는 리프트권의 시간이 정해져있는 방식이 아니라 me-time pass 라고 원하는 시간에 원하는 시간만큼 탈 수 있도록 시간권을 판매하여 이런 복잡한 시간표가 아예 필요없습니다. 서비스 디자인 측면에서는 이런게 더 좋은 해결일 것 같습니다.
2. 셔틀 버스는 언제 오는거야?
대절한 버스를 타고 학회장인 호텔에 우선 내렸는데 제가 들으려던 강의까지는 시간이 꽤 남았습니다. 셔틀을 타고 숙소인 콘도로 가서 잠깐 쉬고 올까싶어 홈페이지에서 셔틀 시간표를 찾아 봤습니다.
여기서 문제. 현 위치는 강원랜드 호텔이고 숙소는 마운틴 콘도 F 동, 현재 시간은 12 시입니다. 2시 강의를 듣기 위해 돌아와야 한다면 숙소에서 얼마나 쉴 수 있을까요? 차라리 그냥 기다리는게 좋을까요? **
셔틀버스 시간표 - 출처: 하이원 홈페이지
셔틀버스 시간표를 이용하는 주요 use case는 다음 세가지일 것 같은데, 이 세 가지를 한꺼번에 확인해야 하는 아주 피곤한 경우였습니다.
1. 현재, 현 위치에서 셔틀을 타려면 얼마나 기다려야하나? (언제 오나?)
2. 목적지까지 가는데 시간이 얼마나 걸리나?
3. 특정 시간까지 목적지에 도착하려면 언제 셔틀을 타야하나?
셔틀은 얼마나 자주 오나?
보통은 대충 몇시쯤 정류장에 나가면 될지 주변 시간대의 배차 간격을 확인하게 됩니다. 셔틀이 자주 오면 굳이 시간 맞춰 움직일 필요가 없으니까요. 저 표를 보고는 어떤 시간대에 셔틀이 자주 오고 어떤 시간대는 오래 기다려야 하는지 배차 간격을 바로 알기 어렵습니다. 위와 같은 표는 숫자를 빽빽하게 적어서 정보효율이 높은 것 같지만 표를 이용하는 맥락에서 중요한 정보인 내가 셔틀을 이용할 시간대에 얼마나 빈번하게 운행을 하는지를 바로 알기 어렵습니다. 이런 정보를 드러내 보이려면 표보다는 시간을 축으로한 그래프를 그리는게 좋습니다.
Edward Tufte - The Visual Display of Quantitative Information
이런 운행 시간표 그래프의 가장 인상적인 예가 Edward Tufte 의 The Visual Display of Quantitative Information 의 표지에 실려있습니다. 빨간선이 난잡하게 그어진 추상화처럼 보이는 그래프는 사실 열차시간표입니다. 그래프의 레이블이 생략되어 있는데, 가로축이 시간 이고(48 칸-30 분 간격) 세로축이 정차역입니다. 예를 들어 맨 윗쪽은 서울역, 맨 아래는 부산역이라고 하면 그 사이에 천안, 대전, 대구, 밀양 같은 중간 정차역들입니다. 왼쪽에서 오른쪽으로 내려오는 사선은 하행선 열차이고 반대로 그어진 선은 상행선 열차입니다. 선의 기울기가 조금씩 다른데 기울기가 열차의 속도를 나타냅니다. 완행 열차는 모든 역에서 선이 끊겨있고(정차시간만큼) 급행열차는 일부 역은 그냥 지나칩니다. 굵고 진하게 그려진 선이 몇 개 있는데 이건 다른 선들보다 기울기가 급하죠. 특급열차입니다. 하행 급행 열차는 하루에 4편만 편성되어 있는데 1시 3시 사이에 3개가 몰려 있습니다.
이런 방식으로 셔틀 시간표 그대로 세로를 시간축으로 하여 그래프로 옮기면 위와 같은 모습이 됩니다. 왕복 노선을 같이 그리니까 정신이 없네요.
redesign by 無異
정류장과 시간 축을 바꾸고 왕복 노선을 분리했습니다. 세로축의 정류장 간의 간격을 운행 시간에 비례하게 조정하여 일직선이 되도록 했습니다. 셔틀은 아마도 일정한 속도로 운행할테니까요. 그렇게 하니 그래프의 정류장 간격으로 실제 지리적인 거리를 가늠할 수 있습니다. 구불구불한 꺽은선이 반듯하게 단순화되니 불필요한 노이즈가 사라져서 배차간격이라는 정보도 더 잘 드러납니다. 표에서는 알기 어려웠지만 그래프로 보면 시간대에 따라 배차 간격이 다르고 상행과 하행의 운행 패턴도 차이가 있다는걸 바로 알 수 있습니다.
어느 방면인지 쉽게 알 수 있게 하기
하이원 호텔에서 스키하우스로 돌아가는 노선은 표의 운행 순서를 반대로 뒤집어 그렸습니다. 원래대로 그리는면 사선의 방향이 나란해서 사실 더 예뻐보입니다. 나란해야 보기에도 좋고 마음도 평안을 찾습니다. 눈에 거슬리지만 뒤집었는데요. 셔틀이 하이원 호텔을 반환점으로 왕복으로 운행하기 때문에 표에는 같은 정류장이 두번씩 나옵니다. 그래서 처음 표에서는 어느 방면으로 가는 것인지 확인하는것에서 부터 헷갈렸습니다. 그런데 셔틀을 직접 타보면 산길을 따라가는 노선이라서 스키하우스 쪽로 올라가는지 아니면 내려가는지 지리적 위치에 따라 방면에 대한 맵핑이 자연스럽게 생기게 되더라구요. 그래서 내려가는지 올라가는지 방면을 사선의 방향으로 실제와 같이 반영하고 둘의 구분이 도드라지도록 했습니다. 어느 방면인지 확실하면 정류장을 하나하나 찾지 않아도 탐색 범위가 반으로 줄어드니까 원하는 정보를 찾기 수월해지겠죠.
정보가 아닌 요소를 덜어내어 data ink ratio 높이기
그래프에서 축의 그리드는 직접 정보를 담고 있는 것이 아니라 데이타를 보조해주는 말그대로 보조선이니까 실제 데이타를 방해하지 않게 가급적 없애거나 덜 도드라지게하는게 좋습니다. 터프티 책의 기차시간표처럼 실 데이타라인이 직선인 경우에는 보조선을 가늘고 옅게 하더라도 형태적으로 유사한 반듯한 선들이 겹치게 되어 복잡해 보일 수 있습니다. 주 정보를 도드라지게 대비를 높이려면 보조적인 정보는 가급적 다른 전주의처리 요소를 사용하는게 좋습니다. 시간 구분은 데이타를 읽는데 도움을 주므로 없애는 것보다는 이렇게 선 대신 면으로 구분하는게 좋을 것 같습니다. 30 분 간격의 보조선은 배경과 같은색으로 선이 추가된게 아니라 면이 나뉘도록 해서 복잡한 요소가 더해지지 않아 보이도록 했습니다. 대신 정류장을 구분하는 보조선은 각각의 포인트를 찍어주는 것에 비해 요소를 많이 줄일 수 있어서 사용하는게 더 효율적인 선택인 것 같고요.
목적에 따라 표와 그래프 선택하기
그래프로 그렸을때 숨겨져있던 정보들이 시각적으로 드러나긴했지만 그대신 가장 중요한 도착 시각을 잃었습니다. 특정한 목적에는 적합하겠지만 일반적으로 셔틀을 타기위한 맥락에 적합한 표현 방식은 아닐 것 같습니다. 물론 클릭하거나 현위치, 현재 시간을 자동으로 반영해서 시간을 표시하게 할 수도 있겠지만요. 전 가급적 인터랙션이 없는 걸 선호하거든요. 종이에 프린트를 해야 한다든지 매체가 인터랙션을 지원하지 않을 수도 있고요.
redesign by 無異
그래서 시간표의 각 시간을 실제 시간에 해당하는 위치로 옮겨보았습니다. 시간도 바로 읽을 수 있고 배차 간격이라는 감추어진 정보도 드러날 수 있도록요. 똑바로 빽빽히 나열된 행을 좇아가다보면 오히려 헷갈릴 수 있는데 여백이 적당하게 또 불균등하게 있어서 굳이 그리드로 구분하지 않아도 뇌는 연속된 관계로 잘 인식 할 수 있습니다.여기에서 기존의 표와 시간축이 적용된 표를 전환해가며 비교해 볼 수 있습니다.
원래의 표에서는 반환점도 하나의 여정으로 쭉 이어서 표를 그렸는데요. 이건 셔틀을 운전해서 반환점을 돌아와야하는 기사에게 의미가 있지 버스를 타려는 사람에게는 혼란만 주게 됩니다. 이 혼란을 줄여보려고 (마운틴 스키하우스 ⇄ 하이원호텔 ⇄ 마운틴 스키하우스) 같은 표시를 하거나 (출발 → → → 도착) 같은 불필요한 설명을 표에 덧붙이다보니 오히려 더 복잡해집니다. 근본적인 해결은 방면에 따라 표를 분리하는 것입니다. 방면을 쉽게 구분할 수 있도로 오르막과 내리막으로 표시하고 주요 정류장을 표의 헤더에서 강조하여 쉽게 찾을 수 있게 했습니다.
표에 적합한 숫자 글꼴
표에는 text figure 인 Merriweather Sans 를 사용했습니다. text(lower) figure 는 소문자 알파벳처럼 높이나 위치가 달라서(전주의처리) 숫자 각각의 인지가 쉽고 모여있을때 리듬감이 생겨 덜 단조로워 보입니다. 한글에서는 대부분 한글자체가 네모꼴에 맞추어져있고 숫자도 그에 어울리게 같은 높이로 그리다보니 이런 숫자 글꼴이 잘 사용되지는 않습니다. 숫자가 보조적인 정보로 쓰일 경우에는 너무 튀지 않고 무난한 lining figure(같은 높이) 를 사용하는게 좋겠지만 자체로 중요한 정보라면 lower figure 를 사용하는것도 좋습니다. 다만 시간은 자릿수가 중요하니까 각자리의 위치가 정렬이 되어야 보기편한데, text figure 는 대부분 고정폭이 아닌 유동폭 글꼴이라 정렬이 안되는 문제가 있습니다.
** 나중에 알고 보니 학회기간 동안 셔틀을 증편 운행하여 시간표와 상관없이 배차 간격이 짧았습니다. 시간표는 별 의미가 없었습니다. :)
시간을 공간에 펼쳐 놓기
표를 통해 전달되는 정보 자체는 동일하더라도 분명히 더 잘 설명해줄 방법이 있을텐데요. 익숙한 방법만을 강요하는 같아서 불친절하다는 느낌을 받습니다. 사용 맥락을 고려하여 시간 정보를 적절히 공간에 시각화하면 사용자가 정보를 해석하는 과정을 줄여 정보 소비를 수월하게 해 줍니다. 익숙하게 사용하고 있는 다른 표들도 이용 맥락에서 최선의 표현인지 다시 검토해 보면 좋겠습니다.
[참고##정보디자인##]