정류장 맥락을 고려한 버스 노선도 리디자인 3/3 - 노선도 자동화 프로토타이핑
맥락 없는 디자인
사용자와 사용 맥락을 이해하는 것은 UX뿐 아니라 모든 디자인에서 꼭 필요한 과정입니다. 정보를 시각화한 정보디자인의 경우 정보가 여러 겹으로 부호화되어 있어 글처럼 차례로 읽히지 않습니다. 정보 밀도가 높아 다양한 방식으로 읽힐 수 있는 건 좋지만, 사용 맥락에 따라 정보를 쉽게 찾아가도록 흐름을 만들어주어야 합니다. 네가 뭘 좋아할지 몰라서 다 넣어 보면 항상 실패합니다. 맥락을 모르고 이야기하는 사람과 대화하면 답답합니다.
그림1 - 개인이 현 위치 스티커를 붙여 놓은 현행 서울 버스 노선도
일상에서 매일 만나는 정보디자인인 버스 정류장의 노선도는 이런 맥락 없는 디자인으로 우리를 피곤하게 합니다. 같은 버스 노선도라도 정류장에서 볼 때, 버스를 타고 가면서 볼 때, 인터넷으로 찾아볼 때의 맥락이 각기 다릅니다. 버스 정류장에서 노선도를 확인할 땐 '내가 여기'에서 버스를 타고 원하는 목적지에 갈 수 있는지를 확인하고 싶은 거지, '버스'가 어디에서부터 와서 어디까지 가는지 서사적인 여정이 궁금한 게 아니거든요. '버스'만 있고 '내가 여기'라는 맥락이 빠져있는 디자인이라 우리를 불편하게 합니다. 현 위치에 빨간 화살표 스티커를 붙여 맥락을 부여하는 작은 차이만으로도 인지 부담이 많이 줄어듭니다.
그럼 왜 처음부터 이런 맥락을 반영한 디자인의 노선도를 제공하지 않는 걸까요? 돈이 드니까요. 인쇄와 컬러 출력의 차이보다 정류장마다 다른 노선도를 하나씩 그리려면 몇 배의 비용이 들 테니까요. 제가 타는 버스만 해도 정류장이 98개인데 많게는 159개도 있습니다. 현실에서 고려해야 할 많은 다른 요인들이 있기 때문에 디자인만 좋다고 채택하지는 못 합니다. 사실 그런 장애 요인들을 고려하지 못한 디자인은 좋은 디자인(해결)이라고 할 수 없습니다.
맥락을 고려한 버스 정류장 노선도는 현실을 고려하지 못한 이상일 뿐일까요? 앞의 글에서 예고했듯이 비용의 문제는 사람이 그리는 게 아니라 자동화함으로써 해결할 수 있습니다. 정부와 지자체의 공공 정보 공유 시책에 따라 버스와 같은 대중교통 정보들이 제공되면서 이런 디자인을 자동화(프로그래밍)하는 것이 더 수월해졌습니다. 리디자인 과정에서부터 실제 노선 데이타를 적용하여 테스트했던 워킹 프로토타입을 소개합니다.
특허출원 관계로 글이 늦어졌습니다. 아래글을 함께 읽어주세요.
정류장 맥락을 고려한 버스 노선도 디자인 1/3 – 해외 버스 노선도 사례와 특징
정류장 맥락을 고려한 버스 노선도 디자인 2/3 –버스 노선도 Redesign 과정과 결론
정류장 맥락을 고려한 버스 노선도 리디자인 3/3 - 노선도 자동화 프로토타이핑
불필요한 부분 덜어내기
정보를 디자인할 때 뭔가를 더 집어넣기 전에 불필요한 것을 덜어내는 것이 중요합니다. 내가 여기에서 어디로 가는가가 중요한 맥락에서 버스가 여기까지 어떻게 왔는지는 보다 더 중요한 정보를 방해하는 노이즈입니다. 전체 구간에서 화살표로 내가 어디인지, 어느 방향으로 가는지 표시하는 것보다 그냥 현 위치부터 시작하면 인지 비용이 훨씬 줄어듭니다. 어떤 구간은 왼쪽으로, 어떤 구간은 오른쪽으로 진행하는지 고민할 필요가 없습니다.
문제는 어디까지 표시할지 입니다. 단순히 현 위치에서 종점까지 표시하면 반환점을 되돌아오는 구간이 중복되어, 이 역시 노이즈가 됩니다. 그렇다고 기계적으로 반환점까지만 표시하는 것도 문제가 되는데요. 버스 노선이 반환점을 바로 U턴해서 도는 게 아니라 반환점 주변을 크게 돌아 경로가 다른 경우가 많습니다. 같은 길을 되돌아오면 반환점 부근에서는 타려는 승객이 적어질 테니 이용이 많은 경로로 반환 경로를 정하는 게 유리합니다. 그래서인지 지하철역을 끼고 도는 경우가 많습니다.
지리적으로는 멀리돌아 가는 것이지만 승객 입장에서는 같은 길을 되돌아오는 것은 아니어서 충분히 이용할 수 있습니다. 조금 돌아가지만 내려서 갈아타거나 걸어가기 귀찮으니까요. 노선도 상에서는 어디까지 표시할지 애매하지만, 지도 위에 그려보면 되돌아서 기하학적으로 폐곡선이 되는 지점까지 표시해주는 게 합리적입니다.
위 노선에서 노선표가 제공하는 반환점 정보는 이수중학교이지만 사람들은 내방역까지 타고 가기도 합니다. 오갈 때의 경로가 달라 복선으로 표시된 구간이 사용자 인터뷰에서 공통으로 혼동을 주는 문제로 지적되었는데요. 이렇게 현 정류장에서 승객이 실제 이용할 구간만을 일렬로 펼쳐서 표시하면 혼동을 줄일 수 있습니다.
정보 덩어리 짓기
기존의 노선도에서는 각각의 버스 정류장 이름이 같은 형태로 반복되어 있어 어디에서 뭘 찾아야 할지 많이 어려워합니다. 목적지를 확인하려면 하나하나 찾아봐야 합니다. 지하철 역 정도가 강조색과 픽토그램을 사용해서, 지하철역 같은 주요 정류장을 우선 찾고 그 주변을 찾아보는 탐색 전략을 취하기도 합니다.
정류장을 행정구역별로 덩어리로 묶어주면 상관없는 정류장을 빨리 제거해나가 좀 더 수월하게 찾을 수 있습니다. 분당처럼 시외로 가는 경우에 서울은 볼 필요도 없으니까요. 청크의 구분은 2단계로 나누었는데요. 광역 버스인 경우는 시 단위로 구분이 적절하고 지선이나 간선의 경우에는 동 단위로 좀 더 세밀한 구분을 제공하는 것이 유용하다는 피드백을 얻었습니다.
시나 구의 큰 단위는 묶음 기호로 구분하는 것뿐 아니라 정류장 사이에 여백을 두어 시각적으로 나뉘어 보이도록 하는 게 더 효과적이었습니다.
그 다리 위를 건너가는 기분을
버스를 타고 지나면서는 행정구역은 인식하지 못하지만, 강이나 고속도로를 지나는 지리 정보는 잘 기억합니다. 그 외는 다 똑같은 건물에 같은 길이라서 그게 그것 같으니까요. 강(다리)으로 노선을 구분해서 강남으로 가는지 강북으로 가는지 힌트만으로도 행선지를 이해하는 데 많은 도움이 됩니다.
노선도 정보에서는 제공되지 않지만, 서울의 경우 행정구역이 강을 따라서 나뉘기 때문에 인접한 두 정류장이 강북, 강남으로 바뀌면 한강을 건넌다는 것을 간단히 프로그램으로 알 수 있습니다. (버스 API 정류장 정보에 행정구역 정보가 포함되어 있습니다) 주변 정류장 이름으로 어느 다리를 건너는지도 추측할 수 있습니다. 선유도를 지나면 양화대교, 노들역을 지나면 한강대교를 지납니다. 마포대교남단 정류장을 지나면 당연히 마포대교를 건너겠지요.
시외로 가는 경우에 고속도로를 지나는 것도 중요한 정보입니다. 정류장 간 거리가 충분히 큰 경우에 고속도로나 도시고속도로를 타고 지나는 걸 알 수 있습니다.
랜드마크
분류를 위한 덩어리가 아니어도 같은 형태가 반복되면 어디까지 보고 있는지 신경을 써야 해서 피곤합니다. 기준이 되는 시각적인 이정표를 제공하는 게 도움이 됩니다. 사람들이 많이 찾는 정류장을 두드러지게 강조하면 그 정류장뿐 아니라 다른 덜 중요한 정류장을 찾아보는 데도 도움이 됩니다.
우선 지하철역을 강조할 필요가 있습니다. 지하철로 갈아타기 위해 버스를 타는 경우도 많고, 지하철역은 대략의 위치를 잘 알고 있기 때문에 랜드마크로 활용됩니다. 현재는 비용 문제로 2도 인쇄로 지하철역 이름만을 강조하고 있는데요. 단지 지하철로 갈아타기보다는 특정 노선을 타려는 경우가 많으므로 지하철 노선의 고유색을 강조해 보여주는 게 더 효과적입니다.
그 외 사람들이 기억하는 주요 랜드마크는 공공기관이나 대형 마트 등이었습니다. 학교 같은 공공장소는 자신의 목적지 부근만 기억하고 그 외는 잘 기억하지 못하는 것 같습니다.
사람들이 많이 타고 내리는 정류장도 잘 기억합니다. 빈자리가 날 확률이 높으니까요. 정류장에 많은 버스가 정차하면 사람들이 많이 이용하는 정류장일 가능성이 큽니다. 개별 버스의 평균 배차간격을 반영하여 특정 정류장에 시간당 몇 대의 버스가 오는지를 계산하면 이용률이 높은 정류장을 추정할 수 있습니다. 그런 중요 정류장을 볼드 표시하는 방법을 사용할 수 있습니다.
예상 소요 시간
정류장별 노선도를 개별적으로 그리게 되면 정류장별 예상 시간을 표시할 수 있습니다. 교통 상황에 따라 다를 수 있지만 대략 가늠할 수 있는 정보가 제공되는 것으로 도움이 많이 됩니다. 현재는 기점의 출발시각을 표기하고 있어서 별 도움이 되지 못하는 첫차, 막차 시간도 현 정류장의 실 도착시각으로 표기하면 유용할 수 있을 것입니다.
프로토타입에서는 꼼수를 이용해서 소요시간을 계산했는데 실 데이타 로그를 분석하면 평균 시간을 반영하여 표시할 수 있습니다. 인터넷에서 제공하는 버스 노선도에서는 시간별로 평균 소요시간을 제공할 수도 있을 것 같습니다. 다음, 네이버에서 제공해주면 좋겠습니다.
길 찾기가 아닌 위치와 경로 표시를 위한 지도
지도 위에 운행 경로를 표시한 간소 지도가 유용하다는 피드백을 많이 받았습니다. 글자로 쓰여 있는 것보다 지도에 표시되면 훨씬 쉽게 경로를 이해 할 수 있으니까요. 또 미니맵에서는 전체 경로를 옅은 색으로 표시하여 이전 정류장 노선을 없앤 것을 보완할 수 있습니다.
지도 API를 사용하면 소축척지도에서는 고속도로가 복잡하게 얽혀있어 정작 실제 경로는 잘 보이지 않고 지형이나 행정구역을 파악하기도 어렵습니다. 지도의 맥락이 운전자의 길 찾기에 맞추어져 있기 때문인데요. 내가 운전하는 것도 아니니 길은 별로 관심 없거든요. 대축척에서는 길이 블럭을 나누어 위치를 파악하는 데 중요한 정보이지만 소축척에서는 필요치 않은 경우도 많습니다. 여행지도를 만든다든지 할 때에도 내가 어디를 갔었는지가 중요하지 길이 중요한 건 아니니까 이렇게 고속도로가 지형을 울룩불룩 뒤덮은 지도가 아닌 간소화 지도가 제공되는 게 좋습니다. 프로토타입에서는 지형과 행정구역만을 단순화한 지도를 직접 그려서 사용했습니다.
내비게이션 용도를 우선한 소축척 지도
위치와 경로 표시에 적합한 간소화 소축척 지도 (다음지도에 오버레이 맵 사용)
노선도 간의 정렬
가로 형태의 노선도는 공간 제약으로 정류장 명을 기울여 써야 해서 읽기가 어렵습니다. 세로 형태의 목록을 사용하면 이름이 정렬되어 쭉 읽어나가기 수월합니다. 또 개별 노선도에서뿐 아니라 정류장에는 많은 노선도가 같이 붙어 있으니 함께 모여있을 때 보기 좋은 배치도 고려되어야 합니다. 현재의 그리드 형태의 배열보다는 한 줄로 나열된 형태가 시선의 이동이 줄어 더 보기 편합니다.
그래서 세로 배열을 같이 실험해보았습니다. 세로로 나열하면 이름을 왼쪽 정렬하고 픽토그램을 노선 왼쪽에 붙여서 더욱 깔끔하게 정리할 수 있습니다. 가로로 기울여 쓴 것에 비해서 줄 간격을 줄여도 정류장 이름을 읽는 데 많이 불편하지 않기 때문에 공간 활용이 더 효율적입니다. 정류장이 늘어나면 줄 간격을 조절하여 노선도가 너무 길어지는 것을 막을 수 있습니다.
정류장 운행 지도
개별 노선도와 별개로 정류장마다 버스 노선 지도를 추가할 수 있습니다. 이 지도를 통해서 현 위치에서 갈 수 있는 목적지를 한눈에 확인할 수 있습니다. 개별 노선도와 같이 현 정류장에서 실제로 이용할 정류장만을 표시해서 방사형의 경로가 나타나게 됩니다. 모든 노선을 한 번에 표시하도록 지도의 스케일을 정하면 근거리 노선의 경로들은 가까운 곳에 뭉쳐서 잘 구분이 안 될 수 있습니다. 이런 경우에 먼 곳까지 운행하는 광역버스와 지선,간선 버스를 나눠서 표시하면 조금 더 보기 수월해집니다.
모든 버스 경로가 현 정류장 한곳에서 뻗어 나가므로 겹치는 노선이 생겨 원점에 가까운 곳은 구분이 어려워집니다. 색상은 이미 노선 구분에 사용되고 있어 마음대로 사용하는데 제약이 있습니다. 버스 별로 명도와 채도에 변화를 주고 노선을 조금씩 어긋나게 하면 완전히 겹치는 것을 줄일 수 있습니다. 버스 번호 레이블을 표시하는 위치에 대해서도 여러 가지 실험을 해보았는데 경로의 말단에 표시하는 것이 가장 보기 편했습니다. 중간에 표시하면 겹치는 경우가 많으니까요. 번호표 표시 위치도 될 수 있으면 경로와 겹치지 않도록 좌상, 우상, 좌하, 우하 네 영역으로 나누어 진행 경로를 연장하는 방향으로 그려주는 등의 규칙을 적용하여 그려주도록 하였습니다.
모두를 이롭게 하는 디자인
모두가 만족하게 하려는 디자인은 모두에게 그다지 좋지 않은 디자인입니다. 공공디자인에서는 특히 소수자를 배려해야 한다는 생각에 소수의 유스케이스까지 모두 반영 하다 보면 모두를 괴롭게 합니다. 누가 왜 어떻게 사용하는지를 이해하고 가장 적합한 맥락에 맞게 디자인을 하는 게 더 많은 사람을 이롭게 합니다.
디자인은 결과라기보다는 과정입니다. 맥락에 맞는 버스 노선도가 아이디어 차원이 아니라 실생활에 작은 도움이 될 수 있도록 지속해서 지원을 할 계획입니다. 현재 개발 버전에서는 다음,네이버의 지도 API와 서울시 버스 정보 API 등을 이용해서 수도권의 모든 정류장의 버스 노선도를 자동으로 생성하고 벡터로 출력할 수 있습니다. 교통시설과의 담당 부문과의 협조를 통해 새로 설치되는 버스셀터에 새로운 디자인의 버스 노선도를 시범 운영해보고 시민들의 의견을 받아 개선해 나가는 방향을 고려하고 있습니다. 기존의 인쇄 노선도를 대체하는 방법과 현재 참여하고 있는 TFD 과제와 협업하여 투명디스플레이를 활용한 버스 정보 안내 시스템에 적용이 가능할 것 같습니다. 이후에도 진행 과정을 공유하도록 하겠습니다.
서울 시내버스 내부 노선도 디자인에 적용되었습니다.
[참고##정보디자인##]