Chrome팀은 사용자 환경과 성장하는 웹 생태계를 중시합니다. Google은 사용자가 정적 문서뿐만 아니라 대화형 기능이 풍부한 애플리케이션을 사용할 때 웹에서 최상의 환경을 경험할 수 있도록 노력하고 있습니다.
오픈소스 도구와 프레임워크는 개발자가 최신 웹용 앱을 빌드하는 동시에 우수한 개발자 환경을 지원하는 데 중요한 역할을 합니다. 이러한 프레임워크와 도구는 웹 구축을 위한 개인은 물론이고 규모에 상관없이 모든 기업을 지원합니다.
Google에서는 프레임워크가 성능, 접근성, 보안, 모바일 준비성과 같은 주요 품질 측면과 관련하여 개발자를 지원하는 데 큰 역할을 할 수 있다고 생각합니다. 모든 개발자와 사이트 소유자에게 이러한 분야의 전문가가 되어 끊임없이 변화하는 권장사항을 따르도록 요청하는 대신 기본 제공되는 솔루션으로 이를 지원할 수 있습니다. 이를 통해 개발자는 역량을 강화하고 제품 기능을 빌드하는 데 집중할 수 있습니다.
간단히 말하자면, Google의 비전은 높은 수준의 UX 품질이 웹용 앱 빌드의 부작용이 되는 것입니다.
Aurora: Chrome과 오픈소스 웹 프레임워크 및 도구 간의 공동작업
Google은 거의 2년 동안 Next.js, Nuxt, Angular와 같은 가장 인기 있는 프레임워크를 사용하여 웹 성능을 향상했습니다. 또한 Vue, ESLint, webpack과 같이 널리 사용되는 도구와 라이브러리에 자금을 지원했습니다. 오늘 이 노력의 이름은 Aurora입니다.
오로라는 하늘에 빛나는 자연광입니다. Google에서는 프레임워크로 빌드된 사용자 환경을 더욱 돋보이게 하기 위해 노력하고 있습니다. 이에 따라 Google은 이 이름을 선택하는 것이 적절하다고 판단했습니다.
앞으로 몇 달 내에 Aurora에 대한 자세한 내용을 공유할 예정입니다. 이 프로젝트는 소규모 Chrome 엔지니어팀 (내부 코드명 WebSDK)과 프레임워크 작성자 간의 협업입니다. Google의 목표는 렌더링하는 브라우저에 관계없이 프로덕션 앱에 가능한 한 최상의 사용자 환경을 제공하는 것입니다.
우리의 전략은 무엇입니까?
Google은 프레임워크와 도구를 사용하여 Google 검색, 지도, 이미지 검색, Google 포토와 같은 대규모 웹 애플리케이션을 빌드하고 유지관리하면서 많은 것을 배웠습니다. 강력한 기본값과 독보적인 도구를 제공하여 프레임워크가 예측 가능한 앱 품질에 중요한 역할을 하는 방법을 발견했습니다.
프레임워크는 클라이언트와 서버, 개발 및 프로덕션 환경 등 전체 시스템을 포괄하고 컴파일러, 번들러, 린터 등의 도구를 통합하므로 DX와 UX 모두에 영향을 미칠 수 있는 고유한 유리점이 있습니다.
솔루션이 프레임워크에 포함되면 개발자 팀이 이러한 솔루션을 사용하여 제품에 가장 중요한 일, 즉 사용자에게 유용한 기능을 제공하는 데 집중할 수 있습니다.
Google은 스택의 모든 레이어에 있는 도구를 개선하기 위해 노력하는 동안 Next.js, Nuxt, Angular CLI와 같은 프레임워크가 애플리케이션 수명 주기의 모든 단계를 관리합니다. 이러한 이유로, 그리고 React 채택이 핵심 UI 프레임워크 생태계 내에서 가장 규모가 크다는 사실에 따라 대부분의 최적화는 Next.js에서 증명된 후 생태계의 나머지 부분으로 확장하기 시작했습니다.
Aurora는 인기 있는 기술 스택의 적절한 레이어에 솔루션을 제공하여 대규모 성공을 지원합니다. 브라우저와 프레임워크 간의 격차를 해소하여 고품질 콘텐츠가 웹 빌드의 부작용이 되는 동시에 웹 플랫폼을 개선하기 위한 피드백 루프의 역할을 할 수 있습니다.
어떤 절차를 거치나요?
Aurora가 브라우저와 개발자 생태계를 연결하는 방식에 관한 Google의 원칙은 겸손, 호기심, 과학적 탐구, 실용주의입니다. Google은 프레임워크 작성자와 협력하여 개선사항을 적용하고, 커뮤니티와 협력하며, 변경사항을 적용하기 전에 실사를 합니다.
현재 작업 중인 새 기능을 위해 취하는 조치를 요약하면 다음과 같습니다.
- 대표 앱을 사용하여 인기 스택에서 사용자 경험의 고충을 파악합니다.
- '강력한 기본값'에 중점을 둔 이 문제를 해결하는 프로토타입 솔루션
- 다른 프레임워크 스택으로 기능을 확인하여 조정 가능한지 확인합니다.
- 일반적으로 성능에 대한 실험실 테스트를 통해 몇 가지 프로덕션 앱에서 실험하여 기능을 검증합니다.
- RFC 프로세스를 사용하여 커뮤니티 의견을 반영하여 Drive를 설계합니다.
- 일반적으로 깃발 뒤의 인기 스택에 지형지물을 배치합니다.
- 대표적인 프로덕션 앱에서 기능을 사용 설정하여 품질 및 개발자 워크플로 통합을 평가합니다.
- 기능을 채택하거나 업그레이드한 대표 프로덕션 앱의 측정항목을 추적하여 성능 개선을 측정합니다.
- 이 기능을 스택에서 기본값으로 사용 설정하면 업그레이드하는 모든 사용자에게 도움이 됩니다.
- 입증된 후 추가 프레임워크를 사용하여 기능을 추가하세요.
- 피드백 루프를 통해 웹 플랫폼의 격차를 파악합니다.
- 다음 문제로 넘어갑니다.
기본 도구와 플러그인 (webpack, Babel, ESLint, TypeScript 등)은 여러 프레임워크에서 공유됩니다. 이는 단일 프레임워크 스택에 기여하는 경우에도 물결 효과를 만드는 데 도움이 됩니다.
또한 Chrome Framework Fund는 자금을 지원하여 오픈소스 도구와 라이브러리를 지원합니다. 위에서 언급한 문제점과 솔루션 레이어가 다른 프레임워크 및 도구로 전환하려는 노력과 겹치는 부분이 충분하기를 바라지만, 더 많은 것을 할 수 있을 것으로 알고 있습니다. 이를 위해 Google에서는 개발자의 성공을 돕는 라이브러리와 프레임워크가 성공할 수 있도록 최선을 다하고 있습니다. 이것이 Google에서 Chrome Framework Fund에 계속 투자하는 이유 중 하나입니다. 지금까지 Webpack 5, Nuxt, 성능 및 ESLint 개선사항을 지원했습니다.
지금까지 어떤 성과를 이룰 수 있었나요?
Google의 작업은 이미지, JS, CSS, 글꼴과 같은 리소스의 기본 최적화에 중점을 두었습니다. Google에서는 여러 프레임워크의 기본값을 개선하기 위해 다음과 같은 여러 최적화를 제공했습니다.
- 이미지 로드 권장사항을 캡슐화한 후 Nuxt와 공동작업하는 Next.js의 이미지 구성요소입니다. 이 구성요소를 사용하여 페인트 시간과 레이아웃 변경이 크게 개선되었습니다(예: nextjs.org/give에서 최대 콘텐츠 페인트 57% 감소, 레이아웃 변경 횟수 100% 감소).
- 빌드 시간에 웹 글꼴 선언을 위해 CSS를 자동 인라인 처리했습니다. 이 기능은 Angular(Google Fonts) 및 Next.js (Google Fonts & Adobe Fonts)에 도입되어 최대 콘텐츠 페인트와 첫 번째 콘텐츠가 포함된 페인트(예)에서 현저하게 개선되었습니다.
- Angular 및 Next.js에서 모두 Critters를 사용하여 중요한 CSS를 인라인 처리하여 페인트 시간을 단축합니다. 일반적인 대규모 Angular 앱은 글꼴 CSS 인라인 기능과 결합되었을 때 Lighthouse 성능 점수가 20~30포인트 개선되었습니다.
- Next.js의 즉시 사용 가능한 ESLint 지원. 맞춤 플러그인과 공유 가능한 구성이 포함되어 빌드 시간에 일반적인 프레임워크 관련 문제를 더 쉽게 포착하여 로드 성능을 더 정확하게 예측할 수 있습니다.
- React 앱 만들기 및 Next.js에 기본 제공되는 성능 리레이어를 도입하여 Web Vitals 및 기타 맞춤 측정항목을 통해 페이지 성능을 더 쉽게 파악할 수 있도록 합니다.
- Next.js 및 Gatsby에 세분화된 청크 처리가 적용된 결과, 번들 크기가 30~70% 감소하는 동시에 캐싱 성능이 개선되었습니다. 이는 Webpack 5에서 기본값이 되었습니다.
- 최신 브라우저에서 번들 크기를 개선하기 위해 이전 브라우저를 위한 별도의 polyfill 청크(Next.js팀과 공동으로 작업)
이러한 모든 기능은 기본적으로 사용 설정되도록 자동화되어 있거나 간단한 선택 옵션만 있으면 됩니다. 이는 개발자가 워크플로에 복잡성을 더하지 않고도 손쉽게 이점을 누릴 수 있도록 하는 데 필수적입니다.
2021년의 계획은 무엇인가요?
올해 남은 기간 동안 Google은 프레임워크 스택이 사용자 환경을 개선하고 코어 웹 바이탈과 같은 측정항목에서 성능을 개선할 수 있도록 지원하는 데 집중할 것입니다. 이 작업에는 다음이 포함됩니다.
- 권장사항 시행을 위한 적합성 자세한 내용은 블로그 게시물을 확인하세요.
- 이미지, 글꼴, 중요한 CSS 최적화를 위한 Google의 협업을 바탕으로 초기 로드 성능 최적화
- 스크립트 구성요소를 기반으로 작업 기반을 구축하고 서드 파티 스크립트(3P)를 정렬하고 시퀀싱하는 최선의 방법에 관한 심층적인 연구를 수행하여 성능 저하를 최소화하면서 서드 파티 스크립트(3P)를 로드합니다.
- 규모에 맞는 자바스크립트 성능 (예: Next.js에서 React 서버 구성요소 지원)
우리 팀은 RFC와 이러한 아이디어에 대한 보다 정기적인 정보를 게시하여 진행하고자 하는 모든 프레임워크나 개발자가 이를 수행할 수 있도록 하는 것을 목표로 하고 있습니다.
결론
Aurora팀 (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, NextKatie, NextKatie)의 기본 커뮤니티는 오픈소스 Angular와 Angular에서 작업 환경을 긴밀하게 개선해 나가는 커뮤니티입니다. 시간이 지남에 따라 더 많은 프레임워크와 도구를 포함하도록 참여를 늘릴 것입니다 이 공간에서 내년에 Google 팀의 더 많은 블로그 게시물, 대담, RFC를 확인하세요. :)