Chrome 100의 새로운 기능

Pete LePage

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

저는 피트 르페이지입니다. Chrome 100의 새로운 개발자 기능을 자세히 살펴보겠습니다.

Chrome 100

브라우저가 처음 버전 10에 도달했을 때 주 버전 번호가 한 자리에서 두 자리로 바뀌면서 몇 가지 문제가 발생했습니다. 숫자 2자리에서 3자리로 쉽게 전환하는 데 도움이 되는 몇 가지 사항을 알아보았기를 바랍니다.

Chrome 및 Firefox 로고

Chrome 100은 지금 바로 사용할 수 있으며 Firefox 100은 곧 출시될 예정입니다. 이 3자리 버전 번호는 어떤 방식으로든 브라우저 버전을 식별해야 하는 사이트에서 문제를 일으킬 수 있습니다. 지난 몇 개월 동안 Firefox팀과 Chrome팀은 브라우저가 버전 번호 100이 아닌데도 100이라고 보고하는 실험을 진행했습니다.

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

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

자세한 내용은 web.dev에서 Chrome 및 Firefox 메이저 버전 100 출시 예정을 확인하세요.

멋진 웹 순간 100선

멋진 웹 순간 100개 프로모션 이미지

지난 100번의 Chrome 출시를 통해 웹이 성장하고 개발자 여러분이 멋진 앱과 서비스를 만들어가는 모습을 지켜보는 것은 즐거운 일이었습니다. 지난 14년간 있었던 #100CoolWebMoments를 되돌아보고 추억을 되새겨 보는 시간을 가져보는 것이 좋겠다고 생각했습니다.

가장 좋아하는 순간을 알려주세요. 누락된 항목이 있다고 생각되면 @Chromiumdev에 #100CoolWebMoments를 포함하여 트윗해 주세요. 즐거운 시간 되세요.

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

사용자 에이전트와 관련하여 Chrome 100은 기본적으로 축소되지 않은 사용자 에이전트 문자열을 지원하는 마지막 버전입니다. 이는 User-Agent 문자열 사용을 새로운 User-Agent Client Hints API로 대체하기 위한 전략의 일환입니다.

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

[Chromium 블로그][crblog]에서 사용자 에이전트 축소 오리진 트라이얼 및 날짜를 확인하여 삭제되는 항목과 삭제 시기에 관해 자세히 알아보세요.

멀티스크린 창 배치 API

일부 앱의 경우 새 창을 열고 특정 위치 또는 특정 디스플레이에 배치하는 것이 중요한 기능입니다. 예를 들어 Slides를 사용하여 프레젠테이션할 때 슬라이드는 기본 디스플레이에 전체 화면으로 표시되고 발표자 메모는 다른 디스플레이에 표시되도록 하려면 어떻게 해야 하나요?

멀티스크린 창 배치 API를 사용하면 사용자의 머신에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다.

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

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에서 톰의 업데이트된 도움말 Multi-Screen Window Placement 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의 새로운 기능을 바로 알려드리겠습니다.