퀵메뉴로 비즈니스 널리 알리기 (feat. 전지적 디자이너 시점)
컬리에 이런 서비스도 있었다고?
안녕하세요. 프로덕트 디자인팀 (이하 프디팀) 디자이너 임효연입니다. 오늘은 프디팀의 ‘퀵메뉴(Quick-Menu)’ 제작기에 대해 이야기해 보려고 합니다.
컬리의 퀵메뉴는 어떤 기능인가요?
컬리의 메인 배너 하단에 위치한 퀵메뉴는 컬리에서 제공하는 다양한 서비스, 이벤트 페이지 등의 메뉴로 빠르게 진입할 수 있는 역할을 하는 구좌입니다.
퀵메뉴는 왜 생기게 되었나요?
퀵메뉴는 컬리 매출에 기여할 수 있는 메뉴들이 점점 늘어나고 있는 상황에, 이를 유저에게 공급하려는 비즈니스 목표로부터 출발했어요. 유저 진입율이 높은 홈 화면에서 다양한 게이트를 제공해 유저가 새로운 메뉴를 발견하고 빠르게 진입할 수 있는 영역을 확보한 것이 현재의 퀵메뉴입니다.
이러한 목표에 부합할 수 있도록 퀵메뉴 구좌에서는 신규 비즈니스나, 시즈널한 이벤트 페이지 등의 강조가 필요한 메뉴를 제공하고 있어요. 대표적인 메뉴로는 컬리 게임인 ‘마이컬리팜'이 있습니다.
이러한 신규 구좌인 퀵메뉴를 디자인하기 위해 프디팀에서 고민한 내용을 소개해보려고 해요.
퀵메뉴 제작하기
퀵메뉴 구조 설계
프디팀에서는 첫 번째로 퀵메뉴 구좌의 구조를 설계했어요. 컬리 퀵메뉴의 구조는 일렬으로 각 메뉴가 정렬되어 있고, 스와이프하여 전체 메뉴를 훑어볼 수 있는 구조입니다. 프로젝트 초기에 후보로 논의되던 최소 4-5개의 메뉴가 포함될 수 있어야 했고, 메뉴 교체를 유동적으로 운영할 수 있도록 구조를 고려해야 했어요. 따라서 메뉴의 개수에 구애받지 않고, 메뉴를 운영하며 UI 변형 없이 쉽게 추가하고 뺄 수 있는 구조로 설계하였습니다.
퀵메뉴 아이콘 스타일
구조 설계 후에는 각 메뉴가 어떤 메뉴인지 직관적인 이해를 돕는 메뉴 아이콘이 필요했어요.
기존 컬리 UI에 활용되던 아이콘 아이덴티티가 라인 타입이었기에, 퀵메뉴 아이콘 스타일 테스트의 시작은 라인 타입이었습니다. 라인 타입은 컬리에서 익숙하고 안정적인 스타일이었지만 퀵메뉴 위치상 ATF(Above the Fold)에서 하단 탭바 아이콘과 부딪힌다는 크리티컬한 단점이 있었죠. 시각적으로 강조되어야 할 메뉴들이 눈에 띄지 않기도 했고, 라인 타입으로는 한계가 있다고 판단했습니다.
이러한 이유로 라인 타입이 아닌 새로운 아이콘 스타일을 도입하기로 하였습니다. 퀵메뉴는 유저가 컬리 앱 진입시 가장 먼저 확인하는 첫 화면에 위치해 있기에, 신규 그래픽 스타일을 적용하면 효과적으로 컬리에 신선한 인상까지 줄 수 있을 것이라 생각했어요.
퀵메뉴 아이콘 스타일 최종안
최종적으로 라인 타입의 한계를 보완하면서, 신선한 인상을 줄 수 있는 솔리드 타입으로 아이콘을 디벨롭 했어요. 컬리에서 시도하지 않았던 스타일이지만 기존 컬리 기조를 해치지 않는 중간지점을 찾기 위해 수많은 아이콘을 그려본 뒤, 간결하고 직관적이면서 너무 팬시하지 않은 스타일로 제작하게 되었습니다.
퀵메뉴 아이콘으로 지표 상승시키기
컬리에서는 퀵메뉴 영역에서 처음으로 아이콘에 모션을 도입하기도 했습니다. 한시적으로 돋보여야 하는 기간제 이벤트 메뉴 등 위계를 높여야 하는 메뉴이거나, 후킹한 디자인을 보다 자유롭게 표현하기 위함이었어요. 모션 아이콘은 지표 상승에 영향을 미치기도 했는데, 대표적인 사례로는 ‘컬리멤버스’ 메뉴가 있습니다.
‘컬리멤버스' 메뉴는 컬리 멤버십을 구독할 수 있는 랜딩 페이지예요. ‘컬리멤버스'가 처음 선보여질 당시에는 컬리멤버스의 로고 활용이 필요해 로고만으로 퀵메뉴 아이콘을 구성했습니다.
이후 멤버십 가입율을 상승시키기 위해 퀵메뉴 아이콘 디자인을 개선하기로 했어요. 가입률 상승을 위해서 멤버십 구독 랜딩 페이지에 더 많은 유저가 진입할 수 있도록 후킹한 아이콘 디자인이 필요했습니다. ‘컬리멤버스’는 월 1,900원의 구독료 대비 10배의 혜택을 받을 수 있는 매력적인 상품인데, 구독 페이지에 진입해야만 혜택을 확인할 수 있는것이 아쉬웠어요. 구독 페이지에 진입하지 않고도 혜택을 확인할 수 있으면 멤버십에 관심을 가지는 유저가 늘어날 것이라 생각했습니다.
컬리멤버스 퀵메뉴 아이콘 TO-BE안
위의 가설을 반영하여 ‘컬리멤버스'의 혜택을 가장 매력적으로 보여줄 수 있는 문구를 고안해 혜택을 강조한 텍스트 타입의 아이콘으로 제작하였습니다. 퀵메뉴 아이콘은 작은 영역이지만 모션을 활용해 구독료, 혜택을 번갈아가며 보여줄 수 있었어요.
각 혜택간 모션의 속도, BG 컬러, 문구의 연결성 등 다양한 고민을 거쳐 ‘컬리멤버스' 아이콘을 개선하였고, 개선 이후 멤버십 가입율 상승의 요인 중 하나로 작용하는 것을 검증하였어요.
앞으로 퀵메뉴가 나아갈 방향
퀵메뉴가 배포된지 약 5개월이 지났고, 퀵메뉴를 운영하며 해결해나가야 할 부분이 아직 많습니다. 비즈니스 임팩트를 내기 위해 아이콘을 강조하다보니 시각적 피로도가 증가하기도 해 밸런스를 조절하는 과정이나, 유저의 경험을 고려했을 때 더 적합한 메뉴가 있을지 고민이 필요하기도 합니다. 앞으로 퀵메뉴를 보다 유의미한 구좌로 만들기 위해 프디팀이 고민하여 개선해나가는 모습을 기대해주세요.
감사합니다.