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

키보드 잠금 API를 사용하여 전체 화면 모드에서 Esc 키를 캡처합니다.

Thomas Steiner

전체 화면 웹 게임을 플레이한 적이 있다면 게임 내 대화상자가 표시될 때 Esc 키로 본능적으로 취소한 적이 있을 것입니다. 이 경우 전체 화면 모드가 종료됩니다. 이러한 불편한 환경은 대화상자와 전체 화면 모드가 Escape 키를 두고 '다투기' 때문에 발생합니다. 기본적으로 전체 화면 모드가 항상 우선하므로 불균형한 싸움입니다. 하지만 Escape 키에 대해 대화상자가 우선하도록 하려면 어떻게 해야 할까요? 이때 키보드 잠금 API가 사용됩니다.

브라우저 지원

키보드 잠금 API 사용

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

앱에 전체 화면 모드가 있는 경우 전체 화면을 요청할 때 Escape 키를 캡처하여 키보드 잠금 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.');
  });
}

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

데모

데모에서 기본 변형과 점진적으로 개선된 변형을 모두 테스트할 수 있습니다. 데모의 소스 코드는 두 동작을 모두 보여줘야 하므로 이전 스니펫보다 깔끔하지 않습니다.

실제

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

보너스 북마크릿

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