React 19와 Three.js로 구현한 하이엔드 UX 파괴 설계

Context

엔터프라이즈 SaaS의 전형적인 Glassmorphism UI와 고도의 최적화된 외형을 갖춘 시스템. 사용자 경험(UX)을 의도적으로 배신하는 역설적 기능 구현이 핵심 목적. 단순한 오류가 아닌 정교하게 설계된 기능적 불능 상태의 단계적 구현 필요.

Technical Solution

• interactionCount 기반의 4단계 Phase 상태 관리 설계를 통해 UI의 점진적 붕괴 과정 구현
• Framer Motion의 Spring Physics를 활용하여 커서 위치에 따라 실시간으로 회피하는 Evasive Button 로직 구축
• Three.js와 React Three Fiber 기반의 WebGL 렌더링으로 커서 좌표를 추적하는 3D 마스코트 구현
• MutationObserver API를 활용하여 DOM 내 모든 텍스트 노드를 실시간으로 감지하고 '418 I'm a teapot' 문구로 강제 치환하는 글로벌 상태 제어
• click velocity 감지 로직을 통해 초당 10회 이상의 클릭 발생 시 화면 회전 및 UI 멜팅 효과를 트리거하는 Panic Mode 설계
• Web Audio API 및 AudioContext를 통한 17종 이상의 효과음 동시 제어 시스템 구축

Key Takeaway

최신 프론트엔드 라이브러리의 고도화된 애니메이션과 상태 관리 도구를 역이용하여 극단적인 사용자 인터랙션을 설계하는 엔지니어링적 유희 구현.