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