태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'리디자인'에 해당되는 글 10건

  1. 2016.11.22 지도 기반의 버스 앱 리디자인 by 無異
  2. 2016.05.19 데이타 기반 퍼소나 - 트루밸런스 by 無異
  3. 2016.05.04 아이와 함께 만드는 한글 공부 키보드 (12) by 無異
  4. 2015.07.02 한국어 맞춤법/문법 검사기 리디자인 (14) by 無異
  5. 2015.06.15 정류장 맥락을 고려한 버스 노선도 리디자인 3/3 - 노선도 자동화 프로토타이핑 by 無異
  6. 2015.03.11 정류장 맥락을 고려한 버스 노선도 디자인 2/3 –버스 노선도 Redesign 과정과 결론 by 허 지민
  7. 2015.03.10 정류장 맥락을 고려한 버스 노선도 디자인 1/3 – 해외 버스 노선도 사례와 특징 by 허 지민
  8. 2014.09.22 [정보디자인] 정보 소비 맥락을 고려한 시간표 리디자인 (7) by 無異
  9. 2011.07.07 [검색 리디자인] 통합 검색 덜어내기 (1) by 無異
  10. 2011.01.25 [검색  리디자인] 통합검색, 광고주를 위한 검색? by 無異
2016.11.22 11:24

지도 기반의 버스 앱 리디자인

버스 도착을 확인하는데 기존의 즐겨찾기 목록이 제게는 적합하지 않아 불편했습니다. 그래서 버스 앱을 지도 기반으로 만들어 사용하고 있습니다. 


맥락에 따른 버스 즐겨찾기 정보 디자인

기존 버스 앱의 즐겨찾기 목록에는 출근 할때 집 앞에서 타는 버스, 갈아타는 버스, 퇴근 할때 회사 근처에서 타는 버스, 갈아타는 버스, 수영장 갔다 집에 오는 버스들이 섞여 있습니다. 각 상황에서 버스가 두 개 이상 있다보니 목록은 점점 길어집니다. 긴 목록을 스크롤 하면서 내가 지금 탈 버스를 찾다 보면 화가 납니다. 내가 탈 것도 아닌 잡음이 되는 버스 목록을 왜 보고 있어야 하지? 앱이 아닌 비서라고 생각하면 불친절하거나 센스 없는 거거든요. 폰은 지금 내가 어디 있는지, 몇 시인지를 알고 있으니 내가 어떤 버스를 타려는 맥락인지도 알 수 있잖아요. 

네이버 지도의 버스 즐겨찾기에서 이름을 목적지에 따라 '회사','집' 등으로 변경해서 정렬해 볼 수는 있지만 그렇다고 지금 내가 타야 할 버스가 한 눈에 들어오지는 않습니다. 카카오 버스는 정류장 별로 그룹핑하여 보여주어 좀 더 보기 편하지만 내가 뭘 타야 하는지 바로 보이지 않는다는 점에서는 차이가 없습니다. 예외적이긴 하지만 전 갈아타는 같은 정류장에서 아침에는 회사로 저녁에는 집으로 가는데요. 같은 정류장이라도 다른 맥락이 섞여 있으면 오히려 방해되기도 합니다.

네이버 지도 버스 즐겨찾기, 카카오 버스 즐겨찾기


내가 지금 상황에서 타려는 버스만 알아서 잘 보여줄 수는 없을까요? 할 수 있습니다. 내가 있는 곳 근처의 즐겨찾기만 보여주는 정도의 간단한 필터링을 할 수 있습니다. 하지만 위치 정보가 정확하지 않거나 하면(실내에 있거나 하여) 실제 의도를 제대로 반영하지 못하는 false negative 오류가 생길 수 있습니다. 예외적인 상황을 고려하면 목록 형태보다 지도를 기반으로 보여주는 게 더 이점이 있습니다. 의도한 즐겨찾기를 잘못 보여주더라도 지도의 이동이나 줌 아웃을 통해 어렵지 않게 다른 즐겨찾기를 볼 수 있거든요. 

또 몇 정거장 전이라고 표시하기보다 지도 위에 표시하면 버스가 어디쯤 오고 있는지 직관적으로 알 수 있습니다.

즐겨찾기에 이용 시간대를 옵션으로 지정하면 같은 장소에서 다른 맥락인 경우도 걸러낼 수 있습니다. 같은 정류장에서 출퇴근 버스를 갈아타는 경우에도 퇴근 시간이면 출근 버스는 흐릿하게 표시하여 현재 맥락의 버스에만 집중하도록 했습니다.

도착 시간 정보를 표시하는데도 작지만 의미 있는 디테일이 있습니다. 같은 정류장에 여러 대의 버스가 있는 한 경우에, 그냥 번호순이 아니라 도착 시각에 따라 정렬해 먼저 올 버스가 먼저 보입니다. 어떤 버스가 먼저 올지 고민하지 않아도 됩니다. 보통 첫 번째, 두 번째 도착 시간을 함께 제공하는데 둘의 중요도가 같지 않습니다. 그다음 버스에는 관심없는 경우가 많으니 흐리게 표시하면 중요한 정보에 더욱 쉽게 집중할 수 있습니다. 버스가 가까이 와서 1분 이내에 도착하는 경우에 색을 강조하여 표시하면 인지 비용이 줄어듭니다. 


회사와 갈아타는 정류장에서의 현 위치를 기반으로 한 즐겨찾기 버스 도착 표시. 퇴근 시간대이므로 회사로 가는 버스는 흐릿하게 보인다.


즐겨 찾기 등록도 지도 기반으로 하면 보다 직관적으로 바꿀 수 있습니다. 기존은 정류장 번호를 먼저 검색하고 버스를 선택하거나 버스 번호를 검색하고 경로에서 정류장을 선택하여 개별적으로 등록하는 방식 위주였습니다. 무슨 DB 입력하는 것 같아요. (주변 지도에서부터 선택하는 방법도 물론 제공하지만요)

출근할 때 타는 버스, 퇴근할 때 타는 버스, 운동 갔다 집에 오는 버스 등 맥락에 따라 즐겨찾기를 하는 것으로 사고를 바꾸면 UI도 달라집니다. 탈 정류장을 선택하고 목적지를 지도에서 선택하면 해당하는 경로의 모든 버스를 찾아줍니다. 즐겨찾기에 왜 굳이 탑승시간을 지정할까요? 똘똘한 앱은 이제 내가 출근 시간에 이 정류장 근처에 가면 앱을 켜지 않아도 자기가 알아서 버스들의 도착 시간과 바로 승차 알림을 푸시로 알려줄 수 있게 됩니다. 


즐겨찾기 등록 UI. 버스 이용 맥락에 따른 즐겨찾기


주변 정류장 버스 확인

주변 정류장의 버스 정보를 확인할 때도 지도 기반이 보다 유용합니다. 즐겨찾기와 주변 정류장 모드를 나눌 필요가 없거든요. 지도에 내 위치를 표시하면 내가 어느 정류장 근처에 있는지 바로 확인할 수 있습니다.

높은 빌딩이 밀집한 곳에선 전파 반사로 GPS가 부정확해져 내가 길 건너편에 있는 것처럼 표시되는 경우가 자주 있습니다. 그래서 낯선 곳에서는 내가 어느 정류장에 서 있는지 지도를 봐도 헷갈리게 됩니다. 위치와 시선 방향을 함께 표시하면 이런 문제를 어느 정도 해결할 수 있습니다. 정류장에서 도로를 바라보면서 지도상의 내 위치를 확인해보면 실제 위치를 가늠하는 데 도움이 됩니다.



현재 정류장에서 버스 길찾기

코엑스에서 열리는 전시회에 가기 위해 고속터미널 앞의 버스 정류장으로 갔습니다. 여기에 바로 가는 버스가 많다는 걸 알고 있었거든요. 하지만 몇 번 버스를 타는지 까진 모릅니다. 정류장에서 버스 노선도를 하나하나 살펴보면서 코엑스 가는 버스를 찾으려다 포기했습니다. 노선도 디자인이 너무 나쁘거든요. 운 좋게 하나 찾더라도 더 빨리 오는 버스가 있진 않을지, 경로가 다르니 어떤 버스를 타는 게 더 빠를지 비교 선택이 불가능한 정보 형태입니다.


스마트폰의 대중교통 길찾기를 이용하면 스마트하게 몇 번 버스를 탈지, 어떤 버스가 먼저 올지 알 수 있습니다. 하지만 내가 지금 정류장에 있는 상황이라면 기존 앱은 그리 똘똘하게 정보를 보여주지는 않습니다. 

네이버 지도는 길찾기가 우선이라 버스 도착 시간은 알려주지 않습니다. 1, 2분 빨라 봤자 10분씩 더 버스를 기다려야 하면 아무 의미 없잖아요. 

그래서 다음 지도는 버스 도착 시간을 함께 표시해 줍니다. 자 이제 버스 검색 능력 시험을 보겠습니다. 아래 검색 결과를 보고 다음 물음에 답하시오. "뫄뫄는 지금 고속터미널 정류장에 서있다. 코엑스 전시장에 가려면 어떤 버스를 타는게 가장 좋은가?"


네이버 지도 앱, 다음 지도 앱 대중교통 길찾기

정답을 찾았나요? 정답을 찾는데까지 시간은 얼마나 걸렸나요? 

가장 빠른 35분 걸리는 401번 버스를 탈까요? 13분 기다려서?

아니면 그다음 1분 느리지만  4분 58초 후 도착하는 3414번 버스를 탈까요? 함정이에요. 이건 신호등을 기다려 횡단보도를 건너 150m 떨어진 다른 정류장이에요. 

왜 검색결과는 바로 답을 주지 않나요? 왜 내가 결과를 보고 생각하고 해석해서 답을 찾아야 하나요? 물론 이 앱들은 이런 특정한 맥락을 위한 앱이 아니라 범용적인 맥락의 길찾기 앱인 걸 감안해야 합니다. 

하지만 현재의 목록 위주의 대중교통 특히 버스 길찾기 결과는 사용자의 검색 행태에 적합하지 않습니다. 대중교통 길찾기 사용자를 관찰해보면, 경로를 결정하기 위해 지도로 들어가서 확인하는 경우가 많습니다. 실제 목적지와 도착 정류장이 다르기 때문인데요. 걸리는 시간은 도보 시간으로 가늠할 수 있다고 해도 버스에서 내려 목적지까지 어떤 길로 어떻게 가는지가 사용자의 성향이나 상황에 따라 중요하니까요. 목록에서 지도로 왔다갔다 stacked in time 방식의 정보 표현이라 좋다고 할 수 없습니다. 


지도 기반 길찾기

현재 버스 정류장에 있다는 맥락으로만 한정하면 불필요한 과정을 줄이고 보다 효율적으로 내가 탈 버스를 찾아볼 수 있습니다. 현재 정류장에서 갈 수 있는 버스 노선은 정해져 있으니까요. 

1. 출발 정류장을 선택하면 그 정류장에서 갈 수 있는 노선이 모두 표시됩니다. 

2. 목적지를 지도에서 선택하면 그곳까지 운행하는 버스를 모두 찾아줍니다.

지도에 정류장 별로 그룹핑해서 보여주니까 어디에서 내리는 게 좋은지 바로 확인할 수 있습니다. 

질문은 "어떤 버스를 타는게 가장 좋을까?" 이므로 정보 위계는 버스 번호가 가장 잘 두드러지도록 합니다. 목적지에 빨리 도착하는 게 좋으니까 먼저 목적지에 도착할 버스를 먼저 보여줍니다. 목적지 예정 도착 시각은 현 정류장에의 도착 예정 시간과 이동 시간을 더해서 구합니다.

정보를 나열할 때는 최선의 선택 하나를 추천해 주는 게 인지 비용을 줄여주는데 굉장히 중요합니다. 351,362,401,4318 번 중 먼저 오는 걸 타야지 하고 여러 번호들을 작업 기억 안에서 정류장에 들어오는 버스들을 주의해서 확인 한다고하면 생각만 해도 피곤합니다. 기억해야 할 번호의 수도 많아지고 비교 처리해야 할 작업량도 많아지거든요. 하지만 362가 오는지만 확인하다고 대상이 하나가 되면 훨씬 수월해 집니다.

3. 하지만 그것도 역시 귀찮으니까, 오른쪽 아래 알림 버튼을 누르면 해당 버스가 정류장에 도착 했을 때 알려줍니다.



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

저장저장


저장저장



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2016.05.19 07:50

데이타 기반 퍼소나 - 트루밸런스

트루밸런스는 인도를 기반으로 선불폰 잔액 조회를 중심으로 요금제 큐레이팅, 즉각 충전 플랫폼으로 확장하고 있는 핀테크 서비스입니다. pxd는 디자인을 통해 투자 참여를 하고 있습니다.
과제의 초기에 사용자 이해를 위해 데이타 분석했던 과정을 소개합니다.


Rapid Personas

우리와는 다르게 동남아시아에서는 선불로 충전하여 통화와 데이타를 사용하는 경우가 많다고 합니다.
선불로 충전한 통화 잔액이나 데이타의 잔량을 확인하기 위해서 quick codes(USSD)라고 하는 sms와 유사한 문자기반의 잔액 조회 기능을 이용하고 있습니다. 통화 상품, 시간대, 통화상대, 프로모션에 따라 통화 요율이 달라지기 때문에 단말 단에서 잔액을 계산하는 것이 사실상 어렵기 때문에 서버에서 계산된 잔액을 요청하고 확인할 수 밖에 없다고 합니다.

USSD 프로토콜을 이용해 특정 번호로 전화를 걸면 서버에서 잔액 정보를 전송하고,그것을 팝업으로 표시하는 형태입니다. 앱을 통한 조회를 제공하기도 하지만 데이타 사용 이슈가 있어서 거의 사용되고 있지 않다고 합니다. 통화가 얼마나 남았는지, 데이타를 얼마나 사용했는지 확인하는 것이 꼭 필요하고 빈번하게 일어나는 작업임에도 사용은 매우 불편하게 되어있습니다. 트루밸런스는 이런 번거러운 작업을 간편하게 확인 할 수 있도록 하는 것을 우선 MVP로 잡아 개발을 시작했습니다.
USSD를 통한 잔액 조회. 잔액이나 데이타 잔량을 팝업으로 알려준다.

초기에는 선불제에 대한 경험이나 지식이 별로 없어 인도 현지의 직원들을 통해 얻은 정보로 선불폰 사용자의 사용 행태를 가늠해 볼 수 밖에 없었습니다.

선불폰 사용자 (Rapid Personas)

  • 통신사별 이용상품에 따라 음성통화료와 DATA 이용요금의 차이가 있다. (Context)
  • 가까운 점포나 길거리 등에서 현금을 지불하여 Top up을 한다. (Context)
  • 지역별로 통신사의 신호세기의 차이가 있다. (Context)
  • 2개의 유심을 위치(집과 직장)따라 구분해서 사용한다. (Behavior)
  • 전화를 걸기전 매번 사용할 유심을 선택한다. (Behavior)
  • 일주일에 평균 2-3회 Top up을 한다. (Behavior)
  • 잔액을 미리확인하고 다 떨어지기 전 Top up을 해 둔다. (Attitude)
  • 요금을 절약하기 위해 통신사에서 제공되는 혜택에 따라 유심을 바뀌가면서 사용한다. (Attitude)
  • 데이터를 쓴 직후 어디에 얼마나 사용했는지 궁금하다. (Attitude)
  • 사용후 평소보다 내가 많이 쓰지는 않았는지 걱정이 된다. (Attitude)


로그 시각화

트루밸런스는 초기 베타버전에서부터 사용자의 동의를 얻고 로그를 수집하는 기능을 넣어 어떤 사용자들이 이 앱을 사용하는지, 어떤 패턴으로 사용하는지를 실제 사용자들로 부터 데이타를 얻어 디자인에 활용하였습니다.


로그는 통화 종료시 또는 사용자가 명시적으로 잔액 조회를 요청했을때의 잔액값들로 구성되어 있습니다. 개별적인 잔액 데이타는 사용자를 이해하는데 별 도움이 되지 못합니다. 하지만 이 데이타를 시계열로 모아 적분하듯이 재구성하면 사용자의 충전, 사용 패턴이 드러납니다. 얼만큼의 주기로 어느 정도 금액을 충전하는지를 알 수 있습니다.
잔액의 로그 시각화는 구글 차트 api를 활용하였습니다.

개별 사용자의 사용 패턴을 뽑아내면서 새로이 사용일, 충전주기, 평균 충전액, 잔액 조회 주기 등의 값들을 계산하여 DB에 추가하고 이런 개별 특성을 시각적으로 구분하여 나타내도록 했습니다. 최근 며칠 이상 로그가 없는 단말은 앱을 삭제한 것으로 추정하여 사용자들을 구분했습니다.

이런 특성들에 따라 DB query를 통해 살펴보기 원하는 특성의 사용자들을 골라내고 개별 잔액 그래프를 펼쳐놓아 비슷한 유형을 찾고 사용 패턴(앱의 충성 사용자, 앱 삭제)에 영향을 주는 요인을 확인해 보았습니다.



일반적으로 한번 충전 금액이 많은 경우 충전 주기도 길고 여유가 있으니 잔액을 조회하는 빈도로 줄어들 것으로 예상할 수 있습니다. 하지만 잔액 조회 빈도는 충전 금액과의 상관 관계보다 사용자의 태도의 영향이 큰 것 같습니다. 트루밸런스는 그런 사용자들을 위해 조회하는 행위 자체가 즐거움을 주도록 설계하였습니다.



누가 어디에서 사용하나?

이후 마케팅을 위해 사용자들이 주로 어디에서 앱을 사용하는지를 시각화했습니다.
처음 한 곳에 이상하게 너무 많은 사용자가 몰려있어서 놀랐는데 한 사용자의 여러 로그를 그대로 다 표시하다 보니 생긴 문제였습니다. 한 구역에서 한 사용자는 하나로 묶어서 표시하는 식으로 수정하였습니다.
평균 충전금액에 따라 버블의 크기를 달리했었는데 큰 버블이 많이 모이는 지역들이 있었는데요. 아마 부자 동네가 아닐까 싶기도 하네요.

기존에는 정성적 사용자 조사와 정량적 조사를 서로 다른 영역이라고 보고 정성적 사용자 조사에 집중하고 있었는데요. 사용자 데이타를 사용자 전체의 통계적인 대표값을 얻는데 사용하기보다 개별 사용자의 꼼꼼한 journaling이라고 보고, 정성적 조사의 근거 자료로 사용하면서 실제 사용자를 이해하는데 많은 도움을 얻고 있습니다.

[참고##퍼소나##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2016.05.04 07:50

아이와 함께 만드는 한글 공부 키보드

어린이집을 다니는 둘째 딸아이가 한글에 흥미를 보이길래, 한글의 자소와 구성 원리를 놀이처럼 배울 수 있는 앱을 만들었습니다. 아이가 사용하는 것을 관찰하고 새롭게 발견한 점을 디자인에 반영하는 과정을 반복했습니다. 아이가 한글을 배우는 동안 저는 더 많은 걸 배웠습니다. 1년 동안 아이와 함께 한글 공부 키보드를 만들며 배운 것을 공유합니다.


우리 아이는 언제 한글을 배워야 할까?

저는 너무 일찍부터 아이들에게 한글을 가르치려고 하는 게 마뜩잖아 보입니다. 예전에는 어린이집과 유치원의 교육 과정이 달라서 유치원에서는 좀 더 일찍 한글을 가르쳤다고 하는데요. 이제는 누리과정으로 일원화되면서 아이 나이에 따른 학습 발달 단계에 맞춰서, 교과 위주의 인지 학습보다는 놀이 위주로 호기심과 표현 능력, 사회성 등을 키워주는 데 초점을 맞추었다고 합니다. 이런 교육 방침에 공감하기에 될 수 있으면 아이가 흥미를 갖기 전에 남들이 다 한다고 조급하게 미리 가르치려고 하지 않았습니다. 방치하고 있습니다. :)
굳이 한글을 가르치지 않아도 어린이집에서 공동 생활을 하다 보면 자기 이름 정도는 읽게(분별해 내게) 되더라고요. 신발장이나 서랍장, 메모장에 이름을 붙여 놓아 일상에서 반복적으로 자기 이름을 확인해야 하는 상황에 놓이니 자연스레 익히게 되나 봅니다. 자기 이름을 쓰고(따라 그리고) 몇몇 친한 친구의 이름도 읽을 수 있게 되면 뿌듯해합니다.


상상나라 미래명함

아이들과 서울시에서 운영하는 놀이 체험 전시 공간인 상상나라에 자주 놀러 갔었는데요. 아이가 그중 미래명함을 좋아해 갈 때마다 몇 번씩 줄을 서가며 새로운 명함을 뽑았습니다.

출처 : 상상나라 홈페이지
스크린을 터치해 장래 희망 직업을 고르고 이름을 입력하면 종이에 명함을 출력해주는데요. 상상나라 안에서 몇 안 되는 디지털 설치물이라 저도 관심 있게 살펴보았습니다. 스마트폰이나 태블릿을 많이 접해서인지 어린 아이들도 사용하는데 별 어려움이 없어보였습니다. 다만 이름을 입력할때는 부모님이 도와주는데요. 한글을 모르는 어린 아이들도 엄마 아빠가 대신 입력해주려고 하면 자기가 직접 하겠다고 어떤 자판을 누를지만 가리켜 달라는 경우가 많았습니다. 한 자 한 자 자판을 눌러서 화면에 자기 이름이 만들어지는 걸 흥미로워합니다. 저에게는 아이들이 터치 자판으로 이름 입력하는 것도 놀이처럼 즐기는 모습이 흥미로웠습니다. 어른들은 사용자 등록이나 인증한다고 이름 입력하라면 바로 막 귀찮아지잖아요.


한글 도깨비불 현상

그런데 우리 애가 자꾸만 잘못 썼다고 지우고 다시 쓰길 반복하더라고요. 가만 보니 두벌식 자판이라 도깨비불 현상이 생기는 게 문제였습니다. 아이 이름이 '한가인'이라고 하면 '한가' 다음에 'ㅇ'을 눌렀는데 '한강'이라고 화면에 나오니 잘 못한 줄 알고 지우는 거였습니다.


두벌식 도깨비불 현상. 


어른들이야 이런 현상이 익숙하니 잘못이 아니라는 것도 알고 타자가 빠르니 신경 쓰지 않고 넘어갑니다. 하지만 아이는 또박또박 자판 한번 누르고 글자 확인하기를 반복하다 예상치 않은 글자가 나오니 자기가 실수 했다고 생각했나 봅니다.
엄마는 원래 그런거니 그냥 계속 쓰라고 알려줬지만, 제게는 UI에 문제가 있어 보였습니다. 시스템의 문제를 사용자가 잘못했다고 자신을 탓하게 하는 건 나쁜 UI거든요.
누구나 처음에는 이상하다고 잘못됐다고 생각하는 것들도 매일 반복되다 보면 무뎌지고 익숙해지면서 그대로 받아들이게 됩니다. 경험 많은 어른은 원래 그런 거니 어쩔 수 없는 거라고, 익숙해지면 괜찮다고, 괜히 힘들이지 말고 네가 거기에 맞추라고 가르칩니다.

세상의 다른 많은 문제들을 모두 해결해 줄 수는 없지만 한글 타자의 도깨비불 정도는 해결해 줄 수 있을 것 같았습니다. 저는 세벌식을 쓰고 있거든요. 세벌식에서는 도깨비불이 어쩔 수 없는 문제가 아닙니다.
한글의 도깨비불 현상은 초성과 종성을 자음 한 벌만 사용하여 입력 오토마타가 사용자의 의도를 구분할 수 없어 기계적으로 다음 자음을 종성으로 우선 처리하여 생기는 문제입니다. 초성과 종성 자판이 따로 있는 세벌식에서는 발생하지 않습니다.


세벌식 프로토타입

아이가 한글 키보드로 한글이 만들어지는 걸 흥미로워하고 한글에도 관심을 보이니 한글 공부를 위한 키보드를 만들어보면 좋겠다는 생각이 들었습니다. 하지만 이런 도깨비불 현상이 처음 한글을 배우는 데에는 심각한 방해가 될 수 있으니 이런 문제가 없는 키보드를 만들어보기로 했습니다. 그래서 바로 세벌식으로 된 키보드를 스케치했습니다.



세벌식 터치 키보드 스케치. 자음, 모음 배열


기존 한글 오토마타 소스를 이용해 세벌식 터치 자판 프로토타입을 만들어 아이에게 글씨가 써지는 걸 보여줬습니다. 뭔가 누르면 글씨가 생겨나니 재밌어합니다. 입력필드에 그냥 타이핑이 되는게 아니라 자판을 누르면 자소가 뿅 날아가는 애니메이션을 추가했습니다. 자판에 표시된 자소가 이전 자소들과 조합하여 글자가 된다는 것을 직접적으로 보여주려고요. 관심을 가지게 하는건 성공했습니다. 도깨비불도 안생기고요.


도깨비불 현상이 없는 세벌식 터치 키보드 초기 프로토타입

대신 아이가 초성 대신 종성을 먼저 누르는 경우가 있었습니다. 그래서 우선 종성을 먼저 누르면 입력이 안 되도록 막는 규칙을 추가했습니다. 자판을 모아쓰기처럼 초성 중성 종성 위치에 모아 두고 위의 초성 자판부터 순서대로 눌러야 한다고 가르쳐주었습니다.
빈도는 줄었지만 그래도 아이가 종성 키를 먼저 누르거나 종성 키 대신 초성 키를 잘못 누르는게 없어지진 않았습니다. 아니라고 다시 규칙을 설명해주다 갑자기 깨달았습니다. 아이가 잘 못 하는 게 아니라 디자인이 잘 못되었다는 걸요. 사용자에게 열심히 사용 방법을 설명하고 있다는 건 디자인이 나쁘다는 방증입니다. 직접 써 붙인 사용 설명서가 덕지덕지 붙어있는 무인 정산기들을 보면 알 수 있지요.


진짜 문제가 무엇인가?

다시 원점으로 돌아왔습니다. 한글의 원리를 가르치는 한글 키보드를 만들려 하는데, 현재의 두벌식 자판은 도깨비불 현상이 생겨서 아이를 혼란스럽게 합니다. 대안으로 세벌식으로 초성과 종성을 나누면 도깨비불은 해결되지만 똑같은 자음이 두 벌인 것이 아이를 오히려 헷갈리게 합니다. 어떻게 해야 할까요?

해결은 이미 있었습니다. 제가 두벌식과 세벌식이라는 프레임에 갇혀 있던 게 문제였지요.
어릴 적 가지고 놀던 한글 자석 글자 놀이에는 도깨비불이 없었거든요. 키보드가 아니라 글자 블록이라고 개념을 바꿨습니다. 글자를 끌어놓아 자음이 받침 자리에 올지 다음 글자의 첫머리에 올지 구분하도록 했습니다. 끌어 놓기로 방식을 바꾸니 조각 퍼즐 맞추기 게임에서 익숙한 형태라 아이들이 더 재밌어합니다.
문제 해결!


한글 끌어놓기를 통한 자음의 종성, 초성 구분 오토마타


나쁜 디자인은 문제가 무엇인지 제대로 이해하지 못한 상태에서 무턱대고 해결부터 하려 한 경우일 때가 많습니다. 제가 도깨비불이 생기는 것을 보고 두벌식이 문제라고 생각한것 처럼요. 좋은 디자인(문제 해결)은 진짜 문제가 무엇인지 명확히 정의하는 것에서부터 시작되어야 합니다. 문제가 무엇인지 명확하면 대부분의 해결은 다른 도메인의 해결을 가져올 수 있습니다. Good Artists Copy, Great Artists Steal.


기역니은 보다 한글 구성 원리를 먼저 배우자

키보드가 동작하게 만들고 나서 바로 단어를 먼저 보여주고 따라 쓰는 기능을 만들어줬습니다. 뭘 쓸지 알려주기 귀찮아서요. :) 조각 퍼즐을 맞추는 것처럼 맞게 따라 쓰면 박수 소리를 내며 잘 맞췄다는 피드백을 줘서 아이에게 성취동기를 부여해줬습니다.
아이들이 흥미를 느끼게 하는 데는 성공이었습니다. 공부보다는 조각 퍼즐 놀이로 생각해서인지 시키지 않아도 첫째와 둘째가 서로 다퉈가며 했거든요. 오히려 너무 많이 하려고 해서 금지해야 할 정도였습니다.

아이가 이걸 공부가 아니라 게임이라고 생각하게 된 큰 이유는 자소를 외우기보다 스스로 찾도록 한 데 있는 것 같습니다. Recognition rather than Recall 이라는 사용성의 원리처럼 키보드 자판을 보고 자소를 찾는게 외워서 회상하는 것보다 쉽다는 것도 있겠지만 그보다는 스스로 발견해내는 즐거움을 주기 때문이라고 생각합니다.


유아용 한글 공부 교재는 대부분 ㄱㄴㄷ을 먼저 가르칩니다. 자음을 배우고 나면 ㅏㅑㅓㅕ 모음을 배우고요. 바로 써먹지 못하는 자음 모음 24자를 배우고 시작하려면 재미도 없고 쉬 지치게 됩니다. 무엇보다 공부가 재미없다는 걸 먼저 배우고 거부감을 가지게 됩니다.
저도 처음 한글 키보드를 만들 때는 자판을 보고 한글 자소를 가르치는데 도움이 되지 않을까 생각했는데요. 그보다는 한글 구성 원리를 체득하는 게 보다 중요하다는 걸 알게 되었습니다. 완성된 글자(음절)를 보고 스스로 자소를 분리하고 그것들이 조합되어 하나의 글자가 만들어진다는 규칙을 이해하는 게 한글을 배우는 데 더 도움이 되었습니다. 기역니은을 몰라도 대충 이런 형태의 조각(자소)들을 순서대로 모아쓰면 하나의 글자(음절)가 만들어진다는 원리만 이해해도 성공이라고 생각했습니다.
퍼즐의 규칙(한글 모아쓰기)을 익히며 놀다 보면 빈번한 퍼즐 조각(자소)들은 자연스레 익히게 됩니다. 

공부한다고 하면 의레 바로 외우는 것을 생각하지만 바로 외우지 못하더라도 눈에 익은 조각이다 보니 나중에 한글 교재를 볼 때 거부감이 확연히 줄어들었습니다. 억지로 가르치지 않고 스스로 흥미를 느끼고 많이 접해서 우선 익숙해지는 것이 아이들이 배우는 데 보다 효과적입니다.



모아쓰기 순서

아이가 처음 자기 이름을 쓰는 걸 보면 글자를 쓴다기보다 그림을 따라 그리는 수준입니다. 눈에 보이는대로 가까운 것부터 그립니다. '한'을 쓸 때 'ㅎ'을 쓰고 아래쪽 받침 'ㄴ'을 그린 다음 'ㅏ' 모음을 옆에 그리는 것을 자주 보았습니다. 
각각의 자소가 모여 글자가 만들어지고 또 그것에 순서가 있다는 규칙을 이해하도록 하도록 자판에 자음과 모음을 다른 색으로 나누어 모아 두었습니다. 자음과 모음이라는 소리 성질이 다른 글자들이 있고 처음에 자음을 먼저 맞추고 그다음은 모음 쪽 조각을 번갈아가며 맞춰야 한다고 설명해 주었습니다. 또 모음 전에 종성을 끌어놓으면 글자가 되돌아가게 해서 순서라는 규칙을 피드백으로 알려주었습니다.

결과적으로 이런 퍼즐 형식이 한글 구성과 모아쓰기 순서를 학습하는 데 효과적이었습니다. 며칠 가지고 놀더니 올바른 조각(자소)을 찾는 시행착오와 순서를 틀리는 실수가 확연히 줄어들어 별문제 없이 글자를 완성할 수 있게 되었습니다. 
이전에 한글 획을 순서대로 따라 쓰기 연습하는 유아용 한글 공부 앱들도 사용해봤는데 별 효과가 없었거든요. 자소를 구분하기보다 따라 그리는 연습만 되어서 처음 한글을 배우는 데 적합한 방법은 아닌 것 같았습니다.


처음 한글을 배우는 유아를 위한 한글 글꼴

아이가 '한글'을 쓸 때 '한'까지는 잘했는데 '글'을 입력 차례에서 자판을 한참 바라보더니 'ㄷ'을 골랐습니다. 아니, 우리 애가 정말 기역도 모르는구나 충격을 받았습니다. 그 후에도 전혀 다르게 생긴 틀린 글자를 고르는 경우가 있어서 한글을 배우려면 역시 남들처럼 기역니은 부터 가르쳐야하는구나 생각했습니다.
하지만 그런 어처구니없는 행동을 관찰하다 보니 패턴이 보였습니다. ㄱㄴㄷ 자소의 전체 세트를 알지 못하니 시각적으로 이어진 덩어리의 획들이 하나의 자소라고 인지하는 것이었습니다. 사용한 폰트에서는 '그' 가 한 덩어리로 붙어 보였던 거죠. 한글을 읽을 줄 알면 'ㄱ'과 'ㅡ'가 합쳐진 거로 나누어 보는 게 당연하지만, 아이에게는 하나의 자소로 보였나 봅니다.
그래도 획 방향이 전혀 다르잖아! 생각해보니 '그'를 'ㄷ' 으로 본 이유는 아이가 한글 자석 교구를 가지고 놀았던 경험이 있기 때문이었습니다. 글자를 종이에 써서 배운 게 아니라 자소를 자유롭게 돌려서 붙일 수 있었으니까 둘은 같은 모양이었던거죠. 기호 구분을 못하는게 아니라 오히려 공간 지각 능력이 뛰어난 거였습니다. RtA라면이 외국에서 인기 인것처럼요. 'ㅎ'의 획이 세로로 반듯한 글꼴을 사용했을 땐 'ㅗㅇ'으로 자소를 분리하는 경우도 있었습니다. 


아이의 눈으로 보이는 자소 분리


외국에서 인기 있는 RtA라면

자소가 붙어 있는 건 잘 만든 글꼴이기 때문입니다. 영어에 ligature 폰트가 따로 있듯이 자소 사이에 어설프게 작은 여백이 있으면 글자가 복잡해 보이니 여백이 없도록 한글자씩 다듬어 준 것입니다.
처음 한글을 배울때 자소를 좀 더 쉽게 구분해서 인지할 수 있도록 자소가 붙어있지 않고 너무 반듯하지 않은 손글씨 모양이면서 자소들이 큼직한 형태의 폰트를 찾아서 바꿔줬습니다. 글꼴을 바꾸어 테스트하니 이런 실수가 실제로 줄어들었습니다.

요즘 인터넷에서는 이렇게 한글 자소 형태의 유사성을 가지고 장난하는 게 하나의 유행인가 봅니다. 영어의 경우에는 leet 이라고 w1n5t0n M1k3y 같은 표기가 예전부터 유행했는데 우리나라에서는 야민정음이라고 하더라고요. 이런 글자들 중에 OCR이 잘 못 읽은 글자들도 있는데요. 기계가 오류 없이 읽기 위해 OCR 전용 서체를 만들었던 것 처럼 아이가 처음 한글을 쉽게 배우는데 효과적인 한글 서체도 고민해 보는 것이 필요할 것 같습니다.


자소 이름과 음절, 단어 읽어주기

글자 퍼즐 맞추기를 하면서 자소 형태뿐 아니라 이름을 배울 수 있도록 자소를 끌어서 움직일 때 기역, 니은 하고 이름을 읽어 주도록 하였습니다. 자소를 끌어놓아 음절이 만들어지면 그 글자도 읽어주고 단어가 완성되면 단어도 읽어주었습니다.
바로 학습 효과를 보이지는 않지만, 글자와 이름을 반복적으로 보고 들은 것이 나중에 책에서 글자를 배울때 효과가 있었습니다.

글자를 읽는데는 webkit 엔진에 포함된 한글 TTS를 사용했습니다. 한글 공부를 위해 충분히 괜찮은 발음을 들려주었으나 특정한 단음절의 발음에 버그가 있습니다. ㄱ ㄷ ㅂ ㅈ이 단모음과 연결되어 한음절이 되면 ㅋ ㅌ ㅍ ㅊ에 가까운 파열음으로 발음됩니다. 받침이 붙거나 2음절 이상이 되면 정상적으로 발음됩니다. 애플에 버그 리포트를 넣었는데 몇 년 동안 고쳐지지 않고 있습니다. 안드로이드에서는 별도의 TTS 엔진을 사용하는 것 같은데도 비슷한 오류가 있습니다. 잘 아시는 분이 있으면 설명 부탁드립니다.


낱말 이미지

단어가 완성되면 이미지를 보여주도록 했습니다. 유아용 낱말 카드에 글자와 이미지가 있는 것처럼 글자를 읽지 못하고 따라 쓰더라도 그림이 나와서 둘을 연관시킬 수 있도록 했습니다.
꼭 제시된 단어만이 아니라 글자를 완성하는 도중이라도 학습 단어가 나오면 그림이 나오도록 했습니다. "강아지"를 입력하는 도중 "강" 라고만 써도 강 그림이 나오도록이요. 뜻밖의 재미가(serendipity) 학습 기회를 더 만들어 주도록 했습니다.

다만 문제는 이런 이미지를 일일이 지정해주기 귀찮아서 구글 이미지 검색을 이용했는데, 구글의 이미지 검색엔 safesearch 옵션을 켜도 선정적인 이미지가 나옵니다. 영어는 그나마 검열이 되는 것 같은데 한글은 제대로 동작하지 않습니다. 데이타가 적어서인지 구글코리아가 신경을 안쓰는 건지 모르겠습니다. 그렇다고 네이버 이미지 검색을 쓰기엔 원하는 이미지가 잘 찾아지지 않아서 대체하기도 어려워 아쉬웠습니다. 아무 글자나 노출되는걸 막으려고 네이버 사전에 등록된 단어에 대해서만 이미지를 보여주고 또 문제가 되는 단어들은 블랙리스트를 만들어서 관리하도록 했습니다.


한글 자판 배열

처음 세벌식 자판이 한글을 배우는데 실패라는 걸 배우고 나서 자음 모음을 어떻게 배열할지 고민했습니다. 타이핑 연습을 하려는 게 아니니 두벌식자판을 그대로 따라 하는 건 의미가 없으니까요. 두벌식 자판은 자소 빈도에 따라 효율적으로 배열된 것도 아니고 학습이 쉽도록 한 것도 아니거든요.


아이가 한글 자소를 알고 찾는 게 아니라 자판에서 비슷해 보이는 기호를 찾으면서 배워가는 것이라 비슷한 형태의 자소를 모아두어 차이를 비교하면서 선택할 수 있도록 했습니다. 그러다 보니 자연스럽게 한글의 창제 원리와 비슷하게 배열이 되었습니다. 한글이 기본 자형에 획을 추가하는 형태로 만들어졌으니까요.


모음의 경우 두벌식은 기본 모음 10개에 이중모음 중 ㅐㅔㅒㅖ 를 추가한 형태입니다. ㅐㅔ 의 빈도가 높으니 입력 편의를 위해 제공하는 것이겠지만 입력 효율이 아니라 학습이 목적이니 자판을 가급적 간단히해서 복잡해 보이지 않게 하는데 비중을 두었습니다. 또 ㅐㅔ 의 발음 구분이 안되어 맞춤법을 틀리기 쉽기때문에 일부러 ㅏㅣ , ㅓㅣ 로 나눠 입력하면서 한번 더 생각하고 쓰기를 바랐습니다. 양성,음성 모음을 같은 위치에 일관성 있게 배열하여 ㅘ ㅙㅝ ㅞㅢ 같은 이중 모음을 입력할 때 같은 자리에서 글자를 쉽게 찾도록 했습니다. 


한글 학습용 자판 배열



아이가 관심을 가지고 일상에서 자주 접하는 글자가 효과적이다

유아 한글 교재는 주로 동물, 사물, 과일 등의 낱말 카드가 많습니다. 글자를 몰라도 인지할 수 있도록 그림으로 표현하기 수월한 명사 위주로 받침이 적은 쉬운 낱말 위주로 고른 것 같습니다. 저도 처음엔 그런 교재들을 참고하여 기본 단어장을 만들어 보여줬는데요. 아이가 별로 흥미를 보이지 않았습니다.


글자가 쉬운 것부터 보다는 아이가 좋아하고 일상에서 자주 접하는 단어를 보여주는 게 더 효과가 있었습니다. 아이들이 즐겨보던 만화인 바다탐험대의 주인공 바나클, 콰지, 페이소, 옥토넛 이나 라푼젤 공주같은 글자 맞추기에 더 흥미를 가졌습니다. 


우리말에는 잘 쓰이지 않는 ㅋㅌㅍ가 많이 사용되는 외래어라는게 좀 걸렸는데 아이가 관심을 가지는 좋은 낱말을 찾았습니다. 바로 친구들 이름이었습니다. 가장 친한 친구 이름부터 선생님 이름으로 공부를 했는데요. 이름을 입력하면 친구 얼굴이 나오도록 해주니 아주 좋아했습니다. 이름에 공통된 글자들이 있어서 아이가 아는 글자가 나오면 좋아하고 글자가 반복되니 수월하게 배울 수 있었습니다. 



아이가 흥미를 느끼고 스스로 배울 수 있게 해주세요.

이걸 만든 게 3년 전이었는데요. 첫째는 만 다섯, 둘째가 만 세 살 이었습니다. 결과적으로 첫째 남자아이는 한글 안 배우고 놀다가 초등학교 입학하기 전에 엄마한테 혼나면서 힘들게 한글을 배웠고 둘째 여자 아이는 이 앱 덕분인지 오빠 공부하던 한글책 같이 보면서 수월하게 한글을 빨리 배웠습니다. 샘플이 적어서 앱의 효과인지 사용자 성향의 차이인지 검증이 어렵습니다. :) 

그래도 도움이 되었던 점을 정리하면 이렇습니다.


1. 한글을 억지로 가르치려고 하기보다 글자에 관심을 가지도록 환경을 만들어 주는 게 중요합니다.

2. 쉬운 글자보다 어렵더라도 아이가 흥미를 느끼고 일상에서 자주 접하는 글자 위주로 배우도록 하는 게 실용적입니다.

3. 한글 자소를 외우게 하는 것보다 한글 구성 원리를 우선 배우도록 하는 게 효율적입니다. 

4. 자소나 한글 규칙을 스스로 발견하는 재미를 주어 글자에 흥미를 가지도록 합니다.

5. 아이를 가르치기 보다 아이를 관찰하면서 내가 배울 것 을 찾아 보세요.


한글을 배우게 하는 것보다 한글을 배우면 즐겁다는 걸 알게 해주는게 더 중요합니다. 외국 여행 갈때면 그 나라 말을 배우지는 못해도 안녕하세요. 고맙습니다. 정도의 현지어는 꼭 외워서 가려고 합니다. 그러면 여행이 더 즐거워지거든요. 그 정도 느낌으로 시켜서가 아니라 아이들이 한글을 알게 되었을 때의 재미를 느끼며 배우면 좋겠습니다.







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




팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 12
Ad Test...
2015.07.02 07:52

한국어 맞춤법/문법 검사기 리디자인

많은 분이 애용하는 부산대학교 인공지능 연구실에서 만든 한국어 맞춤법/문법 검사기, 저도 잘 사용하고 있습니다. 사전을 기반으로 한 단순한 맞춤법 교정이 아니라 문법 규칙과 의미 분석, 오류 통계를 통해서 문맥상의 오류나 번역 투의 문체 오류까지도 잡아내어 바른 표현을 알려줍니다. 강력한 검사 기능과 더불어 충실한 도움말을 제공하여 바른 우리말 사용을 배우는 데 많은 도움을 얻고 있습니다. 이 글을 쓰면서도 맞춤법 검사기를 이용했습니다.


다만 UI 측면에서는 아쉬운 부분이 있어 좀 고쳐보았습니다. 스스로는 만족스럽게 사용하고 있는데요. 이런 UI 개선점을 반영해 주셔서 다른 사용자도 같이 더 편하게 쓸 수 있으면 하는 바람으로 블로깅 합니다.


추가 : 한국어 맞춤법/문법 검사기사이트에 제안한 UI가 실제로 반영 되어 서비스 되고 있습니다. 고맙습니다.:)

1. 사용 흐름을 고려하여 정보를 공간에 펼쳐두기


부산대의 맞춤법 검사기뿐 아니라 기존의 상용 맞춤법 검사기들은 모두 공통으로 원본에 밑줄을 긋는 식으로 오류 표기를 지적하고 별도의 창이나 팝업메뉴를 통해서 대치어를 제안하는 구조로 되어 있습니다. 하나씩 선택하고 바꿔주는 작업 흐름이라 많이 번거롭습니다. 개정된 UI에서는 교정표에 오류를 모아두고는 있지만, 문맥을 확인하려면 결국 원문과 교정표를 왔다 갔다 시선이 옮겨 갈 수밖에 없습니다.



그림1. 한국어 맞춤법/문법 검사기



 stacked in time vs. adjacent in space의 정보 표시 구조로 바라보면 현재 방식처럼 하나씩 살펴보는 것보다 공간에 펼쳐놓는 방식이 훨씬 바람직합니다. 종이에 적은 교정지가 원래 그랬습니다. 빨간 펜으로 잘못된 부분과 바꿔야 할 내용을 한 번에 보여줍니다. 



그림2. 대치어를 원문에 같이 보이기 리디자인



온라인에서 기존보다 더 비효율적인 방식을 택했던 이유는 아마도 맞춤법 교정 기능을 주로 사용해 온 워드프로세서가 문서 스타일을 꾸미는 데 집중했었기 때문이 아닌가 싶습니다. 문단의 꾸밈을 흐트러뜨리지 않고 교정 제안을 함께 표시하기가 어려우니 밑줄로 오류 표시만 한 것 같습니다. 


원문에 바로 대치어를 표시해주면 문맥을 보면서 확인할 수 있어서 현재처럼 분리하여 표시하는 것보다 훨씬 자연스럽습니다. 이때 오류 문구 자체를 하이라이트로 강조하기보다 틀린 것은 오히려 덜 두드러지게 하고 옳은 표현을 강조해 보여주는 것이 좋습니다. 간단한 실수는 굳이 내가 뭘 틀렸는지 재확인하지 않아도 대치어만 보고 수정하면 되니까 불필요한 인지를 줄여주어 보기 편합니다. 


인터랙션 부분에서는 원문에서 교정 내용을 확인하고 클릭하면 바로 수정하도록 했습니다. 현재에는 원문에서 틀린 부분을 클릭하면 교정표의 해당 항목으로 이동하게 되어 있긴 하지만 사실 이마저도 번거롭습니다. 도움말을 보거나 대치어가 여러 개 있어 확인이 필요한 경우에 그냥 단어에 마우스를 올리면 해당 항목으로 자동으로 이동합니다. 


같은 단어를 계속 틀리는 경우가 있는데요. 여러 번 등장하는 같은 오류는 한번 클릭으로 나머지도 한 번에 바꾸도록 했습니다. 별거 아니지만 같은 걸 또 입력하게 하는 UI는 내 말을 못 알아듣거나 무시하는 것 같아 기분을 상하게 하거든요. 회원 등록 양식에 같은 거 또 적게 하면 막 화나잖아요. 


이렇게 대치어를 원문에 함께 표시하여 사용 흐름을 바꾸는 것만으로 시선의 이동이나 마우스 조작이 현저히 줄어듭니다.



2. 사용자 대응 행위를 고려한 오류 컬러 코딩


오류 표시 색깔이 빨강, 파랑, 초록으로 달라서 사용하면서 무슨 차이가 있는지 항상 헷갈렸습니다. 보통 이렇게 연속적이지 않고 동떨어진 컬러 스킴을 사용하는 것은 의미가 다른 경우에 적용하는데요. 그래서 맞춤법이나 띄어쓰기 같은 오류의 유형에 따른 구분이라서 생각하였는데 도움말을 보니 확실히 틀린 건 빨간색, 규칙이나 문맥을 고려해서 찾은 오류는 녹색, 분석에 실패했지만 잘 못 사용한 것 같은 건 파란색으로 표시한다고 합니다. 

결국, 유형이 다른 것이 아니라 사용 경험 측면에서는 오류 검출의 신뢰성이라는 한 가지 속성에 따른 구분입니다. 이렇게 한 가지 속성값의 차이를 구분하는 경우에는 연속적인 색을 사용하는 것이 좋습니다. 등고선 표시를 생각하면 쉽게 이해가 됩니다. 알록달록 색상을 자의적으로 대응하면 의미를 이해하기 어렵지만 연속된 명도나 채도 또는 근접 색상을 사용하면 관계를 쉽게 유추할 수 있습니다. 


오류를 빨간색으로 표시하는 색상 대응은 익숙하니까 오류 신뢰도가 낮은 녹색과 파란색을 같은 계열인 주황색, 노란색 정도로 약하게 표시하는 게 자연스럽습니다. 빨간색도 간혹 틀리는 경우가 있고 녹색의 오류 검출 정확도도 높아서 둘의 차이가 잘 구분 되지 않았습니다. 그래서 둘 다 빨간색으로 하고 파란색만 한 단계 낮은 주황색으로 표시했습니다. 빨간색은 믿고 그냥 대치해도 되지만 주황색은 시스템이 틀렸을 수도 있으니 주의해야 하는구나 정도의 구분이면 충분한 것 같습니다. 



그림3. 띄어 쓰기 교정 부호 사용과 컬러 코딩 개선 리디자인



정확한 정보를 주겠다고 정보의 단계를 많게 하는 것보다 사용자가 대응하는 행위 구분이 명확한 수준으로 단순화하는 게 더 유용합니다. 요즘 자동차의 연비를 계기반에 실시간으로 보여주는 기능이 많이 채용되어 있는데, 상세하게 알려주는 것보다 파란색, 초록색, 빨간색 정도로 단순화하는 게 인지 부담도 적고 반응 행위도 쉽게 대응할 수 있어서 운전자의 행동 변화를 유도하는 데 더 효과적입니다. 


가장 빈번하게 틀리는 오류 유형이 띄어쓰기인데요. 이 정도는 바로 구분이 되면 좋겠습니다. 띄어쓰기나 붙여쓰기 같은 오류는 교정부호를 사용하고 교정부호에만 강조색을 사용하여 맞춤법이나 문법이 잘못된 오류와는 바로 구분되어 보이도록 했습니다. 문장 부호의 오류에도 같은 방법을 적용했습니다.



3. 정보가 드러나도록 장식 덜어내기


교정표의 테이블에는 정보 디자인에서 할 수 있는 다양한 실수들이 총체적으로 모여있습니다. 정보를 강조하기 위해 정보 자체가 아닌 불필요한 다른 요소를 추가하는 잘못은 일반인뿐 아니라 디자이너도 많이 합니다. 불필요한 요소를 추가하여 강조하면 그보다 더 두드러지기 위해 더 불필요한 요소를 또 덧붙이는 악순환이 계속됩니다. 테이블의 선이나 배경색 같은 것들은 실제 정보로부터 주의를 빼앗는 나쁜 잡음입니다. 정보를 강조하려면 이런 소모적인 경쟁이 아니라 덜 중요한 정보를 좀 내려두어야 합니다. 선보다는 여백과 정렬이 항목을 구분하는 데 더 효과적입니다. 

그림4. 교정표 테이블 리디자인

이런 안 좋은 디자인이 계속 양산되는 이유는 엑셀 같은 스프레드시트 프로그램이 기본 제공되는 템플릿 디자인 자체가 나쁘기 때문입니다. 엑셀은 출력보다는 입력을 위한 도구라서 셀 구분 선이 필요하고 구분 선이 있으니 항목을 강조하기 위해 울긋불긋 과도한 배경색을 사용하게 되는 것 같습니다. 

강조를 위해서 폰트의 크기나 굵기, 색상을 사용할 수 있는데 여러 요소를 섞어 사용하지 않도록 주의가 필요합니다. 한글은 획이 복잡해서 작은 크기에서 볼드를 사용하면 가독성에 문제가 있습니다. 문장 사이에서 강조하는 게 아니면 굵기보다는 크기를 키우는 게 효과적입니다. 
입력 내용의 오류 색상과 대치어의 링크 색상이 색상이라는 한가지 속성으로 각각 강조하면 서로 충돌이 생겨 어느 곳으로도 주의가 가지 않습니다. 크기를 키워서 둘을 강조하되 더 중요한 대치어에 오류 컬러를 적용하는게 보기 편안합니다. 고만 고만한 애들이 서로 경쟁하게 하지 말고 정보의 위계를 분명하게 하여 시선의 흐름을 만들어 주어야 합니다. 

거의 모든 경우에 테이블에서의 가운데 정렬은 좋은 선택이 아닙니다. 가운데 정렬은 정렬이 아니거든요. 될 수 있으면 글 선이 나란히 정렬되어야 읽기 수월합니다. 레이블의 경우는 매번 읽어야 하는 것이 아니니 잘 드러나지 않게 힘을 빼고 실제 정보의 열에 맞춰 오른쪽 정렬로 붙여두는 정도가 좋습니다.



4. 알림 팝업


알림과 경고를 구분하지 않고 잘 못 사용하는 경우가 많습니다. 수정된 내용을 클립보드에 복사하는 버튼을 누르면 복사가 완료되었다는 기본 경고 팝업이 뜹니다. 경고 팝업은 사용자가 알림을 인지하지 못하는 걸 방지하기 위해 명시적으로 확인 버튼을 누르기 전에는 다른 작업을 못하게 하는 modal dialog box를 사용하는 강력한 알림입니다. 

복사 완료했다는 알림은 내가 한 번 더 클릭 해 줘야 할 정도로 중요한 알림이 아닙니다. 하지만 기본 제공하는 alert 명령이고 다른 버그에 비해 별로 심각한 문제도 아니라서 우선순위에서 밀리고 무관심 속에 남용되고 있습니다. 카카오톡에서 사진 저장했다고 경고를 띄우면 안 된다는 거지요. 화가 나요. 1억 7000만 명의 사용자가 사진 저장하면서 매번 화를 낸다고요. 

이벤트에 의한 알림도 아니고 사용자 자신이 의도를 가지고 한 행위에 대한 피드백은 자동으로 닫히는 토스트 알림 정도로 충분합니다. 움직이며 나타나는 토스트 팝업은 모바일이 아닌 큰 화면에서도 효과적입니다. 다른 곳을 보고 있어도, 주변시에서 움직임에 대해서 본능적으로 주의하므로 알림을 전달하기에 충분합니다. 

 디자이너님, 개발자님. 자신이 만든 앱의 사용자 명령 피드백에 경고 상자를 잘 못 사용하지는 않는지 꼭 좀 확인해 주세요. 두 번 확인해 주세요. 요즘은 이렇게 변화가 잘 보이지 않는 명령 실행 완료의 피드백으로 명시적으로 텍스트 팝업을 띄우기보다 애니메이션을 이용해 간접적으로 표현하는 사례도 많으니 그런 걸 참고해도 좋겠습니다.



프로토타이핑


UI 개선 사항을 테스트 해보기 위해서 css 스타일과 스크립트를 오버라이드하는 코드를 만들었습니다. 간단히 테스트해보려면 아래 북마클릿을 북마크바에 드래그하여 저장 후에 맞춤법 검사기 의 검사 결과 화면에서 실행해 주면 됩니다.


추가 : 맞춤법 검사기에 UI가 이미 반영되어 북마클릿은 정상 동작하지 않습니다. 본 사이트를 사용하시면 됩니다.

맞춤법 검사 리디자인 북마클릿


매번 실행 하기는 귀찮으니 크롬 확장으로 자동으로 코드를 삽입 하도록 하고 있습니다. 더 편한 방법은 맥용 오토메이션을 사용할 수 있습니다. 미남이 님이 만들어 공개해 주신 맥용 맞춤법 검사 오토메이션 웍플로우에 스크립트를 추가하도록 했습니다. 받아서 실행하고 서비스에 추가하면 글 선택 후 맥락메뉴에서 한국어 맞춤법 검사를 실행 할 수 있습니다.


추가 : 맞춤법 검사기에 UI가 이미 반영되어 오토메이션은 정상 동작하지 않습니다.

맞춤법 검사 오토메이션





궁극적으로는 이런 편법보다는 UI개선 제안점이 반영되어 모두가 더 편하게 사용하면 좋겠습니다. 제가 디자인 한 교정 내용을 함께 표시하는 맞춤법 검사 UI 는 CC로 공유합니다. 한국어 맞춤법/문법 검사기 뿐 아니라 영리 목적으로 사용해도 좋으니 한컴 한글이나 MS word나 구글 문서 어디든 보다 편한 한글 맞춤법 기능을 제공해주면 좋겠습니다. 요즘은 대부분의 글쓰기 작업이 클라우드로 넘어가고 있으니 구글 문서나 네이버, 다음의 블로그, 이메일 작성창에도 제대로 된 맞춤법 검사 기능이 들어가도록 노력해주면 좋겠습니다.



리디자인이 적용되었습니다.

한국어 맞춤법/문법 검사기에 리디자인이 정식으로 반영되어 서비스하고 있습니다.

또 얼마 전 다음 맞춤법 검사기에도 같은 디자인이 적용되었습니다. 

고맙습니다.




한국어 맞춤법/문법 검사기 http://speller.cs.pusan.ac.kr





다음 맞춤법 검사기 http://alldic.daum.net/grammar_checker.do





Creative Commons License
교정 내용을 함께 표시하는 맞춤법 검사 UI by 無異 is licensed under a Creative Commons Attribution 4.0 International License.



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



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 14
Ad Test...
2015.06.15 07:50

정류장 맥락을 고려한 버스 노선도 리디자인 3/3 - 노선도 자동화 프로토타이핑

맥락 없는 디자인

사용자와 사용 맥락을 이해하는 것은 UX뿐 아니라 모든 디자인에서 꼭 필요한 과정입니다. 정보를 시각화한 정보디자인의 경우 정보가 여러 겹으로 부호화되어 있어 글처럼 차례로 읽히지 않습니다. 정보 밀도가 높아 다양한 방식으로 읽힐 수 있는 건 좋지만, 사용 맥락에 따라 정보를 쉽게 찾아가도록 흐름을 만들어주어야 합니다. 네가 뭘 좋아할지 몰라서 다 넣어 보면 항상 실패합니다. 맥락을 모르고 이야기하는 사람과 대화하면 답답합니다.


그림1 - 개인이 현 위치 스티커를 붙여 놓은 현행 서울 버스 노선도


일상에서 매일 만나는 정보디자인인 버스 정류장의 노선도는 이런 맥락 없는 디자인으로 우리를 피곤하게 합니다. 같은 버스 노선도라도 정류장에서 볼 때, 버스를 타고 가면서 볼 때, 인터넷으로 찾아볼 때의 맥락이 각기 다릅니다. 버스 정류장에서 노선도를 확인할 땐 '내가 여기'에서 버스를 타고 원하는 목적지에 갈 수 있는지를 확인하고 싶은 거지, '버스'가 어디에서부터 와서 어디까지 가는지 서사적인 여정이 궁금한 게 아니거든요. '버스'만 있고 '내가 여기'라는 맥락이 빠져있는 디자인이라 우리를 불편하게 합니다. 현 위치에 빨간 화살표 스티커를 붙여 맥락을 부여하는 작은 차이만으로도 인지 부담이 많이 줄어듭니다.


그럼 왜 처음부터 이런 맥락을 반영한 디자인의 노선도를 제공하지 않는 걸까요? 돈이 드니까요. 인쇄와 컬러 출력의 차이보다 정류장마다 다른 노선도를 하나씩 그리려면 몇 배의 비용이 들 테니까요. 제가 타는 버스만 해도 정류장이 98개인데 많게는 159개도 있습니다. 현실에서 고려해야 할 많은 다른 요인들이 있기 때문에 디자인만 좋다고 채택하지는 못 합니다. 사실 그런 장애 요인들을 고려하지 못한 디자인은 좋은 디자인(해결)이라고 할 수 없습니다.


맥락을 고려한 버스 정류장 노선도는 현실을 고려하지 못한 이상일 뿐일까요? 앞의 글에서 예고했듯이 비용의 문제는 사람이 그리는 게 아니라 자동화함으로써 해결할 수 있습니다. 정부와 지자체의 공공 정보 공유 시책에 따라 버스와 같은 대중교통 정보들이 제공되면서 이런 디자인을 자동화(프로그래밍)하는 것이 더 수월해졌습니다. 리디자인 과정에서부터 실제 노선 데이타를 적용하여 테스트했던 워킹 프로토타입을 소개합니다.



특허출원 관계로 글이 늦어졌습니다. 아래글을 함께 읽어주세요.




불필요한 부분 덜어내기

정보를 디자인할 때 뭔가를 더 집어넣기 전에 불필요한 것을 덜어내는 것이 중요합니다. 내가 여기에서 어디로 가는가가 중요한 맥락에서 버스가 여기까지 어떻게 왔는지는 보다 더 중요한 정보를 방해하는 노이즈입니다. 전체 구간에서 화살표로 내가 어디인지, 어느 방향으로 가는지 표시하는 것보다 그냥 현 위치부터 시작하면 인지 비용이 훨씬 줄어듭니다. 어떤 구간은 왼쪽으로, 어떤 구간은 오른쪽으로 진행하는지 고민할 필요가 없습니다.


노선도 리디자인 - 그림1과 같은 노선 정보. 실 이용 구간만 펼쳐서 표시

문제는 어디까지 표시할지 입니다. 단순히 현 위치에서 종점까지 표시하면 반환점을 되돌아오는 구간이 중복되어, 이 역시 노이즈가 됩니다. 그렇다고 기계적으로 반환점까지만 표시하는 것도 문제가 되는데요. 버스 노선이 반환점을 바로 U턴해서 도는 게 아니라 반환점 주변을 크게 돌아 경로가 다른 경우가 많습니다. 같은 길을 되돌아오면 반환점 부근에서는 타려는 승객이 적어질 테니 이용이 많은 경로로 반환 경로를 정하는 게 유리합니다. 그래서인지 지하철역을 끼고 도는 경우가 많습니다.


지리적으로는 멀리돌아 가는 것이지만 승객 입장에서는 같은 길을 되돌아오는 것은 아니어서 충분히 이용할 수 있습니다. 조금 돌아가지만 내려서 갈아타거나 걸어가기 귀찮으니까요. 노선도 상에서는 어디까지 표시할지 애매하지만, 지도 위에 그려보면 되돌아서 기하학적으로 폐곡선이 되는 지점까지 표시해주는 게 합리적입니다.

위 노선에서 노선표가 제공하는 반환점 정보는 이수중학교이지만 사람들은 내방역까지 타고 가기도 합니다. 오갈 때의 경로가 달라 복선으로 표시된 구간이 사용자 인터뷰에서 공통으로 혼동을 주는 문제로 지적되었는데요. 이렇게 현 정류장에서 승객이 실제 이용할 구간만을 일렬로 펼쳐서 표시하면 혼동을 줄일 수 있습니다.


정보 덩어리 짓기

기존의 노선도에서는 각각의 버스 정류장 이름이 같은 형태로 반복되어 있어 어디에서 뭘 찾아야 할지 많이 어려워합니다. 목적지를 확인하려면 하나하나 찾아봐야 합니다. 지하철 역 정도가 강조색과 픽토그램을 사용해서, 지하철역 같은 주요 정류장을 우선 찾고 그 주변을 찾아보는 탐색 전략을 취하기도 합니다. 

정류장을 행정구역별로 덩어리로 묶어주면 상관없는 정류장을 빨리 제거해나가 좀 더 수월하게 찾을 수 있습니다. 분당처럼 시외로 가는 경우에 서울은 볼 필요도 없으니까요. 청크의 구분은 2단계로 나누었는데요. 광역 버스인 경우는 시 단위로 구분이 적절하고 지선이나 간선의 경우에는 동 단위로 좀 더 세밀한 구분을 제공하는 것이 유용하다는 피드백을 얻었습니다.

시나 구의 큰 단위는 묶음 기호로 구분하는 것뿐 아니라 정류장 사이에 여백을 두어 시각적으로 나뉘어 보이도록 하는 게 더 효과적이었습니다.




그 다리 위를 건너가는 기분을

버스를 타고 지나면서는 행정구역은 인식하지 못하지만, 강이나 고속도로를 지나는 지리 정보는 잘 기억합니다. 그 외는 다 똑같은 건물에 같은 길이라서 그게 그것 같으니까요. 강(다리)으로 노선을 구분해서 강남으로 가는지 강북으로 가는지 힌트만으로도 행선지를 이해하는 데 많은 도움이 됩니다.

노선도 정보에서는 제공되지 않지만, 서울의 경우 행정구역이 강을 따라서 나뉘기 때문에 인접한 두 정류장이 강북, 강남으로 바뀌면 한강을 건넌다는 것을 간단히 프로그램으로 알 수 있습니다. (버스 API 정류장 정보에 행정구역 정보가 포함되어 있습니다) 주변 정류장 이름으로 어느 다리를 건너는지도 추측할 수 있습니다. 선유도를 지나면 양화대교, 노들역을 지나면 한강대교를 지납니다. 마포대교남단 정류장을 지나면 당연히 마포대교를 건너겠지요.

시외로 가는 경우에 고속도로를 지나는 것도 중요한 정보입니다. 정류장 간 거리가 충분히 큰 경우에 고속도로나 도시고속도로를 타고 지나는 걸 알 수 있습니다.


랜드마크

분류를 위한 덩어리가 아니어도 같은 형태가 반복되면 어디까지 보고 있는지 신경을 써야 해서 피곤합니다. 기준이 되는 시각적인 이정표를 제공하는 게 도움이 됩니다. 사람들이 많이 찾는 정류장을 두드러지게 강조하면 그 정류장뿐 아니라 다른 덜 중요한 정류장을 찾아보는 데도 도움이 됩니다. 

우선 지하철역을 강조할 필요가 있습니다. 지하철로 갈아타기 위해 버스를 타는 경우도 많고, 지하철역은 대략의 위치를 잘 알고 있기 때문에 랜드마크로 활용됩니다. 현재는 비용 문제로 2도 인쇄로 지하철역 이름만을 강조하고 있는데요. 단지 지하철로 갈아타기보다는 특정 노선을 타려는 경우가 많으므로 지하철 노선의 고유색을 강조해 보여주는 게 더 효과적입니다. 


그 외 사람들이 기억하는 주요 랜드마크는 공공기관이나 대형 마트 등이었습니다. 학교 같은 공공장소는 자신의 목적지 부근만 기억하고 그 외는 잘 기억하지 못하는 것 같습니다.

사람들이 많이 타고 내리는 정류장도 잘 기억합니다. 빈자리가 날 확률이 높으니까요. 정류장에 많은 버스가 정차하면 사람들이 많이 이용하는 정류장일 가능성이 큽니다. 개별 버스의 평균 배차간격을 반영하여 특정 정류장에 시간당 몇 대의 버스가 오는지를 계산하면 이용률이 높은 정류장을 추정할 수 있습니다. 그런 중요 정류장을 볼드 표시하는 방법을 사용할 수 있습니다.


예상 소요 시간

정류장별 노선도를 개별적으로 그리게 되면 정류장별 예상 시간을 표시할 수 있습니다. 교통 상황에 따라 다를 수 있지만 대략 가늠할 수 있는 정보가 제공되는 것으로 도움이 많이 됩니다. 현재는 기점의 출발시각을 표기하고 있어서 별 도움이 되지 못하는 첫차, 막차 시간도 현 정류장의 실 도착시각으로 표기하면 유용할 수 있을 것입니다.

프로토타입에서는 꼼수를 이용해서 소요시간을 계산했는데 실 데이타 로그를 분석하면 평균 시간을 반영하여 표시할 수 있습니다. 인터넷에서 제공하는 버스 노선도에서는 시간별로 평균 소요시간을 제공할 수도 있을 것 같습니다. 다음, 네이버에서 제공해주면 좋겠습니다.


길 찾기가 아닌 위치와 경로 표시를 위한 지도

지도 위에 운행 경로를 표시한 간소 지도가 유용하다는 피드백을 많이 받았습니다. 글자로 쓰여 있는 것보다 지도에 표시되면 훨씬 쉽게 경로를 이해 할 수 있으니까요. 또 미니맵에서는 전체 경로를 옅은 색으로 표시하여 이전 정류장 노선을 없앤 것을 보완할 수 있습니다.


지도 API를 사용하면 소축척지도에서는 고속도로가 복잡하게 얽혀있어 정작 실제 경로는 잘 보이지 않고 지형이나 행정구역을 파악하기도 어렵습니다. 지도의 맥락이 운전자의 길 찾기에 맞추어져 있기 때문인데요. 내가 운전하는 것도 아니니 길은 별로 관심 없거든요. 대축척에서는 길이 블럭을 나누어 위치를 파악하는 데 중요한 정보이지만 소축척에서는 필요치 않은 경우도 많습니다. 여행지도를 만든다든지 할 때에도 내가 어디를 갔었는지가 중요하지 길이 중요한 건 아니니까 이렇게 고속도로가 지형을 울룩불룩 뒤덮은 지도가 아닌 간소화 지도가 제공되는 게 좋습니다. 프로토타입에서는 지형과 행정구역만을 단순화한 지도를 직접 그려서 사용했습니다.


내비게이션 용도를 우선한 소축척 지도



위치와 경로 표시에 적합한 간소화 소축척 지도 (다음지도에 오버레이 맵 사용)


노선도 간의 정렬

가로 형태의 노선도는 공간 제약으로 정류장 명을 기울여 써야 해서 읽기가 어렵습니다. 세로 형태의 목록을 사용하면 이름이 정렬되어 쭉 읽어나가기 수월합니다. 또 개별 노선도에서뿐 아니라 정류장에는 많은 노선도가 같이 붙어 있으니 함께 모여있을 때 보기 좋은 배치도 고려되어야 합니다. 현재의 그리드 형태의 배열보다는 한 줄로 나열된 형태가 시선의 이동이 줄어 더 보기 편합니다. 

그래서 세로 배열을 같이 실험해보았습니다. 세로로 나열하면 이름을 왼쪽 정렬하고 픽토그램을 노선 왼쪽에 붙여서 더욱 깔끔하게 정리할 수 있습니다. 가로로 기울여 쓴 것에 비해서 줄 간격을 줄여도 정류장 이름을 읽는 데 많이 불편하지 않기 때문에 공간 활용이 더 효율적입니다. 정류장이 늘어나면 줄 간격을 조절하여 노선도가 너무 길어지는 것을 막을 수 있습니다.







정류장 운행 지도

개별 노선도와 별개로 정류장마다 버스 노선 지도를 추가할 수 있습니다. 이 지도를 통해서 현 위치에서 갈 수 있는 목적지를 한눈에 확인할 수 있습니다. 개별 노선도와 같이 현 정류장에서 실제로 이용할 정류장만을 표시해서 방사형의 경로가 나타나게 됩니다. 모든 노선을 한 번에 표시하도록 지도의 스케일을 정하면 근거리 노선의 경로들은 가까운 곳에 뭉쳐서 잘 구분이 안 될 수 있습니다. 이런 경우에 먼 곳까지 운행하는 광역버스와 지선,간선 버스를 나눠서 표시하면 조금 더 보기 수월해집니다.


모든 버스 경로가 현 정류장 한곳에서 뻗어 나가므로 겹치는 노선이 생겨 원점에 가까운 곳은 구분이 어려워집니다. 색상은 이미 노선 구분에 사용되고 있어 마음대로 사용하는데 제약이 있습니다. 버스 별로 명도와 채도에 변화를 주고 노선을 조금씩 어긋나게 하면 완전히 겹치는 것을 줄일 수 있습니다. 버스 번호 레이블을 표시하는 위치에 대해서도 여러 가지 실험을 해보았는데 경로의 말단에 표시하는 것이 가장 보기 편했습니다. 중간에 표시하면 겹치는 경우가 많으니까요. 번호표 표시 위치도 될 수 있으면 경로와 겹치지 않도록 좌상, 우상, 좌하, 우하 네 영역으로 나누어 진행 경로를 연장하는 방향으로 그려주는 등의 규칙을 적용하여 그려주도록 하였습니다.




모두를 이롭게 하는 디자인

모두가 만족하게 하려는 디자인은 모두에게 그다지 좋지 않은 디자인입니다. 공공디자인에서는 특히 소수자를 배려해야 한다는 생각에 소수의 유스케이스까지 모두 반영 하다 보면 모두를 괴롭게 합니다. 누가 왜 어떻게 사용하는지를 이해하고 가장 적합한 맥락에 맞게 디자인을 하는 게 더 많은 사람을 이롭게 합니다. 


디자인은 결과라기보다는 과정입니다. 맥락에 맞는 버스 노선도가 아이디어 차원이 아니라 실생활에 작은 도움이 될 수 있도록 지속해서 지원을 할 계획입니다. 현재 개발 버전에서는 다음,네이버의 지도 API와 서울시 버스 정보 API 등을 이용해서 수도권의 모든 정류장의 버스 노선도를 자동으로 생성하고 벡터로 출력할 수 있습니다. 교통시설과의 담당 부문과의 협조를 통해 새로 설치되는 버스셀터에 새로운 디자인의 버스 노선도를 시범 운영해보고 시민들의 의견을 받아 개선해 나가는 방향을 고려하고 있습니다. 기존의 인쇄 노선도를 대체하는 방법과 현재 참여하고 있는 TFD 과제와 협업하여 투명디스플레이를 활용한 버스 정보 안내 시스템에 적용이 가능할 것 같습니다. 이후에도 진행 과정을 공유하도록 하겠습니다.



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


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2015.03.11 07:50

정류장 맥락을 고려한 버스 노선도 디자인 2/3 –버스 노선도 Redesign 과정과 결론

버스 노선도 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편에서는 '노선도 작성 자동화 프로토타이핑' 에 대해 소개해 드리도록 하겠습니다.

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




팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2015.03.10 07:50

정류장 맥락을 고려한 버스 노선도 디자인 1/3 – 해외 버스 노선도 사례와 특징

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

이번 겨울 저는 pxd의 인턴으로서 입사하게 되었습니다. 인턴 생활을 하면서 버스 노선도 리디자인 프로젝트를 진행하게 되었는데요. 이번 글에서는 이 프로젝트의 리서치부분을 소개하려고 합니다.


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

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

먼저 버스 노선도를 특징별로 나눠보면 다음 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 과정과 결론' 에서 새롭게 리디자인한 노선도가 어떠한지 이야기하도록 하겠습니다.

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



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2014.09.22 17:12

[정보디자인] 정보 소비 맥락을 고려한 시간표 리디자인

지난주에 저희는 HCI2014 학회에 참가하였습니다. (예 그렇습니다. 글을 쓰다가 내버려둔지 몇개월이 됐네요.) 학회 참가 기간 동안 몇가지 시간표들을 접하였는데요. 표의 열이나 행에 빽빽하게 숫자를 나열한 익숙한 형태였지만 시간표를 활용하는 실제 사용 맥락에서는 정보를 이해하기가 쉽지 않았습니다.
pxd에서는 이런 경우에 사내 전체 메일로 정보디자인 퀴즈를 내고 의견을 나누곤(주로 싸웁니다) 하는데, 업무가 바빴는지 참여가 저조했습니다. 그래서 이번에는 블로그를 통해 정보디자인에 관심있는 디자이너, 학생분들과 함께 고민해보려고합니다. 우선 제가 고민했던 부분을 공유합니다.


1. 도대체 리프트권 종류가 왜 이렇게 많아?

작년 학회 참가자들에게서 하이원 슬로프가 좋다는 얘기를 많이 들어와서, 저는 학회보다 스노우보드 타는데 더 관심이 있었습니다. 그래서 스키 신청 메일을 받자마자 바로 페이지를 열어봤는데요. 무슨 리프트권 옵션이 이렇게 많은지, 후야권, 야오권 이건 또 도대체 뭔지 알 수가 없어 많이 당황스러웠습니다.
리프트권 - 출처 : 하이원 홈페이지

시간을 어떻게 비교할까?

리프트권 구분에 사용되는 용어가 임의로 만들어진 조어라 이용시간을 꼼꼼히 살펴봐야만 나에게 적합한 리프트권을 선택할 수 있었습니다. 대충 보면 군더더기 없이 깔끔한 표이지만 막상 내가 원하는 시간을 비교하고 고르려고 하면 정신이 혼미해집니다.
정보를 전달하는 입장에서는 이런 표가 가장 효율적이겠지요. 적은 노력으로 누락없이 정확한 시간 정보를 전달합니다. 하지만 정보를 전달 받아 활용하는 사용자 입장에서는 표를 보고 비교 선택하는데 인지 부담이 큽니다. 수치로된 두 시간을 머리 속에서 개념화하여 기억해서 각각을 비교해야 하는데, 이런 정보 처리는 뇌가 익숙하게 할 수 있는 작업이 아니거든요. 단지 공간에 나열했다고 비교가 쉬운게 아닙니다.
이런건 머리 속으로 생각만 해서는 비교가 어렵기 때문에 우리는 뇌를 확장하려고 종이에 그려서 비교합니다. 이용 시간은 연속적인 시간의 구간이니까 공간의 한 축으로 치환해서 그래프로 시각화하기만 해도 비교가 수월해집니다. 비교 선택이 아니라 그냥 오후권은 몇시 부터 몇시까지에요? 라는 질문에 대한 정보를 제공하는 거라면 현재 표시 방법이 효과적이었겠지만요. 그럼 해결은 간단합니다. 추가로 표에 시각적으로 쉽게 비교할 수 있는 그래프만 더하면 될 것 같습니다. 그래서 제가 바로 그려봤을까요?
디자인을 하는데 있어 매우 중요하다고 거듭 느끼는 부분인데요. 문제가 무엇인지 정의(가정)하고 바로 문제를 해결하려고 하는 건 좋은 디자인 접근이 아닙니다. 그 다음 할 일은 비슷한 문제를 남들은 어떻게 해결했는지 열심히 찾아보는 것입니다. 다른 사람들의 해결을 살펴보면 내가 미쳐 보지 못했던 문제나 제약이 무엇인지 배울 수 있습니다.
처음에는 국내 스키 리조트의 홈페이지들을 찾아봤습니다. 하지만 역시나 시간을 숫자로 쭉 나열한 건 모두 똑같더라구요. *

그래서 이번엔 외국의 사례를 찾아봤는데요. 와. 스키 문화 자체가 달라요. 우리나라처럼 시간대별로 자잘하게 나눠서 리프트권을 파는게 아니라 하루권, 이틀권, 사흘권 이런 식이더군요. 일본의 근교 스키장 같은 경우에나 하루를 3개 정도 시간대로 나눠둔 정도이고요. 원하는 해결은 찾지 못했습니다. (좋은 사례를 아시면 알려주세요.)
그럼 이젠 직접 그려볼 차례입니다. 처음 한두개는 손으로 스케치를 해보다가 귀찮아서 표(HTML)의 시간을 읽어 그래프로 그려주는 스크립트를 짜서 돌렸습니다. 저는 코딩을 잘 몰라서 어렵게 했지만 요즘은 좋은 스크립트 라이브러리들이 많아서 이런건 간단히 할 수 있습니다.
redesign by 無異
숫자라는 심볼과 시간 개념(12 시간, 분과 시의 관계), 두 시간 간의 간격을 비교하려면 머리속에서 여러 차례 계산(변환) 과정을 거쳐야하지만 공간에 펼쳐놓으면 비교가 쉽습니다. 그래프의 위치와 길이 차이는 주의를 기울이지 않고도 바로 인지(pre-attentive processing)할 수 있거든요. 후야권이란건 오후+야간권이고 야오권은 야간+오전권 이었네요.


시간표는 24시간제를 표시하는게 좋다?

시간은 일반인에게 보다 익숙한 12시간제로 바꿨습니다. 제가 군인도 아니고, 제가 보는 시계도 12시간제로 되어 있어서, 24시간제로 표기된 시간을 보면 머리 속에서 한번 더 변환 과정을 거쳐야 하니 인지 비용이 발생합니다. 24시간제는 정보를 전달하는 입장에서 효율적입니다. 물론 12시간제로 표시하면서 동일한 오전,오후를 반복하여 표기하면 24시간제보다 더 복잡해 보일 수 있습니다. 하지만 대부분의 일상생활에서 맥락을 통해서 오전인지 오후인지 알 수 있는 경우가 대부분이라 평상시에 오전 오후를 생략해도 우리가 생활하는데 지장은 없습니다. 한 위 표에서는 그래프가 같이 있고 맥락상 오전 오후를 예측할 수 있어서 오전오후 표시는 간결하게 표시하였습니다.

또 시간은 개개인의 시간개념이 시간이라는 심볼에 맵핑됩니다. 오후 6:30 분이라는 시간을 들었을때 겨울철에 날은 얼마나 어둑해지는지 해가 지고 얼마나 쌀쌀해지는지, 배가 출출해질 때인지 무한도전 봐야할 시간인지 등 다양한 경험이 바로 연상 되지만 18:30에는 바로 맵핑이 되어 있지 않습니다. 군대처럼 모든 구성원이 24시간제를 쓰도록 강제되어 익숙해진 상황이 아니라면요. 24시간제를 사용하면 오전 오후에 대한 혼동이 줄게 되지만 일상적으로 사용하는 시간에 대한 경험의 연상을 잃게 됩니다. 우리가 외국어를 배울때 apple을 사과라고 말을 외우는게 아니라 정말 사과에 대한 표현에 있어서 24시간제는 leading zero가 붙어서 보기 좋게 정렬이 되는데 12시간제로 표시할때는 정렬을 맞추기 위해서 주의가 필요합니다. 저는 오른쪽 정렬 대신 opacity가 0인 투명한 0을 붙여주는 꼼수를 사용했습니다.
redesign by 無異
비교에는 선형적인 시간축 그래프가 좋긴하지만 그래서 다시 몇시부터 몇시까지 인지를 직관적으로 아는데는 방학 시간계획표처럼 아날로그 시계판에 표시하면 좋지 않을까 하는 생각이 들었습니다. 그래서 그려봤는데, 썩 좋지는 않네요. 주간과 야간을 색으로 구분해봤는데 별 도움이 되지 않는 것 같습니다. 파이가 별로여서 도넛으로도 그려봤는데 그것도 별로네요. 망했어요.

* 국내 스키 리조트 홈페이지의 리프트권 표시 방식이 모두 똑같다고 했는데 사실 모두 그런건 아닙니다. 곤지암 리조트는 리프트권의 시간이 정해져있는 방식이 아니라 me-time pass 라고 원하는 시간에 원하는 시간만큼 탈 수 있도록 시간권을 판매하여 이런 복잡한 시간표가 아예 필요없습니다. 서비스 디자인 측면에서는 이런게 더 좋은 해결이라고 할 수 있겠습니다.


2. 셔틀 버스는 얼마나 기다려야 오는거야?

대절한 버스를 타고 학회장인 호텔에 우선 내렸는데 제가 들으려던 강의까지는 시간이 꽤 남았습니다. 셔틀을 타고 숙소인 콘도로 가서 잠깐 쉬고 올까싶어 홈페이지에서 셔틀 시간표를 찾아보았습니다.

여기서 문제. 현 위치는 강원랜드 호텔이고 숙소는 마운틴 콘도 F 동, 현재 시간은 12 시입니다. 2시 강의를 듣기 위해 돌아와야 한다면 숙소에서 얼마나 쉴 수 있을까요? 차라리 그냥 기다리는게 좋을까요? **

셔틀버스 시간표 - 출처: 하이원 홈페이지
셔틀버스 시간표를 이용하는 주요 use case는 다음 세가지일 것 같은데, 이 세 가지를 한꺼번에 확인해야 하는 아주 피곤한 경우였습니다.
1. 현재, 현 위치에서 셔틀을 타려면 얼마나 기다려야하나? (언제 오나?)
2. 목적지까지 가는데 시간이 얼마나 걸리나?
3. 특정 시간까지 목적지에 도착하려면 언제 셔틀을 타야하나?

셔틀은 얼마나 자주 다니는 걸까?

사실 1 과 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 는 대부분 고정폭이 아닌 유동폭 글꼴이라 정렬이 안되는 문제가 있습니다.
** 나중에 알고 보니 학회기간 동안 셔틀을 증편 운행하여 시간표와 상관없이 배차 간격이 짧았습니다. 시간표는 별 의미가 없었습니다. :)


3. 학회 시간표에 누락된 정보는 무엇일까?

마지막은 예상 하셨듯이 학회 시간표입니다. 이런 학술대회의 시간표는 언제 어디에서 어떤 강연을 하는지가 필수적인 정보입니다. 한 강연을 듣는다는건 같은 시간의 다른 강연을 못 듣게 되는 것이니까 비교도 잘 할 수 있어야합니다. 표를 효율적으로 만들려면 가로축의 장소(강연장)에는 많은 정보를 넣지 못하니까 아래 그림처럼 별도로 발표장 지도를 제공합니다. 두개의 독립된 정보를 join 해서 찾아봐야 하죠. 저도 이번에 강연장을 못 찾아서 헤맸습니다. 호텔이 경사지에 지어져서 지상 입구로 들어오면 당연히 1층인 줄 알았는데 2층인가 3층이더라구요.

사진 출처 - HCI학회 페이스북
사실 제가 관심있는 부분은 현재의 학회 시간표 정보를 어떻게 효과적으로 표현할 수 있을까가 아니라 소통의 채널로서의 시간표입니다. 나와 공통의 관심사를 가지고 또 보다 구체적으로 같은 주제의 강연을 들으려는 사람들이 같은 시간에 같은 공간에 모이는 경우는 굉장히 드문 기회거든요. 강연을 듣고 몇분의 질문답변 시간을 가진 후 다시 뿔뿔이 흩어지는건 아깝다는 생각이 들었습니다. 시간표의 강연 한 칸 한 칸이 하나의 게시판 또는 대화방이 되어서 학회 전부터 어떤 정보를 얻고 싶은지 의견을 나누고 배경이 되는 지식을 공유하고, 또 강연이 끝나고 나서도 발표 자료를 공유하고, 궁금한 점들을 서로가 묻고 답하는 공간이 되면 멋지지 않을까 하는 생각을 했습니다. 실제로 SxSW 같은 대규모 컨퍼런스 같은 경우는 자체의 앱에서 이런 기능을 제공하고 있고요. 저희 LeanUX lab 에서는 요즘 이런 문제 제기에서 접근한 학회 시간표의 리디자인을 개발을 해보고 있습니다. 내 친구들은 어떤 강연을 듣는지 알 수 있고, 강연에 관련된 주제의 정보를 함께 강연을 들을 사람들과 함께 공유할 수 있으면 재밌지 않을까요? 학회만이 아니라 공연에서는 팬들과 뮤지션이 소통하는 공간이 될 수도 있겠고요.

시간을 공간에 펼쳐 놓기

원래의 표나 그래프를 이용하는 방법이나 전달되는 정보 자체는 동일합니다. 하지만 분명히 더 잘 설명해줄 방법이 있을텐데 자기가 편하고 익숙한 방법만을 강요하는 같아서 불친절하다는 느낌을 받습니다. 사용 맥락을 고려하여 시간 정보를 적절히 공간에 시각화하면 사용자가 정보를 해석하는 과정을 줄여 정보 소비를 좀 더 수월하게 해 줍니다. 익숙하게 사용하고 있는 다른 표들도 이용하는 맥락에서 정말 최선의 표현인지 깐깐하게 다시 돌아보면 좋겠습니다.

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

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 7
Ad Test...
2011.07.07 21:05

[검색 리디자인] 통합 검색 덜어내기

검색엔진 뭐 사용하세요? 네이버,다음,구글?
네이버가 좋아요? 구글이 좋아요? 
이런 질문은 아빠가 좋아? 엄마가 좋아? 같은 질문과 별반 다르지 않습니다. 둘은 지향하는 바가 다르기 때문에 필요에 따라 보완적인 관계에 있지 무엇이 더 좋고 나쁘다고 하기 어렵거든요. 그런데 다시 뒤집어 생각하면 둘 다 부족하다는 의미입니다.

이전 글에서 이어지는 내용입니다. http://story.pxd.co.kr/327
 
일로써 인터넷 자료 조사를 많이 하기도 하고 약간의 검색 중독 때문에 검색엔진 사용이 극단적으로 많은 편에 속하는데요. 검색에 할애하는 시간이 많다보니 그만큼 네이버,구글의 검색 결과에 만족스럽지 못한 부분이 많이 걸려서 결국 개인적으로 매쉬업을 이용해검색서비스를 만들어 사용하고 있습니다. 최근 몇 년 간 취미로 내가 사용하기 위한 검색 UI를 디자인하고 매일 직접 사용하면서 스스로의 피드백을 통해 매일 매일 고쳐나가고 있습니다. 나만을 위한 검색엔진을 만들면서 고민했던 부분을 공유해 보겠습니다. 

거칠게 요약하면 통합검색 다 필요없고 위키피디아와 구글웹 검색, 네이버 블로그 검색 세가지만 있으면 된다 입니다.
사용 모습은 아래 동영상을 참고해 주세요.




검색을 잘하는 사람은 어떤 검색엔진을 사용할까요?


검색엔진 첫눈 UI 프로젝트에서 검색 행태에 대한 사용자 조사를 하면서 검색에 대해 많이 배울 수 있었습니다. 검색을 잘하는 사람의 특징은 두가지 정도로 정리 할 수 있는데,
1.검색 query를 잘 선택하고(정보 제공자의 어휘로 구체적이고 더 많은 단어를 사용)
2.다양한 전문(vertical)검색엔진을 필요에 따라 잘 선택하여 씁니다.

일상에서도 좋은 답을 얻기 위해서는 질문할 분야에 대해 잘 아는 전문가를 찾아가 좋은 질문을 던져야 하는 것과 마찬가지 입니다. 
많은 사람이 특정 유형의 정보는 특정 검색엔진이나 사이트에서 검색하는 것이 더 좋다는 자신만의 노하우를 가지고 있긴 하지만 검색엔진 사이트로 이동하고 키워드를 또 다시 입력하는 과정이 번거럽기 때문에 네이버나 다음 처럼 시작페이지로 등록한 메인 검색엔진에서 그냥 검색을 하게 됩니다. 결과 측면에서도 적당히 충분한(satisficing) 정보를 얻는데 문제가 없으니까 일반적인 사용자에게는 좋은 전략적 선택입니다.

양보다 질로 골라서 검색하는 A  la carte 검색


UI를 설계하는 방법 중에 일반인들도 전문가의 노하우와 스킬을 쉽게 흉내내도록 하는 접근이 있습니다. 일반 사용자도 어떤 유형의 정보를 찾고 싶은지 이미 알고 있는 경우가 많으니 전문검색엔진을 모아두고 쉽게 전환할 수 있도록 하면 보다 효율적으로 더 나은 검색 결과를 얻을 수 있을 것입니다. 다만 전문 검색엔진으로 이동하고 키워드를 다시 입력하는 과정의 번거러운 것이 문제라고 생각되어서 그 부분만 해결 해주면 될 것 같았습니다. 이런 가설을 가지고 처음 만들어서 테스트해 본 것이 A la carte 검색이었습니다. 부페처럼 막 나열된 통합검색에서 양만으로 배를 채울게 아니라면 딱 내가 원하는 걸 주문하는게 질적으로 만족도가 더 높을테니까요. 검색 유형에 따라 검색어 추천을 해주는 일관된 검색창 인터페이스에  구글의 인스턴트 검색처럼 입력 중에 검색결과가 바로 표시되도록 만들었습니다.

A la carte 검색 시연 모습 보기



검색의 파레토 법칙


일년 정도 사용하면서 실제 검색 데이타를 모아봤더니 놀랍게도 대부분 딱 두개의 검색만 쓴다는 걸 알게되었습니다. 정확한 통계는 아니지만 파레토 법칙처럼 구글 검색과 네이버블로그 검색이 전체의 80%정도를 차지하는 듯 싶었습니다. 그래서 새로 디자인 하면서는 애플처럼 주 사용의 80%에만 집중하기로 하고 나머지는 버렸습니다. 복잡하게 유형별 검색을 모아두지 않아도 구글과 블로그 검색만 나오면 찾고 싶은 건 거의 다 찾을 수 있더라구요.
이 두가지가 대부분의 검색 케이스를 커버할 수 있었던 이유는 아마 서로의 성격이 상반되어서 서로가 부족한 검색 의도를 채워주고 있었 던 것 같습니다.

Search User Goals


사용자의 검색 의도를 분석한 논문에 따르면 크게 세가지로 나누고 있습니다.

특정 사이트로 이동하려는 navigational (15-20%)
정보를 얻으려는 informational (50-60%)
리소스를 얻으려는 transactional (25-30%)

가장 큰 비중인 informational을 좀 더 세분화 하면 아래와 같다고 합니다.
1.directed question.
    1-1.closed-end question
    1-2.open-end question
2.undirected question.
3.advice
4.locate
5.list


이러한 검색 의도를 검색결과에 반영 할 수 있을까요? navigational 같은 경우는 구글의 운좋은 예감이나 네이버의 바로가기 처럼 효과적으로 골라낼 수는 있지만 나머지는 검색의 골에 따라 정보를 분명하게 분리를 할 수 있는 것도 아니고 검색을 하는 사용자도 의도가 애매하게 겹치기 때문에 검색 결과에 직접 반영하기는 어렵습니다. 
현재 검색엔진에서 사용하는 소스의 출처나 유형에 따른 분류는 검색 사용자의 의도를 직접 반영하기 보다는 기계가 분류할 수 있는 속성에 따른 것 입니다. 통계적으로 많은 사람이 찾는 유형의 검색 결과를 먼저 노출하고 있긴 하지만 사용자 마다 또 질의시 마다 의도가 다를 수 있기 때문에 개인에 있어서 통합검색의 검색결과는 무작위적인 것으로 인식 될 수 있습니다. 네이버의 컬렉션 랭킹이 단순한 클릭수가 아니라 보다 복잡한 알고리즘을 사용하여 검색 의도를 반영하고 있다고는 하지만 그건 평균에 속할 경우에 해당하는 것이겠지요. 같은 검색어를 사용한다고 검색 의도가 모두 같을 수는 없으니까요.

Domain knowledge

검색 사용자 조사를 통해 배운 또 하나는 사용자의 검색 주제에 대한 지식 수준에 따라 검색의 접근이 달라진다는 것 입니다.
대상에 대해 전혀 모르고 있으면 'X에 대해 알려주세요' 같은 undirected question 밖에 할 수 없습니다. 어느 정도 그 주제에 알고 있어야 open-end , closed-end question 으로 질문이 옮겨 갈 수 있습니다. 그래서 검색은 검색을 통해 정보를 얻고 또 그 정보에 기반하여 다시 검색 하는 과정을 반복하여 최종 목적지에 도달하는 오리엔티어링에 가깝습니다.
그래서 검색하려는 대상에 대한 지식 수준으로 나누어 검색 결과를 제시하면 검색 골과도 연결이 되고 더 자연스럽게 정보를 취할 수 있게 됩니다.


인물검색을 예로 들면 인기검색어로 올라온 유명인을 검색할 때 어떤 사람은 그 사람에 대해 잘 알고 있어서 사람의 최근 활동(가십?)에 대해 더 자세한 정보를 얻으려는데 관심을 가지고, 어떤 사람은 도대체 X가 뭐하는 사람이야? 어떻게 생긴 사람이야? 라는 궁금증을 가지고 검색을 하게되니까요. 인물 검색의 사진만 슬쩍 보고 아, 이 사람이구나 하고 호기심이 충족되는 경우도 많고, 어떤 사람인지 알게 되면 다시 그래서 최근에 무슨 일이 있었는지 찾아보게 되고요.


위키백과 (한글 위키피디아)


undirected question에 대해 가장 좋은 답은 지식인이 아니라 백과사전입니다. 위키백과는 주제에 대한 개략적인 설명과 전문적인 내용, 더 알아 볼 수 있는 참고 링크를 포함하고 있어서 뭔가에 대해서 알고자 할때 시작하기에 가장 적합한 형태입니다. 모르는 주제에 대해 리서치를 할 때는 가장 먼저 위키백과를 참고하면 좋습니다.

네이버의 컨텐트 검색이나 전문 DB 검색 결과 또한 이런 질문에 대한 답으로 훌륭합니다. 썸네일 이미지를 포함하고 있어서 내용을 읽지 않더라도 내가 제대로 키워드를 사용하고 있는지 슬쩍 보고 알 수 있는 이정표 역할을 해줍니다.
위키백과와 같이 '무엇'에 해당하는 범용 백과사전 외에 '누가','어디서'에 해당하는 인물DB와 지역DB가 노출되면 도움이 많이 됩니다.




구글 웹검색


구글의 웹검색은 오랜 기간 신뢰도가 쌓인 best match 결과를 상위에 보여주는데 해당 키워드의 대표 사이트 또는 위키백과 페이지가 상위에 올라오는 경우가 많습니다. navigational과 undirected question에 해당하는 검색 목적을 가장 잘 만족시켜줍니다.
찾으려는 답이 정해져 있는 closed-end 질문에 대한 답도 구글 웹검색을 이용하는게 가장 결과가 좋습니다. 

네이버 블로그 검색


블로그 검색 결과는 사용자의 주관적인 리뷰를 찾아보는데 적합합니다. 어떤 한 측면을 보는게 아니라 전반적으로 정보를 수집하려는 open-end 질문에는 구글보다 네이버 블로그 검색을 사용할 때 더 만족스런운 결과를 얻을 수 있습니다.

블로그는 인력 검색


네이버의 블로그 검색은 최신 정보에 대한 가중치를 높게 두고 있습니다. 구글 웹검색이 오랫동안 많은 사람에게 검증된 자료를 노출하여 변동이 적은데 비해 네이버 블로그는 트렌드에 민감하게 반응합니다. 어느쪽이 더 좋은게 아니라 필요에 따라 용도가 다른 것 같습니다. 이런 검색 노출 특성때문에 요즘은 실시간 인기 키워드에 대한 정보를 잘 모으고 편집하여 검색결과의 상위에 올리고 업체의 광고를 하는 전문 인력(?)들도 생기고 있습니다. 아직은 연예,오락 중심의 쉽고 대중적인 주제에 몰려있긴 하지만 여러 페이지 클릭하는 시간을 많이 줄여줘서 저는 좋습니다. 사람들이 중요하게 생각하는 이슈의 뉴스들도 이런 식으로 블로그 검색에 표시됩니다. 원본이 아니라 퍼온 자료가 노출된다고 비판을 하기도 하지만 한동안 유행하던 집단지성에 의한 인력 검색 결과와 비슷한 효과를 얻을 수 있는 것은 네이버 블로그 검색의 장점이기도 합니다. 

블로그는 이미지 검색 


요즘 블로그의 사용 리뷰에는 수준 높은 사진들이 가득해서 눈으로 훑어보기만 해도 많은 정보를 얻을 수 있습니다. 네이버와 다음은 블로그 내의 이미지를 대표 이미지 한 장이 아니라 여러 장 인덱싱하고 있습니다. 하지만 검색 결과에서 한 번에 펼쳐 보여주는 것이 아니라 마우스 오버 하여야만 보여주는 것이 번거럽지만요. 블로그 내의 이미지만 제대로 보여주면 별도로 이미지 검색 결과를 노출 할 필요가 없습니다.
네이버 검색 개발 담당하는 친구 말로는 이미지를 한번에 다 노출하면 트래픽 이슈가 있어서 현재처럼 우선 하나만 보여주고 있다고 하는데, 실제로는 블로그의 사진이 고객의 시선을 빼앗는 것을 막고 광고로 유도하려는 광고 비즈니스에 기반한 정책이라고 추측됩니다. 블로그 검색에서는 사진 하나라도 보여주는데 통합 검색에는 아예 사진을 표시하지 않고 있습니다. 이미지 자체가 그 그 블로그를 선택하는 가장 중요한 정보가 되는데도 누락시키고 있습니다. 
블로그 썸네일을 한번에 펼쳐 보여주는 형태에 익숙해 지면 썸네일을 하나 보여주는 네이버,다음이나 하나도 안보여주는 구글에서는 답답해서 블로그 검색을 할 수 없게 됩니다. 마치 이미지 검색 결과에 텍스트만 있는 느낌이 듭니다. 구글의 preview 기능은 훌륭하긴 하지만 마우스 오버해야만 이미지를 더 보여주는 것과 동일한 stacked in time 방식입니다. 중요하고 비교를 하는데 필요한 정보를 표현하는데는 좋지 않은 방법입니다. 사용자의 시간을 뺏고 노력을 강요합니다. Edward Tufte는 정보를 펼쳐 놓으라고 항상 강조하고 있습니다.
아래 결과를 보면 그 차이가 확연합니다.
  

 
 





검색결과의 순서를 예측 가능하도록 배치 1-3-5


그래서 여러 콜렉션의 결과를 많이 노출하기만 한다고 좋은게 아니라 위키백과,구글웹,네이버 블로그 세가지만 잘 보여주어도 불필요한 인터랙션(스크롤)을 줄이면서도 원하는 결과를 보다 잘 찾을 수 있습니다. 개수는 위키백과 1,구글웹 3, 블로그 5개입니다. :)
구글웹의 경우 상위3개가 클릭의 80%에 해당한다는 통계가 있는데요. 3개에도 원하는 결과가 없으면 그 외 결과를 더 보는 것 보다 키워드를 바꿔 보는게 낫습니다.
장기적이고 객관적인 정보 위주로 찾아주는 구글검색과 최신의 주관적인 정보 위주로 검색하는 네이버 블로그 검색(다음 블로그는 호흡이 중간정도 됩니다)은 서로를 잘 보완해 줍니다.
컬렉션 랭킹처럼 키워드에 따라 순서가 바뀌는 것 보다 이렇게 순서를 고정하여 보여주는게 더 효과적입니다. 검색하는 주제에 대해 전혀 모르는 경우를 위해서 레퍼런스를 가장 먼저 배치하고, 어떤 순서로 노출되는지 예측할 수 있도록 하여 원하는 의도의 결과가 아닌 경우 빨리 스킵할 수 있도록 단순한 결과를 먼저 배치합니다. 그렇게 하였더니 검색 결과내에서 원하는 답을 좀 더 쉽게 찾을 수 있었습니다.


Rich Vertical Search Links


그럼에도 원하는 정보를 얻지 못하는 경우에는 바로 전문 검색엔진을 사용하도록 합니다. 전문 검색엔진을 검색결과 아래에 모아 두고 바로 검색을 할 수 있도록 하였는데, 이때는 검색엔진으로 이동해서 다시 키워드를 입력하는게 아니라 입력된 키워드로 바로 검색이 됩니다.
다음의  /검색은 내부의 카테고리 뿐 아니라 외부 검색엔진으로 바로 연결되도록 하고 있습니다. 내부 서비스만으로 닫힌 구조를 만들 것이 아니라, 더 좋은 전문 검색 결과를 제공하는 외부 검색엔진을 추천하고 쉽게 옮겨 가도록 열어두고 자신은 더 경쟁력이 있는 검색 서비스에 집중하는 전략이 검색 만족도를 높여 줄 수 있을 것라고 생각됩니다. 별로 만족스럽지 못한 자사의 검색 결과 안에서만 계속 빙빙 돌린다고 광고 클릭해 줄 건 아니니까요. 물론 단기적으로는 수익에 더 도움이 된다는 조사 결과가 있었겠지요. 하지만 장기적으로 영향을 줄 수 있는 고객 경험 측면에서 좋지 않지 않다는 건 확신할 수 있습니다.


검색어 예측 vs. 검색어 추천



2008년에 A la carte 검색을 만들때 부터 inquisitor라는 브라우저 플러긴을 모델로 따라하였는데요. inquisitor는 검색창에 키워드를 입력하면 검색어 추천뿐 아니라 구글 검색결과까지 미리 보여줍니다. 첫번째 추천 검색어를 기반한 결과를 보여주어서 마치 뇌보다 손이 빠른 느낌이 들 정도였습니다. 당시는 영어에만 동작해서 우리말에도 적용해 보고 싶어서 네이버 추천 검색어를 가지고 만들어봤더니 상당히 효과적이었습니다. 구글이 작년에 발표한 인스턴트 검색도 동일한 형태입니다.

사용하면서 두가지 문제가 있었는데 첫 번째는 검색어를 목록 형태로 추천하는 것이 검색어를 예측하여 검색 결과를 미리 뿌려주는 모델에 적합하지 않다는 것이었습니다. 추천 목록과 검색 결과에 주의가 분산되어 더 복잡해 보이는 문제가 있었습니다. 그래서 채택한 것이 아이폰의 auto complete 버블 형태입니다. 검색어를 단 하나만 예측하여 보여주어서 인지적 부담이 줄어들었고 오타입력시에도 바로 인지할 수 있게 되었습니다. 키입력이 더 늘어날 것 같았지만 실제로는 별반 차이가 나지 않았습니다. 


두번째는 입력 중에 의도하지 않은 결과가 노출되어 주의를 산만하게 하는 점입니다. 해결은 간단한데 키입력 시간을 체크해서 입력 중에는 결과를 뿌리지 않도록 하는 것입니다. 맨 위의 동영상에서 보면 검색 결과가 거의 입력을 끝냈을 때만 나타나는데 반응이 느린게 아니라 키 입력 중에 의도하지 않는 노이즈 결과의 노출을 제한하도록 하고 있습니다. 구글은 단순하게 타이머로 주기적으로 중간 결과를 계속 뿌리도록 하고 있는 것 같습니다. 중간의 광고 노출을 의도한 것인지 모르겠지만 인스턴트 검색으로 인한 불쾌한 경험을 하면서 알게 되었는데 실제로는 중간에 뿌려지는 결과에 전혀 주의를 주지 않고 있었습니다.


보다 나은 검색 사용 경험을 위해서는 통합검색을 덜어내자

사용자의 검색 의도를 모르니까 가능한 많은 컬렉션의 검색 결과를 노출 시키려는 네이버와 다음의 통합 검색은 효용이 너무 낮습니다. 블로그 검색 결과의 노출 정책을 보면 사용자의 검색의 편의보다는 광고를 위한 검색 UI가 아닌가하는 의혹을 주기 까지 합니다.
양으로 승부하기 보다는 주제에 대한 지식 수준에 따라 나누어 간접적으로 검색 의도를 반영하여 검색 결과를 표시 하는 것이 좀 더 자연스러운 접근일 것 같습니다.
공교롭게도 구글웹과 네이버블로그 검색의 성격이 상보적이라 두개로 대부분의 검색 의도를 포괄할 수 있게 됩니다.
나머지들은 전문 검색엔진 링크 모음으로 직접 이동하게 하는게 효과적입니다.


글을 쓴 목적은
1. 나 혼자서 나만을 위해 만든 검색 디자인이 다른 사용자들에게도 도움이 될 수 있는지 확인해보고
2. 다른 사람들도 유용하게 쓸 수 있다면 함께 나눌 수 있도록 도움을 얻고 싶습니다.

피드백을 주실 수 있는 분은 의견 남겨주세요. 직접 사용해보고 의견을 구하는 자리를 마련해보도록 하겠습니다.







참고
검색 리디자인 : 통합검색, 사용자를 위한 것인가 광고주를 위한 것인가?
http://story.pxd.co.kr/327
 

민첩한 리서치를 위한 인터넷 검색 팁
http://www.slideshare.net/taekie/rapid-research-hhg
 
A taxonomy of web search (2002) 
Understanding User Goals in Web Search (2004)
[다음 검색] 이제 /(슬래쉬) 만 기억하면 검색이 편해집니다!
http://blog.daum.net/daumsearch/16151027

 

[참고##redesign##]  


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 1
Ad Test...
2011.01.25 17:57

[검색  리디자인] 통합검색, 광고주를 위한 검색?

얼마전(이미 지난해) 개편한 다음은 통합웹이란 이름으로 출처별 구분을 하나로 묶어 보여주기 시작했습니다. 다음보다 앞서 네이버 모바일은 작은 모바일 화면에서 출처별로 결과를 나열하는게 비효율적이라고 퓨전웹이란 이름으로 검색결과를 묶어서 보여주었고요. 반면 구글 코리아는 검색결과 UI를 현지화 하여 본사와는 다르게 유형별 검색결과를 모아서 보여주는 시도를 하고 있습니다. 

구글코리아는 네이버와 다음처럼 유형별로 나눠 보여주려고하고 반대로 네이버와 다음은 구글처럼 한번에 보여주는 재밌는 상황입니다. 과연 어떻게 검색 결과를 보여주는 것이 좋을까요?


통합검색

네이버에서 세계최초로 선보였다고 하는 통합검색  은 정보의 유형이나 출처등에 따라 나누어진 컬렉션별 검색(vertical search) 결과를 한페이지에 모아 보여주는 것을 특징으로 합니다. 현재는 국내의 모든 검색엔진이 이런 방식으로 검색 결과를 보여주고 있어서 과히 한국형 검색 모델이라고 불러도 될 듯합니다. 

통합검색은 유형별로 파편화된 검색결과를 한눈에 보여주겠다는 구글의 universial search와 같은 의도에서 출발합니다. 유니버셜서치는 사용자가 특정 키워드를 검색 할때 웹문서 뿐 아니라 사진이나 뉴스같은 유형의 검색을 함께 하는 경우가 많으니 번거럽지 않게 같이 보여주도록 하겠다 는 고객의 검색 행태를 반영한 결과입니다. 차이가 있다면 구글은 웹에 있는 모든 정보를 유형 구분없이 랭킹순으로 보여주는 것을 기본으로 하되 함께 검색하는 빈도가 높은 다른 유형의 검색결과를 추가로 노출시켜주는 접근입니다. 모든 키워드를 유형별로 나눠보여주려는 네이버나 다음의 통합검색과는 차이가 있습니다.

이런 차이는 네이버가 밝히고 있듯이 초기에 우리나라 웹문서의 양이 적었기 때문에 웹문서만으로는 검색 품질과 만족도가 낮을 수 밖에 없는 문제를 해결해보려는 요구가 함께 있었기 때문인 듯 합니다. 그래서인지 통합검색은 사용자가 함께 찾아볼 확률이 높은 컬렉션을 추가로 노출하는 수준을 넘어서 ‘자 이래도 니가 찾는게 없을까?’ 라는 식으로 모든 밑천을 탈탈 털어 보여줍니다.


통합검색의 장점

통합검색은 다음과 같은 장점이 있습니다.

recognition than recall + serendipity

내가 뭘 찾고 싶은지 말로 명확하게 설명하기는 어렵습니다. 무엇을 알고 싶은지 핵심 키워드를 뽑아냈다고 해도 구체적으로 왜, 어떤 정보를 얻고 싶은지를 알려주기는 더 어렵습니다. 사실 눈으로 보기전에는 내가 뭘 찾고 있는지도 모를때가 많거든요. 이런 경우에 통합검색은 도움이 됩니다. 그냥 쭉 훑어보다가 내가 찾는게 보이면 만족스럽습니다.

가끔 우연한 발견을 하는 즐거움도 큽니다. 딱히 이런걸 찾고 싶은 의도는 없다고 해도 관심있는 정보가 눈에 띄면 횡재한 기분이 듭니다. 생각지도 않은 동영상이나 관련한 책등을 찾아 더 상세한 정보를 얻을 수도 있고요.

scroll is the new click

인지과정 뿐 아니라 조작 측면에서도 유리합니다. 특정 유형의 검색을 위해 카테고리를 포인팅하고 클릭하기보다 그냥 휠을 스크롤하는게 쉽습니다. 예전에는 사용자가 스크롤하지 않게 페이지를 짧게 구성해야 한다했지만 이젠 옛날얘기일 뿐입니다. 마우스 휠의 사용과 pc와 브라우저 성능의 비약적 발전으로 손가락만 휘릭 돌리면 부드럽게 페이지를 넘겨 볼수 있게 되면서 상황이 바뀌었거든요. 마우스 커서를 움직이려고 손목을 움직여야 하는데 손가락만 까딱하면서 휠을 돌리는 수고가 훨씬 저렴합니다.

vertical search engines

어떤 키워드로 찾을까 만큼 어떤 검색엔진으로 찾는가도 중요합니다. 좋은 답을 얻기 위해서는 질문을 잘 하는 것도 중요하지만 누구에게 물어보는 지가 중요한 것 처럼요. 전문 검색 엔진을 사용하면 더 좋은 결과를 얻을 수 있습니다.
하지만 일반 사용자는 전문 검색엔진을 잘 알지 못하고 사이트 이동하는 것도 부담이 됩니다. 자주 쓰는 것도 아닌데 외우고 있기도 부담스럽고 필요할때 마다 골라 쓰는것도 귀찮거든요. 통합검색은 전문검색엔진의 진입비용을 줄여줍니다. 네이버와 다음은 열심히 전문검색엔진의 개발과 제휴, 인수로 일일히 전문검색엔진을 찾는 수고를 덜어주고 있습니다.


통합검색의 비효율성

그럼에도 제가 통합검색을 좋아하지 않는 이유는 대부분의 경우 비효율적이기 때문입니다. 

satisficing and information overload

우선 통합 검색은 정보량이 너무 많습니다. 사람의 정보처리능력에는 한계가 있기때문에 모든 선택가능성을 평가하고 최선의 선택을 하기보다는 대략 이정도에서 만족하자 하는 식(satisficing)으로 결정을 합니다. 그것이 합리적이니까요. 최고의 결혼상대자를 찾으려고 평생 데이트만 할 수는 없잖아요. 검색을 할때도 적당히 충분한 답을 얻으면 굳이 더 나은 답을 찾으려고 노력하지 않습니다. 그래서 지식인 모델이 인기가 있는거겠죠.

대부분의 경우에, 네이버 통합검색결과의 대부분 컬렉션은 저에게 정보과부하의 노이즈(그냥 쉽게 쓰레기)일 뿐입니다. 언젠가는 오래된 신문검색에서 내가 찾으려던 정보를 발견(!)하게되는 날이 올지도 모르겠습니다. 하지만 그런 적은 확률의 경우를  위해서 매번 모든 정보를 쏟아내면 검색 결과 내에서 다시 원하는 결과를 찾는 비용만 늘어납니다.


한상차림 vs. 부페

구글의 김현우님은 통합검색을 한상차림으로 비유하기도 하였는데요. 앞에서 얘기한 통합검색의 긍정적인 부분에서는 한상차림의 비유가 적절하지만 사실은 부페에 더 가까운것 같습니다. 모든 결과가 한 화면에, 손 닿는 거리에 있는게 아니라 막 돌아다니면서 줏어 먹어야 하잖아요. - 저는 부페가 싫어요 :)   

앞에서 스크롤이 쉬워졌다고는 했지만 그래도 가장 좋은건 스크롤을 할 필요가 없도록 하는 것입니다. 컬랙션랭킹을 통해 컬랙션의 순서가 매번 바뀌도록 하고 있는데요. 남들과 똑같은걸 찾는게 아닌 경우에는 검색 결과들 안에서 내가 원하는 걸 찾기 위한 긴 여정이 필요하게됩니다. 항상 남들과 같은 걸 찾는다면 통합검색이 필요없겠죠. 딱 찾으려는 것만 앞에 보여주면 되니까요.

네이버에서 지난해 개편에서 구글이나 야후의 F자 아이트래킹 실험결과를 네이버의 검색결과 디자인에 반영하였다고 설명하고 있습니다. 

출처 :네이버 인사이드
 

그런데 이것은 인과관계를 잘못 이해한 것입니다. “검색결과에서 처음에 나오는 결과가 가장 중요하다고 입증되었습니다"라기 보다는 “구글 사용자”가 그렇게 학습이 되었다는 것이겠지요. 구글의 2005년 아이트래킹 결과는 현재(2008년 이후)의 F자 형과는 현저하게 다른데요. 사람들이 원래부터 F자형으로 정보를 찾는게 아니라 구글이 최상단에 만족할만한 검색결과가 노출되도록 꾸준히 검색결과의 품질을 높이고 또 사용자가 그것에 잘 학습되었기 때문에 이런 실험 결과가 나오는 것이라고 생각합니다.


출처 Think Eyetracking , Seach Engine Journal 

F자 힛맵의 핵심은 검색결과 상단에서 바로 원하는 답을 찾을 수 있었다는 것이지 형태가 중요한게 아닙니다. 네이버의 아이트래킹 힛맵에서 보이는 화면 전체를 덮고 있는 커다란 붉은 F자 영역은 고객이 네이버 검색결과 내에서도 도대체 어디에 내가 원하는 결과가 있는지 몰라서 찾아 헤매고 있는 모습을 보여줍니다.


광고를 위한 검색결과 플랫폼

그럼에도 우리나라에서 통합검색이 주류를 이루는건 사용자의 검색 편의를 위해서라기보다는 검색광고에 부합한 구조이기 때문이라고 생각됩니다. 압도적인 양으로 승부하는 통합검색이 아니고서 무슨 배짱으로 3페이지 정도에 해당하는 분량의 광고를 최상단에 뿌릴 수 있겠습니까? 많은 양의 광고를 노출하기 위해서 더 많은 양의 검색결과로 물타기를 하는 것으로 밖에 보이지 않습니다.
위에서 얘기한 F자 힛맵은 보통 우리나라 통합검색 결과에서는 나타나기 어렵습니다. 가장 중요한 최상단에 나오는 것은 사용자가 찾고자 하는 결과가 아니라 광고비를 많이 낸 키워드 광고 스폰서 결과라는걸 이미 학습하고 있어서 바로 스크롤하거든요. 

통합검색 블로그 이미지 썸네일 노출 배제

블로그의 성격상 본문 내의 이미지가 검색결과를 선택하는데 중요한 역할을 합니다. 벌써 네이버나 다음의 블로그 검색 결과에 익숙해져있어서 썸네일을 보여주지 않는 구글 블로그 검색결과를 보면 이미지 검색에서 이미지가 없이 텍스트만 있는 답답한 느낌을 받곤합니다. 

그럼에도 네이버와 다음의 통합 검색에서는 블로그 내의 이미지 썸네일을 보여주지 않습니다. 이미지는 텍스트에 비해서 훨씬 많이 주의를 얻게 되는데요. 이것은 다른 컬렉션과의 경쟁에서 너무 튀지 않게 패널티를 주는 것이라고 생각합니다. 물론 그 수혜자는 사용자가 찾는 다른 검색결과가 아니라 광고입니다. 비싼 돈 내고 광고하는데 블로그 검색 SEO로 날로 먹으려고 하면 안되니까요. 

네이버가 비즈니스 키워드(돈이 되는 키워드) 통합 검색결과에서는 블로그 컬렉션 자체를 아예 누락시키고 있는 것을 보면 억측은 아니라고 생각합니다.


그래서 결론은 네이버가 좋아? 구글이 좋아?

사용자 입장에서 보면 통합 검색은 고객이 원하는 정보를 정확히 찝어서 제공하지 못하니까 질보다 양으로 승부하는 방식으로 보입니다. 그런면에서 구글코리아가 구글과는 다르게 통합검색 형태의 검색결과를 도입하려는 것도 이해가 갑니다. 한국 사용자에게 익숙한 UI라서 도입하는것만은 아닐거라는 거죠. 구글의 한글 컨텐트 검색 결과는 만족스럽지 못한게 사실이거든요. 여러 사람이 비판하는것처럼 많은 한글 컨텐트가 구글 로봇이 접근 할 수 없도록 닫혀 있어서이기도 하겠고요. 블로그같은 컨텐트는 자체 블로그 서비스를 하는 포털이 정보의 접근이나 방문수 등의 정보를 바로 가져올 수 있기때문에 크롤링을 하는것에 비해 더 유리합니다. 그래서 네이버나 다음이 구글보다는 빠른 호흡의 트랜드 검색 측면에서는 더 좋은 결과를 보여줄 수 있는 것일테고요.

검색결과 UI를 비교해서 어떤게 좋다 나쁘다라고 하는건 마치 엄마가 좋아? 아빠가 좋아? 같은 질문과 같습니다. 네이버는 구글과 다르거든요. 아빠가 엄마랑 다르다고 틀렸다고 하면 안됩니다. 네이버가 구글처럼 검색 결과를 보여줬다면 저는 원하는 결과를 얻기 위해 2배 이상의 시간과 노력을 지불해야 할겁니다. 우리나라 사용자가 촌스러워서 우리나라에서 구글의 점유율이 3%인게 아니라 한글 컨텐트를 찾는데 구글보다는 네이버가 좋으니까 합리적인 선택을 한거라고 생각합니다. (참고 2010 검색엔진 유입률)

그래서 결론은 사용자가 알아서 그때 그때 알아서 잘 골라 써야 한다는 것입니다. 근데 그러면 귀찮으니까 그냥 네이버 쓰는거죠. 

근데 저처럼 일 때문에 외국 사이트에서 전문 정보를 찾을때도 많고 맛집 블로그를 찾을 때도 많으면 어느 한쪽만 쓸 수도 없고 매번 골라서 사용하기도 귀찮습니다. 저같은 사용자를 위해서 통합검색은 좀 더 진화할 필요가 있습니다.

글이 길어져서 통합검색 리디자인 제안 형태는 다음글로 나누겠습니다.

다음 글 . [검색 리디자인] 통합검색 덜어내기 


[참고##검색##]




팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...