Chrome 107의 새로운 기능

Adriana Jara

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

저는 아드리아나 자라입니다. 이제 Chrome 107의 개발자를 위한 새로운 기능을 살펴보겠습니다.

Screen Capture API의 새로운 속성

이 버전에서 Screen Capture API가 새로운 속성을 추가하여 화면 공유 환경을 개선합니다.

DisplayMediaStreamOptions가 selfBrowserSurface 속성을 추가했습니다. 이 힌트를 사용하면 애플리케이션이 getDisplayMedia()를 호출할 때 현재 탭을 제외해야 한다고 브라우저에 알릴 수 있습니다.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

덕분에 실수로 인한 셀프 캡처를 방지하고 화상 회의에서 볼 수 있었던 '거울의 방' 현상을 방지할 수 있습니다.

DisplayMediaStreamOptions에는 이제 surfaceSwitching 속성도 있습니다. 이 속성은 Chrome에서 화면 공유 중에 탭 전환을 위한 버튼을 표시할지 여부를 프로그래매틱 방식으로 제어하는 옵션을 추가합니다. 이 옵션은 getDisplayMedia()에 전달됩니다. Share this tab instead 버튼을 사용하면 사용자는 화상 회의 탭으로 돌아가거나 긴 탭 목록에서 선택하지 않고도 새 탭으로 전환할 수 있지만, 이 동작은 웹 애플리케이션에서 처리하지 않는 경우 조건부로 표시됩니다.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

또한 MediaTrackConstraintSet는 displaySurface 속성을 추가합니다. getDisplayMedia()가 호출되면 브라우저에서 사용자에게 디스플레이 노출 영역(탭, 창, 모니터)을 선택할 수 있습니다. 이제 웹 앱에서 노출 영역 유형 중 하나가 더 눈에 띄게 제공되기를 원하는 경우 displaySurface 제약 조건을 사용하여 브라우저에 힌트를 표시할 수 있습니다.

예를 들어 단일 탭을 공유하는 것이 기본값이 될 수 있으므로 실수로 과도한 공유를 방지하는 데 도움이 될 수 있습니다. 이전 미디어 선택 도구 프롬프트와 새 미디어 선택 도구의 프롬프트 스크린샷

렌더링 차단 리소스 식별

페이지 성능에 대한 신뢰할 수 있는 통계는 개발자가 빠른 사용자 환경을 구축하는 데 매우 중요합니다. 지금까지 개발자들은 리소스가 렌더링을 차단하는지 여부를 판단할 때 복잡한 휴리스틱을 사용했습니다.

이제 Performance API에 포함된 renderBlockingStatus 속성은 브라우저에서 페이지가 다운로드될 때까지 페이지를 표시하지 못하게 하는 리소스를 식별하는 직접 신호를 제공합니다.

여기에 나와 있는 코드 스니펫은 모든 리소스 목록을 가져오고 새 renderBlockingStatus 속성을 사용하여 렌더링을 차단하는 모든 리소스를 나열하는 방법을 보여줍니다.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

리소스 로드 방식을 최적화하면 코어 웹 바이탈에 도움이 되며, 더 나은 사용자 환경을 제공하는 데 도움이 됩니다. MDN 문서에서 Performance API에 관해 자세히 알아보세요. 렌더링 차단 리소스를 찾아 최적화할 수 있습니다.

PendingBeacon API 오리진 트라이얼

선언적 PendingBeacon API를 사용하면 브라우저에서 비콘이 전송되는 시점을 제어할 수 있습니다.

비콘은 특정 응답을 기대하지 않고 백엔드 서버로 보내는 데이터 번들입니다.

애플리케이션은 사용자 방문이 끝날 때 이러한 비콘을 전송하려고 하지만 이 'send' 호출을 수행할 적절한 시간은 없습니다. 이 API는 전송을 브라우저 자체에 위임하므로 개발자가 정확한 시점에 전송 호출을 구현하지 않아도 page unload 또는 page hide에서 비콘을 지원할 수 있습니다.

오리진 트라이얼에 가입하고 API를 사용해 보시고 사용 사례 개선을 위한 의견을 보내주세요.

그 외에도 다양한 기능 제공

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

  • expect-ct http 헤더는 지원 중단되었습니다.
  • 이제 <form> 요소에서 rel 속성이 지원됩니다.
  • 지난번에 grid-template 보간 유형을 언급했지만 이번에는 포함해야 합니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 107의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

저는 아드리아나 자라입니다. Chrome 108이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.