페이지네이션을 직관적으로 고쳐보자

너무도 흔하게 쓰이지만 표준이 없어 항상 헷갈리는 페이지네이션 UI를 리디자인 해보자.

[Updated] 이 방법보다 더 개선된 방식을 새롭게 포스팅하였다. 개선된 방식에 관한 글은 아래 링크를 참고
- https://medium.com/@maxzidell/c4252df8dca7

전통적인 방법의 문제

가장 일반적인 구글의 페이지네이션
킹왕짱 부트트랩의 페이지네이션 예시

완전 뜯어고쳐보자

다들 페이지네이션 디자인은 예쁘게 만들지 언정 사용성에 대해서는 개선의 의지가 없는 것 같으니 쪼랩인 나라도 나서본다. 한 눈에 리스트의 총량이 어느 정도이며 처음과 끝을 한 번에 워프처럼 이동할 수 있고, ‘다음’이 ‘다음페이지’인지 ‘다음 10개 페이지그룹’인지 헷갈리지 않게 이동할 수 있으며 보기에도 깔끔한 그런 개선이 가능할까?

새롭게 디자인한(?) 페이지네이션 예시

1. 첫페이지와 끝페이지

기호로 표시하는 경우 사실상 ‘끝'을 표시하는게 애매하다. 뭔가 그냥 화살표보다 조금 더 쎈 느낌의 더블 화살표(≪,≫)를 써도, 이게 정말 완전 좌우 끊으로 가는지 헷갈릴 수 있고, 화살표와 |문자를 결합해도 헷갈릴 수 있다. 그래서 기호가 아닌 그 위치로써 역할을 의미하도록 했다. 특히 끝페이지가 그냥 우측 가장자리에 마지막 페이지 숫자를 표기함으로써 딱 봐도 전체적으로 목록이 몇개나 있는지 직관적으로 알 수 있는 것은 덤이다.

2. 이전/다음페이지

다음 10개의 페이지 목록으로 이동하는 것인지 그냥 단순히 다음 페이지로 이동하는 것인지 헷갈리는 <, > 등의 기호는 더 이상 쓰지 않았다. 다음 페이지로 이동하려는 경우에는 그냥 현재 페이지의 좌우에 있는 버튼을 누르면 된다. 위의 예시에서 36을 누르고, 37을 누르고 그러면 한 페이지씩 우측으로 이동을하고, 현 상태에서의 마지막 42페이지를 누르게 되면…(아래)

3. 이전/다음 페이지그룹(내맘대로 명명)

42페이지가 열림과 동시에 42~51페이지 그룹이 열릴 것이다!! 유레카!! 이 부분은 ‘다음페이지 기능’과 결합하여 가장 고민을 했던 부분이다. 계속 언급하듯이 <, >등의 버튼이 다음페이지인지 다음페이지그룹을 의미하는지 헷갈리는데, 이것을 없애면서 어떻게 기존의 기능을 다 흡수할 수 있을까 고민을 했다. 왼쪽과 오른쪽의 방향에 따라 말줄임표와 함께 페이지그룹이 시작되는 번호가 부여되어 있다. ... 표시를 보면 무언가 열릴 것이라는 기대를하게 되고, 그게 각 사이드에서 마지막으로 표시되는 페이지 번호와 연결되어 있기 때문에 해당 번호의 페이지가 열리면서 접혀있던 것이 펴질 것이다라고 자연스럽게 생각하게 만든다.

Demo

실제로 이렇게 만들어진 나만의 페이지네이션을 여기저기 적용을 했었다. 근데 페이지네이션을 시연해볼만큼 게시물이 많은 사이트가 없기에 JS Bin에다가 예제를 직접 올렸다. 의식의 흐름대로 코딩했기 때문에 코드는 더럽지만 그래도 잘 작동한다.

Source

아래는 위 jsbin에 쓰인 코드 그대로이다. 동작하는 코드는 위의 링크를 참고하면 더욱 좋다.

약간의 기술을 이용하여, 편리한 서비스와 기능을 만드는데 관심이 많음

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store