HandLandmarker
손으로 불씨 옮기기
해결하는 문제
화면을 만지지 않고 손짓만으로 웹을 조작하고 싶은데, 손 인식은 전문 장비나 앱이 있어야 한다고 생각한다.
카메라 영상에서 손가락 관절 21개를 실시간으로 찾아 집기와 누르기 동작을 판정합니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것카메라 영상 프레임
브라우저가 하는 일손마다 관절 21개의 x·y·z 좌표와 왼손·오른손 구분 계산
나오는 것엄지와 검지 거리로 집기, 검지 끝 위치로 누르기 판정
쓰는 브라우저 기술
getUserMediaCanvas 2DrequestAnimationFrameWeb Audio
라이브러리와 모델
MediaPipe Tasks Visionhand_landmarker.task 모델 (약 8MB)
바꿀 수 있는 옵션
- numHands: 동시에 찾을 손 개수
- runningMode: 사진(IMAGE) 또는 영상(VIDEO)
- minHandDetectionConfidence: 손으로 인정할 최소 확신도
- delegate: GPU 또는 CPU로 실행
자주 막히는 곳
- 파일을 더블클릭해서 열면 모델 파일을 못 읽는다 (로컬 서버나 HTTPS 필요)
- 손이 화면 밖으로 반쯤 나가면 관절 위치가 튄다
- 좌우 반전(거울 모드)을 좌표에 반영하지 않아 손과 표시가 반대로 움직인다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 수어 단어 학습 도우미
- 손 재활 운동 횟수와 관절 가동 범위 기록
웹 서비스
- 손짓으로 넘기는 발표 리모컨
- 만지지 않는 키오스크 메뉴
피지컬 AI
- 손 모양으로 로봇팔·서보모터 조종 (Web Serial로 ESP32에 전달)
- 손짓으로 스마트 조명 색 바꾸기
넓히는 방법
- Gesture Recognizer로 주먹, 브이, 엄지 같은 손 모양 이름 받기
- z 좌표로 화면 쪽으로 미는 동작 감지
- 양손 사이 거리로 확대·축소 제스처
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
카메라로 내 손의 관절 21개를 MediaPipe HandLandmarker로 추적해서, 엄지와 검지를 붙이면 화면의 공을 집어 옮길 수 있는 웹페이지를 HTML 파일 하나로 만들어줘.
같은 분류의 능력
04 브라우저 속 AI에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md