Vanilla JS만으로 구현한 사용자 상호작용 원천 차단 타이머

Context

사용자의 집중력을 강제하기 위한 역설적 설계의 타이머 구현. 모든 종류의 PC 입력 이벤트를 세션 실패 조건으로 정의한 시스템.

Technical Solution

• mousemove, keydown, wheel, touchmove 이벤트를 통합 감시하여 입력 즉시 세션을 초기화하는 이벤트 리스너 구조
• visibilitychange API를 활용한 탭 전환 감지 및 세션 강제 종료 로직
• 시작 버튼 클릭 시 발생하는 즉각적인 리셋을 방지하기 위한 500ms의 Grace Period 적용
• cursor: none 속성과 커스텀 DOM 요소를 결합하여 사용자의 움직임을 추적하는 가상 커서 UI 구현
• body::after 가상 요소와 반복 그라디언트를 활용한 스캔라인 오버레이 기반의 시각적 효과 설계
• CSS Keyframe 애니메이션과 상태 기반 색상 변경을 통한 실시간 피드백 시스템

Impact

• 전체 코드 규모 약 350라인의 경량 설계
• 빌드 및 배포 과정 없는 HTML/CSS/JavaScript 단일 파일 구조
• 약 1시간의 개발 시간으로 구현 완료

Key Takeaway

프레임워크 없이 브라우저 기본 API와 이벤트 루프만으로도 정밀한 사용자 행위 제어 및 상태 관리 시스템 구축 가능.