AI 자세 인식 기반 홈트레이닝 동기부여 플랫폼
운동 부족 문제를 해결하기 위해
보상 시스템 + 실시간 AI 피드백을 결합한 서비스입니다.
QuestFit은
현대인의 운동 부족 원인인 동기 저하와 바쁜 일상에 집중하여 설계한 서비스입니다.
- 공간 제약 없는 홈트레이닝 환경 제공
- 퀘스트/업적 기반 보상 시스템으로 동기 강화
- AI 자세 인식을 통한 실시간 피드백 제공
- TypeScript
- React
- Vite
- Tailwind CSS
- GitHub
- Figma
Context API 기반 전역 상태 관리
WebSocket 기반 AI 서버 통신 구조
| 기능 | 설명 |
|---|---|
| 🔐 OAuth 로그인 | Google OAuth 기반 인증 |
| 🏆 퀘스트 시스템 | 일일 퀘스트 및 도전과제 |
| 👕 캐릭터 커스터마이징 | 상점/옷장 기능 |
| 🤖 AI 자세 피드백 | 웹캠 기반 실시간 자세 인식 |
| 🧑🤝🧑 랭킹 시스템 | 운동 기록 공유 |
운동 종류에 따라 서로 다른 AI 모델과 통신해야 했으며,
일반 모드 / 사용자 설정 모드 모두 정상 동작해야 했습니다.
- 운동별 페이지 분리 → 중복 코드 발생
- 라우트 파라미터 전달 → 일부 모드에서 정보 부재
- Context API로 운동 정보 전역 관리
- 운동 시작 페이지에서 해당 상태 기반으로 WebSocket URL 분기
- 페이지 중복 제거
- 모드 관계없이 안정적인 AI 통신 구조 확립
SVG viewBox 차이로 인해 의상이 캐릭터와 미세하게 어긋남
- 동일 기준 viewBox로 재export
absolute inset-0기반 레이어 구조 재설계- 반응형에서도 위치 보정 유지
- 화면 크기 변화에도 안정적인 렌더링 구현
- 🏆 캡스톤디자인 장려상 수상
- 시연 부스 사용자 긍정 피드백 확보
- 실시간 자세 코칭에 대한 높은 관심
- 자동 카운트 기능 만족도 높음
- 공유 기능에 대한 재미 요소 평가
- 직접 디자인하며 UI 설계 역량의 중요성 체감
- 실시간 웹캠 프레임 전송 및 WebSocket 통신 경험
- 외부 공유 API 연동 경험 축적
- 프론트엔드 전체 구조 설계
- WebSocket 분기 로직 설계
- 상태 관리 구조 설계
- SVG 레이어링 구조 개선