레퍼런스 분석 4주차 [스카이스캐너]

 

 

 0. About 스카이스캐너 

스카이스캐너(Skyscanner)는 항공권, 호텔, 렌터카 등을 검색하고 비교할 수 있는 글로벌 여행 검색 플랫폼이다.

실시간으로 항공권 정보를 제공하여 전 세계의 다양한 항공권을 한눈에 비교할 수 있다.

직접 예약을 진행하는 것이 아니라 최저가를 제공하는 사이트로 연결해 주는 중개 역할을 한다.

 

 

 1. 화면 구성 분석

 

첫 인상은 "정말 깔끔하다"였던 것 같다.

우선 Header가 없고 Footer도 3개의 탭으로 이루어져 있으며,

화면의 구성 또한 각 모듈이 큼직하게 배치되어 있고 콘텐츠도 많지 않기 때문이다.

 

앱을 실행하자마자 상단에 [항공권][호텔][렌터카] 버튼을 보여줘서

"항공권 비교 및 호텔 렌터카 검색"이라는 사용자의 목적이 단번에 수행될 수 있도록 해주고 있다.

그 밑으로 기타 여행지, 호텔, 렌터카 탐색 모듈이 나열되어 있다.

 

 

 1) 검색 (메인화면) 

• 푸터 첫 번째 탭, 검색

①검색(메인) - 항공권

 

호텔과 렌터카는 ③검색(부가2)과 같은 내용이기에 항공권 검색 화면만 분석했다.

 

[항공권] 탭을 터치하면 위의 화면이 나타난다.

왕복, 편도, 다구간 탭이 상단에 뜨고

그 밑으로 출발지, 목적지, 출발 날짜, (왕복일 시)도착 날짜, 인원수, 좌석등급을 고를 수 있는 모듈이 나타난다.

텍스트보단 아이콘 위주로 디자인되어 있는 것을 확인할 수 있다.

출발지와 도착지 중간에 화살표 아이콘을 배치해, 두 위치를 바꿔서 검색하고 싶을 때 손쉽게 변경할 수 있도록 했다.

 

 

국가, 도시, 공항 키워드 모두 검색이 가능하다. 도착지에서 '어디든지' 검색 시, 추천 국가와 함께 최저가 항공권을 검색할 수 있다.

현재 위치를 파악해서 근처 공항도 보여주고 있으며 최근 장소도 보여주어 편의성을 높여주고 있다.

국가는 깃발 아이콘, 도시는 빌딩 아이콘, 공항은 비행기 아이콘으로 표시하고 있다.

 

날짜 선택 화면

달력에 며칠 동안 여행하는지 파란색으로 표시해주고 있다.

그리고 각 날짜별로 최저가 항공권을 초록색으로 표시해 주어 합리적인 가격에 항공권을 구할 수 있도록 도와주고 있다.

또한 다음 달의 항공권을 보고 싶을 때, 페이지를 넘기거나 하는 식이 아니고 스크롤만 하면 돼서 더 편하게 검색할 수 있다.

 

 

여행객과 좌석 등급 설정 화면

 

사람 아이콘을 터치하면 여행객을 설정할 수 있는 창이 뜬다.

유/소아 추가 시 소아의 나이를 선택할 수 있는데, Input의 형태가 아니고 Drop box로 선택할 수 있다.

좌석 등급은 일반석, 프리미엄 일반석, 비즈니스, 일등석 4개의 선택지가 있다.

(4개의 선택지밖에 없는 거면, 굳이 새로 페이지를 만들어야 했나 싶기도 하다.)

 

 

모든 검색 설정을 마치고 검색 버튼을 누르면 항공권과 함께 그 밑으로 호텔, 렌터카도 보여주고 있다.

 

항공편 모듈에서 모두 보기를 터치하면 모든 항공권을 확인할 수 있다.

특이한 건 공유 버튼이 플로팅 버튼으로 들어가 있는 것이다.

공유 버튼의 클릭 수가 많은 걸까?

 

 

정렬 및 필터 화면이다.

크게 [경유][시간][항공사][공항]의 카테고리로 나눠져 있다.

정렬 기준 Drop box 터치 시 화면 아래에서 모달이 나타난다.

시간도 Input 형태가 아니고, 좌우로 드래그해서 조정할 수 있도록 되어있다.

시간을 조정하면 시간 글씨가 파란색으로 변한다.

여기까지 봤을 때, 스카이스캐너는 Input을 최소화한 것을 볼 수 있다.

 

 

정렬 및 필터를 마친 뒤 해당 모듈을 터치하면 자세한 항공권 정보와 함께 하단에 항공사, 별점, 리뷰 수, 가격을 보여주고 있다.

백그라운드 이미지로 도시의 이미지를 보여주고 있다.

자세히 보기를 터치하면 항공권의 더 자세한 정보를 확인할 수 있다.

 

 

항공권에 있는 하트 아이콘을 터치하면 위시리스트에 저장됐다는 Toast UI가 나타난다.

옆에 '보기' 버튼을 두어, 바로 확인할 수 있도록 했다.

 

 

②검색(부가1)

 

[어디든지 검색] [새 위젯 받기] [호텔 초특가] [고객 지원 방법] 4개의 탭이 있다.

여기서 가장 유의미한 탭은 [어디든지 검색]이기 때문에 이 화면만 분석해보려 한다.

 

 

 

어디든지 검색이라는 이름답게, 가장 저렴한 항공편 위주로 여행지 어디든지 보여주고 있다.

꼭 최저가 항공편이 아니더라도, 여러 기준으로 선정된 여행지를 검색할 수 있다.

좌측에 그 나라의 대표 사진을 보여주어 어떤 여행지인지 한눈에 알 수 있다.

 

 

여행할 나라를 선택하고 나면 그 나라의 도시를 선택할 수 있다.

도시 또한 이미지를 함께 보여주고 있다.

도시까지 선택하고 나면 항공편을 확인할 수 있는 페이지가 나타난다.

직접 검색했을 때와는 달리, 유연하게 선택해서 검색했기 때문에 월별로 항공편이 나타나는 것을 확인할 수 있다.

 

③검색(부가2)

 

큰 이미지와 함께 텍스트로 보여주고 있다. 아마 여행을 하고 싶게끔 부추기기 위해서 이렇게 디자인하지 않았나 하는 생각이다.

이미지는 랜덤으로 나타나며 몇 가지의 배리에이션이 있다.

 

 

다만 호텔은 어째서인지 웹페이지로 이동된다.

날짜 선택 및 인원 선택의 구성은 항공권과 동일하다.

 

 

검색 탭에서 도시를 검색하고 나면 정렬 및 필터를 통해 원하는 조건 호텔을 검색할 수 있다.

정렬 및 필터 페이지에선 아이콘보단 텍스트 위주로 디자인되어 있는 것을 확인할 수 있다.

호텔의 요금은 항공편의 시간과 동일한 디자인이지만, 호텔의 디자인에선 글씨가 파랗게 변하진 않는다.

 

 

호텔 상세 페이지다.

최상단에 호텔의 이미지가 나타나고 그 밑으로 호텔에 관한 정보들이 나열되어 있다.

호텔의 이름, 별점, 주소와 좋은 평가를 받은 키워드, 예약할 수 있는 사이트의 링크, 후기, 지도, 호텔 설명, 편의시설, 기타 정보 순으로 보여진다.

투숙객 후기에서 항목 별로 bar의 형식으로 디자인하고, 편의 시설에서 아이콘의 형식으로 크게 보여주고 있는 점이 주목할만하다.

호텔 또한 항공편과 마찬가지로 하트 아이콘이 있어서 위시리스트에 저장할 수 있다.

 

 

렌터카 검색창은 항공편의 구성과 똑같고, 운전자의 나이 체크박스만 다르다.

대여 장소 선택 후 백그라운드에 지도가 나타나고 그 위로 차량 모달이 나타난다.

상단 필터에서 차량 유형 선택 시 자동차의 이미지와 함께 차량의 유형이 커다랗게 나타난다.

 

 

'모든 필터'를 누르면 더욱 자세하게 선택할 수 있는 페이지로 이동한다.

이 페이지에선 대부분의 선택 항목이 체크박스로 디자인되어 있는 것을 확인할 수 있다.

렌터카는 위시리스트가 존재하지 않는데, 아마 항공편과 호텔에 비해 즉각적인 성격이 짙기 때문이지 않을까 생각된다.

 

 2) 위시리스트 

• 푸터 두 번째 탭, 위시리스트

 

항공편과 호텔 검색할 때 추가했던 위시리스트를 볼 수 있다.

추가한 날짜 순으로 정렬된다.

항공편 → 출발지와 도착지, 비행시간, 항공사, 직항·경유 여부, 가격 변동 알림 토글, 날짜, 인원수, 좌석 등급

호텔 → 호텔 이름, 위치, 별점, 날짜, 인원수, 방 개수

(호텔은 가격 변동 알림 토글이 없다.)

그리고 우측 상단에 하트 아이콘이 있어서 이 부분을 터치하면 위시리스트에서 제거할 수 있다.

 

 3) 프로필 

 

상단에 프로필 영역과 프로필 설정 단계가 Progress bar의 형태로 나타나고

그 밑으로 계정 관리 모듈과 읽을거리 모듈이 나타나고 있다.

이 페이지 역시 위에서 살펴본 것과 같이 일러스트와 함께 큼지막하게 버튼이 디자인되어 있다.

 

①사용자 세부 정보

 

사용자 세부 정보는 이전에 보았던 페이지들과는 다르게 리스트형식으로 디자인되어있다.

사용자 세부 정보에서 여행객 정보와 결제 수단을 등록해서

빠르게 예약을 할 수 있도록 도와주고 있다.

특히 항공편의 경우 정확하게 이름을 입력했는지가 매우 중요하기 때문에 상단에 "정보가 여권에 표시된 것과 정확히 일치하는지 확인하세요"와 같은 알림 메시지를 띄우고 있어서 사용자가 한 번 더 확인할 수 있도록 해주고 있다.

아무것도 추가되지 않았을 때는 일러스트를 크게 띄워주고 그 밑으로 추가할 수 있는 버튼을 보여주고 있다.

여행객·카드 추가 버튼은 작은 크기로 중앙정렬 되어있다.

 

②설정

 

설정 페이지 마찬가지로 리스트형식으로 디자인되어있다.

화폐단위와 국가를 설정할 수 있다.

 

 

---

 

 

굉장히 심플한 메인 페이지와 다르게, 검색 시 Depth가 굉장히 많은 것을 확인할 수 있다.

나 또한 정리하면서도 생각보다 페이지 수가 많아서 정리하기 힘들었다.

앞서 살펴본 화면 구성 분석에서 반복되는 내용도 꽤 많아서, 요약해 보자면 아래와 같다.

1. 항공편, 호텔 검색 시 백그라운드에 관련 이미지가 나타난다.
2. 검색 정렬 조건 및 필터 내용이 굉장히 세부적이다.
3. Input의 형태보단 Check box, Drop box 그림·아이콘 모듈의 형태로 디자인되어있다.
4. 이미지, 아이콘, 일러스트를 크게 보여주어 직관적으로 보이도록 디자인되어있다.

 

---

 2. 사용자 분석 

스카이스캐너의 주요 사용자는 여행 목적을 가진 사람들로, 특히 비용 절감과 편리함을 중시하는 사람들이 주를 이룬다.

스카이스캐너는 항공권, 호텔, 렌터카 등을 한눈에 비교하고 예약할 수 있는 기능을 제공하여

항공편뿐만 아니라 호텔과 렌터카 예약이 필요한 여행자들에게도 사랑받고 있다. 

 

---

 3. 개선점 

검색 페이지에서 수많은 옵션을 보여주며 원하는 조건으로 검색할 수 있는 것에 반해,

위시리스트의 구성이 빈약하다는 느낌을 받았다.

올해 여름 유럽 여행을 계획했을 때 스카이스캐너의 '검색 기능'은 잘 이용했었다.

총 6개국 여행을 계획했었는데,  날짜를 구체적으로 정해지지 않은 상태에서

항공편이 가장 저렴할 때를 기준으로 날짜를 조정하려 했었다.

A나라에서 B나라로 가는 항공편 3~4개, B나라에서 C나라로 가는 항공편 3~4개···

이렇게 수십개를 전부 위시리스트에 저장한 뒤 확인하려 했는데

위시리스트에는 정렬 기능이 없어서 한눈에 살펴보기가 너무 힘들었었다.

결국 유럽 항공사 홈페이지로 직접 들어가서 하나의 항공사로 전부 예약했었다.

그때 당시에 굉장히 불편함을 겪었기에, 그 경험이 레퍼런스 분석의 계기가 되었다.

 

 

위시리스트에도 정렬 및 필터 기능을 추가했다.

그 밑으로 날짜 탭과 항공편, 호텔을 나눠서 볼 수 있게끔 버튼을 만들었다.

 

 

항공편 화면에서 정렬 및 필터를 누르면 나타나는 화면이다.

왕복과 편도 선택 시 밑에 나타나는 날짜 탭이 달라지도록 디자인했다.

 

 

더 자세히 설명하기 위해 기존의 항공편 검색 시 나타나는 탭과 비교해 보자면

정렬 기준과 날짜, 여행객, 여행지가 추가되어서 원하는 조건으로 위시리스트에 저장해 놓은 항공편을 찾아볼 수 있도록 했다.

여기서 추가로 설명하면, 사실 이미 필터링을 해서 위시리스트에 저장한 것일 텐데

위시리스트에서까지 굳이 필터 기능이 필요할까?라는 생각이 들기도 했었다.

그럼에도 나처럼 항공편을 수십 개씩 저장하는 사람들도 있을 것이고

유연하게 알아보기 위해 필터 기능 없이 검색 후 저장한 사람들도 있을 것이라 생각됐다.

그래서, 저장해 놓은 것들 중에 포함되어있지 않은 옵션들은 비활성화를 시키는 방안으로 디자인해보았다.

위의 예시의 경우, 일반석과 직항만 저장했다는 가정 하에 만들어서

좌석 등급과 경유 여부에서 일반석과 직항 항공권 외의 것들은 체크박스가 비활성화되어있다.

 

 

다음은 호텔 탭에서의 정렬 및 필터 화면이다.

 

 

이것도 기존의 호텔 검색 시 나타나는 정렬 및 필터의 디자인에서 일부 수정·추가해서 만들었다.

정렬 기준에 나라와 도시를 추가 및 제거를 해서 원하는 곳의 호텔 정보만 볼 수 있게 만들었다.

날짜와 투숙객도 추가해서 더 상세하게 탐색할 수 있도록 했다.

그 외의 것들은 모두 동일하다.(인근 지역 제외)