WebHID
USB 기기 직접 다루기 (WebUSB·WebHID)
해결하는 문제
특수 키보드, 페달, 버튼 같은 USB 기기를 웹에서 쓰고 싶다.
WebHID와 WebUSB로 키보드·게임 컨트롤러 같은 입력 장치나 USB 기기와 브라우저가 직접 신호를 주고받습니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것USB 기기 신호
브라우저가 하는 일장치 보고서(report)를 읽고 쓰기
나오는 것버튼 입력, 장치 제어
쓰는 브라우저 기술
WebHIDWebUSB
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 장치 필터 (제조사·제품 번호)
- 보고서 형식
자주 막히는 곳
- 크롬 계열 PC에서만 된다
- 운영체제가 이미 쓰는 장치는 접근이 막힌다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 장치 신호 패턴 학습
웹 서비스
- 접근성 입력 장치 설정 도구
피지컬 AI
- USB 릴레이·LED 제어
넓히는 방법
- 발표용 페달·버튼 입력
- 특수 장비 설정 화면
지원 브라우저
PC 크롬·엣지된다
맥 사파리안 된다
안드로이드 크롬안 된다
아이폰 사파리안 된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
WebHID로 연결한 USB 버튼을 누르면 웹페이지의 슬라이드가 넘어가게 만들어줘.
같은 분류의 능력
11 기기·센서에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md