모바일 스크롤 페이징 (infinite scrolling pagination) 구현하기

 

모바일은 이제 단순히 전화만 받는 의미를 가지는 사람은 더 이상 없을 거라 생각합니다. 

이전에는 PC화면이 주이고 모바일 화면이 보조의 느낌이었다면 지금은 그 위세가 역전되어 모바일 화면이 더 사용자 유입이 많고 그렇기 때문에 UI 기획을 할 때도 더 신경을 많이 쓰고 디자이너도 조금 더 나은 환경을 위해 GUI를 구현하고 있다는 게 느껴집니다. 

 

모바일은 모든 동작을 손으로 스크롤 하면서 사용하게 됩니다. 그렇기 때문에 PC처럼 클릭을 통한 페이지 이동은 화면의 성격이 달라지는 경우가 아니라면 잘 사용하지 않습니다. 그렇지만 한 번에 너무 많은 데이터를 불러와서 노출하면 사용자는 페이지에 속도 저하 문제가 발생하기 때문에 대부분의 회사들은 이런 문제를 해결하기 위해서 속도에 크게 영향이 없는 일정 양만큼의 데이터만을 불러와서 화면에 노출하게 됩니다. 

노출된 데이터를 사용자가 스크롤하여 화면의 하단으로 스크롤이 이동하였을 때 추가적으로 보여줄 데이터가 있으면 이때 이벤트를 발생키겨 추가 데이터를 보여주게 됩니다. (PC에서는 페이징으로 처리하여 콘텐츠를 분기합니다.)

 

이런 화면을 스크롤 페이징(scroll paging), 또는 무한 스크롤(infinite scroll)이라고 하는데 무엇이 더 정확한 표현이냐 물어보시면 둘 다 맞는 용어 같습니다.

 

예제는 스크롤이 화면의 바닥에 도착했을 때 추각적으로 더 보여 줄 데이터가 있으면 조건을 주어서 데이터를 호출하고 더 이상 보여줄 데이터가 없을 때까지 반복하게 됩니다. 

$(window).scroll(function(){             
    if ( $(window).scrollTop() >= $(document).height() - $(window).height() ){
        alert('끝입니다!.');                  
    }
});

 

위의 방법 이외에도 인터섹션 옵저버(Intersection observer)를 사용하여 구현하면 조금 더 컴퓨터에 부하를 줄이면서 좋은 코드로 작성할 수 있습니다. 

인터섹션 옵저버에 관한 내용은 제가 이전에 적어둔 글을 참고 하시면 좋을거 같습니다. 

 

인터섹션 옵저버에 관한 다양한 예제는 조만간 빨리 만들어서 포스팅 하도록 하겠습니다. 

감사합니다.