Pagination
pagination은 인쇄 또는 디지털 콘텐츠를 개별 페이지로 분리하는 프로세스다.
인쇄 문서 및 일부 온라인 콘텐츠의 경우 Pagination은 페이지의 순차적 순서를 식별하기 위해 연속 번호를 추가하는 자동화된 프로세스를 나타낸다. 검색 엔진 결과 페이지(SERP), 블로그 및 토론 포럼과 같은 일부 유형의 웹 사이트 콘텐츠는 별도의 페이지로 분할되어 보다 사용자 친화적으로 만드는 이점이 있다.
온라인 기사는 콘텐츠를 나누기 위해 페이지가 매겨지는 경우가 있다. 독자를 돕기 위해 긴 기사를 여러 페이지로 구성하는 데는 정당성이 있다. 그러나 비져적 짧은 기사라도 페이지가 매겨져 페이지가 단일 단락으로 구성되고 방문자가 전체 텍스트를 읽으려면 10페이지 이상을 클릭해야 할 수도 있다.
목적은 페이지 조회수를 늘리고 결과적으로 광고 노출 수(웹사이트 방문자가 특정 광고를 본 횟수)를 늘리는 것이다. 그러나 대부분의 독자는 여러 페이지로 된 기사를 완료하지 않기 때문에 하나의 긴 페이지가 아닌 여러 개의 짧은 페이지를 표시하면 실제로 광고 노출이 줄어들 수 있다.
Infinite scroll
Infinite scroll은 한 번에 모든 컨텐츠를 렌더링 하지 않고 페이지 내용을 아래로 스크롤하면 새로운 컨텐츠를 덧붙여서 렌더링 하는 방식이다. 로딩해야할 컨텐츠의 양이 많다면 퍼포먼스 측면에서 infinite scroll을 고려해 볼 수 있다. 페이스북 혹은 트위터와 같은 사이트를 보면 이와 같은 UI를 적극적으로 사용하고 있다.
[구현 방법]
Infinite Scroll을 구현하는 방법에는 크게 두 가지가 있다.
- onScroll event
- Intersection Observer API
[onScroll event]
onScroll event를 이용한 방법은 가장 먼저 생각해 볼 수 있는 방법이다. 사용자가 scroll을 할 때 이벤트가 발생하고 현재 scroll 위치가 페이지에 끝에 닿았는지 판단한다. 페이지 끝에 도달했다면 새로운 컨텐츠를 로딩하기 위한 요청을 하고 컨텐츠를 덧붙이는 방식이다. 하지만 scroll 이벤트는 굉장히 빈번하게 발생하기 때문에 성능 최적화를 위해서 throttle과 같은 처리가 필요하다.
[intersection Observer API]
Intersection Observer는 MDN에서 아래와 같이 설명한다.
" 교차 영역 관찰자 API는 조상 엘리먼트 또는 최상위 도큐먼트 뷰포트와 대상 엘리먼트의 교차 영역에서 발생한 변경사항을 비동기적으로 감시하는 방법을 제공한다. "
위 정의만 읽어보면 말이 어려울 수 있는데 단순하게 DOM 엘리먼트 간에 영역이 겹쳐지는걸 감시한다고 볼 수 있다.
Intersection Observer API를 사용하면 scroll, resize와 같은 비싼 비용의 이벤트를 좀 더 쉽고 좋은 퍼포먼스로 사용할 수 있다. Lazy-load, infinite scroll과 같은 것들을 구현할 때 유용하게 사용할 수 있다. scroll 이벤트에 비해 단점이라면, 아직 모든 브라우저에서 지원하지 않는다는 것이다.
