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

Chrome 94의 새로운 기능

Pete LePage

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

<canvas> 요소의 기본 색상 공간이 이제 사양에 공식적으로 SRGB로 정의되며 Display P3로 변경할 수 있습니다.
WebCodecs는 기본 제공 오디오 및 동영상 코덱에 액세스하는 새로운 저수준 방법으로, 스트리밍 게임, 동영상 편집기 등에 중요합니다.
WebGPU가 오리진 트라이얼을 시작합니다.
PWA Summit이 10월 6~7일에 개최됩니다.
이 외에도 다양한 기능이 준비되어 있습니다.

저는 피트 레페이지입니다. 집에서 일하며 촬영을 하고 있습니다. 개발자를 위한 Chrome 94의 새로운 기능을 살펴보겠습니다.

`canvas` 요소의 기본 색상 공간

일부 사용자에게는 색상이 화면에서 렌더링되는 방식이 중요합니다. 사진가, 인쇄물 일러스트레이터 등의 경우 화면의 색상이 인쇄된 색상과 일치해야 합니다. Chrome 94부터 sRGB를 사용하여 <canvas> 요소가 완전 색상이 관리됩니다. 이전에는 sRGB가 규칙이지만 사양에 명시적으로 정의되지 않았습니다.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

더 중요한 점은 이제 <canvas> 렌더링 컨텍스트 2D 객체 또는 ImageData 객체(P3 색공간 포함)를 만들 때 사용할 색상 공간을 지정할 수 있다는 점입니다.

WebCodecs

페이지에 동영상을 올리는 것은 매우 쉽습니다. 하지만 좀 더 복잡한 작업을 하고 동영상 스트림의 구성요소와 상호작용해야 하는 경우에는 쉽지 않으며 일반적으로 웹 어셈블리를 사용하여 자체 코덱을 제공해야 합니다.

하지만 자체 코덱을 제공한다는 것은 브라우저에 이미 있는 코드를 작성한다는 뜻이며 하드웨어 가속을 활용할 수 없습니다. 웹 코덱 API를 사용하면 이미 브라우저에 있는 미디어 구성요소와 코덱을 사용할 수 있습니다.

개인적으로 저는 웹용 동영상을 인코딩하거나 GIF를 동영상 파일로 변환하는 올바른 명령줄 스위치를 항상 기억하지 못하고 있습니다. 저는 WebCodecs를 통해 제공되는 API를 사용해 파일을 읽고 웹에 필요한 올바른 파일을 내보내는 웹 앱을 빠르게 빌드할 수 있었습니다.

캔버스 또는 ImageBitmap에서 네트워크 또는 저장소로의 경로 — `Canvas` 또는 `ImageBitmap`에서 네트워크 또는 스토리지로의 경로

동영상 편집기, 화상 회의, 스트리밍 앱 등 미디어 콘텐츠가 처리되는 방식을 완전히 제어해야 하는 웹 앱 미디어 컨트롤에 내장된 브라우저에 대한 액세스는 막대합니다.

유용한 콘텐츠를 30초 안에 표시하기란 쉽지 않으므로 web.dev에서 WebCodecs를 사용한 동영상 처리에서 수많은 코드와 멋진 데모를 자세히 살펴보세요.

WebGPU

WebGPU는 최신 그래픽 기능, 특히 Direct3D 12, Metal, Vulkan을 노출하는 새로운 API입니다. WebGL과 비슷하다고 생각할 수 있지만 GPU의 고급 기능에 대한 액세스를 제공하며 GPU에서 일반 계산을 실행하기 위한 지원도 제공합니다.

Chrome 94에서 오리진 트라이얼을 시작할 예정이며, Safari와 Firefox는 현재 구현 작업을 진행 중입니다.

WebGPU의 컴퓨팅 셰이더 기능을 사용하여 시뮬레이션되는 대략적인 바다의 Babylon.js 데모입니다.

François는 web.dev에서 WebGPU로 최신 GPU 기능에 액세스하기에 관한 자세한 내용을 확인하고 CPU와 GPU에서 실행되는 행렬 곱셈의 성능을 비교합니다. 힌트를 드리겠습니다. GPU가 우선입니다.

PWA 서밋

PWA Summit이 10월 6~7일에 개최됩니다. 이 콘퍼런스는 모든 사용자가 프로그레시브 웹 앱을 통해 성공할 수 있도록 돕는 데 중점을 둔 무료 온라인 콘퍼런스입니다. PWA Summit은 Google, Intel, Microsoft, 삼성 등 PWA 기술 개발에 관여하는 소수의 회사들 간의 협업으로,

좋은 대담과 콘텐츠가 많이 준비되어 있습니다. PWASummit.org에서 자세한 내용을 알아보고 등록할 수 있습니다. 그곳에서 뵙기를 기대하겠습니다.

그 외에도 다양한 기능 제공

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

우선순위가 지정된 scheduler.postTask() 메서드를 사용하면 작업을 예약하고 우선순위를 동적으로 변경하거나 모두 취소할 수 있습니다.

스크롤바가 표시될 때 레이아웃을 재조정해야 했던 경우 scrollbar-gutter 속성을 사용하면 편리합니다. 스크롤바 여백의 존재를 제어할 수 있으므로 콘텐츠가 확장될 때 레이아웃 변경을 방지할 수 있습니다.

서드 파티 컨텍스트에서 WebSQL이 지원 중단되었으며 Chrome 97에서 삭제될 예정입니다. 웹 SQL 데이터베이스 표준은 2010년 11월에 폐기되었습니다. Firefox에서는 구현되지 않았으며 2019년에 Safari에서 지원 중단되었습니다. 지원이 중단되고 사용량이 충분히 적으면 Chrome에서 삭제됩니다. 아직 WebSQL을 사용하고 있다면 지금 바로 WebSQL에서 이전 계획을 세우는 것이 좋습니다.

또한 가상 키보드 API를 사용하면 가상 터치 키보드가 표시되는 방법과 시기를 더 세밀하게 제어할 수 있습니다. 이를 통해 키보드가 표시되거나 사라질 때 스크롤 동작 또는 레이아웃 변경을 명시적으로 제어할 수 있습니다.

추가 자료

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

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

저는 Pete LePage입니다. Chrome 95가 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다.