웹에서 특정 영역 노출수 및 체류 시간 측정

개발이 완료된 웹 컴포넌트들의 사용성 측정을 위해 노출수 및 체류 시간을 측정해야 할 일이 있어서 간단히 구현했다. AI 가 어느 정도 작성해준 코드를 가지고 필요한대로 요리조리 수정해서 나의 코드로 만들었는데 꽤나 잘 동작하는 듯 보인다. 대단한 코드는 없고 IntersectionObserver, MutationObserver 활용했는데 관련하여 찾아본 내용을 올려둔다.

먼저 두 개의 Observer 는 Web API 를 활용하는데 웬만한 최근 버전 브라우저는 이를 지원하기 때문에 사용하는데 지장은 없었다. 5년 전의 legacy code 를 보면 이 API 를 사용하기 위해 polyfill 코드를 불러와서 Observer 를 동작하게 하는게 있던데, 이전엔 브라우저들에서 이를 지원하지 않는 경우가 좀 있지 않았나 추측해본다.

각각의 특징을 살펴보면,

1. IntersectionObserver
   1. 스크롤하다가 어떤 요소가 화면에 등장하거나 사라질 때를 감지
   2. lazy loading, 무한 스크롤, 광고 노출 집계 등에 활용
   3. 장점
      1. 스크롤 이벤트 직접 처리보다 성능 좋음
      2. throttle/debounce 필요 없음
      3. 비동기 방식으로 메인 스레드 부담 적음
   4. 단점
      1. iframe 외부에서 내부 관찰은 불가
      2. 오래된 브라우저(IE) 지원하지 않으면 Polyfill 필요
2. MutationObserver
   1. DOM 요소의 구조 변화(추가/삭제/속성 변경/텍스트 변경 등)를 비동기적으로 감지
   2. DOM 요소 추가/삭제, 속성(class, data-* 등) 변경, 텍스트 변경 등
      1. SPA(React/Vue)에서 DOM 감지 외부 스크립트 삽입 감지
      2. 광고, 외부 위젯 로드 감지 요소가 언제 삽입되었는지
      3. 보안/무단 DOM 변경 감지 XSS 탐지 등
   3. 변화 이벤트가 많으면 부하 클 수 있음, iframe 내부 동일 origin 이면 탐지 가능

그 외에는 아래와 같은 Observer 들도 있다고 한다.

• ResizeObserver - 요소의 크기 변화 추적
• PerformanceObserver - 웹 성능 관련 이벤트 추적
• ReportingObserver - 브라우저 레포트 (deprecations 등)

프로젝트에서 intersection observer 는 스크롤되는 영역의 조회가 어떻게 일어나는지를 추적하고, mutation observer 는 팝업 내 사용자 입력에 따라 변화하는 영역의 데이터를 추적하려고 한다. 처음엔 아주 간단히 노출수와 체류 시간, 이렇게 두 가지만을 트래킹하여 1회 노출당 평균 체류 시간이 높은 데이터 등을 찾아보는 것이 목적이다. 개발 전 수립한 가설에 맞게 결과가 나오기를 바라며.