다음 뉴스에는 기사를 자동 요약해 보여주는 기능이 있습니다. 예전에 야후가 summly 를 인수하면서 이런 뉴스 요약 서비스가 여러가지 의미로 화제가 되었었죠.

다음 뉴스 자동 요약의 품질은 초기에는 만족스러웠던 기억이 나는데요. 오히려 최근들어 기사 앞 문장만 그대로 따오는 경우가 많아서 좀 의문이 들긴 합니다. (두괄식으로 기사를 잘 써서인지) 그럼에도 저처럼 바쁘고 게으른 사람에게는 상당히 유용한 기능입니다.

다음 뉴스 자동요약 기능

버튼 누르기도 귀찮아요. 그냥 펼쳐 보여주세요.

그런데 사용이 그리 편하지 않습니다. 처음에는 클릭하는 방식이었는데 번거럽다는 의견이 있었는지 그나마 현재는 마우스오버만 하면 보여집니다. 이런 기능을 쓰는 사람들 속성을 잘 모르는 것 같아요. 게을러서 버튼에 마우스 옮기는 것도 귀찮거든요. 당연히 처음부터 펼쳐 보여주면 좋겠습니다. 왜 그렇게 안 할까 생각해봤는데 두 가지 정도 이유가 있지 않았을까 싶습니다.

1. 모든 사람이 요약이 펼쳐 보여지는 것을 좋아하진 않는다.

모든 사람에게 자동 요약이 보여지면 당연히 싫어하는 사람이 있습니다. 그래서 사용자 선호에 따라 선택하도록 해야 합니다. 그러면 복잡해 지겠죠. 그런데 별도의 설정 없이도 자동 요약 버튼을 눌러 한 번 펼쳐보면 브라우저 로컬DB에 상태를 저장하고 이 후에도 계속 펼쳐 보여주면 됩니다. 싫으면 토글로 다시 닫으면 되고요. 이런 기능 사용은 기사 자체 보다는 사용자 성향에 더 영향이 있어 쓸 사람은 계속 쓸 것 같거든요.

다만 자동 요약은 기사 본문과 확연히 다르면서 너무 주의를 끌지 않아야 합니다. 요약을 보고 싶지 않으면 별다른 인지 비용 없이 스크롤을 내려 방해 없이 본문을 읽을 수 있어야 합니다.

2. 요약이 바로 보여지면 본문은 안 읽고 바로 나가버릴 수 있다.

두번째는 서비스 제공자 입장에서 요약만 읽고 바로 나가서 사용자를 잃게 되는 걱정이 있을 수도 있을 것 같습니다. 테스트 결과가 있는지 모르겠지만 별로 영향은 없지 않을까 싶습니다. 요약과 상관없이 기사가 좋으면 계속 읽고 나쁘면 바로 닫으니까요.

자동 요약 바로 펼쳐 보기

자동 요약을 본문 앞에 바로 펼쳐보여주기

현재의 팝업 방식보다는 본문 앞에 위치하는 것이 읽기 수월합니다. 자동 요약을 별도 div 요소로 감춰두었다가 마우스 오버시 보여주는 방식인데요. .layer_summary 요소를 prepend를 이용해서 기사 본문 앞으로 옮기고 항상 보이도록 합니다. 그리고 스타일에서 글 상자 형태를 만들어 주고 자동요약이라는 레이블을 붙여줘서 본문과 구분되도록 했습니다.

$(“.article_view section”).prepend($(“.layer_summary”));
$(“.layer_summary”).prepend($(“<span class=summary_label>자동요약</span>”))

코드 https://codepen.io/taekie/pen/gWyOzW

사용자 주의를 뺏는 다단 사용하지 않기

글 줄 길이가 너무 길면 가독성이 떨어지기 때문에 문단 폭을 제한합니다. 넓은 모니터에 여백이 남으면 뭐라도 넣고 싶어집니다. 수익 광고나 사이트에서 벗어나지 않도록 잡아 둘 수 있는 인기 컨텐트 링크를 놓기에 딱 좋습니다. 하지만 이런 요소들은 기사를 읽는데 방해가 됩니다. goodui 에서도 가장 첫번째로 멀티컬럼을 사용하지 말라고 얘기합니다. 다양한 기능보다도 우선 주의를 분산 시키지 않고 메인 컨텐트에 집중 할 수 있도록 만들어 주는 것이 좋습니다.

기사에 집중 할 수 있도록 하는 디자인

저는 개인적으로 부차적인 다단을 없애고 기사에 집중할 수 있도록 디자인을 바꿔서 사용합니다. 이 부분은 광고 수익과 직접적인 관련이 있으니 코드를 공유하기보다 숙제로 남겨두겠습니다. 

다음에서도 뉴스에서만이라도 다단이 아닌 다른 방법을 고민해보면 좋겠습니다. 그렇다고 네이버 뉴스처럼 광고를 기사 머리에 딱 박아 놓는 것은 사용자는 물론 기사한테도 정말 예의가 아니라고 생각합니다. 네이버 뉴스도 좀 적당한 타협점을 고민해 주면 좋겠습니다.

[참고##Design Hacking##]

버스 노선도 Redesign 과정과 결론

이전 글에서는  해외의 사례들을 살펴봤는데요. 이번 글에서는 각 사례에서 적용 또는 참고할 수 있는 부분들을 활용하여 우리나라의 버스 노선도를 리디자인한 과정을 정리해봤습니다.

요즘에 버스 노선도를 보면 빨간 화살표 모양의 스티커를 종종 볼 수 있습니다. 놀랍게도 이는 담당 시청이 아닌 한 대학생 청년이 시작한 일이었는데요.
평소 버스 노선도에 현 위치와 방향 표시가 안 돼 있는 상황에 문제점을 느끼고 있었고, 이를 개선하기 위해 직접 스티커를 붙이고 다녔습니다. 기존의 노선도는 해당 정류장을 이용하는 사람들을 고려하지 않고 다 같은 디자인, 즉 정류장 명만 줄줄 써있는 노선도를 사용해서 문제가 됐는데 어떻게 보면 이 학생이 이 정류장을 이용객들을 위한 정류장 맞춤 화살표를 붙이고 다닌 겁니다.

그는 직접스티커 붙이기를 진행하면서 여러 문제점을 발견했다고 하는데요. 지금 있는 정류장의 위치(노선도 상에서)를 알 수 없고 순환 노선의 경우 방향을 전혀 알 수 없는 점이라던지 방향 표시가 없어 버스를 역방향으로 타는 등의 것들을 발견했습니다. 특히나 스마트폰을 잘 사용하지 않는 노인의 경우가 가장 쉽게 오류를 범했다고 합니다.

어쨌든, 아주 간단한 이 스티커 붙이기로 인해 많은 사람이 현재 위치와 버스의 진행 방향을 잘 알아볼 수 있게 되었고(특히 처음 가는 지역의 경우), 이 청년은 서울시장 표창까지 받았다고 합니다. 이는 실생활에서의 사용자 경험을 간단하게 잘 해결했다고 볼 수 있는 좋은 사례입니다. 

참고자료 http://www.hani.co.kr/arti/society/society_general/531141.html

1. 사용자 유스케이스를 파악하다

위의 사례처럼 현재 버스 노선도에는 아직 해결되지 않은 문제들이 아직 많이 남아있습니다.
이를 해결하기 위해서 먼저 현재 사용자들의 버스노선도 유스케이스(usecase)를 조사해봤습니다.

우선 가장 주목할 점은 스마트폰 보급으로 인해 버스 노선에 대해서 아무것도 모르는 상태로 노선도를 보는 경우는 별로 없다는 것입니다. 
즉 이미 자신의 목적지로 가는 버스를 한 개쯤은 대강 인지하고 온다는 건데요. 하지만 버스정류장에서 사람들을 관찰하다 보면 꽤 많은 사람들이 버스 노선도를 보는 걸 확인할 수 있습니다. 그래서 사람들이 굳이 왜 버스 노선도를 보는 것인지 설문조사를 통해 알아봤습니다.

조사 결과 사용자들이 버스노선도를 보는 이유는 두 가지였습니다.
첫 번째는 비슷한 노선의 버스를 찾기 위해서,
두 번째는 버스의 방향이 맞는지 확인하기 위해서였습니다.

즉 모바일로는 위의 두 요소를 충족시켜 주지 못해서 버스 노선도로 확인차 본다는 건데요. 여기서 문제는 막상 버스 노선도를 보고 확인하려 해도 비슷한 노선을 찾거나 방향을 확인하기 어렵다는 것입니다. 결국 버스 기사님이나 주위 사람들에게 물어보게 되는 시간 낭비를 하게 되는 것이죠. 

일단 가장 큰 문제는 주위 환경을 고려하지 않고 똑같이 노선도를 디자인한 부분입니다. 모든 노선도를 다 똑같이 디자인해 버려서 불필요한 정보들이 많고, 형식에 끼워 맞춰야 해서 오히려 보여야 할 정보들(버스 방향 등)이 빠져 있었습니다. 예를 들면 현재 148번 버스가 지나가는 정류장에는 똑같은 형태의 148번 노선도가 붙어 있는데요. 여기에는 현 위치와 버스 진행방향 같이 각 정류장마다 다르게 들어가야 하는 요소들이 빠져 있는 경우가 많은 반면, 이미 지나온 노선 같은 필요없는 부분은 모두 들어가 있습니다. 

결국은 정류장 별로 맞춰진 '정류장 맞춤형 노선도'가 제작되어야 현 문제들을 개선해 나갈 수 있을 것으로 보입니다. 예를 들면 첫차/막차 시간이 항상 기,종점 기준으로 되어 있어서 그 이외의 정류장에서는 거의 쓸모없는 정보나 다름없었는데 이런 부분을 해당 정류장에 맞게 하는 것처럼, 다 똑같이 구성되어 있는 버스 노선도 또한 각각의 상황에 맞게끔 디자인되어야 합니다. 

물론 모든 버스 정류장마다 노선도 디자인이 다르게 되어야 한다면 엄청난 시간과 비용이 들겠죠. 정류장 맞춤형 노선도가 제작되면 각 정류장마다 노선도 디자인을 해서 인쇄를 해야 하는 문제가 발생할 수 있는데, 이는 “노선도 어플리케이션”을 활용해서 해결할 것으로 기대됩니다. (pxd에서 현재 개발 중입니다.) 

2. 기존 버스노선도에서 하나하나씩 개선하다

2-1) 이전노선 지우기/ 지리정보, 노선 지도 추가 
그렇다면 버스노선도의 어떤 점을 개선해야 이런 요건들을 잘 충족시켜 사용자들이 보기 편한 디자인 할 수 있을까요?
우선 현재 있는 버스 노선도를 하나하나 개선해 가는 방식으로 시작했습니다. 가장 쓰기 좋은 버스 노선도 두 개를 선정하여 조금씩 개선해나가기로 했는데요. 

 

  가장 먼저 한 일은 현재 정류장 이전의 노선은 과감하게 지워버린 것입니다. 이전 정류장들이 줄줄이 있으면 복잡해지기만 하고 봐야 할 정보들을 보기 힘들기 때문이죠. 그리고 이렇게 함으로써 버스의 진행방향을 화살표와 함께 알려주게 됩니다.
그리고 왼쪽에 버스 경로를 간략하게 보여주는 ‘노선지도’로 대략적인 노선을 쉽게 볼 수 있어, 비슷한 노선을 찾기 위해 하나하나 노선도 위의 정류장 이름들을 읽지 않아도 됩니다.
또한 지리정보(고속도로, 한강, 다리 등)를 넣어서 사용자가 쉽게 그룹핑 하여 필요한 부분만 볼 수 있게 합니다. 한강으로 강남과 강북이 구분되는 것처럼 사람들에게 지리적 정보는 매우 큰 랜드마크가 됩니다. 즉 1005-1 에서 분당의 정류장들을 보기 위해 필요없는 서울쪽의 정류장들까지 봐야 했던 이전 노선도들과 달리 “경부고속도로” 뒤편만 보면 되도록 구성했습니다.

2-2) 지하철 강조/하단 행정구역 표시
위의 개선안에서 조금더 개선을 해봤습니다. 

 지하철역 정보가 좀더 눈에 띄도록 노선 위에 배치했습니다. 기존 노선도에는 정류장 이름 뒤에 지하철 아이콘이 표시돼 있는 정도여서 중요한 정보임에도 눈에 잘 들어오지 않았습니다. 갈아타기 위해 역을 찾는 사용자도 많지만, 굳이 갈아타지 않아도 지하철역이라는 것 자체가 기준점이 되어주기 때문에, 이를 기준으로 자신이 탈 버스를 구분하는 사용자들을 위해 잘 보이도록 개선했습니다. 

반대로 잘 보이지 않아도 되는 요소들(노선의 검은색 줄, 동그라미 표시 등)은 컬러를 조정하여 노이즈를 최대한 제거했습니다.

노선도 하단에는 행정구역(시, 구)을 나누어 빠르게 버스의 경로를 인지할 수 있도록 했습니다. 기존 노선도에선 정류장 정보가 다 똑같이 분포되어 있기 때문에 사용자가 원하는 정류장을 보려면 일일이 읽어봐야 했습니다. 그래서 크게 행정구역을 나눠 노선도를 보는 순서를 더 간소화하도록 했습니다.
비슷한 사례로는 전화번호부를 들 수 있는데요.

출처 http://wjsekswl.tistory.com/notice/63
원하는 곳의 번호를 찾기 위해선 다음과 같은 단계를 거칩니다. 먼저 ‘음식점’이라는 큰 카테고리를 찾은 후, 가나다순으로 정렬된 목록에서 ㅈ-ㅊ 을 찾아 들어갑니다. 이제 여기서 원하는 종류의 음식을 찾고 해당 음식을 파는 곳에 전화를 합니다. 
이 순서처럼 리디자인 노선도 또한 버스번호를 보고 노선지도로 대강의 노선을 확인하고 큰 행정구역을 확인한 뒤 해당 구역의 정류장들을 확인하는 순서로 구성되어 보다 빠르게 목적지를 찾을 수 있습니다.

2-3) 유사 노선 비교 
하지만 아직 비슷한 노선의 버스를 한눈에 보기에는 아쉬운 것 같아서 좌측에 런던의 노선도의 특징을 대입시켜봤습니다.(참조_정류장 맥락을 고려한 버스 노선도 디자인1 –해외 버스 노선도 사례와 특징)

 

 각자 가장 비슷한 노선을 가진 버스를 하나씩 골라 맵핑을 시켜봤는데, 강남역같이 버스가 50대 가까이 오는 큰 정류장의 경우 같은 노선이 너무 많아서 왼쪽 칸에 다 들어가지 못할 가능성이 크기 때문에 불가능할 것 같다는 결론을 내리게 됐습니다. (개인적으로 꼭 해결하고 싶었습니다...)

2-4) 긴 노선도 형태 변형 
어쨌든 여기까지 개선해 나가다가 큰 문제를 발견했는데요. 노선이 굉장히 긴 버스의 경우 노선도를 억지로 꺾어야 한다는 겁니다. 현재는 ⊃자 또는 ㄹ자로 꺾어져 있지만, 갑자기 오른쪽에서 왼쪽으로 읽어야 하는 등 그다지 좋지 않은 방법이 사용되고 있습니다.
그래서 반대로 읽지 않아도 되도록 디자인을 해보기로 했습니다. 

 아무리 봐도 이어진 노선이 아니라 다른 노선을 억지로 끼워놓은 것 같은 느낌이 강하게 들고, 일반 사용자들이 보면 전혀 못 알아볼 것처럼 디자인이 돼버렸습니다. 또한, 계속 디자인을 하면서 느꼈던 점은 글자를 억지로 기울여서 배치하다 보니 너무 복잡해 보이고 읽기가 쉽지 않다는 평가를 하고 이 부분을 빨리 개선하고자 했습니다.

3. 가로 형식을 탈피하고, 노선 지도를 따로 사용하다

3-1) 세로 형식/박스 그룹핑 
그래서 이번에는 가로 형식에 얽매이지 않고 세로로 디자인해 보기로 하였습니다.

 

 그리고 세로 버전을 만들면서 가장 만족스러웠던 점은 시선의 흐름이 자연스러워졌다는 점입니다. 버스번호와 노선 지도를 보고 나서 행정구역을 확인한 뒤 자세한 노선을 보도록 하여 시간 낭비를 최소화할 수 있게 구성됩니다.
그리고 좀 더 쉽게 비슷한 경로의 버스를 확인할 방법을 구상하다가 중복되는 노선의 파트들을 박스로 묶어보는 것은 어떨까 하고 넣어 봤는데요. 위 두 개의 버스가 모두 교육개발원입구까지 동일한 노선을 가지고 있고, 분당에서도 일부 겹치는 노선이 있는데 이를 회색 박스로 묶어봤습니다. 

하지만 여기서 또 다른 문제들이 보이기 시작했습니다.
노선도 상단의 노선 지도와 같은 구간을 묶어주는 박스의 역할이 겹친다는 것입니다. 둘 다 주요 구간을 빠르게 보여주어 비슷한 노선을 가진 버스를 쉽게 찾을 수 있도록 해주는 역할을 하고 있기 때문입니다.
그리고 노선 지도는 버스마다 지도의 축척이 달라 노선의 길고 짧음이 구분되지 않는 문제가 있었고, 박스는 겹치는 구간이 여러 곳이 있거나 다 다른데 한 부분만 겹치는 경우 등 여러 가지 변수가 많은 것을 볼 수 있습니다.
결국 나름 유사노선 버스 찾기의 해결책이라고 생각했던 노선 지도와 박스 묶기 둘 다 제대로 된 해결방안이 아니었다는 결론을 내리게 되었고, 다른 방법을 찾게 되었습니다.

3-2) 노선 지도 분리 
그렇다면 차라리 노선 지도를 따로 떼어내서 현재 정류장에 정차하는 모든 버스의 노선을 한 번에 보여주는 것이 훨씬 노선 비교도 잘 되고 보기 편하지 않을까? 라는 생각으로 이어져 노선지도와 박스를 없애고, 모든 노선을 지도상에 배치해보기로 했습니다.

 

남아있는 노선도에 학교나 관공서, 쇼핑센터 등은 해당 장소의 전후 지역을 잘 구분할 수 있으므로 정류장들의 왼쪽에 아이콘을 넣었습니다. 또한 현위치와 종점 형태를 지하철 노선 표시 모양과 다르게 해서 헛갈리지 않도록 했습니다.

3-3) 모든 노선을 지도에 맵핑 
떼어내기로 했던 노선 지도들은 해외의 지도형 노선도를 참고하여 만들기로 했고, 아예 정류장을 하나 정해서 그 정류장의 버스 노선들을 그려보기로 했습니다.

버스가 지나가는 곳에서 나름대로 주요 지점이라고 할 수 있는 기준점들을 그려 넣고 노선들을 그려봤습니다.
하지만 아무래도 광역버스와 일반 간선, 지선 버스들은 노선의 길이 차이가 많이 나기 때문에 짧은 노선들은 가운데 뭉쳐서 잘 보이지 않는 문제가 따라왔습니다. 그래서 아주 멀리 가는 광역버스와 짧은 거리를 가는 다른 버스를 따로 배치하는 것이 좋을 것 같다고 판단하였습니다.

복잡한 요소들은 대부분 다 제거하고 버스가 지나가는 부분에서 기준점이 되는 구간들만 표기했고, 행정구역을 좀더 명확히 표기했습니다. 축척이 다르다 보니 좀더 효과적으로 노선들을 표기할 수 있는 듯합니다.

결과적으로 노선도 위에 붙어있던 노선 지도들을 하나의 지도에 전체적으로 표현하니, 비슷한 경로를 가진 버스나 주요 위치(강남역 등)를 훨씬 효과적으로 볼 수 있게 된 것 같네요. 
비슷한 사례로는 지하철의 주변지역 안내도를 들 수 있습니다. 

출처 http://blog.daum.net/stopthewar/20
역 마다 이 안내도를 설치해서 해당 역의 지하철이 어느 방향으로 가는지 또는 근처에 뭐가 있는지를 대략적으로 알 수 있습니다. 지하철과 연계되는 버스정류장들도 보여서 효과적으로 교통 정보를 전달할 수 있게끔 되어 있네요. 단순히 지하철에 대한 정보로 끝나는 것이 아니라 주변 지역을 안내해 주기 때문에 유용하게 사용되고 있습니다. 

3-4) 사용자 관찰 
마지막으로 직접 버스정류장에 배치하고 사용자들의 반응과 생각을 관찰해 보기로 했습니다. 진행하면서 어려웠던 점은 버스 정류장이라는 장소 자체가 사이클이 빠른 곳이기 때문에 심층적인 인터뷰가 불가능했고 대부분 1, 2분 전후로 참여해 주셨습니다. 

 

가장 큰 장점으로 뽑혔던 것은 현 위치에서부터 시작하니 버스 방향을 헷갈릴 염려가 없겠다는 부분이었습니다. 사용자들도 굳이 필요없는 정보는 있어 봤자 오히려 혼란스럽기만 하다고 느끼고 있었습니다.

주목할 점은 대부분의 사용자는 버스 번호만 보고 지나간다는 사실을 발견했습니다. 거의 1-2초밖에 걸리지 않는데 그 이유는 자신이 타는 버스가 이 정류장에 오는지만 확인하기 때문입니다. (이런 사용자들은 대부분 익숙한 버스를 타면서 습관적으로 흘끗 보는 경우나, 이미 몇 번 버스를 타야 하는지 앱으로 확인하고 왔기 때문에 자세한 부분은 생략하는 것으로 보입니다. 대부분의 버스가 자주 오기 때문일 수도 있습니다.)

5. 최종 디자인안

이런 과정들을 거쳐서 최종 시안이 나왔습니다. 적용한 정류장은 신사사거리 버스정류장입니다.
노선 지도와 일반 노선도를 배치하는데요. 전체적인 노선들을 보며 비슷한 노선을 비교하기 편하게 노선 지도를 본 후 (대부분 익숙하지 않은 길이겠죠), 원하는 버스의 노선도를 찾아 빠르게 목적지를 확인/비교할 수 있도록 디자인 하였습니다.
이전과 바뀐 점은 전반적으로 사이즈를 키우고, 버스번호가 멀리서도 잘 보이게 사이즈를 키운 것입니다.
노선도 사이즈는 180x700(mm)입니다.

마치며

이렇게 정리를 해보니 기대를 충족한 부분도 있지만 한계점이 같이 보입니다. 과감하게 이전 노선을 지워버린 부분이 특히 그런데요. “정류장 맞춤 노선도”라는 타이틀을 가지고 필요없는 정보들을 없애 방향성과 간결함을 강조한 것은 장점으로 볼 수 있겠습니다. 하지만 전체적인 노선을 봐야 하거나 반대편 정류장으로 가야 할 경우가 발생할 수 있는데, 그런 경우 이전의 노선도가 보여야만 해당 정류장이 반대편에 있다는 사실을 인지할 수 있습니다. 리디자인한 것에서는 확인할 수가 없죠. 이 부분이 장점이면서도 때에따라 단점이 될 수도 있는 부분이라고 생각합니다. 

또한 가로 형식이 훨씬 익숙하고 공간 활용이 세로에 비해 잘 되는 점이 있습니다만, 시선의 흐름을 자연스럽게 하고 일자 형태로 노선을 유지하기 위해 세로 형태를 택하는 등 가져감과 동시에 포기해야 하는 부분들이 분명히 존재하고 있습니다. 이를 잘 저울질해서 적용한다면 많은 사용자들의 니즈를 충족시킬 수 있을 것이라 기대합니다.

마지막으로, 두 달 동안 이 프로젝트를 진행하면서 공공디자인이라는 분야가 정말 고려해야 될 것들이 많음을 새삼 느꼈습니다. 저 스스로 불편하다고 느꼈던 점들을 개선해가며 디자인할 수 있었다는 것은 정말 좋은 경험이었습니다. 

버스 노선도 디자인 3편에서는 '노선도 작성 자동화 프로토타이핑' 에 대해 소개해 드리도록 하겠습니다.

[참고##정보디자인##]

해외 버스 노선도 사례와 특징

이 프로젝트는 얼마 전 새로운 지역에 갔다가 집에 오는 길에 버스를 타려고 정류장에 있는 버스 노선도를 보며 내가 타야될 버스를 찾으면서 시작되었습니다.
그런데 항상 느끼는 점이지만 버스 진행 방향이 헛갈리고, 현재 정류장이 어디인지조차 찾기 힘들 정도로 노선도를 보기가 어렵다는 걸 다시 한번 느끼게 되었습니다. 또한 비슷한 경로를 가진 버스를 찾기 위해선 노선도를 하나하나 다 읽어봐야 하고, 이를 비교해서 볼 수 없다는 것이 불편하여 결국 스마트폰으로 검색을 하게 되었습니다. 이는 저 뿐만 아니라 다른 사람들도 마찬가지였는데요. 매일 많은 사람들이 이용하는 버스노선도가 보기 어렵다는 것이 큰 문제로 느껴져 리디자인을 하게 되었습니다.

본격적으로 리디자인을 하기 전에 해외에는 노선도를 어떻게 디자인 했는지 알아보았습니다. 관광산업이 발달한 나라들에선 어떤 버스노선도를 사용하고 있을까요?

먼저 버스 노선도를 특징별로 나눠보면 다음 4가지 유형 정도로 분류할 수 있습니다.
1. 현 정류장을 시작으로 그린 노선도
2. 해당 지역 (ex.신사 사거리)의 모든 버스의 노선을 지도상에 표현한 노선도
3. 실제 경로 형태의 노선도
4. 시간표를 첨부한 노선도

이 네 가지 유형들의 사례와 특징에 관해서 정리해봤습니다.

1. 현 정류장을 시작으로 그린 노선도

출처: http://designworkplan.com/wayfinding/sds-defining-city.htm
이런 노선도는 주로 영국 런던에서 볼 수 있는데요.

출처: https://www.flickr.com/photos/51282757@N05/6218986902/in/photostream/
장점으로는 현재 버스정류장에서 몇번 버스가 어디로 가는지, 비슷한 노선은 뭐가 있는지 정리가 잘 되어 있다는 점입니다. 아마 시간 낭비가 많이 줄 것 같네요.

우리나라와 다른 점은 우리나라는 버스 번호순으로 노선도들이 쭉 나열되어있지만, 런던은 이 정류장을 지나가는 모든 버스의 경로를 한번에 보여줘서 서로 비교가 쉽게끔 만들어진 노선도라고 할 수 있습니다.

우리나라 같은 개별 노선도(하나의 버스 노선만 기록한 노선도)가 없는 대신 위 사진처럼 현재 정류장에 서는 모든 버스의 노선들이 한꺼번에 표시되어, 버스들의 경로가 어디까지 같은 곳을 가고 어디서부터 갈라지는지를 단순화해서 표현하니 굉장히 보기 편하고 효율적인 디자인이라는 생각이 듭니다. 그리고 기본적으로 똑같은 버스 노선도를 줄줄이 늘어논 형태가 아니라 각 정류장에 적절하게끔 노선이 디자인 되어있다는 부분이 굉장히 높게 평가됩니다. 

좀 아쉬운건 우리나라처럼 버스에 색이 빨강, 파랑, 초록, 노랑으로 나뉘어 있다면, 위 사진처럼 버스 노선에 임의로 여러색을 사용할 수 없기 때문에 노선들이 서로 겹쳐 보일 가능성이 매우 높아 적용이 쉽지 않을 것으로 보입니다. 그리고 버스의 수가 많으면 노선들이 합쳐져서 전체적인 부피가 늘어나 제대로 표현이 안 될 가능성도 있겠네요.

2. 지도상에 표현된 노선도

두 번째 사례는 해당 지역의 모든 버스의 노선을 지도상에 표현한 노선도입니다.

출처: http://transitmaps.tumblr.com/post/40871322662/asheville-art
유럽 대부분에서 확인할 수 있는 이런 지도형 노선도는 일반적인 개별 노선도와 함께 부착되어 있습니다.

출처: http://transitmaps.tumblr.com/post/40871322662/asheville-art
장점으로는 현재 지역의 모든 버스의 대략적인 경로를 한번에 확인할 수 있다는 점입니다. 이런 지도가 붙어 있다면 목적지나 그 근방으로 가는 버스들을 한번에 볼 수 있겠죠. 버스 노선을 하나하나 확인하지 않아도 된다는 것이 장점이라고 생각됩니다.

나름대로 버스 노선을 단순화해서 사용자들이 보기 편하게 해놓은 것들도 있지만, ‘버스 노선 지도’라는 걸 고려하지 않고 그냥 일반 지도에 노선을 올려놓은 것 같은 느낌이 드는 지도는 버스정류장에 필요한 정보로서의 역할을 제대로 수행하지 못할 것 같습니다. 필요 없는 정보들이 전반적으로 많아 보이고 오히려 지하철이나 랜드마크 등 필요한 보가 부족해 보이네요. 그리고 전반적으로 형식이 통일되지 않아서 이런 부분은 빨리 개선돼야 할 부분인 것 같습니다.

또 너무 많은 노선이 얽혀 있으면 뭉쳐서 알아보기 힘들 수 있고, 계획적으로 노선이 계획적으로 짜여져 있지 않은 지역은 오히려 복잡해질 수 있을 것 같다는 생각이 듭니다.

3. 실제 경로 형태의 노선도

세 번째는 버스 노선을 실제 경로 형태와 비슷한 모양으로 표시한 노선도입니다.

출처: http://parisbuslady.com/category/busing-around/
주로 프랑스 파리에서 많이 볼 수 있는데요. 버스 안에 부착된 경우도 많습니다.

출처: http://www.parisperfect.com/blog/2012/07/42-bus-best-sightseeing-paris/
이 노선도는 지리정보(강, 다리 등)를 활용하여 위치나 경로 등을 쉽게 인지할 수 있는 장점이 있지만, 가로로 긴 형태를 유지해야 하므로 동서남북을 임의로 돌려야 하거나 노선을 일자로 왜곡해야 하는 경우가 많아 사용자들이 혼란을 겪을 수 있는 단점이 있습니다. 제 생각에 이는 동서남북이 바뀌었다는 것을 정확히 표기하거나 작은 지도상으로라도 보여주면 조금 해결되지 않을까 생각합니다.

좀 더 자세히 보면 버스가 가는 방향의 정류장과 오는 방향의 정류장이 완전히 똑같지 않다는 것을 볼 수 있는데요. 여기서 문제가 발생합니다. 정류장 이름을 모두 위로 쓰다 보니, 사용자들은 읽을 필요 없는 정류장까지 읽게 되거나 정류장의 위치를 잘못 인식하게 되는 경우가 발생할 수 있다는 겁니다. 색을 다르게 하거나 아래로 내리면 덜 헛갈릴 것 같습니다.

4. 시간표 노선도

마지막 네 번째 유형은 시간표를 첨부한 노선도입니다.

출처: https://www.3fach.ch/blog/stosszyt_blog/so-fach-geburi
버스나 이용객이 많지 않은 지역이나 일본에서 많이 볼 수 있는 유형인데요. 정확한 시간을 알 수 있는 장점이 있지만, 우리나라 같은 경우에는 워낙 버스가 자주 오고 종류가 다양하여 굳이 도시에서는 적용할 필요가 없습니다.

지금까지 해외의 버스 노선도에 대해서 정리해봤습니다. 각자 나름대로 중점을 두고 디자인된 부분들이 있고 장단점을 가지고 있는 것으로 보입니다. 이 장점들을 토대로 다음 두 번째 글 '정류장 맥락을 고려한 버스 노선도 디자인 2/3 –버스 노선도 Redesign 과정과 결론' 에서 새롭게 리디자인한 노선도가 어떠한지 이야기하도록 하겠습니다.

[참고##정보디자인##]

[참고##리디자인##]

예전에 소개해 드렸던 아이폰,아이패드에서 웹페이지를 보다 쉽게 스크롤 할 수 있는 Lazy touch scroll UI 스크립트를 오픈 소스로 github에 올려두었습니다. 모두가 더 게으르게 모바일 웹을 사용하는데 도움이 되었으면 좋겠습니다. :)

lazy touch scroll 간단 설명 : 스크린의 좌우 가장자리에 가상의 스크롤바를 만들어서 한 손으로도 쉽게 page up,down을 할 수 있습니다. 터치 휠 기능으로 세밀하게 또는 빠르게 스크롤을 할 수 있으며, 이미지가 잘려보이지 않게 똘똘하게 페이지를 내려줍니다.
 

개발자님, 함께 더 좋아질 수 있게 도와주세요.

https://github.com/taekie/lazy-touch-scroll
github에 자바스크립트 소스를 공개하였습니다. 함께 잘 다듬고, 안드로이드 같은 다른 플랫폼에서도 동작할 수 있도록 도와주세요. 





[참고##redesign##]

아이폰,아이패드의 터치 스크롤은 정말 직관적입니다. 하지만 자주 쓰면 힘들고 귀찮습니다. 화면이 큰 아이패드에서는 더 힘들어요. 컴퓨터에서는 스페이스바로 페이지 단위로 이동하거나 마우스 휠로 손가락만 까닥하면 스크롤이 되는데 실질적인 이동 거리도 늘어나고 손목이랑 팔의 근육도 사용해야 합니다.

그래서 자주 사용하는 웹페이지에 가상의 스크롤 버튼을 만들기로 했습니다.
우선 두가지 원칙을 정했는데

1. 버튼이 충분히 커서 누르기 쉬울 것
2. 버튼이 컨텐트를 가리거나 눈에 거슬리지 않을 것

서로 모순되어 불가능해 보이는데요. 버튼을 투명하게 하고 고정된 위치에 배치하는 것으로 해결 했습니다.

page up,down 버튼 배치

그 다음은 어떻게 버튼을 배치할 것인가인데, 기본적인 page up,down 버튼 영역을 기존 앱들이 하는 방식을 참고하여 생각해봤습니다.

1.은 만화보기 앱 같은데서 사용하는데요. 웹페이지의 경우 하단의 컨텐트 링크를 클릭할 수 없게 되고, 또 상하가 따로 떨어져 있어 사용이 불편하기 때문에 배제하였습니다. 스크롤을 내리다 다시 올려보는 경우가 많거든요.

2. 대부분 페이지의 좌우 영역에 여백을 두고 있으니까 괜찮은 선택입니다. 하지만 한 손으로 쥐고 볼 때 사용이 불편하기 때문에 탈락.

3. 사실 킨들을 사용하고 있어서  처음 부터  이런 구조를 생각하고 있었습니다. 왼손이나 오른손 한 손으로 쥐고 있어도 쉽게 위 아래로 스크롤 할 수 있습니다. 빈도가 높은 page down의 영역을 더 크게 하고요.
그리고 아주 작게 페이지의 끝으로 바로 이동하는 영역을 두었습니다. 

Touch Scroll Wheel

페이지 단위 스크롤이 쉬워지고 나니 이제는 또 한 손으로 미세하게 스크롤을 조절하고 싶어졌습니다. page down을 했는데 이미지가 중간에 걸리게 잘리면 다시 조금 올려서 이미지를 보는 경우가 많았거든요. 손을 떼서 다시 밀어 올리려니 귀찮았습니다.
그래서 터치 영역을 터치패드의 스크롤 휠처럼 사용할 수 있도록 했습니다. 탭하면 페이지 이동 버튼으로 동작하고 터치 한 채로 밀면 스크롤 휠로 동작하는 거죠. 한 손으로 쥐고 엄지로 조작하는 경우가 일반적이라 작은 조작으로도 많이 움직이게 했습니다. 5배 정도로 하니까 적당히 빠르고 또 적당히 세밀한 이동도 가능해졌습니다.

Fast Direct Scroll

스크롤도 되니 이제는 또 원하는 위치로 더 빨리 이동하고 싶어졌습니다. 스크롤바의 thumb을 잡고 바로 이동 하듯이요. pdf 뷰어 앱 중에 thumb이 있는 스크롤바를 제공하는 것이 있는데, 스크롤바가 표시되면 눈에 거슬리니까 화면을 탭해서 스크롤바를 보이거나 가리게 모드를 전환합니다. 이런 방식은 귀찮고 아름답지 않습니다.
애플의 비디오 scrubber bar(seek bar)에서 사용하는 썸을 잡고 움직이다가 아래로 내려서 움직이면 미세조정이 되는 패턴을 반대로 차용했습니다. 테두리 부분을 touch and swipe 하면 상대적인 휠 스크롤이 되다가 손가락을 안쪽으로 옮기면 전체 페이지의 절대적인 위치로 바로 이동합니다. 스크린에서의 손가락 위치가 스크롤 바의 썸처럼 전체 페이지 길이 중에서 현재 페이지 위치가 됩니다.

Image Aware Pgdn

그래도 뭔가 좀 아쉬워요.
지금 이 블로그를 PC에서 읽고 있다면 글을 내릴 때 키보드의 페이지 다운(또는 스페이스바) 사용하나요? 아니면 마우스 휠을 사용하나요? 
전 게을러서 스페이스바를 주로 사용했는데 요즘은 마우스 휠을 더 자주 사용하더라구요. 톡 톡 키보드 누르는 게 더 편한데 왜 휠을 사용할까 생각해봤는데요. 요즘 블로그에 사진이 많아서 그냥 페이지 다운을 하면 사진이 중간에 잘려서 사진 전체가 보이게 스크롤을 다시 올리더라고요. 아하! 
그런 단순 반복적인 작업을 사람이 하면 안되지요. 페이지 다운 하다 중간에 이미지가 걸리는지를 확인하여 이미지가 모두 보이게 스크롤 위치를 조절하도록 했습니다.

일반적인 페이지 다운에서도 텍스트 글 줄이 중간에 걸릴 수 있기 때문에 정확히 window height 만큼을 내리지 않고  조금 위를 더 보여주도록 하고 있는데요. 간혹 이런 고려를 하지 않고 맨 마지막 줄이 중간에 걸려 글자의 윗쪽 반만 보이고 페이지 다운을 하면 글자의 아랫쪽 반만 보여서 결국 읽을 수 없게 만드는 몰상식한 앱도 있더라구요. 텍스트뿐 아니라 이미지도 잘리지 않게 고려해주면 편합니다.







[참고##redesign##]

정보디자인 - 하이브리드 이미지검색  에서 소개한 이미지 검색 UI 의 데모 페이지를 열어두었습니다.

특징은

1. 썸네일 방식과 미리보기(큰 이미지)를 결합한 UI를 사용합니다. 
특정 이미지를 찾아내려는 것 보다는 빠르게 검토해 보려는 사용 패턴에는 썸네일과 원본 이미지를 왔다갔다하는 번거러운 pogosticking 이 빈번합니다. 썸네일과 함께 적당히 큰 원본 이미지를 한꺼번에 보여줘서 빠르게 훑어볼 수 있도록 하였습니다. 개인적으로는 이런 행태의 이미지 검색을 더 많이 하고 있습니다.

2. 그리드 방식이 아닌 타일 방식의 이미지 정렬을 사용합니다.
이미지간의 여백을 줄여 시선의 움직임을 최소화하여 눈의 피로를 줄이도록 하였습니다.

3. auto paging을 사용합니다.
다음 페이지 버튼을 누르지 않고 스크롤만 하면 검색 결과를 계속 볼 수 있습니다.

4. iPad ready
PC, 아이패드 동시에 사용하도록 만들었습니다.


데모 페이지
http://lab.pxd.co.kr/imagesearch/?q=mobile%20ui%20pattern

리서치를 할때 많이 유용합니다. 아이패드에서 아이한테 동물이나 자동차 그림을 찾아줄 때도 좋았고요.
기존의 구글이나 네이버 이미지 검색과 비교해 보시고 사용경험을 공유 부탁드립니다.

실제 이미지 검색 결과는 구글이미지 검색을 이용하고 있습니다.

[참고##redesign##]    

이 글을 웹에서 보고 계시다면 페이지의 맨 아래에 페이지 번호가 쭉 나열된 걸 보실 수 있을텐데요. 이런 UI 요소를 pagination 이라고 합니다. 블로그 글 목록이나 검색 처럼 자료의 양이 많으면 한 번에 표현하기 어려우니까 페이지 단위의 청크로 나눠서 보여주고 쉽게 원하는 부분으로 이동할 수 있도록 하는 UI 패턴입니다. 



좀 더 많은 pagination 디자인 유형은 스매슁매거진 기사에 잘 정리가 되어 있습니다.
http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/






이런 익숙한 UI 나빠요

이렇게 페이지 숫자들과 이전,다음이 나열되어 있는 형태는 상당히 많이 쓰이는 익숙한 UI인데요. 그냥 관습적 쓰일 뿐이지 사용성 측면에서는 실제 사용 행태를 반영하지 않은 나쁜 UI 패턴이라고 생각합니다. (페이지네이션의 사용 맥락에 따라서 다를 수 있으므로 블로그 글 목록으로 한정하도록 하겠습니다.)

페이징 사용 행태

실제 페이징을 하는 사용자 행태는 다음(이전) 목록을 순차적으로 보는 것이 가장 빈번하고 특정 페이지로 점프하는 경우는 상대적으로 적습니다. 대부분의 경우는 어떤 항목이나 글이 있는지 예상을 못하기 때문에 목록을 순차적으로 쭉 훑어보게 됩니다. 목록의 처음이나 끝으로 이동한다든지 새로운 글을 보기 위해 마지막 봤던 페이지로 이동하든지, 관심없는 글들을 스킵하거나 예전에 봤던 글을 찾기 위해 해당 날짜로 빨리 이동 한다든지, 무언가 예측 가능한 경우에만 특정 페이지로 점프하고요. 그렇게 사용하시죠?

이렇게 주 사용 행위가 나머지 행위의 사용 빈도 차이가 큰 경우에 primary action이라는 패턴을 사용합니다. 자주 쓰는 건 크게 강조하고 잘 안 쓰는 건 약하게 표시해야 보기도 편하고 조작도 쉬워집니다.
강조라는 것은 상대적이어서 중요한 걸 크게 하는 것보다 중요도가 적은 것에 주의가 적게 가도록 하고 노이즈를 줄여 주는게 더 효과적입니다. 선택지가 많으면 반응 시간이 느려질 테니까요. http://en.wikipedia.org/wiki/Hick's_law 


페이지 번호 나열을 보여줄 필요가 있나요?

이런 사용 행태를 고려하면 페이지 번호 나열을 없애는게 좋습니다. 페이지 번호 나열은 대부분의 경우에 불필요한 노이즈입니다. 검색 결과나 빈번하게 업데이트되는 SNS timeline 같은 경우에 페이지를 예측하기 어려우니까 특정 페이지로 점프하는 기능을 없애고 단순히 더 보기만을 사용하는 UI 사용이 늘고 있습니다. 네이버 블로그나 티스토리의 모바일 페이지가 이런 패턴을 사용하고 있는데요. 하지만 이건 또 잘 못 적용한 것 같습니다. 블로그는 검색이나 타임라인과는 성격이 달라서 극단적으로 페이지 이동을 없애면 또 불편하더라구요. 검색을 통해 접근한 블로그를 목록과는 반대로 시간순으로 훑어보려고 해도 페이지 이동이 안되니까 답답합니다.



그냥 링크를 다 보여주세요

페이지 번호 나열의 또 나쁜 점은 페이지라는 청크를 다시 10개 정도의 페이지 번호 청크로 나누어 인접 영역으로만 이동하도록하는 귀찮은 구조이기 때문입니다. 특정 페이지로 이동하려는 경우에 복잡한 페이징 구조를 만들게 아니라 그냥 전체 페이지 링크를 다 보여주는게 심플하고 좋습니다. 테이블 형태로 전체 페이지를 표시하면 현재 위치를 확인하는데도 수월하고요. 물론 항상 전체 페이지를 모두 보여주면 복잡하니까 처음에는 가려 두었다가 필요한 경우에 펼쳐 보이도록 합니다. ios의 리스트에서도 primary action 은 항목을 탭하는 것으로, secondary actions은 기능을 감추어 두었다가 detail disclosure button이란 파란 화살표 버튼을 누르면 상세 기능이 펼쳐지도록(상세페이지이동) 합니다.


실제로 구현을 해보면 모바일에서는 이전 다음을 하단에 배치하는 것보다 이전을 목록의 상단에 두고 목록을 계속 추가하는게 사용이 더 편리했습니다.





지금도 목록을 만들고 그냥 생각없이 페이지 번호를 그려넣고 있지는 않나요?




[참고##Pagination##]

아이가 토마스 기차 놀이만 하더니 요즘 로보카 폴리와 디즈니 카2를 보고나서는 자동차도 가지고 놀고 있습니다.  놀이매트에 자동차 길이 그려 있어서 같이 자동차 경주를 하자고 했는데 별로 흥미가 없더라구요. 아이는 재미없어했지만 저는 장난감 자동차 가지고 놀면서 실제 로드뷰가 보이면 재밌겠다 싶은 생각이 들었습니다. 그래서 만들어봤습니다. 

원리는 단순합니다. 
아이패드의 지도 위에 자동차 장난감이 놓여있는 위치와 방향을 로드뷰로 보내서 보여주는 거지요.

장난감 바퀴 부분에 컬러 점토를 붙여서 3개의 접점을 만들었습니다. 점토가 굳어도 약간 수분이 남아있는 상태에는 전도체 역할을 합니다. (동영상을 찍을 당시는 점토가 너무 굳어버려서 약간 인식이 잘 안되었습니다) 자동차도 쇠로 되어 있어서 손으로 쥐고 있으면 3점을 누른 것처럼 되는 거지요. (디즈니에서 이런 형태의 appmate라는 장난감을 판매하고 있습니다.)
삼각형의 형태를 인식해서 장난감의 방향을 알아내고 접점의 위치를 가지고 지도 상의 위,경도를 다시 계산해서 보내주면 해당하는 로드뷰 화면이 표시되는 거지요.

아이가 동영상을 보더니 나도 하고 싶다고 굉장히 흥미를 보이네요.

요즘 입력 장치가 마우스에서 터치로 옮겨가고 있는데 좀 더 tangible한 인터랙션에 대한 방법을 고민하고 있습니다.

[참고##redesign##]