React + SVG 기반 실시간 반응형 얼굴 시스템을 통해 번아웃 상태를 시각화하는 인터랙티브 게임 개발함

Context

현대 직장 문화의 번아웃을 시스템적으로 탐구하는 선택 기반 시뮬레이션 게임을 제작함. 정해진 승리 상태가 없는 대신 모든 선택이 медлен한 붕괴로 이어지는 구조임.

Technical Solution

• React + Vite: 컴포넌트 기반 구조로 상태 관리와 빠른 인터랙션 갱신을 구현함
• SVG + Layered Rendering: Sleeping, Sanity, Energy, Ego, Money 상태에 따라 실시간 변형되는 Pseudo-3D 디지털 마스크 얼굴 시스템을 구축함
• Framer Motion: cinematic transition, glitch effect, 미세한 긴장감 연출을 위한 모션 애니메이션 적용함
• Tailwind CSS: chromatic aberration, flickering overlay, 시스템 로그 스타일의 고대비 브루탈리스트 UI 구현함
• State-driven Face Engine: 수치 변화에 따라 눈 처짐, 비대칭 왜곡, 빨간 깜빡임, 고개 기울기 등 얼굴 요소들이 반응하도록 설계함

Impact

시각적 피드백 시스템으로 사용자 결정의 즉각적인 감정적 영향을 전달하는 몰입형 경험을 제공함.

Key Takeaway

추상적인 심리 상태를 구체적인 시각적 요소로 변환하는 Reactive UI 패턴은 사용자와 시스템 간 직관적인 소통을 가능하게 함.

Additional Note

5가지 차별화된 커리어 경로(Corporate, Startup, Freelance, Academic, Gig Economy)에 따라 고유한 시각적·심리적 정체성을 부여하여 다양한 노동 환경의 번아웃 경험을 재현함.