윈도우 관리

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 빌드(가정된 helper 사용).
  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 케이블로 노트북에 텔레비전이나 프로젝터를 연결하는 것, 노트북 덮개를 닫아 내장 LCD 패널을 비활성화하는 것, 연결된 LCD 모니터의 해상도를 변경하는 것 등이 있습니다.

2.2. 화면 픽셀

2.3. 화면 영역

참고: 그리드 크기는 일반적으로 <너비>×<세로>로 표기합니다. 예를 들어, 1920×1080 화면 영역은 너비가 1920 픽셀, 세로가 1080 픽셀인 그리드를 가집니다.

참고: CSSOM View § 2.3 Web-exposed screen information에 명시된 대로, 사용자 에이전트는 사용자의 프라이버시 보호를 위해 출력 기기의 화면 정보 공개를 제한할 수 있습니다. 이 경우 화면 영역은 뷰포트와 같을 수 있습니다.

2.4. 사용 가능한 화면 영역

2.5. 가상 화면 배열

디바이스는 전체 시각 환경을 구성하는 스크린들의 상대적 배치를 정의하는 가상 화면 배열을 가집니다. 배열은 일반적으로 모든 방향으로 확장되는 2차원 평면에 (x, y) 좌표로 구성되며, 다중 화면 원점에서 각각 오른쪽과 아래로 좌표가 증가합니다. 다중 화면 원점은 가상 화면 배열의 (0, 0) 좌표를 정의하는 구현 의존적 포인트입니다.

일반적인 관례는 다중 화면 원점을 주 스크린의 좌상단으로 두는 것이지만, 실제로는 가상 화면 배열 내의 임의의 지점일 수 있습니다. 각 스크린의 화면 영역은 가상 화면 배열의 직사각형 부분을 나타냅니다.

이 도표는 여러 스크린이 가상 화면 배열 내에 어떻게 배치될 수 있는지, 그리고 일부 가능한 다중 화면 원점의 예시를 보여줍니다:

참고: Second Screen Community Group의 Form Factors Explained 초안 보고서는 관련 용어와 개념 모델을 다룹니다.

2.6. 화면 위치

스크린은 화면 위치를 가지며, 이는 화면 영역의 (x, y) 좌표로, 다중 화면 원점을 기준으로 한 가상 화면 배열 내 위치를 의미합니다. 좌표는 음수일 수 있으며, 일반적으로 (x, y)로 표기합니다.

2.7. 사용 가능한 화면 위치

스크린은 사용 가능한 화면 위치를 가지며, 이는 사용 가능한 화면 영역의 (x, y) 좌표로, 다중 화면 원점을 기준으로 한 가상 화면 배열 내 위치를 의미합니다. 좌표는 음수일 수 있으며, 일반적으로 (x, y)로 표기합니다.

2.8. 주 화면

사용자 에이전트를 호스팅하는 디바이스에는 정확히 하나의 주 스크린이 존재합니다. 나머지 스크린들은 보조로 간주됩니다.

참고: 주 화면에는 일반적으로 작업 표시줄(Windows)이나 Dock(macOS) 등 운영체제의 작업 관리 UI가 표시됩니다.

스크린의 주 또는 보조 지정은 사용자 에이전트가 실행 중에도 변경될 수 있습니다.

참고: 대부분의 운영체제는 Windows 제어판, macOS 환경설정 등 관리 UI를 통해 사용자가 주 화면을 직접 선택할 수 있습니다.

2.9. 내장 화면

각 스크린은 내장 또는 외장으로 지정될 수 있습니다.

외장 스크린은 시각적 출력을 제공하는 디바이스와 별도로 제조됩니다. 외장 스크린은 한 디바이스에서 분리해 다른 디바이스에 연결하는 것이 흔합니다.

참고: 예를 들어, 데스크톱 컴퓨터는 HDMI 케이블로 연결된 외장 모니터에 화면을 표시할 수 있습니다. HDMI 케이블은 컴퓨터 사용 중에도 연결/해제할 수 있으며 이에 따라 컴퓨터는 시각 환경을 자동으로 조정합니다.

내장 스크린은 보통 제조 과정에서 디바이스에 부착됩니다. 내장 스크린은 사용자가 분리하도록 의도되지 않았습니다. 그러나 내장 스크린도 사용자 에이전트 실행 중에 활성화 또는 비활성화될 수 있습니다.

참고: 예를 들어, 노트북은 덮개를 닫으면 내장 화면과 입력 장치를 비활성화할 수 있습니다. 이 경우에도 외장 화면과 입력 장치로 노트북을 사용할 수 있습니다. 비활성화된 내장 화면은 덮개가 닫힌 동안 디바이스의 스크린 목록에 포함되지 않을 수 있습니다.

2.10. 현재 화면

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

참고: 많은 운영체제에서 하나의 윈도우가 여러 서로 다른 속성을 가진 스크린에 걸쳐 표시될 수 있거나, "숨김" 상태로 아무 스크린에도 표시되지 않을 수 있습니다. 운영체제와 사용자 에이전트는 보통 특정 Window에 대해, 예를 들어 윈도우와 겹치는 면적이 가장 큰 스크린 등, 규정된 기준에 따라 대표 스크린을 정합니다.

2.11. 관찰 가능한 화면 속성

스크린의 기본 관찰 가능 속성은 다음과 같습니다:

• 화면 영역의 너비와 세로

• 사용 가능한 화면 영역의 사용 가능한 너비와 사용 가능한 세로

• 컬러 뎁스

• 화면 방향

스크린의 고급 관찰 가능 속성은 다음과 같습니다:

• 화면 위치

• 사용 가능한 화면 위치

• 디바이스 픽셀 비율

• 레이블

• 스크린의 주 또는 보조 지정

• 스크린의 내장 또는 외장 지정

3. API

3.1. Screen 인터페이스 확장

CSSOM View Module 명세는 Screen 인터페이스를 정의하며, 본 명세는 아래와 같이 이를 확장합니다:

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

  [SecureContext]
  attribute EventHandler onchange;
};

Screen 인터페이스가 EventTarget 을 상속하도록 CSSOM View § 4.3 The Screen Interface에서 수정되어야 합니다.

3.1.1. isExtended 속성

3.1.2. onchange 속성

onchange 속성은 이벤트 핸들러 IDL 속성으로, 이벤트 핸들러 이벤트 타입이 change입니다.

기본 관찰 가능 속성 중 하나라도 Window window의 현재 화면이 변경되면, 글로벌 태스크를 큐잉하여 해당 윈도우의 관련 전역 객체에서 window placement task source를 사용하여 이벤트를 발생 시키는데, 이벤트명은 change이며, window의 Screen 객체(window의 screen 속성 참조)에서 발생한다.

3.2. Window 인터페이스 확장

[HTML] 표준은 Window 인터페이스를 정의하며, 이 명세는 아래와 같이 확장합니다:

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

3.2.1. getScreenDetails() 메서드

getScreenDetails() 메서드는 비동기적으로 완료되며, window placement task source에 작업을 큐잉합니다.

Window 인스턴스에는 내부 슬롯인 [[screenDetails]]이 생성 시 undefined로 초기화되어 정의됩니다.

3.2.2. Window 속성과 메서드 정의 변경

아래 Window 속성 및 메서드 정의는 다중 화면 원점 기준 값을 반환하고 해석하도록 업데이트됩니다:

• screenX 및 screenLeft 속성은 클라이언트 윈도우의 좌측 x좌표를 다중 화면 원점 기준으로 CSS 픽셀 수치로 반환해야 하며, 해당 값이 없으면 0을 반환합니다.

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

• moveTo() 단계는 x와 y 인자를 다중 화면 원점 기준으로 해석해야 합니다.

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

3.2.3. Window.open() 메서드 정의 변경

Window 인스턴스에는 내부 슬롯인 [[targetScreenFullscreen]]이 생성되며, 데이터 모델은 last activation timestamp와 같습니다. 이는 DOMHighResTimeStamp 값과 동일하나 두 가지 예외가 있습니다: 양의 무한대는 Window 가 한 번도 활성화된 적이 없음을 나타내고, 음의 무한대는 사용자 활성화 차단 API(참조: HTML § 6.4.3 사용자 활성화로 제어되는 API)가 Window 의 마지막 사용자 활성화를 소모(consumed)했음을 의미합니다. 초기값은 양의 무한대입니다.

Window.open() 메서드 단계 및 그 내부에서 호출된 메서드 단계는 다음을 옵션으로 수행하도록 업데이트됩니다:

1. 관련 전역 객체의 current high resolution time이 this.[[targetScreenFullscreen]] 보다 크거나 같고, this.[[targetScreenFullscreen]] 더하기 transient activation duration 미만이면 transient activation 상태 요구사항을 면제합니다.

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 단계는 ScreenDetailed 객체를 screens에서 반환하는데, 이는 current screen으로, Window 객체가 this와 연관되어 있을 때를 나타냅니다.

Note: ScreenDetailed 객체 중 어떤 것이 screens에서 current screen에 해당하는지는 운영체제 및 사용자 에이전트가 정의한 것으로 간주합니다. 이는 Window.screen과 일치하며, 예를 들어 윈도우가 가장 많이 겹치는 화면이 해당됩니다.

참고: currentScreen 은 === 연산자로 screens 항목 중 하나와 비교가 가능함이 보장되어 있습니다. 이는 다음과 같은 비교를 원활하게 하기 위함입니다(예: screenDetails.screens.find(s => s !== screenDetails.currentScreen);). 따라서 currentScreen 은 [SameObject]로 표시될 수 없습니다. 또한, change 이벤트 리스너를 currentScreen 에 추가할 경우 해당 화면에 대한 변경 사항만 알림을 받게 됩니다. 반면, currentscreenchange 이벤트 리스너는 어떤 화면이든 창의 현재 화면이 될 때마다(예: 창이 한 화면에서 다른 화면으로 이동한 후) 알림을 받게 됩니다.

3.3.3. onscreenschange 속성

onscreenschange 속성은 이벤트 핸들러 IDL 속성이며, 이벤트 타입은 screenschange입니다.

screens의 집합이 ScreenDetails 객체 screenDetails에서 변경될 때, 글로벌 태스크를 screenDetails의 관련 전역 객체에서 window placement task source를 사용하여, screenDetails에 이벤트를 발생시키는데, 이벤트 이름은 screenschange입니다.

3.3.4. oncurrentscreenchange 속성

oncurrentscreenchange 속성은 이벤트 핸들러 IDL 속성이며, 이벤트 타입은 currentscreenchange입니다.

Window window의 현재 화면이 한 화면에서 다른 화면(예: Window 가 다른 디스플레이로 이동된 경우)으로 변경되거나, window의 현재 화면의 기본 관찰 가능 속성 또는 고급 관찰 가능 속성이 변경될 때, 글로벌 태스크를 window의 관련 전역 객체에서 window placement task source를 사용해 이벤트를 발생시키며, 이벤트 이름은 currentscreenchange이고 대상은 window의 내부 슬롯 [[screenDetails]] 에 저장된 ScreenDetails 객체입니다.

3.4. ScreenDetailed 인터페이스

ScreenDetailed 객체는 screen을 나타냅니다.

[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 단계는 available screen position의 x좌표를 this screen에서 반환합니다.

availTop getter 단계는 available screen position의 y좌표를 this screen에서 반환합니다.

left getter 단계는 screen position의 x좌표를 this screen에서 반환합니다.

top getter 단계는 screen position의 y좌표를 this screen에서 반환합니다.

isPrimary getter 단계는 this screen이 primary screen이면 true, 아니면 false 반환입니다.

isInternal getter 단계는 this screen이 internal이면 true, 아니면 false 반환입니다.

devicePixelRatio getter 단계는 device pixel ratio를 this screen에서 반환하는 것입니다.

label getter 단계는 label을 this screen에서 반환하는 것입니다.

3.4.1. onchange 속성

onchange 속성은 onchange 속성을 Screen에서 상속받습니다.

ScreenDetailed 객체 screenDetailed가 나타내는 스크린의 기본 관찰 가능 속성 또는 고급 관찰 가능 속성이 변경될 때, 글로벌 태스크를 screenDetailed의 해당 전역 객체에서 window placement task source를 사용해 이벤트를 발생시키며, 이벤트 이름은 change이고 대상은 screenDetailed입니다.

3.5. FullscreenOptions 확장

partial dictionary FullscreenOptions {
  ScreenDetailed screen;
};

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

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

Element.requestFullscreen() 메서드 단계는 옵션으로 아래를 추가할 수 있습니다:

1. options["screen"] 값을 pendingDoc의 최상위 브라우징 컨텍스트 및 활성 문서 뷰포트 이동/크기 변경에 반영합니다. 뷰포트는 이 수정된 메서드 단계에서 지정된 screen으로 옮겨질 수 있습니다.

2. options["screen"]에, ScreenDetailed 객체이면서 isExtended 값이 true인 경우, this.[[targetScreenFullscreen]] 내부 슬롯을 current high resolution time으로 설정합니다.

3.6. 권한 API 통합

이 명세는 default powerful feature를 정의하며, 식별자는 name "window-management"입니다.

[permissions] API는 웹사이트가 자신의 권한 상태를 질의할 수 있는 통일된 방법을 제공합니다.

Note: 본 문서의 이전 공개 버전은 권한 이름 "window-placement"를 사용했습니다. 사용자 에이전트는 window-management 로 마이그레이션해야 하며, #114 참조.

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

권한이 철회(revoked)되었을 때 캐시된 객체 및 메서드 단계의 동작 정의 필요. (#80 참고)

3.7. 권한 정책 통합

이 명세는 policy-controlled feature를 정의하며, 문자열 식별자는 "window-management"입니다. 이 정책은 isExtended, getScreenDetails 및 관련 기능 사용 가능 여부를 제어합니다. 이 기능의 default allowlist는 'self'입니다. 자세한 내용은 [permissions-policy] 및 Experimental Features를 참고하세요.

Note: document의 permissions policy에 따라 isExtended의 값, ScreenDetails 접근, 또는 특정 화면에 콘텐츠 배치 허용 여부가 결정됩니다. 비활성화될 경우 isExtended는 false를 반환하고, getScreenDetails의 프라미스는 거부되며, 특정 화면으로의 콘텐츠 배치는 current screen에 제한(clamped)됩니다.

window-management 를 Proposed 또는 Standardized 기능 목록으로 이동해야 합니다.

4. 보안 고려사항

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

1. 사이트가 민감한 내용을 예기치 않은 화면에 눈에 띄게 표시하려 시도할 수 있음

2. 사이트가 덜 눈에 띄는 화면에 원치 않는 콘텐츠를 몰래 표시하려 시도할 수 있음. 예를 들어:

3. 사이트가 특정 화면으로 사용자의 주의를 끌어 OS, 브라우저 또는 다른 사이트를 피싱 공격용으로 사칭하고, 그곳의 상호작용 신호를 이용해 다른 화면에 기만적인 콘텐츠를 표시할 수 있음

4. 사이트가 기만적이거나 남용적이거나 성가신 방식으로 특정 화면에 콘텐츠를 배치하려 시도할 수 있음

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

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

기타 참고 사항:

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

• requestFullscreen() 및 open() 은 일반적으로 일시적 사용자 활성화를 요구하지만, moveTo(), moveBy(), resizeTo(), 또는 resizeBy() 에 대해서는 보통 요구되지 않습니다.

• 현재 화면이 아닌 화면에 콘텐츠를 배치하는 것은, 사용자의 커서나 손가락이 보통 별도의 화면이 아닌 현재 화면에 위치하기 때문에 추가적인 클릭재킹(clickjacking) 위험을 만들어낼 가능성은 낮습니다.

• 지정된 권한에 따라 기존의 배치 기능을 제한(gating)하는 것이 가능할 수 있습니다.

다음의 보안 고려사항에 대한 추가 탐구를 참조하십시오:

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

• 전체 API용 Explainer의 "Privacy & Security"

• "Initiating Multi-Screen Experiences"에 대한 W3C 보안 및 개인정보 자기검토 설문서

• "Initiating Multi-Screen Experiences" Explainer의 "Security Considerations"

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

이 명세는 기기에 연결된 화면에 관한 새로운 정보를 사이트에 노출하는데, 이는 제한적이지만 새로운 개인정보 위험을 초래할 수 있습니다. 이 추가 정보는 특히 비정상적인 화면 구성을 가진 기기들의 지문 채취(fingerprinting) 표면을 증가시킵니다.

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

Screen.isExtended 불리언은 명시적 권한 검사 없이 노출됩니다. 이 최소 단위의 단일 비트 정보는 권한 프롬프트를 표시하는 것이 성가실 수 있는 일부 중요한 기능(예: "다른 화면에 표시"와 같은 다중 화면 UI 진입점의 표시/숨김)을 지원하며, 단일 화면 사용자에게 불필요한 프롬프트를 피하는 데 도움이 됩니다. 이는 장치 열거에 대한 TAG 설계 원칙을 일반적으로 따릅니다(참조: Web Platform Design Principles § device-enumeration).

많은 사용자 에이전트는 이미 보조 화면에 위치한 창에서 다중 화면의 존재를 효과적으로 노출합니다(예: window.screen.availLeft|Top >> 0). 이 비트의 스크립트 접근은 사용자 에이전트에 의해 탐지되어 차단될 수 있는 능동적 지문 채취(active fingerprinting) 신호입니다. 또한 권한이 없는 창 배치 요청을 현재 화면으로 제한하지 않는 사용자 에이전트는 공격자가 다른 화면에 프로그래밍 방식으로 배치하려 시도할 수 있게 허용하며, 이 경우 해당 window.screen에 관한 정보가 노출됩니다.

새로운 Screen.onchange 이벤트는 일시적 지문 채취(ephemeral fingerprinting)를 더 쉽게 만들어 약간의 위험을 초래하지만, 스크립트는 이미 window.screen 변경을 폴링(polling)하여 동일한 결과를 얻을 수 있습니다. 이 위험은 숨겨진 문서(hidden documents)에 대해 이벤트 디스패치를 문서가 더 이상 숨겨져 있지 않을 때까지 지연시킴으로 부분적으로 완화될 수 있습니다.

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

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

기타 참고 사항:

• 지정된 권한에 따라 기존 화면 및 창 정보의 접근을 제한하는 것도 가능할 수 있습니다.

다음의 개인정보 고려사항에 대한 추가 탐구를 참조하십시오:

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

• 전체 API용 Explainer의 "Privacy & Security"

• "Initiating Multi-Screen Experiences"에 대한 W3C 보안 및 개인정보 자기검토 설문서

6. 접근성 고려사항

이 명세는 사이트가 특정 화면에 콘텐츠를 배치할 수 있게 하며, 이는 제한적이지만 새로운 접근성 위험을 초래할 수 있습니다. 시각적 표시, 비시각적 렌더링 및 보조 기술이 콘텐츠 자체에 미치는 영향은 보통 콘텐츠를 어느 화면에 배치하느냐에 의해 크게 달라지지 않습니다. 그럼에도 불구하고, 프로그래밍 방식의 콘텐츠 배치에 대한 기존의 접근성 위험은 콘텐츠가 배치될 수 있는 영역이 확장됨에 따라 악화될 수 있습니다. 기본 강력 기능(default powerful feature) 권한 모델, 프롬프트 방식 및 권한 관련 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.와 그의 일반적인 작성 조언에 특별한 감사를 드립니다.