[CLONE] 7주차 | 마켓컬리 디자인 클론

 

🛒  마켓컬리

식품 업계에서 잘 쓰이지 않는 보라색 컬러를 브랜드 컬러로 택하여 특이한 느낌을 주는 마켓컬리는 온라인 식재료 판매업체로 시작하여 현재는 뷰티컬리까지 화장품 판매까지 폭넓은 제품을 다루고 있는 온라인 쇼핑몰입니다. 최초로 새벽 배송인 '샛별 배송'을 시작하여 주목을 받기 시작해 공격적인 마케팅을 진행하였습니다. 마켓컬리는 큐레이션 서비스에 집중하여 프리미엄 차별화 전략으로 경쟁력을 만들어냈습니다.

 

 

 

---

 

 

🛒  INTRO

시중에 서비스 중인 앱을 클론 디자인 하며 구성 요소와 여러 디테일한 부분을 분석해보고자 하였습니다.

 

 

1️⃣ STYLE & COMPONENT

∗ 주요 컬러와 텍스트 스타일을 지정하고, 사용되는 아이콘과 반복되는 요소를 컴포넌트로 지정하여 관리하기 쉽게 만들어 두었습니다.

 

 

2️⃣ MAIN PAGE

 

 

3️⃣ DETAIL PAGE

 

 

4️⃣ INFORMATION PAGE

 

 

5️⃣ MY PAGE & NEW PRODUCT & FILTER

 

 

6️⃣ EVENT PAGE

 

 

7️⃣ BEAUTY KURLY

 

 

💡구성요소별 역할

 

 

① GNB

• 탭 : 마켓컬리와 뷰티 컬리를 스위치 할 수 있게 해주는 버튼
• 알림 : 앱 내의 주요 행동 (결제, 재입고, 문의) 등에 대한 알림을 보여주는 페이지로 연결
• 장바구니 : 구매를 위해 담아둔 상품들을 확인할 수 있는 페이지

② 상단 카테고리 : 상단 주요 카테고리

③ 프로모션 영역 : 홈 화면 중 가장 큰 영역을 차지하여 가시성이 높아 사용자가 발견하기 쉽다. 

④ 중간 카테고리 : 상단 카테고리와 별도로 제공하는 콘텐츠로 연결하는 카테고리

⑤ 버튼 

• 담기 : 탭하면 해당 상품을 장바구니에 담을 수 있다.
• 전체보기 : 카테고리에 해당되는 상품을 모두 볼 수 있다.

⑥ 이미지 : 선택 시, 이미지와 연결된 상품 상세 페이지로 연결된다.

⑦ 필터 : 칩 형태로 선택 시 필터 기능이 활성화된다.

⑧ 체크박스 : 여러가지 옵션을 선택해 활성화 할 수 있다.

⑨ FNB

• SNS : 탭할 시, 연결된 SNS로 이동된다.
• 회사 정보 : 사업자와 관련된 여러 정보를 담아두고 있는 영역

①⓪ 하단 내비게이션 : 주요 기능 다섯 가지를 하단에 고정시켜 둔 형태로 대부분의 화면에서 표출