무한스크롤 (infinite scrolling)

웹 개발과정에서 이미지나 데이터를 가져와서 화면에 나열하는 작업이 필요한 경우가 많은데요. 화면의 크기가 한정되어 있어 유저에게 보여줄 수 있는 정보는 한정되어 있기 때문에 웹페이지 상에 처음 표시할 때 불필요한 정보까지 모두 서버에 요청하여 가져오는 것보다 필요한 부분만 그때 그때 요청하고 표시하는 것이 더욱 효율적입니다. 무한 스크롤은 서버에 요청하는 데이터의 양을 분할하여 필요한 부분만 화면에 표시 해 주기 때문에 상기에 언급된 기능 구현을 쉽게 구현 할 수 있는데요. 어떻게 하면 쉽게 구현이 가능한지 알려 드리겠습니다.

 

목차

• 사용할 이벤트들
• 작동원리
• 구현하기
• 장점, 단점

사용할 이벤트들

명칭	설명	분류 | 단위
window.scrollY	윈도우 좌측 상단으로 부터의 거리	윈도우 객체 | pixel
window.innerHeight	육안으로 보이는 화면 (screen)의 길이	윈도우 객체 | pixel
document.body.offsetHeight	내용물의 실제 길이 (body element 안에 포함된 전체 내용물의 길이)	돔요소 | pixel
onscroll	마우스 스크롤을 감지하는 스크롤 이벤트	이벤트 | 해당없음

 

작동원리

작동원리는 스크롤 이벤트를 인식하는 코드를 생성하고 그 안에 해당조건이 충족되었을 때 데이터를 요청하는 코드를 작동시키면 되는데요. 먼저 유저가 화면의 어느 지점까지 왔는 지를 알아위해 window.scrollY를 사용합니다. 다음으로 데이터가 들어갈 컨테이너의 길이를 알면 유저의 위치와 비교하여 데이터를 요청하는 코드를 발동시키는것이 가능한데, 이를 알기 위해 document.body.offsetHeight를 사용합니다. 하지만 아래 사진과 같이 window.scrollY의 값이 document.body.offsetHeight의 값보다 항상 작은데요.

이 이유는 window.scrollY는 최초 위치에서 스크롤된 거리를 윈도우 좌측 상단을 기준 산정하기 때문입니다. 해서, 데이터를 불러올 시점 만큼 더 해 주어야 발동 시점을 맞출 수가 있는데, 만약 화면의 거의 바닥에서 발동을 원하는 경우 화면의 길이를 반환 해 주는 window.innerHeight 값을 window.scrollY 값에 더 해 주면됩니다. 

구현하기

구현된 코드는 아래와 같습니다.

window.addEventListener('scroll', () => { 
  const innerHeight = window.innerHeight; 
  const scrollY = window.scrollY; 
  const bodyHeight = document.body.offsetHeight; 
  if (innerHeight + scrollY > bodyHeight) { 
    fetchPhotos() // desired function
  } 
})

 

장점, 단점

무한스크롤의 장점으로는 데이터 분할 요청과 발동조건의 자동화에 따른 반응속도 향상과 안정성 향성 (버튼 클릭 등 변수가 줄어드므로), 시각적 효과 등이 있습니다. 반면, 이로 인해, 원하는 페이지나 상품을 다시 찿는 것이 힘들어지고, 스크롤에 의존함으로써 키보드만 사용하는 유저들의 경우 접근성이 떨어진다는 단점도 있습니다. 요즘은 이러한 단점을 보완하기 위해 pagination과 결합한 형태의 어플리케이션도 등장하고 있는 추세입니다.

장점	단점
안정성	통제력 감소
향상된 반응속도	접근성 감소
시각적 효과

무한스크롤은 웹 어플리케이션의 성능향상 뿐 아니라 아이템이 끊임없이 나타날 것 같은 시각적 효과 등 디자인 관점에서도 흥미를 유발 할 수 있는 장점과 모바일 기기 사용의 증가로 많은 어플리케이션에서 pagination 대신 많이 사용 되고 있는데요. use case에 따라 적절히 사용하면 좋은 자산이 되겠죠? 

 

---

참고자료

https://www.nngroup.com/articles/infinite-scrolling-tips/#:~:text=Infinite%20scrolling%20is%20a%20listing,content%20up%20into%20multiple%20pages.

Infinite Scrolling: When to Use It, When to Avoid It