UI 페이지네이션

개요

UI 페이지네이션은 긴 목록이나 여러 문서에 나뉜 내용을 사용자가 일정한 묶음으로 탐색하도록 만드는 상호작용 방식이다. 페이지 번호, 이전·다음 링크, 현재 위치 표시가 대표적인 구성 요소다. 검색 결과에서 2페이지를 열었다면, 사용자는 지금 어느 구간을 보고 있고 어디로 돌아갈 수 있는지 화면에서 알아야 한다.

한 화면에 모든 항목을 놓기 어려울 때 목록을 나누면, 사용자는 현재 범위를 살피고 다음 범위로 이동한다. 몇 개씩 나눌지 정하면서 검색 조건이 유지되는지, 뒤로 가기로 같은 위치에 돌아오는지, 키보드와 보조기술로 이동 경로를 읽을 수 있는지도 살펴야 한다.

화면에 페이지 번호가 있다고 서버가 OFFSET으로 조회한다고 정해지지는 않는다. 같은 화면을 키셋 조회로 만들 수도 있고, 이미 받은 배열을 나눠 표시할 수도 있다. UI는 사용자의 이동과 위치 인식을 맡고, 데이터 조회는 어떤 항목을 반환할지 정한다.

이 문서는 화면의 탐색과 접근성을 다룬다. OFFSET·키셋·커서와 데이터가 바뀔 때의 일관성은 데이터 페이지네이션 문서에서 다룬다.

쪽 구성에서 화면의 탐색으로

pagination은 컴퓨터보다 오래된 출판 용어다. Merriam-Webster는 책의 쪽 순서를 나타내는 번호와 쪽 구성을 뜻으로 싣고, 영어 단어의 확인된 용례를 1794년으로 기록한다. 여기서 확인되는 것은 단어의 사용이며, 웹의 목록 탐색을 누가 처음 구현했는지는 별도의 역사다.¹

화면의 페이지네이션은 이 익숙한 쪽과 순서의 표현을 이용해 현재 위치와 이동할 곳을 보여준다. 책의 쪽 번호가 고정된 문서 안의 위치를 가리킨다면, 검색 결과의 번호는 검색 조건과 정렬에 따라 만들어진 목록의 위치를 가리킨다.

웹 문서 사이의 이전·다음 관계 (1999)

1999년 12월 24일의 HTML 4.01은 링크 관계 Next와 Prev를 문서의 순서에 연결해 정의했다. 다음 문서와 이전 문서를 가리키는 관계를 마크업으로 표현하는 기록으로, 오늘날 rel="next"·rel="prev"를 읽는 배경이 된다.²

상호작용 패턴으로 정리된 목록 탐색

Martijn van Welie의 패턴 라이브러리는 Paging을 많은 항목 가운데 원하는 항목을 찾아보는 문제의 해법으로 설명한다. 일정한 항목 수의 페이지와 페이지 사이의 이동을 함께 제시하므로, 이 문맥에서는 페이지네이션을 상호작용 패턴이라고 부를 수 있다.³

데이터베이스 조회 기법까지 한 종류의 패턴으로 묶으면 읽을 대상이 흐려진다. 사용자가 3페이지로 이동하는 조작과 서버가 다음 20행을 찾는 계산은 연결되지만, 바꾸는 이유와 검토할 기준은 서로 다르다.

현재 위치를 보조기술에 전달하기 (2017)

2017년 WAI-ARIA 1.1 권고안은 aria-current로 한 집합 안의 현재 항목을 표현하며, page 값은 현재 페이지를 나타낸다. 현재 번호의 색이나 테두리와 함께 이 의미를 전달하면 화면을 보지 않고 탐색하는 사용자도 위치를 읽을 수 있다.⁴

페이지 번호·더 보기·무한 스크롤

번호가 있는 방식은 특정 구간을 다시 찾거나 주소를 공유할 때 유용하다. “더 보기”는 사용자가 추가 표시 시점을 고르고, 무한 스크롤은 스크롤 위치에 따라 항목을 계속 덧붙인다. 검색 조건이나 페이지를 바꿀 때 현재 위치가 무엇인지, 항목이 추가됐을 때 초점은 어디에 남는지를 함께 정해야 한다.

GOV.UK의 현재 설계 지침은 검색 결과나 여러 페이지의 내용을 탐색하는 페이지네이션을 제시한다. 한 페이지만 있으면 이동 장치를 표시하지 않고, 키보드 사용자가 겪을 문제 때문에 무한 스크롤을 피하도록 권한다. 이는 해당 디자인 시스템의 사용 지침이다.⁵

세 페이지로 읽는 작은 예제

검색 결과가 15개이고 한 페이지에 5개씩 보여준다고 가정하자. 2페이지에는 6~10번째 항목이 보이고, 이전은 1페이지로, 다음은 3페이지로 이동한다. 이 예제를 고른 이유는 조회 알고리즘을 구현하지 않고도 현재 위치와 이동 목적지를 확인할 수 있기 때문이다.

<nav aria-label="Search result pages">
  <a href="/search?q=typescript&amp;page=1" rel="prev">Previous</a>
  <a href="/search?q=typescript&amp;page=1" aria-label="Page 1">1</a>
  <a href="/search?q=typescript&amp;page=2" aria-label="Page 2" aria-current="page">2</a>
  <a href="/search?q=typescript&amp;page=3" aria-label="Page 3">3</a>
  <a href="/search?q=typescript&amp;page=3" rel="next">Next</a>
</nav>

예제 URL은 설명용 검색 경로다. 검색어 q를 모든 링크에 유지하고 page만 바꾸며, 현재 2페이지에는 aria-current="page"를 붙였다. 영어 링크 라벨은 한·영 코드 예제를 동일하게 읽도록 사용했다. 실제 한국어 화면에서는 접근성 이름과 라벨도 한국어로 제공한다.

이 마크업은 탐색 링크만 보여준다. 실제 서비스는 요청 주소의 검색 조건과 페이지를 결과 목록에 반영하고, 잘못되거나 사라진 페이지의 처리와 브라우저 뒤로 가기 때의 상태 복원도 정해야 한다.