표 또는 긴 목록을 페이지별로 나누기 위해 사용하는 UI를 페이지네이션 또는 페이징 등으로 부르는데 이 페이징을 만들 때 고려해야할 점을 생각해보자.
단순해 보이는 페이징도 필요에 따라 페이징 종류 및 모양은 다양할 수 있다.
1. 맨 앞 페이지로 이동하는 버튼, 맨 뒤 페이지로 이동하는 버튼 2개만 있는 경우 (버튼 기능이 맨 앞, 맨 뒤 페이지로 이동이 아닌 한 페이지씩 이동하도록 만드는 경우도 있음.. 기획에 따라 상이)
1-1. 맨 앞 또는 맨 뒤 페이지일 경우 더이상 이동할 페이지가 없기 때문에 버튼에 비활성 처리를 해주거나
1-2. 삭제하거나 하는 방법 등이 있다.
2. 페이지가 너무 많아지면 페이지 버튼을 맨 앞 페이지, 맨 끝 페이지, 한 페이지씩(또는 5~10 페이지씩) 이동할 수 있는 버튼을 만들어 주는 경우도 있다.
3. 페이지가 많아질 경우 2번과 같이 ... 처리를 하는 이유는 한번에 제일 뒤 페이지를 클릭하여 이동할 수 있게 줄임표를 넣어준 것이다.
여기서 주의해야할 점은 ... 줄임 버튼의 너비도 다른 숫자 페이징 버튼과 동일 해야한다. 그래야 사용자가 페이징 버튼을 이것저것 눌러서 페이지를 탐색할 때 잘못 클릭하는 것을 최대한 방지할 수 있다. 동일한 UI인데 클릭 영역이 왔다갔다 해봤자 좋을게 없다.
그럼 줄임 버튼을 넣었을 때 어떻게 설계하면 좋을까?
아래 이미지와 같이 숫자 버튼 + ... 버튼 까지 홀수로 맞춰주는 것이 좋다. (아래 페이징의 경우 총 13개)
그러면 정 중앙에 있는 7페이지 이전(6 페이지) 까지는 왼쪽에 ... 말줄임 처리 버튼이 나오지 않고, 아래 그림처럼 7페이지 부터는 왼쪽에도 말줄임 처리 버튼이 들어간다.
마찬가지로 뒤 페이지 쪽은 아래와 같이 28 페이지까지는 양쪽에 ... 말줄임 처리 버튼이 있지만,
29페이지 부터는 오른쪽 말줄임 처리 버튼을 제거해주는 식으로 설계하면 문제가 없다.
결론적으로 말줄임 처리 버튼을 활용하려면 버튼 개수를 홀수로 맞추면 된다.
일단 크게 보면 이런 모양들로 만들 수 있겠고, 디테일하게 고려해야할 점이 무엇이 있나 보겠다.
1. 페이징을 클릭할 수 있는 클릭 영역이 충분히 큰지 고려하여 작업한다. (버튼 클릭하기 쉽게 사용성을 생각하자)
2. 페이징과 페이징 사이의 간격 규칙을 정한다.
3. 현재 페이지를 확인할 수 있는 선택된 페이징 버튼 스타일을 정한다.
4. 페이징에 마우스를 올렸을 때 버튼의 hover 스타일을 넣을 것인지 정한다.
5. 맨 끝 페이지에 도달했을 때, 버튼의 비활성 스타일 또는 버튼 삭제 처리를 할 것인지 정한다.
6. 페이징이 10의 단위 또는 100위 단위 까지 들어갔을 때를 고려한다.
6번 내용은 아래 이미지처럼 페이징이 100 단위가 됐을 때도 클릭할 수 있는 버튼 영역이 그대로 유지되도록 작업해줘야 좋다. 위에서 말했듯이 사용자가 페이징 버튼을 이것저것 눌러서 페이지를 탐색할 때 잘못 클릭하는 것을 최대한 방지할 수 있다. (항상 사용자가 편리하게 사용할 수 있는지 사용성을 생각하자)
단점은 1단위, 10단위, 100단위의 각 버튼 안에 숫자들의 여백이 각각 달라지기 때문에 버튼 크기를 적당하게 잡아주는 것이 좋다. (적당히라는 말이 제일 어렵다는 것을 알지만..)
마크업 관련
좌우에 달린 화살표 버튼들은 button 태그로 만들어주면 disabled 속성을 넣어 비활성 상태를 만들 수 있다. 비활성이 되면 버튼 클릭이 안되고, 비활성 스타일을 별도로 지정할 수 있다.
간혹 숫자가 들어가는 페이징 버튼에 a 태그를 쓰는 경우도 있으나 그럴 경우 페이징 버튼이 선택됐을 때 개발에서 a 태그를 span 이나 div 등의 태그로 바꿔서 클릭이 안되도록 처리하거나 선택이 된 버튼에 pointer-events:none(IE 11 미만 작동 X) 속성을 넣어서 클릭이 안되게 하는 등의 방법이 있다.