IntersectionObserver: 교차 비율은 실제 열람의 증거가 아니다

IntersectionObserver는 요소가 viewport나 지정한 root와 교차하는 상태를 비동기로 알려 준다. 이미지 지연 로딩이나 목록의 다음 구간 요청에 유용하지만, 사용자가 내용을 읽었다는 증거는 아니다. 알림을 해석하려면 비교 기준, 면적 비율, 전달 시점을 함께 봐야 한다.

root가 정하는 비교 기준

MDN은 root를 관찰 대상과의 교차를 판단할 기준 요소로 설명한다. root를 null로 두면 viewport를 기준으로 삼는다. 페이지 전체 스크롤과 내부 목록 스크롤은 기준이 다를 수 있으므로, 목록의 끝을 관찰할 때 어느 영역에 들어왔다는 뜻인지 먼저 정해야 한다.

rootMargin은 교차 계산에 쓰는 root 경계를 늘리거나 줄인다. 양수 여백으로 미리 요청을 시작하도록 설계할 수 있지만 실제 요소에 CSS 여백을 추가하지는 않는다. 확대된 관찰 경계에 들어온 것은 화면 안에 이미 표시됐다는 뜻과도 다르다. 로딩을 시작할 조건과 노출을 기록할 조건을 같은 설정으로 취급하지 않는 편이 명확하다.

예를 들어 내부 목록 아래에 감시용 요소를 놓았다면 페이지 전체가 아니라 그 목록을 root로 정할지 결정한다. 이미지 로딩용 여백을 크게 두었다면 실제 화면에 들어오기 전 요청이 시작될 수 있다. 이는 잘못된 감지가 아니라 미리 정한 계산 영역의 결과다. 이 설정으로 열람 수까지 세려 한다면 로딩과 측정의 목적이 섞이는지 다시 확인한다.

threshold는 대상 면적의 비율이다

W3C는 대상의 경계 상자 면적이 0이 아닐 때 intersectionRatio를 교차 영역 면적과 대상 면적의 비율로 정의한다. 따라서 threshold가 0.5라면 root의 절반을 차지한다는 뜻이 아니라 대상의 교차 비율을 기준으로 삼는다. 대상이 매우 크면 일부가 화면을 채워도 비율은 낮을 수 있다.

threshold는 비율이 지정한 경계를 넘나들 때 알림을 받는 기준이다. 매 스크롤 픽셀마다 호출해 주는 장치는 아니다. MDN은 처음 관찰할 때도 callback이 호출될 수 있다고 설명하므로, 첫 알림을 무조건 새 진입으로 세면 측정 의미가 어긋난다. 현재 상태와 이전 처리 여부를 기준으로 동작을 정해야 한다.

isIntersecting과 비율을 따로 해석하기

W3C의 isIntersecting은 root와 대상의 교차 여부를 나타내며, 면적이 0인 경계 접촉을 구분하는 데도 쓰인다. 일반적인 대상의 교차 비율이 0이라고 해서 이 플래그가 언제나 false인 것은 아니다. 요소가 경계에 닿는 예제를 만들어 두 값의 차이를 확인할 수 있다.

또한 관찰 결과는 해당 계산 시점의 상태다. 알림이 전달되기 전이나 callback을 처리하는 동안 화면 상태가 달라질 수 있다. 알림 객체의 기록 시각과 처리를 시작한 시각을 구분하면 지연된 이벤트를 현재의 연속적인 움직임처럼 해석하는 실수를 줄일 수 있다. 정밀한 픽셀 충돌이나 순간별 애니메이션 제어를 이 값만으로 수행한다고 가정해서는 안 된다.

전문 관점: callback의 일을 짧게 유지하기

MDN 전문 안내는 교차 감시를 브라우저에 맡길 수 있다고 설명하면서도 callback은 main thread에서 실행된다고 명시한다. 모든 처리 작업까지 별도 스레드로 옮겨 주는 기능이 아니다. callback 안에서 많은 DOM 변경이나 긴 계산을 실행하면 관찰 방식을 바꿨더라도 응답성을 떨어뜨릴 수 있다.

지연 로딩에서는 조건을 만족한 대상의 요청을 시작하고, 같은 대상을 다시 처리할 필요가 없으면 관찰을 끝내는 방식이 실무적으로 유용하다. 연속 목록은 요청 진행 상태와 추가 콘텐츠가 남았는지도 확인해야 한다. 교차 알림은 요청을 시작할 신호이며 요청 성공, 중복 방지, 종료 조건은 애플리케이션이 관리한다.

노출과 열람을 분리하는 검증

viewport 기준과 내부 root 기준, 확대된 rootMargin, 큰 대상의 낮은 교차 비율을 각각 확인하면 설정의 의미를 이해하기 쉽다. 초기 알림과 재진입도 별도로 시험한다. 실제 지원 브라우저의 동작을 확인하고 한 번 처리한 대상이 예상대로 관찰에서 빠지는지 본다.

기본 교차 계산을 다른 요소의 가림, 사용자의 주의, 읽기 완료까지 증명하는 것으로 설명해서는 안 된다. MDN은 정밀하게 어느 픽셀이 겹치는지 알려 주는 API도 아니라고 구분한다. 필요한 제품 조건을 교차 상태로 표현할 수 있는지 먼저 판단하고, 그 범위를 넘는 지표에는 별도의 정의와 검증을 두어야 한다.

출처

• W3C Intersection Observer: 면적 비율과 교차 상태.
• MDN Intersection Observer API: 설정과 callback 처리.