01 · Concept

Intersection Observer

Intersection Observer는 요소가 뷰포트 또는 특정 부모 요소와 교차하는 것을 비동기적으로 감지하는 Web API입니다.

기존 scroll 이벤트와 getBoundingClientRect()를 사용하는 방식은 매 프레임마다 레이아웃을 재계산하여 성능 문제를 일으킵니다. Intersection Observer는 브라우저가 내부적으로 최적화하여 비동기적으로 교차 상태를 알려주므로, lazy loading, 무한 스크롤, 광고 노출 추적 등에 널리 사용됩니다.

02 · Interactive Demo

Intersection Observer 시각화

스크롤하며 요소의 뷰포트 진입/이탈을 실시간으로 확인하세요. threshold를 조절해보세요.

Threshold
Box 1 숨김
Box 2 숨김
Box 3 숨김
Box 4 숨김
Box 5 숨김
Box 6 숨김
Box 7 숨김
Box 8 숨김
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// Intersection Observer 기본 사용법
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('요소가 뷰포트에 진입:', entry.target);
        console.log('교차 비율:', entry.intersectionRatio);
      }
    });
  },
  {
    root: null,         // 뷰포트 기준
    rootMargin: '0px',  // 감지 영역 확장/축소
    threshold: 0.5      // 50% 이상 보일 때 트리거
  }
);

// 관찰 시작
const target = document.querySelector('.target');
observer.observe(target);

// 관찰 중단
observer.unobserve(target);

// 모든 관찰 중단
observer.disconnect();
04 · Interview Point

면접 핵심 질문

Intersection Observer는 대상 요소와 상위 요소 또는 뷰포트 간의 교차 영역 변화를 비동기적으로 관찰하는 Web API입니다. root(감지 기준), rootMargin(감지 영역 확장), threshold(트리거 비율)를 옵션으로 설정할 수 있습니다. 콜백은 메인 스레드와 별도로 비동기 실행되어 성능에 영향을 주지 않습니다.
1. 성능 — scroll 이벤트는 매 프레임마다 발생하여 getBoundingClientRect() 호출 시 리플로우를 유발하지만, IO는 브라우저가 최적화하여 비동기로 처리합니다.
2. throttle/debounce 불필요 — 자체적으로 최적화된 타이밍으로 콜백을 호출합니다.
3. 선언적 API — observe/unobserve로 간단하게 관리할 수 있습니다.
4. 정확한 교차 비율 — threshold 옵션으로 정확한 가시성 비율을 감지합니다.
1. 이미지에 data-src에 실제 URL을 저장하고 src는 placeholder로 설정합니다.
2. IO로 요소를 관찰하다가 뷰포트에 진입하면 data-src를 src로 복사합니다.
3. 로딩 완료 후 unobserve()로 감시를 해제합니다.
4. rootMargin: '200px'으로 미리 로딩하면 UX가 개선됩니다.

대안으로 네이티브 loading="lazy" 속성도 사용 가능하지만, 커스텀 로딩 UI나 애니메이션이 필요할 때는 IO가 더 적합합니다.