실시간 운동 코칭 페이지 #12
Description
📝 Preview
PoseSync 앱에 실시간 운동 분석 서비스를 추가합니다. 사용자가 설정한 운동 세트를 시작하면 웹캠으로 포즈를 인식하여 올바른 자세를 유도하고, 운동 횟수를 자동으로 카운팅하는 기능을 구현합니다.
실시간 포즈 인식 기술을 통해 사용자의 현재 포즈와 정확한 운동 자세 가이드라인 간의 차이를 시각화하여 보여주고, 자세 정확도와 운동 횟수를 실시간으로 표시합니다.
✅ Todo
- 실시간 운동 분석 페이지 생성 (RealTimeExercisePage.tsx)
- 포즈 인식 관련 컴포넌트 이식
- 포즈 인식 훅 추가
- useMediaPipe 훅 추가
- useSocket 훅 추가
- 유틸리티 함수 추가
- 좌표 계산 유틸리티 추가
- 좌표 매핑 유틸리티 추가
- 랜드마크 안정화 유틸리티 추가
- 필터링 알고리즘 추가
- 포즈 관련 유틸리티 추가
- 소켓 통신 유틸리티 추가
- 타입 정의 추가
- 운동 설정 페이지와 운동 완료 페이지 연결
- 운동 설정 페이지의 "운동하러 가기" 버튼을 실시간 운동 분석 페이지로 연결
- 실시간 운동 분석 페이지에서 운동 완료 시 운동 완료 페이지로 연결
- 스타일 통합 및 디자인 시스템 적용
- 서버 연동 테스트 및 동작 검증
📌 Remark
이 기능은 MediaPipe 라이브러리를 활용한 실시간 포즈 인식과 WebSocket을 통한 서버 통신을 기반으로 구현됩니다. 서버에서는 포즈 분석 알고리즘을 통해 사용자의 운동 자세를 실시간으로 분석하고 피드백을 제공합니다.
프론트엔드에서는 2D 시각화 모드를 사용하며, 서버로부터 받은 가이드라인과 사용자의 현재 포즈를 비교하여 차이점을 시각적으로 보여줍니다.
주요 데이터 흐름:
- WebcamCapture로 사용자 영상 캡처
- MediaPipe를 통한 포즈 랜드마크 추출
- 서버로 랜드마크 데이터 전송
- 서버 분석 결과 수신 및 시각화
- 운동 카운트 및 정확도 피드백 제공
이 기능은 기존에 개발한 플라스크 서버와 연동하여 작동하므로, 서버도 함께 실행해야 합니다.