Intersection Observer란? - 엘쯔의 웹강의실

소개

현대 웹 개발에서 사용자 경험은 핵심적인 부분이 되었습니다. 웹 페이지가 더 빠르고 유동적으로 동작하도록 하며, 사용자가 편리하고 쾌적한 환경에서 정보를 얻을 수 있도록 하는 것이 중요합니다. 이러한 목표를 달성하기 위해 Intersection Observer는 웹 개발자들에게 제공되는 강력한 API입니다. Intersection Observer는 특히 화면에 보이는 요소를 감시하고 상호작용하는데 사용되는 감지 기능을 제공합니다.

Intersection Observer의 작동 원리

Intersection Observer는 뷰포트와 대상 요소의 교차점을 감시하고, 교차점의 변화를 비동기적으로 감지합니다. 쉽게 말해, 화면에 보이는 요소들과 화면 밖에 있는 요소들 간의 교차 여부를 체크하는 기능을 수행합니다. 이는 스크롤, 화면 크기 조정, 요소의 크기 변화 등 다양한 상황에서 유용하게 사용됩니다.

기본 작동

Intersection Observer의 작동을 위해서는 크게 두 단계가 있습니다.

첫번째 Intersection Observer 생성 : const observer = new IntersectionObserver(callback, options)

options 매개변수는 Intersection Observer를 생성할 때 설정 옵션을 담고 있는 객체입니다. 이 객체를 사용하여 감지 동작을 조정할 수 있습니다. options에는 다양한 속성이 들어갈 수 있지만, 주로 다음과 같은 속성들이 사용됩니다:

root: 감지를 수행하는 뷰포트 엘리먼트를 지정합니다. 기본값은 브라우저의 뷰포트입니다. 다른 요소를 감지 기준으로 사용하고 싶을 때 지정합니다.
rootMargin: 감지 영역의 여백을 지정합니다. 이 값을 양수 또는 음수로 지정하여 감지 영역을 확장하거나 축소할 수 있습니다.
threshold: 감지되는 시점을 조절하는 임계값입니다. 0.0부터 1.0 사이의 값이며, 요소가 감지 영역 안에서 얼마나 보이는지의 비율을 나타냅니다.

예를 들어, threshold: 0.5로 설정하면 요소가 감지 영역에 50% 이상 들어올 때 감지가 실행됩니다. 또한, rootMargin: "10px"로 설정하면 감지 영역을 주변으로 10px 확장시킬 수 있습니다.

두번째는 Intersection Observer에 감지 대상 요소 등록 : observer.observe(targetElement);

observe 메서드는 targetElement를 감지 대상으로 등록하는 역할을 합니다. targetElement는 감지하고자 하는 HTML 요소를 가리킵니다. 등록된 요소가 화면에 보이거나 사라질 때, 설정한 콜백 함수가 실행되며, 이 콜백 함수에서 감지된 요소의 상태를 확인하고 필요한 작업을 수행합니다.

// Intersection Observer 생성
const observer = new IntersectionObserver(entries => {
    // 콜백 함수에서 감지된 요소의 상태 출력
    console.log(entries[0].isIntersecting);
});

// Intersection Observer에 감지 대상 요소 등록
observer.observe(document.querySelector('.box'));

기본 작동 예제 전체 소스

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intersection Observer 예제</title>
    <style>
        body {
            height: 200vh; 
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px;
        }
        .observed {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

    <script>
        const options = {
            threshold: 0.5 // 요소가 화면에 50% 이상 보일 때 감지
        };
        function handleIntersect(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('observed');
                } else {
                    entry.target.classList.remove('observed');
                }
            });
        }
        const observer = new IntersectionObserver(handleIntersect, options);
        const boxes = document.querySelectorAll('.box');
        boxes.forEach(box => {
            observer.observe(box);
        });
    </script>
</body>
</html>

Intersection Observer의 이점

1. 성능 향상

Intersection Observer는 기존에 사용되던 스크롤 이벤트를 대체하여 성능을 향상시킵니다. 스크롤 이벤트는 많은 수의 요소들이 화면에 보일 때 매우 부하를 유발할 수 있으며, 이로 인해 웹 페이지의 반응성이 저하될 수 있습니다. 그러나 Intersection Observer는 이러한 문제를 효과적으로 해결하여 웹 페이지의 성능을 개선합니다.

2. 자동 감지

Intersection Observer를 사용하면 개발자가 직접 화면에 보이는지 여부를 체크하는 코드를 작성할 필요가 없습니다. API가 자동으로 감지하고 적절한 시점에 콜백 함수를 호출해줍니다. 이를 통해 개발자는 더욱 간편하게 화면 요소들과 상호작용할 수 있습니다.

3. 메모리 절약

Intersection Observer는 화면에 보이지 않는 요소들에 대한 감시를 중단할 수 있습니다. 이로 인해 메모리 사용량이 감소하고 성능을 최적화할 수 있습니다.

Intersection Observer의 활용

Intersection Observer는 다양한 상황에서 유용하게 사용됩니다.

1. 무한 스크롤

웹 페이지에서 무한 스크롤 기능을 구현할 때 Intersection Observer를 사용하여 새로운 컨텐츠를 로드하는 방식으로 성능을 향상시킬 수 있습니다.

2. 이미지 로딩

화면에 보이는 이미지들만 미리 로딩하여 초기 페이지 로딩 속도를 개선할 수 있습니다.

3. 광고 표시

사용자가 화면에 스크롤하여 광고 영역에 접근했을 때 광고를 표시하는 등의 상호작용에 활용할 수 있습니다.

결론

Intersection Observer는 웹 개발자들에게 효율적인 성능과 사용자 경험을 제공하는 강력한 API입니다. 화면에 보이는 요소들을 감시하여 필요한 상호작용을 수행하는 등 다양한 기능으로 웹 페이지의 품질을 높이는데 큰 도움을 줍니다. 웹 개발의 효율성과 성능을 개선하고자 하는 개발자들에게 Intersection Observer는 반드시 고려해볼 필요가 있습니다.

자주 하는 질문

Intersection Observer는 무엇인가요?
Intersection Observer는 웹 개발에서 화면에 특정 요소가 보이는지 여부를 감지하는 기술입니다.
Intersection Observer의 작동 원리는 어떻게 되나요?
Intersection Observer는 브라우저의 내부 기능을 이용하여 요소들이 뷰포트와 교차되는지를 비동기적으로 감지합니다. 이를 통해 스크롤, 뷰포트 변경, 요소 위치 변경 등과 관련하여 성능 개선과 효율적인 감지가 가능합니다.
Intersection Observer의 이점은 무엇인가요?
Intersection Observer의 주요 이점은 성능 개선과 리소스 절약입니다. 기존의 스크롤 이벤트나 다른 DOM 이벤트를 사용하면 감지 주기가 짧아지고 성능 저하가 발생할 수 있으나, Intersection Observer는 비동기로 동작하여 성능에 영향을 덜 주며, 뷰포트에 표시되지 않는 요소들의 감지를 효과적으로 관리할 수 있습니다.
Intersection Observer는 어떤 상황에서 활용될 수 있나요?
Intersection Observer는 이미지 지연 로딩, 무한 스크롤, 스크롤 이벤트 대체, 광고 감지 등 다양한 상황에서 활용될 수 있습니다. 특히 웹 페이지나 앱에서 동적으로 로딩되는 요소들을 효과적으로 관리하고, 사용자 경험을 향상시키는 데에 유용합니다.

소개