by
Apr 09. 2022
[디자인 스터디-01] 배민, 처음으로 들여다보았다
UI∙UX 초심자 모트모트 브랜드 디자이너, 배달의민족 씹고 뜯고 맛보기
안녕하세요. 모트모트의 브랜드 디자이너 수지입니다.
모두 아시다시피(:D) 모트모트에도 멋진 프로덕트가 있습니다. 바로 올 1월 런칭된 목표 달성 앱 ‘올클’이에요. (벌써 다운로드 약 3만, 월간 사용자 16,000명으로 활발히 서비스 중!)
올클은 ‘미션’을 통해 같은 목표를 가진 유저와 함께 성취할 수 있는 서비스를 제공합니다.
모트모트만의 노하우로 탄생한 올클이 조금 더 궁금하시다면 아래 링크를 참고해주세요:)
https://bit.ly/allclapp
올클을 꾸려가며 브랜딩과 함께 UI UX적으로도 고민을 하던 중, 지난해 큰 개편이 있었던 배민을 들여다보고 공부하기로 합니다.
두둥!
열며 - 배달의민족, 들여다보았다.
2021년 6월, 우아한형제들은 11년 만에 배달의민족(이하 배민) 앱을 전면 개편했습니다.
그동안 배민은 월 2천만 명이 이용하는 배달/식음료 카테고리 부동의 1위 앱이 되었어요. 오랜만의 개편인 점, 그리고 폭발적으로 많아진 유저 수 탓에 이번 개편에서 ‘어느 앱보다도 쉬워야 한다’는 미션이 있었을 것입니다.
기술적인 측면에서도 흥미로운 것이 많았지만 오늘은 배민의 그래픽과 UI, UX writing을 두루 살펴보려고 합니다.
배민은 익히 알려진 것처럼 장난기 넘치는 그래픽과 위트 있는 카피 등이 특징적입니다. 이전엔 표면적으로만 알아왔다면, 앱을 찬찬히 들여다보니 브랜딩 측면의 고민, 그리고 소비자의 터치포인트를 전략적으로 고려한 UX writing 등이 눈에 띄더라고요. 함께 볼까요?
시그니처 그래픽, 수작업 끝판왕 ‘배달이친구들’과 음식 뱃지
앱 구석구석에서 찾아본 '배달이친구들'. 주로 '독고배달이'가 등장한다.울퉁불퉁 개성 넘치는 쉐입이 매력적인 배민의 캐릭터 ‘배달이친구들’.
배민의 그래픽은 지점토, 금속 등 실물 질감을 바탕으로 합니다. ‘배달이친구들’도 스컬피를 다듬어 촬영하고, 디지털 후가공을 통해 만들어져요. 현재는 그 비중이 줄었지만 전단지를 그대로 옮겨온 듯한 배민의 초창기 UI와 연결됩니다.
지금도 앱 내 어디든 뱃지 심볼과 질감이 도드라지는 캐릭터를 만날 수 있어요. 캐릭터는 브랜드에 친근한 인상을 부여하는 데에 간편하고 효과적인 수단이 되어줍니다. 그렇지만 그에 비길 만한 리스크도 가지고 있어요.
각각 배민1 메인 화면, 그리고 홈 화면의 뱃지 그래픽. 만져질 듯 생생하고, 금속 재질임에도 맛있어 보인다.브랜드의 인상과 직결되는 캐릭터의 정체성이 불분명하다면?
고객들은 캐릭터를 보고 브랜드를, 브랜드를 보고 캐릭터를 떠올리지 못하고 브랜딩 효과는 보기 어려울 거예요.
스토리텔링에 관한 고민이 부족해 납작한 캐릭터로 고객에게 보인다면?
외관의 매력만으로 취할 수 없는 깊은 브랜딩 영역까지 닿지 못하고 고객들은 금세 흥미를 잃을 것입니다. ‘덕질’이라고 하지요?
한 브랜드의 캐릭터도 덕질의 대상이 되는 요즘, 탄탄한 정체성이야말로 캐릭터에게 빼놓을 수 없는 요소라고 할 수 있겠네요.
‘배민1’과 ‘배달’ 버튼으로 보는 사용자 맞춤 UI
경기 일산에서는 '배달'이 앞에, 서울 중구에서는 '배민1'이 앞에.집과 회사에서 배민을 이용하며 발견한 것인데요,
홈 화면에서 ‘배민1’과 ‘배달’ 중 더 우세한 쪽을 왼쪽에 띄워주는 것을 알고 계셨나요?
경기 일산에 사는 글쓴이의 집에서는 배달-배민1 순으로, 서울 중구의 모트모트에서는 배민1-배달 순으로 노출됩니다. 우세 지표의 기준은 공개된 바가 없지만, 업체 보유량 내지는 배차 가능성이 높은 순이라고 추측할 수 있습니다.
이렇게 이용자의 위치에 맞추어 버튼의 배치를 다르게 띄운 것에서 섬세함을 느낄 수 있었습니다. 전국 어디서나 이용할 수 있는 서비스다 보니, 배민1 업체가 거의 입점해있지 않은 지역에서는 고객 경험이 현저히 떨어질 것이고 앱의 전체적인 경험에서 부정적인 영향이 있을 것이라 판단한 것이겠지요?
(추가적으로, 소비성향 데이터에 기반하여 ‘배달’과 ‘배민1’에서 각각 음식 카테고리 순서가 다르게 배치되어 있습니다. 뜯어볼수록 흥미로운 배민의 UI☺️)
'배달'과 '배민1'에서 서로 다른 음식 카테고리 배치.한 스푼의 킥, UX writing
(왼) B마트-'카테고리 전체 보기' 화면 / (오) B마트 메인 화면.본격적으로 앱을 들여다보기 전에는 ‘우리가 아는 배민의 이미지대로 재미있고 위트 있는 말투가 많지 않을까?’ 싶었습니다.
하지만 실제로는 완전히 달랐어요.
요약하면, 강약 조절이 절묘했습니다. 필요한 말만 건조하게 내놓다가도 배민의 아이덴티티가 되는 장치나 위치에서는 요리의 킥처럼 개성이 묻어나는 어투, 단어가 어김없이 등장했습니다.
가장 흥미로웠던 부분이 이 지점이었습니다. ‘배민’하면 떠오르는 이미지가 직접적으로 드러난 곳은 전체 비율에서 10퍼센트가 채 되지 않았어요.
배민은 이용 연령층이 넓어 앱에 기대하는 바 역시 개개인마다 다릅니다. 단순 나이로 가름할 수 없는 이용 유형도 있을 거예요. 또, 지금의 배민은 업력이 쌓여 어투가 정제되어 있습니다.
하나만 살펴보겠습니다. 미니배너 하나도 말 걸듯 작성한 점이 인상적이에요. ‘신상-새로 나왔어요’, ‘인기-잘 팔려요’ 등 필요한 정보에, 이해를 돕는 보조 단어가 조미료처럼 주재료인 핵심 단어를 잘 보조합니다. 군더더기 없어서 효과적이고, 직관적이고, 눌러보고 싶게요.
디자인 기초 이론 중, 무의식에 각인되는 포인트 컬러가 전체 컬러 비중에서는 고작 5~10%라는 점과 닮았다는 생각이 들었습니다. ‘우린 이런 서비스야’를 말하기 위해 모든 요소를, 모든 곳에 도배할 필요는 없겠다고요.
배민의 당겨서 새로고침(pull to refresh) UI. '(음식 등이) 당기다'의 잘못 쓴 표현인 '땡기다'를 위트 있게 활용했다.