자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 자주 들을 수 있습니다. 그럼 무한스크롤이란 무엇이고 자바스크립트 라이브러리인 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 자세하게 알아보겠습니다. 일단 무한스크롤이란 무엇일가요?



! 자바스크립트의 무한스크롤(Infinite Scroll)이란? 용어알기무한 스크롤이란 화면 인터렉션(Interaction)의 하나로 사용자 행동에 의해 만약 웹페이지 화면에서 스크롤을 브라우저의 끝으로 내리게되면 새로운 콘텐츠가 계속해서 생겨나는 이벤트의 반복을 의미합니다. 즉 이를 구현하면 방문자는 스크롤을 내리면 새로운 콘텐츠를 페이지 전환없이 계속해서 볼 수 있게 됩니다.

이런 화면 인터렉션은 사용자가 새로운 콘텐츠를 더 볼 수 있도록 편리한 UI 인터페이스를 제공합니다. 만약 이 방식이 아니라면 사용자는 페이지를 전환할 수 있는 아이콘 등을 클릭하여 다른 콘텐츠... 즉 2페이지, 3페이지 등을 이동하면서 봐야 할 것입니다. 이 방식도 나쁜 방식은 아니나 요새는 Ajax를 활용한 무한 스크롤 방식이 굉장히 많이 사용되고 있습니다.(Vingle, Facebook 등이 이런 방식이죠)

참고로 페이지 전환이 없다는 것은 이탈율(Bounce Rate)을 높이는 원인이 되기도 합니다. 더 쉽고 간단한 UI 제공으로 방문자의 체류시간을 늘릴 수 있겠지만 이탈율이 줄어들 수 있으므로 이를 고려할 필요가 있다하겠습니다. 사실 이탈율, 체류시간 모두 방문자 유입에 대한 공통의 목적을 가지고 있으므로 전체적인 방문자 트래픽에는 큰 영향이 없을 것입니다.

그렇다면 무한 스크롤을 구현하기 위해 무엇을 해야할까요? 기본적으로 다음과 같은 프로세스가 필요합니다.


:+: 무한 스크롤에 필요한 프로세스
  • 1. 스크롤이 페이지 최하단에 위치했는지를 확인
  • 2. 1번에서 최하단이라면 예정된 이벤트(추가 콘텐츠)를 실시
  • 3. 이벤트를 통해 추가되는 콘텐츠가 비동기식(ajax)으로 하단에 추가됨
  • 4. 결론적으로 스크롤이 계속 늘어남

이 무한 스크롤을 구현하기 위해서는 필요한 몇가지 함수를 알아야만하는데요... 여기에 사용되는 함수들은 다음과 같습니다.

$(document).scroll() // 스크롤이 변경될때마다 이벤트를 발생시킴
$(document).height() // 현재페이지(문서)의 높이
$(window).height() // 윈도우의 크기
$(window).scrollTop() // 브라우저의 스크롤 위치값


위의 함수가 이 무한 스크롤의 핵심적인 부분이라 할 수 있습니다. 현재 페이지의 전체높이가 화면의 스크롤의 위치값과 윈도우의 크기를 합산한 값이 클 경우 해당 함수를 실행하게 됩니다.

현재페이지(문서)의 높이 <= 윈도우의 크기 + 브라우저의 스크롤 위치값
위에서 비동기식 방식에 대하여 언급을 하였습니다. 비동기식(ajax)은 페이지의 전환이 없이도 새로운 데이터를 서버에서 불러와 추가할 수 있는 방법입니다. 무한스크롤은 비동기 방식이 반드시 필요하므로 이에 대하여 알아야합니다. 그럼 아래 예제를 통해 더 자세히 알아보시기 바랍니다.



# 무한 스크롤 예제소스 보기

그럼 아래에서는 실제로 이를 구현하여보겠습니다. 먼저 html 코드입니다.
<div class="aritcleView">
       <div>1</div>
       <div>2</div>
       <div>3</div> 
</div>

이번에는 자바스크립트 코드입니다.
$(document).ready(function () {
  $(document).scroll(function() {
    var maxHeight = $(document).height();
    var currentScroll = $(window).scrollTop() + $(window).height();

    if (maxHeight <= currentScroll + 100) {
      $.ajax({
        // Append next contents
        ...
      })
    }
  })
});

위 예제는 webisfree.com의 메인페이지 코드중 일부입니다. 설명하자면... 클래스 articleView에는 몇개의 글(article)이 포함되어 있습니다. 이 글이 스크롤을 내려 최하단에 위치할 경우 scroll 이벤트가 발생하게되며 이 이벤트는 ajax() 비동기함수를 실행하게 됩니다. ajax()가 성공할 경우 해당하는 콘텐츠 영역에 불러온 새로운 글을 추가하게됩니다.

위 예제에서 ajax()를 실행하는 if문을 보시면 maxHeight <= currentScroll + 100이라는 코드가 있습니다. 여기서 100은 현재 스크롤 위치값에 약간의 보정치를 추가한 부분입니다. 이를 사용하여 사용자가 반드시 최하단이 아니라 하단보다 조금 위에 위치했더라도 미리 새로운 콘텐츠가 추가될 수 있습니다. 또 다른 이유로 비동기 방식의 호출은 웹콘텐츠를 로딩하는대 지연시간이 발생하므로 최하단값과 스크롤 위치를 동일하게 할 경우 방문자는 조금 늦게 콘텐츠가 보일 수 있으므로 이를 추가로 보정하기 위한 값으로 100을 설정했습니다.

100이라는 숫자는 정확한 값이 아니므로 원하는 값을 설정하여 적당한 위치에 도달했을 때 새로운 콘텐츠가 추가될 수 있을 것입니다.



# 마치면서무한스크롤을 구현할 경우 비동기 방식을 사용하므로 전체페이지를 로딩하지 않아도 되는 장점이 있습니다. 다만 생각할 부분도 몇 가지 있는데 이를 간단히 알아봅니다.

! 스크롤로 콘텐츠가 늘어난 후 페이지 리로드할 경우만약 콘텐츠가 하단에 추가된 후 페이지를 다른 곳으로 이동하거나 리로드 된 경우를 생각해 볼 수 있습니다. 이 경우 기존에 하단에 추가된 콘텐츠가 사라지게되므로 방문자는 다시 스크롤을 내려야만하는 불편함을 줄 수 있죠..

어찌보면 큰 차이는 아닐 것입니다. 스크롤을  통해 추가로 콘텐츠를 본다해도 한없이 내려서 볼 사람이 그리 많지는 않기 때문입니다. 하지만! 이런 작은 불편들이 쌓이면 방문자에게 안좋은 경험을 선사할 수 있으므로 가급적 이런 요소는 줄이거나 개선이 필요할 것입니다.

@ 해결방안은?
이런 경우 페이지에 새롭게 로딩된 콘텐츠 개수를 기억해두면 해결될 수 있습니다. 방문자가 다시 로딩하거나 페이지 이동 후 다시 돌아와도 얼만큼 페이지를 로딩했는지 알고 있으므로 다시 하단에 콘텐츠를 추가하면 될 것입니다.

추가된 콘텐츠 개수는 localStorage, sessionStorage 또는 쿠키 등을 사용하여 저장할 수 있습니다. 여기까지 무한스크롤을 알아보았습니다.