Chrome 62의 새로운 기능

피트 레페이지

이 외에도 다양한 기능이 제공됩니다.

저는 피트 레페이지입니다. 지금부터 Chrome 62의 개발자를 위한 새로운 기능을 살펴보겠습니다.

변경사항의 전체 목록을 확인하시겠습니까? Chromium 소스 저장소 변경사항 목록을 확인하세요.

네트워크 품질 지표

Network Information API는 한동안 Chrome에서 사용할 수 있었지만 사용자의 연결을 고려하여 이론적인 네트워크 속도만 제공합니다. Wi-Fi에 있지만 2G 속도만 지원되는 모바일 핫스팟에 연결되어 있다고 상상해 보세요. API가 Wi-Fi를 보고합니다.

console.log(navigator.connection.type);
> wifi

Chrome 62에서는 클라이언트의 실제 네트워크 성능 측정항목을 제공하도록 API가 확장되었습니다. 이러한 네트워크 품질 신호를 사용하면 네트워크에 맞게 콘텐츠를 맞춤설정할 수 있습니다. 예를 들어 연결이 매우 느린 경우 축소된 버전을 제공하여 페이지 로드 성능을 개선할 수 있습니다.

애플리케이션 로직을 단순화하기 위해 API는 모바일 데이터 연결과 비교했을 때 측정된 네트워크 성능을 반환합니다. 예를 들어 초고속 광섬유 연결에 연결된 경우 API는 4G를 보고합니다.

console.log(navigator.connection.effectiveType);
> 4G

이러한 신호는 HTTP 요청 헤더로도 제공되며 클라이언트 힌트를 통해 사용 설정됩니다. 샘플을 확인하고 spec에서 자세히 알아보세요.

OpenType 가변 글꼴

기존에는 한 글꼴에 글꼴 모음의 단일 인스턴스만 포함했습니다(예: 두께 1개 또는 스트레치 1개). 일반, 굵은 기울임꼴, 기울임꼴을 사용하려면 세 개의 개별 글꼴을 포함하여 페이지의 두께를 늘려야 합니다.

OpenType 가변 글꼴은 단일 글꼴 파일로 압축할 수 있는 여러 개별 글꼴과 같습니다. font-variation-settings CSS 속성을 조정하면 늘이기, 스타일, 두께 등을 쉽게 조정할 수 있으므로 다양한 스타일을 다양하게 변형할 수 있습니다. 이제 이 세 글꼴을 하나의 압축 파일로 결합할 수 있습니다.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

OpenType 가변 글꼴은 반응형 서체를 만들고 페이지 크기를 줄일 수 있는 강력한 새 도구를 제공합니다. 자세한 내용은 John Hudson의 Intro OpenType Variable Fonts를 참고하세요.

DOM 요소에서 미디어 캡처

이제 Media Capture from DOM Elements API를 사용하여 오디오 및 동영상과 같은 HTMLMediaElements에서 직접 콘텐츠를 MediaStream로 실시간 캡처할 수 있습니다.

HTML 미디어 요소에서 captureStream()를 호출한 후 스트리밍된 콘텐츠를 조작, 처리, 원격으로 전송하거나 기록할 수 있습니다. 웹 오디오를 사용하여 나만의 이퀄라이저 또는 보코더를 만든다고 상상해 보세요. 또는 WebRTC를 사용하여 원격 사이트로 콘텐츠를 스트리밍합니다. 가능성은 거의 무한합니다.

일부 HTTP 페이지의 안전하지 않은 라벨

앞서 발표한 바와 같이 Chrome 62부터는 사용자가 HTTP 페이지에 데이터를 입력하면 Chrome에서 페이지를 '안전하지 않음'으로 표시하고 주소 표시줄에 라벨을 표시합니다. 이 라벨은 모든 HTTP 페이지의 시크릿 모드에서도 표시됩니다.

그 외에도 다양한 기능 제공

개발자를 위한 Chrome 62의 몇 가지 변경사항은 물론 이 외에도 많은 변경사항이 있습니다.

그런 다음 YouTube 채널을 구독하면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 63이 출시되면 바로 이곳에서 Chrome의 새로운 기능을 알려드리겠습니다.