MediaPipe, React, RAG를 사용하여 AI 헬스 트레이너를 구축한 방법

우리 모두 그런 경험이 있습니다.

운동을 시작할 때 자신의 자세에 대해 엄청난 자신감을 느끼지만, 나중에 보니 스쿼트가 마치 현대 무용 루틴처럼 보이고 있다는 사실을 깨닫는 순간 말이죠.

그 일이 저와 제 친구에게 한 가지 생각을 하게 만들었습니다:

만약 개인 트레이너가 노트북 안에 들어가서 우리가 운동을 올바르게 하고 있는지 알려줄 수 있다면 어떨까?

그래서 우리는 실시간으로 운동 자세를 분석하고, 반복 횟수를 세며, RAG (Retrieval-Augmented Generation) 기반 어시스턴트를 통해 피트니스 관련 질문에 답할 수 있는 AI 헬스 트레이너를 구축했습니다.

머신러닝 (Machine Learning) 모델을 처음부터 학습시키는 대신, 우리는 MediaPipe의 포즈 추정 (Pose Estimation) 기능을 사용하고 이를 커스텀 각도 계산 및 규칙 기반 로직 (Rule-based Logic)과 결합하여 지능적인 운동 동반자를 만들었습니다.

문제점

저희를 포함한 많은 초보자는 운동이 올바르게 수행되고 있는지 항상 알지는 못합니다. 운동이 효과적이라고 느낄 수도 있지만, 잘못된 자세는 결과를 저하시키고 심지어 부상 위험을 높일 수 있습니다.

우리는 컴퓨터 비전 (Computer Vision)과 AI가 단순한 웹캠만으로 즉각적인 피드백을 제공하고 사용자가 더 자신감 있게 운동할 수 있도록 도울 수 있는지 탐구하고 싶었습니다.

프로젝트 개요

애플리케이션 대시보드

운동 추적

운동 추적

피트니스 어시스턴트 (Fitness Assistant)

시스템 아키텍처 (System Architecture)

이 프로젝트는 두 가지 주요 부분으로 나뉩니다:

1. 사용자 움직임을 분석하는 실시간 운동 추적 시스템.
2. 운동 관련 질문에 답변하는 RAG 기반 피트니스 어시스턴트.

실시간 운동 분석 (Real-Time Exercise Analysis)

여기서 마법이 일어나거나, 애플리케이션이 사용자에게

랜드마크가 감지되면, 서로 다른 신체 부위 사이의 관절 각도(joint angles)를 계산합니다.

예를 들어, 바이셉 컬(bicep curl)을 하는 동안 팔이 위아래로 움직임에 따라 팔꿈치 각도가 변합니다. 이러한 변화를 추적함으로써, 시스템은 사용자가 현재 운동의 어느 단계에 있는지 판단할 수 있습니다.

자세 검증 (Form Validation)

이제 애플리케이션이 여러분의 엄격한 운동 파트너가 되는 단계가 옵니다.

커스텀 모델을 학습시키는 대신, 우리는 규칙 기반 로직(rule-based logic)과 각 운동에 대해 미리 정의된 각도 임계값(angle thresholds)을 사용합니다.

움직임이 예상되는 기준을 충족하면 모든 것이 정상입니다. 그렇지 않으면, 시스템은 사용자가 실수로 완전히 새로운 운동을 만들어내기 전에 자세를 교정할 수 있도록 피드백을 제공합니다.

반복 횟수 측정 (Repetition Counting)

마지막으로, 시스템은 "위(up)" 및 "아래(down)"와 같은 운동 단계(exercise stages)를 추적합니다.

완전한 움직임 사이클이 감지될 때마다 반복 횟수 카운터가 자동으로 증가합니다.

마지막 횟수가 제대로 카운트되었는지 스스로와 논쟁할 필요가 없습니다. 시스템이 대신 카운트해 주니까요.

시스템 작동 원리

포즈 감지 (Pose Detection): 컴퓨터에게 인간을 인식하는 법 가르치기 🕺

첫 번째 과제는 애플리케이션이 자신이 무엇을 보고 있는지 이해하도록 만드는 것이었습니다.

MediaPipe Pose를 사용하여 어깨, 팔꿈치, 엉덩이, 무릎, 발목과 같은 주요 관절을 포함한 33개의 신체 랜드마크(body landmarks)를 실시간으로 감지합니다.

이 랜드마크들은 시스템의 나머지 부분이 분석에 사용할 "골격(skeleton)" 역할을 합니다.

각도 계산 (Angle Calculation): 움직임을 숫자로 변환하기 📐

랜드마크가 감지되면, 서로 다른 신체 부위 사이의 관절 각도(joint angles)를 계산합니다.

예를 들어, 바이셉 컬 (bicep curl)을 하는 동안 팔이 위아래로 움직임에 따라 팔꿈치 각도가 변합니다. 이러한 변화를 추적함으로써, 시스템은 사용자가 운동의 어느 단계에 있는지 이해할 수 있습니다.

 const lm = pose.getLandmarks();

        if (lm) {
...

이 시점에서 애플리케이션은 당신이 운동을 올바르게 하고 있는지까지는 알지 못합니다. 그저 일련의 각도 데이터들을 알고 있을 뿐입니다.

자세 검증 및 횟수 측정: 엄격한 운동 파트너 💪

여기서부터 재미있는 부분이 시작됩니다.

커스텀 머신러닝 (machine learning) 모델을 학습시키는 대신, 우리는 규칙 기반 로직 (rule-based logic)과 각도 임계값 (angle thresholds)을 사용하여 각 운동을 평가합니다.

예를 들어, 바이셉 컬 (bicep curl)의 경우:

let newMsg = "";

          if (back < 70 || back > 110) {
...

움직임이 예상된 패턴을 따르면 횟수 (repetition)가 카운트됩니다. 그렇지 않으면, 시스템은 사용자에게 자세를 개선해야 한다고 알려줍니다.

당신의 운동을 끊임없이 지켜보는 운동 파트너가 있다고 생각해보세요. 다만 그 파트너는 "형, 한 번만 더!"라고 말하는 대신, 그 횟수가 실제로 유효한지를 체크합니다.

RAG 기반 피트니스 어시스턴트 🤖

운동 추적기를 구축하면서, 우리는 사용자들이 단순히 횟수를 세는 것 이상의 질문을 가질 수 있다는 점을 깨달았습니다.

다음과 같은 질문들 말이죠:

스쿼트 자세를 어떻게 개선하나요?
데드리프트는 어떤 근육을 타겟팅하나요?
초보자는 몇 세트를 수행해야 하나요?

답변을 하드코딩하거나 일반적인 목적의 챗봇 (chatbot)에만 의존하는 대신, 우리는 더 관련성 높고 문맥을 인식하는 (context-aware) 응답을 제공하기 위해 검색 증강 생성 (RAG, Retrieval-Augmented Generation) 파이프라인을 통합했습니다.

아이디어는 간단합니다. 답변을 생성하기 전에, 시스템이 먼저 피트니스 지식 베이스 (knowledge base)에서 관련 정보를 검색한 다음 그 문맥 (context)을 LLM에 전달하는 것입니다.

상호작용 예시

사용자: 스쿼트 자세를 어떻게 개선하나요?

Assistant: 무릎이 발가락과 일직선이 되도록 유지하고, 중립적인 척추 (neutral spine)를 유지하며, 뒤꿈치를 바닥에 붙인 상태에서 최소한 평행한 깊이까지 내려가는 것을 목표로 하세요.

핵심 RAG 워크플로우 (Core RAG Workflow)

try:
        while True:
            data = await websocket.receive_json()
...

이러한 접근 방식은 어시스턴트가 모델의 일반적인 지식에 전적으로 의존하는 대신, 피트니스 특화 정보에 기반하여 응답을 생성하도록 돕습니다.

간단히 말해, 어시스턴트가 "나만 믿어"라고 말하는 대신, 답변하기 전에 실제로 관련 정보를 찾아보는 것입니다.

우리가 직면한 가장 큰 과제: 진정한 실시간성 구현하기 ⚡

프로젝트를 처음 구축했을 때, 모든 것이 완벽하게 작동했습니다... 프론트엔드(frontend)와 연결하기 전까지는 말이죠.

우리의 초기 구현 방식은 MediaPipe를 완전히 Python에서 실행하는 것이었습니다. React 프론트엔드가 비디오 프레임 (video frames)을 캡처하여 처리를 위해 Python 백엔드 (backend)로 전송하면, 결과가 다시 전송될 때까지 기다리는 방식이었습니다.

초기 아키텍처 (Initial Architecture)

이 방식은 기능적으로는 작동했지만, 눈에 띄는 지연 시간 (latency)을 유발했습니다. 피드백이 표시되기 전에 모든 프레임이 브라우저에서 백엔드로 갔다가 다시 돌아와야 했습니다.

그 결과는 어땠을까요?

• 버벅거리는 포즈 트래킹 (pose tracking)
• 지연되는 피드백
• 실시간과는 거리가 먼 사용자 경험 (user experience)

가상 피트니스 코치에게 기대하는 모습은 결코 아니었습니다.

해결책

몇 번의 실험 끝에, 우리는 MediaPipe를 React 애플리케이션 내부로 직접 옮기기로 결정했습니다.

비디오 프레임을 백엔드로 보내는 대신, 이제 포즈 감지 (pose detection)를 브라우저에서 직접 실행할 수 있게 되었습니다.

최적화된 아키텍처 (Optimized Architecture)