한 줄 칩을 접고, '전체 카테고리' 패널을 열고 닫게 바꿨다

이전 글(A-1): 브랜드가 200개 가까이 늘자, 한 줄 카테고리 필터가 막히기 시작했다

문제

지난 글에서는 카테고리를 한 줄 칩으로 늘어놓는 방식이 브랜드가 많아지면서 막히기 시작했다는 이야기를 했다. 모바일에서는 오른쪽 칩이 잘렸고, 어떤 분류가 있는지 가로로 스크롤해 보기 전에는 알기 어려웠다.

그래서 방향을 바꿨다. 자주 보는 분류는 위쪽 텍스트 탭으로 두고, 전체 목록은 필요할 때만 펼치는 패널로 옮겼다. 탭 줄이 넘치더라도 전체 분류에 닿는 길을 하나 남겨 두자는 의도였다.

바꾼 화면

닫힌 화면

평소에는 텍스트 탭만 보인다. 선택한 탭은 굵은 글씨와 밑줄로 표시하고, 줄 끝에 전체 카테고리 버튼을 두었다. 캡처는 티켓 탭을 고른 상태다.

펼친 화면

전체 카테고리를 누르면 패널이 열린다. 패널 안은 쇼핑 / 여행·이동 / 디지털·서비스 세 묶음으로 나누고, 분류 이름 옆에 브랜드 수를 작게 붙였다. 오른쪽 위 닫기로 패널을 닫는다.

배운 점과 남은 한계

• 목표는 탭 줄이 잘려도 전체 분류를 한 번에 볼 수 있는 경로를 만드는 것이었다.
• 분류 옆에 개수를 붙이면 어느 분류가 비어 있는지 보기 쉬워진다. 개수가 적은 분류는 합칠 후보로 볼 수 있다.
• 다만 분류가 평평하게 늘어선 구조는 그대로다. 패널은 '다 보여 주기'에 가깝고, '고르기 쉽게'까지는 아직 아니다.

다음

다음 글에서는 평평한 목록을 2단으로 나누는 계획을 다룰 예정이다. 쇼핑 > 명품처럼 큰 묶음을 먼저 고르고, 그 안에서 세부 분류를 고르는 구조를 생각하고 있다.