GestureRecognizer
손 모양 리모컨
해결하는 문제
발표 중에 클리커 없이 손짓으로 화면을 넘기고 싶다.
주먹, 손바닥, 브이, 엄지 위·아래 같은 손 모양을 이름으로 알아보고, 0.6초 유지하면 슬라이드를 넘깁니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상
브라우저가 하는 일손 관절을 찾고 7가지 손 모양 중 하나로 분류
나오는 것손 모양 이름과 확신도, 슬라이드 명령
쓰는 브라우저 기술
getUserMediaCanvas 2D
라이브러리와 모델
MediaPipe Tasks (로컬 우선 로딩)gesture_recognizer.task (약 8MB)
바꿀 수 있는 옵션
- numHands
- 유지 시간 (잘못 넘김 방지)
- 손 모양별 명령 연결
자주 막히는 곳
- 손바닥과 손등 방향에 따라 인식률이 달라진다
- 유지 시간 없이 바로 실행하면 지나가는 손 모양에도 반응한다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 손짓 명령 비서
웹 서비스
- 발표 리모컨
- 만지지 않는 키오스크
피지컬 AI
- 손 모양으로 조명·모터 제어
넓히는 방법
- MediaPipe Model Maker로 우리만의 손 모양 학습
- 수어 단어 일부 인식
- 엄지 투표 집계
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
MediaPipe GestureRecognizer로 엄지 위는 다음 슬라이드, 엄지 아래는 이전 슬라이드로 넘기는 발표 화면을 만들어줘. 같은 손 모양을 0.6초 유지해야 실행되게 해줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md