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

Chrome 115의 새로운 기능

Adriana Jara

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

ScrollTimeline 및 ViewTimeline를 사용하여 사용자 환경을 개선하는 스크롤 기반 애니메이션을 만듭니다.
울타리 프레임은 다른 개인 정보 보호 샌드박스 API와 함께 작동하여 관련 콘텐츠를 삽입하는 동시에 불필요한 컨텍스트 공유를 방지합니다.
Topics API를 사용하면 브라우저가 개인 정보를 보호하면서 사용자의 관심분야에 관한 정보를 서드 파티와 공유할 수 있습니다.
그 밖에도 다양한 기능이 있습니다.

저는 아드리아나 자라입니다. Chrome 115의 새로운 개발자 기능을 자세히 살펴보겠습니다.

스크롤 기반 애니메이션

스크롤 기반 애니메이션은 웹에서 일반적인 UX 패턴입니다. 스크롤 기반 애니메이션은 스크롤 컨테이너의 스크롤 위치와 연결됩니다. 즉, 위 또는 아래로 스크롤하면 연결된 애니메이션이 직접적으로 앞뒤로 이동합니다.

다음 예는 몇 가지 사용 사례를 보여줍니다. 예를 들어 스크롤할 때 움직이는 읽기 표시기를 만들 수 있습니다.

스크롤에 의해 구동되는 문서 상단의 읽기 표시기입니다.

스크롤 기반 애니메이션은 시야에 들어올 때 페이드 인되는 요소를 만들 수도 있습니다.

이 페이지의 이미지는 시야에 들어올 때 페이드 인됩니다.

기본적으로 요소에 연결된 애니메이션은 문서 타임라인에서 실행됩니다. 원본 시간은 페이지가 로드될 때 0에서 시작해서 시간이 경과함에 따라 앞으로 빨라지기 시작합니다. 이것이 기본 애니메이션 타임라인이며 지금까지 액세스할 수 있었던 유일한 애니메이션 타임라인이었습니다.

스크롤 기반 애니메이션 사양은 사용할 수 있는 새로운 두 가지 유형의 타임라인을 정의합니다.

스크롤 진행률 타임라인: 특정 축을 따라 스크롤 컨테이너의 스크롤 위치에 연결된 타임라인입니다.
뷰 진행률 타임라인: 스크롤 컨테이너 내 특정 요소의 상대 위치에 연결된 타임라인입니다.

다음은 익명의 스크롤 진행률 타임라인을 사용하여 표시 영역 상단에 고정된 읽기 진행률 표시기를 만드는 코드 샘플입니다.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

자세한 내용과 더 많은 예시는 스크롤 드라이브 애니메이션을 참고하세요.

분리 프레임

개인 정보 보호 샌드박스는 온라인에서 개인 정보를 보호하고 개발자에게 성공적인 디지털 비즈니스를 구축하기 위한 도구를 제공하는 기술을 개발하기 위한 이니셔티브입니다.

제안의 대부분은 서드 파티 쿠키나 기타 추적 메커니즘 없이 크로스 사이트 사용 사례를 충족하는 것을 목표로 합니다. 예를 들면 다음과 같습니다.

Protected Audience API: 개인 정보를 보호하는 방식으로 관심 기반 광고 게재를 허용합니다.
공유 저장소: 보안된 환경에서 파티션되지 않은 크로스 사이트 데이터에 액세스할 수 있습니다.

개인 정보를 보호하기 위해 이러한 API 중 일부에는 콘텐츠를 삽입하는 새로운 방법이 필요합니다. 이 솔루션을 펜싱된 프레임이라고 합니다.

분리 프레임은 다른 개인 정보 보호 샌드박스 제안서와 함께 작동하여 단일 페이지 내에 여러 저장소 파티션의 문서를 표시합니다.

분리 프레임은 iframe과 비슷하게 삽입된 콘텐츠에 대한 HTML 요소입니다. 분리 프레임은 iframe과 달리 삽입 컨텍스트와의 통신을 제한하여 프레임이 삽입 컨텍스트와 공유하지 않고도 크로스 사이트 데이터에 액세스할 수 있도록 합니다.

마찬가지로 삽입 컨텍스트의 모든 퍼스트 파티 데이터는 격리된 프레임과 공유할 수 없습니다.

기능	`iframe`	`fencedframe`
콘텐츠 삽입	예	예
삽입된 콘텐츠가 삽입 컨텍스트 DOM에 액세스할 수 있음	예	아니요
삽입 컨텍스트가 삽입된 콘텐츠 DOM에 액세스할 수 있음	예	아니요
식별 가능한 속성(예: `name`)	예	아니요
URL (`http://example.com`개)	예	예 (사용 사례에 따라 다름)
브라우저에서 관리하는 불투명 소스 (`urn:uuid`)	아니요	예
교차 사이트 데이터 액세스	아니요	예 (사용 사례에 따라 다름)

예를 들어 news.example (삽입 컨텍스트)에서 shoes.example의 광고를 분리 프레임에 삽입한다고 가정해 보겠습니다. news.example는 shoes.example 광고에서 데이터를 유출할 수 없으며 shoes.example는 news.example에서 퍼스트 파티 데이터를 학습할 수 없습니다.

스토리지 파티셔닝 전후의 상태 비교

Fenced Frames, Protected Audience API, Shared Storage 등에 관한 문서는 이 도움말을 참고하세요.

Topics API

이전에는 서드 파티 쿠키 및 기타 메커니즘을 사용하여 사이트 전반에서 사용자의 탐색 행동을 추적하여 관심분야를 추론했습니다. 이러한 메커니즘은 개인 정보 보호 샌드박스 이니셔티브의 일환으로 단계적으로 중단되고 있습니다.

Topics API를 사용하면 브라우저에서 개인 정보를 보호하면서 사용자의 관심분야에 관한 정보를 서드 파티와 공유할 수 있습니다.

Topics API는 사용자가 방문하는 사이트를 추적하지 않고도 관심 기반 광고 (IBA)를 지원합니다. 브라우저는 탐색 활동을 기반으로 사용자가 관심을 가질 만한 주제를 관찰하고 기록합니다. 이 정보는 사용자 기기에 기록됩니다.

예를 들어 API는 knitting.example 웹사이트를 방문하는 사용자에게 "Fiber & Textile Arts" 주제를 제안할 수 있습니다.

주제는 광고 기술 플랫폼에서 관련성 높은 광고를 선택하는 데 도움이 되는 신호입니다. 서드 파티 쿠키와 달리 이 정보는 사용자 자신 또는 사용자의 탐색 활동에 대한 추가 정보를 공개하지 않고 공유됩니다.

주제 분류 및 Topics API 사용에 관한 자세한 내용은 개인 정보 보호 샌드박스 개요를 참고하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

기본 스레드에 있는 WebAssembly.Module의 최대 크기가 8MB로 증가함
이제 CSS display 속성이 기존의 사전 구성된 키워드 외에도 여러 키워드를 값으로 허용합니다.
기기 하드웨어의 현재 상태에 관한 대략적인 정보를 제공하는 Compute Pressure API의 출처 체험판이 있습니다.

추가 자료

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

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

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