좋은 UX, 기꺼이 사용자의 도구가 되어 주다
[PM 북클럽] 캐치테이블의 페르소나, 유저 저니, 그리고 UX
가랑비에 옷 젖듯 스며드는
미식생활 필수 앱,
캐치테이블의 UX
서론:
PM 북클럽을 재가동하며
코드스테이츠 PMB 10기는 올해 4월 말 막을 내렸지만, 그럼에도 아직까지 활발하게 소통하고 있는 인연들이 있다. 2인 팀 프로젝트를 함께 했던 ㅇㄹ님, 위클리 과제 멘토였던 ㅅㅇ님, 그리고 PM 북클럽에 속해 있던 여섯 명의 동기들이다.
북클럽 멤버들과는 얼마 전부터 오프라인 모임을 시작했다. 온라인 교육으로만 만났다보니 처음에는 신기함이 컸다. (약속 장소에 모여들면 하나같이 말없이 웃었다. 아마 다들 나와 비슷한 생각이었겠지... '아니, 현실에 존재하는 분이셨나요. 다들? ㅋㅋㅋ')
가장 최근의 오프라인 모임에서는 PMB가 끝남과 동시에 막을 내렸던 북클럽을 재개하면 어떻겠느냐는 의견이 오갔다. 마침 다들 취업 준비 중이거나 신입으로 취직을 성공한 상태였고, PM 관련 독서의 중요성을 느끼고 있었다. 이왕 하는 거 다시 함께 하면 좋겠다는 마음에 PM 북클럽이 약 3개월 만에 다시 시작되었다.
북클럽 멤버들의 합의를 거쳐 꾸려진 북클럽 노션의 메인 페이지는 위와 같다. 모임 규칙을 간단히 정리하자면 다음과 같다.
선정한 도서의 분량을 1주 단위로 쪼갠다.
각자 독서를 마치고, 매주 일요일 자정까지 블로그에 독서한 내용을 바탕으로 포스팅을 올린다.
2주에 한 번씩, 일요일 오전 10시부터 11시까지 구글 밋으로 실시간 토론을 진행한다.
포스팅과 실시간 토론에 불참할 때는 모임비 5천 원을 지불한다.
모티베이션을 위해 돈을 걷기로 했는데, 벌금이라는 네이밍이 조금 가슴 아파서 대신 모임비라고 부르기로 하였다. 모인 모임비는 오프라인 모임 식사비로 사용할 듯하다. (모인, 모임비, 모임... 수집욕이나 저장욕이 별달리 강한 건 아니지만서도, 난 어딜 가나 무언가를 한 데 그러모으는 걸 좋아하는 것 같기도 하다.)
다들 혼자서 독서하고 공부하는 데 어려움을 느끼고 있었는지, 다양한 도서를 추천했다. 그중에서도 첫 번째 책으로는 UX의 기초가 되는 사용성 원칙을 제시하는 필독서, 스티브 크록, 『(사용자를) 생각하게 하지 마!』를 읽게 됐다. 선정한 이유는 멤버 대부분이 UX에 대한 공부가 부족하다고 느끼고 있었기 때문이다. 나 역시 웹·앱의 사용자에게 더더욱 깊이 공감하여 그들의 문제를 제대로 푸는 PM으로 나아가기 위해 이 책을 읽고 싶던 참이었다.
이 책은 2000년에 처음 나왔고, 2006년과 2013년에 걸쳐 개정된 만큼 -인터넷 세상 기준- 고전적인 내용을 담고 있다. 따라서 저자는 사이트, 웹 등으로 표기한 부분을 웹·앱의 개념으로 이해하고 표기하여 좀 더 폭 넓고 동시대적인 공부를 도모하려고 한다.
1. 화면을 '읽는' 사용자는 없다
조명을 제대로 달면
사용자의 물음표가 사라진다
기획자는 사용자의 물음표를 사라지게 해야 한다. 설명이 없어도 화면을 보자마자 "아. 내가 이 버튼을 눌러야 하는구나"라는 것을 알 수 있게끔 말이다. 다르게 말하면 기획자는 서비스를 최대한 자명하게 만들기 위해 노력해야 한다.
물론 웹사이트를 명확하게 만들지 않았다고 해서 사용자가 곧바로 이탈하여 경쟁사로 넘어간다는 것은 아니다. 서비스를 자명하게 만드는 일은 한마디로 가게에 적절한 조명을 다는 일에 비유할 수 있다. 조명이 적절하면 모든 것이 더 좋아 보인다. 사소한 부분에 대해 고민하지 않아도 되는 웹·앱에 접속하는 데 사용자는 별다른 스트레스를 느끼지 않는다.
반대로, 사용자가 웹·앱 상에서 자주 하는 행위에 매번 주의가 분산된다면 모여서 커다란 결함이 될 수 있다. 예컨대 귀엽고 참신한 이름, 마케팅에서 비롯된 이름, 특정 회사에서만 사용하는 이름, 익숙하지 않은 기술적인 이름들을 웹·앱의 특정 요소에 적용하려고 할 때 이런 문제가 발생할 수 있다.
도구로서의
서비스
서비스는 사용자가 다른 업무를 완수하기 위한 도구이다. 이는 특정 상황에서 고객이 해결하고자 하는 문제에 포커싱한 고객의 문제 접근 방법인 JTBD(Jobs To be Done)과 밀접한 연관이 있다. UX 관점에서도 서비스를 기획·운영·개선할 때, 우리가 고객에게 제공하고자 하는 가치 대신, "고객이 우리 서비스를 통해 해결하고자 하는 과업이 무엇인가?"라는 질문에 집중해야 한다.
출처=스티브 크록, 『(사용자를) 생각하게 하지 마!』따라서 사용자는 웹·앱의 화면을 읽지 않는다. 훑어본다. 자신의 과업을 빠르게, 제대로 처리하길 원하여 서비스에 접속했기 때문이다. 책에 삽입된 위 사진처럼, 사용자는 다른 영역에는 눈길을 주지 않는다.
본인이 웹·앱 상에서 현재 진행 중인 작업
본인이 관심을 기울이는 분야와 연관된 단어나 구절
본인의 이름 또는 신경계에 각인된 단어 (ex. 무료, 세일, 섹스 등)
위와 같은 요소들에 집중할 뿐, 그밖의 모든 영역은 블러 처리 되어 보일 뿐이다. 사용자는 서비스가 잘 돌아가기만 한다면 그 작동방식나 제작자들의 의도에 대해서는 별로 궁금해하지 않는다.
따라서 기획자의 의도와는 전혀 다른 방향으로 서비스를 이용할 수 있고, 그러면서도 별다른 문제점을 느끼지 않는 것이 당연하다. <왕자와 거지>에서 왕자 역할을 대신하던 거지가 옥새의 쓰임새를 잘 몰라 호두를 내리쳐 까는 용도로 사용한 것처럼.
소방대장과
서비스 사용자의
공통점과 차이점
사용자가 웹·앱을 꼼꼼히 살펴보지 않는 또다른 이유가 있다. 사용자는 서비스에서 최선의 선택을 내리기 위해 노력하지 않는다. 대부분의 사용자는 합리적이라고 생각되는 첫 번째 안을 선택할 뿐이다.
한 실험에서 시간의 압박, 불투명한 목표, 제한된 정보, 변화하는 상황에서 막중한 책임이 의사결정을 내려야 하는 사람들(소방관, 비행사, 체스 게임 전문가, 원자력 발전소 직원 등)이 의사결정을 하는 과정을 관찰했다. 예상과는 달리, 이들은 여러 가지 선택지를 신중하고 천천히 비교하는 과정, 즉 합리적 의사결정 과정을 거치지 않았다.
일례로, 한 소방대장은 머리에 떠오른 첫 번째 합리적인 계획을 채택한 후 그 계획에서 발생할 가능성이 있는 문제에 대해 머릿속으로 빠르게 검토했다. 그리고 별다른 문제가 발견되지 않으면 바로 행동으로 옮겼다.
웹·앱의 사용자도 이 소방대장의 상황과 크게 다르지 않다고 여기면 좋다. 사용자들은 시간에 쫓긴다. 선택지를 비교하더라도 결과가 나아지리라는 보장이 없다. 심지어는 위에 소개된 직업군들과는 달리, 자신들의 추측이 틀렸다고 해서 큰 불이익이 발생하지도 않는다. (앱에서 버튼 하나 잘못 눌렀다고 해도 뒤로 가기를 눌러야 한다는 약간의 불편함만이 뒤따를 뿐이다.) 또, 가끔은 추측하는 행위 자체가 사용자들에게 재미를 불러일으키기도 한다.
군더더기 없는
UX 라이팅
건강한 문체는 간결하다. 문장에 불필요한 단어가 없어야 하고 문단에는 불필요한 문장이 없어야 한다. 그림에 불필요한 선이 없어야 하고 기계에 불필요한 부품이 없어야 하는 것과 같은 이치다.
E. B. 화이트가 저서 <The Elements of Style>에서 소개한 일곱 가지 글쓰기 원칙 중 하나이다. 앞서 우리는 사용자는 수행하고자 하는 과업이 확실하고, 최선의 선택을 내리기 위해 노력하지 않는다는 사실을 확인했다.
이들을 위하여 불필요한 단어는 생략해야 한다. 사용자에게는 잡담할 시간이 없다. 사교적인 활동의 일환으로서 작성하는 문장은 생략되어야 한다. 사용자들은 바로 본론으로 들어가길 원하기 때문이다.
(다만 이 책에선 UX 라이팅에 관한 내용은 짧게 축약되어 있어, 개인적으로는 다른 책을 통해 제대로 파보고 싶은 마음이다.)
2. 사용자의 물음표를 제거하는 서비스
그렇다면 내가 사용하는 국내 서비스 중, 책에 소개된 표현대로 '사용자의 물음표를 제거하는 서비스'를 선정하여 살펴 보려고 한다. 서비스를 고르고 평가할 때는 다음과 같은 사항을 기준으로 삼았다.
최대한 자명하게 구성되었는가?
사용자가 과업을 수행하는 데 불편함이 없는가?
사용자에게 최소한의 선택지를 제공하는가?
그리하여 내가 선택한 서비스는 레스토랑 예약 관리 솔루션 캐치테이블이다. 캐치테이블은 '미식생활 필수 앱'이라는 특장점을 앞세우며 요식업 O2O 서비스들 사이에서 포지셔닝에 성공했다.
나 또한 평소에 자주 사용하는 앱이라고 볼 수는 없지만, "부모님 모시고 좋은 식당 갈 건데, 어디서 찾지?", "연인과의 기념일인데 멋진 식당들 모아볼 수 없나?"라는 고민이 들 때마다 캐치테이블을 켠다. 다른 앱을 켤 고민조차 하지 않는다. 캐치테이블 만큼 뾰족하게 '미식'이라는 한 지점을 타겟팅하고 있는 여타 요식업 O2O 서비스가 또 없기 때문이다.
네이버페이 및 네이버지도 등 자체 서비스간의 연결성을 강화한 네이버 예약,
'줄서기'라는 행위의 수고로움을 덜어주는 테이블링,
장소 기준으로 솔직한 맛집 리뷰를 제공한 망고플레이트.
이와 같이 식당의 오너 및 방문객 양쪽을 타겟으로 한 B2B2C 서비스들이 각자의 자리를 잡아가고 있는 상황에서, 캐치테이블은 파인 다이닝이라는 독자적인 키워드를 중심으로 필터링 검색, 큐레이션 콘텐츠, 영상 리뷰 등 다양한 시도를 펼치며 성장하고 있다. (이 기능들을 자세히 파보는 건 이후 포스팅에서 진행해봐도 재밌을 것 같다.)
'미식'이라는 비교적 비일상적인 행위를 위한 서비스인 만큼 DAU가 유의미한 지표가 되긴 어려울 듯하다. 그러나 고객이 특정 상황에서 반드시 떠올리게 되는 유일한 앱이므로, 캐치테이블은 '좋은 서비스'의 조건을 충족했다고 볼 수 있다.
이렇듯 내 머릿속에 캐치테이블이 1순위로 떠오르는 이유는, 앞서 조명을 <제대로 달면 사용자의 물음표가 사라진다> 파트에서 살펴봤다시피, "사소한 부분에 대해 고민하지 않아도 되는 웹·앱에 접속하는 데 사용자는 별다른 스트레스를 느끼지 않는다"라는 조건에 해당됐기 때문이 아닐까?
최근의 사용 경험에서도 "UX가 좋다"라고 느꼈던 앱인 만큼, 오늘 <(사용자를) 생각하게 하지 마!>에서 학습한 내용을 적용하여 캐치테이블의 페르소나를 상정하고, 유저 저니를 간단하게나마 따라가보려고 한다.
캐치테이블의
유저 저니, 그리고 UX
[페르소나] 연인의 생일 기념 저녁 식사를 예약하려고 하는 햄스터씨. 햄스터씨는 20대 대학생으로, 예산이 넉넉하지 않아 먼저 장소 기준으로 식당들을 살펴보고, 이들을 가격순으로 나열하여 괜찮은 식당을 예약하려고 한다. 장소는 이미 수제 케이크를 픽업할 제과점이 있는 성수로 정해 두었다. 선호하는 메뉴는 스테이크. 이밖의 사항은 여건에 따라 조율할 의사가 있다.
[불변 조건] 장소(성수) / 메뉴 대분류(스테이크) / 가격(1-3만원대)
[가변 조건] 메뉴 소분류(소고기, 돼지고기, 연어 등) / 분위기(조용한, 모던한 등)
* 페르소나 입장에서 눈여겨보지 않는 영역은 블러 처리, 주목하는 영역은 노란 색상 처리했습니다.
메인 홈
여러 버튼과 영역이 존재하지만, JTBD(Jobs to Be Done)이 분명한 햄스터씨는 다른 곳은 눈여겨보지 않고 화면 중앙 영역의 '성수'라는 글자에 이끌려 [성수] 버튼을 누른다.
검색 결과 : [성수]
검색 결과를 훑어보던 햄스터씨는 가격을 기준으로 필터링하고 싶다는 니즈를 느낀다. 이에 상단 영역의 캐러샐(carousel)을 움직여 '가격'이라는 필터링 기준을 발견하고자 한다.
필터링 : [1인당 가격]
[가격] 버튼을 눌러 [1인당 가격] 페이지로 이동한 햄스터씨. 0원~40만원 범위 내에서 두 개의 원을 움직여 가격 범위를 조절할 수 있다는 사실을 인식한다. 그러나 성수에 위치한 식당들의 가격 분포가 어떻게 되어 있는지 확인하기 어려워 자신이 선택한 0만원~3만원이라는 범위가 적절한 것인지 의문을 가진다. 이 상태에서 [적용] 버튼을 선택한다.
검색 결과 : [성수], [0-3만원]
약간의 우려가 있었지만, 어쨌거나 자신이 기대하던 검색 결과를 확인한 햄스터씨는 만족한다. 아까 전, 캐러샐을 움직여 [가격] 버튼을 찾았던 것과 같은 방법으로 [음식] 버튼을 발견하여 '스테이크'라는 특정 메뉴로 필터링을 걸고자 한다.
캐치테이블의
유저 저니를 따라가며
UX를 살피다
이렇게 햄스터씨는 연인의 생일 전후에 성수에 위치한 저가격대의 레스토랑에서 식사 예약을 할 수 있었을 것이다. 이후 과정까지 담아내면 좋겠지만, 앞서 언급했다시피 다른 포스팅에서 연거푸 캐치테이블이라는 좋은 서비스를 분석할 의향이 있으므로 오늘은 초반 단계까지만 다루기로 했다.
최대한 자명하게 구성되었는가?
사용자가 과업을 수행하는 데 불편함이 없는가?
사용자에게 최소한의 선택지를 제공하는가?
그렇다면 점검하자. 맨 처음 내세웠던 '사용자의 물음표를 제거하는 서비스'의 조건을 캐치테이블은 얼마나 만족할까? (오늘 분석했던 메인 홈, 검색 결과, 필터링 화면에 한하여)
최대한 자명하게 구성되었는가?
캐치테이블은 메인 홈 최상단에는 서비스 입장에서 사용자에게 보이고 싶은 콘텐츠를 소개하는 배너를 배치했다. 이 영역의 크기가 불필요할 만큼 크다고 판단할 수도 있겠으나, 사용자의 관심 바깥의 이벤트, 광고 등을 게재하는 영역이 아닌, 사용자에게 양질의 정보를 제공하기 위한 목적으로 직접 구성한 큐레이션 콘텐츠를 때마다 새롭게 선보이는 영역이다. 따라서 '미식을 위한 레스토랑 탐색'이라는 UX에 오히려 도움을 준다고 볼 수 있다.
또한, 그 아래로 직관적인 아이콘이 그려진 버튼을 배치했다. [오마카세], [콜키지프리], [회식예약]과 같은 이름의 버튼을 누르면 테마에 맞는 식당을 둘러볼 수 있는 페이지로 바로 이동할 수 있다. 그 아래로는 [어디로 가시나요?] 영역을 통해 페르소나였던 햄스터씨처럼 특정 장소를 기준으로 레스토랑을 탐색하고 싶은 사용자들에게 자명한 화면을 제공했다고 볼 수 있다.
사용자가 과업을 수행하는 데 불편함이 없는가?
이 질문에 대해서는 햄스터씨가 사용했던 캐치테이블의 검색 및 필터링 기능을 꼽을 수 있겠다. 햄스터씨는 레스토랑을 탐색하는 데 있어 불변 조건과 가변 조건이 확실했던 페르소나이다. 따라서 자신이 캐치테이블이라는 앱을 켠 JTBD가 적확했고, 해당 목적을 나침반 삼아 앱을 탐색하면서 큰 불편감을 느끼지 않았다.
사용자에게 최소한의 선택지를 제공하는가?
캐치테이블은 레스토랑을 탐색하고 예약하는 데 주목적이 있는 앱이다. 그렇기 때문에 사용자에게 최대한 많은 선택지를 제공하는 것이 앱의 퀄리티를 결정 짓는 대목이 된다. 따라서 "캐치테이블 같은 앱이 최소한의 선택지를 제공해야 하는 이유가 있나?"라는 의문이 들 수도 있다.
하지만 결국 사용자가 최종적으로 선택하는 레스토랑은 단 한 곳이다. 사용자에게 가능한 풍부한 선택지를 제공하여 조건에 맞는 결정을 내릴 수 있도록 하는 것도 중요하지만, 사용자가 최종적으로 결정을 할 때 혼란을 야기하는 화면을 구성해선 안 된다.
이를 위해 캐치테이블에서는 검색 결과 화면에 식당의 사진, 한줄평, 별점 정보를 제공한다. 이 정보를 바탕으로 사용자는 마음에 드는 식당을 북마크하고, 이들끼리 따로 비교하며 선택의 어려움을 줄일 수 있다.
PM의 시선
한 스쿱
이렇게 <(사용자를)생각하게 하지 마!>의 챕터 5까지 읽은 후, 캐치테이블의 UX를 분석하는 포스팅을 마무리지으려고 한다. 다음 포스팅은 챕터 6 이후를 읽고 난 소감이 될 듯하다.
포스팅의 막바지에 앞으로는 이렇게 PM의 시선 한 스쿱이라는 코너를 배치하려고 한다. (왜 한 입, 한 스푼, 한 젓가락도 아닌 한 스쿱이냐면... 스쿱이라는 단위가 주는 아기자기함에 끌렸다.) 이 코너에서는 앞서 분석한 서비스에 대해 "내가 만약 저 서비스의 PM이었다면?"이라는 관점으로 접근하려고 한다. 그에 따라 제안점, 보완점, 아이디어 등등을 (비록 사소할지라도) 제시하는 코너가 될 듯하다.
이번 캐치테이블에 대해서는 [1인당 가격] 화면에서 개선할 수 있는 부분을 찾아보았다. 아까 햄스터씨의 시선을 따라가면서도 잠깐 언급했었던 부분인데, 바로 가격 분포를 파악할 수 있는 UI를 제공했다면 좋을 것 같다는 의견이다.
가격 UI, 어떻게 구성하면 좋을까?
지그재그, 에어비앤비, 브랜디, 아이디어스
이와 같은 가격 그래프를 활용하고 있는 대표적인 서비스로는 여성 쇼핑 앱 지그재그가 있다. 여행 및 숙박 플랫폼 에어비앤비도 유사한 UI를 제공한다. 지그재그에는 2022년 2월 기준 6500여 개의 고객사가 등록되어 있다. 에어비앤비는 2020년 기준 전 세계에 700만 개 이상의 숙박 시설을 확보하고 있다. 이들이 중개하는 수많은 상품 중 사용자가 구매하길 원하는 상품만을 콕 집어 찾아내도록 돕기 위해선 검색 기능이 무엇보다도 중요할 테다.
지그재그의 경우 의류(셔츠, 바지, 신발, 악세서리 등)마다, 에어비앤비의 경우 숙소(위치, 시기, 품질 등)마다 가격대가 천차만별일 것이므로 가격 분포를 위와 같은 그래프를 통해 효과적으로 가시화한 것으로 보인다.
그러나 한편으로는 위 사진처럼 가격 UI를 구성하는 경우도 있었다. 이들 서비스가 위와 같은 가격 UI를 제공하는 이유가 무엇일지 궁금해졌다.
브랜디의 경우, [원피스] 검색 결과에서 [필터] 버튼을 선택하면 해당 모달에서 [가격대] 영역을 통해 원하는 가격대를 조정할 수 있도록 했다. 막대 위의 원을 움직이니 1,000원 단위로 가격이 조절되었다. 그런데 원피스를 찾으려는 고객의 입장에서 천 원, 이천 원, 삼천 원짜리 원피스에 대한 정보가 얼마나 필요할지는 모르겠다. 아무리 생각해도 둘만 놓고 비교했을 땐 지그재그의 가격 UI가 UX 측면에서는 더 유리한 듯하다.
따라서 지그재그에 비해 효과적인 가격 UI라고는 생각되지 않았으나, 분포도를 표현하는 UI를 개발하고 디자인하는 데 많은 리소스가 투입될 것이 인턴 생활을 마친 지금은 너무나도 실감되어(...) 브랜디가 이와 같은 UI를 고수하는 데는 내부적인 사정이 얽혀 있을 수도 있을 거라 예상된다.
아이디어스는 위와 같은 사이드바를 통해 가격대를 체크 표시로 선택할 수 있도록 했다. 검색 키워드를 달리 하면 가격대의 선택지도 변화했다.
이를 통해 유추할 수 있는 것은, 아이디어스는 UI상의 복잡도를 덜기 위해 사이드바를 선택하여 각종 메뉴를 넣어두었고, 지그재그나 에어비앤비 같은 가격 그래프를 사이드바에서 표현하기는 어려움이 크므로 위와 같은 체크 박스 형식을 택한 게 아닐까 싶다.
코드스테이츠 PMB가 끝난 후, 이렇게 본격적으로 서비스를 분석하고 공부하긴 오랜만이다. 확실히 실무를 3개월 경험하고 나니 많은 것들이 달라 보인다.
특히, 'PM의 시선'에만 몰두하여 서비스를 바라봤던 지난 날들과는 달리, 개발자, 디자이너, 그리고 수많은 유관 부서들의 입장까지 고려할 줄 아는 '진짜 PM의 시선'이 조금씩 길러지는 듯하다. 아직 부족하지만, 좋은 서비스들을 많이 보다 보면 자연스레 견문이 넓어질 거라 믿는다.
