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

Chrome 73의 새로운 기능

Pete LePage

Chrome 73에서는 다음에 대한 지원이 추가되었습니다.

서명된 HTTP 교환을 사용하여 휴대용 콘텐츠를 더 쉽게 만듭니다.
구성 가능한 스타일 시트를 사용하여 스타일을 동적으로 변경하기가 훨씬 쉬워집니다.
Mac에서 프로그레시브 웹 앱 지원이 제공되므로 모든 데스크톱 및 모바일 플랫폼에서 PWA를 지원할 수 있게 되었습니다. 이를 통해 웹을 통해 제공되는 설치 가능한 앱을 쉽게 만들 수 있습니다.

이 외에도 더 많은 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 73에서 개발자를 위한 새로운 기능을 자세히 살펴보겠습니다.

변경 로그

이 도움말에서는 일부 주요 내용만 다룹니다. Chrome 73의 추가 변경사항은 아래 링크를 참고하세요.

프로그레시브 웹 앱은 어디서나 작동합니다.

프로그레시브 웹 앱은 웹을 통해 직접 빌드 및 제공되는 설치 가능한 앱과 유사한 환경을 제공합니다. Chrome 73에서는 macOS 지원을 추가하여 모든 데스크톱 플랫폼(Mac, Windows, ChromeOS, Linux)과 모바일에 프로그레시브 웹 앱 지원을 제공하여 웹 앱 개발을 간소화했습니다.

프로그레시브 웹 앱은 빠르고 안정적입니다. 네트워크 연결 상태와 관계없이 항상 동일한 속도로 로드되고 실행됩니다. 기기 기능을 최대한 활용하는 최신 웹 기능을 통해 풍부하고 몰입도 높은 환경을 제공합니다.

사용자는 Chrome의 컨텍스트 메뉴에서 PWA를 설치하거나 개발자가 beforeinstallprompt 이벤트를 사용하여 설치 환경을 직접 승격할 수 있습니다. PWA는 설치되면 OS와 통합되어 네이티브 애플리케이션처럼 작동합니다. 사용자는 다른 앱과 동일한 위치에서 PWA를 찾아 실행하고, PWA는 자체 창에서 실행되며, 작업 전환 도구에 표시되고, 아이콘에 알림 배지가 표시될 수 있습니다.

웹과 네이티브 간의 기능 격차를 해소하여 웹에서 제공되는 최신 애플리케이션을 위한 견고한 기반을 제공하고자 합니다. 파일 시스템, wake lock, 주소 표시줄에 대기 배지 추가(사용자에게 PWA를 설치할 수 있음을 알림), 기업용 정책 설치 등과 같은 항목에 액세스할 수 있는 새로운 웹 플랫폼 기능을 추가하기 위해 노력하고 있습니다. 기타 다양한 기능도 추가할 예정입니다.

이미 모바일 PWA를 빌드하고 있다면 데스크톱 PWA도 다르지 않습니다. 사실 반응형 디자인을 사용했다면 이미 준비가 완료된 것입니다. 단일 코드베이스가 데스크톱과 모바일에서 모두 작동합니다. PWA를 이제 막 시작하는 경우 얼마나 쉽게 만들 수 있는지 놀랄 것입니다.

그런 다음 거기에서 반복합니다.

서명된 HTTP 교환

웹 패키지라는 신규 기술의 일부인 서명된 HTTP 교환(SXG)을 이제 Chrome 73에서 사용할 수 있습니다. 서명된 HTTP 교환을 사용하면 다른 당사자가 전송할 수 있는 '이동식' 콘텐츠를 만들 수 있습니다. 중요한 점은 원본 사이트의 무결성과 저작자 표시를 유지한다는 것입니다.

서명된 교환: 핵심

이렇게 하면 콘텐츠를 전송하는 서버에서 콘텐츠의 원본이 분리되지만 서명되었기 때문에 콘텐츠가 서버에서 전송되는 것과 같습니다. 브라우저가 이 서명된 교환을 로드하면 교환의 서명은 콘텐츠가 원래 출처에서 가져온 것임을 나타내므로 브라우저는 검색주소창에 URL을 안전하게 표시할 수 있습니다.

서명된 HTTP 교환을 사용하면 사용자에게 더 빠른 콘텐츠 전송이 가능해지므로 인증서의 비공개 키 제어권을 양도하지 않고도 CDN의 이점을 누릴 수 있습니다. AMP팀은 Google 검색 결과 페이지에서 서명된 HTTP 교환을 사용하여 AMP URL을 개선하고 검색 결과 클릭 속도를 높이는 계획을 세우고 있습니다.

시작하는 방법에 관한 자세한 내용은 Kinuko의 서명된 HTTP 교환 게시물을 참고하세요.

구성 가능한 스타일 시트

Chrome 73의 새로운 기능인 구성 가능한 스타일시트는 재사용 가능한 스타일을 생성하고 배포하는 새로운 방법을 제공합니다. 이는 Shadow DOM을 사용할 때 특히 중요합니다.

JavaScript를 사용하여 스타일시트를 만드는 것은 언제나 가능했습니다. document.createElement('style')를 사용하여 <style> 요소를 만듭니다. 그런 다음 시트 속성에 액세스하여 기본 CSSStyleSheet 인스턴스에 대한 참조를 가져오고 스타일을 설정합니다.

CSS 준비 및 적용을 보여주는 다이어그램

이 메서드를 사용하면 스타일 시트가 확장되는 경향이 있습니다. 더 나쁜 점은 스타일이 지정되지 않은 콘텐츠가 잠시 표시된다는 것입니다. 구성 가능한 스타일시트를 사용하면 공유 CSS 스타일을 정의하고 준비한 다음 이러한 스타일을 중복 없이 여러 섀도우 루트 또는 문서에 쉽게 적용할 수 있습니다.

공유 CSSStyleSheet의 업데이트는 채택된 모든 루트에 적용되며 시트가 로드되면 스타일시트 채택이 빠르고 동기식입니다.

간단하게 시작할 수 있습니다. 새 CSSStyleSheet 인스턴스를 만든 다음 replace 또는 replaceSync를 사용하여 스타일 시트 규칙을 업데이트하면 됩니다.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

자세한 내용과 코드 샘플은 제이슨 밀러의 구성 가능한 스타일시트: 원활하게 재사용 가능한 스타일 게시물을 확인하세요.

그 외에도 다양한 기능 제공

이는 Chrome 73에서 개발자를 위해 변경된 사항 중 일부에 불과하며, 물론 그 외에도 많은 변경사항이 있습니다.

matchAll()는 문자열 프로토타입의 새로운 정규 표현식 일치 메서드로, 전체 일치가 포함된 배열을 반환합니다.
이제 <link> 요소는 HTMLImageElement의 srcset 및 sizes 속성에 상응하는 imagesrcset 및 imagesizes 속성을 지원합니다.
이제 Blink의 그림자 흐리게 처리 반지름 구현이 Firefox 및 Safari와 일치합니다.
이제 Mac에서 Chrome UI용 어두운 모드가 지원되며 Windows도 곧 지원될 예정입니다. 또한 사용자가 시스템에서 밝은 색상 테마 또는 어두운 색상 테마를 사용하도록 요청했는지 감지하는 데 사용할 수 있는 CSS 미디어 쿼리인 prefers-color-scheme도 있습니다. 이 버그를 추적하는 버그는 Chrome 및 Firefox의 CSS prefers-color-scheme 미디어 기능 지원 추가입니다.

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

저는 Pete LePage입니다. Chrome 74가 출시되는 즉시 Chrome의 새로운 기능을 소개해 드리겠습니다.