Chrome 62의 새로운 기능

Pete LePage

이 외에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 62의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

변경사항의 전체 목록을 확인하고 싶으신가요? Chromium 소스 저장소 변경사항 목록을 확인하세요.

네트워크 품질 지표

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

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

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

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

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

이러한 신호는 HTTP 요청 헤더로도 사용할 수 있으며 클라이언트 힌트를 통해 사용 설정됩니다. 샘플을 확인하고 사양을 자세히 살펴보세요.

OpenType 가변 글꼴

기존에는 하나의 글꼴에 하나의 글꼴 모음 인스턴스(예: 하나의 두께 또는 하나의 스트레치)만 포함되었습니다. 일반, 굵게, 기울임꼴을 원하는 경우 세 가지 별도의 글꼴을 포함하여 페이지의 두께를 늘려야 합니다.

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 가변 글꼴은 반응형 서체를 만들고 페이지 크기를 줄이는 강력한 새 도구를 제공합니다. 자세한 내용은 존 허드슨의 OpenType 가변 글꼴 소개를 참고하세요.

DOM 요소에서 미디어 캡처

이제 DOM Elements API의 미디어 캡처를 사용하여 오디오 및 동영상과 같은 HTMLMediaElements에서 직접 MediaStream로 콘텐츠를 라이브 캡처할 수 있습니다.

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

일부 HTTP 페이지에 표시되는 '안전하지 않음' 라벨

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

그 외에도 다양한 기능 제공

이는 Chrome 62의 개발자용 변경사항 중 일부에 불과하며, 물론 그 외에도 많은 변경사항이 있습니다.

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

저는 펫 르페이지입니다. Chrome 63이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.