Creative & Web프로토타입
SmileLab Game
MediaPipe 안면인식 인터랙티브 리듬 게임
#MediaPipe#Computer Vision#WebRTC#React#Web Audio API
프로젝트 소개 및 도슨트
“인공지능 비전 기술과 리듬 게이미피케이션을 결합하여 사용자의 미소와 표정을 실시간 음악적 리듬으로 승화시킨 인터랙티브 웹 아트워크입니다. 브라우저에서 478개 안면 랜드마크를 초경량으로 추적하며 기쁨과 긍정의 에너지를 직관적으로 전합니다.”
해결 과제 및 기획 배경
단순한 터치 게임을 넘어, 비전 AI 기술을 활용하여 사용자의 실제 표정과 미소를 감지함으로써 긍정적인 정서적 인터랙션과 재미를 선사하는 실험적 아트워크를 브라우저 환경에 구현했습니다.
핵심 구현 기능
- ✓Google MediaPipe FaceLandmarker 기반 478개 안면 랜드마크 실시간 추적
- ✓브라우저 온디바이스 인퍼런스로 서버 영상 전송 없는 100% 프라이버시 보호
- ✓미소·입벌림·입맞춤 표정에 반응하는 리듬 싱크 콤보 및 롱홀드 판정 엔진
- ✓Web Audio API 효과음 엔진 및 게임 내 캐릭터 수집(Gacha) 시스템
주요 성과 및 가치
성과 01
MediaPipe Tasks-Vision 기반 478개 안면 랜드마크 실시간 추적
성과 02
표정(구·이·아) 싱크 콤보 & 롱 홀드 노트 물리 판정 엔진
성과 03
브라우저 가차(Gacha) 수집 시스템 및 실시간 랭킹 리더보드
기술 스택 및 아키텍처
시스템 아키텍처
클라이언트 온디바이스 컴퓨터 비전 리듬 게임 엔진
적용 기술 스택
MediaPipe FaceLandmarkerReactViteWebRTCWeb Audio API