Intersection Observer로 성능 최적화된 스크롤 애니메이션 구현하기

글쓴이 /

Intersection Observer API는 스크롤 이벤트를 효율적으로 처리해 성능 저하 없이 부드러운 애니메이션을 구현할 수 있는 강력한 도구입니다. 기존 scroll 이벤트의 단점을 보완하며, 특정 요소가 화면에 등장할 때만 애니메이션을 실행하도록 최적화할 수 있어 웹 페이지 체류 시간 향상에 효과적입니다.

Intersection Observer란 무엇인가?

웹 개발에서 스크롤 이벤트는 자주 사용되지만, 많은 요소를 동시에 감지할 경우 성능 저하 문제가 발생합니다.
Intersection Observer는 이러한 문제를 해결하기 위해 등장했으며, 브라우저가 DOM 요소의 가시성 변화를 관찰하고 콜백을 실행하도록 도와줍니다.

주요 특징

  • 스크롤 이벤트보다 성능 최적화에 유리
  • 뷰포트 진입·이탈을 쉽게 감지
  • 지연 로딩, 스크롤 애니메이션, 인피니트 스크롤 등에 활용 가능

기본 예제 – 간단한 감지 코드

다음은 특정 요소가 화면에 등장했을 때 메시지를 출력하는 가장 기본적인 예제입니다.

<div class="box">관찰 대상 박스</div>

<script>
  const target = document.querySelector('.box');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log('박스가 화면에 나타났습니다!');
      }
    });
  });

  observer.observe(target);
</script>
HTML

코드 설명

  • new IntersectionObserver(callback) : 감시자 객체 생성
  • observer.observe(target) : 대상 요소 등록
  • entry.isIntersecting : 요소가 뷰포트 안에 있는지 여부 확인

실전 예제 – 스크롤 시 페이드인 애니메이션

스크롤 위치에 따라 특정 요소가 부드럽게 나타나도록 구현해봅시다.

HTML

<section class="fade-section">
  <div class="fade-item">첫 번째 아이템</div>
  <div class="fade-item">두 번째 아이템</div>
  <div class="fade-item">세 번째 아이템</div>
</section>
HTML

CSS

.fade-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.fade-item.show {
  opacity: 1;
  transform: translateY(0);
}
CSS

JavaScript

const fadeItems = document.querySelectorAll('.fade-item');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
      // 한 번만 실행하고 싶다면 아래 코드 추가
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.2 // 요소의 20%가 보이면 실행
});

fadeItems.forEach(item => observer.observe(item));
JavaScript

성능 최적화를 위한 팁

  1. threshold 조절
    • 0.1 : 요소가 살짝 보일 때 즉시 실행
    • 1.0 : 요소가 완전히 보여야 실행
    • 불필요한 애니메이션 남발을 막기 위해 0.2~0.4 권장
  2. unobserve 사용
    • observer.unobserve(entry.target)
    • 한 번만 실행되는 애니메이션은 성능 낭비 방지
  3. CSS Transition 또는 GSAP 혼합 사용
    • 간단한 효과 → CSS Transition
    • 복잡한 효과 → GSAP 등 JS 라이브러리
  4. 다양한 활용 사례
    • 이미지 지연 로딩(Lazy Loading)
    • 스크롤 인디케이터
    • 무한 스크롤(Infinite Scroll)

마무리

Intersection Observer는 스크롤 이벤트를 대체하면서 성능과 유지보수성을 모두 개선할 수 있는 강력한 API입니다.
특히 이미지 지연 로딩, 스크롤 애니메이션, 무한 스크롤 구현 시 유용하므로, 프로젝트에서 적극적으로 활용해 보시기 바랍니다.

Summary in English

Learn how to create smooth, performance-optimized scroll animations using the Intersection Observer API. Improve your website speed and user experience by triggering animations only when elements appear in the viewport.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Arif Riyanto

위로 스크롤