2021년 Chrome Dev Summit에서 발표된 모든 주요 발표 내용을 요약한 내용입니다. 자세한 내용을 알아볼 수 있는 링크가 포함되어 있습니다.
이 게시물에서는 2021년 Chrome Dev Summit에서 발표된 모든 주요 발표 내용을 요약하여 설명합니다. 자세한 내용을 알아볼 수 있는 링크도 포함되어 있습니다.
웹의 상호 운용 가능성 향상
웹 호환성은 웹 개발자에게 가장 큰 과제 중 하나이므로 Google은 flexbox, 그리드, position: sticky, aspect-ratio, transforms이라는 상위 5가지 호환성 문제를 해결하기 위해 다른 브라우저 공급업체와 협력하고 있습니다.
이러한 노력은 이미 이러한 주요 영역에서 개선으로 이어졌습니다. 관련 내용은 2021년 중반 업데이트에서 확인할 수 있습니다.
웹에서 새 애플리케이션 클래스 실행 허용
Project Fugu는 웹에 새로운 유형의 애플리케이션을 허용하는 것을 목표로 하는 프로젝트입니다. fugu-tracker.web.app에서 Fugu API의 진행 상황을 확인할 수 있습니다.
Adobe는 최근 Adobe, Google 및 웹 표준 조직 간의 협업을 통해 Photoshop을 웹에 도입할 것이라고 발표했습니다. 자세한 내용은 Photoshop의 웹 여정 게시물을 참고하세요.
개인 정보 보호 보장
일반적인 웹 기능 중에는 개인 정보 보호를 염두에 두고 설계되지 않은 서드 파티 쿠키와 기타 크로스 사이트 추적 메커니즘이 많이 사용되므로, 개인 정보 보호에 대한 요구가 증가함에 따라 개발자가 이를 제대로 달성하기 어렵습니다.
Google은 서드 파티 쿠키를 단계적으로 폐지하고 은밀한 추적 및 브라우저 디지털 지문 수집을 줄이기 위해 웹 커뮤니티 및 업계 이해관계자와 협력하여 생태계를 지원하는 새로운 개인 정보 보호 기술을 개발하고 있습니다.
개인 정보 보호 샌드박스 사이트에서 이 작업에 관해 알아보세요. 개발자를 위한 제안 관련 정보와 가이드, 월별 업데이트 또는 변경사항과 진행 상황, 사용자 에이전트 문자열 변경사항의 타임라인과 테스트 세부정보에 관한 정보도 제공합니다.
코어 웹 바이탈 개선
Google에서는 코어 웹 바이탈을 개선하기 위해 인기 자바스크립트 프레임워크 개발자와 협력해 왔으며, 그 일환으로 Google은 여러분의 의견을 듣고자 하는 두 가지 새로운 측정항목을 파악했습니다. 전반적인 반응성과 부드러움에 대해 읽어보고 의견을 알려주세요.
또한 현재 Canary에서 사용할 수 있는 새로운 Chrome DevTools의 Recorder 패널인 PageSpeed Insights의 업데이트된 버전 및 새로운 Lighthouse용 User Flow API도 발표되었습니다.
새로운 웹 플랫폼 기능 사용 설정
RenderingNG는 Chrome의 오래된 버그를 수정하고 새로운 기능을 잠금 해제하는 프로젝트인 Chromium의 렌더링 엔진의 야심 찬 리팩터링입니다. 여기에는 수년간 웹 개발자들이 가장 많이 요청해온 컨테이너 쿼리 기능이 포함됩니다.
컨테이너 쿼리는 미디어 쿼리를 사용하여 반응형 디자인을 만들어 본 모든 사람에게 익숙할 것입니다.
그러나 표시 영역 크기를 쿼리하는 내에서 구성요소가 있는 컨테이너의 크기를 쿼리할 수 있습니다.
Google은 Chrome의 #enable-container-queries 플래그에 기반한 새로운 사양의 무료 체험판을 구현하기 위해 노력해 왔습니다.
RenderingNG에 대해 자세히 다루는 블로그 게시물을 읽어보거나 이 동영상을 시청하여 한때는 불가능하다고 생각했던 기능 구현을 이 작업으로 실현하는 방법에 관한 주요 세부정보를 모두 확인하세요.
멋진 반응형 사이트를 만들 수 있도록 지원
새로운 반응형 디자인은 단순한 화면 또는 컨테이너 크기 그 이상입니다. 디자인 알아보기 과정에서 최신 반응형 사이트를 만드는 방법을 알아볼 수 있습니다. 처음 5개 모듈은 오늘 출시되며 나머지는 몇 주에 걸쳐 게시될 예정입니다.
올해 Chrome 및 기타 브라우저에 새로운 CSS 속성이 도입되어 멋진 환경을 더 쉽게 만들 수 있습니다.
accent-color 및 size-adjust에 관해 자세히 알아보세요.
새로운 CSS를 신속하게 활용할 수 있도록 일련의 레이아웃 패턴이 출시되었습니다. 이를 통해 많은 일반적인 인터페이스 패턴을 활용할 수 있습니다.
웹 기술을 배우는 데 도움이 되는 과정을 제공합니다.
디자인 학습 외에도 올해 초에 출시된 포괄적인 CSS 과정인 CSS 학습을 위한 새로운 모듈을 출시합니다.
또한 유용하고 접근성이 높은 양식을 만드는 데 도움이 되는 양식 알아보기 과정도 개발했습니다. 이러한 과정과 함께 PWA 알아보기의 처음 몇 가지 모듈을 찾아볼 수 있습니다.