페이징 시스템

페이징 시스템은(는) 무엇을 하나요?

목적

페이징 시스템 스킬은 대규모 데이터셋을 개별 페이지로 분할하는 인터페이스를 설계하는 방법론을 제공합니다. 사용자가 (상품, 검색 결과, 아티클 등) 긴 항목 목록을 탐색하는 동안 "현재 위치"와 "남은 콘텐츠 양"을 명확히 인지할 수 있도록 합니다. 견고한 페이징 시스템은 탐색 정밀성과 단순성의 균형을 맞춰 인지 부하를 최소화하고 사용자의 방향 감각 상실을 방지합니다.

사용 사례

• 이커머스 또는 디렉토리 사이트의 검색 결과 페이지 설계
• 긴 블로그 또는 뉴스 아카이브 구성
• 콘텐츠 허브를 위한 "Load More" 방식 vs. 전통적인 번호 매기기 페이지네이션 구현
• 데이터 중심 대시보드 테이블 또는 로그 탐색 생성
• 각 섹션이 개별 뷰로 취급되는 다중 페이지 양식 또는 단계별 마법사 최적화

사용하지 말아야 할 경우

• 소규모 데이터셋(12개 미만 항목): 모든 콘텐츠가 한두 화면에 편안하게 들어맞는다면 페이징은 불필요한 클릭과 마찰을 추가합니다.
• 무한 스크롤 컨텍스트: 사용자가 탐색 중심의 소셜 피드나 뉴스 스트림을 살펴보는 경우로, 특정 페이지 주소가 중요하지 않을 때(대신 infinite-scroll-implementation 사용).
• 단일 내러티브 콘텐츠: "이전/다음" 링크만으로 충분한 선형 흐름의 아티클이나 스토리.

입력값

1. 전체 항목 수: 컬렉션에 총 몇 개의 항목이 있습니까?
2. 페이지당 항목 수: 표준 밀도는 얼마입니까(예: 12, 24, 48개 항목)?
3. 현재 페이지 컨텍스트: 사용자가 현재 보고 있는 페이지는 무엇입니까?
4. 표시 제약 조건: 페이징 바에 사용 가능한 가로 공간은 얼마입니까(responsive-grid-system 참조)?

출력값

1. 페이징 구조 명세: 페이지 번호, 이전/다음 버튼, "건너뛰기" 컨트롤(줄임표)에 대한 정의된 시각적 스타일
2. 상태 매트릭스: 기본, 현재, 호버, 포커스, 비활성화(예: 1페이지에서의 "이전" 버튼) 상태에 대한 시각적 처리
3. 반응형 전략: 페이징 바가 데스크톱(전체 범위)에서 모바일(컴팩트 보기)로 축소되는 방식에 대한 계획
4. 접근성 맵: ARIA 역할, 레이블 및 키보드 상호작용 패턴에 대한 명시적 정의

워크플로우

1. 범위 전략 정의

총 볼륨에 따라 한 번에 표시할 페이지 번호 수를 결정합니다.

• 간단(3-5페이지): 모든 페이지 번호를 표시합니다.
• 보통(6-10페이지): 첫 페이지, 마지막 페이지 및 현재 페이지 주변 윈도우를 표시합니다.
• 복잡(10페이지 이상): 줄임표(...)를 사용하여 건너뛴 범위를 나타냅니다(예: 1 ... 4 5 6 ... 20).

2. 탐색 컨트롤 설계

페이징 바의 시각적 계층 구조를 설정합니다.

• 기본 작업: 이전 및 다음 버튼은 명확하게 표시되고 막대의 끝에 위치해야 합니다.
• 현재 페이지 표시기: 대비가 높은 스타일(배경색 또는 굵은 테두리)을 사용하여 현재 페이지를 즉시 명확하게 만듭니다.
• 페이지 번호: 대화형 요소처럼 보이도록 합니다(예: interactive-state-system 사용).

3. 유동적 간격 및 크기 조정 적용

fluid-spacing-system을 사용하여 대상이 사용 가능하도록 합니다.

• 탭 대상: 모든 페이지 번호와 버튼은 최소 44x44px이어야 합니다. 시각적 밀도가 더 작은 컨트롤을 요구하는 경우 WCAG 2.2(2.5.8 대상 크기 최소 기준)는 대상 간 우발적 활성화를 방지하기 위해 24x24px의 절대 최소값과 적절한 간격을 설정합니다.
• 내부 간격: 잘못된 클릭을 방지하기 위해 페이지 번호 사이에 일관된 간격(예: --space-xs)을 사용합니다.

4. 접근성 설정 (WCAG AA/AAA)

• 랜드마크: 페이징을 aria-label="pagination"과 함께 <nav> 요소로 감쌉니다.
• 현재 페이지: 활성 페이지 링크에 aria-current="page"를 사용합니다.
• 비활성화 상태: 첫 페이지에 있을 때 "이전" 버튼이 시각적으로 및 프로그래밍 방식으로 비활성화되었는지 확인합니다(예: aria-disabled="true").
• 키보드 경로: 사용자는 각 페이지 번호와 컨트롤을 Tab으로 이동할 수 있어야 하며, 포커스된 컨트롤이 고정 헤더/푸터에 완전히 가려져서는 안 됩니다(WCAG 2.2, 2.4.11 포커스 가려짐 없음).

5. 반응형 적응 계획

데스크톱에서 모바일로의 전환을 매핑합니다.

• 축소 규칙: 모바일에서는 대부분의 페이지 번호를 숨기고 "이전", "다음" 및 현재 상태(예: "4/20 페이지")만 표시합니다.
• 시각적 규모: 페이지 번호를 유지해야 하는 경우 "윈도우"를 현재 페이지와 바로 인접한 페이지로만 줄입니다(예: 1 ... 4 ... 20).

결정 규칙

• 번호 vs. Load More: 사용자가 특정 결과를 북마크하거나 공유해야 하는 경우(예: "4페이지 확인") 번호를 사용합니다. 목표가 장기간 탐색 및 비교일 때는 "Load More"를 사용합니다.
• "7개 항목" 최대: 데스크톱에서는 레이아웃을 깔끔하게 유지하기 위해 페이징 바에 7-9개 이상의 항목(줄임표 및 버튼 포함)을 표시하지 않습니다.
• 예측 가능성: 항상 "이전"은 왼쪽에, "다음"은 오른쪽에 둡니다. 이러한 버튼을 숨기지 말고, 적용할 수 없을 때는 비활성화합니다.
• 즉각적인 피드백: 페이지 번호를 클릭하면 즉시 사용자를 콘텐츠 목록 상단으로 스크롤하거나 명확한 "로딩" 상태를 제공해야 합니다.

제약 조건

• 접근성: 페이징은 키보드로 탐색 가능하고 스크린 리더에 친화적이어야 합니다. 레이블은 설명적이어야 합니다(예: "5" 대신 "5페이지로 이동"). 대화형 대상은 최소 WCAG 2.2 24x24px(2.5.8)을 충족해야 하며, 기본 이전/다음 컨트롤의 경우 44x44px가 선호됩니다.
• 반응성: 페이징 바는 가로 오버플로우를 유발하거나 다른 UI 요소와 겹쳐서는 안 됩니다.
• 시각적 계층 구조: 페이징은 콘텐츠와 시각적으로 구별되어야 하지만 콘텐츠 자체보다 더 두드러져서는 안 됩니다.

일반적인 실패 패턴

• 작은 탭 대상: 모바일에서 정확하게 탭하기 어려운 작고 밀집된 숫자
• 보이지 않는 활성 상태: "활성" 스타일이 너무 미묘하여 사용자가 현재 페이지를 알 수 없음
• 끊어진 키보드 루프: AJAX를 통해 페이지 콘텐츠가 업데이트될 때 포커스 처리를 잊어버리는 경우(사용자를 결과 상단으로 이동시켜야 함)
• "모바일 폭발": 모바일 화면에 10개의 페이지 번호를 표시하려고 시도하여 가로 스크롤 또는 레이아웃 손상 초래
• 모호한 레이블: aria-labels 없이 숫자만 사용하여 스크린 리더 사용자가 컨텍스트를 이해하기 어렵게 만듦

검증 기준

• 현재 페이지가 시각적으로 구별되고 aria-current="page"가 있어야 합니다.
• 탐색이 설명적인 aria-label과 함께 <nav>로 감싸져야 합니다.
• 탭 대상이 최소 WCAG 2.2 24x24px(기본 이전/다음 컨트롤의 경우 44x44px)를 충족해야 합니다.
• 비활성화된 상태(1페이지의 이전, 마지막 페이지의 다음)가 명확하고 프로그래밍 방식으로 정의되어야 합니다.
• 반응형 동작이 정의되어야 합니다(모바일용 컴팩트 보기).
• 키보드 사용자가 전체 페이징 바를 탐색할 수 있어야 합니다.
• 큰 범위에 대해 줄임표가 올바르게 사용되어야 합니다.