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