Chrome 69의 새로운 기능

피트 레페이지

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 Scroll Snap을 사용한 올바르게 제어된 스크롤 게시물을 참고하세요.

디스플레이 컷아웃 (노치라고도 함)

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

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

그런데 그 공간을 사용하고 싶다면 어떻게 해야 할까요?

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용 웹사이트 디자인에 관한 유용한 게시물을 확인하거나 설명서에서 자세한 내용을 확인하세요.

Web Locks 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에는 웹 잠금 기본 지침서가 있으며 더 자세한 설명과 다양한 예가 포함되어 있습니다. 또는 더 자세히 살펴보고 spec을 확인하세요.

그 외에도 다양한 기능 제공

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

원뿔 그라데이션

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

이스터 에그

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

Chrome의 New 에피소드 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 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

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