페이지네이션(Pagination)은 페이지를 제어하는 컴포넌트입니다. 한정된 공간에서 여러 개의 페이지를 보여줄 때 사용합니다. 조회하는 정보의 맥락이 바뀌는 탭이나 필터와 달리 페이지네이션은 동일한 맥락의 여러 정보를 보여줄 때 사용합니다.
예를 들어 여러 프로모션을 안내하는 이미지 롤링 배너나 ‘3만 원 이하의 빨간 옷’을 검색했을 때 1개 페이지에 12개 상품만 보여줄 수 있어 2페이지, 3페이지로 더 많은 상품을 보여주는 것을 떠올리면 됩니다. 모바일과 데스크탑에 따라 다른 형태의 페이지네이션을 사용합니다.
쓰임
- 이미지 갤러리
- 상품, 콘텐츠 목록
종류
- 페이지 인디케이터(Page Indicator): 점을 이용해 표현하는 컴포넌트. 주로 모바일 환경에서 활용
- 페이지 컨트롤(Page Control): 숫자로 페이지를 제어하는 컴포넌트. 주로 데스크탑 환경에서 활용.
그래픽
페이지 인디케이터
페이지를 제어할 때 가장 많이 쓰이는 보편적인 컴포넌트입니다. 많은 서비스에서 사용하는 익숙한 형태입니다. 시각 기법을 적게 사용해 인지부하가 적습니다. 단순한 형태라 어떤 환경에서도 쓰기 좋습니다.
- 활성화된 점: 현재 몇 번째 페이지에 있는지 알립니다. 가장 진한 색으로 표현하며 주색 혹은 검정/하양으로 가장 높은 강도로 표시합니다.
- 비활성화된 점: 몇 개의 페이지가 있는지 알립니다. 활성화된 점보다 낮은 강도로 표현합니다.
- 고정 높이: 식별할 수 있는 최소한의 크기로 고정합니다.
- 고정 넓이: 전체 넓이와 요소 넓이를 고정합니다.
- 페이지가 늘면 점의 개수가 늘어납니다.
- 8개 이상일 경우 인디케이터로 탐색할 때 앞뒤에 더 많은 페이지가 있음을 크기로 표현합니다.
- 많은 양의 페이지가 있고 총 개수를 알려야할 때 숫자 컴포넌트로 알립니다.
페이지 컨트롤
웹사이트에서 대량의 페이지를 탐색할 때 많이 쓰이는 컴포넌트입니다. 사용자가 여러 페이지를 넘나들고 특정 페이지를 기억해야하는 상황에 유용합니다. 보여줄 요소가 많고 최소한의 조작을 위한 여백이 필요해서 넓은 공간이 필요합니다.
- 활성화된 페이지: 구성 요소 중 가장 눈에 띄는 시각 기법을 씁니다. 주색을 사용하거나 배경색을 사용합니다.
- 비활성화된 페이지: 일반 텍스트와 같은 스타일로 표현합니다.
- 이전/다음 페이지 이동 버튼: 좌/우 아이콘 혹은 이전/다음 단어로 표시합니다.
- 숫자 줄임표: 더 많은 페이지가 있음을 줄임표로 알립니다.
- 고정 높이: 클릭하거나 터치할 수 있는 최소한의 크기로 고정합니다.
- 전체 넓이: 전체 넓이는 화면의 넓이에 따라 넓어집니다.
- 요소 넓이: 요소 넓이는 고정이며 전체 넓이가 넓어지면 요소 간격은 고정된 상태로 요소 개수가 추가됩니다.
- 좌/우 아이콘 버튼: 최소한의 인지 부하로 사용할 수 있습니다. 단어를 읽을 필요 없이 직관적으로 이해할 수 있습니다.
- 이전/다음 단어 버튼: 숫자와 빠르게 구분할 수 있습니다. 최소 크기가 커져서 누르기 좋습니다.
- 상호작용 가능한 요소임을 알리기 위해 테두리 선이나 배경색을 추가하기도 합니다.
컴포지션
페이지 인디케이터
제어하는 객체 요소의 아래에 위치하거나 제어하는 요소의 위에 위치합니다. 발견하기 쉽지만 과도하게 눈에 띄지 않게 표현합니다. 요소 하단에 배치하면 주로 검정으로 표현하며 이미지 요소 위에 쓸 때는 흰색으로 표현합니다. 같은 색상을 면으로 투명도를 줘 활성화 상태와 비활성화 상태를 구분하는 편입니다. 요소가 많을 때 컨트롤 요소를 식별하기 편하게 배경색을 채우기도 합니다. 제어하는 대상에 따라 유동적으로 배치합니다. 점으로 표현하기 어려울만큼 양이 많을 때는 숫자를 알리는 요소와 함께 사용하기도 합니다.
크기가 큰 스크린에서는 사용자가 슬라이더를 좌우로 움직일 수 있는지 인지 못하는 경우도 있어 좌우 버튼을 배치하기도 합니다.
페이지 컨트롤
숫자와 버튼으로 페이지를 제어합니다. 주로 테이블이나 카드 목록 아래에 위치합니다. 별도 공간에 숫자와 함께 텍스트로 표현합니다. 페이지를 1개 혹은 여러 개 단위를 오가기 위한 ‘이전’과 ‘다음’ 버튼은 텍스트 혹은 아이콘으로 표현합니다.
여러 페이지를 탐색하다보면 첫 페이지와 끝 페이지로 이동할 수 있는 지름길이 필요할 때가 있습니다. 그래서 이전/다음의 앞뒤에 배치합니다. 더 나아가 최소한의 요소인 아이콘과 숫자로 직관적이 고 간결하게 표현할 수 있습니다.
인터랙션
페이지 인디케이터
사용자가 페이지 인디케이터로 탐색할 때 전후로 더 많은 요소가 있음을 알립니다. 연속되는 요소가 서서히 사라지는 표현으로 정보를 전달합니다. 그라데이션이나 투명도 대신 크기로 표현합니다.
자동으로 다음 페이지로 넘어가는 인터랙션이 추가될 경우 시간이 얼마나 걸리는지 알려주기 위한 재생 바를 추가합니다. 점과 다르게 남은 시간과 현재 시간을 표기하는 바 형태로 표현합니다.
페이지 컨트롤
페이지 컨트롤에서 첫 페이지를 볼 때, 중간 페이지를 볼 때, 끝 페이지를 볼 때의 케이스에 맞게 설계해야 합니다. 자리 수가 늘어날 경우를 대비해 최대 자리 수를 정해 너비를 고정하거나 자리 수에 따라 넓이가 넓어지는 반응형으로 설계합니다.
자료
- https://developer.apple.com/design/human-interface-guidelines/page-controls
- https://ant.design/components/pagination/
- https://designsystem.line.me/LDSG/components/indicators/page-indicator-en
- https://www.delldesignsystem.com/components/pagination/
- https://carbondesignsystem.com/components/pagination/usage/
- https://atlassian.design/components/pagination/examples
