윈도우 관리

1. 소개

이 절은 비규범적입니다.

운영 체제는 일반적으로 사용자가 여러 화면을 하나의 기기에 연결하고 전체 시각적 작업 공간을 확장하도록 가상으로 배치할 수 있게 합니다.

다양한 애플리케이션이 플랫폼 도구를 사용하여 이러한 다중 화면 환경에 콘텐츠를 배치하지만, 웹 애플리케이션 개발자는 일반적으로 단일 화면 사용을 중심으로 설계된 기존 API의 제약을 받습니다.

다중 화면 기기와 애플리케이션이 사용자 경험에서 더욱 일반적이고 중요한 부분이 됨에 따라, 웹 개발자가 확장된 시각적 환경을 활용할 수 있도록 정보와 도구를 제공하는 것이 더욱 중요해집니다.

이 명세는 Window, Screen, 및 FullscreenOptions API를 점진적으로 확장하고 새로운 ScreenDetails 및 ScreenDetailed 인터페이스를 도입합니다. 이러한 변경을 통해 웹 애플리케이션은 특정 화면에 콘텐츠를 배치하여 매력적인 다중 화면 환경을 제공할 수 있습니다.

1.1. 동기를 부여하는 사용 사례

이 명세의 목적은 여러 화면을 사용하는 웹 애플리케이션 사용자에게 더 나은 경험을 제공하는 것입니다. 다음은 설계에 반영된 몇 가지 사용 사례입니다.

• 슬라이드쇼 앱은 프로젝터에 프레젠테이션을 표시하고 노트북 화면에는 발표자 노트를 표시합니다.

• 금융 앱은 여러 모니터에 걸쳐 여러 창으로 구성된 대시보드를 엽니다.

• 의료 앱은 고해상도 회색조 디스플레이에 이미지(예: 엑스레이)를 엽니다.

• 창작 앱은 별도의 화면에 보조 창(예: 팔레트)을 표시합니다.

• 회의실 앱은 터치스크린 기기에 제어 기능을 표시하고 TV에는 비디오를 표시합니다.

• 게임, 사이니지, 예술 및 기타 유형의 앱에서 다중 화면 레이아웃을 사용합니다.

• 창이 여러 화면에 걸쳐 있을 때 사이트가 콘텐츠와 레이아웃을 최적화합니다.

1.2. 사용 개요

다중 화면 환경을 지원하기 위해 API는 웹 애플리케이션이 다음을 수행할 수 있게 합니다.

1. 기기에 화면이 둘 이상 있는지 감지

2. 특정 화면에 콘텐츠를 배치하는 데 필요한 정보 요청

3. 화면이 추가되거나 제거되는 시점 감지

4. 현재 화면 또는 해당 화면의 속성이 변경되는 시점 감지

5. 특정 화면에 요소를 전체 화면으로 표시

6. 특정 화면에 창 배치

7. 한 번의 일시적 사용자 활성화로 다중 화면 환경 시작

// 기기에 화면이 둘 이상 있는지 감지합니다.
if (window.screen.isExtended) {
  // 특정 화면에 콘텐츠를 배치하는 데 필요한 정보를 요청합니다.
  const screenDetails = await window.getScreenDetails();

  // 화면이 추가되거나 제거되는 시점을 감지합니다.
  screenDetails.addEventListener('screenschange', onScreensChange);

  // 현재 \`ScreenDetailed\` 또는 해당 객체의 속성이 변경되는 시점을 감지합니다.
  screenDetails.addEventListener('currentscreenchange', onCurrentScreenChange);

  // 기본 화면을 찾아 일부 콘텐츠를 해당 화면에 전체 화면으로 표시합니다.
  const primaryScreen = screenDetails.screens.find(s => s.isPrimary);
  document.documentElement.requestFullscreen({screen : primaryScreen});

  // 다른 화면을 찾아 새 창으로 해당 화면의 사용 가능한 영역을 채웁니다.
  const otherScreen = screenDetails.screens.find(s => s !== primaryScreen);
  window.open(url, '_blank', \`left=${otherScreen.availLeft},\` +
                             \`top=${otherScreen.availTop},\` +
                             \`width=${otherScreen.availWidth},\` +
                             \`height=${otherScreen.availHeight}\`);
} else {
  // 기존 \`Screen\` 인터페이스의 속성이 변경되는 시점을 감지합니다.
  window.screen.addEventListener('change', onScreenChange);

  // 기존 단일 화면 환경 안에서 콘텐츠를 배치합니다...
}

1.2.1. 여러 화면의 존재 감지

다중 화면 환경을 지원할 때 중요한 질문은 콘텐츠를 배치하는 데 사용할 수 있는 화면이 기기에 여러 개 있는지 여부입니다. 이러한 화면은 기기에 내장되어 있을 수도 있고(노트북 디스플레이 패널처럼), 유선으로 기기에 연결되어 있을 수도 있으며(HDMI 케이블로 연결된 컴퓨터와 모니터처럼), 다른 방식으로 기기에 연결될 수도 있고(Mac과 iPad의 Sidecar 기능처럼), 디스플레이 기기 가상화를 통해 제공될 수도 있습니다. 이는 권한 프롬프트 없이 보안 컨텍스트에 노출되는 isExtended 불리언으로 제공됩니다.

if (screen.isExtended) {
  // 사용자에게 다중 화면 제어 기능을 제공합니다.
}

1.2.2. Screen 속성 변경 감지

기존 Screen 속성의 변경을 관찰하는 것은 단일 화면 기기에서도 콘텐츠를 조정하는 데 유용합니다. 또한 isExtended 를 관찰하면 단일 화면 구성과 다중 화면 구성 사이의 전환을 감지하는 데 유용합니다. 폴링을 방지하기 위해 change 이벤트가 Screen 객체에서 발생합니다.

screen.addEventListener('change', e => {
  // 기존 \`Screen\` 인터페이스의 속성이 변경되었습니다.
});

1.2.3. 자세한 화면 정보 요청

기기에서 사용하는 화면에 관한 자세한 정보는 getScreenDetails() 메서드를 통해 요청할 수 있습니다. 이 메서드는 사용자에게 권한을 요청할 수 있습니다. 결과로 생성되는 ScreenDetails 객체를 통해 개발자는 화면을 열거하고, 속성을 검사하고, 변경 사항을 수신할 수 있습니다.

try {
  // 화면 세부 정보를 요청하고 즉시 처리합니다.
  const screenDetails = await window.getScreenDetails();
  processScreenDetails(screenDetails);

  // 화면 집합이 변경될 때 갱신된 화면 세부 정보를 처리합니다.
  screenDetails.onscreenschange = () => {
    processScreenDetails(screenDetails);
  };
} catch (err) {
  console.error(err);
  // 거부된 권한과 기타 오류를 처리합니다.
}

function processScreenDetails(screenDetails) {
  // 가정된 도우미를 사용하여 화면을 나열하는 UI를 구성합니다.
  clearScreenList();
  screenDetails.screens.forEach(screen => {
    addToScreenList({name: screen.label, screen: screen});
    // 특정 화면의 세부 정보가 변경될 때 갱신된 화면 세부 정보를 처리합니다.
    screen.onchange = () => {
      processScreenDetails(screenDetails);
    };
  });
  selectCurrentInScreenList(screenDetails.currentScreen);
}

1.2.4. 특정 화면에 전체 화면 콘텐츠 배치

일반적인 다중 화면 사용 사례 중 하나는 일부 콘텐츠를 특정 화면에 전체 화면으로 표시하는 것입니다. 화면은 대화형으로 선택하거나 화면 속성 또는 이전 사용자의 선택에 따라 자동으로 선택할 수 있습니다. 화면을 선택한 후에는 해당 화면을 requestFullscreen() 메서드에 전달할 수 있습니다.

// 선택된 \`ScreenDetailed\` 인스턴스를 반환하는 가정된 도우미를 호출합니다.
const screenDetailed = getScreenForSlideshow();

// 특정 요소가 선택한 화면에 전체 화면으로 표시되도록 요청합니다.
slideshowElement.requestFullscreen({ screen: screenDetailed });

1.2.5. 특정 화면에 창 배치

또 다른 일반적인 다중 화면 사용 사례는 특정 화면에 창을 배치하는 것입니다. 이는 ScreenDetailed 인터페이스에서 제공하는 좌표를 기존 open() 및 moveTo() 메서드와 함께 사용하여 수행할 수 있습니다.

function openCenteredWindow(url, screenDetailed, w, h) {
  // 대상 화면의 중앙에 창을 배치하는 좌표를 계산합니다.
  const l = screenDetailed.left + Math.round(screenDetailed.width - w) / 2;
  const t = screenDetailed.top + Math.round(screenDetailed.height - h) / 2;

  // 요청한 크기로 창을 엽니다.
  return window.open(url, '_blank', \`left=${l},top=${t},width=${w},height=${h}\`);
}

1.2.6. 다중 화면 환경 시작

자주 요청되는 다중 화면 사용 사례 중 하나는 한 번의 사용자 활성화로 매력적인 다중 화면 환경을 시작하는 것입니다. 구체적으로 제안된 한 가지 형태는 한 번의 사용자 제스처를 통해 사이트가 § 1.2.4 특정 화면에 전체 화면 콘텐츠 배치와 § 1.2.5 특정 화면에 창 배치를 수행하도록 허용하는 것입니다. 이는 하나의 이벤트 리스너 안에서 먼저 다중 화면 기기의 특정 화면에 전체 화면 표시를 요청한 다음, 기기의 다른 화면에 팝업 창을 열어 수행할 수 있습니다.

initiateMultiScreenExperienceButton.addEventListener('click', async () => {
  // 기본 화면을 찾아 일부 콘텐츠를 해당 화면에 전체 화면으로 표시합니다.
  const primaryScreen = screenDetails.screens.find(s => s.isPrimary);
  await document.documentElement.requestFullscreen({screen : primaryScreen});

  // 다른 화면을 찾아 새 창으로 해당 화면의 사용 가능한 영역을 채웁니다.
  const otherScreen = screenDetails.screens.find(s => s !== primaryScreen);
  window.open(url, '_blank', \`left=${otherScreen.availLeft},\` +
                             \`top=${otherScreen.availTop},\` +
                             \`width=${otherScreen.availWidth},\` +
                             \`height=${otherScreen.availHeight}\`);
});

2. 개념

이 명세의 개념은 CSSOM-View-1 작업 초안, CSSOM-View-1 편집자 초안, [HTML] 및 [Fullscreen]의 개념을 기반으로 합니다.

2.1. 화면

사용자 에이전트를 호스팅하는 기기에는 시각적 콘텐츠를 표시하는 하나의 화면 또는 여러 화면이 있습니다. 사용자 에이전트가 실행되는 동안 기기에서 사용하는 화면 집합은 기기의 하드웨어 또는 소프트웨어 구성 변경을 반영하여 달라질 수 있습니다.

참고: 화면 구성 변경의 기본적인 예로는 HDMI 케이블로 TV 또는 프로젝터를 노트북에 연결하는 것, 노트북 덮개를 닫아 내장 LCD 패널을 비활성화하는 것, 연결된 LCD 컴퓨터 모니터의 디스플레이 해상도를 변경하는 것 등이 있습니다.

2.2. 화면 픽셀

2.3. 화면 영역

참고: 격자 크기는 일반적으로 <너비>×<높이>로 나타냅니다. 예를 들어 1920×1080 화면 영역에는 너비가 1920픽셀이고 높이가 1080픽셀인 격자가 있습니다.

참고: CSSOM View § 2.3 웹에 노출되는 화면 정보에 명시된 것처럼 사용자 에이전트는 사용자의 개인정보를 보호하기 위해 출력 기기의 화면에 관한 정보를 숨길 수 있습니다. 이 경우 화면 영역은 뷰포트의 영역과 같을 수 있습니다.

2.4. 사용 가능한 화면 영역

2.5. 가상 화면 배치

기기에는 기기의 전체 시각적 환경을 구성하는 화면들의 상대적 배치를 정의하는 가상 화면 배치가 있습니다. 이 배치는 일반적으로 모든 방향으로 확장되는 2차원 평면에 구성되며, (x, y) 좌표는 각각 다중 화면 원점에서 오른쪽과 아래쪽으로 갈수록 증가합니다. 다중 화면 원점은 가상 화면 배치의 (0, 0) 좌표를 정의하는 구현 정의 지점입니다.

일반적인 관례는 다중 화면 원점을 기본 화면의 왼쪽 위로 설정하는 것이지만, 가상 화면 배치 안의 임의의 지점으로 설정할 수 있습니다. 모든 화면의 화면 영역은 가상 화면 배치의 직사각형 하위 집합을 보여주는 뷰입니다.

이 다이어그램은 여러 화면을 가상 화면 배치 안에 배치할 수 있는 몇 가지 예와 가능한 다중 화면 원점을 보여줍니다.

참고: Second Screen Community Group의 폼 팩터 설명 초안 보고서는 관련 용어와 개념 모델을 살펴봅니다.

2.6. 화면 위치

화면에는 다중 화면 원점을 기준으로 한 가상 화면 배치 안의 화면 영역 (x, y) 좌표인 화면 위치가 있습니다. 좌표는 음수일 수 있으며 일반적으로 (x, y)로 나타냅니다.

2.7. 사용 가능한 화면 위치

화면에는 다중 화면 원점을 기준으로 한 가상 화면 배치 안의 사용 가능한 화면 영역 (x, y) 좌표인 사용 가능한 화면 위치가 있습니다. 좌표는 음수일 수 있으며 일반적으로 (x, y)로 나타냅니다.

2.8. 기본 화면

사용자 에이전트를 호스팅하는 기기에는 정확히 하나의 기본 화면이 있습니다. 다른 모든 화면은 보조 화면으로 간주됩니다.

참고: 기본 화면에는 일반적으로 Windows 작업 표시줄이나 macOS Dock과 같은 작업 관리를 위한 운영 체제 사용자 인터페이스가 표시됩니다.

화면이 기본 또는 보조 화면으로 지정되는 상태는 사용자 에이전트가 실행되는 동안 변경될 수 있습니다.

참고: 대부분의 운영 체제에서는 Windows 제어판이나 macOS 환경설정 애플리케이션과 같은 관리 사용자 인터페이스를 사용하여 사용자가 기본 화면을 선택할 수 있습니다.

2.9. 내부 화면

각 화면은 내부 또는 외부 화면으로 지정될 수 있습니다.

외부 화면은 시각적 출력을 제공하는 기기와 별도로 제조됩니다. 외부 화면을 한 기기에서 분리하여 다른 기기에 연결하는 것은 드문 일이 아닙니다.

참고: 예를 들어 데스크톱 컴퓨터는 HDMI 케이블로 연결된 외부 화면에 시각적 출력을 표시할 수 있습니다. 컴퓨터를 사용하는 동안 HDMI 케이블을 연결하거나 분리할 수 있으며 컴퓨터는 이러한 하드웨어 구성 변경에 맞추어 시각적 환경을 조정합니다.

내부 화면은 일반적으로 기기 제조 시점에 부착됩니다. 내부 화면은 사용자가 분리하도록 설계되지 않았습니다. 그러나 사용자 에이전트가 실행되는 동안에도 내부 화면을 활성화하거나 비활성화할 수 있습니다.

참고: 예를 들어 노트북은 덮개가 닫히면 내부 화면과 입력 기기를 비활성화할 수 있습니다. 이 구성에서도 노트북은 외부 화면 및 입력 기기와 함께 계속 사용할 수 있습니다. 비활성화된 내부 화면은 덮개가 닫혀 있는 동안 기기에서 사용하는 화면으로 보고할 수 없습니다.

2.10. 현재 화면

Window 컨텍스트에서 실행되는 스크립트는 screen 속성에 접근할 수 있습니다. 해당 Screen 객체는 현재 창을 표시하고 있는 화면인 현재 화면의 속성을 반영합니다.

참고: 많은 운영 체제에서 창은 서로 다른 속성을 가진 여러 화면에 걸쳐 표시될 수 있으며, 또는 "숨겨진" 상태로 어떤 화면에도 표시되지 않을 수 있습니다. 운영 체제와 사용자 에이전트는 주어진 Window 에 대한 표준 화면을 정의한다고 가정합니다. 예를 들어 창과 교차하는 영역이 가장 큰 화면을 사용할 수 있습니다.

2.11. 관찰 가능한 화면 속성

화면의 기본 관찰 가능 속성은 다음과 같습니다.

• 화면 영역의 너비와 높이

• 사용 가능한 화면 영역의 사용 가능한 너비와 사용 가능한 높이

• 색상 깊이

• 방향

화면의 고급 관찰 가능 속성은 다음과 같습니다.

• 화면 위치

• 사용 가능한 화면 위치

• 기기 픽셀 비율

• 레이블

• 화면이 기본 또는 보조 화면으로 지정된 상태

• 화면이 내부 또는 외부 화면으로 지정된 상태

2.12. 창 표시 상태

최상위 브라우징 컨텍스트에는 다음 중 하나일 수 있는 연관된 표시 상태가 있습니다.

정상

창이 정상 상태입니다(최소화, 최대화 또는 전체 화면 상태가 아님).

최소화됨

창이 최소화되어 있습니다.

최대화됨

창이 최대화되어 있습니다.

전체 화면

창이 전체 화면 모드입니다.

3. API

3.1. Screen 인터페이스 확장

CSSOM View Module 명세는 이 명세에서 확장하는 Screen 인터페이스를 정의합니다.

partial interface Screen /* : EventTarget */ {
  [SecureContext]
  readonly attribute boolean isExtended;

  [SecureContext]
  attribute EventHandler onchange;
};

CSSOM View § 4.3 Screen 인터페이스에서 Screen 이 EventTarget 을 상속하도록 합니다.

3.1.1. isExtended 속성

3.1.2. onchange 속성

onchange 속성은 이벤트 처리기 IDL 속성이며, 해당 이벤트 처리기 이벤트 유형은 change입니다.

Window window의 현재 화면에서 기본 관찰 가능 속성 중 하나가 변경되면, 창 배치 작업 소스를 사용하여 window의 관련 전역 객체에 전역 작업을 큐에 추가하고, window의 screen 속성이 참조하는 Screen 객체에서 change라는 이벤트를 발생시킵니다.

3.2. Window 인터페이스 확장

[HTML] 표준은 이 명세에서 확장하는 Window 인터페이스를 정의합니다.

partial interface Window {
  [SecureContext]
  Promise<ScreenDetails> getScreenDetails();

  [SecureContext]
  Promise<undefined> minimize();

  [SecureContext]
  Promise<undefined> maximize();

  [SecureContext]
  Promise<undefined> restore();

  [SecureContext]
  Promise<undefined> setResizable(boolean resizable);
};

3.2.1. getScreenDetails() 메서드

getScreenDetails() 메서드는 비동기적으로 완료되며 창 배치 작업 소스에 작업을 큐에 추가합니다.

Window 인스턴스는 초기 값이 undefined인 [[screenDetails]]라는 내부 슬롯과 함께 생성됩니다.

3.2.2. 알고리즘: 창 표시 상태 변경 요청

3.2.3. minimize() 메서드

minimize() 메서드는 비동기적으로 완료되며 창 배치 작업 소스에 작업을 큐에 추가합니다.

3.2.4. maximize() 메서드

maximize() 메서드는 비동기적으로 완료되며 창 배치 작업 소스에 작업을 큐에 추가합니다.

3.2.5. restore() 메서드

restore() 메서드는 비동기적으로 완료되며 창 배치 작업 소스에 작업을 큐에 추가합니다.

3.2.6. setResizable() 메서드

setResizable() 메서드는 비동기적으로 완료되며 창 배치 작업 소스에 작업을 큐에 추가합니다.

3.2.7. Window 속성 및 메서드 정의 변경 사항

다음 Window 속성과 메서드 정의는 다중 화면 원점을 기준으로 값을 반환하고 해석하도록 갱신됩니다.

• screenX 및 screenLeft 속성은 클라이언트 창 왼쪽의 다중 화면 원점 기준 x 좌표를 CSS 픽셀 수로 반환해야 하며, 그러한 값이 없으면 0을 반환해야 합니다.

• screenY 및 screenTop 속성은 클라이언트 창 위쪽의 다중 화면 원점 기준 y 좌표를 CSS 픽셀 수로 반환해야 하며, 그러한 값이 없으면 0을 반환해야 합니다.

• moveTo() 단계는 x 및 y 인수가 다중 화면 원점을 기준으로 지정된 것으로 해석해야 합니다.

• open() 단계는 "left" 및 "top" 기능 값이 다중 화면 원점을 기준으로 지정된 것으로 해석해야 합니다.

3.2.8. Window.open() 메서드 정의 변경 사항

Window 인스턴스는 마지막 활성화 타임스탬프와 동등한 데이터 모델을 가진 [[targetScreenFullscreen]]이라는 내부 슬롯과 함께 생성됩니다. 이는 두 가지 경우를 제외하면 DOMHighResTimeStamp 값에 해당합니다. 양의 무한대는 Window 가 한 번도 활성화되지 않았음을 나타내고, 음의 무한대는 사용자 활성화로 제한되는 API(HTML § 6.4.3 사용자 활성화로 제한되는 API 참조)가 Window의 마지막 사용자 활성화를 소비했음을 나타냅니다. 초기 값은 양의 무한대입니다.

Window.open() 메서드 단계와 그 안에서 호출되는 메서드의 단계는 선택적으로 다음과 같이 갱신됩니다.

1. this.[[targetScreenFullscreen]] 이상이고 this.[[targetScreenFullscreen]] 에 일시적 활성화 지속 시간을 더한 값보다 작은 경우, 관련 전역 객체의 현재 고해상도 시간에 대해 일시적 활성화 상태 요구 사항을 면제합니다.

2. 사용자 활성화를 소비하는 단계를 따른 직후 this.[[targetScreenFullscreen]] 을 음의 무한대로 설정합니다.

3.3. ScreenDetails 인터페이스

[Exposed=Window, SecureContext]
interface ScreenDetails : EventTarget {
  readonly attribute FrozenArray<ScreenDetailed> screens;
  readonly attribute ScreenDetailed currentScreen;

  attribute EventHandler onscreenschange;
  attribute EventHandler oncurrentscreenchange;
};

3.3.1. screens 속성

3.3.2. currentScreen 속성

currentScreen getter 단계는 this와 연결된 Window 객체의 현재 화면을 나타내는 screens 내의 ScreenDetailed 객체를 반환하는 것입니다.

참고: screens 내에서 어떤 정확한 ScreenDetailed 객체가 Window의 현재 화면을 나타내는지는 운영 체제와 사용자 에이전트가 정의한다고 가정합니다. 이는 주어진 창의 표준 화면, 예를 들어 창과 교차하는 영역이 가장 큰 화면인 Window.screen에 해당합니다.

참고: currentScreen은 이러한 비교를 용이하게 하기 위해 screens 내 항목 중 하나와 ===로 비교할 수 있음이 보장됩니다. 예: screenDetails.screens.find(s => s !== screenDetails.currentScreen);. 이로 인해 currentScreen에는 [SameObject]를 표시할 수 없습니다. 이와 관련하여 currentScreen에 추가된 change 이벤트 리스너는 해당 특정 화면의 변경에 대해서만 알림을 받지만, currentscreenchange 이벤트 리스너는 창이 한 화면에서 다른 화면으로 이동한 후와 같이, 어느 화면이 창의 현재 화면이 되든 해당 화면의 변경에 대해 알림을 받습니다.

3.3.3. onscreenschange 속성

onscreenschange 속성은 이벤트 처리기 IDL 속성이며, 해당 이벤트 처리기 이벤트 유형은 screenschange입니다.

ScreenDetails 객체 screenDetails의 screens 집합이 변경되면, 창 배치 작업 소스를 사용하여 screenDetails의 관련 전역 객체에 전역 작업을 큐에 추가하고, screenDetails에서 screenschange라는 이벤트를 발생시킵니다.

3.3.4. oncurrentscreenchange 속성

oncurrentscreenchange 속성은 이벤트 처리기 IDL 속성이며, 해당 이벤트 처리기 이벤트 유형은 currentscreenchange입니다.

Window window의 현재 화면이 한 화면에서 다른 화면으로 변경되거나(예: Window가 다른 디스플레이로 이동한 경우), 또는 window의 현재 화면에 속한 기본 관찰 가능 속성이나 고급 관찰 가능 속성 중 하나가 변경되면, 창 배치 작업 소스를 사용하여 window의 관련 전역 객체에 전역 작업을 큐에 추가하고, window의 내부 슬롯 [[screenDetails]]에 저장된 ScreenDetails 객체에서 currentscreenchange라는 이벤트를 발생시킵니다.

3.4. ScreenDetailed 인터페이스

ScreenDetailed 객체는 화면을 나타냅니다.

[Exposed=Window, SecureContext]
interface ScreenDetailed : Screen {
  readonly attribute long availLeft;
  readonly attribute long availTop;
  readonly attribute long left;
  readonly attribute long top;
  readonly attribute boolean isPrimary;
  readonly attribute boolean isInternal;
  readonly attribute float devicePixelRatio;
  readonly attribute DOMString label;
};

availLeft getter 단계는 this 화면의 사용 가능한 화면 위치에 대한 x 좌표를 반환하는 것입니다.

availTop getter 단계는 this 화면의 사용 가능한 화면 위치에 대한 y 좌표를 반환하는 것입니다.

left getter 단계는 this 화면의 화면 위치에 대한 x 좌표를 반환하는 것입니다.

top getter 단계는 this 화면의 화면 위치에 대한 y 좌표를 반환하는 것입니다.

isPrimary getter 단계는 this 화면이 기본 화면이면 true를 반환하고, 그렇지 않으면 false를 반환하는 것입니다.

isInternal getter 단계는 this 화면이 내부 화면이면 true를 반환하고, 그렇지 않으면 false를 반환하는 것입니다.

devicePixelRatio getter 단계는 this 화면의 기기 픽셀 비율을 반환하는 것입니다.

label getter 단계는 this 화면의 레이블을 반환하는 것입니다.

3.4.1. onchange 속성

onchange 속성은 Screen에서 상속된 onchange 속성입니다.

ScreenDetailed 객체 screenDetailed가 나타내는 화면의 기본 관찰 가능 속성 또는 고급 관찰 가능 속성 중 하나가 변경되면, 창 배치 작업 소스를 사용하여 screenDetailed의 관련 전역 객체에 전역 작업을 큐에 추가하고, screenDetailed에서 change라는 이벤트를 발생시킵니다.

3.5. FullscreenOptions 확장

partial dictionary FullscreenOptions {
  ScreenDetailed screen;
};

선택적 FullscreenOptions screen 멤버는 특정 화면에서 요소를 전체 화면으로 표시하려는 애플리케이션의 선호를 나타냅니다. 사용자 에이전트는 언제든지 애플리케이션의 선호보다 사용자의 선호를 우선할 수 있습니다. 기본값 undefined는 애플리케이션 선호가 없음을 나타냅니다.

3.5.1. Element.requestFullscreen() 메서드 정의 변경 사항

Element.requestFullscreen() 메서드 단계는 선택적으로 다음과 같이 갱신됩니다.

1. pendingDoc의 최상위 브라우징 컨텍스트에 속한 활성 문서의 뷰포트를 이동하고 크기를 조절할 때 options["screen"]을 고려합니다. 수정된 이 메서드 단계의 일부로 뷰포트를 지정된 화면으로 이동할 수 있습니다.

2. options["screen"]이 isExtended의 값이 true인 인식된 ScreenDetailed 객체를 지정하는 경우, this.[[targetScreenFullscreen]] 내부 슬롯을 현재 고해상도 시간으로 설정합니다.

3.6. CSS 확장

이 명세는 창 상태에 따라 스타일시트를 조정할 수 있도록 새로운 CSS 미디어 기능을 정의합니다.

3.6.1. 'display-state' 미디어 기능

'@media/display-state' 미디어 기능은 현재 브라우징 컨텍스트가 최종 사용자에게 표시되고 있는 창 상태를 설명합니다. 자식 브라우징 컨텍스트에서 표시 상태는 최상위 브라우징 컨텍스트의 표시 상태와 일치해야 합니다.

이 기능은 주로 애플리케이션 컨텍스트를 실행하는 사용자 에이전트에 호스트 운영 체제가 어떤 표시 상태를 적용했는지 확인하는 데 사용됩니다.

normal

브라우징 컨텍스트가 정상 표시 상태로 표시됩니다.

minimized

브라우징 컨텍스트가 최소화됨 표시 상태로 표시됩니다.

maximized

브라우징 컨텍스트가 최대화됨 표시 상태로 표시됩니다.

fullscreen

브라우징 컨텍스트가 전체 화면 표시 상태로 표시됩니다.

3.6.2. 'resizable' 미디어 기능

'@media/resizable' 미디어 기능은 사용자가 창의 크기를 조절할 수 있는지를 설명합니다.

true

사용자가 창의 가장자리를 드래그하여 창 크기를 조절할 수 있습니다.

false

사용자가 창의 가장자리를 드래그하여 창 크기를 조절할 수 없습니다.

3.7. 권한 API 통합

이 명세는 이름 "window-management"으로 식별되는 기본 강력한 기능을 정의합니다.

[permissions] API는 웹사이트가 권한 상태를 질의하는 일관된 방법을 제공합니다.

참고: 이전에 공개된 이 문서의 버전에서는 "window-placement"라는 권한 이름을 사용했습니다. 사용자 에이전트는 갱신된 권한 문자열 "window-management"로 신중하게 마이그레이션해야 합니다. #114를 참조하세요.

window-management를 [permissions] 레지스트리에 추가합니다.

권한이 철회될 때 캐시된 객체와 메서드 단계의 동작을 정의합니다. (#80 참조)

3.8. 권한 정책 통합

이 명세는 문자열 "window-management"로 식별되며, isExtended, getScreenDetails 및 종속 기능을 사용할 수 있는지를 제어하는 정책 제어 기능을 정의합니다. 이 기능의 기본 허용 목록은 'self'입니다. [permissions-policy] 및 그 실험적 기능 목록을 참조하세요.

참고: 문서의 권한 정책은 해당 문서 내 콘텐츠가 isExtended에서 의미 있는 값을 얻거나, ScreenDetails에 접근하거나, 특정 화면에 콘텐츠를 배치하도록 허용되는지를 결정합니다. 비활성화된 경우 isExtended는 false를 반환하고, getScreenDetails가 반환한 프로미스는 거부되며, 특정 화면에 콘텐츠를 배치하려는 요청은 현재 화면으로 제한됩니다.

적절한 시점에 window-management를 제안된 또는 표준화된 기능 목록으로 이동합니다.

4. 보안 고려 사항

이 명세는 사이트가 특정 화면에 콘텐츠를 배치할 수 있도록 하며, 이는 제한적인 새로운 보안 위험을 초래할 수 있습니다.

1. 사이트가 예상하지 못한 화면에 민감한 콘텐츠를 눈에 띄게 표시하려 할 수 있습니다.

2. 사이트가 눈에 잘 띄지 않는 화면에 바람직하지 않은 콘텐츠를 은밀하게 표시하려 할 수 있습니다. 예:

3. 사이트가 사용자의 주의를 특정 화면으로 유도하고 그 화면의 상호작용 신호를 사용하여 덜 주의 깊게 관찰되는 다른 화면에 기만적인 콘텐츠를 표시함으로써 피싱 공격을 위해 운영 체제, 브라우저 또는 다른 사이트를 사칭하려 할 수 있습니다.

4. 사이트가 그 밖에도 특정 화면에 콘텐츠를 배치하여 기만적이거나 악의적이거나 성가신 방식으로 행동하려 할 수 있습니다.

이러한 위험을 완화하기 위해 화면 간 배치 기능은 보안 컨텍스트에서 명시적인 권한을 요구하며, 기본적으로 서드 파티의 접근을 방지하는 [permissions-policy]의 적용을 받습니다.

사용자 에이전트는 화면 간 배치 요청을 감지하고 잠재적인 악용으로부터 사용자를 보호하기 위해 개입할 수 있습니다. 예를 들어 사이트가 다른 화면에 콘텐츠를 배치하거나 화면 간 배치 후 창이 사용자의 주의를 끌 때 사용자 에이전트는 눈에 잘 띄는 보안 UI를 표시할 수 있습니다. 또한 일부 사용자 에이전트의 기존 동작과 마찬가지로 화면 간 배치 요청을 거부하거나 현재 화면으로 제한할 수 있습니다.

그 밖에 참고할 사항은 다음과 같습니다.

• 일부 사용자 에이전트는 이미 창 배치 요청을 현재 화면으로 제한하지 않습니다. 이들은 open() 및 moveTo() 좌표를 다중 화면 원점을 기준으로 해석하고, 현재 화면이 아닌 화면에 창을 배치하려는 요청을 허용합니다.

• 일시적 사용자 활성화는 일반적으로 이미 requestFullscreen() 및 open()에는 필요하지만, moveTo(), moveBy(), resizeTo() 및 resizeBy()에는 필요하지 않습니다.

• 현재 화면이 아닌 화면에 콘텐츠를 배치하더라도 사용자의 커서나 손가락은 별도의 화면이 아니라 현재 화면과 같은 위치에 있을 가능성이 높으므로, 사용자에게 추가적인 클릭재킹 위험을 초래할 가능성은 낮습니다.

• 기존 배치 기능을 지정된 권한으로 제한하는 것이 가능할 수 있습니다.

보안 고려 사항에 대한 다음의 추가 검토를 참조하세요.

• 전체 API에 대한 W3C 보안 및 개인정보 보호 자체 검토 설문지

• 전체 API 설명서의 "개인정보 보호 및 보안"

• "다중 화면 환경 시작"에 대한 W3C 보안 및 개인정보 보호 자체 검토 설문지

• "다중 화면 환경 시작" 설명서의 "보안 고려 사항"

• "추가 창 제어 기능"에 대한 W3C 보안 및 개인정보 보호 자체 검토 설문지

• "추가 창 제어 기능" 설명서의 "보안 및 개인정보 보호 고려 사항"

5. 개인정보 보호 고려 사항

이 명세는 기기에 연결된 화면에 관한 새로운 정보를 사이트에 노출하며, 이는 제한적인 새로운 개인정보 보호 위험을 초래할 수 있습니다. 이러한 추가 정보는 기기, 특히 일반적이지 않은 화면 구성을 가진 기기의 핑거프린팅 표면을 증가시킵니다.

이러한 위험을 완화하기 위해 새로운 정보는 일반적인 배치 사용 사례에 필요한 최소한으로 축소되며, 대부분의 접근은 보안 컨텍스트에서 명시적인 권한을 요구하고, 기본적으로 서드 파티 접근을 방지하는 [permissions-policy]의 적용을 받습니다. 노출되는 화면 목록에는 상호운용성 문제를 줄이고 핑거프린팅을 완화하기 위해 정의된 순서가 있습니다. 사용자 에이전트는 일반적으로 사이트가 새로운 정보를 요청할 때 이를 측정하고 그 밖의 방식으로 개입할 수 있습니다.

Screen.isExtended 불리언은 명시적인 권한 확인 없이 노출됩니다. 이 최소한의 단일 비트 정보는 권한 프롬프트가 방해가 될 수 있는 일부 중요한 기능(예: “다른 화면에 표시”와 같은 다중 화면 UI 진입점의 표시 또는 숨김)을 지원하고, 단일 화면 사용자에게 적용되지 않는 정보와 기능을 불필요하게 요청하지 않도록 도와주기 때문입니다. 이는 일반적으로 기기 열거에 관한 TAG 설계 원칙을 따릅니다(웹 플랫폼 설계 원칙 § 9.2 기기를 선택하거나 열거하는 API를 노출할 때 주의할 것 참조).

많은 사용자 에이전트는 이미 window.screen.availLeft|Top >> 0인 보조 화면에 위치한 창에 여러 화면의 존재를 사실상 노출합니다. 스크립트가 이 비트에 접근하는 것은 사용자 에이전트가 관찰하고 차단할 수 있는 감지 가능한 능동 핑거프린팅 신호입니다. 또한 권한이 없는 창 배치 요청을 현재 화면으로 제한하지 않는 사용자 에이전트는 공격자가 다른 화면에 프로그래밍 방식으로 배치를 시도하도록 허용하며, 그 시점에 해당 window.screen에 관한 정보가 노출됩니다.

새로운 Screen.onchange 이벤트는 일시적 핑거프린팅을 더 쉽게 만들어 약간의 위험을 초래하지만, 스크립트는 이미 window.screen의 변경을 폴링하여 동일한 결과를 얻을 수 있습니다. 숨겨진 문서가 더 이상 숨겨지지 않을 때까지 해당 문서에 대한 이벤트 디스패치를 지연하면 이 위험을 부분적으로 완화할 수 있습니다.

사이트에 더 적은 권한을 부여하는 대체 API 형태도 고려되었지만, 사용자와 개발자에게 좋지 않은 경험을 제공합니다 (예: 사용자에게 화면 선택 요청, 개발자에게 선언적인 화면 우선순위 요구). 연결된 모든 화면에 앱 창을 전체 화면이 아닌 방식으로 배치하기 위한 대안은 거의 또는 전혀 존재하지 않습니다. 지정된 API 형태는 더 완전한 다중 화면 환경을 지원하기 위한 기존 API의 가장 자연스러운 확장으로 보입니다. 향후 작업에는 사이트가 자발적으로 정보 노출을 최소화할 수 있도록 더 제한적인 다중 화면 정보를 질의하는 방법이 포함될 수 있습니다.

지정된 API 설계를 통해 사용자 에이전트는 새로운 접근 모델을 사용하여 화면을 선택적으로 노출할 수 있습니다. 예를 들어 사용자가 지정한 화면과 관련된 화면 정보 및 배치 기능을 제한할 수 있습니다.

그 밖에 참고할 사항은 다음과 같습니다.

• 기존 화면 및 창 정보를 지정된 권한으로 제한하는 것이 가능할 수 있습니다.

개인정보 보호 고려 사항에 대한 다음의 추가 검토를 참조하세요.

• 전체 API에 대한 W3C 보안 및 개인정보 보호 자체 검토 설문지

• 전체 API 설명서의 "개인정보 보호 및 보안"

• "다중 화면 환경 시작"에 대한 W3C 보안 및 개인정보 보호 자체 검토 설문지

• "추가 창 제어 기능"에 대한 W3C 보안 및 개인정보 보호 자체 검토 설문지

• "추가 창 제어 기능" 설명서의 "보안 및 개인정보 보호 고려 사항"

6. 접근성 고려 사항

이 명세는 사이트가 특정 화면에 콘텐츠를 배치할 수 있도록 하며, 이는 제한적인 새로운 접근성 위험을 초래할 수 있습니다. 시각적 표시, 비시각적 렌더링 및 보조 기술이 콘텐츠 자체에 미치는 영향은 일반적으로 콘텐츠를 어느 한 화면에 배치하는지에 따라 크게 달라지지 않습니다. 하지만 콘텐츠를 배치할 수 있는 영역이 확장되면서 프로그래밍 방식의 콘텐츠 배치에 관한 기존 접근성 위험이 심화될 수 있습니다. 기본 강력한 기능 권한 모델, 권한 요청 방법 및 권한 관련 UI에 관한 기존 접근성 고려 사항은 이 명세의 특정 권한에도 동일하게 관련됩니다.

현재 API가 노출하는 구조화된 화면 정보 및 해당 정보의 접근성 기능과 관련하여 문서화된 접근성 고려 사항은 없습니다.

7. 국제화 고려 사항

현재 문서화된 국제화 고려 사항은 없습니다.

8. 감사의 말

이 명세를 작성하는 데 도움을 준 Adrienne Walker, Anssi Kostiainen, Chris Terefinko, Domenic Denicola, Jonathan Garbee, Kenneth Rohde Christiansen, L. David Baron, Lukasz Olejnik, Marijn Kruisselbrink, Matt Giuca, Michael Ketting, Nadav Sinai, Peter Linss, Reilly Grant, Staphany Park, Theresa O’Connor, Thomas Nattestad, Thomas Steiner 및 Victor Costan에게 깊이 감사드립니다.

빠뜨린 사람이 없는지 확인합니다!

이 문서를 작성하는 데 사용된 명세 작성 도구인 Bikeshed를 만들고 유지관리하며 전반적인 작성 조언을 제공한 Tab Atkins, Jr.에게 특별히 감사드립니다.