페이지네이션 (Pagination)

디자인학
한 줄 정의: 많은 양의 콘텐츠를 여러 페이지로 나누어 번호를 매겨 사용자가 원하는 페이지로 이동할 수 있게 하는 UI 패턴이다.

쉽게 풀면

인터넷 쇼핑몰에서 상품을 검색하면 '1 2 3 4 다음' 같은 숫자 버튼이 하단에 나타나는 것을 본 적이 있을 것이다. 이렇게 많은 콘텐츠를 여러 페이지로 나누고 번호를 매겨 원하는 위치로 바로 이동할 수 있게 하는 방식이 페이지네이션이다. 계속 아래로 내려서 보는 무한스크롤과 달리, 특정 페이지로 돌아오거나 진행 상황을 파악하기 쉽다는 장점이 있다.

왜 중요한가

페이지네이션은 대량의 콘텐츠를 번호가 매겨진 페이지 단위로 분할해 사용자가 정보를 단계적으로 탐색하도록 돕는 UI 패턴으로, 검색 결과나 게시판형 서비스에서 흔히 쓰인다. 무한스크롤과 달리 사용자가 특정 위치로 돌아오거나 진행 상황을 인지하기 쉽다는 장점이 있다.

검색엔진 최적화 관점에서는 페이지마다 고유한 URL이 부여되는 페이지네이션이 하나의 URL만 갖는 무한 스크롤보다 각 페이지의 콘텐츠가 개별적으로 색인되기 유리하다는 차이도 있다.

페이지 번호를 누르면 스크롤 위치가 항상 목록 상단으로 되돌아가는 것이 표준 동작이며, 이 위치 이동이 빠지면 사용자가 페이지가 바뀐 것을 인지하지 못하는 경우가 생긴다. 첫 페이지와 마지막 페이지로 바로 이동하는 버튼을 함께 제공하는 것이 페이지 수가 많은 목록에서 사용자의 탐색 부담을 크게 줄여 준다.

핵심 정리

예시로 보기

가상의 예: 게시글 1,234개를 한 페이지에 20개씩 보여 준다고 합니다(코드로 계산).

항목값계산
전체 페이지 수62⌈1234 ÷ 20⌉
마지막 페이지의 항목 수141234 − 61 × 20
5페이지의 오프셋80(5 − 1) × 20

페이지가 62개이므로 번호를 모두 늘어놓지 않고 현재 페이지 주변만 보여 주는 줄임 표시를 씁니다. 현재 7페이지, 양옆 1개씩이면 1 … 6 7 8 … 62, 현재 62페이지면 1 … 61 62처럼 나타납니다.

자주 하는 오해

오해바로잡기
페이지네이션은 무한스크롤보다 낡은 방식이다.목적에 따라 다릅니다. 특정 위치로 돌아오거나 끝이 있는 목록을 찾을 때는 페이지네이션이, 연속해서 훑어보는 탐색에는 무한스크롤이 맞는 경우가 많습니다.
오프셋 방식이면 항상 충분하다.건너뛸 개수가 매우 커지면 데이터베이스가 느려질 수 있고, 목록이 바뀌는 중에는 항목이 중복되거나 빠질 수 있습니다.
전체 페이지 수는 항상 정확히 알 수 있다.전체 개수를 세는 비용이 크거나 자료가 계속 늘어나면 “다음”만 제공하는 설계를 택하기도 합니다.
번호 버튼만 있으면 된다.현재 위치 표시, 이전·다음, 첫·마지막 이동을 함께 제공해야 많은 페이지에서도 탐색이 쉽습니다.

논문에서는 이렇게 쓰입니다

실제 논문에서

이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.

예시 문장

아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.

본 연구는 무한스크롤과 페이지네이션 방식이 사용자의 정보 검색 완료 시간에 미치는 차이를 비교하였다.

두 가지 콘텐츠 탐색 방식의 효율성을 비교한 사용성 실험이다.

"동일한 게시판을 페이지네이션 방식과 무한스크롤 방식으로 각각 구현하여 사용자의 특정 게시물 재방문 소요시간을 비교하였다."

콘텐츠 탐색 방식에 따라 정보 재접근 효율성이 달라짐을 보여준 연구이다.

조금 더 깊게 보면

페이지 수가 많은 경우 페이지 번호 목록 자체가 복잡해져 별도의 축약 표시 규칙이 필요하며, 최근에는 콘텐츠 소비 패턴에 따라 무한스크롤과 혼용하는 하이브리드 방식도 늘고 있다. 무한스크롤이 연속적 탐색에 적합하다면 페이지네이션은 명확한 종료 지점과 위치 인지가 중요한 경우에 더 적합하다.

페이지 번호가 많을 때는 전체를 나열하지 않고 현재 페이지 주변 몇 개와 처음·끝 페이지만 보여주고 나머지는 줄임표로 생략하는 방식이 표준적으로 쓰이며, 이 생략 규칙이 없으면 수백 페이지짜리 목록에서 번호 목록 자체가 화면을 압도한다.

주의할 점

페이지네이션은 특정 정보를 다시 찾기 쉽지만 콘텐츠 소비의 몰입감은 무한스크롤보다 낮을 수 있다.

헷갈리기 쉬운 용어

긴 목록을 나누어 보여 주는 방식입니다.

용어동작잘 맞는 상황
페이지네이션번호로 구획을 나누어 이동특정 위치로 돌아오기, 끝이 있는 목록
무한스크롤아래로 내릴수록 다음 항목을 이어 붙임연속 탐색, 피드형 콘텐츠

참고 문헌

  1. Winand, M. (2012). SQL Performance Explained. Markus Winand.
  2. Krug, S. (2014). Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd ed.). New Riders.

표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.

관련 용어