사진은 아직 화면 밖인데 페이지는 계속 물었다. 브라우저가 종을 달았다

요약

• 2017년 9월 14일 W3C 최초 공개 작업 초안은 대상 요소가 컨테이너나 화면 영역과 정해진 교차 기준을 넘을 때 비동기 알림을 받는 방법을 제시했다.
• 긴 페이지는 스크롤마다 배치를 다시 조회하지 않고 사진과 내용을 늦게 준비할 수 있다. 신호를 받고 실제로 어떤 작업을 할지는 앱이 정한다.

빵집 직원이 오븐 문을 열한 번째 열어 본다. 빵은 아직이다. 제빵사가 말한다. “다 되면 종을 칠게요.” 종은 굽는 시간을 줄이지 않는다. 하지만 직원은 열두 번째 확인을 하느라 손님을 기다리게 만들지 않는다. 긴 웹페이지에도 비슷한 종이 필요했다. 화면 아래 멀리 있는 사진이 가까워졌는지 알아보려고 스크롤할 때마다 위치를 다시 계산하도록 요구할 수 있었기 때문이다.

2017년 9월 14일 W3C 최초 공개 작업 초안은 그런 반복 조회의 비용을 설명했다. 요소 위치를 직접 읽으면 스타일과 배치를 다시 계산할 수 있고, 스크롤 처리기에서 계속 확인하면 화면 움직임이 끊길 수 있다. 초안은 콘텐츠를 나중에 불러오기, 매우 긴 목록의 일부만 그리기, 요소가 보이는 영역과 겹치는지 파악하기 등을 사례로 들었다. 특정한 속도 향상률을 보장한 문서는 아니다. 질문을 한 번 맡기고 관련 상태가 바뀌면 듣는 구조를 설명한 문서다.

관찰할 요소가 대상이다. 비교 기준인 루트는 지정한 컨테이너일 수도 있고, 별도로 지정하지 않으면 최상위 화면 영역이 된다. IntersectionObserver는 알림 함수와 옵션을 받는다. 앱은 observe(target)으로 대상을 지켜보기 시작하고, unobserve(target)으로 한 대상의 관찰을 끝내며, disconnect()로 관찰 전체를 끝낸다. 대상과 루트의 기하학적 관계가 설정한 기준을 넘으면 기록이 함수로 전달된다. 빵집 직원은 오븐 문 대신 종을 듣는다.

종을 울릴 지점은 조절할 수 있다. rootMargin은 계산에 쓰는 루트 사각형을 넓히거나 줄인다. 사진이 실제 화면에 들어오기 조금 전에 파일을 준비하려면 경계를 바깥쪽으로 옮길 수 있다. threshold는 교차 비율의 어느 지점에서 알릴지 정한다. 기록에는 대상과 시간, 요소의 사각형, 겹친 부분의 사각형, intersectionRatio가 들어간다. 사진 기사는 다음 이미지를 일찍 받아 두고, 목록은 더 가까워질 때 항목을 그릴 수 있다. 브라우저는 치수를 알려 주고 편집 순서는 사이트가 고른다.

알림 자체가 사진을 다운로드하지는 않는다. 앱의 함수가 파일을 요청하거나, 카드를 표시하거나, 목록 요소를 만들거나, 단지 상태를 적을 수 있다. 초안은 한 번만 하면 되는 늦은 로딩에 unobserve()가 유용하다고 설명했다. 사진이 이미 필요해져서 처리가 끝났다면 계속 따라다닐 이유가 없다. 다 구운 빵에 대해 오븐이 매분 새로 울릴 필요도 없다.

비동기 전달은 의도한 선택이었다. 2017년 초안은 이런 활용에 아주 엄격한 응답 지연이 필요하지 않다고 보았다. 기준을 넘었다는 소식을 조금 늦게 받더라도, 스크롤할 때마다 동기적으로 레이아웃을 읽는 일은 줄일 수 있다. 초안은 필터와 합성 단계를 거친 뒤 실제 표시된 모든 픽셀을 정확히 아는 것도 설계 목표에서 제외했다. API가 보고하는 것은 정해진 규칙에 따른 사각형의 겹침이다. 사람이 사진을 봤는지, 마음에 들었는지는 알지 못한다.

현재 공개된 W3C 작업 초안에도 대상과 루트, 임계값, 비동기 기록이라는 구조가 남아 있다. W3C의 공식 발행 이력은 2017년 9월 최초 공개 초안부터 2023년 10월까지 여러 작업 초안을 열거한다. 이 날짜는 문서의 이력이지 브라우저 보급 통계가 아니다. 2023년 문서도 그 이력에서는 Working Draft로 표시된다.

관찰 대상이 많을수록 공통 알림 방식이 빛난다. 상품 목록은 한 관찰기로 여러 카드를 지켜보다 가까운 것부터 준비할 수 있다. 사진 기사는 다음 컷이 나오기 전에 파일을 받아 둘 수 있다. 한 번 처리한 항목은 관찰에서 뺄 수 있다. 이전에는 팀마다 스크롤 이벤트와 위치 측정, 반복 시간을 따로 짜야 했다. 표준은 공통 신호를 제공하지만, 네트워크 자원을 언제 쓰고 무엇을 보여 줄지까지 결정하지 않는다.

교차 기록을 독자의 관심으로 부풀릴 유혹도 있다. intersectionRatio는 사양의 계산법에 따른 사각형 겹침의 비율이다. 독자는 사진을 유심히 봤을 수도 있고 곧바로 지나쳤을 수도 있다. 빵집 종은 빵이 나왔다는 사실을 알리지, 손님이 맛있게 먹었다는 평가를 쓰지 않는다. 측정하는 대상을 좁게 말할수록 그 신호를 더 정확하게 쓸 수 있다.

Intersection Observer는 모든 사이트에 같은 늦은 로딩 방식을 명령하지 않았다. 멀리 있는 사진에 대해 같은 질문을 반복하지 않아도 되는 방법을 줬다. 페이지가 기준을 정하고, 브라우저가 선을 넘었을 때 알리고, 앱이 그제야 할 일을 고른다. 직원은 눈앞의 손님에게 다시 집중할 수 있다.