Web Guide페이지네이션무한스크롤목록 탐색
페이지네이션과 무한스크롤의 선택 기준
끝없이 내려가는 목록이 편할 것 같지만, 찾는 사람에게는 불편합니다.
둘러보는 콘텐츠인지 찾는 콘텐츠인지에 따라 선택이 달라집니다.
01둘러보기와 찾기
무한스크롤은 특별한 목적 없이 둘러보는 콘텐츠에 맞습니다. 소셜 미디어 피드나 이미지 갤러리가 그렇습니다.
반면 특정 항목을 찾거나 비교해야 하는 경우에는 페이지 단위가 낫습니다. 어디까지 봤는지 알 수 있고 다시 찾아갈 수 있기 때문입니다.
무한스크롤
둘러보기에 적합 · 끊김 없는 경험 · 어디까지 봤는지 모름 · 특정 항목 다시 찾기 어려움 · 푸터에 도달 불가 · 뒤로가기 시 위치 유실
페이지네이션
찾기에 적합 · 위치 파악 가능 · 특정 페이지로 바로 이동 · 공유와 북마크 가능 · 푸터 접근 가능 · 클릭이 필요
02무한스크롤의 숨은 문제
가장 흔한 문제는 푸터에 도달할 수 없다는 것입니다. 연락처나 법적 정보를 보려는 방문자가 계속 내려가기만 하게 됩니다.
또 항목을 눌러 상세를 보고 뒤로 가면 목록의 맨 위로 돌아가는 경우가 많습니다. 다시 그 자리까지 내려가야 합니다.
1
푸터 접근 불가
계속 로드되어 하단에 도달하지 못합니다.
2
뒤로가기 위치 유실
상세를 보고 돌아오면 처음부터. 가장 큰 불만입니다.
3
위치 감각 없음
얼마나 남았는지, 어디쯤인지 알 수 없습니다.
4
공유·북마크 어려움
특정 지점을 다시 찾아갈 수 없습니다.
5
성능 부담
계속 쌓이면 브라우저가 느려집니다.
03'더 보기' 버튼이라는 절충안
자동으로 계속 로드하는 대신, 버튼을 눌러야 다음 항목이 나오는 방식입니다. 무한스크롤의 장점을 살리면서 문제를 줄입니다.
방문자가 로드를 통제할 수 있고, 버튼 아래에 푸터가 있어 접근도 가능합니다.
장점
푸터 접근 가능, 로드를 방문자가 통제, 성능 부담 완화
적합한 경우
목록이 길지만 끝이 있는 콘텐츠. 대부분의 기업 사이트 목록.
구현 시
남은 건수를 함께 보여주면 좋습니다. '더 보기 (23건 남음)'.
주소 반영
가능하면 로드 상태를 주소에 담아 뒤로가기에 대응합니다.
04페이지네이션 설계 요령
페이지 번호를 나열할 때도 요령이 있습니다. 페이지가 100개면 번호를 다 보여줄 수 없습니다.
현재 위치 주변과 처음·끝만 보여주는 방식이 일반적입니다.
번호 범위현재 페이지 앞뒤 2~3개와 처음·끝. 나머지는 생략 표시.
현재 위치 강조지금 몇 페이지인지 확실히 보이게 합니다.
이전·다음번호와 함께 제공합니다. 모바일에서 특히 유용합니다.
전체 건수 표시'총 234건, 12페이지 중 3페이지'.
터치 영역모바일에서 번호가 너무 작지 않게 합니다.
CHECK POINT
□ 둘러보는 콘텐츠인지 찾는 콘텐츠인지 판단했는가
□ 무한스크롤을 쓴다면 푸터 접근 방법이 있는가
□ 상세를 보고 돌아왔을 때 위치가 유지되는가
□ '더 보기' 버튼 방식을 검토했는가
□ 페이지네이션에 전체 건수가 표시되는가
□ 현재 페이지가 명확히 강조되는가
□ 모바일에서 터치하기 충분히 큰가
#페이지네이션#무한스크롤#목록 탐색#더 보기#푸터 접근#뒤로가기#사용성#홈페이지 디자인#웹비스타#홈페이지 제작