웹상의 휴먼 인터페이스 장치: 몇 가지 간단한 예

앱에서 일반적이지 않은 기기에 연결

조 메들리
조 메들리
맷 레이놀즈
맷 레이놀즈

WebHID API란 무엇인가요?

많은 인간 인터페이스 기기 (HID)는 너무 신형이거나, 너무 오래되었거나, 너무 흔하여 시스템의 기기 드라이버에서 액세스할 수 없습니다. WebHID API는 JavaScript에서 기기별 로직을 구현하는 방법을 제공하여 이 문제를 해결합니다.

WebHID API 추천 사용 사례

HID는 인간의 입력을 받거나 사람에게 출력을 제공합니다. 기기의 예로는 키보드, 포인팅 기기 (마우스, 터치스크린 등), 게임패드가 있습니다. HID 프로토콜을 사용하면 운영체제 드라이버를 사용하여 데스크톱 컴퓨터에서 이러한 기기에 액세스할 수 있습니다. 웹 플랫폼은 이러한 드라이버를 사용하여 HID를 지원합니다.

일반적이지 않은 HID 기기에 액세스할 수 없다는 것은 게임패드 지원과 관련하여 특히 문제가 됩니다. PC용으로 설계된 게임패드는 게임패드 입력 (버튼, 조이스틱, 트리거) 및 출력 (LED, 럼블)에 HID를 사용하는 경우가 많습니다. 그러나 게임패드 입력과 출력은 잘 표준화되어 있지 않으며 웹브라우저에는 특정 기기의 맞춤 로직이 필요한 경우가 많습니다. 이는 지속 가능하지 않으며 구형 기기와 일반적이지 않은 기기의 롱테일 지원 부족으로 이어집니다. 또한 브라우저가 특정 기기의 동작에 있는 특이사항에 종속됩니다.

데모

샘플의 작동 방식이 궁금한 경우 GitHub에서 모든 샘플의 소스 코드를 확인할 수 있습니다. 이 설명에서 기본 코드의 예를 확인할 수 있습니다.

MacBook Pro 키보드 백라이트

이러한 데모를 시도하는 데 가장 큰 장애물은 기기에 액세스할 수 없다는 것입니다. 다행히 TouchBar가 있는 MacBook Pro를 사용하는 경우 아무것도 구매할 필요가 없습니다. 이 데모를 사용하면 노트북에서 바로 API를 사용할 수 있습니다. 또한 WebHID를 사용하여 주변기기뿐 아니라 내장 기기의 기능을 잠금 해제하는 방법도 보여줍니다.

작성자: FWeinb
데모/출처: Keyboard Backlight

게임 컨트롤러

PlayStation 4 무선 컨트롤러

다음 단계는 여러분이 가질 수 있는 기회입니다. Sony의 DualShock 4는 PlayStation 4 게임 콘솔용 무선 컨트롤러입니다.

DualShock 4 데모는 WebHID를 사용하여 DualShock 4에서 원시 입력 보고서를 수신하며 컨트롤러의 자이로스코프, 가속도계, 터치패드, 버튼 및 섬스틱 입력에 액세스할 수 있는 상위 수준 API를 제공합니다. 또한 컨트롤러 내에 있는 RGB LED의 럼블(RGB) 색상 설정도 지원합니다.

작성자: TheBITLINK
데모: DualShock 4 Demo (출처)

Nintendo Switch Joy-Con 컨트롤러

바지 주머니에 Nintendo Switch Joy-Con 컨트롤러를 들고 실제로 점프하며 Chrome 공룡 🦖 오프라인 게임을 플레이하세요. 이 데모는 Nintendo Switch Joy-Con 컨트롤러용 WebHID 드라이버인 Joy-Con WebHID를 기반으로 합니다.

작성자: 토마스 슈타이너
데모: Chrome Dino WebHID (데모 소스, 드라이버 소스)

블링크스틱 스트립

BlinkStick Strip은 8개의 RGB LED로 구성된 HID 호환 조명 스트립입니다. 데모를 사용하면 사용자가 체이스, 블링크, Lason 스캐너 (Cylon이라고도 함) 등 여러 깜박임 패턴 중에서 선택할 수 있습니다.

작성자: 로뱃 윌리엄스
데모: blinkstick-strip (출처)

이 데모는 어떤 기능을 하나요? 잠시만 기다려 주세요. 깜박입니다. 세 개의 데모가 깜빡이는(1) USB 알림등을 사용합니다

blink(1)는 간단하고 문서화가 잘 되어 있으므로 HID를 시작하는 데 매우 유용합니다.

작성자: 토드 E. Kurt
데모: blink(1) (출처)

감사의 말씀

이 기사에 대한 리뷰를 제공해 주신 피트 레페이지케이스 바스크님에게 감사드립니다.

사진: 우구르 아크데미르(Unsplash 제공)