이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Keyboard Lock API로 키 캡처

대화형 웹사이트, 게임, 원격 데스크톱 또는 애플리케이션 스트리밍 등 다양한 사용 사례를 위한 몰입도 높은 전체 화면 환경을 제공합니다.

Thomas Steiner

점점 더 많은 사용자가 브라우저에서 대부분의 시간을 보내는 가운데, 풍부한 대화형 웹사이트, 게임, 원격 데스크톱 스트리밍, 애플리케이션 스트리밍은 몰입도 높은 전체 화면 환경을 제공하기 위해 노력하고 있습니다. 이를 위해 사이트는 전체 화면 모드에 있는 동안 탐색, 메뉴 또는 게임에 사용할 수 있도록 특수 키와 단축키에 액세스할 수 있어야 합니다. 필요할 수 있는 키의 예로는 Esc, Alt + Tab, Cmd + `, Ctrl + N이 있습니다.

기본적으로 이러한 키는 브라우저 또는 기본 운영 체제에서 캡처하기 때문에 웹 애플리케이션에서 사용할 수 없습니다. Keyboard Lock API를 사용하면 웹사이트에서 호스트 OS에서 허용하는 사용 가능한 모든 키를 사용할 수 있습니다 (브라우저 호환성 참고).

Ubuntu Linux가 macOS Chrome의 브라우저 탭으로 스트리밍됨 (아직 전체 화면 모드로 실행되지 않음) — </ph> 문제는 스트리밍된 Ubuntu Linux 원격 데스크톱이 전체 화면 모드에서 실행되지 않고 활성화된 키보드 잠금 없이 따라서 macOS 호스트 운영체제에서 시스템 키를 계속 캡처하며, 경험은 아직 몰입형이 *아닙니다*.

Keyboard Lock API 사용

Keyboard API의 Keyboard 인터페이스는 실제 키보드에서 키 누름의 캡처를 전환하고 사용자의 키보드 레이아웃에 관한 정보를 가져오는 함수를 제공합니다.

기본 요건

최신 브라우저에서 사용할 수 있는 전체 화면 유형에는 두 가지가 있습니다. Fullscreen API를 통해 자바스크립트로 시작하는 경우와 단축키를 통해 사용자가 시작하는 경우의 두 가지 유형이 있습니다. Keyboard Lock API는 JavaScript에서 시작된 전체 화면이 활성 상태인 경우에만 사용할 수 있습니다. 다음은 자바스크립트로 시작된 전체 화면의 예입니다.

await document.documentElement.requestFullscreen();

특성 감지

다음 패턴을 사용하여 Keyboard Lock API가 지원되는지 확인할 수 있습니다.

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

키보드 잠금

Keyboard 인터페이스의 lock() 메서드는 실제 키보드의 일부 또는 모든 키의 키 누름 캡처를 사용 설정한 후 프로미스를 반환합니다. 이 메서드는 기본 운영체제에서 액세스 권한을 부여한 키만 캡처할 수 있습니다. lock() 메서드는 하나 이상의 키 코드 배열을 사용하여 잠급니다. 키 코드를 제공하지 않으면 모든 키가 잠깁니다. 유효한 키 코드 값 목록은 UI 이벤트 KeyboardEvent 코드 값 사양에서 확인할 수 있습니다.

모든 키 캡처

다음 예에서는 모든 키 누름을 캡처합니다.

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가 검토했습니다. 키보드 잠금 사양은 게리 Kacmarcik 및 제이미 월치가 작성했습니다. 히어로 이미지: 켄 수아레즈(Unsplash)