페이지네이션(Pagination)은 페이지를 제어하는 컴포넌트입니다. 한정된 공간에서 여러 개의 페이지를 보여줄 때 사용합니다. 조회하는 정보의 맥락이 바뀌는 탭이나 필터와 달리 페이지네이션은 동일한 맥락의 여러 정보를 보여줄 때 사용합니다.
예를 들어 여러 프로모션을 안내하는 이미지 롤링 배너나 ‘3만 원 이하의 빨간 옷’을 검색했을 때 1개 페이지에 12개 상품만 보여줄 수 있어 2페이지, 3페이지로 더 많은 상품을 보여주는 것을 떠올리면 됩니다. 모바일과 데스크탑에 따라 다른 형태의 페이지네이션을 사용합니다.
페이지를 제어할 때 가장 많이 쓰이는 보편적인 컴포넌트입니다. 많은 서비스에서 사용하는 익숙한 형태입니다. 시각 기법을 적게 사용해 인지부하가 적습니다. 단순한 형태라 어떤 환경에서도 쓰기 좋습니다.
웹사이트에서 대량의 페이지를 탐색할 때 많이 쓰이는 컴포넌트입니다. 사용자가 여러 페이지를 넘나들고 특정 페이지를 기억해야하는 상황에 유용합니다. 보여줄 요소가 많고 최소한의 조작을 위한 여백이 필요해서 넓은 공간이 필요합니다.
제어하는 객체 요소의 아래에 위치하거나 제어하는 요소의 위에 위치합니다. 발견하기 쉽지만 과도하게 눈에 띄지 않게 표현합니다. 요소 하단에 배치하면 주로 검정으로 표현하며 이미지 요소 위에 쓸 때는 흰색으로 표현합니다. 같은 색상을 면으로 투명도를 줘 활성화 상태와 비활성화 상태를 구분하는 편입니다. 요소가 많을 때 컨트롤 요소를 식별하기 편하게 배경색을 채우기도 합니다. 제어하는 대상에 따라 유동적으로 배치합니다. 점으로 표현하기 어려울만큼 양이 많을 때는 숫자를 알리는 요소와 함께 사용하기도 합니다.
크기가 큰 스크린에서는 사용자가 슬라이더를 좌우로 움직일 수 있는지 인지 못하는 경우도 있어 좌우 버튼을 배치하기도 합니다.
숫자와 버튼으로 페이지를 제어합니다. 주로 테이블이나 카드 목록 아래에 위치합니다. 별도 공간에 숫자와 함께 텍스트로 표현합니다. 페이지를 1개 혹은 여러 개 단위를 오가기 위한 ‘이전’과 ‘다음’ 버튼은 텍스트 혹은 아이콘으로 표현합니다.
여러 페이지를 탐색하다보면 첫 페이지와 끝 페이지로 이동할 수 있는 지름길이 필요할 때가 있습니다. 그래서 이전/다음의 앞뒤에 배치합니다. 더 나아가 최소한의 요소인 아이콘과 숫자로 직관적이 고 간결하게 표현할 수 있습니다.
사용자가 페이지 인디케이터로 탐색할 때 전후로 더 많은 요소가 있음을 알립니다. 연속되는 요소가 서서히 사라지는 표현으로 정보를 전달합니다. 그라데이션이나 투명도 대신 크기로 표현합니다.
자동으로 다음 페이지로 넘어가는 인터랙션이 추가될 경우 시간이 얼마나 걸리는지 알려주기 위한 재생 바를 추가합니다. 점과 다르게 남은 시간과 현재 시간을 표기하는 바 형태로 표현합니다.
페이지 컨트롤에서 첫 페이지를 볼 때, 중간 페이지를 볼 때, 끝 페이지를 볼 때의 케이스에 맞게 설계해야 합니다. 자리 수가 늘어날 경우를 대비해 최대 자리 수를 정해 너비를 고정하거나 자리 수에 따라 넓이가 넓어지는 반응형으로 설계합니다.
매주 화요일 아침, 16년 차 디자이너가 큐레이션한 디자인 트렌드를 모아보세요.
