쇼핑몰 검색·필터·정렬을 함께 정하는 법

홈페이지 제작을 하면서 상품 검색과 가격 필터를 넣었습니다. “머그컵”을 찾고 2만 원 이하를 골랐는데, 정렬을 바꾸자 다른 상품까지 나타납니다. 검색과 필터가 따로 동작하고 있을 수 있어요.

조건은 하나의 목록에 함께 적용합니다

검색어, 가격 범위, 판매 상태, 정렬은 같은 상품 목록을 바꾸는 조건입니다. “머그컵이면서 2만 원 이하이고 판매 중인 상품”처럼 조건을 함께 적용한 결과를 보여줍니다.

어떤 항목을 검색할지도 정합니다. 상품 이름만 찾을지 설명까지 찾을지에 따라 결과가 달라져요. 가격 범위의 끝값을 포함할지, 품절을 기본으로 보여줄지도 실제 상품을 놓고 결정합니다.

손님이 목록 5페이지에 있다가 조건을 좁히면 새 결과는 한 페이지만 있을 수도 있습니다. 조건을 바꾼 뒤 예전 페이지 번호를 그대로 쓰면 결과가 있는데도 빈 목록처럼 보일 수 있어요. 이때는 첫 페이지부터 새 결과를 보여줄 수 있습니다.

상품 수 역시 전체 상품 수가 아니라 현재 조건과 맞는 수인지 구분합니다. 정렬은 가격이 같을 때도 순서가 안정적으로 이어지도록 보조 기준을 둘 수 있고요. 페이지를 넘길 때 같은 상품이 반복되거나 빠지지 않는지 봅니다.

검색과 필터를 고르고 상품 상세로 들어갔습니다. 뒤로 돌아왔을 때 검색어가 사라지면 처음부터 다시 찾아야 합니다. 주소에 검색 조건을 함께 적거나 화면 상태로 관리해 이어갈 수 있어요.

공유한 주소로 같은 조건을 열게 할지, 뒤로 가기에서 조건과 위치를 어디까지 복원할지도 정합니다. 모든 방식을 한 번에 넣기보다 손님이 실제로 사용할 동선부터 확인합니다.

시험할 때는 검색만, 필터만, 검색과 필터 함께, 조건 변경 뒤 페이지 이동을 각각 해봅니다. 요소가 따로 잘 보이는 것과 하나의 목록을 일관되게 바꾸는 것은 다릅니다.

컴윗에서 상품 서비스를 만든다면 “검색·가격·판매 상태를 함께 적용하고, 상세에서 돌아오면 찾던 조건을 유지하자”라고 설명해보세요. 손님이 상품을 찾는 순서에 맞춰 목록을 만들 수 있습니다.