Screen API

Screen API란?

현재 창(window)이 렌더링되고 있는 화면(스크린 전체)의 정보를 담고 있는 인터페이스이다.

콘솔 창에 window.screen(혹은 그냥 screen)을 입력하면 다음과 같은 형태를 볼 수 있다.

2024년 11월 기준으로 대부분(96.92%)의 브라우저를 지원한다.

Screen API | Can I use... Support tables for HTML5, CSS3, etc

특징

너비(width)와 높이(height) 외에도, 화면의 실질적인 너비(availWidth)와 높이(availHeight)를 알 수 있다.

물론 window.innerWidth와 window.innerHeight로도 화면의 너비와 높이를 알 수 있지만, 브라우저 내 화면 영역의 크기를 보여주는 것에 더 가깝다. 따라서 브라우저를 확대하거나 축소했을 때 영향을 받는다.

• 확대 전 (100%)
  
• 확대 후 (250%)

반면 screen.width, screen.height는 브라우저를 포함한 화면 전체의 너비와 높이를 알려준다. 즉, 해상도를 의미한다. 그리고 screen.availWidth와 screen.availHeight는 화면에 실질적으로 보이는 영역의 크기를 알려준다. 즉, 작업 표시줄을 제외한 영역이다.

• 확대 전 (100%)
  
• 확대 후 (250%)
  • 윈도우에서 작업 표시줄의 높이는 48px이다. (100% 배율 기준)
  • 맥에서는 상단 메뉴 바와 하단 Dock을 제외한 영역이 되겠다.

어떻게 활용되는가?

태블릿과 같은 디바이스에서 전체 화면으로 보여줘야 하는 웹앱(웹뷰) 콘텐츠, 게임에서 사용할 수 있다. 그리고 브라우저 화면 배율을 조정한 상태에서도 항상 같은 크기의 화면을 유지하기 위해 Screen API를 사용할 수 있다.

필자는 Phaser를 사용한 실무 프로젝트에서 게임 화면 배율을 디바이스에 최적화하는 데 사용했다.

• 게임의 그래픽 옵션을 상/중/하로 설정할 수 있는데, 옵션에 따라 화면 배율을 각각 1배, 2배, 2.5배씩 설정하는 방식이다. 화면 배율이 클 수록 그래픽 품질은 떨어지지만, 퍼포먼스는 더 좋아진다.
• 높이가 게임의 최대 높이인 1080px보다 낮으면, 1080px에서 Screen API의 availHeight를 나눈 값과 현재 배율 값을 비교하여 더 큰 값을 선택하는 방식으로 최적화를 시도했다.
  • ex: 그래픽 레벨이 상(1배율)이고 태블릿 화면 높이가 768일 경우 ⇒ 1080 / 768 ≒ 1.4 ⇒ 1 < 1.4이므로, 1.4배율로 화면 최적화
    
• 이렇게 하면 태블릿과 같은 디바이스에서 게임 화면이 좀 더 부드럽게 보이며, 성능도 소폭 향상되는 효과를 볼 수 있다.
• availHeight를 사용한 이유는 디스플레이 전체보다는 브라우저 뷰포트 기준으로 배율을 구하는 게 좀 더 최적화된 배율을 계산할 수 있기 때문이다.
  

출처

Screen - Web APIs | MDN