brunch

매거진 실전 UI UX

You can make anything
by writing

C.S.Lewis

by 서점직원 Jul 18. 2022

실전 UI/UX - 피플카 고객경험 개선하기

늦은밤. 오늘도 격무와 야근에 시달린 서점군.

일과를 마치고 집에 가는 방법을 고민하다가 문득 낮에 본 광고 문구 하나를 떠올립니다.


피플카 리턴프리, 가입 시 조건없이 50% 할인


"좋았어. 오늘은 지하철 말고 차를 빌려 퇴근하는거야!"


오늘은 차가운 도시남자, 쏘카 패스포트 회원이자 오우너 드라이버, 카세어링과 렌트카를 매우 애용하는 서점군의 피플카 이용기입니다.




모호한 회원가입


신규 가입 혜택을 받기 위해 회원가입을 시작한 서점군.

정보입력 페이지에서 뭔가 이상함을 느낍니다.


"회원가입이 왜 이렇게 복잡하지?"


회원가입이 복잡해보이는 이유.

피플카의 회원가입 페이지를 한번 자세히 살펴볼까요?



이 회원정보 입력 페이지에는 두가지 문제점이 있는데요. 다른 회원가입 페이지와 비교로 어떤 문제점이 있는지 알아보도록 하겠습니다.


타 앱들과 비교해보면 피플카는 레이블텍스트 박스의 영역 구분이 명확하지 않아 복잡해 보이는 반면 다른 앱들은 시각적으로 레이블텍스트 박스의 영역 구분이 명확해 영역 구분이 잘 되는 편입니다.


피플카와 다른 앱들간의 차이가 뭘까요?

답은 폰트 크기명도 대비에 있습니다.


피플카의 회원가입 레이블과 텍스트 박스를 비교해보면 폰트 컬러도 비슷하고 크기도 비슷한것을 알 수 있습니다. 폰트 크기가 비슷한데 컬러까지 비슷하니 레이블과 텍스트 박스 요소가 시각적으로 잘 구분되지 않는 거죠.


시각적으로 잘 구분되려면 어떻게 해야 될까? 간단합니다. 레이블과 텍스트 박스 요소의 명도차를 크게 가져가면 됩니다.


위 이미지와 같은 형식으로 레이블의 폰트 크기를 줄이고 컬러를 변경하면 레이블과 텍스트 박스 구분이 명확해집니다. 보너스로 폰트크기가 작아지면 단락 간격도 넓어져 콘텐츠 구분이 더 명확해지게 됩니다.


회원가입 페이지에서 개선해야 될 부분이 하나 더 있는데요. 바로 유효성 검사 부분입니다.


보통 다른 서비스들은 내용 입력 전에 유효성 메세지를 표시하지 않다가 해당 입력 영역에 진입하는 순간 (Active 상태) 유효성 검사 문구를 표시하는데 피플카는 특이하게 페이지 첫 진입시부터 모든 유효성 문구를 표시합니다. 유효성 검사 문구를 모두 표시하니 페이지가 전체적으로 지저분해보이게 되죠. 그럼 이걸 어떻게 바꿔야 되냐? 텍스트 박스 활성화 상태 (Active 상태)일때만 유효성 검사 및 문구를 표시하거나 유효한 입력 정보일 때는 유효성 검사 메세지를 표시하지 않게 하면 됩니다.


이렇게 말입니다.




당신은 (준)비되지 않은 (회원)입니다.


힘들게 회원가입에 성공한 서점군

곧이어 당황스러운 알림메세지와 마주하게 됩니다.


준회원 회원가입이 완료되었습니다.


준회원? 준회원?? 준회원이라고???

쌔빠지게 가입했더니 겨우 준회원이라고?


통상적으로 카쉐어링, 렌트카 앱들은 차량을 대여하기 위해 면허등록이 필요한데요.

피플카는 회원가입을 완료하였으나 면허를 등록하지 않은 회원을 준회원

회원가입을 완료하고 면허등록을 완료한 회원을 정회원이라고 칭합니다.


정회원과 준회원 사이에 어떤 차이가 있는지 비교해볼까요?


피플카와 쏘카의 경우 면허인증을 하지 않은 준회원은 서비스에 접근할 수도 차량을 조회할 수도 없습니다. 말이 좋아 준회원이지 사실상 비회원과 큰 차이가 없죠. 반면 그린카는 로그인을 하지 않아도 대여존과 차량을 확인할 수 있습니다. 일명 둘러보기 기능입니다.


여기서 고민이 필요합니다.

쏘카처럼 면허인증을 해야 서비스를 이용할 수 있게 하는게 맞을까 아니면 그린카처럼 회원가입을 하지 않아도 서비스를 체험해볼 수 있게끔 해주는게 맞을까.


각자 장단이 있습니다.


그린카처럼 서비스를 체험해볼 수 있는 둘러보기 기능을 만들면 회원가입에 대한 진입장벽이 낮아지지만 반대로 서비스에 대한 기대치가 충족되지 않을 경우 사용자는 회원가입 없이 바로 이탈하게 됩니다. 차량공유 서비스에서 서비스에 대한 기대치는 뭘까요? 차량 보유 현황과 가격이 아닐까요?


쏘카와 피플카처럼 회원가입과 면허인증을 완료해야 서비스를 이용할 수 있도록 만들면 회원가입에 대한 진입장벽이 굉장히 높아지지만 사용자는 회원가입 완료전까지 서비스의 품질 수준을  알 수 없게 됩니다. 사용자는 내 주위에 차량을 빌릴 수 있는 공유존이 몇개나 얼마나 가까이 있는지 어떤 차를 빌릴 수 있는지 알지 못한채 회원가입을 한다는거죠.


순서로 비교하면 이렇게 됩니다.


그린카 : 차량, 대여정보 확인
           ▶ (마음에 드는 경우) 회원가입

피플카 : (일단) 회원가입
            ▶차량, 대여정보 확인


피플카는 왜 둘러보기 기능 없이 일단 회원가입을 시키고 보는걸까?

두가지 정도의 이유를 추론해볼 수 있습니다.


1. 개발의 간편함
2. 인프라(공유존과 차량 보유 대수)의 빈약함을 감추기 위한 조치


서비스를 이용하기 위해 무조건 회원가입과 로그인을 해야 한다면 서비스는 로그인을 전제로 구성됩니다. 애초에 회원가입과 로그인을 해야만 이용할 수 있는 서비스이니 비회원이 접속했을때 어떻게 화면을 구성하고 어떻게 분기처리를 하고 예외처리를 하고 같은 절차가 필요없죠. 비회원 둘러보기 기능을 두지 않고 로그인 전용 서비스로 만들면 기획이나 개발범위, 기간이 줄어들고 프로세스도 훨씬 간편해집니다. 이건 개발과 리소스에 관한 문제고요.


사용자 관점에서 보면 그린카와 같이 둘러보기 기능을 뒀을때 사용자 근처에 공유존이 없거나 예약가능한 차량이 없거나 하면 둘러보기 후 회원가입 없이 곧바로 서비스를 이탈하게 됩니다. 그리고 이런 생각을 하겠죠.

"에이 차 빌릴곳도 많이 없고 차도 별로 없네. 서비스가 별로인데?"


둘러보기 기능이 있으면 사용자가 서비스 인프라와 품질을 평가할 수 있는 시간과 여지를 주게 됩니다. 기대했던것보다 품질이 별로면 사용자는 회원가입을 하지 않고 서비스를 이탈하겠죠. 반대로 둘러보기 기능이 없으면 일단 회원가입을 해야 서비스의 품질을 확인할 수 있으니 품질여부와 관계없이 회원가입을 진행할 확률이 높습니다. 회원가입을 하고 나면 기대했던것보다 서비스의 품질이 낮더라도 (근처에 대여존이 없다던가 원하는 차량이 없는 경우) 이용자는 어떻게든 서비스를 이용하려고 할겁니다. 최초 가입시 주는 쿠폰 혜택이 금방 소멸되는 경우가 많고 최초가입 혜택은 보통 파격적이니까요.


정리하면 차량공유존과 차량 인프라가 제대로 갖춰지지 않은 상태에서 둘러보기 기능을 두면 사용자는 회원가입을 하지 않고 서비스를 이탈할 확률이 높습니다. 하지만 둘러보기 기능을 두지 않으면 어쨌든 회원가입을 하고 혜택이 아까워서라도 사용자가 서비스를 이용할 확률이 높습니다. 인프라의 빈약함은 감추면서도 사용자가 회원을 가입하고 서비스를 이용할 확률을 높일 수 있죠.


하지만 여기에는 전제조건이 하나 있습니다. 회원가입이 쉽고 편할것. 회원가입이 복잡하고 불편하면 사용자는 가입단계에서 서비스를 이탈할테니까요.


글이 너무 멀리 돌아왔는데 피플카식 정책의 핵심은 회원가입은 최대한 간편하고 편리하게, 거부감 없이 입니다. 회원가입의 진입장벽이 너무 높으니까요.


처음으로 다시 돌아와서 피플카의 회원가입 절차를 살펴봅시다.

① 본인인증 및 가입정보 입력 (준회원)

② 주소 등록 및 면허인증, 결제카드 등록 (정회원)


앞에서 설명했듯 피플카의 준회원은 사실상 비회원과 다를바가 없습니다. 힘들게 휴대폰 인증을 완료하고 가입정보까지 입력해 가입을 완료했는데 갑자기 너는 준회원이고 서비스를 이용하기 위해서는 주소를 입력하고 면허인증을 해야한다 라는 문구가 뜨면 사용자 입장에서 무척 당황스럽겠죠. 회원가입을 완료하면 서비스를 이용할 수 있을줄 알았는데 추가정보를 요구하니까요.


제가 이 프로세스에서 이해할 수 없었던건 크게 두가지인데요.


① 어차피 면허인증 안하면 서비스 이용 못할거 왜 굳이 준회원과 정회원을 구분했나. 준회원 정회원 구분없이 회원정보 입력부터 면허인증까지 스트레이트로 하면 안되나?

② 왜 준회원이라는 모호한 표현을 써서 사용자에게 거부감을 주나


피플카 회원가입 페이지에서는 스테이터스바나 Step 등 현재 회원가입이 얼마나 진행했는지 앞으로 얼마나 남았는지 진행과정을 알려주지 않습니다. 이런 상태에서 피플카 서비스에 가입하시겠습니까? 라는 알림 메시지가 나오면 누가봐도 아 이제 회원가입이 다 끝났구나라고 생각할겁니다. 그런데 뜬금없이 너는 준회원이고 면허정보도 인증해야돼 라고 하면 사용자가 느끼는 감정은 어떨까요? 다 끝났다고 생각했는데 자꾸 뭘 더 입력하라고 하면 짜증이 나지 않을까요?

준회원, 정회원 구분없이 그냥 회원가입정보 입력부터 면허인증까지 스트레이트로 받아버리면 최소한 불필요한 짜증과 불쾌감은 유발하지 않을 수 있지 않을까요?


준회원이라는 표현도 조금 아쉬웠는데요. 준회원이란 표현은 이용자에게 준비되지 않은, 미성숙한 같은 이미지를 줍니다. 준회원은 이용자가 선택한게 아닌데 강제로 "너는 준비되지 않았어. 빨리 준비해야 해" 같이 강압적인 느낌을 주죠. 한국말이 말이 아 다르고 어 다르다고 준회원, 정회원 같은 명칭 말고 정회원, 인증회원 같은 명칭이라면 어땠을까요? 별거 아니지만 사소한 디테일에서 조금씩 아쉬움이 느껴졌습니다.




왜 게이트가 필요한걸까?


주요 차량공유 서비스들의 메인 페이지를 한번 비교해봅시다.


주요 5개 차량공유 서비스의 메인 페이지를 비교해보면 쏘카와 피플카는 링크로 이동할 수 있는 게이트형태로 메인페이지를 구성했고 그린카와 딜카, 롯데렌터카는 이용자의 근처의 대여존 안내 지도를 노출합니다. 왜 쏘카와 피플카는 지도로 대여존을 보여주지 않고 게이트 페이지 형태로 메인 페이지를 구성한걸까요?


쏘카가 게이트 페이지 형태로 메인을 구성한 이유는 다른 서비스들에 비해 제공하는 기능이 많기 때문입니다. 멤버십 서비스(쏘카패스)를 운영하고 있으니 멤버십 소개 및 이동 링크도 안내해야 하고 법인전용 서비스(쏘카 비지니스), PLCC 카드(쏘카카드)등 다른 서비스에 비해 제공하는 기능과 서비스가 많아 다양한 서비스와 콘텐츠를 소개할 수 있는 게이트 페이지가 필요하죠.


자 이제 쏘카와 동일하게 게이트 페이지로 메인을 구성한 피플카를 한번 봅시다. 피플카 메인페이지에서 노출하는 콘텐츠와 기능은 크게 5개입니다.


차량공유 : 단기대여, 장기대여, 편도(리턴프리)

광고 : 광고배너영역

콘텐츠 : 여행 콘텐츠


메인페이지 노출 정보를 보면 그런 생각이 들죠. 꼭 게이트 페이지가 필요한가? 게이트 페이지 없어도 될것 같은데?


차량공유 3개 기능(단기, 장기, 편도)은 다른 서비스들도 대부분 다 제공하는 기능들이고 게이트 페이지 없이 지도 UI로도 충분히 구현가능합니다. 딜카나 롯데렌터카처럼 상단에 탭을 두거나 UI로 풀수 있는 기능들이죠. 그럼 게이트 페이지가 필요한 이유는 광고배너와 여행 콘텐츠 때문인데... 과연 그 콘텐츠들이 메인 페이지 구성을 바꿔버릴 정도로 중요한 기능인가?에 대해서 의문이 듭니다. 차량공유 서비스의 본질을 생각해봐야죠. 차를 빌리기 위해 차량공유 서비스에 들어온건데 당장 빌릴 수 있는 차량 리스트를 보여줘야지 광고배너와 여행콘텐츠를 보여주는게 어떤 의미가 있는걸까? 사용자 입장에서 불필요한 클릭을 유발하는건데 이해가 가지 않는 구성입니다. 콘텐츠와 기능 구성상 게이트 형태보다는 그린카처럼 지도 UI가 더 적합하지 않았을까요?




숨어있는 1인치를 찾아라


삼성전자 명품 TV 광고

과거 삼성전자 TV 광고 중 아직까지 기억에 남는 광고 카피가 하나 있는데요.

숨어있던 1인치를 찾아라

브라운관에 1인치를 추가해 기존에 잘렸던 화면을 보여주겠다는 광고문구인데요.

이 광고문구를 피플카에 대입해봅시다.


피플카는 다른 차량대여 서비스에 비해 지도 영역이 30% 정도 작은데요. 이 30%가 피플카 입장에서 숨어있는 1인치가 됩니다. 그리고 이 숨어있는 1인치 때문에 사용성에 큰 차이가 생기게 돼죠.


제가 근무하고 있는 종로를 기준으로 볼까요. 피플카는 근처에서 대여할 수 있는 차량이 한대도 없는 반면 그린카는 약 15곳 정도, 딜카는 충정로역 근처에 대여가 가능한 차량이 한대 있습니다.


내 근처에 대여 가능한 차량이 한대도 없다는 건 고객입장에서
"빌릴만한 차가 별로 없네"
"차량공유존이 너무 적은걸
"정작 필요할때 이용하기 어렵겠는데?"
와 같은 인상을 줍니다. 당연히 사용자의 서비스 경험이, 첫인상이 안좋아지겠죠.


그런데 반대로 생각해봅시다. 차량 종류와 대여존이 많고 검증된 소카와 그린카가 아닌 피플카를 설치하고 복잡한 가입과정을 거쳐 가입을 완료했다는 것. 고객은 "생긴지 얼마 안된 신생 서비스니까 근처에 대여존이 없거나 적을 확률이 높아"라는 마음으로 서비스에 가입하고 이 서비스에 접근했을 확률이 높습니다. 복잡한 과정을 거쳐 피플카에 가입한 이유가 신규고객 쿠폰이나 할인혜택을 얻기 위해서라는거죠. 그래서 다른 서비스들에 비해 대여존과 차량이 없다는것에 더 관대한 마음일 수 있는겁니다. 목적 자체가 체리피킹이니까.


하지만 이용가능한 차량이 적은것에 관대한 것과 이용가능한 차량이 아예 없는 건 다른 문제입니다. 5만원에 100미터 거리에 있는 소카와 3만원에 600미터 거리에 있는 피플카는 선택의 문제지만 이용가능한 차량이 아예 없으면 피플카는 소카의 경쟁상대가 될 수 없습니다.


다시 한번 피플카와 딜카의 UI를 비교해봅시다.


전체 화면 중 차량 대여존을 표시하는 지도 영역의 비중이 피플카는 63%, 딜카는 85% 입니다. 약 22% 정도의 차이인데요. 이 별거 아닌 차이가 이용자 근처의 차량 대여존을 보여줄 수 있냐 아니냐의 커다란 차이가 될 수 있습니다.


위 화면의 딜카를 자세히 한번 봐보죠. 지도비율이 피플카와 유사한 60%의 비율이었다면 빨간색 점선 영역인 충정로역 근처의 차량 대여존은 노출되지 않았을 겁니다. 똑같은 차량 대여존을 운영하고 있더라고 피플카와 같은 UI를 쓰느냐 딜카와 같은 UI를 쓰느냐에 따라 최초 접속 시 차량대여존이 보일 수도 보이지 않을수도 있는겁니다.


이제 다시 주요 차량공유 서비스의 대여 페이지 지도 비율을 비교해봅시다.


피플카를 제외하고 나머지 차량공유 서비스들은 대여 페이지에서 지도가 차지하는 비중이 최소 80% 이상. 그린카처럼 요소를 라운드처리하면서까지 극단적으로 지도를 노출하는 경우도 있습니다. 다른 차량공유 서비스들은 잘 알고 있었던 겁니다. 화면에서 지도 영역을 최대한 크게 많이 노출해야 차량 대여존이 잘 보일 확률이, 하나라도 더 많은 차량이 보일 확률이 더 높다는 사실을요. 사용자가 차량 공유존이 많은 도심지가 아니라 공유존이 적은 외곽지역에서 앱을 실행할 확률도 있으니까요.


당신이 피플카의 UI를 설계자라고 해봅시다. 피플카는 다른 차량공유서비스에 비해 대여가능한 차량대수나 대여존이 부족합니다. 똑같은 곳에서 소카와 피플카를 동시에 켰을때 소카가 압도적으로 대여가능한 차량이 많을 확률이 높죠. 당신이 대여 페이지를 설계할때 고려해야 될건 뭘까요? 최대한 지도영역을 크게 보여줘서 차량 대여존을 하나라도 더 노출시킬 가능성을 높이는게 중요하지 않을까요? 전체 영역에서 지도를 60% 노출했을때보다 80% 노출했을때 대여가능한 차량이 하나라도 더 보일 확률이 높을테니까요.   


기획자의 입장에서 내가 해결할 수 없는 인프라의 열세는 어쩔 수 없다고 하더라도 UI적으로 그 열세를 커버할 수 있는 방법이 있다면 우리 서비스와 유사 또는 경쟁 서비스를 벤치마킹 해봤는데 다 비슷한 UI와 구성을 사용하고 있다고 하면 한번쯤 의심해봐야 됩니다. 왜 다들 저런 구성과 레이아웃을 쓰는지. 비슷비슷한 저 결과물이 뇌가 굳은 꼰대들이 무지성으로 배낀 UI가 아니라 그들이 치밀하게 고민해보고 나온 최선의 결과물은 아니였을지요.



피플카 서비스를 이리저리 둘러보던 서점군은 결국 택시를 타고 집에 귀가했습니다.

피플카 서비스를 둘러보다보니 회사에 택시비 청구가 가능한 12시가 넘었으니까요.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari