Pagination

Pagination (페이지네이션)

페이지네이션은 콘텐츠나 데이터를 여러 페이지로 나누고, 이전 또는 다음 페이지로 이동하는 컨트롤을 제공해요. 대량의 콘텐츠를 별도의 페이지에 정리·분할하고 사용자에게 각 페이지에서 볼 콘텐츠의 양을 제어할 수 있게 해줍니다.

출처: Pagination

본문

개요 (Overview)

페이지네이션은 대량의 콘텐츠를 별도의 페이지에 정리·분할하고, 사용자에게 각 페이지에서 보고 싶은 콘텐츠의 양을 제어할 수 있게 해줘요. 페이지네이션은 데이터 테이블과 함께 또는 페이지에서 사용할 수 있습니다.

UI에서 페이지네이션 컴포넌트 예시

언제 사용할까요 (When to use)

  • 가용 데이터를 한 번에 또는 스크롤 뷰로 로드하는 데 상당한 시간이 걸릴 수 있을 때.
  • 한 페이지나 컴포넌트의 한 뷰 안에 표시하기에 데이터가 너무 많을 때.
  • 많은 양의 데이터를 사용자가 더 소비하기 쉽게 만들 때.
  • 페이지 부동산(real estate)을 최적화할 때.
  • 사용자에게 많은 양의 정보를 보는 방식에 대한 더 많은 제어를 주고 싶을 때.

언제 사용하지 말아야 할까요 (When not to use)

  • 폼 진행처럼 선형 여정을 표시하는 데 사용하지 마세요. 대신 앞뒤로 이동하려면 프로그레스 바(progress bar)나 버튼 컴포넌트를 사용하세요.
  • 페이지네이션을 불필요하게 사용하지 말고, 사용성이나 성능을 개선하는 데 사용하는 것을 목표로 하세요.

변형 (Variants)

변형 (Variant) 용도 (Usage)
Pagination 페이지네이션 변형은 보통 데이터 테이블 컴포넌트 하단에 연결되어 대량의 데이터를 페이지로 나누는 데 도움을 줌.
Pagination nav 페이지네이션 nav 변형은 주로 페이지 내 상황에서 전체 페이지나 페이지 섹션을 페이지로 나누는 데 사용됨.

포맷 (Formatting)

페이지네이션의 구조 (Anatomy of pagination)

페이지네이션 변형의 구조

  • 페이지당 항목 수(Items per page): 페이지당 나타나는 현재 항목 수를 보여줘요.
  • 항목 범위(Range of items): 현재 항목 범위를 보여주고 총 항목 수를 나열합니다.
  • 현재 페이지(Current page): 사용자가 있는 현재 페이지를 보여주고 총 페이지 수를 나열합니다.
  • 이전·다음 버튼(Previous and next buttons): 이전 또는 다음 페이지로 이동하는 버튼.
  • 컨테이너(Container): 전체 페이지네이션 컴포넌트의 컨테이너 바.

페이지네이션 nav의 구조 (Anatomy of pagination nav)

페이지네이션 nav 변형의 구조

  • 선택되지 않은 페이지 버튼(Unselected page button): 사용자가 선택하고 볼 수 있는 페이지.
  • 선택된 페이지 버튼(Selected page button): 사용자가 보고 있는 현재 페이지.
  • 오버플로우 버튼(Overflow button): 탐색할 수 있지만 현재 뷰포트 때문에 컴포넌트에서 앞에 표시할 수 없는 가용 페이지를 포함.
  • 이전·다음 버튼(Previous and next buttons): 이전 또는 다음 페이지로 이동하는 버튼.
  • 컨테이너(Container): 전체 페이지네이션 컴포넌트의 컨테이너.

크기 (Sizing)

페이지네이션 컴포넌트는 두 변형 모두에서 large, medium, small의 세 가지 크기로 제공돼요.

페이지네이션 크기

페이지네이션 nav 크기

데이터 테이블 크기 짝 (Data table size pairings)

연결된 데이터 테이블 컴포넌트 행에 사용하는 것과 같은 높이의 페이지네이션을 사용할 것을 권장해요. 어떤 경우에는 페이지네이션에 extra small과 extra large 크기를 제공하지 않기 때문에 이 두 컴포넌트의 높이 크기가 같지 않을 수 있어요. Extra large 데이터 테이블 행 높이를 사용할 때는 large 페이지네이션을, extra small 데이터 테이블 행 높이를 사용할 때는 small 페이지네이션을 사용하세요.

페이지네이션과 데이터 테이블 컴포넌트의 크기 짝

배치 (Placement)

정보가 페이지로 나누어질 관련 컴포넌트나 페이지 영역 근처에 페이지네이션을 배치하세요.

데이터 테이블과 페이지네이션 배치 (Placing pagination with data table)

데이터 테이블과 함께 페이지네이션 변형을 사용할 때, 페이지네이션은 테이블 아래에 사이 패딩 없이 쌓아 배치해야 해요.

페이지네이션 변형의 배치

페이지네이션 컴포넌트를 데이터 테이블 아래에 쌓으세요.

페이지네이션 컴포넌트를 데이터 테이블 위에 쌓지 마세요.

페이지에 페이지네이션 nav 배치 (Placing pagination nav on a page)

페이지에서 페이지네이션 nav 변형을 사용할 때는 페이지로 나누는 관련 콘텐츠 아래에 float 시키세요. 페이지네이션은 위 콘텐츠에 오른쪽 또는 왼쪽 정렬될 수 있어요. 확신이 없으면 오른쪽 정렬을 선택하세요.

페이지네이션 nav 변형의 배치

콘텐츠 (Content)

주요 요소 (Main elements)

라벨 텍스트 (Label text)

페이지네이션 컴포넌트의 라벨 텍스트는 간결하고 지시적이어야 해요. 페이지당 항목 수와 페이지 또는 항목 수를 설명합니다. 특정 사용 사례에 필요하지 않으면 라벨 텍스트를 수정하지 않는 것을 권장합니다.

select 컴포넌트 옵션 텍스트 (Select component option text)

select 컴포넌트 옵션 텍스트는 숫자로 표시되어 페이지당 항목 수와 현재 페이지를 나타내요. 또는 "Items per page" 선택에 숫자 대신 단어로 표시할 수 있습니다.

넘침 콘텐츠 (Overflow content)

페이지네이션 nav 변형에서, 페이지 사이에 생략 부호(ellipsis) 버튼이 나타나 생략 버튼 메뉴 안에 탐색할 수많은 페이지가 있음을 나타냅니다. 페이지네이션 컴포넌트의 페이지 시리즈의 시작이나 끝에 생략 버튼을 절대 배치하지 않는 것을 권장합니다.

페이지네이션 nav 변형의 넘침 콘텐츠용 생략 버튼 예시

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

Pagination (페이지네이션)

페이지네이션 변형은 보통 데이터 테이블 하단에 붙은 바(bar)로 그 데이터를 페이지로 나눠요.

UI에서 페이지네이션 변형 예시

상태 (States)

페이지네이션 변형에는 select 컴포넌트와 ghost 아이콘 버튼 컴포넌트가 중첩되어 있으며 그 컴포넌트 상태를 상속합니다. 이 상태에 대한 자세한 내용은 select와 ghost icon button 스타일 탭 지침을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

  • select 컴포넌트를 클릭하면 메뉴가 열리고 옵션이 공개됩니다.
  • 메뉴를 닫으려면 다른 옵션을 선택하거나 메뉴 영역 밖을 클릭하세요.
  • 이전 또는 다음 버튼을 클릭하면 이전 또는 다음 페이지로 이동합니다.

키보드 (Keyboard)

  • 포커스에서 Space를 누르면 select 컴포넌트 메뉴가 열리며, Up 또는 Down 화살표로 값도 순환합니다.
  • Space 또는 Enter를 누르면 값을 선택하고 메뉴를 닫습니다.
  • Esc를 눌러 메뉴를 닫을 수 있습니다.
  • 이전·다음 ghost 아이콘 버튼은 Space 또는 Enter로 활성화됩니다.

반응형 동작 (Responsive behavior)

페이지네이션 변형은 small 브레이크포인트를 제외한 모든 브레이크포인트에서 모든 콘텐츠와 중첩 컴포넌트를 유지해요. small 브레이크포인트에서는 select 컴포넌트가 제거되지만, 총 항목 수, 표시 중인 항목, 이전·다음 버튼 정보는 남습니다.

모든 브레이크포인트 대 small 브레이크포인트에서의 페이지네이션 변형 반응형 동작

클릭 가능 영역 (Clickable areas)

페이지네이션 변형 안에는 네 개의 클릭 가능 영역이 있어요. 두 개의 select 컴포넌트로 페이지당 항목 수와 페이지 번호를 바꿀 수 있고, 두 개의 ghost 아이콘 버튼이 이전 또는 다음 페이지로 이동합니다.

페이지네이션 변형 클릭 가능 영역

Pagination nav (페이지네이션 nav)

페이지네이션 nav 변형은 전체 페이지나 페이지의 콘텐츠 섹션을 페이지로 나누는 데 가장 흔히 사용돼요. 관련 콘텐츠 아래 근처에 float됩니다.

UI에서 페이지네이션 nav 변형 예시

상태 (States)

페이지네이션 nav 변형에는 ghost 아이콘 버튼 컴포넌트와 브레드크럼 오버플로우 버튼 컴포넌트가 중첩되어 있으며 그 컴포넌트 상태를 상속합니다. 이 상태에 대한 자세한 내용은 select와 breadcrumb overflow button 스타일 탭 지침을 참고하세요.

인터랙션 (Interactions)

마우스 (Mouse)

  • 버튼 번호를 클릭하면 해당 페이지로 이동합니다.
  • 이전 또는 다음 캐럿 버튼을 클릭하면 현재 보고 있는 페이지의 이전·다음 페이지로 이동합니다.
  • 오버플로우 생략 버튼을 클릭하면 이동할 페이지를 선택하는 select 메뉴가 열립니다. 메뉴에서 페이지 옵션을 클릭하면 해당 페이지로 이동합니다.

키보드 (Keyboard)

  • 아이콘 버튼이 포커스를 받고, Up 또는 Down 화살표를 눌러 버튼 사이를 이동할 수 있어요.
  • 페이지 번호 버튼은 Space 또는 Enter로 활성화됩니다.
  • 이전·다음 버튼은 Space 또는 Enter로 활성화됩니다.

반응형 동작 (Responsive behavior)

작은 화면에서 페이지네이션 nav 변형은 생략 버튼 메뉴 안에 탐색할 더 많은 페이지가 있음을 나타내는 생략 버튼을 제공할 수 있어요.

큰 대 작은 브레이크포인트에서의 페이지네이션 nav 변형 반응형 동작

클릭 가능 영역 (Clickable areas)

페이지네이션 nav 변형의 모든 버튼은 클릭 가능해요. 두 개의 ghost 아이콘 버튼이 이전 또는 다음 페이지로 이동합니다. 나머지 페이지 번호 버튼은 해당 특정 페이지로 이동합니다.

페이지네이션 nav 변형 안의 클릭 가능 영역

수정자 (Modifiers)

페이지 순환 (Page looping)

페이지네이션 nav 변형의 경우, 페이지네이션 컴포넌트의 첫 번째 또는 마지막 페이지에 도달했을 때 이전·다음 캐럿 버튼을 끄는 대신 가용 페이지를 계속 순환하는 옵션을 활성화할 수 있어요.

페이지 명명 (Page naming)

기본적으로 select 컴포넌트 옵션 텍스트는 숫자로 표시되어 페이지당 항목 수와 현재 페이지를 보여줘요. 그러나 요구 사항에 더 잘 맞는다면 "Items per page" 선택에 숫자 대신 단어를 사용하는 대체 옵션을 제공합니다.

숫자 대 단어의 select 컴포넌트 콘텐츠 대안

  • Data table

더 알아보기 (Learn more)

페이지네이션은 대량의 데이터를 여러 페이지로 나눠 사용자가 소화하기 쉽게 만드는 컴포넌트예요. 데이터 테이블 하단에는 Pagination 변형을, 페이지·섹션 전환에는 Pagination nav 변형을 사용하고, 데이터 테이블과 높이 크기를 일치시키세요. 선형 여정에는 사용하지 말고 기억하기 어려운 경우를 권장할 때만 생략 버튼을 활용해야 합니다.