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