PoseLandmarker
몸으로 하는 소방 훈련
해결하는 문제
몸 전체의 움직임을 입력으로 쓰는 훈련·운동 콘텐츠를 만들고 싶다.
몸 33개 지점(발목, 뒤꿈치, 발끝 포함)을 실시간으로 잡아 발로 불씨 차기, 스쿼트 세기, 자세 낮추기 훈련을 합니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상
브라우저가 하는 일몸 33개 지점의 위치와 보이는 정도 계산
나오는 것발 속도로 차기 판정, 무릎 각도로 스쿼트, 코 높이로 자세 판정
쓰는 브라우저 기술
getUserMediaCanvas 2DVibration API
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)pose_landmarker_lite.task (약 6MB)
바꿀 수 있는 옵션
- numPoses: 동시에 잡을 사람 수
- 모델 크기: lite·full·heavy
- minPoseDetectionConfidence
자주 막히는 곳
- 온몸이 화면에 들어오지 않으면 다리 지점이 엉뚱하게 잡힌다
- 어두운 곳이나 헐렁한 옷에서는 관절 위치가 흔들린다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 운동 자세 교정 코치
- 넘어짐 감지 돌봄 알림
웹 서비스
- 체육 수업 활동 기록
- 안전 교육 체험 부스
피지컬 AI
- 몸짓으로 로봇 따라 하게 하기
- 동작 인식 출입 버튼
넓히는 방법
- 재활 운동 동작 채점
- 줄넘기·팔 벌려 뛰기 세기
- 여러 명 동시 체육 수업
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe PoseLandmarker로 카메라 속 사람의 무릎 각도를 계산해서 스쿼트 횟수를 세는 웹페이지를 HTML 하나로 만들어줘. 모델은 ./libs/에서 먼저 찾게 해줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md