무한 스크롤이란?

무한스크롤이란 연속적인 스크롤을 제공하는 UI/UX 요소를 말함

이는 웹이나 앱에서 스크롤이 페이지의 끝에 도달했을 때, 자동으로 다음 데이터를 요청하여 받아오는 방식으로 별도의 페이지 이동 없이 데이터를 계속해서 불러옴

한 번에 모든 데이터를 불러오는 것이 아니기 때문에 보다 효율적으로 데이터를 관리할 수 있음

핀터레스트의 무한스크롤

일반적인 페이지네이션

Boolock에서의 무한스크롤

왜 무한스크롤?

Boolock에서는 사용자의 추가적인 액션 없이 스크롤만으로 데이터를 불러오는 무한스크롤을 채택했다.

페이지네이션 기법으로는 커서 기반 페이지네이션을 선택하였으며, 무한스크롤은 Intersection Observer API를 사용한 무한스크롤을 구현하였다.

한 페이지 분량의 데이터는 최대 20개였다

Intersection Observer API를 사용하여 무한스크롤 기능을 구현하기 전 많은 블로그와 작품들을 찾아보았다. 조사결과 대부분의 UI 구조가 다음과 같았다.

viewport에 콘텐츠가 보이고 사용자가 스크롤을 통해 API 호출 영역이 viewport에 노출되면 데이터 페칭 API 요청을 하여 추가적인 데이터가 조회되는 구조였다.

Boolock에도 똑같은 방식을 채택하였다.

처음에는 그리드의 마지막 아이템을 관찰 대상으로 삼을까 했지만

API 호출 영역을 고정적으로 설정해놓는 것이 더 직관적인 것 같아 위 구조를 채택했다.