brunch

매거진 UI Insight 시리즈

라이킷 3 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김현준 Dec 29. 2023

에어비앤비(Airbnb) ¹

UI Insight 시리즈 01

온보딩 : 스플래시 스크린 ¹

스플래시 스크린은 앱이 구동되자마자 빠르게 노출되어 유저에게 앱이 빠르게 반응한다는 인상을 줍니다. 안드로이드 유저의 경우 백버튼을 통한 앱의 종료가 잦아 iOS유저보다 스플래시에 노출될 확률이 높습니다.

온보딩: 로그인 ¹

이메일 입력 후 계속 버튼 탭 시, 버튼 내에 마이크로인터랙션이 발생하며 진행 중이라는 어포던스를 명확히 제공합니다.

온보딩: 로그인 완료 ¹

비밀번호 설정 시 구체적인 조건을 플레이스 홀더 아래에 명시합니다. 약관 페이지와 알림 페이지를 별도로 할애하여 명확하게 전달합니다.

탐색 ²

상단 가로 탭을 슬라이드하여 숙소의 유형을 선택할 수 있습니다. GNB위의 FAB(플로팅 액션 버튼)을 누르거나 리스트를 아래로 끝까지 스크롤하여 지도 뷰에서 볼 수 있습니다.

탐색: 지도 뷰 ²

지도 상의 가격 버튼을 탭하여 숙소를 선택할 수 있으며, 빈 공간을 탭할 시 하단 숙소 카드없이 지도 전체를 볼 수 있습니다.

탐색: 검색 ²

홈 상단의 검색 바를 탭하여 검색으로 진입합니다. 모달이 최상단 레이어에 있는 듯한 비주얼을 통해 검색 단계에 있다는 느낌을 제공합니다.

탐색: 검색 필터 ²

검색 오른쪽의 필터 아이콘을 탭하여 조건을 설정할 수 있습니다. 공간의 유형이나 그래프를 직관적으로 파악할 수 있도록 배치하였습니다. 버튼의 크기나 배치가 큼직하여 선택이 용이합니다.

상세 페이지 ³

상세 페이지 진입 시, 번역 마이크로인터랙션 및 모달이 발생합니다. 세로로 스크롤 하여 정보를 확인할 수 있으며, 이미지 · 리뷰 등은 캐러셀을 가로로 슬라이드하여 넘겨볼 수 있습니다.

상세 페이지: 갤러리 ³

상세 페이지 상단의 이미지를 탭하여 갤러리로 진입합니다. 이미지를 탭할 시 상세 설명이 노출됩니다.

상세 페이지: 위시리스트 ³

상단 좋아요 버튼을 탭하면 위시리스트 생성 바텀 시트가 발생합니다. 생성을 완료하면 추가가 완료되었다는 스낵바가 발생합니다.

상세 페이지: 결제 ³

결제에 필요한 정보를 입력을 완료하면 예약이 완료되었다는 인터랙션 페이지가 발생합니다. 마지막에 이메일 주소를 입력하여 여행과 관련된 내용을 공유할 수 있습니다.

체험 ⁴

숙박 탭 오른쪽의 체험 탭을 눌러 액티비티를 탐색할 수 있습니다. 바텀 시트를 하단으로 드래그하여 지도뷰를 더 크게 볼 수 있습니다.

위시리스트 ⁵

GNB 두번재 위시리스트로 진입합니다. 위시리스트 저장 시 2단 카드뷰로 항목이 나타납니다.

다음 글에서 이어집니다

에어비앤비(Airbnb) ²

UI Insight 시리즈 01 | 여행 ⁶ 숙소나 체험 예약 시, 여행 탭에 해당 항목이 나타납니다. 여행 ⁶ 카드 컴포넌트를 탭하여 예약한 숙소나 체험에 대한 구체적인 내용을 확인할 수 있습니다. 여행:

brunch.co.kr/@hnjnkm/12

인터랙션 ★★★★★
부드러운 전환 마이크로인터랙션 · 크고 직관적인 정보 제공 · UI 요소 최소화가 특징적입니다. 상세페이지 스크롤 시 '흔치 않은 기회입니다'와 같은 예상하지 못한 디테일 요소로 하여금 완성도가 높다고 느껴지게 합니다.

직관성 ★★★★☆
일부 텍스트 내용 및 번역이 자연스럽지 않게 느껴지며, 스크롤이나 탭 등의 인터랙션 중 의도하지 않은 정보에 접근할 수 있는 가능성이 있습니다.