피드로 돌아가기
Dev.toFrontend
원문 읽기
Infinite Scroll 제거 및 Pagination 복원을 통한 User Agency 회복 설계
In 1965 screens got 1.2 hours a day. Now they get 7. The interface did that.
AI 요약
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 처리 시 입력 필드 예외 처리 로직 필수 적용