04 · Patterns · 탐색 · 구조
페이지네이션 전략Pagination Strategy
페이지 번호·무한 스크롤·더 보기 버튼. 셋 다 ‘다음 결과를 본다’는 목적은 같지만, 사용자의 행동 유형과 콘텐츠 성격에 따라 고르는 답이 달라집니다.
선택 기준
| 방식 | 적합한 케이스 | 피할 케이스 |
|---|---|---|
| 페이지 번호 | 검색 결과, 관리자 표, 아카이브 — 특정 위치로 돌아가야 하는 정확한 탐색. | 모바일에서 스크롤로 보는 피드형. |
| 더 보기 | 설교·공지·행사 목록 — 사용자가 멈추고 다른 행동(상세 보기·저장)을 할 가능성. | 한 번에 끝까지 보는 게 기본인 피드. |
| 무한 스크롤 | SNS 피드, 뉴스 — 끝에 도달하지 않는 것이 의도. | 하단 Footer·CTA가 중요한 화면. |
페이지 번호의 디테일
- 현재 페이지·전체 페이지 수를 같이 노출(“3 / 42”).
- 양 끝(처음·마지막)으로의 직행을 제공. 특히 데스크톱 관리 화면.
- URL은
?page=3으로. 새로고침·공유·뒤로 가기가 모두 동작해야 합니다. - 한 페이지당 개수(20 / 50 / 100)를 사용자가 고를 수 있게 하면 전문 사용자에게 큰 차이.
“더 보기”의 장점
사용자는 스크롤을 이어가지만, 각 “더 보기” 클릭이 명시적인 ‘계속’ 의사 표현입니다. 덕분에 페이지 하단에 Footer를 둘 수 있고, 로딩 피로·무한 스크롤의 방향 상실을 피할 수 있습니다.
Do· 진행도 노출
“37 / 248개 표시” 같은 표시를 버튼 위에. 사용자가 전체 규모를 가늠할 수 있어야 멈춰야 할 시점을 스스로 판단합니다.
Don't· 끝없는 버튼
진행도가 없는 ‘더 보기’는 무한 스크롤의 단점(끝을 모름)만 가져오고 장점(자동 이어짐)은 버린 꼴입니다.
무한 스크롤의 위험
- Footer가 사라집니다. 중요한 링크(교회 소개·사무실)가 있으면 접근이 끊깁니다.
- 뒤로 가기 후 스크롤 위치 복원을 구현하지 않으면 UX가 망가집니다.
- 오래 스크롤한 사용자가 자신의 위치를 상실합니다. ‘위로’ 버튼은 필수.
접근성
- 페이지 번호는
nav aria-label="페이지". 현재 페이지엔aria-current="page". - 무한 스크롤의 경우 새 항목 로드를
aria-live="polite"로 “20개 더 불러옴” 식으로 안내. - 로딩 스피너에는
role="status"+ 숨긴 라벨(“결과 불러오는 중”).