MediaPipe와 React로 구현한 실시간 시선 추적 코드 파괴 엔진

Context

원격 근무 환경의 과도한 생산성 감시 소프트웨어 문제를 풍자. 사용자의 시선과 눈깜빡임을 실시간 감지하여 코드에 무작위 변형을 가하는 구조.

Technical Solution

• Google MediaPipe Face Landmarker를 활용한 브라우저 기반 실시간 눈깜빡임 감지 시스템 구축
• 사용자 시선 이탈 시 변수명을 이모지로 변경하고 세미콜론을 특수문자로 치환하는 코드 변이 엔진 설계
• Stability Meter 로직을 도입하여 누적 눈깜빡임 횟수에 따라 파일 저장 권한을 제한하는 제어 구조
• Framer Motion 기반의 글리치 효과와 CRT 스타일 UI를 적용한 시각적 피드백 구현
• PrismJS를 통한 구문 강조 적용으로 코드 파괴 전 단계의 시각적 완성도 확보
• Google Cloud Run 기반의 컨테이너 배포 환경을 구축하여 자동 스케일링 인프라 적용

Impact

• 200ms 이상의 눈깜빡임 발생 시 즉각적인 코드 변이 실행

Key Takeaway

클라이언트 사이드 머신러닝 모델을 활용하여 사용자 인터랙션과 애플리케이션 상태를 실시간으로 결합하는 이벤트 기반 제어 설계.