IA, 와이어프레임을 통해 서비스 의도를 분석하는 방법
에어비앤비, 야놀자 IA, 와이어프레임을 그려보며 배치 의도를 파악하기
앞선 에어비앤비-야놀자 비즈니스 모델 분석을 통해 각 플랫폼이 어떤 서비스를 통해 돈을 벌고 있는지 다양하게 살펴봤습니다. 하지만 서비스 기획자, PM이라면 여기서 멈춰서는 안 되죠! 반대로 접근해보려고 합니다.
비즈니스 모델이 녹여져 있는 웹 서비스 화면을 분석해보면서 어떤 방식으로 표현해 냈는지 그 밑단의 의도를 살펴보려 합니다.
우선적으로 서비스 기획의 첫단인 IA와 와이어프레임을 반대로 그려보면서 연습해보려고 합니다.
실제 서비스 제작 경험이 없거나, 현업에서 일하지 않는 경우에는 두 기획 문서를 작성할 경우가 많지 않은데요. 대신에 존재하는 서비스의 IA와 와이어프레임을 그려보면서 연습하는 방법을 활용해보는 것도 좋았습니다. 뉴비라면 차근차근 보고 따라 해 보시길 권해드리며 시작해볼게요!
I.A 는 어떻게 그려야 하죠?
I.A는 사이트의 맵이며, 정보 구조입니다. 페인 포인트를 해결할 수 있는 솔루션을 도출했을 경우, 이 기능을 웹 / 앱으로 표현했을 때 어떤 구조로 제공할 것인가를 나타내는 문서입니다. 이 문서를 통해 디자이너, 개발자와 함께 소통하게 되므로 직관적으로 잘 나타내는 것이 중요합니다.
STEP1. 핵심 기능을 살펴보자.
따라서 비즈니스 모델에 따른 핵심 기능을 도출하고, 이를 구성하는 핵심 메뉴를 나타내면 됩니다. 에어비앤비의 주요 메뉴와 기능은 무엇일까요?
우선적으로 웹 서비스의 핵심 기능을 살펴보겠습니다.
에어비앤비는 비즈니스 모델에서 봤던 것처럼 유저와 호스트가 주요 사용자입니다. 사용자에 따라 사용하고, 제공하는 기능이 다르니 사용자를 기준으로 핵심 기능을 나타내 줬습니다.
유저들의 메인 활동은 검색, 예약, 소통입니다. 그에 따라 제공하는 핵심 기능을 적어줬습니다.
호스트는 숙소 등록, 관리, 메시징 등의 기능을 활용하고 있습니다.
IA라고 하면 막상 나타내기가 굉장히 애매한 경우가 많았는데 이렇게 핵심 기능부터 구상해보면 조금 더 쉬워져요. 핵심 기능이 화면에 어떻게 구현되고 있는지 체크할 때도 확실히 더 눈에 잘 들어옵니다.
STEP2. 주요 메뉴와 기능을 나타내 보자.
이후에 핵심 기능을 어떤 식으로 나타내고 있는지 구조를 분석해 봤습니다.
저는 웹서비스를 기준으로 메인 화면의 주요 메뉴와 기능을 차례대로 나타냈습니다.
홈 화면을 기준으로 나타내 볼게요.
일단 가장 상단에 검색 바가 있고, 숙소, 체험, 온라인 체험에 따라 달라지는 구조를 가졌습니다.
검색바를 클릭하면, 위치-날짜-인원을 선택하는 박스가 떠요.
프로필 역시 로그인 여부에 따라 뜨는 정보가 다릅니다.
이렇게 케이스별로 달라지는 부분을 체크 한 뒤에 전체적인 기능을 분석했습니다. 언급한 것처럼 검색 기능은 3개의 케이스로 나눴습니다. 로그인도 2가지의 케이스가 존재하기 때문에 그에 따라 나타나는 정보를 다르게 기입해줬습니다.
그 외에는 한 가지 케이스만 존재하기 때문에 1 depth에서 연결되는 페이지를 적어줬습니다. 체험, 호스트 되기, 호스팅 시작하기가 대표적인 예시입니다.
꼼꼼하게 화면의 모든 아이콘, 정보 구조를 나타내는 것이 중요합니다. 다음 뎁스에선 어떤 내용이 노출되는지, 2 depth로 어떤 방식으로 연결하고 있는지 등의 부분을 체크했어요.
사실 바로 트리형 IA를 그려도 되는데 이렇게 분석하게 되면 케이스별로 구조를 잘 파악할 수 있어서 왕초보도 쉽게 이후 구조화를 할 수 있어 좋아요.
STEP 3. 트리형 I.A를 그려보자.
앞서 표로 나타낸 것처럼 홈 화면을 기준으로 9가지의 기능을 나열했습니다.
앞선 표와 어떤 부분이 다른가?
상단 우측의 햄버거 메뉴의 경우 로그인 여부에 따라 구조가 달라지므로 따로 정의했습니다.
앞서 표에 기입한 내용보다 더 자세하게 1 DEPTH의 내용을 표현했습니다. 표현한 기준은 눌러서 화면의 내용이 바뀌거나, 2 DEPTH로 연결되는 경우입니다.
로그인을 한 경우, 여행 예약이나 위시리스트 부분을 보여주고 있었고 계정의 경우에 1 DEPTH에 굉장히 많은 기능을 나열해 둔 것을 찾을 수 있습니다. 로그인을 안 한 경우에는 당연하게 로그인 팝업이 노출되었고, 이외에도 호스팅을 빠르게 시작할 수 있도록 접근성을 높였습니다.
IA를 보면서 파악한 에어비앤비의 의도?
세부 연결 화면까지 뜯어보니 에어비앤비가 중복적으로 노출하는 화면을 알 수 있었습니다. 예를 들어 검색 필터의 경우 숙소, 체험에 필수적으로 노출하고 있었습니다. 숙박 플랫폼인 만큼 당연하게 중요한 기능일 수밖에 없죠.
특이한 건 온라인 체험의 경우 필터가 다른 페이지보다 하단에 배치되어 있다는 점이었습니다. 온라인인 만큼 공간, 시간의 자유도가 있기 때문이고 아직 충분한 체험이 없기 때문에 이런 식으로 설계한 게 아닌가 하는 생각이 들었습니다. 또한, 꽤 많은 부분에서 호스팅 시작하기 페이지를 연결하고 있다는 점을 미뤄보아 에어비앤비가 공격적으로 호스팅 풀을 늘리려 한다는 점을 알 수 있었습니다.
와이어프레임은 어떻게 그려야 하죠?
앞서 IA에서 정의한 기능을 이제 화면으로 나타내려 합니다. 기능을 토대로 디자이너, 개발자가 모두 같은 이해도를 갖출 수 있도록 도와주는 역할을 합니다. 사실 처음부터 기능을 배치하고 와이어프레임을 작성하는 건 어려워요. 그래서 다양한 웹사이트의 사례를 공부해 보려고 합니다.
저는 에어비앤비 웹사이트를 기준으로 어떤 식으로 와이어프레임을 구성했는지 알아봤습니다.
STEP1. 그대로 옮겨보자. (왼쪽)
컬러랑 이미지만 빼고 선, 도형을 기준으로 그래도 옮겨줬습니다.
- 배너의 경우 다른 색으로 표현해 다른 영역임을 나타냈습니다.
- 기능을 담고 있는 버튼을 꼭 텍스트를 포함해 그렸습니다.
- 구체적인 텍스트 (광고, 이벤트 등)은 그때그때 상황에 따라 달라지는 부분으로 초기 웹 화면을 기획하는 단계에서 설계해야 하는 부분을 중점으로 나타냈습니다.
STEP2. 영역별로 네이밍 (오른쪽)
이제 큰 기능을 위주로 표현해보려고 합니다.
아이콘이 어떤 기능을 하는지를 위주로만 두고, 구체적인 텍스트는 삭제했습니다.
# 유연한 검색 > 숙소 검색 연결 창으로
# 여행 도시 > 숙소 도시 검색 연결 창 등으로 수정했습니다.
메인 화면은 다른 기능으로 이동하는 나침판 역할을 잘하고 있고 볼 수 있어요.
지금은 답안이 나와있는 상태에서 그대로 따라 하는 거지만, 원래대로 하면 IA를 보고 이런 화면을 그려야 하죠. 그래서 와이어프레임을 그려보면서 왜 이 기능을 이렇게 표현하고 배치했을까? 를 중심적으로 생각해 봤습니다.
경쟁사의 화면도 분석해보자:
야놀자의 화면은?
야놀자의 화면은 한눈에 보기에도 아이콘이 굉장히 많습니다. 따라서 연결되는 페이지도 많았고 굉장히 많은 정보를 한 번에 제공하고 있습니다. 상품 연결 페이지, 쿠폰, 광고, 교통수단 예약, 추천 상품 등 까지 에어비앤비보다 다양한 상품 베리에이션을 보여주고 있어요. 상단 카테고리, 하단 바까지 있어서 앱을 그대로 옮겨 놓은 듯한 사용자 경험을 줍니다.
동일하게 배너와 같은 부분은 진한 색으로 표시했습니다. 왼쪽 버전에서 대부분의 기능은 텍스트로 자세하게 설명했습니다. 오른쪽에서는 텍스트를 줄이고 기능을 설명하는 텍스트 위주로 남겼습니다. 텍스트를 가리고 보니 쿠폰, 이벤트, 특가 등의 광고가 많이 보여요. 에어비앤비가 숙소, 체험처럼 직관적으로 상품으로 연결해주는 메인 페이지를 보여준 반면 야놀자는 세분화해서 인기 있는 서비스, 상품 등을 나눠 접근할 수 있도록 하고 있어요.
다시, 비즈니스적 관점으로 해석해보기.
에어비앤비는 코로나 이후 직격탄을 맞아 직원의 25%를 해고하고 매출 급감을 경험했습니다. 하지만 다시 코로나 이전의 매출을 회복했는데요, 이 비결은 유연한 검색, 체험, 현지 체험 위주의 화면 개편에도 있어요. 이제는 인근 숙소, 체험을 위주로 보여주고 있는데요 디지털 노매드, 재택근무의 여파 등으로 현지 경험을 중시하는 여행 트렌드가 생겨났기 때문이죠. 이런 부분을 잘 아는 에어비앤비가 현지 경험을 자유롭게 할 수 있도록 다양한 검색 시스템과 체험 상품을 준비하고 있음을 알 수 있었습니다.
야놀자는 이전 비즈니스 모델 분석에서도 봤듯이 취급하는 상품이 굉장히 많습니다. 에어비앤비와 다르게 이동수단, 모바일 상품권 등까지 제공합니다. 따라서 화면에서 이런 부분들을 최대한 다양하게 보여주어야 합니다. 또한 특가, 광고 등의 수익이 중요한 만큼 메인 화면에서 관련 이벤트를 비중 있게 보여주고 있습니다. 야놀자는 화면 아이콘이 주기적으로 바뀌는데요 소비자의 소비 성향을 빠르게 반영하고 관련한 카테고리에 대한 접근성이 높습니다.
