가설 / 문제
알파캣 마켓 화면 위에 카테고리를 한 줄 칩으로 깔아 두었다. 전체(200), 종합몰, 패션·잡화, 명품, 뷰티… 식으로 이름 옆에 개수만 붙인 형태다.
브랜드가 적을 때는 문제 없었다. 그런데 공개 브랜드가 늘면서 칩이 화면 밖으로 밀려나기 시작했다. 모바일에서는 오른쪽이 잘려 뷰티만 살짝 보이고, 나머지는 가로 스크롤로만 닿는다. 데스크탑에서도 같은 한 줄 구조라서, “지금 어떤 분류가 있는지”를 한눈에 보기 어렵다.
가설은 단순했다. 카테고리 탐색이 스크롤에 의존하는 순간, 분류 자체가 안 보이는 기능이 된다. 필터를 쓰라고 만들어 놓고, 필터 목록을 가리고 있었던 셈이다.
시도
이번 회에서는 UI를 크게 고치지 않았다. 먼저 before 화면을 데스크탑·모바일로 각각 캡처해 두고, 칩이 어디서 잘리는지, 개수 표기가 줄을 얼마나 차지하는지부터 확인했다.
커밋 히스토리를 보니 이후에도 MarketCategoryBar를 여러 번 건드렸다. 해외직구를 탭이 아니라 배지로 빼거나, 폰에서 필터 행과 카테고리 줄을 분리하는 식의 수정이 이어진다. 한 번에 잘 맞춘 게 아니라, 화면이 막힐 때마다 조금씩 뜯어고친 흔적이다.
결과 · 배운 점
- 한 줄 칩 + 개수 표기는 브랜드가 적을 때만 성립한다. 200개 전후가 되면 “전체”만 고정되고 나머지는 숨은 메뉴가 된다.
- 모바일에서 잘린 칩은 버그가 아니라 레이아웃 선택의 결과다. 스크롤을 넣었다고 탐색 문제가 사라진 건 아니다.
- before 스크린샷만 모아도 다음 설계의 기준이 된다. 말로 “답답하다”보다, 잘린 칩 한 장이 설득력이 있다.
다음
다음 글에서는 레퍼런스를 보고 필터 패널(열림/닫힘)을 붙인 과정을 남긴다. 한 줄에 다 넣지 말고, 필요할 때 펼치는 쪽으로 방향을 바꿔 볼 예정이다.