이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 100의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

Chrome 100에는 3자리 버전 번호가 있습니다.
Chrome 첫 출시 이후 #100CoolWebMoments를 기념하여 추억을 돌아보세요.
사용자 에이전트 문자열에 몇 가지 중요한 변경사항이 있습니다.
Multi-Screen Window Placement API를 사용하면 사용자의 컴퓨터에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다.
이 외에도 다양한 기능이 준비되어 있습니다.

저는 피트 레페이지입니다. 이제 Chrome 100의 개발자를 위한 새로운 기능을 살펴보겠습니다

Chrome 100

브라우저가 처음 버전 10에 도달했을 때는 메이저 버전 번호가 한 자리에서 2자로 변경됨에 따라 몇 가지 문제가 있었습니다. 두 자리에서 세 자리로 쉽게 전환할 수 있는 몇 가지 사항을 배웠길 바랍니다.

현재 Chrome 100을 사용할 수 있으며, Firefox 100도 곧 출시될 예정입니다. 이러한 3자리 버전 번호는 어떤 식으로든 브라우저 버전을 식별하는 데 의존하는 사이트에서 문제를 일으킬 수 있습니다. 지난 몇 달 동안 Firefox팀과 Chrome팀은 브라우저에서 버전 번호 100을 보고하는 실험을 진행했습니다.

이로 인해 몇 가지 문제가 신고되었으며 그 중 많은 문제가 이미 해결되었습니다. 하지만 여전히 여러분의 도움이 필요합니다.

웹사이트 운영자인 경우 Chrome 및 Firefox 100으로 웹사이트를 테스트하세요.
사용자 에이전트 파싱 라이브러리를 개발하는 경우 100 이상 버전을 파싱하는 테스트를 추가합니다.

자세한 내용은 web.dev에서 Chrome 및 Firefox 곧 메이저 버전 100 출시를 참고하세요.

100가지 멋진 웹 순간

100 Cool Web Moments 프로모션 이미지

웹이 성장하는 것을 보고 지난 100개의 Chrome 출시를 통해 빌드한 멋진 기능을 모두 확인하는 시간이 즐거웠습니다. Google은 지난 14년 동안 일어난 #100CoolWebMoments를 기념하는 시간을 가볍게 돌아볼 수 있을 것이라고 생각했습니다.

가장 좋았던 순간을 알려주세요. 놓친 부분이 있다면 #100CoolWebMoments로 @Chromiumdev로 트윗하세요. 즐거운 시간 되세요.

축소된 사용자 에이전트 문자열

사용자 에이전트의 경우 Chrome 100이 기본적으로 축소되지 않은 사용자 에이전트 문자열을 지원하는 마지막 버전이 될 것입니다. 이는 사용자 에이전트 문자열 사용을 새로운 User-Agent Client Hints API로 대체하는 전략의 일부입니다.

Chrome 101부터 사용자 에이전트가 점진적으로 축소됩니다.

[Chromium 블로그][crblog]에서 사용자 에이전트 축소 오리진 트라이얼 및 날짜를 확인하여 무엇이 언제 삭제될지 자세히 알아보세요.

멀티스크린 창 배치 API

일부 앱에서는 새 창을 열어 특정 위치나 특정 디스플레이에 배치하는 것이 중요한 기능입니다. 예를 들어 Slides를 사용하여 발표할 때 슬라이드는 기본 디스플레이에 전체 화면으로 표시하고 발표자 노트를 다른 디스플레이에 표시하려고 합니다.

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

window.screen.isExtended를 사용하여 기기에 화면이 2개 이상 연결되어 있는지 빠르게 확인할 수 있습니다.

const isExtended = window.screen.isExtended;
// returns true/false

그러나 주요 기능은 연결된 디스플레이에 관한 세부정보를 제공하는 window.getScreenDetails()에 있습니다.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

예를 들어 기본 화면을 결정한 다음 requestFullscreen()를 사용하여 해당 디스플레이에서 요소를 전체 화면으로 만들 수 있습니다.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

또한 변경사항을 수신 대기하는 방법을 제공합니다(예: 새 디스플레이가 연결되거나 제거된 경우 해상도가 변경되는 경우 등).

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

자세한 내용은 web.dev에서 톰의 업데이트된 문서인 멀티스크린 창 배치 API로 여러 디스플레이 관리하기를 참고하세요.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

사용자가 부여한 HID 기기의 권한을 취소할 수 있는 HID 기기용 새로운 forget() 메서드가 있습니다.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

WebNFC의 경우 makeReadOnly() 메서드를 사용하면 NFC 태그를 영구적으로 읽기 전용으로 만들 수 있습니다.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. 아래 링크에서 Chrome 100의 추가 변경사항을 확인하세요.

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 101이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.