Creative & Web운영 중
AI Fitness Game
MediaPipe 동작인식 피트니스 게임
#MediaPipe#Computer Vision#JavaScript#WebRTC
프로젝트 소개 및 도슨트
“동작 인식 기술(MediaPipe)과 게임 요소를 결합하여 사용자의 건강을 위트 있게 케어하는 인터랙티브 조각입니다. 33개 관절의 실시간 랜드마크를 추적하는 정교함으로 웹의 경계를 넘어 신체적 반응을 생생히 담아냈습니다.”
해결 과제 및 기획 배경
일반적인 버튼 입력 기반 게임의 한계를 넘어, 특수 장비나 센서 없이 일반 웹캠만으로 사용자의 신체 동작과 관절 움직임을 실시간 감지하여 자연스러운 피트니스 게이미피케이션을 구현하고자 설계되었습니다.
핵심 구현 기능
- ✓Google MediaPipe Pose Detection 비전 AI로 33개 인체 관절 랜드마크 실시간 추적
- ✓브라우저 온디바이스(On-device) 인퍼런스로 영상 서버 전송 없이 100% 개인정보 보호
- ✓스쿼트/점핑잭 등 실시간 운동 모션 판정 및 카운팅 물리 엔진
- ✓WebRTC 비디오 스트림과 Canvas 렌더링 최적화를 통한 저사양 환경 쾌적 구동
주요 성과 및 가치
성과 01
MediaPipe Pose Detection
성과 02
실시간 운동 카운팅
성과 03
별도 설치 없는 브라우저 실행
기술 스택 및 아키텍처
시스템 아키텍처
클라이언트 온디바이스 비전 AI (무서버 인퍼런스)
적용 기술 스택
MediaPipe PoseReactWebRTCCanvas APIFirebase Hosting