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