Chrome이 처음 출시된 지 10년이 되었습니다. 그 이후로 많은 변화가 있었지만 최신 웹 애플리케이션을 위한 견고한 기반을 구축한다는 목표는 변함이 없습니다.
Chrome 69에서는 다음을 지원합니다.
- CSS 스크롤 스냅을 사용하면 부드럽고 세련된 스크롤 환경을 만들 수 있습니다.
- 디스플레이 컷아웃을 사용하면 노치라고도 하는 디스플레이 컷아웃 뒤의 공간을 포함하여 화면의 전체 영역을 사용할 수 있습니다.
- 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용 웹사이트 디자인에 관한 좋은 게시물이 있습니다. 자세한 내용은 설명을 참고하세요.
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에는 훌륭한 Web Locks 입문서가 있으며, 여기에는 더 자세한 설명과 다양한 예시가 포함되어 있습니다. 또는 자세히 알아보고 사양을 확인하세요.
그 외에도 다양한 기능 제공
물론 Chrome 69에는 이 외에도 많은 변경사항이 있습니다.
- 이제 CSS4 사양에서 원뿔형 그라데이션을 사용하여 원의 둘레를 따라 색상 전환을 만들 수 있습니다.
Lea Verou에는 사용할 수 있는 CSS
conic-gradient()폴리필이 있으며, 페이지에는 커뮤니티에서 제출한 멋진 샘플이 많이 포함되어 있습니다. classList.toggle()과 유사하게 속성의 존재를 전환하는 요소에 새로운toggleAttribute()메서드가 있습니다.- JavaScript 배열에
flat()및flatMap()라는 두 가지 새로운 메서드가 추가됩니다. 모든 하위 배열 요소가 포함된 새 배열을 반환합니다. OffscreenCanvas는 작업을 기본 스레드에서 작업자로 이동하여 성능 병목 현상을 없애는 데 도움이 됩니다.
이스터 에그
동영상에서 부활절 달걀을 모두 찾으셨나요?
- Chrome 만화책
- Chromercise 밴드
- 감자 대포
- Pete Monster
- CDS 2017의 나무 공룡
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의 새로운 기능이 얼마나 발전했는지 확인해 보세요. 첫 번째 동영상부터 현재까지의 역사를 보여주는 30초 길이의 재미있는 진행 동영상을 확인해 보세요.
물론 시청해 주시고 댓글과 의견을 보내주신 여러분께도 감사드립니다. 모두 읽고 제안사항을 마음에 새기겠습니다. 여러분의 도움으로 동영상이 개선되었습니다.
시청해 주셔서 감사합니다.
Chrome NG 장면
재미있는 NG 장면 모음을 준비했습니다. 이 동영상을 시청한 후 몇 가지를 알게 되었습니다.
- 말을 더듬을 때 이상한 소리를 내요.
- 얼굴을 찡그리고 혀를 내밀어.
- 나는 많이 움직여.
구독
동영상에 대한 최신 소식을 받아보려면 Chrome Developers YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받으실 수 있습니다.
저는 Pete LePage입니다. Chrome 70이 출시되면 바로 여기에서 Chrome의 새로운 기능을 알려드리겠습니다.