💡 한 줄 요약
노트북이나 태블릿 웹캠 앞에서 스쿼트를 하면, MediaPipe Pose AI가 실시간으로 무릎 각도를 분석해 올바른 자세 피드백과 음성 카운팅을 해주는 '스마트 AI 스쿼트 코치' 웹앱 제작 바이브 코딩 프롬프트와 노하우를 소개합니다!
🏋️♂️ 체육 수업 & 홈트레이닝, AI가 1:1로 자세를 봐준다면?
스쿼트는 하체 근력과 성장판 자극에 최고의 운동이지만, 잘못된 자세(무릎이 발끝 앞으로 과도하게 쏠리거나 엉덩이를 덜 내리는 자세)로 반복하면 관절에 무리가 가기 쉽습니다.
특히 교실 체육 수업이나 가정에서 혼자 운동할 때 내가 바른 각도로 앉았는지 스스로 확인하기 어려운데요, MediaPipe Pose AI 비전 기술을 활용하면 카메라가 실시간으로 엉덩이-무릎-발목 관절을 추적해 정확한 자세일 때만 카운트를 올려줍니다!
별도 앱 설치 없이 브라우저에서 바로 구동되고, 카메라 영상이 외부 서버로 전송되지 않아 학생 개인정보 걱정 없이 100% 안전한 '단일 HTML AI 모션 코치' 제작기를 공유합니다.
📊 일반 동영상 따라하기 vs 실시간 AI 스쿼트 코치 비교
| 구분 | 기존 유튜브/영상 홈트레이닝 | 바이브 코딩 AI 모션 코치 웹앱 (추천 ⭐️) |
|---|---|---|
| 실시간 자세 교정 | 영상을 눈으로 보며 흉내만 내어 자세 오류 방치 | 무릎 각도(100°~115°) 도달 시 초록색(🟢) 골격선 점등 & 음성 안내 |
| 자동 횟수 카운팅 | 운동 도중 내가 몇 번 했는지 속으로 세느라 집중 분산 | 완벽히 앉았다 일어설 때마다 TTS 음성("하나!", "둘!") 자동 카운트 |
| 맞춤형 모드 설정 | 일괄적인 난이도로 어린이/초보자에게 무리 발생 | [어린이 모드: 1세트 10회] vs [성인 초보: 3세트 15회+휴식] 분기 |
🧠 2대 핵심 운동 과학 & 세부 설계 원리
- 어린이 vs 성인 맞춤형 각도 및 세트 설계:
- 어린이 모드 (1세트 10회): 성장기 관절을 보호하기 위해 무릎 각도 115°(하프 스쿼트) 수준만 닿아도 성공으로 인정하고, "의자에 엉덩이를 살짝 콕 찍고 일어나기!" 가이드를 제공합니다.
- 성인 초보자 모드 (3세트 15회): 허벅지가 수평이 되는 100° 표준 각도를 적용하며, 1세트(15회) 종료 시 30초 휴식 카운트다운 타이머가 자동 실행됩니다.
- 로컬 브라우저 온디바이스(On-Device) AI 연산:
- MediaPipe Pose CDN을 활용하여 1초에 30회 관절 좌표를 계산합니다. 카메라 영상이 서버로 전송되지 않고 학생 기기 내부에서만 처리되므로 학교에서도 개인정보 유출 걱정 없이 안전합니다.
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [복사용] AI 웹캠 스쿼트 코치 웹앱 제작 프롬프트
"너는 AI 컴퓨터 비전 및 피트니스 에듀테크 전문 개발자야. 별도 설치 없이 브라우저에서 단 하나의 HTML 파일로 실행되는 [실시간 AI 웹캠 스쿼트 코치 웹앱]을 만들어 줘.
[핵심 기술 및 CDN]
- MediaPipe Pose & CameraUtils CDN을 사용해 웹캠에서 엉덩이(23,24), 무릎(25,26), 발목(27,28) 3개 관절의 랜드마크 각도를 실시간 계산할 것.
- 거울 모드(좌우 반전) 캔버스에 신체 골격선(파랑 ➔ 올바른 깊이 도달 시 초록 ➔ 일어설 때 카운트)을 그릴 것.
[듀얼 모드 설정]
1. 어린이 모드: 1세트 10회, 완화된 무릎 각도(115° 하프 스쿼트), 친근한 자세 가이드 팁 제공.
2. 성인 초보자 모드: 3세트 15회, 표준 무릎 각도(100°), 1세트 완료 시 '30초 휴식 카운트다운' 오버레이 자동 실행.
[피드백 및 편의 기능]
- 올바른 1회 완료 시 Web Audio API 비프음과 함께 Web Speech API(ko-KR)로 횟수 낭독('하나!', '둘!').
- 5회마다 미니 폭죽, 목표 세트 완주 시 축하 폭죽(Canvas-confetti)과 완주 인증 모달창 표시.
- Tailwind CSS CDN을 적용하여 다크 테마의 직관적인 운동 대시보드 단일 index.html로 작성해 줘."
📋 3단계 활용 가이드
- 위 프롬프트를 제미나이나 클로드에 입력하여 단일 HTML 코드를 생성받습니다.
- 메모장에 코드를 붙여넣고
ai_squat_coach.html로 저장한 뒤 브라우저로 엽니다. - 카메라 권한을 허용하고 웹캠 앞에 전신이 나오도록 선 뒤, AI의 실시간 코칭을 받으며 신나게 스쿼트를 시작해 보세요!
🎯 에디터 한줄평
웹캠과 MediaPipe 비전 기술이 만나 교실과 거실이 최첨단 스마트 헬스케어 룸으로 변신합니다. 성장기 아이들의 바른 자세 습관을 AI와 함께 키워보세요!
💡 운동 팁 안내
카메라에서 2~2.5m 정도 떨어져 머리부터 발끝까지 전신이 화면에 잘 잡히도록 웹캠 각도를 조절해 주시면 더욱 정확하게 자세를 인식합니다.
