검색, 필터, 정렬은 각각 어떤 문제를 해결하는가

먼저 던질 질문

데이터 탐색 UI를 설계할 때 기능을 어떻게 나눠야 할까

핵심 관점

검색, 필터, 정렬은 모두 데이터를 찾는 도구지만 역할이 다르다. 검색은 표현으로 찾고, 필터는 조건으로 좁히고, 정렬은 우선순위를 바꾼다.

탐색이 빨라지는 장면

상품 목록에서 검색어, 카테고리 필터, 가격 정렬을 분리해 제공한다. 사용자는 현재 상태를 이해하고, 다음에 무엇을 할 수 있는지 알며, 행동의 결과를 어느 정도 예측할 수 있다.

선택된 필터를 칩으로 보여주고 개별 해제할 수 있게 한다.

발견을 방해하는 흐름

정렬 옵션에 카테고리 조건을 섞어 사용자가 역할을 구분하지 못한다.

필터가 적용됐는지 화면에서 알 수 없다.

탐색 사례와 근거

검색, 필터, 정렬은 서로 다른 질문에 답한다

검색은 사용자가 떠올린 단어나 조건으로 대상을 찾는 기능이다. 필터는 결과 집합을 조건으로 줄이고, 정렬은 같은 결과를 어떤 기준으로 먼저 볼지 바꾼다.

Baymard의 검색 UX 연구는 사용자가 제품명뿐 아니라 속성, 문제, 호환성, 주관적 표현으로 검색한다는 점을 보여준다. 검색은 입력어 해석과 결과 복구가 중요하고, 필터는 선택 조건과 결과 수 변화가 중요하다.

실무 해석

프론트엔드에서는 이 셋을 URL State로 관리할지 결정해야 한다. 공유 가능한 탐색 결과라면 검색어, 필터, 정렬을 URL에 반영하는 편이 재방문과 협업에 유리하다.

탐색 패턴 선택 기준

• 사용자가 키워드를 알고 있는지 확인한다
• 조건을 조합해야 하는 탐색인지 본다
• 순서가 의사결정에 영향을 주는지 판단한다

자주 빠지는 함정

필터와 정렬을 한 메뉴에 섞으면 사용자는 결과가 줄어든 것인지 순서만 바뀐 것인지 헷갈린다. 탐색 도구는 역할이 보여야 한다.

추가로 비교할 탐색 사례

• 커머스 상품 목록, 이슈 리스트, 문서 데이터베이스를 비교한다
• 필터와 정렬이 섞여 헷갈리는 사례를 찾는다
• 선택된 필터 칩이 좋은 사례를 모은다

탐색 설계 질문

• 각 기능의 역할이 한 문장으로 구분되는가
• URL State와 현재 조건 표시를 다뤘는가

출처

• Baymard Institute, Ecommerce Search UX Best Practices: https://baymard.com/blog/ecommerce-search-query-types
• Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• GOV.UK Design System, Pagination: https://design-system.service.gov.uk/components/pagination/