제품 목록 필터, 선택한 조건을 보여줘야 하는 이유

제품이 많은 홈페이지에서는 용도나 규격을

골라 목록을 좁히는 필터가 유용합니다.

그런데 여러 조건을 선택한 뒤 화면에 제품 몇

개만 남으면, 내가 무엇을 골랐는지 다시

확인해야 할 때가 있습니다.

필터는 제품을 줄여주는 기능만으로 완성되지

않습니다.

지금 어떤 기준으로 목록을 보고 있는지 알 수

있어야 조건을 수정하거나 다른 제품을 찾는

흐름도 이어집니다.

이번 글에서는 제품 목록에 적용된 조건을

표시하는 방법을 살펴보겠습니다.

검색 결과가 없는 화면의 일반적인 안내보다,

고객이 직접 고른 필터를 확인하고 되돌리는

과정에 초점을 맞춥니다.

01

선택한 조건을 목록 가까이에 보여주세요

필터가 옆 메뉴나 접힌 영역 안에만 있으면

고객은 결과 목록을 보는 동안 어떤 조건을

적용했는지 놓칠 수 있습니다.

특히 여러 분류를 동시에 고르면 조건을

기억하기가 더 어려워집니다.

제품 목록 위에 “용도: 실내용”, “설치

방식: 벽걸이형”처럼 선택한 조건을 짧게

모아 보여주세요.

체크박스가 선택된 상태뿐 아니라 목록을 읽는

위치에서도 현재 기준을 알 수 있도록 하는

방식입니다.

내부 코드나 약어 대신 고객이 선택할 때 봤던

이름을 그대로 사용하는 것이 좋습니다.

필터 안에서는 “실내용”인데 결과 위에는

다른 코드가 나오면 같은 조건인지 다시

해석해야 합니다.

✓ 목록 위에 적용 조건 모아 표시

✓ 선택 화면과 같은 항목명 사용

·　·　·

02

조건 하나씩 해제할 수 있게 하세요

원하는 제품이 적게 나온다고 해서 모든

조건을 처음부터 다시 고르고 싶은 것은

아닙니다.

용도는 유지하면서 설치 방식만 바꿔보고 싶은

고객도 있습니다.

선택 조건 옆에 개별 해제 기능을 두면 필요한

부분만 수정할 수 있습니다.

전체 초기화와 개별 해제는 역할이 다르므로

문구와 위치도 구분해보세요.

아이콘만 사용하는 경우에도 무엇을 해제하는

동작인지 알 수 있도록 설계하는 것이

좋습니다.

실제로 하나의 조건을 지웠을 때 다른

선택까지 함께 사라지지 않는지 확인하세요.

✓ 조건별 해제와 전체 초기화 구분

✓ 다른 선택이 유지되는지 확인

03

필터 적용 시점을 분명히 알려주세요

조건을 고르는 즉시 목록이 바뀌는 방식도

있고, 적용 버튼을 눌러야 바뀌는 방식도

있습니다.

고객이 선택한 것과 실제 목록에 반영된 것이

다르다면 화면에서 구분할 수 있어야 합니다.

적용 버튼이 있는 구조라면 버튼을 누르기

전의 선택을 이미 반영된 조건처럼 보여주지

않도록 점검해보세요.

반대로 즉시 갱신되는 구조라면 처리 중인

순간에 이전 결과를 새 결과로 오해하지

않도록 안내가 필요합니다.

항목 수를 표시하는 경우에도 기준을 맞춰야

합니다.

전체 제품 수인지, 적용된 조건의 결과 수인지

명확하게 설명하고 목록 갱신과 함께 숫자도

바뀌는지 확인해주세요.

✓ 선택 중과 적용 완료 상태 구분

✓ 목록과 결과 수의 기준 맞추기

·　·　·

04

결과가 없을 때도 조건을 남겨두세요

여러 조건을 함께 고르면 각각에 맞는 제품은

있어도 모든 조건을 만족하는 제품은 없을 수

있습니다.

이때 조건을 숨기고 “제품이 없습니다”만

보여주면 고객은 무엇을 바꿔야 할지 알기

어렵습니다.

선택한 조건을 그대로 보여주고 하나씩

해제하거나 전체 목록으로 돌아갈 수 있게

안내해보세요.

“선택한 조건에 맞는 제품이 없습니다”처럼

현재 조건의 결과라는 점을 설명하는 것이

좋습니다.

결과를 늘리기 위해 고객이 고른 조건을 몰래

풀어버리는 방식은 피해주세요.

조건이 바뀌었다면 무엇이 달라졌는지 알려야

비교 기준을 유지할 수 있습니다.

✓ 결과 없음에도 선택 조건 유지

✓ 조건 해제와 전체 보기 경로 제공

05

휴대폰에서 필터를 닫은 뒤 확인하세요

휴대폰에서는 필터를 별도 창이나 펼침

영역으로 제공하는 경우가 있습니다.

선택 화면을 닫은 뒤에도 적용된 조건을

확인할 수 있는지 실제 흐름으로

점검해보세요.

조건이 많다면 선택 개수만 표시할 수도

있지만, 숫자만으로는 어떤 조건인지 알 수

없습니다.

선택 요약을 보여주거나 조건 확인 영역을

다시 여는 경로를 함께 제공하는 방식이

필요합니다.

고객이 조건을 고르고, 목록을 보고, 조건

하나를 바꾸는 과정을 직접 따라가보세요.

화면 폭이 줄어도 조건명이 잘리지 않는지,

해제 버튼을 누르기 어려운지 확인하면

구체적인 수정 지점을 찾을 수 있습니다.

✓ 필터를 닫아도 조건 확인 가능하게

✓ 조건 변경부터 결과 확인까지 점검

·　·　·

자주 묻는 질문

Q. 조건이 하나뿐이어도 따로 표시해야 하나요?

선택한 값이 목록을 보는 위치에서 명확하게

보인다면 같은 정보를 반복할 필요는

없습니다.

필터가 접히거나 화면 밖으로 사라지는

구조라면 적용 조건을 가까이에 표시하는

방식을 검토해보세요.

Q. 정렬 방식도 필터에 포함해야 하나요?

정렬은 제품을 보여주는 순서를 바꾸고,

필터는 조건에 맞는 대상을 고르는

역할입니다.

고객이 두 기능을 구분할 수 있도록 표시하고

초기화 버튼이 어느 범위에 적용되는지도

설명하는 것이 좋습니다.

Q. 결과 수를 반드시 표시해야 하나요?

모든 목록에 필수는 아니지만 조건 적용

결과를 이해하는 데 도움이 될 수 있습니다.

표시한다면 실제 목록과 같은 기준으로

계산되는지 확인하세요.

정확하지 않은 수치를 임시로 넣는 것보다

상태를 분명하게 안내하는 것이 우선입니다.

·　·　·

제품 필터의 완성도는 조건을 얼마나 많이

제공하느냐만으로 정해지지 않습니다.

고객이 현재 기준을 이해하고 필요한 조건만

바꿀 수 있어야 제품 탐색이 자연스럽게

이어집니다.

회사 홈페이지에서 조건 두 개를 고른 뒤

하나만 해제해보세요.

적용 상태와 결과 목록이 함께 바뀌고, 남은

조건을 쉽게 확인할 수 있는지부터 살펴보면

좋겠습니다.

━━

SOIJEONG

좋은 홈페이지의 다음 단계,

소이정과 함께 정리해보세요.

홈페이지 제작에 대해

궁금한 점이 있다면,

부담 없이 소이정에 문의주세요.

소이정 홈페이지에서 상담하기 ↗

​