Chrome 126의 새로운 기능

Adriana Jara

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

• 문서 간 전환이 View Transitions API에서 새로 지원됩니다.
• CloseWatcher API를 다시 사용할 수 있습니다.
• 이제 Gamepad API에 trigger-rumble이 포함됩니다.
• 그 외에도 다양한 기능이 있으니까요.

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

동일 출처 탐색의 문서 간 뷰 전환

View Transitions API를 사용하면 다양한 뷰 간에 시각적인 매끄러운 전환을 만들 수 있습니다. 이제 이 API는 기본적으로 동일 출처 탐색에 사용할 수 있습니다. 이전에는 단일 페이지 애플리케이션 아키텍처에만 사용할 수 있었습니다.

문서 간 보기 전환을 구현하려면 양측이 모두 선택해야 합니다. 이렇게 하려면 view-Transition at-rule을 사용하고 탐색 설명자를 자동으로 설정합니다.

문서 간 뷰 전환은 동일한 문서 뷰 전환과 동일한 빌딩 블록과 원칙을 사용합니다.

@view-transition {
  navigation: auto;
}

자세한 내용은 View Transition API를 사용한 부드러운 전환을 참고하세요. 샘플 더보기

CloseWatcher API가 다시 사용 설정되었습니다.

<dialog> 및 popover="" 요소의 경우 CloseWatcher API를 사용하면 닫기 요청을 더 쉽게 처리할 수 있습니다. 예를 들어 데스크톱 플랫폼에서는 ESC 키, Android에서는 뒤로 동작 같은 것들이 있습니다.

이 기능은 Chrome 120에서 처음 제공되었지만 대화상자 요소와 예기치 않은 상호작용으로 인해 사용 중지되었습니다. 이전 문제를 최소화하기 위해 개선 후 Chrome 126에서 다시 사용 설정되었습니다.

CloseWatcher 사용 방법은 데모를 참조하세요.

Gamepad API 트리거 럼블 확장 프로그램

이제 트리거 소리 기능이 게임패드 API에 포함됩니다. 호환되는 컨트롤러에 대한 웹 게임 환경을 개선합니다.

trigger-rumble는 사용자에게 햅틱 반응을 제공하도록 설계된 컨트롤러의 하드웨어를 나타내는 인터페이스인 GamepadHapticActuator를 확장합니다 (사용 가능한 경우). trigger-rumble를 사용하면 Gamepad API를 사용하는 웹 애플리케이션이 게임패드 기기의 트리거도 진동할 수 있습니다.

다음 코드를 사용하면 브라우저에서 해당 기능이 지원되는지 확인하고 trigger-rumble를 트리거하는 방법을 확인할 수 있습니다.

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  // Feature detection.
  if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
    return;
  }
  gamepad.vibrationActuator.playEffect('trigger-rumble', {
    // Duration in ms.
    duration: duration,
    // The left trigger (between 0 and 1).
    leftTrigger: leftTrigger,
    // The right trigger (between 0 and 1).
    rightTrigger: rightTrigger,
  });
};

게임패드로 Chrome 공룡 게임 플레이하기에서 Gamepad API를 최대한 활용하는 방법을 자세히 알아보세요.

그 외에도 다양한 기능 제공

물론 이 외에도 많은 것이 있습니다.

• 이제 GeolocationCoordinates 및 GeolocationPosition에 .toJSON() 메서드가 포함됩니다.

• DevTools 업데이트에서 애플리케이션 > 전용 트리의 스토리지 버킷을 검사할 수 있습니다. 저장용량 섹션으로 이동합니다.

• 이제 ChromeOS에서 웹 앱용 탭 모드를 지원합니다.

전체 출시 노트 보기

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 다음 링크에서 Chrome 126의 추가 변경사항

• Chrome DevTools의 새로운 기능 (126)
• Chrome 126의 ChromeStatus.com 업데이트
• Chromium 소스 저장소 변경사항 목록
• Chrome 출시 캘린더

구독

최신 소식을 받아보려면 Chrome 개발자 YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

아드리아나 자라님, Chrome 127이 출시되면 바로 Chrome의 새로운 기능에 대해 알려드리겠습니다.