픽셀에서 물리치료까지: MediaPipe와 React를 활용한 실시간 포즈 교정 시스템 구축

Source: Dev.to

아키텍처: 프레임에서 피드백까지

브라우저에서 “실시간”(30+ FPS) 성능을 달성하려면 지연 시간을 최소화하는 파이프라인이 필요합니다. WebAssembly (WASM) 를 사용하면 MediaPipe 가 비디오 프레임을 거의 네이티브 속도로 처리할 수 있습니다.

graph TD
    A[Webcam Stream] --> B[React Camera Component]
    B --> C[MediaPipe Pose Engine]
    C --> D{Keypoint Detection}
    D --> E[Angle Calculation Logic]
    E --> F[Visual Overlay / Canvas]
    E --> G[Speech Synthesis Feedback]
    G --> H[User: "Straighten your back!"]

사전 요구 사항

• MediaPipe Pose – 고정밀 바디 트래킹.
• React – UI 레이어.
• WebAssembly – 브라우저 내에서 머신러닝 모델을 효율적으로 실행.

Step 1: 포즈 엔진 초기화

인체에 33개의 3D 랜드마크를 감지하는 MediaPipe Pose 리스너를 설정합니다.

import { Pose } from "@mediapipe/pose";
import * as cam from "@mediapipe/camera_utils";

const pose = new Pose({
  locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`,
});

pose.setOptions({
  modelComplexity: 1,
  smoothLandmarks: true,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5,
});

Step 2: 수학 – 관절 각도 계산

물리 치료에서는 관절 각도가 필요합니다. 스쿼트의 경우, 엉덩이‑무릎‑발목 사이의 각도를 계산합니다.

/**
 * Calculates the angle between three points (A, B, C)
 * B is the vertex (e.g., the knee)
 */
function calculateAngle(a, b, c) {
  const radians =
    Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x);
  let angle = Math.abs((radians * 180.0) / Math.PI);
  if (angle > 180.0) angle = 360 - angle;
  return angle;
}

// Example usage in the MediaPipe results callback:
const kneeAngle = calculateAngle(
  results.poseLandmarks[24], // Hip
  results.poseLandmarks[26], // Knee
  results.poseLandmarks[28]  // Ankle
);

Step 3: 실시간 피드백 로직

각도 값을 행동 가능한 음성 피드백으로 변환합니다.

const provideFeedback = (angle) => {
  const synth = window.speechSynthesis;

  if (angle > 160) {
    // Standing up too early
    return "Lower your hips more.";
  } else if (angle < 90) {
    // Too deep for some patients
    const utter = new SpeechSynthesisUtterance(
      "Great depth, keep your back straight!"
    );
    synth.speak(utter);
  }
};

프로덕션으로 확장하기

주말에 만든 프로토타입은 좋은 시작이지만, 프로덕션 수준의 원격 물리치료 플랫폼에는 다음이 필요합니다:

• 데이터 영속성 및 분석.
• HIPAA‑준수 스토리지와 전송.
• 소음이 많은 환경을 위한 고급 필터링.
• 다중 인물 트래킹 또는 HL7/FHIR 표준과의 통합.

자세한 가이드는 wellally.tech/blog 의 글들을 참고하세요.

결론: 브라우저가 바로 운동 전문가

MediaPipe 의 스켈레톤 트래킹과 간단한 삼각함수를 결합하면, 브라우저에서 직접 인간 움직임을 “보고” “교정”하는 시스템을 만들 수 있습니다. 이는 최신 Vision AI 의 힘을 보여주며, 웹캠만 있으면 누구든지 전문 지식을 활용할 수 있게 합니다.

다음 단계는?

• 상태 머신을 이용해 반복 횟수 카운터 추가.
• Chart.js 대시보드를 통합해 무릎 가동성을 시간에 따라 추적.
• 커뮤니티와 진행 상황을 공유!