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

Chrome 115의 새로운 기능

Adriana Jara

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

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

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

스크롤 기반 애니메이션

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

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

문서 상단의 읽기 표시기로, 스크롤로 구동됩니다.

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

이 페이지의 이미지가 페이드 인됩니다.

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

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

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

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

<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에서 퍼스트 파티 데이터를 학습할 수 없습니다.

스토리지 파티션 나누기 이전과 이후의 상태 비교

분리 프레임, Protected Audience API, 공유 저장소 등에 관한 문서는 이 도움말을 확인하세요.

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의 새로운 기능을 알려드리겠습니다.