Keyboard Lock API를 사용한 향상된 전체 화면 모드

Keyboard Lock API를 사용하여 전체 화면 모드에서 Esc 키를 캡처하세요.

Thomas Steiner

전체 화면 웹 게임을 플레이하다가 갑자기 Esc 키를 눌러 취소한 게임 내 대화상자가 표시되면 전체 화면 모드가 종료됩니다. 이러한 문제는 Esc 키에 대해 대화상자와 전체 화면 모드가 '싸움'하기 때문에 발생합니다. 기본적으로 전체 화면 모드가 항상 승리하므로 이는 불평등한 싸움입니다. 하지만 어떻게 하면 대화상자를 Esc 키의 승자가 되게 할 수 있을까요? 이때 Keyboard Lock API가 유용합니다.

브라우저 지원

Keyboard Lock API 사용

Keyboard Lock API는 navigator.keyboard.에서 사용할 수 있습니다. Keyboard 인터페이스의 lock() 메서드는 실제 키보드의 일부 또는 모든 키 누름의 캡처를 사용 설정한 후 프로미스를 반환합니다. 이 메서드는 기본 운영체제에서 액세스 권한을 부여한 키만 캡처할 수 있습니다. 다행히 Esc 키가 그중 하나입니다.

앱에 전체 화면 모드가 있는 경우 전체 화면을 요청할 때 Esc 키를 캡처하여 점진적으로 Keyboard Lock API를 사용하세요. Keyboard 인터페이스의 unlock() 메서드를 사용하여 전체 화면 모드를 종료할 때 키보드를 잠금 해제합니다(더 이상 캡처하지 않음).

// Feature detection.
const supportsKeyboardLock =
    ('keyboard' in navigator) && ('lock' in navigator.keyboard);

if (supportsKeyboardLock) {
  document.addEventListener('fullscreenchange', async () => {
    if (document.fullscreenElement) {
      // The magic happens here… 🦄
      await navigator.keyboard.lock(['Escape']);
      console.log('Keyboard locked.');
      return;
    }
    navigator.keyboard.unlock();
    console.log('Keyboard unlocked.');
  });
}

즉, 사용자가 전체 화면 모드에 있을 때 Esc를 누르면 기본적으로 대화상자가 취소됩니다. 사용자가 Esc 키를 길게 눌러도 전체 화면 모드를 종료할 수 있습니다. 두 기술의 장점을 모두 활용할 수 있습니다.

데모

데모에서 기본 변형과 점진적으로 향상된 변형을 모두 테스트할 수 있습니다. 데모의 소스 코드는 두 동작을 모두 표시해야 하므로 이전 스니펫보다 덜 깔끔합니다.

실제 사례

실제로 이러한 점진적인 개선을 사용하려면 이전 스니펫을 복사하면 됩니다. 기존 전체 화면 코드를 사용하더라도 변경 없이 작동하도록 설계되었습니다. 예를 들어 Freeciv 게임의 PR을 참조하세요. PR이 병합되면 Esc를 눌러 모든 인게임 대화상자를 취소할 수 있습니다.

보너스 북마크

전체 화면 모드를 지원하는 모든 앱이나 게임이 오픈소스로 제공되거나 패치를 허용하는 것은 아닙니다. 다음 bookmarklet을 북마크바에 추가하고 클릭하여 더 나은 전체 화면 모드를 사용 설정할 수 있습니다.