1. 📋 프로젝트 개요

실시간 운동 자세 측정과 현대인의 거북목 진단을 돕는 웹 서비스

멋쟁이사자처럼 12기 중앙해커톤에서 '현대인의 웰니스 문제 해결'을 주제로 개발된 서비스입니다. 단순히 운동 영상을 보고 따라 하거나 수동으로 기록만 남기는 기존 방식에서 탈피하여, "정확하게 측정할 수 있는 운동 서비스" 를 만드는 것을 목표로 삼았습니다. MediaPipe Pose 비전 AI 기술을 활용해 사용자의 자세를 실시간으로 분석하고, 세션 종료 후에는 개인화된 통계를 시각화하여 데이터에 기반한 지속 가능한 건강 관리를 돕는 실시간 인터랙티브 웹 서비스를 구현했습니다.

🛠 사용 기술

2. ✨ 핵심 기능

"실시간 운동 자세 측정과 거북목 점수 확인"

🏋️ 실시간 AI 자세 분석 및 카운팅

웹캠을 통해 사용자의 움직임을 실시간 분석하여 운동의 질을 높여줍니다.

• 정교한 관절 각도 계산: atan2 알고리즘으로 무릎, 어깨 등 주요 관절의 사이각을 계산해 동작의 정확도를 판별합니다.
• 맞춤형 운동 종목: 스쿼트, 런지, 푸시업 등 대표적인 맨몸 운동의 정석 자세를 코드로 구현했습니다.
• 즉각적인 등급 피드백: 가동 범위에 따라 GOOD / GREAT / PERFECT 등급을 실시간으로 표시해 혼자서도 자세를 교정할 수 있도록 돕습니다.

▲ MediaPipe를 활용한 실시간 스켈레톤 추출 및 동작 인식

📊 운동 결과 리포트 및 통계 확인

운동이 끝난 뒤에는 나의 수행 능력을 데이터로 한눈에 확인할 수 있습니다.

• 정량화된 성과 지표: 운동 중 측정된 모든 각도 데이터를 집계하여 평균 점수와 횟수를 계산합니다.
• 기록의 시각화: 세션별 기록이 대시보드에 축적되어, 일간/주간 단위로 나의 운동 변화량을 파악할 수 있습니다.
• 성취감 부여: 단순히 '했다'는 기록을 넘어 '얼마나 정확했는지' 수치로 보여줌으로써 지속적인 운동 동기를 제공합니다.

▲ 운동 종료 후 제공되는 평균 점수 및 통계 리포트

🐢 거북목 실시간 측정 및 랭킹

현대인의 고질병인 거북목을 진단하고, 이를 게임처럼 즐길 수 있는 요소를 더했습니다.

• 실시간 각도 진단: 코와 어깨 라인의 각도를 분석해 거북목 진행 정도를 점수화합니다.
• 캐릭터 마스크 가이드: 얼굴 위치에 거북이 마스크를 씌워 얼굴 노출 부담은 줄이고, 올바른 측정 위치를 직관적으로 안내합니다.
• 순위 경쟁: 나의 거북목 점수를 다른 사용자들과 비교할 수 있는 랭킹 시스템을 도입해 재미를 더했습니다.

▲ 거북이 마스크 오버레이를 활용한 인터랙티브 진단 및 랭킹 시스템

3. ⚙️ 구현 디테일

"브라우저의 한계를 극복한 실시간 비전 연산과 데이터 아키텍처"

🔄 서비스 데이터 흐름

📍 삼각함수를 활용한 자세 판별 로직

사용자의 체격이나 카메라와의 거리에 관계없이 정확한 동작을 인식하기 위해, 절대 좌표가 아닌 관절 사이의 상대적인 각도를 계산하는 방식을 적용했습니다.

• atan2를 이용한 각도 추출: 세 개의 관절 점(예: 엉덩이-무릎-발목)을 연결해 사이각을 구했습니다. Math.atan2 로직을 활용하여 사용자가 어느 방향을 보고 있든 일관된 각도 데이터를 얻을 수 있도록 구현했습니다.
• 상태 플래그 기반 카운팅: 단순히 특정 각도에 도달했을 때 횟수를 올리는 것이 아니라, isSquat, isPushup 같은 플래그 변수를 사용해 '완전히 내려갔다가 다시 올라온 시점'을 한 회의 운동으로 인정하는 유한 상태 기계(FSM) 로직을 적용했습니다.

/**
 * 세 관절 사이의 각도를 계산하여 자세의 완성도를 판별하는 핵심 로직
 */
function angleBetweenLines(p1, p2, p3) {
  let angle = Math.atan2(p3.y - p2.y, p3.x - p2.x) 

🚀 프레임 쓰로틀링 및 디바이스 호환성 최적화

실시간 AI 추론 시 발생하는 브라우저 과부하를 해결하고, 사양이 낮은 기기나 다양한 디바이스 환경에서도 안정적으로 작동하도록 웹캠 파이프라인을 튜닝했습니다.

• 4프레임 주기 추론 (Frame Throttling): 모든 영상 프레임을 계산하지 않고 frameInterval % 4 === 0 로직을 적용했습니다. 초당 약 15회의 추론만으로도 운동 궤적 파악에 충분하다는 점을 확인하여, CPU 연산 부하를 75% 절감했습니다.
• 하드웨어 호환성 이슈 해결: 특정 디바이스에서 영상이 멈추거나 인식이 되지 않는 문제를 해결하기 위해 1280x720의 ideal 해상도 설정과 onloadedmetadata 이벤트를 통한 비디오 준비 상태 체크 로직을 추가했습니다. 특히 모바일 환경을 위해 playsInline 설정을 강제하여 웹캠 실행의 안정성을 확보했습니다.

▲ 프레임 쓰로틀링(Throttling)을 통한 연산 효율화 다이어그램

💾 세션 데이터 집계 및 일괄 전송

운동 중 발생하는 데이터를 효율적으로 관리하기 위해 회원 여부에 따른 조건부 데이터 파이프라인을 구축했습니다.

• 데이터 누적 저장: 운동 중에 기록되는 점수(Good/Great/Perfect)를 Redux Store의 배열(scoreArray)에 실시간으로 축적합니다.
• 회원 전용 일괄 전송 (Batch): 세션이 종료될 때 사용자의 로그인 상태를 확인합니다. 회원인 경우에만 누적된 데이터를 단 한 번의 API 요청(useMutation)으로 서버에 전송하며, 비회원은 데이터 저장 없이 즉시 결과 리포트만 확인할 수 있도록 설계했습니다.

4. 🎨 사용자 경험 전략

"기술적 장벽을 낮추는 직관적인 가이드와 데이터 기반의 개인화된 피드백"

📍 정확한 측정을 유도하는 온보딩 및 피드백

비전 AI 기반 측정의 오차를 최소화하고 사용자가 '스스로' 최적의 환경을 맞추게 하는 UX 장치를 설계했습니다.

• 측면 포지셔닝 가이드: 거북목 측정의 핵심인 '경추 각도'를 정확히 산출하기 위해, 시작 전 사용자가 측면으로 서도록 유도하는 시각적 가이드를 배치했습니다. 이를 통해 정면 응시로 인한 데이터 왜곡을 방지하고 측정 신뢰도를 확보했습니다.
• 실시간 영역 이탈 및 가시성(Visibility) 피드백: 관절의 visibility 점수가 낮아지거나 카메라 범위를 벗어나면 즉각 피드백을 주어, 사용자가 스스로 측정 환경을 조정하도록 유도했습니다.

🎭 캐릭터 마스크와 AI 맞춤 코멘트

웹캠 사용의 심리적 부담을 줄이고, 측정 결과에 대한 전문적인 분석을 제공합니다.

• 실시간 캐릭터 마스크 오버레이: 코(Nose) 랜드마크를 실시간 추적하여 거북이 마스크를 입혔습니다. 이는 얼굴 노출 부담을 줄이는 동시에 머리 위치를 측정 영역 안으로 유도하는 가이드 역할을 수행합니다.
• GPT 기반 AI 맞춤 코멘트: 측정이 완료되면 산출된 거북목 점수를 바탕으로 GPT AI가 개인화된 분석 코멘트를 생성합니다. 단순 수치 노출을 넘어 현재 상태에 대한 구체적인 조언과 생활 습관 교정 팁을 제공해 서비스의 전문성을 높였습니다.

▲ 거북이 마스크 오버레이 및 측정 후 GPT AI 맞춤 코멘트 확인 과정

🏆 성취감을 극대화하는 보상형 인터페이스

사용자가 지치지 않고 끝까지 세션을 완수하도록 돕는 게이미피케이션 요소를 도입했습니다.

• 세트별 성과 뱃지 시스템: 단순히 쉬는 시간을 주는 것이 아니라, 방금 마친 세트의 데이터(Perfect 비율 등)를 실시간 분석하여 성과 뱃지를 수여합니다. 시각적 보상을 통해 다음 세트에 대한 동기를 즉각적으로 부여합니다.

▲ 실시간 세션 데이터 분석을 통한 성과 뱃지 수여 및 휴식 인터페이스

• 데이터 보상 및 랭킹 시스템: 운동 종료 후 세션 점수와 전체 사용자 랭킹을 노출합니다. 자칫 지루해질 수 있는 과정을 '데이터로 증명받는 성취감'으로 변환하여 사용자의 리텐션(Retention)을 강화했습니다.

▲ 운동 성과 데이터 집계 및 실시간 랭킹 리포트 화면

5. 📝 회고

"웹캠 기반의 실시간 자세 측정 로직을 완성하며 경험한 기술적 집요함"

2주간의 해커톤 기간 동안 '웹캠 데이터가 어떻게 실제 운동 지표로 변환되는가' 에 대한 플로우를 찾는 데 몰입했습니다. 단순히 AI 모델을 사용하는 것에 그치지 않고, 복잡한 환경에서도 일관된 성능을 내는 안정적인 서비스를 만드는 과정을 거치며 한 단계 더 성장할 수 있었습니다.

🚀 주요 성과 및 배운 점

• 실시간 자세 측정 파이프라인 구축
  • MediaPipe를 활용해 추출한 원시 관절 데이터와 atan2 연산 로직을 결합하여 [웹캠 영상 → 관절 좌표 추출 → 각도 연산 → 실시간 자세 측정 → 결과 도출] 파이프라인을 직접 설계하고 구현했습니다.
• 디바이스 환경의 제약 없는 서비스 구현
  • 기기별 하드웨어 편차를 극복하기 위해 ideal 해상도 설정과 프레임 제어 로직을 적용하여 모든 디바이스에서의 통일성 있는 사용자 경험을 확보했습니다. 수많은 레퍼런스를 분석해 하드웨어 의존성을 낮춘 결과, 실전 시연에서 높은 안정성을 증명했습니다.
• 사용자 진입 장벽을 낮추는 장치
  • '캐릭터 마스크'와 '성과 뱃지' 등 게이미피케이션 요소를 적극 도입하여, 비전 AI라는 생소한 기술을 사용자가 거부감 없이 즐겁게 이용할 수 있도록 유도했습니다.

💡 마무리하며

디바이스별 하드웨어 의존성을 낮추고 서비스 안정성을 확보했던 경험은 개발자로서 큰 자산이 되었습니다. 예측 불가능한 기술적 변수에 대응하며 쌓은 트러블슈팅 경험은, 현재 제가 더 견고한 아키텍처를 설계하고 복잡한 문제를 해결하는 데 있어 실질적인 밑거름이 되고 있습니다.