지하철 시설정보 UX를 알기 쉽게 고쳐보자
지하철 퀴즈:
'승강장 양쪽-상면식'.
이게 대체 무슨 뜻일까?
우리가 흔히 쓰는 지도 앱을 켜고 ‘지하철 시설 정보’를 열어보자. 위 퀴즈처럼 알쏭-달쏭한 문구가 군데군데 박혀있다. 예를 들자면
승강장 양쪽(상면식)
승강장 중앙(섬식)
승강장 복선 (국유철도)
반대편 이동가능
화장실 개찰구 안쪽
같은 것들이다.
위 단어들 중에 몇 개나 정확하게 이해할 수 있으셨는지? 지난 10년간 인생의 10%를 지하철에 묻어버린 불운한 경기도민조차 도대체 1. '상면식', 2. '섬식', 3. ‘반대편 이동 가능’ 등이 무슨 뜻인지 알아들을 수가 없다. 혹시 테러나 전쟁에 대비한 비상 시설 같은 걸까? 역무원들만 몰래 알아보려는 암호는 아닐까?
전혀 아니다. 사실 이 단어들은 지하철을 타는 사람이라면 모두가 이미 알고 있는 아-주 간단한 개념이다. 정답부터 짧게 설명하자면,
1. 섬식이란?
‘지하철을 탑승하는 승강장’이 섬처럼 (양쪽 철로 가운데) 있어서 ‘양방향 지하철을 모두를 탈 수 있는 구조’를 말하고
2. 상면식이란
열차가 지나가는 철로가 가운데 있고 ‘승강장 2개가 반대편에서 마주 보고 있는(상면) 형태’를 말하며
3. 반대편 이동 가능이란
승객이 교통카드를 찍고 게이트 밖으로 나가지 않아도 반대 방향 열차를 타러 이동할 수 있다는 뜻이다. (곧 정신줄 놓고 목적지를 지나친 사람에서 좋은 역이라는 말)
안타까운 것은 이 간단한 그림이 '섬식', '상면식'이라는 양반탈을 뒤집어쓰거나, '반대편 이동 가능'처럼 매우 짧게 축약되었을 때 단번에 이해하는 사람이 굉장히 드물다는 사실이다. 오직 철도공사 관계자, 철도 덕후, 교통 앱 관리자 정도의 ‘소수 특권층(?)’만이 ‘지하철 전문 용어’에 익숙하다. 사용자가 읽었을 때 ‘아!’라는 반응이 아니라 'Ar?’라는 반응이 나오는 요상한 UX. ‘이것도 알아먹어 보시지!’ 약 올리는 ‘시설 정보’를 고쳐볼 수는 없을까.
오늘은 불어 터진 짜장면처럼 딱딱하고 차가운 지하철 용어의 UX를 유아용 이유식처럼 몽글몽글하고 따뜻하게 만들어보려고 한다. (국내에는 아직 익숙하지 않은 UX라이팅의 좋은 사례라고 생각했다.)
10명의 지하철 앱 이용자를 대상으로 지하철 시설 정보 12개를 보여주고 모든 정보를 정확하게 이해하는지 물었다.
1. 12개 정답자(모두 맞힌 사람)는 딱 3명(30%),
2. 11개-9개 정답자(1-3개 오답)가 5명(50%),
3. 8개 이하 정답자(...)는 2명(20%)이었다.
이 말은 지금의 지하철 시설 정보가 한국 사람의 절반 이상이 모르거나 때려 맞춰야 하는 선무당식 UX라는 것이다. 사용자들은 무당집 쌀알 같은 지하철 안내에 크게 2가지 문제점을 지적했다.
대부분의 사용자(7명/70%)는 섬식, 상면식이라는 용어를 이 화면에서 처음 본다고 답했다. 개념을 설명해주자 그제야 '아 이거는 바다에 떠있는 섬이라는 뜻이고... 상면이란 건 서로 마주 본다, 뭐 이런 뜻인거죠?'라며 이해하는 식이었다. ‘승강장 중앙’과 ‘승강장 양쪽’을 정반대로 이해하는 사용자도 둘이나 있었다. 특히 지하철을 가끔 탄다는 중년 남성은 '승강장 양쪽'이란 ‘양방향 모두 탈 수 있는 승강장’ 아니냐는, 묘하게 설득되는 명논리를 펼쳤다. (원래는 승강장이 양쪽에 따로따로 있다는 뜻이다)
추가적으로 ‘섬식’, ‘상면식’만큼은 아니지만 ‘개찰구’나 ‘승강장’도 결코 말랑말랑한 용어가 아니다. 두 단어는 일상생활에서 사용 빈도가 매우 낮기 때문이다. 우리가 매일 쓰는 일상어는 ‘개찰구’ 대신 '카드 찍는데', ‘승강장’ 대신 '지하철 타는데' 정도다. 사람들은 약속 시간에 늦은 고얀 친구 놈을 추궁할 때 '승강장 나오셔서 개찰구를 지나셨습니까?'라고 묻는 대신 '야 열차 내려서 카드 찍고 나왔냐?'라고 말한다.
이처럼 사람들에게 '승강장'과 '개찰구'라는 말이 익숙하지 않다 보니 요새 몇 가지 교통 앱은 ‘개찰구 대신 게이트’, ‘승강장 대신 플랫폼’이라는 영어 단어를 대체재로 사용한다. 하지만 이 해결책도 꼭 좋은 점만 있는 것은 아니다. 우리말 대신 영어 단어를 쓰는 때는 50대나 60대 고령층 사용자의 이해도가 후두둑 떨어지기 때문이다.
아래 그려놓은 아이콘은 대중교통 앱으로 유명한 A사, B사, C사의 승강장 정보 아이콘이다. 우측의 설명을 싹 지우고 아이콘만 띡하고 준다면 무슨 뜻인지 알아볼 수 있을까? A사의 경우 P라고만 적혀있는 아이콘을 사용하는데 이 아이콘은 사용자에게 아무런 정보도 전달하지 못한다. 더욱이 사람들에게 익숙한 P란 플랫폼(Platform)이 아니라 주차장(Parking)이기 때문에 오히려 아이콘만 단독으로 있다면 ‘주차장이 있는 역’으로 오인할 수 있다.
B사나 C사의 앱도 마찬가지다. B사의 경우 곤돌라 형태의 네모에 P라는 글자가 박혀있고, C사의 아이콘은 문이 좌우로 열린다는 그림이 그려져 있다. 둘 다 ‘승강장’이라는 장소는 표현하고 있지만, 역마다 다른 '승강장의 형태'를 직관적으로 알려주지는 못한다. 약간만 더 고민하면 개별 아이콘을 지금보다 조금 개선할 수 있지 않을까 생각했다.
이렇게 알쏭달쏭한 지하철 정보를 고치기 위해서는 우선 '누가', '어떤 상황에서' 이 정보를 찾아보는지 알아야 한다. 다시 한번 10명의 사람에게 '지하철 상세정보를 언제 보시나요?' 물었다.
1. 4명의 사용자는 처음 가보는 지하철 역의 내부를 알아볼 때,
2. 5명의 사용자는 지하철을 타다가 화장실 신호가 왔거나, 유튜브를 보다 방향을 지나쳤을 때 헐레벌떡 확인한다고 답했다.
이 답변을 한마디로 줄이자면, 지하철 상세 정보는, 1. 해당 역을 잘 모르고 2. 급한 사정이 있는 승객에게 유용해야 한다. 매일 출퇴근을 하며 눈감고도 다닐 수 있는 역의 상세 정보를 찾아보는 바보는 없다. 초행길, 급한 사람을 위한 상세정보는 초등학교 입학식의 운동장에서 재잘대는 신입생을 대하듯 한껏 친절하고 쉬워야 한다.
지하철 상세 정보를 사용자 중심으로 고치는 데는 좋은 요령이 있다. 바로 ‘Yes You Can!’. 이 문구는 얼핏 오바마 대통령의 선거운동 구호처럼 보이지만, 실은 사용자 중심 UX 라이팅에서 유용한 트릭이다. UX 라이팅은 한정된 글자 안에서 물건 혹은 장소 '자체'가 어떻다는 것을 구구절절 늘어놓지 않는다. 대신 사용자, 곧 ‘당신’이 요 물건이나 장소를 통해 ‘어떤 일을 할 수 있는지’ 가능한 한 쉽고 재미있게 알려줘야 한다.
예를 들어 디자인 강박증에 시달리고 있는 애플의 Face ID 매뉴얼을 살펴보자. 애플은 매 단락마다 첫 번째 문장의 대부분을 ’You can’이라는 말로 시작한다. Face ID를 '기능 중심'이 아니라 ‘사용자 중심’으로 설명하고 있는 것이다.
‘You can use ID to authenticate (인증) …’
‘You can use ID to sign in (로그인) …’
‘You can use ID to autofill (자동완성) …’
애플은 매뉴얼에서 사용자가 할 수 있는 ‘행동’, 곧 [인증, 로그인, 자동완성]을 안내한다.
사과의 애증 어린 짝꿍, 삼성도 마찬가지다. 갤럭시 노트10의 매뉴얼을 보면 주요 기능의 경우 ‘You can’이라는 말을 사용한다. 노트 옵션을 설명하는 세문장 모두
‘You can edit(편집), sort(분류)'
'You can manage(관리) …’
‘You can view(조회) …’
라는 말로 시작하고 있다. 이 역시 제품 자체를 설명하기보다 제품을 통해 사용자가 할 수 있는 ‘행동’을 말하고 싶은 것이다. 'You can'을 우리말로 고치면 ‘… 할 수 있습니다.’ 혹은 ‘… 가능’ 정도로 바꾸면 된다.
따라서 우리의 지하철 UX도 사용자 중심의 문장으로 새롭게 작성해 볼 수 있다. 현재 상태인 ‘화장실 게이트 안쪽’은 사용자(당신)가 아니라 시설(화장실)을 주어로 만든 문장이다. 이 문장의 주어를 '사용자’로 바꾸면 ‘게이트 안쪽에서 화장실 갈 수 있음’이라는 쉬운 말로 순화된다. 또 현재 ‘승강장 중앙’이라는 말은 ‘승강장’을 주어로 삼고 있지만, ‘중앙 승강장에서 양방향 탑승 가능’이라고 쓰면 ‘사용자’인 ‘당신’이 주어가 된다. 이런 식으로 모든 문장을 고쳐보면 아래와 같은 수정안이 나온다.
혹자는 ‘그렇게 바꾸면 말이 너무 길어지지 않나요?’라고 똘망똘망한 반문을 할 수 있다. 매우 일리 있는 의견이다. UX 디자이너는 한정된 모바일 공간에서 경제적으로 정보를 전달해야 하기 때문에 말을 ‘짧고 명료하게’ 쓰는 것도 굉장히 중요하다. 특히 말이 길어질수록 개발자나 디자이너가 ‘기술적’, ‘미적’인 이유로 반대하는 경우가 생긴다. 하지만 ‘짧고 못 알아듣는 말’보다 ‘길더라도 쉬운 말’이 훨씬 좋은 UX가 아닐까.
'말'에서는 주어를 바꿨다면, '아이콘'에서는 의미를 더할 수 있다. 단순히 ‘승강장’이 아니라 ‘승강장의 형태’를 아이콘에 녹여볼 수 있다. 현재 아이콘은 앞서 말했든 [A사: 영어 P] , [B사: 곤돌라 P], [C사: 좌우 문열림] 형태로 간단하게 표시되어 있다. 이런 아이콘을 조금 더 자세하게 바꾸면 다음과 같다.
주된 변경사항은
1. 승강장 영역과 열차 영역의 색깔을 흰색과 회색으로 분리했고
2. 화살표는 사용자의 이동방향을 나타냈다는 것이다.
이렇게 아이콘을 바꾸면
1. 승강장이 가운데 있는 경우 사용자는 양방향으로 탈 수 있고
2. 승강장이 양쪽에 따로 있는 경우 사용자가 한 방향으로만 탈 수 있다는
안내를 그림만으로 전달할 수 있다. 승강장이 2층이건, 3층이건, 꿀꽈배기 모양이건, 형태 자체는 전혀 중요하지 않다. 정말 전달해야 하는 정보는 그 승강장으로 갔을 때 사용자가 어떤 행동을 할 수 있는지 알려주는 것이다. 새로운 아이콘은 앞서 사용자를 중심으로 변경한 설명과도 잘 맞아떨어진다. (다만 그래픽 디자이너가 조금 더 손을 봐주면 훨씬 좋은 아이콘이 탄생할 것 같다.)
추가적으로 어려운 용어 옆에 조그마한 물음표 팝업 배지를 달아놓을 수도 있다. 배지를 누르면 상세 정보가 짜잔 팝업으로 안내되는 식. 이런 팝업 배지는 보통
1. 처음 보는 사람에게는 어려운 용어지만
2. 이미 아는 사람에게는 반복할 필요가 없을 때 사용한다.
예를 들어 쿠팡의 사례를 보자. 쿠팡에서 물건을 사면 제품 가격 아래 '로켓 와우'라는 표시와 물음표 팝업 배지가 달려있다. 여기서 로켓 와우란 일종의 배송 구독 서비스인데 쉽게 말해 한 달에 2,900원을 내면 모든 택배비가 무료인 제도다. 이런 제도는 모르는 사용자에게는 반드시 알려야 하지만 이미 알고 있는 사람에게는 굳이 반복할 필요가 없는 정보이기도 하다. 영리한 쿠팡은 물음표 팝업을 사용하여
1. 이미 아는 사람에게는 경제적인 화면을
2. 모르는 사람에게는 자세한 정보를 동시에 제공한다.
예전에 직접 설계했던 헌혈 앱 ‘레드커넥트’에서도 비슷한 문제가 있었다. 헌혈을 예약하는 사람에게 헌혈 종류(전혈, 혈장, 혈소판)를 알려줘야 하는데 들어가는 설명이 구구절절 길어졌던 것이다. 한 번이라도 헌혈을 해봤던 사람은 간호사 선생님께 헌혈 교육을 받기 때문에 굳이 다시 알려줄 필요가 없는 정보였다. 이때는 헌혈 종류 선택 섹션에서 물음표 버튼을 넣는 식으로 상세 정보를 숨겨 놓았다.
앞서 두 사례에서 말했던 것과 똑같은 원칙을 지하철 시설정보에 팝업 배지를 적용해보면 아래와 같은 그림이 나온다. 팝업 화면에서는 공간의 제약이 적기 때문에 옆자리 친구에게 설명하듯 상세한 안내가 가능하다. 이렇게 하면 숙련 사용자는 간단한 화면을 봐서 좋고, 초보 사용자는 친절한 안내문이 예시까지 들며 알려주니 좋다.
'왜 이렇게 작은데 집착해요, 변태예요?' 하고 물어볼 수 있다. 하지만 서울에서만 연간 28억 명의 사람이 지하철을 탄다. 이 사람들 중에 0.01%만 지하철 시설 정보를 확인하더라도 약 30만 명 사람들이 앱 UX의 영향을 받는다. 이처럼 UX라이팅은 '한번 하고 사라지는 말'이 아니라, '수천 수만번 반복되는 말'이기 때문에 쉬운 말, 재미있는 말, 경제적인 말로 다듬는 것이 굉장히 중요하다.
물론 오늘 제시한 UX가 결코 완벽한 대안이라고는 할 수 없다.
1. 우선 기존보다 말이 길어졌고
2. 아이콘의 그래픽도 개선할 여지가 충분하다.
그렇지만 고민하는 사람들이 계속 의견을 내고 그 의견이 쌓일수록 프로덕트가 좋아진다고 생각한다. 지금 우리가 당연하게 쓰고 있는 수많은 '편한 것들'도 결국 누군가 먼저 고민하고 지어온 결과이니까. 글을 다 읽어주신 지하철 고수 분이라면 정답을 맞히는 걸 넘어서 더 쉽고 재미있는 UX용어를 추천해주셨으면 좋겠다.