Chrome 115의 새로운 기능

Adriana Jara

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

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

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

스크롤 기반 애니메이션

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

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

<ph type="x-smartling-placeholder">
</ph>
스크롤으로 구동되는 문서 상단의 읽기 표시기

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

<ph type="x-smartling-placeholder">
</ph>
이 페이지의 이미지는 시야에 들어올 때 페이드인됩니다.

기본적으로 요소에 연결된 애니메이션은 문서 타임라인에서 실행됩니다. 원본 시간은 페이지가 로드될 때 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();
}

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

분리 프레임

개인 정보 보호 샌드박스는 온라인에서 사용자의 개인 정보를 보호하고 개발자에게 성공적인 디지털 비즈니스를 구축할 수 있는 도구를 제공하는 기술을 개발하는 것을 목표로 하는 이니셔티브입니다.

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

  • 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, 공유 저장소 등에 관한 문서는 다음 도움말을 참고하세요.

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의 새로운 기능을 소개합니다.