서비스 또는 서비스 내 일부 기능을 기획, 설계하는데 있어 기존 사례를 살펴보는 일이 많은데요. (개인 기준이지만) 저는 그때 그때 필요한 앱을 받아 업무 목적으로 화면 녹화를 하거나 캡쳐 후 문서로 정리하는 편입니다. 벤치마킹의 일부이기도 하고, 지금 써보러 갑니다에 하나의 콘텐츠로 작성하기 위한 목적이기도 하고요. (예 : 기획자의 모바일앱 뜯어보기] #미니맵-디테일, #코끼리-명상앱의 의미, #위버스-FAQ 개선)

그리고 함께 활용하는 방법이 있다면, 화면을 다양한 방법에 따라 확인 할 수 있는 웹 서비스를 확인하는 방법입니다. 오늘 소개할 서비스도 그 중 하나로, ‘Uxarchive’는 특정 모바일 앱 서비스의 화면을 흐름에 따라 볼 수 있습니다.

좌측에 플로우를 확인 할 ‘기능 단위’ 카테고리를 확인 할 수 있어요

서비스 구성은 단순해요. 웹페이지 왼쪽에 예약, 삭제, 로그인/로그아웃, 온보딩 등 모바일 앱 서비스를 구성하는 중요 요소들을 메뉴로 확인 할 수 있고, 원하는 메뉴를 선택하면 서비스 별 확인이 가능합니다.

온보딩에서 딜리버루(Deliveroo) 서비스를 확인하는 모습이에요. 자세히 보면 화면 내 어떤 영역을 탭 했을 때, 어떤 화면으로 이동하는지 일련의 ‘흐름’을 볼 할 수 있는데요. 이 점이 Uxarchive의 가장 큰 장점이라고 할 수 있습니다. 단순히 온보딩 화면들을 나열한 것이 아니라 어떤식으로 이동하게 되는지, 어떻게 설계되어 있는지를 역으로 생각해볼 수 있기 때문이죠.

서비스를 클릭하면 상세 화면으로 이동하게 됩니다. 조금 더 큰 화면으로 사례를 확인 할 수 있고 사례에 대한 버전 정보와 등록 날짜를 확인 할 수 있어요. 재밌는 점은 이 내용 전체를 스크립트로 복사해 웹사이트 등으로 퍼갈 수 있다는 점입니다.

위의 내용이 실제로 코드를 복사해 워드프레스에 붙여넣은 모습!

이 글을 쓰는 날을 기준으로 182개 앱의 1197개의 플로우가 등록되어 있어 저도 한참을 둘러볼 수 있었는데요! 이메일 주소를 등록하면 새로운 플로우가 등록 될 때마다 알려주기에 정기적으로 사례들을 확인하고 공부할 수 있다는 점에서 더욱 매력적으로 느껴졌습니다.

전 세계 다양한 모바일 앱의 사례를 플로우 형태로, 상황에 따라 확인하고 싶으시다면 이 곳을 클릭해보세요!

함께 활용하면 좋아요!

지금 써보러 갑니다 뉴스레터를 통해서는 서비스 구성 요소와 관련된 에디터들의 팁과 실제 다양한 구성 사례를 함께 확인해볼 수 있어요. 최근 발행된 내용은 ‘통계 기능’이었습니다. 뉴스레터를 하나씩 살펴보면 로그인, 회원가입, 알림, 장바구니 등 특정 기능을 기획, 디자인하는데 필요한 구체적인 내용을 깊게 확인 하실 수 있을거에요! (구독하러 가기) – 2020.11.26 목요일 발행 예정 주제는 ‘각기 다른 모바일 앱으로 동일한 음료 메뉴 주문하기’ 입니다!