brunch

You can make anything
by writing

C.S.Lewis

by 김현준 Dec 29. 2023

에어비앤비(Airbnb) ²

UI Insight 시리즈 01

© 에어비앤비(Airbnb)

여행 ⁶

숙소나 체험 예약 시, 여행 탭에 해당 항목이 나타납니다. 



© 에어비앤비(Airbnb)

여행 ⁶

카드 컴포넌트를 탭하여 예약한 숙소나 체험에 대한 구체적인 내용을 확인할 수 있습니다. 



© 에어비앤비(Airbnb)

여행: 가이드북 ⁶

호스트가 제공하는 가이드북을 확인할 수 있습니다. 



© 에어비앤비(Airbnb)

메시지 ⁷

메시지 탭을 통해 호스트와의 대화 및 알림을 확인할 수 있습니다. 대화나 알림이 발생하면 리스트로 나열됩니다. 



© 에어비앤비(Airbnb)

메시지: 대화 및 공유 ⁷

호스트와 대화 시, 호스트의 현지 시간을 플레이스 홀더 위에 알려줍니다. 링크를 복사하거나 SNS로 공유할 수 있습니다. 링크 복사 후 토스트가 발생하여 즉각적인 피드백을 제공합니다.



© 에어비앤비(Airbnb)

프로필 ⁸

프로필 설정 및 각종 설정을 할 수 있습니다. 프로필을 제외한 설정 메뉴는 아이콘과 함께 가로형의 리스트로 구성됩니다. 로그아웃은 다른 설정과 다르게 텍스트 버튼으로 최하단에 배치되어 정보위계가 낮음에도 찾기 쉽게 배치되었습니다.



© 에어비앤비(Airbnb)

프로필: 본인인증 ⁸

본인인증을 위해 신분증을 촬영할 수 있습니다. 페이지 간 이동 시 로딩 인터랙션이 발생하여 진행되고 있다는 어포던스를 명확히 합니다. 사진 촬영 전 카메라 상단의 백드롭을 통해 정보를 제공하며, 신분증 촬영 후 추가촬영에 대한 검은배경의 별도 스크린을 제공합니다. 



© 에어비앤비(Airbnb)

프로필: 프로필 설정 ⁸

프로필 정보를 기입할 수 있습니다. 리스트 및 태그 컴포넌트(칩)에 아이콘을 일괄적으로 적용하여 일관성을 유지합니다. 사용자가 정보를 선택하거나 제출한 후에는 토스트를 통해 행위에 대한 피드백을 제공합니다. 라디오 버튼에는 체크 표시를 더해 정보를 더욱 명확하게 제공하고 있습니다.



© 에어비앤비(Airbnb)

프로필: 쿠폰 등록 ⁸

기프트 카드 및 쿠폰을 등록할 수 있습니다. 오입력 시, 별도의 모달 없이 인풋 필드 하단에 경고 메시지를 노출시킵니다.





인터랙션 ★★★★★ 
사용자의 행동과 페이지 진입 시, 대부분 짧은 모션의 마이크로인터랙션 피드백이 제공됩니다. 로딩되는 동안 진행 중이라는 어포던스를 명확히 할 수 있지만, 진입이 잦을 경우 귀찮게 느껴질 수도 있어보입니다. 하지만 모든 인터랙션이 사용자에게 적합한 피드백을 제공하고 있습니다.

직관성 ★★★★☆
앱의 특성 상, 제공해야할 정보와 리스트가 많지만 일관된 규칙(아이콘, 애로우 등)을 통해 복잡하지 않게 전달합니다. 최초 사용자에게는 정보구조가 다소 복잡해보이지만, 온보딩 이후 익숙해진다면 직관적으로 사용할 수 있습니다.






매거진의 이전글 에어비앤비(Airbnb) ¹
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari