굿바이 우버이츠, 한국 대표 배달앱과 다른 그림 찾기
[UI 톺아보기 시리즈] 음식 배달 서비스 (1)
[안내] 본 글은 앱을 하나씩 선정해서 화면 인터페이스를 톺아보기(=샅샅이 훑어 가며 살피기) 위해 기획한 "UI 톺아보기 시리즈"입니다. 글 내용은 UI 분석에 초점이 맞춰져 있음을 미리 밝혀 드립니다.
지난번에 다룬 시리즈 첫 번째 주제인 "메신저" 서비스에 이어서, 이번에는 최근 앱 마켓에서 핫이슈로 부상 중인 "음식 배달" 서비스에 대해 살펴보겠습니다.
배달의 민족, 배달 공화국
국내 배달앱의 선두주자였던 배달의 민족의 꾸준한 성장세 및 확장과 함께, 유사 앱 서비스의 등장과 최근 치열해진 새벽 배송 전쟁까지... 가히 대한민국은 배달의 민족이자 배달 공화국이라고 할 수 있습니다.
지난 4월 발행된 오픈서베이 배달 서비스 리포트에 따르면, 배달 서비스 이용자 중 절반 이상은 일주일에 한 번 이상 배달 서비스를 이용하고 있으며, 앞으로 젊은 층을 중심으로 집에서 먹는 일상식 해결을 위해 서비스 이용 빈도가 증가할 것이라고 전망했습니다. 타임라인만 정리해봐도 점점 치열해지는 배달앱 시장의 열기를 느낄 수 있습니다.
음식 배달앱 출시 타임라인크라우드 소싱이라는 배달 파트너 플랫폼으로 배달 앱 시장에 출사표를 던졌던 UberEats는 기술을 통한 차별화로 기대와 관심을 모았지만 음식점(콘텐츠), 주문량 확보 등에서 고전을 면치 못하더니 최근 쿠팡이츠가 가세하면서 음식 배달 시장의 경쟁 과열로 인해 결국 한국 철수를 결정하게 되었습니다.
곧 한국에서 이별을 고하게 될 UberEats의 UI를 뜯어보고, 국내 배달앱 3사(배달의 민족, 요기요, 쿠팡이츠)와 비교해서 공통점과 차이점이 무엇인지 살펴보도록 하겠습니다.
앱의 기본 골격, 메뉴 구조
우선 앱의 기본 뼈대인 메뉴를 살펴보겠습니다. UberEats처럼 음식 배달앱의 경우 사용자는 크게 (1) 메뉴 고르기 (2) 주문하기 (3) 배송 완료의 고객 여정을 거칩니다. 해당 관점에서 UberEats의 메뉴는 고객 여정을 따라 잘 설계된 사례입니다.
메인 메뉴에서는 사용자에게 음식점을 소개하고, 원하는 메뉴가 있는 사용자에게는 검색 메뉴를 제공하며, 진행 중인 주문과 이력을 보기 위한 주문내역 메뉴와 결제, 쿠폰 등 개인정보를 입력할 수 있는 MY 메뉴로 필요한 메뉴가 적절한 위치에 구성되어 있습니다.
유사한 메뉴 구조국내 배달앱 3사의 앱을 살펴보면, 쿠팡이츠와 요기요는 UberEats와 동일한 메뉴 구조를 따르고 있습니다. UberEats의 경우 메뉴는 아이콘으로만 제공하고 라벨을 따로 표시하지 않는데 글로벌 대응을 용이하게 하기 위한 것으로 보입니다.
배달의 민족 메뉴 구조와 메인 화면의 검색창그런데, 배달의 민족만 특별하게 '찜한가게' 그러니까 '즐겨찾기' 메뉴를 별도로 제공합니다. "배달앱 사용자는 자주 주문하는 가게에서 또 주문할 것이다"라는 가설이 반영된 것으로 보입니다.
특히, 검색 기능은 메인 화면에서 스크롤을 내려야 보이게 두었는데, 실제 앱 사용 중 음식점을 검색하는 행위가 빈번하게 일어나는 것을 볼 때 다소 찾기 어려운 곳에 검색 메뉴를 배치한 것이 좋은 선택인지는 의문입니다.
(꿀팁! 앱 사용자 행동 분석툴인 유저해빗을 이용하면 앱 유저의 이탈 패턴을 파악할 수 있답니다!)
가장 중요한 정보는, 가장 잘 보이는 곳에
메인화면 가장 상단에 노출된 주소 정보모든 배달앱에서 주소 정보는 가장 상단에 노출되어 있습니다. 서비스를 사용하는 데 있어 가장 중요한 정보이기 때문이죠. 해당 메뉴를 클릭하면 주소를 설정할 수 있는 것도 모두 같고요.
UberEats의 주문 예약 옵션UberEats의 경우 추가로 '주문 예약' 옵션을 제공하고 있습니다. 타 앱을 이용했을 경우 예약 옵션이 없기 때문에 주문 시 "O시까지 배달해 주세요" 하고 메모를 남겨놓은 적이 있는데, 확실히 확인하기 위해 전화를 걸어서 중복으로 체크했던 경험이 있습니다. 예약 옵션을 제공하면 주문을 하는 손님이나 주문을 관리하는 업체 입장에서도 모두 편리할 것 같네요.
배너 크기는 클수록 좋다?!
실제 배달앱 고객들은 할인 혜택 등에 민감하게 움직이기 때문에, 혜택 정보를 잘 보이게 전달하기 위해 배너를 적극 활용하고 있습니다. 일반적으로 서비스와 관련 없는 성격의 광고를 노출하는 타 앱과 구별되는 부분입니다. 광고 수익 없이도 자체 서비스로 수익을 내는 서비스이기 때문에 가능하겠죠.
또, "배달이 늦어지고 있다"는 안내나 배달원 모집 등의 서비스 공지도 함께 제공하고 있습니다. 정보성 성격의 콘텐츠 때문에 크기가 커도 크게 거슬리지 않습니다. 따라서, 모든 앱에서 배너가 꽤 많은 영역을 차지하고 있습니다.
배달 앱 메인화면 내 배너 크기 비교크기 순으로 비교해보면 UberEats ≧ 배달의민족 > 쿠팡이츠 > 요기요입니다.
요기요는 상대적으로 배너의 높이가 작아서 텍스트를 최대 2줄까지 넣을 수 있지만, 쿠팡이츠와 배달의 민족은 3줄, UberEats는 4줄까지 작성해서 좀 더 많은 정보를 전달하고 있습니다.
개인적으로는 자체 폰트와 캐릭터를 활용해 배너 이미지의 일관성을 유지하고, 전체 보기 버튼을 제공해 클릭하면 한눈에 볼 수 있게 이벤트 페이지를 별도로 제공하는 배달의 민족의 배너에 높은 점수를 주고 싶습니다.
국내 배달앱의 음식 카테고리
메인화면에서 또 하나 눈여겨 볼 점은 배달의민족, 요기요, 쿠팡이츠 모두 음식 카테고리를 메인화면에서 제공하고 있다는 것입니다.
메인 화면의 음식 카테고리 UI쿠팡이츠의 경우 1열로 슬라이드 가능한 UI를 제공해서 한 번에 4~5개의 카테고리를 확인할 수 있는 반면, 요기요와 배달의민족은 10개 이상의 메뉴 카테고리를 타일형 UI로 제공하고 있습니다. 한국인은 '점심 메뉴를 카테고리(한식, 양식, 중식 등)부터 고른 다음 세부적으로 결정한다'는 가설을 따랐다고 볼 수 있겠네요.
카테고리를 먼저 제공한다면 음식을 어떻게 분류하는지가 중요할 겁니다. 아래 각 업체마다 카테고리를 정리해놓은 것을 보시면, 업체마다 제공하는 메뉴 카테고리가 조금씩 다릅니다. 1인분, 야식 등의 메뉴 구분은 음식 메뉴를 최적화해가려는 흔적으로 보입니다. 그런데, 카레라이스는 한식일까요, 양식일까요..?
업체별 음식 카테고리 비교 (색칠된 부분은 해당 업체에 특화된 카테고리)UberEats의 개인 데이터 최적화
국내 배달앱과 달리 UberEats에서 가장 눈에 띄는 부분은 개인 데이터에 최적화된 메인화면 구성입니다. 메인 화면을 보면 음식 카테고리 대신, "사용자가 즐겨찾기 한 음식점 리스트"가 가장 먼저 제공되고, 기타 추천 음식점 리스트를 접속 시간대마다 순서를 바꿔가며 제공합니다. 음식점 개수가 워낙 많다 보니 추천리스트를 몇 가지 나누어서 제공하는 것이 일반적인 형태입니다.
UberEats의 개인 데이터 최적화 사례리스트 중에서도 "할인 중인 음식점", "배달 시간이 빠른 음식점", "(각 업체별) 추천 음식점" 등의 큐레이션은 다른 앱에서도 제공하고 있지만, UberEats의 경우 "즐겨찾기 한 음식점 리스트"와 "내가 주문했던 음식점을 주문한 다른 고객이 즐겨 찾는 음식점 리스트" 등의 개인에게 최적화된 추천 항목을 제공하고 있습니다.
사용자의 데이터에 기반해 최적화된 정보를 추천해주고 있고, 해당 항목을 선택해서 주문까지 이어진다면 정확도를 높이는 식으로 데이터를 학습시킬 것입니다. 추천의 정확도가 높을수록 주문량도 높아지고, 고객도 메뉴 고민에 대한 시간이 줄어들 것입니다. 업체에서 데이터를 쌓고, 해당 데이터를 어떻게 활용해 낼 것인지를 UI로 잘 풀어낸 좋은 사례인 것 같아서 소개합니다.
음식점 리스트에 노출되는 광고 (배달의 민족, 요기요)참고로, 배달의 민족과 요기요의 경우 카테고리를 선택하면 표시되는 리스트 화면에서 광고 상품(음식점)을 먼저 노출합니다. 수익모델을 위한 선택이겠지만 사용성 부분에 있어 만족스러운지는 고민해 볼 여지가 있습니다. 업체 간 광고료 경쟁을 촉발시킨다는 비판이 있자 지난 3월 배달의민족에서는 입찰 경쟁을 통해 음식점을 노출하는 최상단 광고 상품인 슈퍼 리스트를 폐지하기로 과감히 결정하기도 했죠.
UberEats가 "알아서 추천해주는" 친구라면, 다른 배달앱은 "어떤 종류가 땡겨? 한식? 양식? 일식?" 하고 질문한 다음 카테고리를 고르면 "이 (광고) 업체 전단지 한 번 볼래?" 하고 슬쩍 들이미는 친구라고 할 수 있습니다.
까다로운 사용자를 위한 배려, 필터
필터는 눈에 확 띄지는 않지만, 서비스 기획을 하거나 UI를 그릴 때 상당히 고민이 많이 필요한 요소입니다. 배달앱에서는 필터를 어떻게 제공하는지 가볍게 살펴보겠습니다.
다른 업체에도 리스트 메뉴에서 필터를 제공하고 있는데, UberEats의 경우 메인화면에서 주소 다음으로 필터를 배치할 만큼 중요도를 높게 두고 있습니다. 서비스에서 제공하는 추천 리스트보다 좀 더 적극적으로 메뉴 탐색을 원하는 사용자를 위해 제공하는 옵션으로 보입니다.
UberEats의 필터 항목필터를 열어보면 추천 메뉴(기본값), 인기 많은 순, 별점 높은 순, 배달 빠른 순의 분류를 제공하고 있으며, 요금 범위와 식단을 추가적으로 제공하고 있습니다. 요금 범위의 경우 정확한 금액 범위가 표시되지 않아 오히려 정확한 금액을 제공할 경우 좀 더 활용성이 높을 것 같다는 생각이 들었습니다. 또, 해외에서 많이 볼 수 있는 글루텐 프리, 비건 등 음식 성분에 대한 옵션도 제공하고 있습니다.
쿠팡이츠, 요기요의 리스트 필터, 배달의민족 리스트 필터와 일회용 안 쓰기 옵션다른 앱들의 필터도 한 번 살펴보세요. 요기요와 배달의민족은 결제수단 기준으로 필터링을 제공하고 있는 점이 눈에 띕니다. 또, 최근 환경보호에 대한 경각심이 커짐에 따라 일회용 수저 받지 않기와 같은 옵션이 추가되기도 했습니다.
요약
메인 화면을 위주로 살펴본 UberEats UI 특징을 짧게 요약해보면 다음과 같습니다.
고객의 사용 여정을 따라 심플하게 설계된 메뉴 구조
가장 중요한 주소 정보는 상단에 잘 보이게 배치
정보성 성격의 배너는 눈에 잘 띄게 영역을 넉넉하게 지정
수집한 데이터를 활용해 개인 사용자에 최적화된 콘텐츠(음식점 리스트) 제공
(국내 앱과의 비교포인트는 "음식 카테고리" 제공방식!)
까다로운 사용자를 위한 상세 필터(주문예약, 식재료 등) 옵션 제공
이어지는 다음 글에서는 상세 페이지와 주문하기 프로세스를 살펴보고 결론을 함께 도출해보도록 하겠습니다. 기대해주세요!
*글에 대한 의견이 있으시면 댓글과 피드백 자유롭게 부탁드립니다.
참고 자료
오픈서베이 배달 서비스 리포트: https://blog.opensurvey.co.kr/trendreport/delivery_2019/
우버이츠 한국사업 철수가 남긴 것: https://byline.network/2019/09/10-75/
배달의 민족 UX/UI 케이스 스터디: https://brunch.co.kr/@bigpic/21
우버이츠와 쿠팡이츠 UI 비교: https://brunch.co.kr/@mobiinside/1806
저자
윤하지 | @hotzzi
학부 시절 UX 디자인을 전공했으며, 독일 소재 IT기업과 프랑스 파리의 국제기구에서 근무하며 디자인 경력을 쌓았다. 지금은 서울에서 행동 데이터 분석 툴을 서비스하는 유저해빗에서 기획, 디자인을 맡고 있다.
▶︎ 다음 글 읽으러 가기
