Chrome Dev Summit 2021의 주요 인사이트

Chrome Dev Summit은 Chrome 전문가들이 최신 제품에 대한 하이라이트와 Chrome 및 웹의 미래에 대한 비전을 공유하는 연례 행사입니다.

이 문서에는 Chrome Dev Summit 2021의 주요 정보가 포함되어 있습니다.

Chrome 팀에서 발표한 가장 흥미로운 변경 사항은 다음과 같습니다.

• User-Agents 문자열에 있는 정보의 양을 제한할 계획,
• Lighthouse 및 DevTools의 사용자 흐름에 대한 새로운 지원 발표,
• 두 가지 새로운 성능 지표(Core Web Vitals 후보)를 소개합니다.
• 새로운 반응형 디자인 기능.

제3자 쿠키의 단계적 폐지 – 사용자 에이전트 클라이언트 힌트

개인 정보 보호 샌드박스 는 개인 정보 보호 중심의 웹을 만들기 위한 Google의 지속적인 노력의 핵심 요소 중 하나입니다.

브라우저는 사용자 지정 경험 제공, 사용자 로그인 유지 또는 교차 사이트 추적과 같은 유용한 용도로 타사 쿠키를 사용하고 있는지 여부를 알 수 없습니다.

출처: 바브 스미스

그렇기 때문에 Chrome은 타사 쿠키 없이도 기능(예: 광고, 사기 감지 또는 맞춤 콘텐츠 제공) 을 보존할 수 있는 특수 제작된 API를 만드는 것을 목표로 합니다.

개발자가 API를 채택할 시간을 확보한 후 Chrome은 타사 쿠키에 대한 지원을 안전하게 단계적으로 중단합니다.

새로운 기술과 개발 단계는 Privacy Sandbox Timeline에서 볼 수 있습니다.

올해 출시된 새로운 솔루션 중 하나는 UA-CH(User-Agent Client Hints)입니다.

User-Agent 문자열에는 브라우저 지문에 사용할 수 있는 사용자 장치 및 브라우저에 대한 많은 정보가 포함되어 있습니다.

Chrome은 User-Agent 문자열의 기본 정보 양을 줄이고 개별 사용자를 식별하기 어렵게 하여 브라우저 지문과 싸우는 것을 목표로 합니다. 문자열의 정보에는 다음 내용만 포함됩니다.

• 브라우저의 브랜드 및 버전,
• 데스크탑인지 모바일인지 정보
• 실행 중인 플랫폼입니다.

User-Agent 문자열은 기본적으로 대부분의 사용 사례를 다룰 수 있는 몇 가지 정보를 제공하지만 보다 자세한 정보는 요청 시 간단한 형식으로만 제공됩니다.

출처: 크롬 개발자

2022년 4월부터 Chrome은 점차적으로 사용자 에이전트 문자열을 줄입니다.

여전히 User-Agent Client Hints API를 사용하여 사용자에 대한 추가 데이터를 얻을 수 있지만 사용자는 공유할 정보의 양을 결정할 수 있습니다.

성능 도구 업데이트

Chrome은 웹 성능을 측정하고 분석하기 위한 몇 가지 흥미로운 변경 사항과 새로운 기능을 발표했습니다. 다음이 포함됩니다.

• PageSpeed ​​Insights의 UI 개선,
• Lighthouse 및 DevTools에서 사용자 흐름에 대한 지원 추가,
• 두 가지 새로운 실험 측정항목을 소개합니다.

PageSpeed ​​Insights 인터페이스의 변경 사항

PageSpeed ​​Insights UI 에 업데이트가 있어 더 직관적이고 데이터 표시가 개선되었습니다.

새 인터페이스에는 Lighthouse 보고서를 기반으로 하는 "Lab Data" 와 실제 사용자 경험을 기반으로 하는 "Field Data" 사이의 명확한 구분이 포함됩니다 .

또한 "보기 확장"이라는 새로운 기능이 필드 데이터 섹션에 기능을 추가합니다. 이를 사용하여 Core Web Vitals에 대한 세부 정보를 볼 수 있습니다.

Google은 또한 원본 요약을 필드 데이터 아래로 옮겼습니다. 그것을 클릭하면 동일한 출처의 모든 페이지에 대한 집계 점수를 볼 수 있습니다.

현장 및 실험실 데이터 섹션 아래에서 다음을 비롯한 유용한 추가 정보를 찾을 수 있습니다.

• 데이터 수집 기간,
• 방문 기간,
• 장치,
• 네트워크 연결,
• 표본의 크기,
• 크롬 버전.

핵심 성능 평가에도 변경 사항이 적용됩니다. 단일 "통과" 또는 "실패" 단어 대신 별도의 하위 섹션에서 사용할 수 있습니다.

마지막으로 로드 페이지의 이미지가 필드 섹션에서 제거됩니다. 랩 데이터 섹션에서 로딩 순서를 표시하는 이미지와 축소판을 찾을 수 있습니다.

Lighthouse의 사용자 흐름 지원

새로운 Lighthouse API를 사용하면 각 페이지의 성능을 개별적으로 분석하는 대신 링크 클릭, 스크롤 및 추가 페이지 로드를 시뮬레이션하여 사용자 흐름을 분석할 수 있습니다.

Lighthouse는 페이지 탐색, 주어진 시간 범위 동안 발생한 모든 사용자 상호 작용, 페이지의 캡처된 상태를 나타내는 스냅샷에 대한 별도의 보고서를 구별하고 제공할 수 있습니다.

출처: 후세인 지르데

새로운 기능을 사용하면 사용자 경험을 더 잘 이해하고 웹 사이트에서 사용자의 여정 전반에 걸쳐 성능 문제를 파악할 수 있습니다.

DevTools의 새 레코드 패널

사용자 흐름 분석 지원도 DevTools에 직접 추가되었습니다.

DevTools 에서 새로 출시된 Record Panel을 사용 하면 이제 웹사이트에서 전체 사용자 여정을 분석, 기록 및 내보낼 수 있습니다.

새 도구를 사용하면 성능 패널에서 직접 키 누르기 또는 링크 클릭과 같이 사용자가 웹사이트에서 수행하는 모든 작업을 볼 수 있습니다. 이 기능은 복잡한 상호 작용을 쉽게 이해하고 디버그하는 데 도움이 되는 것을 목표로 합니다.

두 가지 새로운 성능 측정항목

Chrome은 Core Web Vitals의 잠재적 후보로 두 가지 새로운 성능 측정항목을 발표했습니다.

민감도

반응성 은 페이지의 전반적인 반응성을 포착하기 위한 것입니다.

현재 First Input Delay를 사용하여 페이지가 로드되는 동안 반응하는 정도를 측정합니다. FID는 브라우저가 많은 리소스를 로드해야 하고 기본 스레드 시간이 많이 요구될 때 응답성이 특히 휘발성이기 때문에 유용한 메트릭입니다.

그러나 모든 FID 측정은 브라우저가 사용자 요청을 처리할 준비가 된 시간입니다. 주어진 페이지의 수명 주기 동안 입력 대기 시간을 측정할 수 없습니다.

Chrome 팀은 여전히 ​​새로운 응답성 측정항목을 개념화하고 있습니다. 여기에서 페이지 수명 주기 전반에 걸쳐 입력 대기 시간을 측정하는 문제에 대해 자세히 알아볼 수 있습니다 .

부드러움

부드러움 은 애니메이션 또는 스크롤 중에 측정 "더듬이" 또는 "멈춤"을 해결하는 것을 목표로 합니다. 이 새로운 메트릭은 애니메이션 프레임이 삭제되는 빈도와 사용자에게 미치는 영향을 더 잘 이해하는 것을 목표로 합니다.

제안된 퍼센트 드롭된 프레임 메트릭은 드롭된 프레임 수를 계산하고 사용자의 관점에서 애니메이션이 얼마나 부드러운지를 반영하는 평균 점수를 제시합니다.

중요한 것은 중요한 업데이트를 기다리는 시간의 비율입니다. 이는 사용자가 실제로 웹 콘텐츠의 부드러움을 경험하는 자연스러운 방식과 일치한다고 생각합니다. 지금까지 초기 측정항목 집합으로 다음을 사용했습니다 .

• 평균 드롭률: 전체 타임라인에서 유휴 상태가 아닌 모든 애니메이션 프레임에 대해
• 프레임 손실률의 최악의 경우: 1초 슬라이딩 창에서 측정한 것입니다.
• 삭제된 프레임 비율의 95번째 백분위수: 1초 슬라이딩 창에서 측정한 값입니다.

출처: web.dev

새로운 반응

반응형 디자인은 더 이상 휴대폰과 데스크톱에서 잘 작동하도록 웹사이트를 조정하는 것만이 아닙니다. 그 이상이며 개발자는 모든 사람에게 맞춤형 경험을 제공하고 다크 모드 또는 폴더블 장치와 같은 사용자 기본 설정을 포함해야 합니다.

반응형 디자인의 변경 사항은 CSS 기능과 관련이 있습니다. 일부 새로운 기능에는 새로운 컨테이너 쿼리 사양, 스크롤 타임라인 및 강조 색상 속성이 포함됩니다.

타이포그래피의 크기 조정 속성

특히 흥미로운 기능 중 하나는 타이포그래피의 크기 조정 속성입니다. 크기 조정을 사용하여 로드하려는 웹 글꼴과 일치하도록 기본 글꼴을 조정할 수 있습니다.

웹 글꼴 로딩으로 인한 이동을 줄여 누적 레이아웃 이동을 방지 할 수 있기 때문에 특히 중요합니다 .

다크 모드

또한 Chrome은 기계 학습 지원 자동 어둡게 알고리즘 기능을 개발 중입니다. 이는 브라우저가 자동으로 어두운 테마를 생성하고 이 기능을 선택 해제할 수 있음을 의미합니다.

Chrome의 새로운 자동 어둡게 기능에 대해 자세히 알아보고 기기에서 테스트 하려면 Chrome 개발자 페이지 를 방문하세요 .