3일간 진행되는 온라인 커뮤니티 이벤트 중에 발표된 주요 뉴스 및 업데이트의 요약과 예정된 지역 이벤트에 대한 알림입니다.
3일간 진행된 이벤트인 web.dev LIVE가 방금 끝났습니다. 웹 커뮤니티 일부가 온라인으로 모여 웹 개발 현황에 대해 이야기를 나누었습니다. Google은 매일 서로 다른 지역 시간대에서 시작했으며, Google 직원은 개발자가 웹을 안정적이고 강력하며 액세스할 수 있도록 유지하는 데 도움이 되는 도구와 지침을 제공한다는 취지로 다양한 업데이트, 뉴스, 팁을 공유했습니다.
실시간 스트림 중 일부를 놓쳤다면 모든 세션이 녹화되며 YouTube에서 시청할 수 있습니다. 또한 Google Developer 그룹에서 주최하는 전 세계적으로 예정된 지역 이벤트도 있으며, web.dev LIVE에서 다룬 내용과 관련된 주제에 관한 심층 세션도 제공됩니다.
3일 동안 공개된 몇 가지 뉴스와 업데이트를 자세히 살펴보겠습니다.
웹 바이탈
Chrome팀은 개발자가 웹에서 훌륭한 사용자 환경을 제공할 수 있도록 통합된 가이드, 측정항목, 도구를 제공하는 웹 바이탈 이니셔티브를 발표했습니다. 또한 Google 검색팀은 페이지 경험을 순위 기준으로 평가하고 코어 웹 바이탈 측정항목을 기반으로 포함할 것이라고 최근 발표했습니다.
2020 코어 웹 바이탈의 세 가지 핵심 요소는 페이지 콘텐츠의 로드, 상호작용성, 시각적 안정성이며, 이는 다음 측정항목으로 확인할 수 있습니다.
- 콘텐츠가 포함된 최대 페인트는 인지된 로드 속도를 측정하고 페이지의 주요 콘텐츠가 로드되었을 가능성이 있는 페이지 로드 타임라인의 특정 지점을 표시합니다.
- 최초 입력 반응 시간은 응답성을 측정하고 사용자가 페이지와 처음 상호작용하려고 할 때 느끼는 경험을 수치화합니다.
- 레이아웃 변경 횟수는 시각적 안정성을 측정하고 페이지 콘텐츠의 예상치 못한 움직임의 양을 정량화합니다.
web.dev LIVE에서 Google은 코어 웹 바이탈에 맞게 최적화하는 방법과 Chrome DevTools를 사용하여 사이트의 vitals 값을 탐색하는 방법에 관한 권장사항을 공유했습니다. 1일 차 일정 중 web.dev/live에서 확인할 수 있는 다른 성능 관련 대담도 많이 공유했습니다.
tooling.report
웹만큼 광범위한 플랫폼에 맞춰 앱을 개발하는 것은 쉬운 일이 아닙니다. 빌드 도구는 웹 개발 프로젝트의 중심에 있는 경우가 많으며, 개발자 및 제품 수명 주기를 처리하는 데 핵심적인 역할을 합니다.
Google은 다루기 힘든 빌드 구성 파일을 모두 살펴봤습니다. 및 도구 작성자가 웹의 복잡성을 극복할 수 있도록 tooling.report를 빌드했습니다. 이 웹사이트는 다음 프로젝트에 적합한 빌드 도구를 선택하거나, 한 도구에서 다른 도구로 마이그레이션할 가치가 있는지 판단하거나, 도구 구성 및 코드베이스에 권장사항을 통합하는 방법을 파악하는 데 도움이 되는 웹사이트입니다.
Google에서는 웹 개발 권장사항을 따를 수 있는 빌드 도구를 결정하는 테스트 모음을 설계했습니다. 우리는 빌드 도구 작성자와 협력하여 이들의 도구를 올바르게 사용하고 공정하게 대표하도록 했습니다.
tooling.report의 최초 출시에서는 webpack v4, Rollup v2, Parcel v2, Browserify with Gulp를 다루며, 이러한 기능은 현재 가장 많이 사용되는 빌드 도구로 보입니다. 커뮤니티의 도움을 받아 더욱 유연하게 더 많은 빌드 도구와 테스트를 추가할 수 있는 tooling.report는 빌드되었습니다.
테스트해야 할 권장사항이 누락된 경우 GitHub 문제에 제안하세요. 테스트를 작성하거나 초기 세트에 포함되지 않았던 새 도구를 추가하려는 경우 언제든지 참여해 주세요.
그동안 tooling.report 빌드에 대한 Google의 접근 방식을 자세히 알아보고 web.dev 라이브의 세션을 시청하세요.
웹상의 개인 정보 보호 및 보안
Chrome은 사용자의 개인 정보를 존중하고 모든 사용자가 웹을 이용할 수 있도록 하는 주요 사용 사례를 유지하는 개방형 웹을 믿습니다.
2019년에 Chrome은 기본적으로 쿠키를 퍼스트 파티 컨텍스트로 제한하고 서드 파티 컨텍스트용 쿠키를 명시적으로 표시하도록 요구하기 위해 쿠키 표준 업데이트를 제안했습니다. 특히 이는 크로스 사이트 요청 위조 공격에 대한 방어선을 제공합니다. 이 제안서는 현재 Chrome, Firefox, Edge, 기타 브라우저에서 채택되고 있습니다.
Chrome은 코로나19의 상황을 고려하여 이러한 변경사항을 일시적으로 롤백하기로 결정했지만 안타깝게도 사람들이 가장 취약한 위기 상황에서 이러한 유형의 공격이 증가하고 있습니다. 따라서 Chrome 84 안정화 버전 (2020년 7월 중순)이 출시되면 Chrome 80 이상의 모든 버전에서 변경사항이 다시 출시됩니다. 자세한 내용은 SameSite 쿠키 안내 및 web.dev LIVE 세션을 확인하세요.
또한 Chrome은 개인 정보 보호 샌드박스라는 배너 아래서 사용자가 웹 플랫폼을 사용하여 생계를 꾸리면서도 사용자 개인 정보를 더 안전하게 보호하는 사용 사례를 지원하는 것을 목표로 하는 여러 표준 제안서를 도입합니다. Chrome은 이러한 제안에 관한 의견을 적극적으로 수렴하고 있으며 W3C의 공개 포럼에 참여하여 제안과 제3자가 제출한 제안을 논의하고 있습니다. 이 이니셔티브에 관한 자세한 내용은 개방형 웹의 보안 및 개인 정보 보호 세션을 참고하세요.
마지막으로 사용자 보안을 살펴보면 스펙터는 한 브라우저 프로세스에서 실행되는 악성 코드가 출처가 다르더라도 해당 프로세스와 관련된 모든 데이터를 읽을 수 있다는 취약점입니다. 이를 위한 브라우저 완화 방법 중 하나는 사이트 격리입니다. 즉, 각 사이트를 별도의 프로세스에 배치합니다. 새로운 교차 출처 오프너 및 임베딩 정책 (COOP 및 COEP)에 관한 web.dev 라이브 세션을 시청하여 자세히 알아보세요.
강력한 기능으로 웹 구축
Chrome은 다양한 기기에서 사용자에게 가장 많이 도달할 수 있는 최고 품질의 웹 앱을 자유롭게 만들 수 있기를 바랍니다. PWA의 설치 가능성 및 안정성을 기능 프로젝트 (Project Fugu)와 결합한 Chrome은 플랫폼별 앱과 웹의 격차를 메워 개발자가 훌륭한 환경을 빌드하고 제공하는 데 도움이 되는 세 가지 사항에 중점을 두고 있습니다.
첫째, Chrome팀은 웹 개발자와 사용자에게 설치 환경을 더 세밀하게 제어하고 검색주소창에 설치 프로모션을 추가하는 등 다양한 기능을 제공하기 위해 열심히 노력해 왔습니다. 웹이 보편화되고 있음에도 불구하고 일부 비즈니스는 여전히 스토어에 앱을 제공하는 것이 중요합니다. 이를 위해 Chrome은 PWA를 Play 스토어로 간편하게 가져올 수 있는 라이브러리와 CLI인 Bubblewrap을 출시했습니다. 실제로 이제 PWABuilder.com이 내부적으로 Bubblewrap을 사용합니다. 기준을 충족한다면 마우스 클릭 몇 번만으로 APK를 생성하고 PWA를 Play 스토어에 업로드할 수 있습니다.
둘째, Chrome은 Web Share API로 시스템 수준의 공유 서비스를 호출하여 사진이나 노래 등을 공유하는 기능이나 설치된 다른 앱에서 콘텐츠를 공유할 때 콘텐츠를 수신하는 기능과 같이 운영체제와의 긴밀한 통합을 제공합니다. 앱 배지를 사용하여 사용자에게 최신 정보를 유지하거나 새로운 활동에 관해 섬세하게 알릴 수 있습니다. 또한 이제 사용자는 Chrome 84 (2020년 7월 중순)에 출시될 앱 바로가기를 사용하여 작업을 더 빠르게 시작할 수 있습니다.
마지막으로 Chrome은 사용자의 로컬 파일 시스템에 있는 파일을 읽고 쓰거나 로컬에 설치된 글꼴 목록을 가져와 사용자가 디자인에 사용할 수 있도록 하는 편집기와 같이 이전에는 불가능했던 새로운 시나리오를 가능하게 하는 새로운 기능을 개발하고 있습니다.
web.dev LIVE에서 Google은 플랫폼별 앱과 동일한 기능으로 동일한 종류의 환경을 제공할 수 있는 다른 많은 기능에 관해 알아봤습니다. 2일 차 일정에서 web.dev/live의 모든 세션을 확인하세요.
Chrome DevTools 및 Lighthouse 6.0의 새로운 기능
Chrome Devtools: 새로운 문제 탭, 색 결함 에뮬레이터, 웹 바이탈 지원
Chrome DevTools의 가장 강력한 기능 중 하나는 웹페이지에서 문제를 발견하여 개발자의 주의를 끌 수 있는 것입니다. 이는 개인 정보 보호 우선 웹의 다음 단계로 이동할 때 가장 적합합니다. Console의 알림 피로도와 복잡함을 줄이기 위해 Chrome DevTools는 먼저 쿠키 문제, 혼합 콘텐츠, COEP 문제라는 세 가지 유형의 중요한 문제에 초점을 맞춘 문제 탭을 출시했습니다. 시작하려면 문제 탭의 문제 찾기 및 해결에 관한 web.dev 라이브 세션을 시청하세요.
또한 코어 웹 바이탈이 웹 개발자가 추적하고 측정할 수 있는 가장 중요한 측정항목 집합 중 하나가 됨에 따라 DevTools는 개발자가 이러한 기준점을 기준으로 성능을 쉽게 추적할 수 있도록 하려고 합니다. 이제 이 세 가지 측정항목이 Chrome DevTools Performance 패널에 표시됩니다.
마지막으로 접근성에 중점을 두는 개발자가 많아짐에 따라 DevTools는 개발자가 흐릿한 시력 및 기타 유형의 시각 장애를 에뮬레이션할 수 있는 색각 이상 에뮬레이터를 도입했습니다. 이 기능과 다른 많은 기능에 대한 자세한 내용은 DevTools의 새로운 기능 세션을 참고하세요.
Lighthouse 6.0: 새로운 측정항목, 코어 웹 바이탈 실험실 측정 기능, 업데이트된 성능 점수, 새로운 감사
Lighthouse는 개발자가 사이트 성능을 개선하는 데 도움이 되는 오픈소스 자동화 도구입니다. 최신 버전에서 Lighthouse팀은 중요한 측정기준과 사용자 환경의 품질을 균형 있게 볼 수 있는 측정항목을 기반으로 유용한 정보를 제공하는 데 집중했습니다.
일관성을 위해 Lighthouse는 코어 웹 바이탈인 LCP, TBT (Lighthouse는 실험실 도구이며 FID는 현장에서만 측정 가능하므로 FID의 프록시), CLS를 지원합니다. Lighthouse는 세 가지 기존 측정항목인 첫 번째 의미 있는 페인트, 첫 번째 CPU 유휴 상태, 최대 잠재력 FID도 삭제했습니다. 이러한 삭제는 Lighthouse에서 측정하려는 사용자 환경 부분을 더 잘 반영하는 최신 측정항목과 측정항목 변동성 등의 고려사항으로 인해 발생합니다. 또한 Lighthouse는 사용자 의견을 기반으로 각 측정항목이 전체 성능 점수에 반영되는 정도도 조정했습니다.
또한 Lighthouse는 점수 계산기를 추가하여 버전 5와 6 점수를 비교하여 성과 점수를 살펴볼 수 있도록 했습니다. Lighthouse 6.0에서 감사를 실행하면 결과가 채워진 계산기 링크가 보고서에 제공됩니다.
마지막으로 Lighthouse는 JavaScript 분석 및 접근성에 중점을 둔 여러 새로운 감사를 추가했습니다.
자세한 내용은 속도 도구의 새로운 기능 세션을 참고하세요.
자세히 알아보기
웹 플랫폼의 기회와 과제에 대해 토론에 참여해 주신 커뮤니티의 모든 분께 감사드립니다.
이 게시물에서는 이벤트의 하이라이트를 요약했지만 이보다 훨씬 많은 정보를 담았습니다. 모든 세션을 확인하고 더 많은 콘텐츠를 이메일로 받아보려면 web.dev 뉴스레터를 구독하세요. web.dev/live의 지역 이벤트 섹션에서 거주 지역별로 예정된 커뮤니티 이벤트를 찾아보세요.