페이지네이션 UI 패턴

2010년 Daum 검색 개편 당시 발견된 결함을 계기로 페이지 내비게이션(페이지네이션) 컨트롤의 UI 설계를 짚은 글이다. 개편된 Daum 검색결과 페이지에서는 11페이지로 바로 이동할 방법이 없어, 반드시 10페이지로 먼저 이동한 뒤 '다음' 버튼을 눌러야만 했다. 검색결과 페이지 번호는 결과의 정확성에 따른 상대적 거리감에 불과한 정보이지만, 그렇다 해도 10페이지 이후 접근이 이렇게 번거로워지는 것은 UX 설계 실수이거나 개발 적용 단계에서의 누락으로 추정된다.

경쟁 포털·검색엔진의 접근 방식은 저마다 달랐다. 네이버는 사용자가 이동한 현재 페이지를 중심으로 앞뒤 페이지 번호를 자동으로 재배치해 자연스러운 이동을 지원한다. 구글은 처음엔 '다음 10개 페이지'만 보여주다가, 페이지를 이동하면 현재 페이지 앞뒤로 10개씩 표시하는 방식을 쓴다. 이는 다른 포털들이 항상 일정한 개수(총 10개)의 페이지 번호를 유지하는 '디자인적 일관성'을 추구하는 것과 달리, 앞뒤 개수를 동일하게 맞추는 '논리적 일관성'을 추구한다는 점에서 구별된다. 야후US는 현재 페이지가 항상 정중앙에 오도록 총 11개의 페이지 번호를 표시해 대칭성을 확보했다.

버튼 크기 문제도 함께 지적된다. 피츠의 법칙에 따르면 자주 클릭하는 버튼일수록 크고 가까울수록 유리한데, 비교 대상 중 Daum의 '이전/다음' 버튼이 가장 작아 불리했다. 네이버는 '이전페이지'처럼 레이블을 구체적으로 표기하면서 자연스레 버튼 크기도 커져, 의미 전달과 클릭 영역 확대라는 두 효과를 동시에 얻었다. 반면 구글은 클릭 가능 영역 자체는 넓지만 버튼의 시각적 형태(테두리 등)가 없어, 커서를 올려 손가락 모양으로 바뀌는지 확인해야만 클릭 가능 여부를 알 수 있는 문제가 있었다.

이 사례는 페이지네이션이라는 작고 반복적인 UI 요소도 '디자인적 일관성'과 '논리적 일관성' 중 어느 원칙을 따르느냐, 그리고 클릭 영역을 얼마나 명확하게 시각화하느냐에 따라 사용성이 크게 갈릴 수 있음을 보여준다.

핵심 내용

  • 특정 페이지(예: 11페이지)로 바로 이동하지 못하고 중간 페이지를 거쳐야 하는 결함은 페이지네이션에서 흔히 발생하는 실수
  • 네이버식: 현재 페이지를 중심으로 앞뒤 페이지 번호를 자동 재배치
  • 구글식: 앞/뒤 페이지 개수를 동일하게 유지하는 '논리적 일관성' (다른 포털의 총 개수 고정 방식인 '디자인적 일관성'과 대비)
  • 야후US식: 총 11개 페이지 번호로 현재 페이지를 정중앙에 배치하는 대칭 설계
  • 피츠의 법칙에 따라 자주 클릭하는 이전/다음 버튼은 크고 명확한 클릭 영역, 구체적인 레이블이 유리
  • 클릭 가능 영역이 넓어도 버튼의 시각적 형태(테두리 등)가 없으면 사용자가 클릭 가능 여부를 인지하지 못할 수 있음

관련 개념

출처

최종 업데이트: 2026-08-17 | 출처 1개