페이지네이션

정의

페이지네이션은 아주 긴 목록을 한 번에 다 쏟아내지 않고, 일정한 개수씩 잘라 여러 페이지로 나눈 뒤 그 사이를 오갈 수 있게 해 주는 방식입니다. 보통 목록 아래에 1, 2, 3 같은 페이지 번호와 '이전 / 다음' 버튼이 놓여, 원하는 구간으로 건너뛰거나 한 칸씩 이동합니다. 지금 보고 있는 페이지는 번호를 강조해 표시하므로, 사용자는 전체 중 어디쯤을 보고 있는지 늘 알 수 있습니다. 책의 쪽 번호와 같은 원리라, 별다른 설명 없이도 누구나 곧바로 이해합니다. 검색 결과나 게시판, 표처럼 항목이 많은 화면에서 흔히 만나게 됩니다.

왜 중요한가

끝없이 아래로 이어지는 무한 스크롤과 달리, 페이지네이션은 사용자에게 '몇 페이지 중 몇 번째'라는 또렷한 위치 감각을 줍니다. 이 감각은 생각보다 중요합니다. 전체 분량을 가늠할 수 있어 언제쯤 끝날지 예상되고, 마음에 든 항목을 봤다면 '3페이지에 있었지' 하고 나중에 같은 지점으로 정확히 돌아올 수 있습니다. 주소에 페이지 번호가 남으면 그 링크를 저장하거나 남에게 공유하기도 쉽습니다. 무한 스크롤에서는 한번 지나친 항목을 다시 찾기가 무척 어렵고 끝이 보이지 않아 피로해집니다. 또한 페이지 단위로 필요한 만큼만 불러오므로 화면이 무겁게 늘어지지 않고, 검색 결과처럼 사용자가 여러 구간을 비교하며 탐색하는 상황에도 잘 맞습니다.

흔한 실수

• 지금 몇 페이지에 있는지 강조가 약한 경우입니다. 현재 페이지 번호가 다른 번호와 비슷하게 보이면, 사용자는 자신의 위치를 놓쳐 같은 페이지를 다시 누르거나 엉뚱한 곳으로 이동하고 맙니다.
• 페이지가 수십, 수백 개인데 번호를 전부 늘어놓는 경우입니다. 번호가 화면을 가득 채우면 정작 필요한 이전, 다음이나 현재 주변 번호가 파묻혀 조작이 오히려 번거로워지고 시선도 분산됩니다.
• 한 페이지에 담는 항목 수를 적절히 정하지 않는 경우입니다. 너무 적으면 페이지를 계속 넘겨야 해 답답하고, 너무 많으면 페이지로 나눈 의미가 사라져 화면이 길어집니다. 콘텐츠 성격에 맞는 적정선을 찾아야 합니다.

실무 팁

• 페이지가 아주 많으면 처음과 끝, 그리고 현재 주변 몇 개만 번호로 보이고 나머지는 …로 줄이세요. 이렇게 하면 어디로든 한 번에 건너뛰면서도 번호 줄이 화면을 어지럽히지 않고 깔끔하게 유지됩니다.
• 현재 페이지는 색이나 굵기로 분명하게 강조하고, 이전과 다음 버튼은 늘 같은 자리에 두세요. 위치가 고정돼 있어야 사용자가 화면을 넘길 때마다 버튼을 다시 찾지 않고 습관적으로 빠르게 이동할 수 있습니다.
• 첫 페이지에서 이전 버튼, 마지막 페이지에서 다음 버튼은 눌리지 않도록 흐리게 처리하세요. 더 갈 곳이 없다는 신호를 줘야 사용자가 반응 없는 버튼을 헛되이 누르지 않습니다.

관련 개념