[UI/UX] 마켓컬리 앱 분석 - (1) 스플래시부터 뷰티컬리까지

🟣 이커머스의 고급화, 마켓컬리

여러 시행착오와 잡음도 있었지만, 마켓 컬리가 식품 배송 이커머스에서 혁신적인 시도를 하고 있는 기업이라는 것은 분명하다. 컬리가 앱의 UI에서도 다양한 시도를 겸하고 있는 것을 발견하고, UX 디자인 공부를 위해 UI를 단계별로 분석해보기로 하였다.

1. 스플래시

😈 보라색으로 잠식되었다

컬리의 메인 컬러로 채워진 로딩 페이지는 빠르게 지나간다.

😈 너무 빠른 설 연휴

설 명절을 맞이한 페이지는 더 빠르게 지나간다. 시선을 둘 겨를이 없었다. 시즌 상품에 대한 노출을 한 번이라도 늘려서 암시적인 효과를 주려 한 것일지도 모르겠다.

2. 광고성 수신 팝업

😈 상큼하고 요망한 팝업

• 쿠폰 팝업 또한 키 컬러를 기반으로 하되, 명도를 높이고 배경을 dim으로 눌러서 시선이 팝업에 모이게 해주었다.

• 또한, 오른손의 엄지 손가락이 닿기 쉬운 '확인' 버튼을 누르기 쉽게 구성하였다.

• 팝업의 요구를 거부하려면 인터랙션이 한 차례 더 요구된다.

• 나는 예외 상황의 경우를 확인하기 위해 '아니오, 받지 않겠습니다'를 선택하고 확인을 눌러주었다.

• 팝업이 다시 한번 나타났다.

• 이번에도 마찬가지로, 오른손 기준으로 접근하기 더 쉬운 오른편에 '알림 받기' 버튼을 두었다.

• 또한, '알림 받기' 버튼에 볼드 효과를 주어 선택을 유도했다.

😈 하하! 번거롭다!

• 광고 수신을 거부했다는 배너가 한 차례 더 나타난다.
• 어떻게든 앱 외부에서 컬리 알림을 띄우기 위한 목적으로 여러 번 강조한다.

3. 요즘 핫한, 뷰티컬리

😈 어이, 먼저 뷰티컬리를 봐

1️⃣ 위계는 확실하게

• 보통 앱을 사용하게 되면, 랜딩 페이지가 굉장히 눈에 띄지 않는 한 최상단을 가장 먼저 훑게 된다.
• 최근 제니를 모델로 내세우면서 뷰티컬리를 밀고 있는데, 앱에서도 그만큼 상위의 위계를 차지하고 있다는 것을 알 수 있다.
• 유저는 기타 카테고리들을 접하기 전, 가장 먼저 '마켓컬리'와 '뷰티컬리'의 두 가지 차원이 나누어져 있다는 사실을 인지한 후에 상품 투어를 시작하게 된다.

2️⃣ 호기심은 제대로 유발

• '뷰티컬리' 스위치에 💡New를 의미하는 'N'을 달아주어서 새로운 내용이 업데이트 되었다는 것을 간단하게 한번 상기시켜주었다.
• 직관적으로 업데이트에 대한 호기심을 유발한다.

3️⃣ 작고 귀여운 위젯 !

• 우측 하단을 보면 '마켓컬리'로 다시 이동할 수 있는 바로가기 위젯이 존재한다.
• 🥦 브로콜리 이미지 🥦 를 삽입하니 신선 식품을 배송하는 마켓컬리의 이미지가 다시 한번 상기된다.
• 스크롤을 이동시키면서 상품을 구경하면, 위젯의 이미지는 사라지면서 '마켓', '뷰티'라는 텍스트만 남고 작게 축소된다.

😈 위젯은 함정이야

• 다시 마켓컬리로 돌아오면 우측 하단에 동일하게 💄 '뷰티컬리' 위젯이 존재한다.
• 모드를 빠르게 전환하면서 뷰티 컬리로의 접근을 쉽게 만들고, 동시에 아이덴티티를 한번 더 확인시키기 위한 전략으로 보인다.

😈 너무 많은 정보들

좋았던 점

• 랜딩페이지에서 한 단만 내리면, 라이브 커머스 영상들이 슬라이드뷰로 나온다.
• 그리드를 길게 빼주어서 릴스, 숏츠같은 느낌이 든다.
• 영상 컨텐츠라는 것을 직관적으로 확인시켜주면서도 뷰를 깔끔하게 정리했다.

별로였던 점

• 첫 랜딩페이지에서 무려 18개의 슬라이드가 등장하는데, 라이브 커머스 이벤트 또한 동일하게 슬라이드뷰로 등장한다.
• 개인적으로는 처음 접하게 되는 정보 전달이 조금 과하다는 느낌이 들었다.
• 작은 모바일 뷰에 비해, 컬리가 준비해둔 이벤트가 너무 많았고 전달하고자 하는 내용 또한 너무 많았다.

---

4. 다음 포스트 예고

내용을 좀 더 확장하고 싶었으나, 웹 뷰에서 모바일 이미지가 너무 자주 등장하는 것이 과하다고 느껴졌다. 모바일 뷰로 보더라도, 내용을 좀 더 잘게 나누어서 간단하게 전달하고자 한다. 다음 포스트에서는 설 명절 특가와 컬리 추천 탭의 내용에 대해서 분석해보려고 한다.