JavaScript screen object method

자바스크립트의 window.screen 객체는 사용자가 웹 페이지를 보고 있는 실제 기기(모니터, 스마트폰 화면 등)의 디스플레이 해상도와 크기, 색상 정보 등을 제공하는 객체입니다.

---

이 객체는 화면의 크기를 파악하여 팝업창을 모니터 정중앙에 배치하거나, 모바일 기기의 화면 방향(가로/세로 모드)을 감지하고 제어하는 데 주로 사용됩니다.

screen 객체는 주로 정보를 제공하는 프로퍼티 위주로 구성되어 있으며, 최신 명세에서는 화면 방향을 제어하는 하위 객체의 메소드가 중요하게 다뤄집니다.

이를 3가지 카테고리로 나누어 정리해 드리겠습니다.

---

---

1. 화면 방향 제어 메소드 (Screen Orientation API)

모바일 기기나 태블릿 환경에서 웹 화면을 강제로 가로 모드나 세로 모드로 고정할 때 사용하는 강력한 메소드입니다.

이 기능은 screen.orientation 하위 객체를 통해 작동합니다.

• screen.orientation.lock(orientationType): 화면 방향 고정
  • 화면을 특정 방향으로 고정합니다. (인자로 "portrait"(세로), "landscape"(가로) 등을 받습니다.)
  • 보안 제한: 유저의 오용을 막기 위해, 반드시 전체 화면 모드(Element.requestFullscreen()) 상태에서만 작동하도록 제한되어 있습니다.
• screen.orientation.unlock(): 화면 고정 해제
  • lock()으로 설정한 화면 고정을 해제하고, 다시 기기의 물리적인 회전 센서에 맞게 화면이 움직이도록 되돌립니다.

// 화면을 가로 모드로 강제 고정하는 예시 (모바일 게임, 영상 플레이어 등)
const startFullScreenGame = async () => {
  try {
    // 1. 먼저 전체 화면 모드로 진입해야 합니다.
    await document.documentElement.requestFullscreen();
    
    // 2. 화면을 가로 방향으로 고정합니다.
    await screen.orientation.lock("landscape");
    console.log("가로 모드로 고정되었습니다.");
  } catch (err) {
    console.error("화면 고정 실패:", err);
  }
};

---

---

2. 모니터 해상도 측정 (핵심 프로퍼티)

메소드는 아니지만, 실무에서 screen 객체를 쓰는 이유의 90%를 차지하는 필수 속성들입니다.

• screen.width / screen.height:
• 모니터의 전체 해상도 가로/세로 크기 (픽셀 단위)입니다.
• screen.availWidth / screen.availHeight:
• 실제 웹 브라우저가 사용 가능한 해상도 크기입니다. 윈도우의 작업 표시줄(Taskbar)이나 맥(Mac)의 독(Dock) 영역처럼 시스템이 차지하는 공간을 제외한 실제 내부 크기를 알려줍니다.

// 사용자의 모니터 중앙에 딱 맞는 팝업창 띄우기
const openCenteredPopup = (url, w, h) => {
  // 화면 전체 크기에서 팝업창 크기를 뺀 후 반으로 나누어 중앙 좌표 계산
  const left = (screen.availWidth - w) / 2;
  const top = (screen.availHeight - h) / 2;
  
  window.open(url, '_blank', `width=${w}, height=${h}, top=${top}, left=${left}`);
};

// 500x500 크기의 팝업을 모니터 정중앙에 호출
openCenteredPopup('https://example.com', 500, 500);

---

---

3. 디스플레이 색상 정보 (프로퍼티)

사용자의 모니터가 색상을 얼마나 정교하게 표현할 수 있는지 확인할 때 사용합니다.

• screen.colorDepth: 화면의 컬러 비트 수(색상 깊이)를 반환합니다. (현대의 대부분의 모니터는 24 또는 32비트를 반환합니다.)
• screen.pixelDepth: 현대 브라우저에서는 colorDepth와 동일한 값을 가집니다.

console.log(`이 모니터의 색상 표현 능력: ${screen.colorDepth}비트`); 
// 출력 예시: "이 모니터의 색상 표현 능력: 24비트"

📋 screen 객체 주요 기능 요약표

종류	이름	기능 및 역할	실무 활용도
메소드	orientation.lock()	화면 방향(가로/세로) 강제 고정	모바일 게임 / 웹 앱
메소드	orientation.unlock()	화면 방향 고정 해제	원래 센서 상태로 복귀
프로퍼티	width / height	모니터 전체 물리적 해상도 크기 반환	하드웨어 스펙 확인
프로퍼티	availWidth / availHeight	작업표시줄 등을 제외한 실제 가용 화면 크기 반환	정중앙 팝업창 생성 시 필수

---

---

학습 정리

• 사용자의 모니터 크기를 알기 위해 **window.screen**을 사용하지만, 현재 열려 있는 '웹 브라우저 창' 내부의 크기를 알고 싶을 때는 screen이 아니라 **window.innerWidth / window.innerHeight**를 사용해야 정확합니다.
• 웹 디자인이나 레이아웃 분기 처리를 할 때는 자바스크립트의 screen 객체보다 CSS의 **미디어 쿼리(@media)**를 사용하는 것이 웹 표준과 반응형 대응에 훨씬 유리합니다.

 

하드웨어 화면 정보를 담고 있는 screen 객체까지 완벽히 학습하셨습니다!

---