페이지네이션을 직관적으로 고쳐보자
[Updated] 이 방법보다 더 개선된 방식을 새롭게 포스팅하였다. 개선된 방식에 관한 글은 아래 링크를 참고
- https://medium.com/@maxzidell/c4252df8dca7이 포스팅에서 제안하고 싶은 것은 바로 웹사이트의 페이지네이션에 관한 방법이다. 페이지네이션은 인터넷의 초창기부터 꾸준히 있어왔지만 아직까지 그 표준이라 할 만한 방식이 없는 것 같다. 그래서 맨날 모든 곳의 모든 페이지네이션이 쓸 때마다 헷갈린다.. 나는 매우 화가 나 있다.
전통적인 방법의 문제
위는 가장 기본적인 페이지네이션이다. 현재 1페이지에 머물러 있고, 전후 몇 개의 페이지로 바로 이동할 수도 있으며 이전`과 `다음`버튼이 있다. 어떤건 부트스트랩 예시처럼 `맨처음` 과 `맨끝` 버튼이 있을 때도 있다.
과연 저기에서 ‘다음'을 누르면 몇 페이지로 이동 될까?
제일 짜증나는 포인트다. 저기에서 다음을 누르면 이후의 11페이지부터 20페이지의 리스트로 이동되는 것인지(이것을 페이지그룹이라고 하자), 아니면 현재가 1페이지니까 2페이지로 이동되는 것인지 애매하다. 이게 정말 이렇다할 관습도 없는게 정말로 어떠한 시각적 힌트도 없이 중구난방이다. 구글 페이지네이션에서의 답은 '2페이지로의 이동’이다. 그냥 내 경험상 영어권에서는 다음이 주로 현재 페이지의 다음이고, 동양권에서는 다음 페이지그룹으로 이동이 관습인 것 같기는 한데 정말로 케바케로 그냥 개발자 마음이다.
한 가지 더 불편한 것은 만약에 저 ‘다음'이 2페이지로 간다면, 내가 저 상태에서 15페이지로 가려면 다음페이지그룹으로 이동하기 위하여 10페이지를 누르고 ‘다음’을 누른 다음에 15페이지 숫자를 눌러야 할 것이다.
여기에서는 ‘다음'에 대해서만 논의했는데 거꾸로 ‘이전' 버튼을 눌렀을 때도 내가 어디로 갈 지 전혀 예측할 수가 없다.
완전 뜯어고쳐보자
다들 페이지네이션 디자인은 예쁘게 만들지 언정 사용성에 대해서는 개선의 의지가 없는 것 같으니 쪼랩인 나라도 나서본다. 한 눈에 리스트의 총량이 어느 정도이며 처음과 끝을 한 번에 워프처럼 이동할 수 있고, ‘다음’이 ‘다음페이지’인지 ‘다음 10개 페이지그룹’인지 헷갈리지 않게 이동할 수 있으며 보기에도 깔끔한 그런 개선이 가능할까?
아래는 여러가지 테스트를 하면서 만들어본 페이지네이션 결과물이다. 그냥 뭐 심플해진 것 이외에는 별로 달라진 것 없는 것 같지만 나름 엄청나게 고뇌한(?) 결과물이다.
1. 첫페이지와 끝페이지
기호로 표시하는 경우 사실상 ‘끝'을 표시하는게 애매하다. 뭔가 그냥 화살표보다 조금 더 쎈 느낌의 더블 화살표(≪,≫)를 써도, 이게 정말 완전 좌우 끊으로 가는지 헷갈릴 수 있고, 화살표와 |문자를 결합해도 헷갈릴 수 있다. 그래서 기호가 아닌 그 위치로써 역할을 의미하도록 했다. 특히 끝페이지가 그냥 우측 가장자리에 마지막 페이지 숫자를 표기함으로써 딱 봐도 전체적으로 목록이 몇개나 있는지 직관적으로 알 수 있는 것은 덤이다.
2. 이전/다음페이지
다음 10개의 페이지 목록으로 이동하는 것인지 그냥 단순히 다음 페이지로 이동하는 것인지 헷갈리는 <, > 등의 기호는 더 이상 쓰지 않았다. 다음 페이지로 이동하려는 경우에는 그냥 현재 페이지의 좌우에 있는 버튼을 누르면 된다. 위의 예시에서 36을 누르고, 37을 누르고 그러면 한 페이지씩 우측으로 이동을하고, 현 상태에서의 마지막 42페이지를 누르게 되면…(아래)
3. 이전/다음 페이지그룹(내맘대로 명명)
42페이지가 열림과 동시에 42~51페이지 그룹이 열릴 것이다!! 유레카!! 이 부분은 ‘다음페이지 기능’과 결합하여 가장 고민을 했던 부분이다. 계속 언급하듯이 <, >등의 버튼이 다음페이지인지 다음페이지그룹을 의미하는지 헷갈리는데, 이것을 없애면서 어떻게 기존의 기능을 다 흡수할 수 있을까 고민을 했다. 왼쪽과 오른쪽의 방향에 따라 말줄임표와 함께 페이지그룹이 시작되는 번호가 부여되어 있다. ... 표시를 보면 무언가 열릴 것이라는 기대를하게 되고, 그게 각 사이드에서 마지막으로 표시되는 페이지 번호와 연결되어 있기 때문에 해당 번호의 페이지가 열리면서 접혀있던 것이 펴질 것이다라고 자연스럽게 생각하게 만든다.
Demo
실제로 이렇게 만들어진 나만의 페이지네이션을 여기저기 적용을 했었다. 근데 페이지네이션을 시연해볼만큼 게시물이 많은 사이트가 없기에 JS Bin에다가 예제를 직접 올렸다. 의식의 흐름대로 코딩했기 때문에 코드는 더럽지만 그래도 잘 작동한다.
Source
아래는 위 jsbin에 쓰인 코드 그대로이다. 동작하는 코드는 위의 링크를 참고하면 더욱 좋다.
