에어비앤비는 얼마나 정교하게 UX/UI를 디자인했을까?
[코드스테이츠 PMB 10기] Figma 와이어프레임
Figma로
에어비앤비 '이전 여행지' 페이지
다시 그리기
1. 유저 Flow
태스크 : 사용자가 수행하길 원하는 과제
사람들은 어떨 때 에어비앤비를 쓸까? 사람들이 에어비앤비를 통해 수행하길 원하는 가장 대표적인 과제는 '숙소 예약'일 것이다. 에어비앤비가 다른 숙소 예약 서비스들에 비해 지니는 경쟁 우위는 아주 많다.
타 숙박 서비스와 달리, 에어비앤비는 애초에 스스로를 호텔보다 저렴한 대안으로 정의하지 않았습니다. 에어비앤비의 서비스는 집을 떠나 여행하는 중에도 마치 그곳에 거주하는 현지인처럼 살아 볼 수 있는 독특한 경험을 강조했죠.
- MOLOKO, <Airbnb 마케팅 전략: 모든 게스트를 집에서 머무는 것처럼 편안하게> 中
에어비앤비에 대한 다양한 분석들(참고)을 종합하여 에어비앤비만의 경쟁 우위를 한 단어로 정의한다면 '경험'이 되겠다. 에어비앤비는 마치 현지인이 된 것만 같은 독특한 숙박 경험을 제공하여 고객의 만족도를 끌어올렸다. 따라서 에어비앤비의 주된 태스크(=사용자가 수행하길 원하는 과제)는 단지 '숙소 예약' 뿐만 아니라, '현지인처럼 살아볼 수 있는 숙박 경험을 제공하는 숙소 예약'일 것이다.
유저 스토리 : 고객의 맥락과 배경
내가 에어비앤비로 떠났던 여행들나 역시 위와 같은 이유로 숙소 예약 서비스 중에 에어비앤비를 가장 활발하게 사용한다. 나는 코로나19 이후부터 에어비앤비를 사용하기 시작했다. 보통 해외 여행을 다닐 때 그 나라 사람처럼 살아보는 경험을 위해 많이들 사용하는 걸로 알고 있다. 그러나 나는 해외 여행에서는 무조건 안전과 쾌적함이 최고라고 생각해서 호텔에 묵고는 한다.
그래서 호텔스컴바인 같은 서비스들만 이용하다가, 코로나19를 기점으로 시작된 네 번의 국내 여행(강릉, 제주, 경주, 이태원) 전부 에어비앤비를 통해 숙소를 예약하게 됐다. 나는 지금 살고 있는 수원시의 아파트에서 20년 째 살고 있고, 해외는커녕 국내 다른 도시에서 지내본 기억이 아예 없다. 기숙사나 자취 생활도 한 적이 없다. 그래서 에어비앤비가 제공하는 국내 여행에서의 독특한 숙박 경험이 매력적으로 다가왔다.
이러한 서비스 경험을 바탕으로 나 자신을 페르소나로 설정했다. 이 다음부터 다루게 될 나, '김은미'의 에어비앤비에 대한 유저 스토리를 미리 정리하자면 다음과 같다.
고객(사용자)은
김은미는
목적(목표)을 위해서
이전에 예약했던 숙소에 재방문해서 '현지인처럼 살아보기'라는 숙박 경험을 다시 획득하기 위해
필요(욕구)를 원한다
에어비앤비의 '이전 여행지'를 확인한다
사용자 여정
과제를 위해 오랜만에 에어비앤비를 켰다. 하단 GNB의 '여행'을 선택하자 나의 이전 여행지를 확인할 수 있었다. 마지막으로 국내 여행을 떠난 지 벌써 세 달이 넘었기에, 슬슬 새로운 여행을 계획하고 싶다는 생각이 들었다. 그래서 내가 직전에 다녀왔던 숙소를 다시 둘러보고 싶다는 생각을 했다. 그에 따라 위 사진과 같은 세 단계의 과정('여행' 페이지 - 이전 여행지 예약정보 페이지 - 숙소 정보 페이지)을 거쳐 이태원 여행의 숙소 정보에 도달할 수 있었다.
2. 페이퍼 프로토타입(Lo-Fi Prototype)
말로만 설명하려니 UX/UI 측면에서의 사용자 여정을 제대로 나타내기 어려웠다. 그래서 과제에 안내된 대로 페이퍼 프로토타입을 그려보았다. 초록색으로 표시된 부분은 터치 영역이고, 파란색 화살표는 페이지 이동을 의미한다. 위와 같은 페이퍼 프로토타입에서 도출한 에어비앤비 '이전 여행지'의 핵심 기능은 다음과 같다.
① 이전 여행지 리스트업 기능
에어비앤비에서 사용자가 이전에 다녀왔던 여행지를 훑어보고 싶을 때, 하단 GNB의 '여행'만 선택하면 된다. 현재 예약 중인 숙소가 없는 사용자의 경우, '숙소 검색하기' 버튼 바로 아래에 이전 여행지를 리스트업해준다. 이미지와 설명(숙소명/호스트명/예약날짜)가 일목요연하게 정리되어 있고, 상하 스크롤로 쉽게 열람할 수 있다.
② 이전 여행지 예약정보 열람 기능
리스트업된 이전 여행지 중 하나를 선택하면 해당 숙소에 대한 예약정보를 열람할 수 있다. 게스트, 예약 번호, 환불 정책과 같은 중요 정책부터 숙소 이용규칙, 호스트 정보 등 그 당시 예약이 어떻게 진행되었었는지를 확인할 수 있다. 2020년 7월 당시 다녀왔던 강릉 숙소에 대한 예약정보도 아직까지 잘 저장되어 있었다. 이를 통해 과거와 현재 해당 숙소의 가격, 정책, 위치 등 변동사항이 있는지 비교하고, 확인할 수 있다.
③ 이전 여행지 예약정보 페이지를 통해 숙소 정보 페이지로의 간편한 이동
①번과 ②번 페이지에서 ③번 페이지로 넘어가는 흐름이 자연스러웠다. 에어비앤비에서 숙소 정보 페이지를 확인할 수 있는 방법은 매우 다양하다. 에어비앤비 내 검색 결과, 위시리스트, 홈 화면의 추천 콘텐츠 등 사용자가 거칠 수 있는 경로가 많다. 그중에서도 자신의 이전 여행지 예약정보를 확인하던 사용자가 '이 숙소에 다시 가고 싶다'라는 생각을 했을 때, ②번 페이지의 숙소 이미지를 터치하면 바로 숙소 정보 페이지로 이동된다.
3. 와이어프레임(Mid-Fi Prototype)
위와 같이 아이패드로 초기 단계의 프로토타입을 그려봤다. 그러나 이러한 페이퍼 프로토타입은 어디까지나 아이디어 회의와 같은 기획 단계에서 작성하는 임시 문서이지, 팀 간 소통을 위한 정식 업무 산출물은 아니다. 결국 PM은 자신의 기획안을 개발자, 디자이너, 그리고 이해 관계자들에게 설득할 수 있어야 하고, 이때 설득의 도구를 얼마나 많이, 잘 활용할 수 있느냐는 PM의 역량에 달렸다. 그때의 도구 중 하나가 바로 프로토타이핑 툴이다.
꿈나무 PM은 피그마는 처음이라...그래서 오늘 몰입 학습에서는 프로토타이핑 툴 중 피그마 Figma의 사용법을 학습했다. 사실 이전에 Adobe XD로 개인 프로젝트의 스토리보드를 작성해본 적이 있어서 피그마 역시 어렵지 않게 다룰 수 있을 거라 생각했다. 그러나... 그때 혼자서 야매(?)로 그렸던 와이어프레임과는 달리, 과제랍시고 열심히 그리다보니 고작 3개 페이지에 2시간이 걸렸다.
오늘 과제의 의의는 개선안을 도출하는 것이 아닌, 사용자의 태스크를 잘 해결한 앱 서비스의 와이어프레임을 따라 그려보면서 사용자의 어떤 문제를 해결했는지 분석해보는 것이다. 위와 같은 와이어프레임을 그리면서 나는 에어비앤비가 UX/UI의 디테일에 심혈을 기울이고 있다는 느낌을 받았다. 그런 느낌을 받은 근거는 대략 다음과 같다.
① 정보 배열 및 배치
에어비앤비와 같은 여행 관련 서비스들의 특징은 사용자가 열람해야 할 정보가 많다는 것이다. 그리고 대부분 교통, 숙소, 일정, 법률, 정책, 환율 등 꼼꼼하게 열람해야 하는 중요 사항이어서 함부로 축약할 수도 없다. 직접 와이어프레임을 그리고 텍스트를 하나하나 입력해본 결과, 에어비앤비의 화면에도 매우 많은 정보가 들어 있었다. 그러나 소제목별로 영역 구분을 확실하게 하고, 각 영역마다 저마다 다른 UI 디자인을 적용하여 시각적 피로도를 덜었다.
② 하단 GNB 구성
에어비앤비의 하단 GNB를 다른 앱 서비스에 갖다 붙인다면 무용지물이 될 것이다. 그만큼 에어비앤비의 하단 GNB는 에어비앤비라는 단 하나의 서비스에 꼭 맞추어 제작됐다는 뜻이리라. 어떠한 의도와 근거로 GNB의 카테고리들이 위와 같이 배치되었는지는 알 수 없지만, 개인적으로 에어비앤비의 사용자로서 해당 카테고리 분류가 자연스러운 페이지 이동에 매우 큰 도움이 되었다.
③ 인디케이터 바 디자인
마지막으로 사소한 디자인 리소스까지도 신경을 썼다는 것이다. 일례로 두 번째 페이지의 인디케이터 바 디자인이 그러하다. 실제 에어비앤비 화면과 내가 그린 와이어프레임의 인디케이터 바 디자인에는 차이가 있다. 따라서 그리기에는 너무 시간이 오래 걸릴 것 같아서(...) 어쩔 수 없이 에셋으로 제공된 평범한 인디케이터 바로 대체했다.
에어비앤비 화면 속 인디케이터 바는 다른 서비스에서 볼 수 없던 모양이다. 인디케이터 바의 각각의 점(·)들 중 두 개의 선(=)으로 표시된 부분은 현재 보고 있는 이미지의 순서를 나타내고, 오른쪽으로 갈수록 점(·)의 크기가 점점 줄어든다. 이런 디자인상의 디테일이 에어비앤비만의 완성도 높은 사용자 경험을 완성하는 것 같다.
참고자료
