작성완료

TensorFlow.js + MoveNet

TensorFlow.js와 MoveNet을 활용하여 웹 브라우저에서 실시간으로 사람의 포즈를 추정할 수 있는 솔루션을 제공한다. MoveNet은 높은 정확도와 빠른 속도를 자랑하며, 두 가지 모델(Lightning과 Thunder)을 통해 다양한 용도로 활용 가능하다. 주요 활용 사례로는 운동 자세 분석, 모션 게임, 피트니스 트래킹 등이 있으며, 경량화된 구조로 모바일에서도 빠르게 작동한다. 다만, 다중 인물 추적에는 한계가 있다.

인공지능

이 조합은 웹 브라우저 상에서 실시간 사람의 포즈(신체 자세)를 추정하는 데 매우 강력하고 효율적인 솔루션입니다.

✅ 1. 개요

TensorFlow.js는 Google에서 개발한 브라우저 및 Node.js 환경에서 딥러닝 모델을 실행할 수 있는 JavaScript 라이브러리입니다.
MoveNet은 Google의 고성능 경량 포즈 추정 모델로, TensorFlow.js에서 실행 가능하도록 최적화되어 있습니다.

✅ 2. MoveNet의 특징

항목	설명
🎯 정확도	매우 높은 정확도, 특히 단일 인물 추적에서 탁월함
⚡ 속도	실시간 추적 가능 (WebGL/WebAssembly 기반)
📦 모델 크기	경량화되어 모바일 및 웹에서도 빠르게 로드
🎯 지원 키포인트	총 17개의 관절(keypoints) 추정 (코, 어깨, 팔꿈치, 손목, 엉덩이, 무릎, 발목 등)

✅ 3. MoveNet의 2가지 모델 종류

모델	특징
Lightning	빠름. 모바일 기기 및 실시간 처리에 최적화
Thunder	더 정확함. 약간 느리지만 데스크탑에서 적합

✅ 4. 구조

MoveNet 모델은 다음과 같은 구조의 출력을 제공합니다:

typescript
type Keypoint = {
  x: number,     // 화면상의 x 좌표
  y: number,     // 화면상의 y 좌표
  score: number, // 인식 확률 (0 ~ 1)
  name: string   // 관절 이름 (e.g. 'left_shoulder')
}

✅ 5. 코드 예시 (TypeScript)

typescript
import * as poseDetection from '@tensorflow-models/pose-detection';
import '@tensorflow/tfjs-backend-webgl';

async function runPoseDetection() {
  await tf.setBackend('webgl'); // 백엔드 설정

  const detector = await poseDetection.createDetector(
    poseDetection.SupportedModels.MoveNet,
    {
      modelType: poseDetection.movenet.modelType.SINGLEPOSE_LIGHTNING,
    }
  );

  const video = document.getElementById('video') as HTMLVideoElement;

  const estimate = async () => {
    const poses = await detector.estimatePoses(video);
    console.log(poses[0]?.keypoints); // 관절 정보 출력
    requestAnimationFrame(estimate);
  };

  estimate();
}

✅ 6. 실제 활용 사례

👟 운동 자세 분석 (예: 스쿼트 자세 교정)
🎮 모션 게임 컨트롤
🧘 피트니스 및 요가 자세 트래킹
🧍자세 인식 기반 UX (예: 손 들기 → 동작 트리거)
🧠 심리 상태 분석 (자세 패턴 → 감정 추정)

✅ 7. 브라우저 데모

공식 데모: MoveNet Demo on Glitch
GitHub 소스: tfjs-models/pose-detection

✅ 8. 장단점 요약

장점	단점
경량화되어 웹/모바일에서도 동작 가능	다중 인물 추적은 불안정 (단일 인물에 최적화)
매우 빠른 추론 속도	PoseNet보다 정확하지만 일부 복잡한 동작에는 한계 있음
TypeScript 지원 및 튜토리얼 풍부	사용 전 video 처리/셋업 필요

TensorFlow.js + MoveNet

인공지능

✅ 2. MoveNet의 특징

항목

설명

🎯 정확도

매우 높은 정확도, 특히 단일 인물 추적에서 탁월함

⚡ 속도

실시간 추적 가능 (WebGL/WebAssembly 기반)

📦 모델 크기

경량화되어 모바일 및 웹에서도 빠르게 로드

🎯 지원 키포인트

총 17개의 관절(keypoints) 추정 (코, 어깨, 팔꿈치, 손목, 엉덩이, 무릎, 발목 등)

모델

특징

Lightning

빠름. 모바일 기기 및 실시간 처리에 최적화

Thunder

더 정확함. 약간 느리지만 데스크탑에서 적합

type Keypoint = { x: number, // 화면상의 x 좌표 y: number, // 화면상의 y 좌표 score: number, // 인식 확률 (0 ~ 1) name: string // 관절 이름 (e.g. 'left_shoulder') }

✅ 5. 코드 예시 (TypeScript)

import * as poseDetection from '@tensorflow-models/pose-detection';
import '@tensorflow/tfjs-backend-webgl';

async function runPoseDetection() {
  await tf.setBackend('webgl'); // 백엔드 설정

  const detector = await poseDetection.createDetector(
    poseDetection.SupportedModels.MoveNet,
    {
      modelType: poseDetection.movenet.modelType.SINGLEPOSE_LIGHTNING,
    }
  );

  const video = document.getElementById('video') as HTMLVideoElement;

  const estimate = async () => {
    const poses = await detector.estimatePoses(video);
    console.log(poses[0]?.keypoints); // 관절 정보 출력
    requestAnimationFrame(estimate);
  };

  estimate();
}

✅ 8. 장단점 요약

장점

단점

경량화되어 웹/모바일에서도 동작 가능

다중 인물 추적은 불안정 (단일 인물에 최적화)

매우 빠른 추론 속도

PoseNet보다 정확하지만 일부 복잡한 동작에는 한계 있음

TypeScript 지원 및 튜토리얼 풍부

사용 전 video 처리/셋업 필요