Multi-Screen Window Placement API로 여러 디스플레이 관리하기

Muti-Screen Window Placement API를 사용하면 컴퓨터에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다.

# 제안된 사용 사례

이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.

• Gimp의 멀티 윈도우 그래픽 에디터는 정확한 위치의 창에 다양한 편집 도구를 배치할 수 있습니다.
• 가상 트레이딩 데스크는 전체 화면 모드에서 볼 수 있는 여러 창에서 시장 동향을 표시할 수 있습니다.
• 슬라이드쇼 앱은 내부 기본 화면에 발표자 노트를 표시하고 외부 프로젝터에 프레젠테이션을 표시할 수 있습니다.

# 현재 상태

# Multi-Screen Window Placement API 사용 방법

# 문제

오랜 시간 검증된 창 제어 접근 방식인 Window.open()은 불행히도 추가 화면을 인식하지 못합니다. 이 API의 일부 측면(예: windowFeatures DOMString 매개변수)은 약간 구식인 것처럼 보이지만 그럼에도 불구하고 수년 동안 우리에게 도움이 되었습니다. 창의 위치를 지정하려면 좌표를 left와 top (또는 screenX 및 screenY)으로 전달하고 원하는 크기를 width와 height (또는 innerWidth 및 innerHeight)로 전달할 수 있습니다. 예를 들어, 왼쪽에서 50픽셀, 위쪽에서 50픽셀 떨어진 400×300 창을 열려면 다음 코드를 사용할 수 있습니다.

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

Screen 객체를 반환하는 window.screen 속성을 보면 현재 화면에 대한 정보를 얻을 수 있습니다. 이것은 제 MacBook Pro 13″의 출력 입니다.

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

기술 분야에서 일하는 대부분의 사람들과 마찬가지로 저도 새로운 업무 현실에 적응하고 개인 홈 오피스를 설정해야 했습니다. 제 것은 아래 사진과 같습니다(관심이 있다면 제 설정에 대한 전체 세부 정보를 읽을 수 있습니다). 제 MacBook 옆에 있는 iPad는 Sidecar를 통해 노트북에 연결되어 있으므로 필요할 때마다 iPad를 두 번째 화면으로 빠르게 전환할 수 있습니다.

더 큰 화면을 활용하고 싶다면 위 코드 샘플의 팝업을 두 번째 화면에 추가하면 됩니다. 저는 이것을 다음과 같이 했습니다.

popup.moveTo(2500, 50);

두 번째 화면의 크기를 알 수 있는 방법이 없기 때문에 이것은 대략적인 추측입니다. window.screen의 정보는 빌트인 스크린만 포함하고 iPad 화면은 포함하지 않습니다. 보고 된 빌트인 스크린의 width는 1680픽셀이며, 저는 그것이 제 맥북의 오른쪽에 있는 것을 알고 있기 때문에 2500픽셀 이동하여 창을 iPad로 전환할 수 있을지도 모릅니다. 일반적인 경우에는 어떻게 해야 할까요? 추측하는 것보다 더 나은 방법이 있다는 것이 밝혀졌습니다. 이것이 바로 Multi-Screen Window Placement API입니다.

# 기능 감지

Multi-Screen Window Placement API가 지원되는지 확인하려면 다음을 사용하세요.

if ('getScreenDetails' in window) {
  // Multi-Screen Window Placement API가 지원됩니다.
}

# window-placement 권한

Multi-Screen Window Placement API를 사용하려면 먼저 사용자에게 권한을 요청해야 합니다. 새 window-placement 권한은 다음과 같이 Permissions API를 사용하여 쿼리할 수 있습니다.

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-placement' });
  granted = state === 'granted';
} catch {
  // 없습니다.
}

브라우저는 새 API의 방법을 처음 사용하려고 할 때 권한 프롬프트를 동적으로 표시하도록 선택 가능합니다. 자세히 알아보려면 계속 읽어보세요.

# window.screen.isExtended 속성

두 개 이상의 화면이 내 장치에 연결되어 있는지 확인하기 위해 window.screen.isExtended 속성에 액세스합니다. true 또는 false를 반환합니다. 제 설정의 경우 true를 반환합니다.

window.screen.isExtended;
// `true` 또는 `false`를 반환합니다.

# getScreenDetails() 메서드

Window.getScreenDetails()를 사용하여 두 번째 화면에 대한 자세한 정보를 얻을 수 있습니다. 이 기능을 호출하면 사이트가 열리고 내 화면에 창을 배치할 수 있는지 묻는 권한 프롬프트가 표시됩니다. ScreenDetailed 개체로 resolve 되는 promise를 반환합니다. iPad가 연결된 MacBook Pro 13에는 두 개의 ScreenDetailed 개체가 있는screens 필드를 포함합니다.

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: ""
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: ""
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

연결된 화면에 대한 정보는 screens 배열에서 사용할 수 있습니다. iPad에 대한 left 값이 빌트인 디스플레이 width와 정확히 일치하는 1680에서 시작하는 방식에 유의하세요. 이를 통해 화면이 논리적으로 정렬되는 방식을 정확하게 결정할 수 있습니다(서로 나란히, 서로 위에 등). 각 화면에는 그것이 isInternal인지와 isPrimary인지를 보여주는 데이터도 있습니다. 빌트인 스크린이 반드시 기본 화면일 필요는 없습니다.

currentScreen 필드는 현재 window.screen에 해당하는 라이브 객체입니다. 개체는 교차 화면 창 배치 또는 장치 변경 시 업데이트됩니다.

# screenschange 이벤트

지금 놓친 유일한 것은 내 화면 설정이 변경될 때 감지하는 방법입니다. 새로운 이벤트인 screenschange는 정확히 그 일을 합니다. 화면 구성이 수정될 때마다 발생합니다. ("screens"는 이벤트 이름에서 복수라는 점에 유의하십시오.) 이는 새 화면이나 기존 화면(Sidecar의 경우 물리적으로 또는 가상으로)이 연결되거나 연결 해제될 때마다 이벤트가 발생함을 의미합니다.

새 화면 세부 정보를 비동기식으로 조회해야 하며 screenschange 이벤트 자체는 이 데이터를 제공하지 않습니다. 화면 세부 정보를 조회하려면 캐시된 Screens 인터페이스에서 라이브 개체를 사용하세요.

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

# currentscreenchange 이벤트

현재 화면의 변경 사항(즉, 라이브 객체 currentScreen의 값)에만 관심이 있는 경우, currentscreenchange 이벤트를 수신할 수 있습니다.

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

# change 이벤트

마지막으로 구체적인 화면의 변경에만 관심이 있는 경우 해당 화면의 change 이벤트를 수신할 수 있습니다.

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

# 새로운 전체 화면 옵션

지금까지, 적절한 이름의 requestFullScreen() 메서드를 통해 요소가 전체 화면 모드로 표시되도록 요청할 수 있었습니다. 이 메서드는 FullscreenOptions를 전달할 수 있는 경우 options 매개 변수를 사용합니다. 지금까지 유일한 속성은 navigationUI입니다. Multi-Screen Window Placement API는 전체 화면 보기를 시작할 화면을 결정할 수 screen 속성을 추가합니다. 예를 들어 기본 화면을 전체 화면으로 만들려면 다음을 수행합니다.

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

# 폴리필

Multi-Screen Window Placement API를 폴리필할 수는 없지만 모양을 메꿔 다음과 같이 새 API에 대해서만 코딩할 수 있습니다.

if (!('getScreenDetails' in window)) {
  // 현재 스크린에서 one-element 반환,
  // 더 있을 수 있다는 것을 유의합니다.
  window.getScreenDetails = async () => [window.screen];
  // 거짓일 수 있다는 점에 유의하여 'false'로 설정합니다.
  window.screen.isExtended = false;
}

API의 다른 측면, 즉, 다양한 화면 변경 이벤트 및 FullscreenOptions의 screen 속성은 지원되지 않는 브라우저에서 각각 실행되거나 자동으로 무시되지 않습니다.

# 데모

여러분이 저와 같다면 다양한 암호 화폐의 발전을 예의주시하고 있을 겁니다. (사실 저는 이 행성을 사랑하기 때문에 별로 좋아하지 않지만, 이 기사를 위해 그냥 제가 그랬다고 가정합니다.) 제가 소유하고 있는 암호화폐를 추적하기 위해, 나는 내가 볼 수 있는 웹 앱을 개발했습니다. 제 침대의 안락함과 같은 모든 삶의 상황에서 시장은 괜찮은 단일 화면 설정을 가지고 있습니다.

이것은 암호화에 관한 것이기 때문에 시장은 언제든지 바빠질 수 있습니다. 이런 일이 발생하면 다중 화면 설정이 있는 책상으로 빠르게 이동할 수 있습니다. 통화 창을 클릭하면 반대쪽 화면의 전체 화면 보기에서 전체 세부 정보를 빠르게 볼 수 있습니다. 아래는 지난 YCY 유혈 사태 중에 찍은 최근 사진입니다. 그것은 저를 완전히 방심하게 했고 저는 제 얼굴에 손을 얹었습니다.

아래에 포함된 데모로 플레이하거나 글리치에서 소스 코드를 볼 수 있습니다.

# 보안 및 권한

Chrome 팀은 사용자 제어, 투명성 및 인체 공학을 포함하여 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 다중 화면 창 배치 API를 설계하고 구현했습니다. Multi-Screen Window Placement API는 장치에 연결된 화면에 대한 새로운 정보를 노출하여 사용자, 특히 여러 화면이 장치에 지속적으로 연결된 사용자의 지문 표면을 증가시킵니다. 이러한 개인 정보 보호 문제를 완화하기 위해 노출된 화면 속성은 일반적인 배치 사용 사례에 필요한 최소로 제한됩니다. 사이트가 다중 화면 정보를 얻고 다른 화면에 창을 배치하려면 사용자 권한이 필요합니다.

# 사용자 제어

사용자는 설정 노출을 완전히 제어할 수 있습니다. 브라우저의 사이트 정보 기능을 통해 권한 프롬프트를 수락하거나 거부하고 이전에 부여된 권한을 취소할 수 있습니다.

# 투명도

Multi-Screen Window Placement API를 사용할 수 있는 권한이 부여되었는지 여부는 브라우저의 사이트 정보에 노출되며 Permissions API를 통해서도 조회할 수 있습니다.

# 권한 지속성

브라우저는 권한 부여를 유지합니다. 권한 철회는 브라우저의 사이트 정보를 통해 가능합니다.

# 피드백

Chrome 팀은 Multi-Screen Window Placement API 사용 경험에 대해 듣고 싶습니다.

# API 설계에 대해 알려주세요

API에서 예상한 대로 작동하지 않는 부분이 있습니까? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었습니까? 보안 모델에 대한 질문이나 의견이 있으십니까?

• 해당 GitHub 리포지토리에 사양 문제를 제출하거나 기존 문제에 의견을 추가하세요.

# 구현 문제 보고

Chrome 구현에서 버그를 찾으셨나요? 아니면 구현이 사양과 다른가요?

• https://new.crbug.com에서 버그를 신고하세요 . 가능한 한 많은 세부 정보를 포함하고 버그를 재현하기 위한 간단한 지침을 제공하고 구성 요소 상자에 Blink>WindowDialog을 입력합니다. Glitch는 빠르고 쉬운 재현을 공유하는 데 유용합니다.

# API에 대한 지원 표시

Multi-Screen Window Placement API를 사용할 계획이십니까? Chrome 팀이 기능의 우선 순위를 정하고 브라우저 공급업체에 이 API의 지원이 얼마나 중요한지 보여주기 위해서는 여러분의 공개 지원이 힘이 됩니다.

• WICG Discourse 스레드에서 사용 계획을 공유하세요.
• #WindowPlacement 해시 태그로 @ChromiumDev에 트윗을 보내어 어디서 어떤 방법으로 이 API를 사용하는지 알려주세요.
• 다른 브라우저 공급업체에 API 구현을 요청하세요.

# 유용한 링크

• 사양 초안
• 공개 설명문
• Muti-Screen Window Placement API 데모 | Muti-Screen Window Placement API 데모 소스
• 크롬 버그 추적
• ChromeStatus.com 항목
• Blink 구성 요소: Blink>WindowDialog
• TAG 검토
• 실험 의도

# 감사의 말

Multi-Screen Window Placement API 사양은 Victor Costan과 Joshua Bell이 편집했습니다. API는 Mike Wasserman과 Adrienne Walker이 구현했습니다. 이 기사는 Joe Medley, François Beaufort 및 Kayce Basques가 검토했습니다. 사진을 제공한 Laura Torrent Puig에게 감사드립니다.