04 · Patterns · 탐색 · 구조
필터링Filtering
많은 항목 중 조건에 맞는 것만 추리는 행동. 적용된 필터가 ‘보이는 곳’에 있어야 하고, 초기화가 한 번에 가능해야 합니다.
배치 방식
- 상단 칩 — 옵션이 5개 이하로 적을 때. 터치 친화적이고 모바일 기본.
- 사이드 패널 — 카테고리 × 체크박스 × 범위처럼 복합일 때. 데스크톱에서 적합.
- 드롭다운 — 짧은 단일 선택(정렬, 기간). 1~2개 정도만.
주일설교2026년담임목사
결과 137개 중 24개 · 필터 3개 적용됨
즉시 적용 vs. 버튼
- 옵션 1~2개 조합은 즉시 적용. 탭 순간 결과가 바뀌어야 자연스럽습니다.
- 옵션이 많고 서버 비용이 큰 검색(설교 아카이브·도서 검색)은 “적용” 버튼으로 일괄 반영.
- 버튼 방식이라도 개별 필터는 ‘선택됨’ 상태로 표시해 사용자가 다음 조합을 시도할 수 있어야 합니다.
Do· 적용된 필터를 내내 보여주기
목록 상단에 적용된 필터 칩을 항상 노출. 각 칩에 X 버튼을 두어 하나씩 해제할 수 있게 하고, 오른쪽 끝엔 “모두 해제” 링크를 두세요.
Don't· 숨겨진 필터
필터를 닫아두면 사용자는 “왜 결과가 이상하지”라고 느낍니다. 적용 상태가 접힌 서랍 안에 있어서는 안 됩니다.
결과 0건
필터가 너무 좁아 결과가 없을 때는 일반적인 빈 상태가 아니라“적용된 필터를 완화하라”는 제안을 해야 합니다. “기간 범위를 넓혀보세요” 같은 구체적 문구 + “필터 초기화” 버튼.
접근성
- 필터 그룹은
fieldset + legend로 묶어 스크린리더가 “카테고리, 3개 선택됨” 식으로 안내 가능하게. - 칩은
button. 해제 X는 별도 버튼 +aria-label="{칩이름} 필터 해제". - 결과 개수 변경은
aria-live="polite"영역에서 “137개 결과” 식으로 안내.