coastdigitalgroup/coastai-skills

필터 및 정렬 시스템

목적

필터 및 정렬 시스템은 사용자가 대규모 데이터셋이나 제품 카탈로그를 탐색할 수 있도록 도와주는 검색 인터페이스 설계 방법론을 제공합니다. 기술적 구현이 로직을 처리하는 반면, 이 시스템은 검색 도구의 공간적 구성과 시각적 어포던스를 정의합니다. 사용자가 보기를 쉽게 세분화하고, 현재 필터링 상태를 이해하며, 맥락을 잃거나 압도당하지 않고 우선순위 모드(정렬)를 전환할 수 있도록 보장합니다.

사용 사례

• 전자상거래 사이트의 사이드바 또는 상단 바 검색 레이어 설계
• 디렉토리나 리소스 허브의 복잡한 검색 결과 페이지(SERP) 구성
• 모바일 우선 애플리케이션 인터페이스를 위한 '검색 서랍(Discovery Drawers)' 구현
• 콘텐츠가 많은 문서나 블로그 아카이브의 패싯 내비게이션 생성

사용하지 말아야 할 경우

• 소규모 데이터셋(12개 미만): 모든 콘텐츠가 단일 보기에 들어맞는다면, 필터링과 정렬을 추가하면 불필요한 상호작용 비용이 발생합니다.
• 단일 경로 워크플로우: 사용자가 카탈로그를 탐색하기보다는 선형적인 순서를 따라야 하는 경우
• 원시 데이터 테이블: 사용자가 브라우저 기본 '찾기' 또는 고급 스프레드시트 도구를 사용할 가능성이 높은 경우(다만, 상위 수준 정렬은 여전히 도움이 됩니다).

입력

1. 패싯 인벤토리: 사용자가 필터링할 수 있는 모든 속성 목록(예: 크기, 색상, 평점, 가격)
2. 우선순위 순위: '기본(80% 사용자가 사용)' 패싯과 '보조(특수 사양)' 패싯의 구분
3. 컨트롤 유형: 데이터 유형을 UI 컨트롤에 매핑(예: 다중 선택에는 체크박스, 가격에는 범위 슬라이더)
4. 레이아웃 컨텍스트: 사용 가능한 가로 및 세로 공간(responsive-grid-system에서 획득)

출력

1. 검색 레이아웃 청사진: 필터 막대(사이드바 vs 상단 바)와 결과 그리드의 배치 정의
2. 패싯 컴포넌트 사양: 검색 컨텍스트 내 체크박스, 견본, 범위 입력 요소의 시각적 디자인
3. 상태 맵: 활성 필터(칩/알약), 로딩 상태(스켈레톤), 빈 상태에 대한 시각적 처리
4. 반응형 전략: 데스크톱(예: 사이드바)에서 모바일(예: 하단 서랍)로 필터가 변환되는 방식에 대한 계획

워크플로우

1. 기본 레이아웃 패턴 선택

패싯 수에 따라 공간 배열을 선택합니다.

• 사이드바(왼쪽/오른쪽): 5개 이상의 패싯에 적합합니다. 가시성이 높고 검색 도구에 지속적으로 접근할 수 있습니다.
• 가로 상단 바: 1~4개의 패싯에 적합합니다. 결과의 너비를 최대화하지만 나중에 패싯이 추가되면 복잡해질 수 있습니다.
• 오버레이/서랍: 모바일 또는 검색이 보조 작업인 '깔끔한' 데스크톱 인터페이스에 적합합니다.

2. 패싯 시각적 계층 구조 정의

필터 목록에 visual-hierarchy-system 원칙을 적용합니다.

• 그룹 헤더: 굵고 간결한 제목 사용(예: 카테고리, 브랜드)
• 컨트롤 크기: 체크박스와 텍스트 링크가 충분한 수직 리듬을 갖도록 함(보통 --space-s 간격)
• 초기 확장 vs 축소: 가장 많이 사용되는 상위 3개 패싯은 확장하고, 나머지는 세로 공간을 절약하기 위해 축소

3. '활성 상태' 시스템 설계

사용자는 어떤 필터가 적용되었는지 항상 알아야 합니다.

• 요약(알약/칩): 활성 필터의 가로 목록을 결과 위나 사이드바 상단에 배치합니다.
• 전체 지우기: 전체 보기를 재설정하는 단일하고 눈에 띄는 액션을 제공합니다.
• 시각적 피드백: 필터가 전환될 때 결과 컨테이너가 '업데이트 중'임을 나타내야 합니다(예: 20% 불투명도 또는 스켈레톤 화면).

4. 정렬 어포던스 설정

포함(필터링)과 우선순위 지정(정렬)을 구분합니다.

• 배치: 정렬은 필터와 별도로 결과 영역의 오른쪽 상단 또는 왼쪽 상단에 유지합니다.
• 레이블 지정: 단순히 '가격'이 아닌 '정렬 기준: 가격(낮은 순)'과 같은 명확한 레이블을 사용합니다.

5. 모바일 검색 계획

• 검색 트리거: 화면 하단이나 상단에 고정 버튼(예: '필터 및 정렬')을 사용합니다.
• 서랍 패턴: 터치 대상 크기를 최대화하기 위해 전체 화면 또는 하단 서랍에 필터를 엽니다.
• 즉시 vs 배치: 모바일 보기가 즉시 업데이트(패싯)되거나 'X개 결과 표시' 버튼을 눌러야 적용되는지 결정합니다.

의사 결정 규칙

• '80/20' 규칙: 주어진 패싯에 대해 상위 5개 값만 표시하고, 나머지를 보려면 '더 보기' 링크를 사용합니다.
• 사이드바 vs 상단 바: 패싯 목록이 표준 노트북 화면에서 스크롤이 필요하면 사이드바를 사용합니다. 한 줄에 들어맞으면 상단 바를 사용합니다.
• 선택 지속성: 적용된 필터는 사이드바에서 스크롤되어 사라져도 계속 표시되어야 합니다(예: 고정 칩 바 사용).
• 빈 상태 폴백: 필터 조합이 막다른 길로 이어지지 않도록 하고, 항상 '재설정' 버튼이나 대안을 제공합니다.

제약 조건

• 접근성: 모든 필터 컨트롤에는 가시적인 포커스 링이 있어야 하며 키보드로 작동할 수 있어야 합니다. 접을 수 있는 패싯에는 aria-expanded를, 결과 개수/컨테이너에는 aria-live="polite"를 사용하여 화면 판독기 사용자가 결과가 업데이트되었음을 알 수 있도록 합니다.
• 반응성: 필터는 모바일에서 쌓이거나 서랍 안으로 이동하여 가로 오버플로우나 콘텐츠 그리드 '압박'을 방지해야 합니다. 필터 막대가 둘 이상의 레이아웃 컨텍스트(예: 사이드바 대 포함된 위젯)에 나타날 수 있는 경우 뷰포트 중단점보다 컨테이너 쿼리를 선호합니다.
• 대비: 활성/선택 상태(예: 체크된 상자나 파란색 칩)가 배경에 대해 3:1 대비 비율을 충족하는지 확인합니다.

일반적인 실패 패턴

• '미스터리 필터': 요약 칩/알약 막대가 없어 사용자가 어떤 필터가 활성화되어 있는지 알 수 없음
• '무한 사이드바': 너무 길어서 관리 자체가 작업이 되는 사이드바. 긴 목록에 '더 보기'를 사용하지 않아서 발생함
• 모바일 밀어넣기: 데스크톱 사이드바를 모바일 보기에 억지로 맞춰서 결과 그리드를 읽을 수 없게 만듦
• '적용됨' 피드백 부족: 변경이 빠르더라도 결과 그리드가 시각적으로 변경을 나타내지 않고 필터를 전환함
• 막다른 길: 항목이 0개로 필터링되고 되돌아갈 방법이 제공되지 않음

검증 기준

• 필터링(포함)과 정렬(우선순위 지정) 사이에 명확한 구분이 있음
• 활성 필터가 시각적으로 요약됨(예: 칩/알약)
• 가장 많이 사용되는 패싯은 기본적으로 확장되고, 나머지는 접을 수 있음
• '전체 지우기' 또는 '재설정' 액션에 쉽게 접근 가능함
• 시스템이 모바일 전용 검색 패턴(예: 서랍)을 제공함
• 결과 업데이트 시 로딩 상태(스켈레톤/스피너)가 정의됨
• 모든 컨트롤이 터치 대상 크기(WCAG 2.2 SC 2.5.8 기준 최소 24x24px, 권장 44x44px) 및 키보드 접근성 요구 사항을 충족함