software

브라우저에서 완전히 실행되는 실시간 핸드 트래킹 플랫폼을 구축한 방법

발행: (2026년 1월 13일 오후 03:50 GMT+9)
4 분 소요
원문: Dev.to

Source: Dev.to

전통적인 손 추적의 문제점

  • Python, OpenCV 및 수십 개의 다른 의존성 설치
  • 사용자에게 네이티브 앱 다운로드를 신뢰하도록 요구
  • 다양한 OS에서 웹캠 권한을 두고 씨름
  • 손 움직임을 처리하기 위해 서버를 띄워야 함
  • 지연(latency) 때문에 “실시간” 경험이 사라짐

브라우저 전용 솔루션

손 추적이 브라우저 탭 안에서 바로 동작한다면?

// Detect pinch gesture
const distance = Math.sqrt(
  Math.pow(thumbTip.x - indexTip.x, 2) +
  Math.pow(thumbTip.y - indexTip.y, 2)
);
const angle = Math.min(distance * 500, 90);

위 코드는 핀치 제스처를 애니메이션 제어에 매핑하는 실제 예시입니다. MediaPipe가 감지를 담당하고, Three.js가 시각화를 렌더링합니다.

  • 브라우저가 MediaPipe를 로드 – 설치 없이 CDN으로 가져오기만 하면 됨
  • 웹캠이 랜드마크를 제공 – 21개의 손 포인트를 실시간으로 추적
  • JavaScript가 제스처를 매핑 – 손가락 위치를 동작으로 변환
  • Three.js가 출력 렌더링 – 60 fps의 부드러운 3D 시각화

전체 파이프라인이 클라이언트 측에서 실행됩니다. 웹캠 피드는 절대 디바이스를 떠나지 않습니다.

Browser SDK (설치 필요 없음)

  1. Playground에 접속 → 효과 선택 → 카메라 권한 허용 → 완료

Cloud API

curl -X POST https://visionpipe3d.quochuy.dev/api/detect \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "image=@hand.jpg"

새 계정은 100개의 무료 API 크레딧을 받으며, 신용카드가 필요 없습니다.

Browser SDK vs. Cloud API

기능Browser SDKCloud API
손 랜드마크 감지✅✅
실시간 추적✅❌ (배치 전용)
오프라인 지원✅ (로드 후)❌
처리 위치클라이언트 측서버 측
지연 시간~16 ms네트워크 상황에 따라
프라이버시데이터가 로컬에 유지서버에서 처리 후 삭제

가격 정책

플랜크레딧비용크레딧당 가격
Free100$0–
Starter1,000$10$0.010
Growth5,000$40$0.008
Scale20,000$150$0.0075
  • 1 크레딧 = 1 API 호출
  • 크레딧은 절대 만료되지 않음.
  • Playground는 언제나 무료.

시작하기

Browser SDK

  1. Playground URL을 엽니다.
  2. 카메라 접근을 허용합니다.
  3. 효과를 선택하고 감지를 시작합니다.

마찰 제로—Python도, 설치도, “내 컴퓨터에서는 작동한다”도 필요 없습니다.

Cloud API

# 콘솔에서 API 키를 발급받으세요
curl -X POST https://visionpipe3d.quochuy.dev/api/detect \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "image=@sample.jpg"

무료 100 크레딧이면 개념 증명(Proof‑of‑Concept) 정도는 충분히 만들 수 있습니다.

리소스

  • GitHub:
  • Website:
  • Documentation:

행동 촉구

여러분은 어떤 제스처 기반 인터페이스를 만들었거나 만들고 싶나요? 전형적인 “에어 기타” 데모를 넘어 사람들이 탐구하고 있는 사용 사례가 궁금합니다.

Back to Blog

관련 글

더 보기 »