29CM 카테고리 화면의 스플릿 뷰 UX

카테고리



1. 전체 구조 및 레이아웃 패턴

- 스플릿 뷰(Split View) 내비게이션 : 좌측에 1차 카테고리(전문관, 의류, 슈즈, 가방 등)를 연달아 배치하고, 우측에 선택된 카테고리의 2차 하위 메뉴 및 주요 큐레이션을 보여주는 이중 열 구조입니다. - 장점 : 한 화면에서 카테고리 간 이동과 세부 메뉴 탐색을 동시에 수행할 수 있어 탐색 깊이(Depth)를 줄이고 빠르게 전환할 수 있습니다. - 특징 : 좌측 메뉴 스크롤과 우측 콘텐츠 스크롤이 분리되어 있어, 대량의 커머스 상품 카테고리를 직관적으로 다루기에 유용합니다.


2. 영역별 UX/UI 분석

① 상단 내비게이션 & 주요 프로모션 아이콘 (최상단)
- 상단 탭 (카테고리 | 브랜드 | 서비스): 서비스 내 핵심 탐색 축을 상단에 고정하여 사용자가 '브랜드' 중심 탐색인지, '아이템 카테고리' 중심 탐색인지 명확하게 구분할 수 있도록 돕습니다.
-원형 아이콘 배너 (이구홈갤러리, 선물하기, 스페셜, 라이브 등): 시각적 강조: 원형 썸네일과 원색/그래픽을 활용해 단순 카테고리 외에 서비스의 핵심 마케팅 포인트나 특수관으로 빠른 진입을 유도합니다. - 가로 스크롤(Swiper) : 화면을 많이 차지하지 않으면서 여러 큐레이션 아이콘을 보여줄 수 있으나, 뒤쪽 항목은 가려질 위험이 있습니다.
② 성별/Target 필터 (우측 상단 '여성 ∨')
드롭다운 형태로 대상 성별을 바로 변경할 수 있어, 카테고리 구조 전체를 유저의 성별에 맞춰 필터링해주는 역할을 합니다. 탐색 노이즈를 줄여주는 효율적인 요소입니다.
③ 우측 메인 콘텐츠 영역 (전문관 & 의류 전체 하위 메뉴)
- 비주얼 큐레이션 (전문관 카드): 단순 텍스트가 아닌 대표 이미지(신발, 아동복, 로고 등)와 색상 배경을 사용해 시각적 인지 속도를 높였습니다.
- 그리드 기반 서브 카테고리 (BEST, FOR YOU, EXCLUSIVE / 상품 썸네일): 'BEST', '추천', '단독'과 같은 목적형 쇼핑 탭과 실제 상품 썸네일 기반의 품목별 탭(아우터, 니트웨어 등)을 조합했습니다. 텍스트만 늘어놓는 대신 실제 대표 제품 이미지를 보여주어 유저의 클릭 유도율(CTR)을 높이는 효과가 있습니다.


3. UX 관점에서의 주요 강점

① 높은 인지성 : 텍스트와 실물 이미지, 아이콘을 적절히 배합하여 카테고리명을 일일이 읽지 않아도 직관적으로 원하는 품목을 파악할 수 있습니다.
② 빠른 탐색 구조 : Left-side navigation 방식을 통해 카테고리 전환 시 페이지 이동 없이 즉시 우측 내용만 변경되므로 빠른 탐색이 가능합니다.
③ 쇼핑 동기 부여 : 상단의 특수 서비스(선물하기, 라이브) 및 하위 카테고리의 목적형 탭(BEST, EXCLUSIVE)을 통해 단순 검색 유저뿐만 아니라 둘러보기(Browsing) 유저에게도 탐색 재미를 제공합니다.


4. 개선할 수 있는 UX 포인트

① 화면 밀도 및 시각적 피로도 : 상단 원형 아이콘, 좌측 텍스트 리스트, 우측 이미지 그리드 등 한 화면에 제공되는 시각적 정보량이 많아 초심자에게는 시선이 분산될 수 있습니다.
② 좌측 카테고리 리스트의 선택 상태 : 현재 어떤 카테고리가 선택되어 있는지(예: 의류, 슈즈 등) 시각적 굵기나 배경색 강조가 더욱 명확하면 사용자가 현재 위치를 파악하기 더 쉬워집니다.
③ 터치 영역 최적화 : 좌측 텍스트 리스트의 행 간격이 모바일 손가락 터치 범위(최소 44x44pt 권장)에 비해 촘촘할 수 있어 오클릭 가능성을 점검할 필요가 있습니다.