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

Chrome 69의 새로운 기능

Pete LePage

Chrome이 처음 출시된 지 10년이 지났습니다. 그 이후로 많은 변화가 있었지만 최신 웹 애플리케이션을 위한 견고한 기반을 구축한다는 목표는 변함이 없습니다.

Chrome 69에는 다음 지원이 추가되었습니다.

CSS Scroll Snap을 사용하면 부드럽고 매끄러운 스크롤 환경을 만들 수 있습니다.
디스플레이 컷아웃을 사용하면 디스플레이 컷아웃 뒤에 있는 공간(노치라고도 함)을 포함하여 화면의 전체 영역을 사용할 수 있습니다.
Web Locks API를 사용하면 잠금을 비동기식으로 획득하고 작업이 실행되는 동안 잠금을 유지한 다음 해제할 수 있습니다.

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

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

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

CSS 스크롤 스냅

데모 보기 | 소스

CSS 스크롤 스냅을 사용하면 각 스크롤 작업 후 브라우저에 멈출 위치를 알려주는 스크롤 스냅 위치를 선언하여 부드럽고 매끄러운 스크롤 환경을 만들 수 있습니다. 이는 이미지 캐러셀이나 사용자가 특정 지점으로 스크롤해야 하는 페이지로 나뉜 섹션에 매우 유용합니다.

이미지 캐러셀의 경우 스크롤 컨테이너에 scroll-snap-type: x mandatory;를 추가하고 각 이미지에 scroll-snap-align: center;를 추가합니다. 그러면 사용자가 캐러셀을 스크롤할 때 각 이미지가 부드럽게 스크롤되어 완벽한 위치에 배치됩니다.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS 스크롤 스냅은 스냅 타겟의 크기가 다르거나 스크롤러보다 클 때도 잘 작동합니다. 자세한 내용과 사용해 볼 수 있는 샘플은 CSS 스크롤 스냅으로 잘 제어된 스크롤 게시물을 확인하세요.

디스플레이 컷아웃(노치)

디스플레이 컷아웃이 있는 휴대전화 — 브라우저는 콘텐츠가 컷아웃으로 가려지지 않도록 디스플레이 컷아웃이 있는 휴대기기에 여백을 추가합니다.

노치라고도 하는 디스플레이 컷아웃이 있는 휴대기기가 점점 늘어나고 있습니다. 이를 해결하기 위해 브라우저는 콘텐츠가 노치로 가려지지 않도록 페이지에 약간의 여백을 추가합니다.

하지만 이 공간을 사용하려면 어떻게 해야 할까요?

이제 CSS 환경 변수와 viewport-fit 메타 태그를 사용하면 됩니다. 예를 들어 브라우저에 디스플레이 컷아웃 영역 안으로 확장되도록 지시하려면 viewport 메타 태그의 viewport-fit 속성을 cover로 설정합니다.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

그런 다음 safe-area-inset-* CSS 환경 변수를 사용하여 콘텐츠를 배치할 수 있습니다.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

WebKit 블로그에서 iPhone X용 웹사이트 디자인에 관한 유용한 게시물을 확인하거나 설명을 참고하여 자세한 내용을 알아보세요.

웹 잠금 API

Web Locks API를 사용하면 비동기식으로 잠금을 획득하고 작업이 실행되는 동안 잠금을 유지한 다음 해제할 수 있습니다. 잠금이 유지되는 동안에는 원본의 다른 스크립트가 동일한 잠금을 획득할 수 없으므로 공유 리소스 사용을 조정하는 데 도움이 됩니다.

예를 들어 여러 탭에서 실행되는 웹 앱이 하나의 탭만 네트워크에 동기화되도록 하려는 경우 동기화 코드는 network_sync_lock라는 잠금을 획득하려고 시도합니다.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

잠금을 획득하는 첫 번째 탭은 데이터를 네트워크에 동기화합니다. 다른 탭에서 동일한 잠금을 획득하려고 하면 대기열에 추가됩니다. 잠금이 해제되면 다음에 큐에 추가된 요청에 잠금이 부여되고 실행됩니다.

MDN에는 유용한 웹 잠금 소개가 있으며 더 심층적인 설명과 많은 예시가 포함되어 있습니다. 또는 더 자세히 살펴보고 사양을 확인하세요.

그 외에도 다양한 기능 제공

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

원뿔형 그라데이션

이제 CSS4 사양에서 원뿔형 그라데이션을 사용하여 원의 둘레를 중심으로 색상 전환을 만들 수 있습니다. Lea Verou에는 사용할 수 있는 CSS conic-gradient() 폴리필이 있으며 이 페이지에는 정말 멋진 커뮤니티 제출 샘플이 많이 포함되어 있습니다.
요소에 classList.toggle()와 유사하게 속성의 존재를 전환하는 새로운 toggleAttribute() 메서드가 있습니다.
JavaScript 배열에 flat() 및 flatMap()라는 두 가지 새 메서드가 추가됩니다. 모든 하위 배열 요소가 병합된 새 배열을 반환합니다.
그리고 OffscreenCanvas는 작업을 기본 스레드에서 작업자로 이동하여 성능 병목 현상을 제거하는 데 도움이 됩니다.

이스터 에그

동영상에서 이스터 에그를 모두 찾으셨나요?

Chrome의 새로운 기능 28편을 만드는 데 도움을 주신 모든 분들께 감사드립니다. 이 모든 분들이 정말 멋집니다.

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

첫 에피소드 이후 Chrome의 New 기능이 얼마나 발전했는지 확인하고 싶으신가요? 첫 번째 동영상부터 오늘까지의 과정을 보여주는 재미있는 30초 진행 동영상을 확인해 보세요.

그리고 시청해 주시고 댓글과 의견을 보내주셔서 감사합니다. 제가 모두 읽었으며, 제가 제안해 주신 의견을 중요하게 생각합니다. 여러분의 도움으로 동영상이 더욱 좋아지고 있어요!

시청해 주셔서 감사합니다.

Chrome의 새로운 기능에 관한 실수 모음

즐겁게 시청하실 수 있도록 재미있는 실수 모음 리엘을 준비했습니다. 동영상을 시청한 후 몇 가지를 알게 되었습니다.

단어를 넘기면 이상한 소리가 납니다.
표정을 지어 보거나 혀를 내밀어 봅니다.
저는 흔들림이 심합니다.

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

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