[고급 자바스크립트] 인터섹션 옵서버
상대적인 엘리먼트의 가시성 변경을 비동기 감지하는 기술
인터섹션 옵서버(Intersection Observer)는 무엇일까요?
이 기술이 가장 많이 사용되는 곳은 바로 지속적인 데이터 전송으로 엘리먼트 가시성이 비동기적으로 변화하는 환경입니다. 대표적으로 인스타그램, 페이스북, 유튜브, 트위터와 같이 사용자의 스크롤이 발생할 때 이를 감지해 적절한 길이의 콘텐츠를 요청하고 이를 파싱 하는 과정이 반복되는 앱에서 사용됩니다. 만약 여러분이 앞선 앱들의 개발자라면 다음의 이슈들을 해결해야 합니다.
각 콘텐츠에 머무는 시간은 얼마이며, 화면이 멈추는 시간은 얼마인가? - UX 및 성능 이슈
뉴스피드 사이사이에 광고가 정상적으로 노출되고 있는가? - 수익성 및 광고 노출 신뢰도 이슈
가시성에 문제가 발생하는 경우는 없는가? - UX 및 개발 이슈
앞서 예시로 든 개발 이슈들은 DOM의 가시성과 직결되는 부분이라 관리 콘솔을 통해 렌더 타이밍을 나누어 확인하거나, 프론트 테스트 시나리오를 만들어 수치적으로 측정해보는 방법을 써볼 수도 있을 겁니다. 하지만 이렇게 측정하고 만들어진 값은 브라우저의 렌더 프로세스 전체를 밟고 이뤄질뿐더러, 임계 시간 이상 가시성의 문제가 생겼을 때 이에 대한 예외처리 등을 로직에 추가하지 못합니다. 그러나 인터섹션 옵서버를 사용하면 브라우저에 랜더링 되는 콘텐츠의 가시성 변화를 감지하고, 이를 비동기 처리할 수 있게 됩니다.
서두 MDN 링크에 있는 예제 코드입니다. 옵서버를 생성하는 간단한 코드입니다. 인터섹션 옵서버는 콜백 함수와 옵션을 파라미터로 받습니다. 당연히 콜백 함수는 우리가 원하는 응답 로직을 담당할 것입니다. 옵션을 보면 root, rootMargin, threshold와 같은 속성이 보입니다.
root는 대상 요소입니다. 기본값은 브라우저의 뷰포트이며 예제에서는 id가 scrollArea인 엘리먼트를 선택하고 있습니다.
rootMargin은 root가 가진 여백입니다. css의 margin 속성이라 생각하시면 됩니다.
threshold는 임계점을 의미합니다. 1.0이라는 값을 넣게 되면 모든 엘리먼트가 보일 때 콜백 함수가 실행합니다. 0.5를 넣으면 50%가 보였을 때 콜백 함수가 실행됩니다. 이 값은 배열로도 넣어줄 수도 있습니다. [0.1, 0.2, ... 0.9, 1.0]처럼 0.1 단위로 증가하는 배열을 넣으면 10%씩 가시성이 변화될 때 이 변화를 감지할 수 있습니다.
콜백 함수의 기준점이 되는 임계점(threshold) 값이 배열로 들어올 수 있다는 말은 콜백 함수도 배열 형태로 받을 수 있습니다.
첫 번째 파라미터에 entries는 배열로 각 임계점에서 발생하는 변화를 감지하고, 이에 대한 로직을 추가할 수 있습니다. 코드 예시를 보면 entires의 각 요소인 entry는 boundingClientRect, intersectionRatio, interesctionRect, isIntersecting 등과 같은 속성을 가지고 있습니다. 이를 바탕으로 개발자는 엘리먼트의 상대적인 가시성 변화에 대응한 코드를 짤 수 있게 됩니다.
웹 개발, 블록체인 컨트렉트 개발 문의:
