What is IntersectionObserver?

• 브라우저에서 특정 요소가 뷰포트나 지정된 컨테이너(root)에 나타나거나 사라지는 순간을 관찰하는 API임
• DOM 엘리먼트가 뷰포트에 얼마나 노출되었는지를 모니터링
• 이를 기반으로 지연 로딩(Lazy Loading)이나 무한 스크롤(Infinite Scroll) 같은 기능을 쉽게 구현할 수 있게 해줌

구현 방식

1. 관찰 대상(Target) 등록

IntersectionObserver를 생성한 뒤, observe(엘리먼트)를 통해 감지하고 싶은 요소를 지정

2. 콜백(Callback) 호출

뷰포트(root)에 요소가 들어오거나 나갈 때, 콜백 함수가 실행되며 교차 정보(Intersection Observer Entry)를 전달

3. 옵션(Options) 설정

• root: 관찰 기준이 될 스크롤 영역(null이면 브라우저 뷰포트 전체가 기준)
• rootMargin: root 바깥쪽에 추가 여백을 줄 수 있는 옵션임(예: 0px 0px 100px 0px)
• threshold : 요소가 어느 정도 보여야 콜백을 호출할지 결정하는 값임(예: 0.0, 0.5, 1.0 등)
• (experimental) trackVisibility, delay: Intersection Observer v2에서 지원하는 옵션으로, 콜백 호출 빈도를 더 세밀히 조절할 수 있음

최적화를 위한 주요 포인트

• root, rootMargin, threshold 값 조정
• 콜백이 필요 이상으로 자주 실행되지 않도록, 관찰 범위(margin)와 임계값(threshold)을 적절히 설정하는 게 중요
• 동시에 너무 많은 요소를 관찰하면 성능에 부담이 될 수 있음. 실제로 필요한 요소에만 observe를 적용하는 게 좋음
• trackVisibility와 delay는 일부 최신 브라우저에서만 작동하므로, 호환성을 사전에 확인해야 함

정리

• IntersectionObserver는 단일 스크롤 이벤트 감지 대신, 뷰포트 진입/이탈을 브라우저가 관찰해주는 고성능 API임
• 적절한 옵션과 대상으로 최적화하면 이미지 지연 로딩, 무한 스크롤, 애니메이션 트리거 등 다양한 기능을 효율적으로 구현할 수 있음

참고

• MDN
• Trust is good, observation is better: Intersection Observer v2