[Intersection Observer] 스크롤 감지의 혁신

Intersection Observer 

Intersection Observer API는 DOM 요소가 다른 요소나 브라우저의 뷰포트와 교차하는지(Intersection)를 비동기적으로 관찰할 수 있는 웹 API입니다. 이 API를 사용하면 스크롤 이벤트를 직접 감지하지 않고도, 어떤 요소가 화면에 들어오거나 나갈 때를 효율적으로 감지할 수 있어 성능과 코드의 가독성 모두에서 이점을 제공합니다.

 

---

1.  Intersection Observer란?

웹 개발에서 특정 요소가 뷰포트(또는 다른 요소)와 교차되는 시점을 감지하고 싶을 때, 기존에는 scroll 이벤트와 getBoundingClientRect() 를 조합해서 구현하곤 했습니다. 하지만 이 방법은 성능에 큰 부담을 주고 복잡했습니다.
이를 해결하기 위해 등장한 것이 Intersection Observer API입니다. 이 API는 요소가 화면에 얼마나 보이는지(또는 다른 요소와 얼마나 교차하는지)를 비동기적으로 관찰할 수 있게 해주는 웹 API입니다.

기본 구조

const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);

• callback : 교차 상태가 변할 때 실행되는 함수
• options : 관찰 기준 (root, threshold 등)
• observe() : 감시할 요소를 등록하는 메서드

주요 특징

• 스크롤 이벤트 없이도 요소의 가시성을 확인 가능합니다.
• 비동기 방식으로 성능 부담이 적습니다.
• lazy loading, 무한 스크롤, 애니메이션 트리거 등에 적합합니다.
• 루트 요소와의 교차 상태(보이는지 여부)만 판단합니다.

대표적인 활용 예

• 이미지 lazy loading
• 무한 스크롤 (스크롤 하단 도달 감지)
• 특정 요소가 화면에 들어올 때 애니메이션 실행
• 광고/배너의 노출 여부 측정

 

---

2.  주요 개념 소개

a.  IntersectionObserver 생성자

const observer = new IntersectionObserver(callback, options);

• callback : 대상 요소의 가시성 변화가 감지될 때 실행되는 함수
• options :관찰 조건을 설정하는 객체

b.  callback 함수의 구조

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // entry 객체를 통해 관찰 대상 요소와 그 상태 확인 가능
  });
};

c.  옵션 설명

const options = {
  root: null, // null일 경우 브라우저 뷰포트를 기준
  rootMargin: '0px', // root 영역에 여백 추가
  threshold: 0.5 // 요소가 50% 이상 보일 때 콜백 실행
};

 

---

3.  간단한 예제 코드

<div class="box" id="target"></div>

const target = document.getElementById('target');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('요소가 화면에 나타났습니다!');
    } else {
      console.log('요소가 화면에서 사라졌습니다.');
    }
  });
}, {
  root: null,
  threshold: 0.1
});

observer.observe(target);

 

---

4.  실전 활용 예시

a.  무한 스크롤 구현

Intersection Observer 를 사용하면 scroll 이벤트 없이도 간편하게 무한 스크롤을 구현할 수 있습니다. 마지막 아이템이 화면에 보일 때 새로운 데이터를 로딩하도록 설정하면 됩니다.

b.  Lazy Loading (지연 로딩) 이미지

화면에 들어오는 시점에 이미지를 로드하여 초기 로딩 속도를 개선할 수 있습니다.

<img data-src="image.jpg" class="lazy">

const lazyImages = document.querySelectorAll('.lazy');

const lazyObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      lazyObserver.unobserve(img);
    }
  });
});

lazyImages.forEach(img => lazyObserver.observe(img));

 

---

5.  기존 방식과의 차이점 비교

항목	Scroll 이벤트 + getBoundingClientRect	Intersection Observer
성능	이벤트가 자주 발생하여 부담 큼	브라우저 최적화로 성능 우수
코드 복잡도	직접 스크롤 위치 계산 필요	간단한 API 사용 가능
유연성	다양한 상황에서 직접 구현 필요	threshold, root 등 옵션 제공

주의할 점

• threshold 값이 작을수록 자주 콜백이 호출되므로 필요에 따라 조절이 필요합니다.
• 브라우저 지원은 대부분의 최신 브라우저에서 가능하지만, IE에서는 지원되지 않기 때문에 폴리필(polyfill)이 필요할 수 있습니다.

 

---

6.  마무리

Intersection Observer 는 스크롤 감지, 지연 로딩, 무한 스크롤 등 다양한 UX 개선에 유용한 API입니다. 기존의 복잡한 방식보다 간편하고 성능도 뛰어나므로, 현대적인 웹 애플리케이션 개발에서는 필수로 익혀야 할 도구입니다.

함께 보면 좋은 자료

외부 사이트 : 

• MDN Web Docs - Intersection Observer API

블로그 글 :

[MutationObserver] DOM 변화를 감지하는 방법

 

---