brunch

You can make anything
by writing

- C.S.Lewis -

by Bigpicture Jun 09. 2019

Case study #01 배달의 민족

국민 배달 앱 '배달의 민족'을 파헤쳐보자

안녕하세요, 주니어 디자이너를 위한 커뮤니티 Bigpicture 입니다.


배달앱 시장은 특히 올해 들어 폭발적인 성장세를 보이고 있는데요, 한국소비자단체협의회에 따르면 지난해 국내 배달앱 시장 점유율은 배달의 민족을 운영하는 우아한형제들이 55.7%, 딜리버리히어로는 요기요 33.5%와 배달통이 10.8%로 44.3%에 달해 뒤를 바짝 추격하고 있다고 합니다. 특히 배달의 민족이 지난 10일 공개한 자료에 따르면, 월간 순 방문자 수는 1000만 명, 월간 주문 수는 2900만 건에 달했다고 합니다. 출처 : 스마트 경제(http://www.dailysmart.co.kr)



그래서 요즘 핫하게 떠오르는 배달의 아이콘, 배달의 민족 앱에 대한 케이스 스터디를 진행해보았습니다. 4월부터 약 두 달에 걸쳐서 배달의 민족 서비스를 사용하면서 배달의 민족 앱만의 서비스 차별점과 방향성을 UX와 GUI 측면에서 조목조목 뜯어보았습니다.


*본 케이스 스터디는 iOS 기준으로 조사되었습니다.





# App Overview


예전 배달의 민족 앱 모습


예전 배달의 민족 앱 기억하시는 분들 계신가요? 당시에도 타 경쟁사와는 사뭇 다른 UI를 선보이며 이목을 끌었었는데요, 이때와 지금의 배달의 민족은 무엇이 달라진 걸까요?






01. 메뉴 나열 방식의 변화


(좌) 이전   (우) 현재


우선 처음으로 보이는 차이점 중 하나는 바로 메뉴 나열 방식의 개선입니다. 과거에도 배달의 민족 앱은 단순 리스트 형식이 아닌 큼직한 메뉴 버튼 디자인과 독특한 UI으로 주목을 받았었는데요, 현재 화면에서는 메뉴명보다 메뉴에 대한 그래픽 이미지를 더 비중 있게 보여주고, 2 그리드에서 3 그리드로 변경함으로써 더 많은 정보를 한눈에 직관적으로 볼 수 있게 디자인 개선을 한 것을 발견할 수 있었습니다.


또한, 최근 화면에서는 새롭게 추가된 배달의 민족 서비스인 '배민 라이더스'와 '1인분' 메뉴를 앞단에 추가한 모습도 볼 수 있는데요. '배민 라이더스' 서비스를 통해 기존에 배달이 되지 않던 레스토랑의 음식에 대한 배달 한계를 해결해주었으며, '1인분' 서비스를 통해 급격하게 상승하는 1인 가구의 타깃 고객층의 불편을 해소시킬 수 있었습니다.


2018년 한 기사에 따르면, 실제 '1인분' 서비스 도입 이후 가맹업체 주문 건수가 도입 이전 대비 평균 40% 이상 증가한 것으로 나타났는데요, 이처럼 소비자뿐만 아니라 가맹업주에게도 수익 증가로 이어지게 하고자 하는 모습을 확인할 수 있었습니다.






02. 기존 배달 앱의 한계를 뛰어넘은 피드화


배달의 민족 앱 스크롤 시 나타나는 큐레이팅 피드


배달의 민족 앱을 열어 천천히 스크롤을 해보면, 다음과 같은 순서로 경험을 하게 됩니다: 최상단 영역에서 매월 다른 콘셉트로 활발하게 진행되고 있는 배달의 민족 광고가 보이고, 그다음으로 가장 큰 영역을 차지하고 있는 메뉴 선택 섹션, 그리고 '오늘 이거 어때요?'라는 제목으로 자리 잡고 있는 큐레이션 피드, 마지막으로는 '혹시, 아직 못 고르셨나요?'라는 제목으로 메뉴별 카테고리를 확인할 수 있습니다. 여기서 두 가지 특징을 발견할 수 있었습니다.






배달의 민족 앱의 부분적인 화면들


첫째는 이탈 방지를 위한 UI입니다. 메인화면만 보아도 이탈 방지에 신경을 썼다는 느낌을 받을 수 있었습니다. 우선 모바일 화면에서 하단에 더 보일 콘텐츠가 있다는 것을 조금 잘린 힌트 부분을 통해 암시하여 스크롤을 유도하는 것을 확인할 수 있었습니다. 또한, 최상단 스크롤 시에는 새로고침을 표현하는 인터렉션으로 움직이는 음식 gif와 함께 '땡겨요'라고 표기하였는데요, 사용자에게 로딩 과정을 더 재미있게 경험할 수 있도록 한 것이죠. 최하단에는 상단에 크게 보여주었던 메뉴 카테고리를 조밀하게 한 번 더 배치한 화면이 있는데요, 피드를 지나 다시 위로 올라가지 않아도 메뉴를 선택할 수 있게 하여 체감상 더 빠른 메뉴 선택이 가능했습니다.








Connector에서 Curator로 나아가는 배달의 민족


두 번째는 큐레이션 피드입니다. 배달의 민족이 선택한 큐레이션 피드는 기존의 형식적인 정보만 고객에게 전달하는 매개체로 사용되던 배달 앱의 한계를 뛰어넘었던 새로운 도전이었던 것과 동시에 배달의 민족만의 감성이 잘 담겼기에 특별했습니다.


본래 큐레이션이란 다른 사람이 만들어놓은 콘텐츠를 목적에 따라 분류하고 배포하는 일을 일컫는데요, 콘텐츠가 많아질수록 선별된 양질의 정보에 대한 수요가 커지며 큐레이션은 이런 수요를 충족시키기 위해 더욱 필요하다고 합니다. 이러한 맥락에서 이전에 배달의 민족 앱이 단순이 가맹점과 고객을 이어주는 연결 수단으로써의 역할만을 담당했다면, 이제는 가맹점의 콘텐츠 없이도 소비자와 바로 연결된 수 있는 배달의 민족만의 자체 콘텐츠를 생산해낸 셈이라고 볼 수 있겠습니다.







배달의 민족 '오늘은 이거 어때요?' 큐레이션


큐레이션 영역에서 해쉬태그를 이용하여 제목을 사용하는 모습이나 말투를 통해 배달의 민족 브랜드 감성이 조금 녹여진 큐레이팅이 되었다는 느낌을 받을 수 있었습니다. 그런데 케이스 스터디를 하면서 어쩔 땐 '오늘은 이거 어때요?'나 ' 이런 것도 배달돼요?!'등의 큐레이팅 피드가 생성되지 않는다는 것을 발견하였는데요, 배민 라이더스가 제공되지 않는 시간대나 지역에 한해서는 큐레이션을 제한하는 것 같았습니다.







배민 라이더스 큐레이션 피드


어찌 되었건 큐레이션을 통해 피드 형식으로 음식점과 메뉴를 보여줌으로써 배민 라이더스를 사용하는 가맹점주들에게도 플러스 요인이 되지 않았나 싶습니다. 적절한 주제 아래에 함께 보임으로 자연스럽게 가게 홍보를 할 수 있게 되었기 때문이지요.








Apple의 Appstore APP 화면


애플 앱스토어 앱에서 배달의 민족 앱과 비슷한 변화의 사례를 확인할 수 있었습니다. 과거의 앱스토어는 사용자와 애플리케이션을 다운로드할 수 있도록 하는 연결 수단(connect)이었지만, 최근 앱스토어 메인 화면에서 매거진 형식의 콘텐츠를 보여주며 다양한 애플리케이션을 소개하는 큐레이터(curator)로써의 모습을 선보입니다. 이는 꽤 커다란 변화인데요. 사용자가 원하는 애플리케이션만 단순히 다운로드하던 지난날과는 다르게, 현재는 앱스토어 큐레이션 피드를 통해 새로운 애플리케이션을 접할 수 있게 되었기 때문입니다.













#UI Overview


1. 4개의 탭



배달의 민족은 홈, 찜한 가게, 주문내역, My 배민으로 총 4개의 탭을 가지고 있었습니다.





2. 각 탭의 IA 구조



배달의 민족 앱 IA (2019.4 기준)






#Ordering Process



1. 앱 진입 및 메뉴 탐색


메뉴 선택 및 목록 설정 화면

이런 점이 좋았어요:

메뉴 선택 후 진입한 화면(중앙)에서 우측 상단 ‘목록 설정’ 버튼으로 사용자가 상점 목록 분류 기준을 선택 가능하며, 분류 기준을 두 가지로 두어 세분화가 되어있었습니다.

가게마다의 평점, 리뷰 수, 대표 메뉴가 한눈에 보입니다.


이런 점이 의외였어요:

스마트오더 가능한 가게 분류 기준은 제외되어 있었습니다.

최근에 새로 생긴 Take out 가능 가게에 대한 여부는 가게 상세 페이지로 진입해야 보이고 최초 가게 탐색 화면에서 노출이 되어있지 않았습니다.




2. 검색

배달의 민족(좌), 요기요(가운데), 우버 이츠(우)

이런 점이 의외였어요:

원하는 가게를 바로 찾을 수 있도록 검색 기능을 제공하고 있었지만, 생각보다 검색 기능을 바로 찾을 수 없었습니다. 스크롤을 내려야 보이는 하단 영역에 검색창이 위치하고 있었습니다. 타 동일업종 서비스 앱에서는 보통 검색 기능을 상단이나 하단 앱 바에 두어 쉽게 찾을 수 있게 두었기에 이러한 배달의 민족의 선택이 더 의외로 다가왔습니다.






3. 가게 상세 및 메뉴 선택



이런 점이 좋았어요:

메뉴 탐색 시 우측 패스트 스크롤 UI를 활용해 퀵하게 카테고리별 이동이 가능합니다.

특정 메뉴에 대한 공유 기능이 있었습니다.



이런 점이 의외였어요:

특정 메뉴에 대한 찜하기 기능이 있을법한데 없었습니다.






4. 장바구니


장바구니에 메뉴 담기 시 화면


이런 점이 좋았어요:

토스트 팝업이 중앙에 떠서 다음 액션에 대한 화면이나 버튼을 가리지 않아 좋았습니다.


이런 점이 의외였어요:

장바구니 버튼은 장바구니 추가할 경우에만 생성되었습니다.

보통 장바구니에 아무것도 담겨있지 않아도 장바구니 상세페이지 진입이 가능한데, 장바구니에 무언가 담겨있어야만 장바구니 상세페이지로 진입할 수 있도록 설계한 점이 특이했습니다.






장바구니 페이지

이런 점이 좋았어요:

각 메뉴의 수 변경 및 삭제가 용이한 UI를 제공하였습니다.

담은 메뉴 하단에 ‘+ 더 담으러 가기'로 장바구니와 가게와의 이동도 편리하게 제공하였습니다.

하단 버튼에서 담은 메뉴 수와 총가격이 표기되었습니다. 그리고 메뉴를 더 추가 시 계속 변경되어 표기되었습니다.

주문하기 버튼 클릭 시 배달정보 입력하는 페이지로 이동하였습니다.



이런 점이 의외였어요:

오직 한 음식점에서 고른 메뉴만 장바구니에 담겼습니다.

타 음식점에서 고른 메뉴들과 동시 주문 불가하였습니다.







5. 결제


#배달정보 입력 및 결제화면


이런 점이 좋았어요:

배달정보 입력 간단한 배송정보 입력만으로 주문이 가능했습니다.

결제에서 중요한 정보는 눈에 띄게 배치되어 오입력을 막을 수 있었습니다.

주문 완료 시 ‘접수대기 중' 페이지가 호출되고 바로 카카오톡 플러스톡 메시지가 수신됩니다.

글씨가 커서 너무 접수대기 중인 줄 잘 인지가 되네요.

주문내역 보기, 홈으로 돌아가기, ‘X’ 등 이후 진입경로 3개 뚫어놓았습니다.




6. 주문내역 확인


이런 점이 좋았어요:

주문내역 페이지에서는 ‘오후 8:04 도착 예정' 등으로 예상시간 표기되었습니다. (보통 예상시간보다 일찍 도착함)    

My 배민 주문내역에서 원형 그래프로 진행 프로세스를 표기해줌으로 배달이 어느 정도 되고 있는지 알 수 있었습니다. (주문 완료 시 원형 프로세스 바가 사라짐)





7. 리뷰 작성


배달의 민족 가게 리뷰 화면과 앱 리뷰 화면

이런 점이 좋았어요:

총 리뷰수, 리뷰 통계 정보 제공, 도움돼요 기능을 통한 리뷰에 대한 공감 표시 가능했습니다.

리뷰 작성 시 '사장님에게만 보이게’라는 독특한 기능이 있었습니다. 살펴보니 사장님에겐 고객과의 소통 창구가 될 수 있고 유저에겐 어떤 의견도 자유롭게 전달할 수 있도록 만든 특별한 기능이었습니다.

*리뷰는 배달의 민족 앱에서 굉장히 중요한 콘텐츠 영역이며 가게 사장님들 또한 좋은 리뷰를 유치하기 위해 리뷰를 작성할 수 있는 바로 결제 시 이벤트를 통한 많은 혜택을 제공하고 있습니다. 그러나 리뷰의 내용에 따라 배달 건수가 크게 좌지우지되는 이슈가 있었습니다. 그래서 배달의 민족은 '사장님에게만 보이기' 기능을 통해 유저가 본인의 보이스를 전달하고자 하는 니즈는 충족시키되, 사장님이 겪을 손해를 최소화하고 있는 것으로 보입니다.



이런 점이 의외였어요:

허위 리뷰 근절을 위해 만나서 결제는 리뷰를 작성할 수 없었습니다. (포인트 혜택을 받지 못함)





8. 포인트 및 쿠폰


배달의 민족 포인트 및 쿠폰 화면

이런 점이 특이했어요:

업체별로 쿠폰을 제공하는 곳이 있습니다.

만나서 결제의 경우 쿠폰 적용이 되지 않았습니다. 결과적으로 앱 내에서 결제를 완료해야 할인 혜택을 적용받을 수 있기 때문에, 바로 결제가 혜택이 더 많다고 느낄 수 있습니다.









#배달의 민족 앱만의 차별점 5가지


1.  배달의 민족 캐릭터의 적극적 사용

이곳저곳 숨어있는 배달이





2. 서비스 타깃에 최적화된 말투

주문내역 페이지의 '헐'(좌측),   약관 동의 페이지의 '맛있는 여행이 시작됩니다'(중간)  '공복 채움 지원비' 배너(우측)





해쉬태그로 주목 끌기





3. 센스 있는 마이크로 인터렉션


페이지 당겨요 인터렉션


당겨요 인터렉션 : 리프레시 인터랙션을 ‘음식이 당긴다’ 표현과 ‘화면을 당긴다’는 표현을 중의적으로 사용하여 재치 있게 표현




메뉴 탐색 패스트 스크롤(Fast Scroll)




메뉴 탐색 패스트 스크롤: 메뉴 탐색 시 카테고리별로 퀵하게 이동할 수 있는 패스트 스크롤 기능을 제공




배민 라이더스로 접수 완료 시 보이는 인터렉션

 배민 라이더스 주문 시 화면: 브랜드 아이덴티티가 드러나는 인터랙션을 통해 배달 현황을 직관적으로 전달





4. 사소한 UI 경험에 대한 디테일


# 제한 상황에 대한 서비스 안내 배너

제한 서비스에 대한 설명 디테일





# 특정 상황에 따른 배달 지연 안내 배너

(좌) 날씨로 인한 배달 지연 안내   (우) 주문 폭주로 인한 지연 안내





# 빈 화면 안내 문구와 그래픽

Empty Page 및 네트워크 오류 시 화면






# 19세 이상 주문건 담았을 때 안내






5. 실험적 테스트 서비스들


강남구에서만 보이는 '배민 마켓'




배민 스마트오더





화제의 맛집





#5 마무리하며


배달의 민족 앱 케이스 스터디를 마무리하며 함께 진행한 멤버들에게 자유롭게 어떤 생각이 들었는지 물어보았고, 다음과 같은 말들이 나왔습니다.


"UX 라이팅이 특이했던 것이 인상 깊었어요."

"무엇이든 큼직큼직하게 사용한 것 같아요"

"사용자로 하여금 인간미가 느껴지게 한 것 같아요..!"

"다양한 실험을 하고 있었다..?"

"빠르게 여러 가지를 시도해본다는 느낌을 받았어요."

"서비스가 성장하려면 지속적인 도전이 필요하다는 점을 느낀 것 같아요."

"지금쯤 되니 내일은 어떤 업데이트가 나올지 궁금해집니다..ㅎㅎ"



아무튼 배달의 민족 앱에서 평소에 자세히 보지 않았던 부분들도 다양한 방법으로 다시 눈여겨봐가며 재밌게 케이스스터디를 진행했던 것 같습니다. 최근 시도하고 있는 배민 마켓, 서빙로봇 등을 통해 앞으로 음식 배달이라는 산업군에서 라이프스타일을 바꿀 수 있는 서비스로 확장하려고 하는 모습을 보이고 있는데, 앞으로 앱에서의 UX/UI의 변화와 더 나아가 미래 대한민국의 배달 시장과 문화를 어떻게 이끌어가게 될지 기대가 됩니다.





[ Editor ]

임은주  https://www.behance.net/eunjoolim

최고운  https://www.facebook.com/woon1878

김시내  https://www.facebook.com/o2taewoo

고희진  https://www.facebook.com/designerhee

박현정  https://www.facebook.com/hyunjung.park.3990

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari