brunch

You can make anything
by writing

C.S.Lewis

by pxd UX Lab Sep 15. 2015

버스 노선도 Redesign 과정과 결론

정류장 맥락을 고려한 버스 노선도 디자인 3편 중 2편 

by 허지민 인턴연구원


버스 노선도 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초밖에 걸리지 않는데 그 이유는 자신이 타는 버스가 이 정류장에 오는지만 확인하기 때문입니다. (이런 사용자들은 대부분 익숙한 버스를 타면서 습관적으로 흘끗 보는 경우나, 이미 몇 번 버스를 타야 하는지 앱으로 확인하고 왔기 때문에 자세한 부분은 생략하는 것으로 보입니다. 대부분의 버스가 자주 오기 때문일 수도 있습니다.)


4. 최종 디자인안

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


마치며


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

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

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

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

작가의 이전글 디자인 에이전시의 변화
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari