대화형 웹사이트, 게임, 원격 데스크톱 또는 애플리케이션 스트리밍을 포함한 다양한 사용 사례에 몰입도 높은 전체 화면 환경을 제공합니다.
점점 더 많은 사용자가 브라우저에서 대부분의 시간을 보내게 되면서 풍부한 대화형 웹사이트, 게임, 원격 데스크톱 스트리밍, 애플리케이션 스트리밍이 몰입도 높은 전체 화면 환경을 제공하기 위해 노력하고 있습니다. 이를 위해 사이트에서는 전체 화면 모드에 있는 동안 특수 키와 단축키에 액세스하여 탐색, 메뉴 또는 게임에 사용할 수 있어야 합니다. Esc, Alt + Tab, Cmd + `, Ctrl + N이 필요할 수 있습니다.
기본적으로 이러한 키는 브라우저 또는 기본 운영체제에서 캡처하기 때문에 웹 애플리케이션에서 사용할 수 없습니다. Keyboard Lock API를 사용하면 웹사이트에서 호스트 OS에서 허용하는 모든 사용 가능한 키를 사용할 수 있습니다 (브라우저 호환성 참고).
Keyboard Lock API 사용
Keyboard API의 Keyboard 인터페이스는 실제 키보드에서의 키 누름 캡처를 전환하는 기능과 사용자의 키보드 레이아웃에 관한 정보를 가져오는 기능을 제공합니다.
기본 요건
최신 브라우저에서는 두 가지 유형의 전체화면을 사용할 수 있습니다. 하나는 Fullscreen API를 통해 자바스크립트로 시작되는 것이고 다른 하나는 단축키를 통해 사용자가 시작하는 것입니다. Keyboard Lock API는 자바스크립트로 시작된 전체 화면이 활성화된 경우에만 사용할 수 있습니다. 다음은 자바스크립트로 시작된 전체 화면의 예입니다.
await document.documentElement.requestFullscreen();
기능 감지
다음 패턴을 사용하여 Keyboard Lock API가 지원되는지 확인할 수 있습니다.
if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
// Supported!
}
키보드 잠금
Keyboard 인터페이스의 lock() 메서드는 물리적 키보드의 일부 또는 전체 키의 키 누름 캡처를 사용 설정한 후 프로미스를 반환합니다. 이 방법은 기본 운영체제에서 액세스 권한을 부여한 키만 캡처할 수 있습니다. lock() 메서드는 하나 이상의 키 코드 배열을 사용하여 잠급니다. 키 코드를 입력하지 않으면 모든 키가 잠깁니다. 유효한 키 코드 값 목록은 UI Events KeyboardEvent code Values 사양에서 확인할 수 있습니다.
모든 키 캡처
다음 예는 모든 키 누름을 캡처합니다.
navigator.keyboard.lock();
특정 키 캡처
다음 예에서는 W, A, S, D 키를 캡처합니다. 키 누름에 사용되는 특수키와 관계없이 이러한 키를 캡처합니다. 미국 QWERTY 레이아웃을 가정하고 "KeyW"를 등록하면 W, Shift + W, Control + W, Control + Shift + W, 기타 모든 키 수정자 조합이 W로 전송됩니다. "KeyA", "KeyS", "KeyD"에도 동일하게 적용됩니다.
await navigator.keyboard.lock([
"KeyW",
"KeyA",
"KeyS",
"KeyD",
]);
키보드 이벤트를 사용하여 캡처된 키 누름에 응답할 수 있습니다.
예를 들어 다음 코드는 onkeydown 이벤트를 사용합니다.
document.addEventListener('keydown', (event) => {
if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
// Do something when the 'A' key was pressed, but only
// when not in combination with the command or control key.
}
});
키보드 잠금 해제
unlock() 메서드는 lock() 메서드에서 캡처한 모든 키를 잠금 해제하고 동기식으로 반환합니다.
navigator.keyboard.unlock();
문서가 닫혀 있으면 브라우저는 항상 암시적으로 unlock()를 호출합니다.
데모
Glitch에서 데모를 실행하여 Keyboard Lock API를 테스트할 수 있습니다. 소스 코드를 확인하세요. 아래의 전체 화면으로 전환 버튼을 클릭하면 데모가 새 창에서 시작되어 전체 화면 모드로 전환할 수 있습니다.
보안 고려사항
이 API의 한 가지 문제는 모든 키를 가져오고 Fullscreen API 및 PointerLock API와 함께 사용자가 웹페이지를 종료하는 것을 방지하는 데 사용될 수 있다는 점입니다. 이를 방지하기 위해, 사양에서는 API에서 모든 키를 요청하더라도 브라우저에서 사용자가 키보드 잠금을 종료할 수 있는 방법을 제공하도록 요구합니다. Chrome에서 이 이스케이프 해치는 긴 (2초) Esc 키 누름으로 키보드 잠금에서 종료를 실행합니다.
유용한 링크
감사의 말
Joe Medley 및 Kayce Basques가 작성한 도움말입니다. 키보드 잠금 사양은 게리 카크마르식과 제이미 월치가 작성했습니다. Unsplash에 Ken Suarez의 히어로 이미지입니다.