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

Chrome 94의 새로운 기능

Pete LePage

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

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

저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 94에서 개발자를 위해 새로 제공되는 기능을 자세히 살펴보겠습니다.

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

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

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

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

WebCodecs

페이지에 동영상을 게시하는 작업은 매우 간단합니다. 하지만 좀 더 복잡한 작업을 하고 동영상 스트림의 구성요소와 상호작용해야 하는 경우는 어렵습니다. 일반적으로 Web Assembly를 사용하여 자체 코덱을 제공해야 합니다.

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

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

Canvas 또는 ImageBitmap에서 네트워크 또는 저장소로의 경로 — `Canvas` 또는 `ImageBitmap`에서 네트워크 또는 저장소로의 경로

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

30초 안에 유용한 정보를 보여주기는 어렵습니다. web.dev의 WebCodecs를 사용한 동영상 처리에서 많은 코드와 멋진 데모를 통해 자세히 알아보세요.

WebGPU

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

Chrome 94에서 출처 트라이얼이 시작되며 Safari와 Firefox 모두 현재 구현 작업을 진행하고 있습니다.

WebGPU의 컴퓨팅 셰이더 기능을 사용하여 거친 바다를 시뮬레이션하는 Babylon.js 데모입니다.

프랑수아는 web.dev의 WebGPU로 최신 GPU 기능 액세스라는 상세한 자료와 함께 CPU와 GPU에서 실행되는 행렬 곱셈의 성능을 비교하는 유용한 문서를 제공하고 있습니다. 힌트는 다음과 같습니다. GPU가 이기게 됩니다.

PWA Summit

10월 6~7일에 PWA Summit이 개최됩니다. 프로그레시브 웹 앱으로 성공하는 데 도움이 되는 무료 온라인 컨퍼런스입니다. PWA Summit은 PWA 기술을 만드는 데 참여하는 Google, Intel, Microsoft, 삼성 등 여러 회사의 전문가들이 협력하는 자리입니다.

훌륭한 강연과 콘텐츠가 많이 있습니다. 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의 새로운 기능을 바로 알려드리겠습니다.