04 · Patterns · 탐색 · 구조
정렬Sorting
‘순서만’ 바꾸는 행동. 필터와 달리 항목 수는 그대로이기 때문에 컨트롤도 가볍고 현재 상태 표시만 선명하면 충분합니다.
컨트롤 형태
- 드롭다운 — 정렬 키가 3~5개일 때 기본. 오른쪽 상단에 배치.
- 테이블 헤더 클릭 — 표 데이터 특화. 각 컬럼이 정렬 키가 될 때.
- 토글 칩 — 2~3개의 고정 선택지(“최신” / “인기”)만 있을 때. 모바일에 유리.
결과 137개
은혜의 생명력2026.04.19
말씀과 기도의 능력2026.04.12
부르심을 붙드는 신앙2026.04.05
방향을 뒤집으려면 같은 옵션을 다시 선택.
방향
정렬 키마다 자연스러운 기본 방향이 있습니다. 조회순은 내림차순(많이 본 것부터), 날짜는 내림차순(최근 것부터), 제목은가나다순. 기본값을 직관에 맞추세요.
같은 키를 다시 선택하면 방향이 뒤집힙니다. 화살표 아이콘(↑↓)으로 현재 방향을 표시하세요.
Do· 자연스러운 기본값
‘최신순’을 기본으로. 공지·설교·신청 내역에서 가장 최근이 맨 위에 오는 것이 기대입니다.
Don't· 숨은 방향
‘조회수’ 드롭다운만 띄우고 방향 아이콘이 없으면 사용자는 “많이 본 순인가 적게 본 순인가”를 추측해야 합니다.
상태 유지
- 필터처럼 URL에 저장.
?sort=date&dir=desc. - 페이지를 떠났다 돌아와도 마지막 정렬을 기억(sessionStorage)하면 체감 품질이 올라갑니다.
- 단, 사용자가 명시적으로 변경한 경우에만. 앱이 임의로 기억하지 말 것.
접근성
- 테이블 헤더 정렬 버튼은
aria-sort="ascending" | "descending" | "none". - 현재 정렬 상태는 드롭다운의 선택값으로 항상 노출. ‘최신순’이 아닌 ‘정렬’만 보이면 안 됩니다.
- 화살표 아이콘은
aria-hidden, 상태는 라벨 텍스트에도 포함(“최신순”).