by
Mar 14. 2020
마켓컬리편
APP Critique로 UX분석하기
새벽배송을 시작으로 선두에 있는 신선식품 스타트업, 마켓컬리에 대해 UX를 분석해보았다.
1. 앱의 목적과 사용자층
1) 한 줄로 정의하는 서비스
다른 곳에서 찾을 수 없는 맛있는 음식(식재료)을 신선한 상태로 빠르게 받아볼 수 있는 서비스
2) Primary 유저는 누구고 Secondary 유저는 누구인가
Primary 유저는 신선제품을 필요할 때 바로 구입하는 소비자이며,
Secondary 유저는 신선유통이 가능하도록 주문량에 맞춰 수급 가능한 식자재 공급자와 물류 협력업체이다.
3) 나는 왜 그리고 언제 이 서비스를 사용하는가
마켓컬리를 이용한 계기는 간단했다. 이사를 하고 나서 주변에 대형마트가 없었기 때문이다. 이전에 살던 동네에는 대형마트가 도보로 30분 이내에 있어 주말이나 퇴근하는 길에 다음 일주일간 먹을 식품을 구매하곤 했다. 이사를 하면서 소규모 마트만 있는 동네에 있다보니 식자재 특히 밑반찬을 구입하는데 애를 먹었다. 평소 집에서 해먹기 보다 반찬을 구입해서 먹었던 터라 매번 반조리 식품만 먹으니 질리게 됐다.
원래 온라인에서 식품을 사는 것에 거부감이 있었다. 오프라인 매장에서 눈으로 직접 보고 골라 사는 즐거움이 컸기 때문에 온라인에 올라온 이미지 한 장으로 구입하는 행위가 어색했다. 처음엔 쿠팡을 이용했는데, 원하는 밑반찬을 찾기가 어렵고, 평소 생활용품이나 화장품 위주로 구매하다보니 식품을 사는 것이 영 어색했다.
다음으로 이용한 서비스는 이마트몰. 이마트를 자주 들렀기에 익숙한 브랜드를 쓰자고 생각했다. 처음 어플을 켰을 때도 눈에 익숙한 상품들이 대부분이라 구입하는데 어렵지 않았다. 아쉬운 점은 흰 바탕에 상품 포장지 그대로 올려놓아 오프라인에서 느꼈던 보는 재미가 덜했다. 이마트몰은 한번 쓰고 말았는데, 두 가지 측면에서 배송경험이 좋지 않아서였다. 1차적으로 새벽배송을 한다는 공지만 보고 주문을 했었는데, 주문방법을 잘못 이해했는지 일반배송으로 온 점. 2차적으로 주문한 양에 비해 큰 스티로폼 상자가 배송되어 치우기 번거롭고 환경오염에 기여했다는 죄책감(?)이 들게 했던 점이다.
마지막으로 정착한 앱이 마켓컬리이다. 마켓컬리는 두 서비스에서 아쉬웠던 부분을 충족하는 점에서 매력적이라고 느꼈다. 우선 마켓컬리의 홈화면을 보면 '세련되고 우아하다'는 느낌을 준다. 마켓컬리는 상품 이미지에 꽤 신경을 많이 쓴 것 같다. 식자재 하나 하나 담는 그릇과 식탁, 주위 장식 그리고 배치방식이 따뜻한 감성을 자극한다. 마치 이 제품을 사면 이렇게 멋지게 요리할 수 있을 것 같은 기분을 들게 해 자주 이용하고 싶게 만든다.
고급 레스토랑의 음식 사진을 보는 느낌을 준다둘째로 샛별배송이 준 첫 경험이 신선했다. 그 날을 떠올리면 아침 7시에 마켓컬리가 배송했다는 알림을 받고, 현관문을 열었다. 문 앞에 아담한 크기의 종이상자가 있었다. 상자 안은 식품과 얼음팩으로 간소했다. 종이테이프를 포함 종이를 활용한 패키지 구성과 화학물질 없는 깨끗한 정수로 만든 얼음팩 등을 보면서 최대한 환경친화적인 포장재를 사용하려고 노력한다는 인상을 받았다. 이 경험이 꽤 신선한 충격으로 다가와 마켓컬리라는 브랜드를 좋아하게 된 계기가 되었다.
마켓컬리는 일주일에 한번 밑반찬과 메인메뉴가 떨어질 때쯤 구입하며, 한번에 3만원 내에서 해결한다. 세일도 자주 하기 때문에 세일상품 위주로 구매하면 저렴한 가격으로 식자재를 구입할 수 있다. 독특한 해외상품도 판매하고 있어 보는 재미도 있다.
2. 앱 정보구조
1) 어떤 점이 좋은 사용경험을 주는가
상단 탭 구성
메인화면 상단 탭에 자주 이용하는 메뉴를 배치했다. 필자의 경우 가격을 중요시 여겨 알뜰쇼핑 탭을 자주 본다. 할인율도 사진 왼쪽 상단에 눈에 띄게 표시해 얼마의 혜택을 받을 수 있는지 분명하게 알 수 있다. 베스트 탭은 구입할 식자재가 있는데 어떤 브랜드를 구매할 지 애매할 때 기준 삼아 자주 본다.
상품 정렬
마켓컬리는 신상품에선 '신상품순'으로, 알뜰쇼핑에선 '혜택순'을 기본 정렬로 한다. 이는 사용자가 해당 페이지를 이용하는 목적을 자연스럽게 경험하게 한다. 신상품에선 최근 입고된 상품을 먼저 볼 수 있어 새로운 상품을 탐색하기 편리하다. 알뜰쇼핑에선 할인율이 높은 순으로 정렬해, 처음부터 저가의 상품이 아닌 기존에 비쌌지만 할인가로 저렴한 가격에 구입하려는 욕구를 충족시킨다.
다만 베스트의 경우 '신상품순' 정렬을 택했는데, 타마켓 대비 적은 상품군으로 인해 '인기상품순' 정렬 시 상품 순위가 변동되지 않을 수 있다. 사용자의 입장에선 베스트에 거의 변동없이 동일한 상품만 보이는 경험을 줄 수 있다. 이런 점에서 상품 구성의 변화를 주기 위해 '신상품순'을 기본으로 설정한 것으로 보인다.
장바구니
마켓컬리에는 '즐겨찾기' 기능이 없다. 그러다보니 관심은 있지만 당장은 구매하고 싶지 않을 때, 자주 구매하는 상품을 바로 구입할 때를 대비해 따로 보관할 수 없는 점이 아쉽다. 마켓컬리의 신선식품 폐기율은 일반 대형마트(2~3%)에 비해 1% 수준으로 철저히 관리하고 있다. 신선식품 재고를 효율적으로 관리하기 위해 의도적으로 '즐겨찾기' 기능을 제공하지 않는 것으로 보인다. 다만 사용자의 불편을 감안했는지 상품마다 이미지 우측 하단에 '장바구니' 아이콘을 두어 상세페이지에 들어가지 않아도 상품을 선택할 수 있게 되어 있다.
재고알림
마켓컬리에 올려진 상품은 시간이 지나면 품절되는 경우가 생기는데 구매를 희망하는 고객을 위해 재입고 알림 서비스를 제공한다. 재고수량이 0이 되면 상품 이미지는 'Coming Soon'이 적힌 이미지로 대체되며 우측 하단에 장바구니 아이콘이 종 아이콘으로 바뀐다. 종 아이콘을 누르면 상품 선택 페이지로 이동하며 품절된 상품별로 '재입고 알림' 버튼을 확인할 수 있다.
상품이미지
온라인에서 식품을 꺼려했던 이유 중 하나는 크기와 개수를 알기 어려운 점이다. 특히 1인 가구에서는 한 번에 많은 양을 구입하는데 부담이 있기 때문에 유통기한까지 먹을 양인지 따져볼 필요가 있다. 또 다른 이유로 크기와 개수는 가격이 적당한 지를 판단하는 기준이 된다. 가격이 싸서 샀는데 알고 보니 한입 밖에 안되는 크기라던가, 겉포장지에 비해 개수는 얼마 없는 낭패를 보기가 십상이다.
마켓컬리는 직관적인 방식으로 사용자가 상품의 크기와 개수를 판단할 수 있도록 이미지를 제공하고 있다. 상품 이미지를 캔 그림과 나란히 배치해 대략 어느 정도인지 확인할 수 있다. 이런 방식은 사용자가 기대하는 상품과 실제 받아본 상품 간의 간극을 좁혀 환불을 줄이고 만족도를 높이는 역할을 한다.
335ml 캔과 500ml 캔 이미지를 통해 베이글의 크기를 짐작할 수 있다.2) 어떤 점이 나쁜 사용경험을 주는가
카테고리
상단탭을 자주 이용하는 이유 중에 하나가 카테고리 때문이기도 한데, 이 카테고리 분류가 한눈에 들어오지 않는다. 마켓컬리는 이름이 단일인 것보다 여러 개를 가운데 점으로 이어 네이밍한 카테고리가 많다. 사용자에 눈에는 억지로 맞춘 듯한 느낌을 준다. 채소는 그렇다 치더라도 과일과 견과와 쌀의 공통점은?
카테고리가 포괄하는 범위도 제각각인데, 가령 채소의 상세 카테고리에는 기본채소, 간편채소와 시금치, 부추가 나란히 있다. 이렇게 카테고리가 모호한 경우 사용자는 하나씩 눌러보며 해당 카테고리가 무엇인지 학습해야 한다. 하지만 90가지나 되는 카테고리를 인내심을 가지고 하나씩 볼 사용자는 없다. 보통 3~4개 정도 눌러보다 포기하고 검색을 이용하고 만다.
일부 품목의 경우 가짓수가 적은 경우가 있고, 작은 화면에 모두 담기 어려운 점이 있어 이런 방식의 분류로 타협하지 않았나 싶다. 마켓컬리 내 상품 수가 더 다양해지면 카테고리 분류도 다시 리뉴얼될 것이라 본다.
검색
마켓컬리에서 검색을 이용했을 때 검색결과 상단에는 꽤 기대하는 상품들이 보였지만, 상품 결과를 좀 더 내려보면 일부 맞지 않은 상품들이 결과로 표시되는 것을 볼 수 있다. 정확도가 떨어질수록 사용자는 상품을 찾지 못해 불만이 생기고 서비스를 중도에 이탈하는 결과를 낳는다. 필자의 경우 이전에 먹었던 곤드레밥을 다시 사기 위해 검색창에 '곤드레'를 입력한 적이 있다. 그런데 검색결과에는 곤드레밥은 없고 곤드레 나물만 나오고 있었다. 혹시나 하고 주문 내역에서 살펴보니 여전히 판매중에 있었다.
검색어 분류는 사용자가 해당 상품을 어떻게 부르는지를 확인하고 그에 맞게 검색어 사전을 만드는 작업이 필요하다. 사용자가 검색하는 단어를 분석해 그에 맞게 동의어와 유사어를 구축해나가면 검색 품질이 더 좋아질 것이다.
상품 후기
상품을 구매하는 데 주요 참고자료는 다른 사용자의 후기이다. 필자는 기존에 먹던 상품이 아닌 경우 후기를 먼저보고 다수가 좋다고 했을 때만 구매하는 편이다. 마켓컬리의 베스트 후기 중에는 전문 요리사 뺨치는 솜씨를 발휘한 음식들도 많기 때문에 후기를 보는 재미도 있다. 아쉬운 점은 후기를 작성할 때 별점 없이 수기로 작성해야 하는 점이다. 마켓컬리와 더불어 자주 사용하고 있는 쿠팡앱은 꽤 자주 구매후기를 남기는 편인데, 그 이유는 별점과 간단한 설문에 응답하는 수준만으로도 후기를 남길 수 있기 때문이다. 마켓컬리는 최소 10자 정도를 권장하고 있지만 별점이나 체크리스트 없이 텍스트 입력란만 제공하다보니 후기를 남기는데 부담감이 있다.
텍스트 위주의 후기만 제공하는 것은 사용자가 좀 더 리뷰를 성실하게 작성하기 위한 의도로 보인다. 실제로도 몇몇 사용자는 구입한 식재료로 어떤 요리를 했는지 상세하게 정리할 정도로 커뮤니티적인 느낌을 받는다. 그것이 실제로 구매하도록 유도할 때가 많다. 다만 후기가 최신순으로 정렬되어 있어(베스트 제외) 긍정적인 리뷰와 부정적인 후기를 구분하기 어렵게 만든다. 이를 별점 방식을 통해 4~5점은 긍정, 3점은 보통, 1~2점은 부정으로 구분하면 원하는 후기를 선별해서 볼 수 있지 않을까 싶다. 설문 방식으로 간편하게 후기를 응답할 수 있는 방식을 제공한다면 더 많은 사용자가 후기를 적극 작성할 수 있을 것이다.
10자라는 말이 무관하게 텍스트 설명만 놓고 볼 때 길게 써야 한다는 부담감이 느껴진다.
쇼핑몰에서 옷을 구매할 때 실 구매자의 사진을 먼저 보듯이 후기에서 가장 중요한 정보로 사진이 아닐까 싶다. 쇼핑몰에선 사진이 들어간 후기에 포인트를 더 주거나 상단에 올려둔다. 마켓컬리는 이미지만 모아보기 기능을 제공하지 않는다. 아무래도 상품 사진은 더 맛있어보이기 위해 보정처리를 해놓는다. 보기엔 괜찮아보이지만 실제 구성은 최악인 상황을 피하기 위해 사용자는 먼저 산 사람이 올려둔 사진을 보며 실제 상품을 미리 짐작한다. 이런 니즈를 잘 활용해 사진만 따로 모아볼 수 있는 기능을 제공하는 건 어떨까. 사용자는 상품을 안전하게 받을 수 있는 건 물론, 반품비율도 줄어들 것이다.
사진은 개별 후기를 직접 들어가야만 볼 수 있다.3. 앱 디자인시스템과 인터랙션
1) UI 디자인
마켓컬리하면 떠오르는 컬러는 당연 '퍼플'이다. 브랜드 컬러는 아래와 같이 메인컬러 '퍼블'과 세컨더리 컬러 6가지로 구성되어 있다. 마켓컬리 앱에서 메인컬러는 상단에 위치하며, 다른 탭을 오가더라도 명칭만 바뀔 뿐 상단 영역이 고정되어 있어 안정감을 준다. 그 외 영역은 흰색으로 남기고 핵심되는 정보 - 할인율, 구매버튼 등 - 만 퍼플로 강조해 혼동의 여지를 줄인다.
출처: https://www.emotion.co.kr/portfolio-posts/kurly-branding-e-commerce/상품 이미지는 가로 폭보다 세로 폭이 긴 형태인데, 이미지가 넓어보이게 보이면서도 한 화면에 많은 상품을 보여줄 수 있는 장점이 있다.
세로가 긴 상품이미지로 깔금하고 시원한 인상을 준다.정보 계층구조가 잘 나타낸 UI는 장바구니 페이지이라 볼 수 있다. 가장 중요한 정보인 가격은 할인이 적용된 가격에 집중하도록 볼드체로 처리했다. 또한 실제 결제금액을 폰트 크기를 크게 해 중요도가 높은 정보임을 강조하고 있다. 아쉬운 점은 무료배송이 가능한 금액 정보가 없고 추가 주문금액은 배송비 밑에 작은 글씨로 표시한 점이다.
이를 좀 더 눈에 띄기 쉽게 '게이지 바' UI로 무료배송 충족하기 위한 금액까지 도달하기 위해 얼마를 더 구매해야는지를 시각화할 필요가 있다.
쿠팡 로켓배송의 경우 게이지 바 UI로 추가주문금액이 어느 정도 남았는지 시각적으로 알 수 있다.2) 인터랙션
마켓컬리 내 인터랙션은 대부분 사용자에게 익숙한 제스쳐 방식을 구현하고 있다. 가령 상단 탭과 하단 탭 모두 아이콘 혹은 텍스트를 눌러 넘어가는 방식이고, 이미지는 오른쪽에서 왼쪽으로 미는 방식으로 리스트를 보여주고 있다. 그 중 아쉬운 점만 두 가지 짚고 넘어가려고 한다.
첫째, 상품 상세페이지가 보이기까지 3초 정도의 지연시간이 발생한다. 여러 상품을 빠르게 왔다갔다하며 비교할 때 로딩 페이지가 뜨는 것은 꽤나 귀찮게 느껴진다. 이는 상품설명 탭에 상품이미지와 상세정보가 함께 포함되면서 이미지를 로드하는 데 걸리는 시간이 다소 소요된 것이 아닌가 싶다.
상품설명이 나오기까지 3초 정도 대기해야 한다.둘째, 상품 리스트 페이지에 최상단 이동 버튼이 없다. 상하 스크롤 형식을 제공할 때는 사용자가 언제든지 처음 위치로 돌아갈 수 있도록 최상단 이동 버튼을 제공하는 것이 좋다. 마켓컬리는 메인화면에선 최상단 이동 버튼을 제공하고 있지만, 정작 상품을 아래까지 스크롤해서 보는 상품 리스트 페이지에선 제공하지 않고 있다. 이런 점 때문에 사용자는 직접 다시 스크롤해서 올라가거나 해당 페이지를 벗어나 다시 들어오는 불편을 겪는다.
