피드로 돌아가기
In 1965 screens got 1.2 hours a day. Now they get 7. The interface did that.
Dev.toDev.to
Frontend

Infinite Scroll 제거 및 Pagination 복원을 통한 User Agency 회복 설계

In 1965 screens got 1.2 hours a day. Now they get 7. The interface did that.

Cody Smith2026년 4월 24일4intermediate

Context

플랫폼 기업들이 Session Metric 증대를 위해 Infinite Scroll, Algorithmic Feed, Autoplay 등 Stopping Point를 제거한 인터페이스를 도입함. 이로 인해 사용자의 의식적 결정 단계가 생략되고 신경학적 취약성을 이용한 디지털 과소비가 유발되는 아키텍처적 한계 발생.

Technical Solution

  • Manifest V3 기반 Content Script를 통한 런타임 DOM 조작 및 Pagination UI 강제 주입
  • Window Scroll 및 Site-specific Inner Container(ytd-app, #scrollview 등)를 정밀하게 식별하는 Scroll Container Detection 로직 구현
  • SPA의 Route Change 대응을 위해 history.pushState 및 popstate를 패칭하여 페이지 전환 시마다 UI를 재초기화하는 메커니즘 설계
  • 사이트 CSS 간섭 및 JS 쿼리 차단을 위해 Closed Shadow DOM 내부에 Navigation Bar를 렌더링하는 격리 구조 채택
  • MutationObserver를 활용하여 동적으로 삽입되는 Video Element를 감지하고 autoplay 속성 제거 및 .pause() 메서드를 즉시 호출하는 제어 루프 구축
  • contentEditable 및 특정 role 속성 기반의 DOM Tree 탐색을 통해 입력 필드 내 단축키 트리거를 방지하는 Form-typing Guard 적용

- SPA 환경에서 DOM 상태 유지를 위해 History API 패칭 및 Route Lifecycle 관리 검토 - 외부 라이브러리/스크립트 간 스타일 충돌 방지를 위한 Shadow DOM 도입 고려 - 동적 요소 제어를 위해 MutationObserver를 활용한 효율적인 DOM 감시 전략 수립 - 접근성 및 제어권 보장을 위한 Keyboard Event 처리 시 입력 필드 예외 처리 로직 필수 적용

원문 읽기