배민 홈화면 개편 & 배달이 제작
우아한 콘서트 정리
if 카카오에 이어 기업마다 콘퍼런스를 열고 있어요. 긍정적인 회사 브랜딩에 도움이 되고, 실력 있는 개발 인재를 채용하기 위함인데요. 배민의 우아콘(우아한 콘서트)도 최근에 개최되었답니다. 개발 위주의 콘서트였으나 디자인과 관련된 강의도 있었어요.
이번 글에서는 우아콘의 디자인 강의를 정리해 보았습니다. 배민은 어떤 디자인 과정을 거쳤는지 알아보러 갈까요?
1️⃣ 11년 만의 홈 개편 디자인은 어떻게 준비했나?
디자이너 임지환 님의 강의입니다. 최근에 배민 홈 화면이 개편되었는데요. 디자인 관점으로 그동안의 과정을 설명해주셨습니다.
음식 카테고리가 중요한 배달앱
배민 앱의 변천사에요. 초기에는 지류 전단지 느낌이 강했죠. 현재와 가까워질수록 3D의 느낌이므로 변경되는 것을 보실 수 있습니다. 하지만 변하지 않는 부분이 하나 있는데요! 바로 홈 화면에 음식 카테고리가 있는 것이에요. 그 이유는 사용자들이 배달 음식을 고를 때 먼저 음식 카테고리를 생각하기 때문입니다.
그래서 다른 배달서비스 앱 모두다 홈 화면에 음식 카테고리가 있는 것을 볼 수 있습니다.
지금의 홈 화면으로 변화하게 된 이유는?
그런데도 배민은 홈 화면에 음식 카테고리를 제공하지 않는, 다른 방향으로 개편하였어요.
첫 번째 이유는, 다양한 서비스를 배지 그래픽으로만 설명하는 데 한계가 있었기 때문이에요. 배민은 서비스적으로 확장 중이었는데요. 비마트, 전국별미, 선물하기, 쇼핑라이브 등등 다양한 서비스를 사용자에게 효과적으로 전달하기 어려운 상황이 되었어요.
비마트 : 즉시 배달해주는 온라인 장보기 서비스
전국별미 : 전국 각지 장인의 정성 담긴 먹거리를 구매할 수 있는 서비스
선물하기 : 누군가에게 고마움을 표현하는 서비스
쇼핑라이브 : 눈으로 생생하게 보고 구매할 수 있는 방송과 쇼핑몰을 결합한 서비스
두 번째 이유는, 음식 카테고리와 서비스들이 혼합되어 산발적으로 제공되다 보니 사용자들이 카테고리를 이해하기 어려운 상황이 되었기 때문이에요.
어떤 시안들이 나왔을까요?
앞서 말씀드린 2가지 아쉬운 점을 해결하기 위해 다양한 홈 화면 시안이 나왔습니다. 크게 3가지 시안이 나오게 되었는데요.
A는 특징 있는 서비스만 카드 타입으로 만든 시안이에요. 기존 배민 홈에 서비스 카드 타입을 넣어, 배달 카테고리와 분리하고자 했습니다. 기존 디자인과 많이 유사하므로 사용자가 가장 편안하게 접근할 수 있는 시안이죠. 하지만 서비스 카드가 상단 배너와 겹쳐 보이는 아쉬운 점이 있었어요. 그리고 카드 타입이 서비스 스타일을 나타내기에 한계가 있었답니다.
B는 아코디언 UI를 활용한 시안이에요. 카드를 펼치면 주요 기능 버튼을 제공하는 타입입니다. 다양한 방식으로 카드 내부를 활용할 수 있는 것이 장점이에요. 하지만 서비스 간의 그룹핑이나 레벨 조정에 어려움이 있어, 관리지면에 더욱 효과적이라 판단되었어요.
C는 가장 많이 사용하는 배달 서비스를 강조한 시안이에요. 3개 중 가장 베스트 시안이었어요.
2가지 목표를 달성하고자 했어요!
시안을 바탕으로 내부 그리고 외부적으로 리서치를 진행했어요. 리서치를 거친 후 2가지 목표를 가지게 되었습니다.
첫 번째 목표는, 최소한의 어색함을 느끼게 하는 것이에요.
리서치를 진행하며 기존 음식 카테고리 배지를 어디서 봐야 할지 모르겠다는 피드백이 있었어요. 이러한 문제점을 해결하기 위해, 기존의 음식 카테고리 배지 탐색 경험을 기반으로 다시 디자인하였어요.
인터랙션을 통해 익숙한 음식 카테고리 배지를 먼저 노출하고 서비스 카드를 제공하는 방안을 생각했어요. 그리고 사용자들에게 가장 익숙한 배달 메타포를 서비스 카드에 사용했습니다.
하지만, 홈 진입 시점에서의 단발적인 인터랙션으로 충분할까 하는 고민이 들었어요. 그래서 최종적으론 음식 카테고리 배지만 노출하는 방향으로 진행하게 되었어요.
두 번째 목표는, 최대한의 가치를 느끼는 게 하는 것이에요.
배달 서비스 외 다른 서비스들이 잘 이해되게 하는 것이죠. 배민1 오픈 시점에 홈 개편이 이루어졌는데요. 그래서 특히 배민1 서비스에 많은 신경을 썼어요.
배민1은 배달원이 곧장 한 집만 배달하는 서비스에요. 빠르다는 장점이 있죠. 그래서 해당 장점을 잘 전달하기 위해 애니메이션을 사용하기로 했습니다.
가게에서 고객에게 빠르게 달려가는 배민원 모습을 나타냈어요. 하지만 골목길에서의 과속을 연상시킨다는 리스크가 있었어요. 그리고 빠름을 나타내기 위해 만들었던 좌우로 살짝 흔들리는 모션이 배달 음식이 흔들릴 것 같은 느낌을 전달하는 것이 아쉬운 점이 있었어요. 그래서 빠르게 달리는 모습을 표현할 때에는 지도위에서 달리지 않게 수정하였고, 좌우로 살짝씩 흔들리는 모션을 삭제했어요.
가을 시즌에 맞춰 낙엽까지 날리는 '배민1' 서비스 카드빠르다는 것 외에, 한 집만 곧장 배달한다는 것을 알리고자 했어요. 그래서 가게와 고객의 집을 하나의 동선으로 이은 디자인이 나타나게 되었답니다.
배민은 계속 발전하는 중이에요!
배민은 더 좋은 경험을 전달하기 위해 노력 중이랍니다.
첫 번째로는 일원화된 추천이 아니라 사용자의 성향과 지역에 맞춘 고도화된 추천을 준비 중이에요. 예를 들어 치킨을 즐겨 먹는 사용자에게 포장할 수 있는 치킨집을 알려주고, 쇼핑라이브로 치킨을 구매할 수 있으며, 비마트에서 추천상품으로 치킨이 뜨는 것처럼 말이에요. 또 다른 예를 들어볼까요? 배민 앱을 통해서 아빠 생신을 확인한 사용자는, 선물하기 카드를 선물로 줍니다. 전국별미에서느 아빠에게 딱 맞는 건강식품이 추천에 뜨죠.
홈 화면 하단에서 다양한 서비스를 제공하고 있는데요! 두 번째로는 서비스 기능 파악이 더욱 잘 되게끔 준비 중입니다. 홈 화면 하단에는 선물하기 서비스가 있어요. 카드 이미지만 보고 서비스 기능을 이해하지 못해 그냥 지나칠 수 있는 문제점을 해결하고자 했어요. A는 지인의 생일을 알려줘 보다 많은 사용을 유도하는 시안이에요. B는 카드와 금액이 포함된 음식 상품권을 함께 배치해 이미지만 보내는 서비스로 오해하지 않도록 하기 위한 시안이에요.
2️⃣ 효율의 시대, 배달이는 왜 비효율의 극치로 가는가?!
배달의민족! 하면 배달이 캐릭터가 빠질 수 없겠죠? 디자이너 이상은 님께서 배달이 친구를 만들어가는 이야기를 들려주셨답니다.
지금의 배달이가 있기까지
흔히 익히들 알고 있는 배달이의 정확한 이름은 '독고배달'이에요. 배달의민족의 화자이자 이야기를 전달하는 매개체입니다.
지금은 입체적인 모습을 띠는 독고배달이지만 예전에는 왼쪽 이미지와 같이 평면적이었답니다. 그리고 가이드가 없었어요. 헬멧만 쓰면 배달이었죠.
하나의 일관성이 있어야 브랜드는 오래갈 수 있다고 합니다. 과거에는 작업을 할 때 늘 자극적인 화젯거리만 물색하다 보니, 일관된 길을 걷는 게 아닌 이슈 거리를 찾는 느낌이었어요. 유행에 따라가지 않게끔 배달이 자체에 큰 힘이 필요하다는 생각이 들었어요. 그렇게 리서치를 하다가 배달이의 모티브를 찾게 되었는데요! 바로 민중 미술품인 '꼭두' 에요. 누가 봐도 손으로 만든 느낌이 나는 게 배민에서 생각하는 투박하고 소박한 느낌이 아주 잘 나타났죠.
꼭두로 부터 영감을 받아 당근도 깎아보고 비누를 깎아보기도 하였어요. 여러 재료로 실험하던 중 '스컬피'를 접하게 되었는데요! 깎기도 수월하고 보관도 쉬워 현재는 스컬피로 제작 중입니다. 하나의 배달이를 만들기까지 총 9단계를 거쳐야 해 많은 시간이 소요 되고 있어요.
이렇게 하는 이유는 목표가 효율이 아니라, 정형화되지 않은 자유분방한 배달이를 만드는 것이기 때문이에요. 그래서 가이드도 최소화시켜 꼭 필요한 것만 적었답니다. 또한 배달이 가이드 대로만 배달이들이 나오는 것이 아니라, 자유롭게 만들어진 배달이를 통해 큰 가이드를 구축해나가고 있어요. 함께 만들어 가는 것을 추구하고 있죠.
최소한의 효율을 위한 라이브러리
목표가 효율은 아니라지만, 최소한의 효율은 필요하였어요. 사업의 속도에 맞출 필요가 있었죠. 맨 처음에는 구글 드라이브를 통해 배달이를 정리했어요. 하지만 이미지 서치가 불편하다는 문제점이 있었어요.
이를 해결하기 위해 어도비 라이브러리를 활용했습니다. 매일 매주 조금씩, 1~100까지 완벽하게 하려고 하지 말고 2가지만 되게끔 하였어요. '키워드 검색 가능', '빠른 다운로드'가 그 2가지입니다. 왼쪽 이미지와 같이 검색이 수월하도록 파일명에 연관 검색어를 최대한 많이 달았어요. 차츰차츰 하다 보니 지금은 2,200개 정도가 라이브러리에 저장되어 있답니다.
새로운 배달이를 위해서
어느 순간 어떻게 하면 새로운 배달이가 계속 나올까? 라는 고민이 들더라고요. 그래서 한 달에 한 번씩 사내에서 배달이 만들기 클래스를 열게 되었어요. 디자인팀 대상으로 하던 클래스는 대상자가 전사로까지 확대가 되었는데요. 그래서 더욱 다양한 배달이를 맞이할 수 있게 되었어요.
(이 글의 작가인 저도 클래스를 한번 들었답니다. 왼쪽 사진이 저예요. 오른쪽에는 제가 만든 배달이가 발표 자료에 실려서ㅋㅋ)
살아있는 배달이를 만들기 위해서
더 나아가 배달이를 하나의 생명체로 만들기 위해 배달이 TF를 만들기도 하였어요. 이 TF는 배달이로 무엇인가를 하고픈 사우분들이 모여 만들어 진 것이랍니다. 배달이는 대게 이벤트의 마스코트로 인식되는데 하나의 생명체로 인식되게 하는 게 배달이 TF의 목표에요.
배달이 TF는 생명체를 만들기 위해 엄청나게 다양한 활동을 진행하고 있어요. 배달이 슬랙을 만들어 사내 구성원과 소통하기도 하고요. 심지어 인사 조직도에도 있답니다.
