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 키가 그 중 하나입니다.

앱에 전체 화면 모드가 있는 경우 전체 화면을 요청할 때 Escape 키를 캡처하여 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를 눌러 모든 게임 내 대화상자를 취소할 수 있습니다.

보너스 북마크

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