페이지네이션Pagination

책의 쪽 번호와 같습니다. 100개짜리 목록을 한 번에 그리면 느리고 스크롤이 끝없이 길어지니, 10~20개씩 끊고 번호로 넘깁니다. 검색 결과, 관리자 표, 게시판이 이 방식을 씁니다.

언제 쓰나요

목적을 갖고 찾는 목록에 씁니다. "3페이지 그 글"처럼 위치를 기억하고 돌아올 수 있고, URL 에 ?page=3 이 남아 공유와 뒤로 가기가 됩니다. 관리자 표처럼 정렬·필터와 함께 쓰는 곳은 거의 항상 페이지네이션입니다.

번호가 많으면 1 2 3 … 12 처럼 가운데를 접습니다. 현재 페이지는 눌리지 않게, 첫 페이지의 "이전"과 마지막 페이지의 "다음"은 비활성으로. 한 페이지 개수를 고르게 하는 것도 좋습니다.

AI에게 시키기

주문 목록에 페이지네이션을 붙여줘.
- 한 페이지 20개, 아래에 ‹ 이전 · 번호 · 다음 › 버튼. 번호가 7개 넘으면 … 으로 접기
- 현재 페이지는 URL 쿼리 ?page=N 에 반영해서 새로고침·공유해도 유지
- 첫/마지막 페이지에서 이전/다음 비활성, 현재 번호는 aria-current="page"
- 페이지 바뀔 때 목록 맨 위로 스크롤, 로딩 중엔 스켈레톤

"페이지 나눠줘"라고 하면 URL 반영이 빠져 새로고침하면 1페이지로 돌아갑니다.

혼동 주의

• 인피니트 스크롤: 아래로 내리면 계속 붙는 방식입니다. 둘러보기에 맞고, 위치를 기억하기엔 페이지네이션이 낫습니다.
• "더 보기" 버튼: 둘의 중간입니다. 누를 때마다 아래에 붙지만 자동은 아닙니다. 이 사이트의 블로그가 이 방식입니다.
• 스텝: 순서가 있는 단계 이동입니다. 페이지네이션은 같은 종류의 목록을 나눈 것입니다.
• 브레드크럼: 계층 위치입니다. 페이지네이션은 한 목록 안의 앞뒤입니다.