[UI 분석] 커머스 카테고리 페이지 UI 분석

 

안녕하세요 오늘은 커머스 앱의 카테고리 페이지 UI를 분석해보겠습니다. 패션(무신사), 라이프 스타일(오늘의 집), 뷰티(올리브영) 세 분야의 커머스 앱을 뜯어보고 아래 세 가지를 알아보겠습니다.

 

 

 

☑️  각 화면에 포함된 컴포넌트의 명칭 알아보기

☑️  페이지 기획 의도 생각해보기

☑️  각 페이지별 공통 요소 찾아보기

 

 

 

 

 

 

 

 

1. 무신사

1) 카테고리 페이지

 

무신사앱은 홈탭에서 카테고리 버튼을 통해 카테고리 페이지로 이동합니다. 카테고리는 1 depth : 성별, 2 depth : 상위 품목, 3 depth : 하위 품목으로 나누어져 있었습니다.

 

카테고리 페이지에서 바로 장바구니로 이동이 가능하고, FAB에 최근 본 상품과 1 depth 분류(성별)를 선택할 수 있는 것이 타 앱과는 다른 점이었어요. 스크롤을 내리며 1 depth 탭이 가려지기 때문에 FAB로 한번 더 띄워준 것으로 보입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 상품 리스트 페이지

카테고리 클릭 시 연결되는 상품 리스트 페이지입니다. 카테고리에서 각각 2 depth (ex.상의), 3 depth (ex. 상의>맨투맨/스웨트)로 이동했을 때에 페이지 형태가 크게 다르지 않았습니다. (탑바-탭 메뉴-필터-상품리스트 순)

 

탑바에서 뒤로가기 버튼 우측에 2 depth 에서 선택했던 항목을 드롭박스 형태로 기재해 주었고, 드롭박스 선택 시 드로우를 통해 뒤로가지 않고도 1 depth 항목을 변경할 수 있었습니다. 탑바 아래에는 탭 메뉴 형식으로 현재 선택한 3 depth 항목을 표시해주고, 스와이핑을 통해 변경이 가능합니다. 

 

 

 

 

 

 

 

 

 

2. 오늘의 집

1) 카테고리 페이지 : ① 홈 탭을 통한 경로

 

오늘의 집은 홈탭에서 카테고리 버튼을 통한 이동, 쇼핑탭에서 카테고리 버튼을 통한 이동 두 가지 경로로 나누어 집니다. 우선 홈탭에서 카테고리 페이지로의 이동을 살펴보겠습니다. 카테고리 리스트에는 상단에 캐러셀 형식의 이벤트 성격의 항목들이 있고 그 아래에 1 depth : 콘텐츠 성격별(쇼핑, 둘러보기, 인테리어/생활), 2 depth : 콘텐츠별 세부 항목으로 나누어져 있었습니다.

 

여러 계층으로 분류해두지 않고, 썸네일 형식의 버튼과 함께 한번에 펼쳐두어 둘러보는 사람에게 적합한 구조라는 생각이 들었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 카테고리 페이지 : ② 쇼핑 탭을 통한 경로

 

쇼핑 탭을 통해 카테고리 페이지에 진입하는 경우, 홈탭을 통한 경로와는 달리 여러 계층으로 나누어져 있고 깊은 더 하위 계층의 목록까지 제공하고 있습니다. 물건을 사기 위한 사용자가 원하는 품목을 쉽게 찾을 수 있도록 정돈되어 있으면서 구체적인 정보를 제공하는 형태를 띄고 있었습니다. 

 

3 depth 항목 (가구>침대>침대프레임, 매트리스 등)을 아코디언 버튼을 통해 접었다 펼 수 있도록 한 부분이 눈에 띄었는데요. 많은 정보를 담으면서도 디폴트 상태에선 토글을 닫아 두어 복잡하지 않고 깔끔하게 느껴졌습니다.

 

 

 

 

 

 

 

 

 

 

 

3) 상품 리스트 페이지 : ① 상위 계층을 클릭한 경우

 

홈 탭, 쇼핑 탭에서 각각 품목의 상위 계층(ex.조명)으로 이동하는 경우를 살펴보겠습니다. 로딩되는 페이지에선 첫단에 하위 계층(ex.조명>단스탠드) 카테고리 리스트를 보여줍니다.

 

뒤를 이어 각종 기획전 콘텐츠들 길게 이어지는 것에 주목했는데요. 뒤에 설명할 하위 계층(세부 품목)을 선택할 때와는 다른 형태의 페이지 구성입니다. 상위 계층을 선택한 사용자는 아직 알아보려는 상품을 구체적으로 정해놓지 않았다는 것을 염두해두고 최대한 여러 상품을 둘러볼 수 있는 콘텐츠들을 보여주는 것이 아닐까 생각했습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

4) 상품 리스트 페이지 : ② 하위 계층을 클릭한 경우

 

홈 탭, 쇼핑 탭에서 각각 품목의 하위 계층(ex.조명>단스탠드)으로 이동하는 경우, 상위 계층으로 바로 이동할 때와는 달리 기획전 페이지가 노출되지 않습니다. 앞선 사용자보다 알아보려는 상품에 대해 구체적인 윤곽을 가지고 있다는 것을 염두해두고 상품 리스트에 더 빠르게 도달할 수 있도록 한 구성이 아닐까 생각했습니다. 상단엔 브레드크럼 형태로 선택한 범주와 경로를 표시해주었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 올리브영

1) 카테고리 페이지 - ① 1 depth : 올리브영 (화장품)

 

올리브영은 홈탭에서 카테고리 버튼을 통해 카테고리 페이지로 이동합니다. 카테고리 리스트가 앞선 앱들 가운데 가장 많은 계층으로 구성된 것이 특징인데요.우선 공통적으로 1 depth : 산업군별,  2 depth : 콘텐츠 성격별 범주가 있습니다.

 

상품 카테고리(카테고리 탭)에서는 또다시 3 depth : 품목별, 4 depth : 세부 품목별, 5 depth : 세부 품목의 하위 분류로 나누어져 있습니다. 5개의 범주가 있지만 위계가 잘 구분되어 있어 탐색이 어렵지 않았습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 카테고리 페이지 - ② 1 depth : 헬스 (건강기능식품)

 

탑바에서 스위치 형식으로 변경되는 1 depth 카테고리 디자인은 다른 앱에서는 없던 부분인데요. 헬스 탭(건강기능식품)으로 전환 했을때에 탑바의 색도 반전되어 앞의 올리브영 탭(화장품)과 다른 성격의 범주임을 보여주고 있었습니다.

 

 

 

 

 

 

 

 

 

 

 

3) 상품 리스트 페이지 - ① 상위 계층을 클릭한 경우

카테고리 페이지에서 각각 품목의 상위 계층(ex.메이크업 전체보기)과 하위 계층 (ex.메이크업>립 메이크업)으로 이동하는 경우를 나누어 보겠습니다. 우선 전자의 경우, 오늘의 집에서와 유사하게 기획전 배너, best 상품 모음과 같이 추천 상품 형태의 콘텐츠가 길게 노출되고 있었습니다. 앞선 사례와 같이 아직 뭘 사야할지 몰라 둘러보고 있는 사용자를 이 경로의 타겟으로 두고 이런 형태로 페이지를 구성한 것이 아닐까 예상하였습니다.

 

 

 

 

 

 

 

 

 

 

 

 

4) 상품 리스트 페이지 - ② 하위 계층을 클릭한 경우

하위 계층 (ex.메이크업>립 메이크업)으로 이동하는 경우엔 위와는 다르게 상품 목록만 로딩되었습니다. 탑 바 아래에 추가적으로 6 depth 분류(립틴트, 립스틱 등)를 슬라이드 탭 형태로 제공하고 있었습니다.

 

이미 그 상위 계층인 5 depth(립 메이크업, 베이스 메이크업)을 슬라이드 탭 형태로 구성해두었기도 하고, 메이크업 제품 특성 상 색, 질감 등 고려 요소가 많기에 필터 형식으로 구성했으면 더 낫지 않을까 하는 생각이 들었습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. 공통영역

1) 카테고리 페이지

세 앱의 카테고리 페이지에서의 공통 요소를 살펴보겠습니다.

 

햄버거 버튼을 통해 카테고리로 진입하고, 탑바의 뒤로가기 버튼이나 바텀바의 홈 버튼을 통해 돌아갈 수 있는 수단이 제공된다는 것이 공통점이었습니다.

 

또한 사이드 네비게이션바에는 상위 계층이 표시되며, 카테고리 리스트에 하위 계층이 표시된다는 점, 카테고리 리스트를 아래로 스크롤하면 현재 표시된 리스트의 상위 계층이 네비게이션 바에 하이라이트 된다는 점도 공통적인 요소였습니다.카테고리 리스트에는 상위 계층의 상품 목록을 한번에 훑어볼 수 있도록 버튼을 제공하고 있다는 점이 같았습니다.

 

 

 

 

 

 

 

 

 

 

 

2) 상품 리스트 페이지

 

카테고리 중 하나의 항목을 선택해 이어지는 상품 리스트 페이지의 공통 요소를 살펴보겠습니다. 첫번째는 탑 바 구성입니다. 뒤로 가기 버튼, 현재 페이지의 상위 계층에 해당하는 범주, 검색과 장바구니를 공통적으로 보여주고 있었습니다.

 

두번째는 현재 위치 표시 수단입니다. 탭 메뉴 볼드, 브레드크럼의 형태로 지금 페이지가 어떤 상품들을 띄워주고 있는지 보여준다는 공통점이 있었습니다.

 

 

 

***

 

이번 시간을 통해 잘 외워지지 않던 컴포넌트의 쓰임새와 명칭을 익힐 수 있었고, 페이지를 왜 이렇게 구성했는지 생각해 볼 수 있었습니다.😊 같은 기능을 하는 요소를 화면에 보여주는 방식도 다양해서 지나칠 수 있는 작은 부분에도 참 많은 고민이 있었겠구나를 느낄 수 있었던 기회였습니다.