Core Web Vitals의 중요성이 커짐에 따라 사이트 소유자와 개발자는 성능과 주요 사용자 경험에 점점 더 많은 관심을 기울이고 있습니다. Google에서 페이지를 평가, 최적화 및 모니터링하는 데 도움이 되는 많은 도구를 제공하지만 다양한 데이터 소스와 이를 효과적으로 사용하는 방법을 혼동하는 경우가 많습니다. 이 가이드에서는 여러 도구를 결합하는 워크플로를 제안하고 개발 프로세스에서 이러한 도구가 적절한 위치와 방법을 명확히 설명합니다.

2025년 2월에 Baseline과 관련하여 다양한 소식을 확인해 보세요.

ruby-align이 이제 기준에 포함됨

게시일: 2025년 2월 20일 대규모 AI 모델을 안정적으로 다운로드하는 것은 어려운 작업입니다. 사용자가 인터넷 연결이 끊기거나 웹사이트 또는 웹 애플리케이션을 닫으면 부분적으로 다운로드된 모델 파일이 손실되며 페이지로 돌아와 다시 시작해야 합니다. Background Fetch API 를 점진적 개선으로 사용하면 사용자 환경을 크게 개선할 수 있습니다. Browser Support Source Background Fetch API를

rel=prefetch 리소스 힌트와 사용 방법을 알아보세요.

레이아웃 변경을 식별하고 수정하는 방법을 알아보세요.

레이아웃 변경 횟수 (CLS)는 사용자가 페이지 콘텐츠의 갑작스러운 변화를 경험하는 빈도를 정량화하는 측정항목입니다. 이 가이드에서는 크기 또는 동적 콘텐츠가 없는 이미지 및 iframe과 같이 CLS의 일반적인 원인을 최적화하는 방법을 다룹니다.

CSS scrollbar-color 및 scrollbar-gutter가 모든 주요 브라우저 엔진에 적용되어 이제 기준으로 새로 사용할 수 있습니다.

이번 첫 번째 버전에서는 2025년 1월에 Google과 웹 개발자 커뮤니티에서 Baseline과 관련하여 진행된 활동을 다룹니다.

이제 모든 주요 브라우저 엔진에 WebAssembly 가비지 컬렉션 및 Wasm 테일 콜 최적화가 적용되어 기준을 새로 사용할 수 있습니다.

이 게시물에서는 최대 콘텐츠 렌더링 시간 (LCP) 측정항목을 소개하고 측정 방법을 설명합니다.

이제 Promise.try가 모든 주요 브라우저 엔진에 출시되어 기준을 새로 사용할 수 있습니다.

간략한 설명

게시일: 2024년 1월 13일 기존 머신러닝 모델과 최신 대규모 언어 모델 (LLM)을 사용하여 AI로 빌드할 수 있는 멋진 프로젝트가 많이 있습니다. LLM을 사용하면 컴퓨터가 새로운 콘텐츠를 생성하고, 요약을 작성하고, 텍스트의 감정을 분석하는 등 다양한 작업을 할 수 있습니다. 지난 몇 년 동안 사람들은 첨단 자연어 처리 (NLP)를 사용하여 사용자와 대화하는 Gemini 및 ChatGPT와 같은 애플리케이션을 사용할 수 있었습니다.

게시일: 2024년 1월 13일 이 도움말은 LLM 및 챗봇에 관한 3부 시리즈 중 첫 번째입니다. WebLLM으로 챗봇 빌드 에 관한 2부와 Prompt API 사용 에 관한 3부는 이미 게시되어 있습니다. 대규모 언어 모델 (LLM)은 소프트웨어 개발에서 중요한 구성요소가 되고 있습니다. LLM은 자연 언어 텍스트를 생성하고 처리하는 데 적합하며 데이터 추출, 요약, 사용자 데이터와의 대화 지원과 같은 사용 사례를 활용할 수 있습니다. 이

'기본 스레드를 차단하지 말고' '장기 작업을 중단'해야 한다는 말을 들었는데 이러한 작업을 수행한다는 것은 어떤 의미일까요?

CSS 마스킹은 이미지를 마스크 레이어로 사용할 수 있는 옵션을 제공합니다. 즉, 이미지, SVG 또는 그래디언트를 마스크로 사용하여 이미지 편집기 없이도 흥미로운 효과를 만들 수 있습니다.

웹 지형지물 데이터 세트, 웹 플랫폼 상태 대시보드, 기준 상태 위젯 등 2024년 기준을 되돌아보세요.

이 게시물에서는 지연 로드와 동영상 지연 로드에 사용할 수 있는 옵션을 설명합니다.

모듈 미리 로드는 JavaScript 모듈을 선언적으로 미리 로드하는 방법을 제공합니다.

사용자 환경을 최적화하려면 사용자가 양식과 상호작용하는 방식을 이해하는 것이 중요합니다. 브라우저 자동 완성은 이 과정에서 중요한 역할을 합니다. 사용자가 양식에서 자동 완성을 사용하는 방식에 관한 데이터를 수집하고 분석하는 방법을 알아보세요.

악성 콘텐츠 감지는 사용자를 보호하고 더 안전한 온라인 환경을 조성합니다. 두 번째 부분에서는 근본적으로 악의적인 표현을 감지하고 완화하는 클라이언트 측 AI 도구를 빌드하는 방법을 알아봅니다.

이 게시물에서는 총 차단 시간 (TBT) 측정항목과 이 측정항목을 측정하는 방법을 설명합니다.

LCP 분석 및 개선이 필요한 주요 영역을 파악하는 방법에 관한 단계별 안내

실제 환경과 실험실 환경에서 사이트의 웹 바이탈을 측정하는 방법을 알아보세요.

Chrome에서 웹 성능을 최적화하고 Core Web Vitals를 개선할 수 있는 가장 큰 기회로 파악한 권장사항 모음

건전한 사이트를 위한 필수 측정항목

이제 CSS content-visibility 속성을 기준으로 새로 사용할 수 있습니다.

코어 웹 바이탈 기준점의 기반이 되는 연구 및 방법론

필드 데이터를 살펴본 결과 상호작용이 느린 것으로 나타났습니다. 다음 단계에서는 이러한 상호작용을 수동으로 테스트하는 방법을 자세히 알아보고 그 원인을 파악합니다.

이 도움말에서는 Baseline의 기원, Google의 참여, WebDX 커뮤니티 그룹의 소유권에 대해 설명합니다.

브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지가 즉시 로드되도록 최적화하는 방법에 대해 알아보세요.

CSS 중첩이 훨씬 개선됩니다.

분석과 관련된 실제 사용자 문제를 식별하고 해결하는 데 도움이 되도록 성능 데이터와 디버그 정보를 함께 표시하는 방법을 알아보세요.

이 게시물에서는 최초 입력 반응 시간 (FID) 측정항목을 소개하고 측정 방법을 설명합니다.

Google 도구를 사용하여 Core Web Vitals와 광고 수익의 상관관계를 파악하는 방법을 알아보세요.

@property는 CSS의 성능에 어떤 영향을 미치나요?

이 게시물에서는 로드 속성 및 이 속성을 사용하여 iframe 로드를 제어하는 방법을 설명합니다.

브라우저에 데이터를 저장하는 다양한 옵션이 있습니다. 요구사항에 가장 적합한 것은 무엇인가요?

동일한 도메인을 재사용하는 여러 PWA를 빌드하는 데 권장되는 방법과 권장되지 않는 방법마다 장단점을 살펴봅니다.

푸시 알림 구독을 관리하고 푸시 서비스에 웹 푸시 프로토콜 요청을 보내는 서버를 구축하는 방법을 보여주는 단계별 대화형 튜토리얼입니다.

프로그레시브 웹 앱 설치 가능 기준

PWA의 웹 앱 매니페스트에서 아이콘, 바로가기, 색상, 기타 메타데이터를 변경하는 데 필요한 작업입니다.

좋은 프로그레시브 웹 앱 또는 훌륭한 프로그레시브 웹 앱의 특징은 무엇인가요?

웹 앱 매니페스트는 웹 앱의 작동 방식을 브라우저에 알려주는 간단한 JSON 파일입니다.

교차 사이트 스크립팅에 대한 심층 방어로 스크립트 nonce 또는 해시를 기반으로 CSP를 배포하는 방법을 알아보세요.

이 도움말은 웹 개발자가 특정 기기에 따라 올바른 하드웨어 API를 선택하는 데 도움이 됩니다.

관련 출처 요청을 사용하여 사이트 전반에서 패스키 재사용을 허용하는 방법을 알아보세요.

이 게시물에서는 로드 속성 및 이 속성을 사용하여 이미지 로드를 제어하는 방법을 다룹니다.

웹사이트에 최적화된 이미지를 제공하려면 먼저 적절한 이미지 형식을 선택해야 합니다. 이 게시물은 올바른 선택을 하는 데 도움이 됩니다.

맞춤 측정항목을 사용하면 사이트 고유의 사이트 환경을 측정하고 최적화할 수 있습니다.

Web Vitals 데이터를 Google 애널리틱스 4 속성으로 전송하는 방법과 BigQuery 및 Looker Studio에서 분석할 수 있도록 이러한 데이터를 내보내는 방법을 알아보세요.

이 가이드에서는 불필요한 메시지 및 액세스 차단을 최소화하기 위해 사용자에게 민감한 기능 (예: 카메라, 마이크, 위치)에 대한 액세스 권한을 요청할 때 따라야 할 웹사이트에서 따라야 할 권장사항을 설명합니다.

쿠키 알림이 실적, 실적 측정, UX에 미치는 영향을 알아보세요.

웹 개발자는 미디어 알림을 맞춤설정하고 Media Session API를 사용하여 변경을 추적하거나 탐색하는 것과 같은 미디어 관련 이벤트에 응답할 수 있습니다.

요소의 탭 위치를 명시적으로 설정하려면 tabindex 속성을 사용합니다.

실험실에서 웹사이트의 '다음 페인트에 대한 상호작용'을 최적화하기 위해 느린 상호작용을 재현하려면 먼저 필드 데이터를 사용하여 '다음 페인트'에 대한 상호작용을 찾아야 합니다. 이 가이드에서 그 방법을 알아보세요.

이 게시물에서는 TTFB (Time to First Byte) 측정항목을 소개하고 측정 방법을 설명합니다.

다양한 LLM, 모델, 모델 크기에서 원하는 결과를 얻기 위해 프롬프트를 조정하는 방법을 알아보세요.

이 게시물에서는 '다음 페인트와의 상호작용 (INP)' 측정항목을 소개하고 작동 방식, 측정 방법, 개선 방법에 관한 제안사항을 제공합니다.

설명: Light-dark() 함수를 사용하여 사용된 색 구성표에 반응하는 색상을 정의합니다.

이 가이드에서는 WebAssembly의 이점을 활용하려는 웹 개발자를 대상으로, 실행 중인 예제를 통해 Wasm을 활용하여 CPU 집약적인 작업을 아웃소싱하는 방법을 알아봅니다.

CSS 그리드에서 `grid-template-columns` 및 `grid-template-rows` 속성을 사용하면 각각 선 이름을 정의하고 그리드 열과 행의 크기를 추적할 수 있습니다. 이러한 속성에 보간 유형을 지원하면 애니메이션이나 전환의 중간 지점에서 그리드 레이아웃이 상태 간에 부드럽게 전환할 수 있습니다.

Gamepad API로 웹 게임을 제어하는 방법을 알아보세요.

inert 속성은 포커스 이벤트 및 보조 기술의 이벤트를 비롯하여 요소의 사용자 입력 이벤트를 삭제하고 복원하는 방법을 단순화하는 전역 HTML 속성입니다.

신뢰할 수 있는 당사자는 AAGUID를 검사하여 패스키의 출처를 확인할 수 있습니다. 작동 방식을 알아보세요.

ExampleScript라는 합성 장난감 언어의 예를 사용하여 Binaryen.js API를 사용하여 자바스크립트에서 WebAssembly 모듈을 작성하고 최적화하는 방법을 알아봅니다.

<model-viewer> 웹 구성요소를 사용하면 웹페이지에서 3D 모델을 선언적으로 사용할 수 있습니다.

오디오/동영상 캡처는 오랫동안 웹 개발의 '무한한 가능성'이었습니다. 오랫동안 브라우저 플러그인 ( Flash 또는 Silverlight )을 사용해 이 작업을 처리해야 했습니다. 어서요! HTML5가 해결해 줍니다. 분명하게 보이지 않을 수 있지만 HTML5의 등장으로 기기 하드웨어에 대한 액세스가 급증했습니다. Geolocation (GPS), Orientation API (가속도계), WebGL (GPU), Web Audio API

WebAuthn에서 `userVerification` 을 사용하는 방법 알아보기

RUM 데이터가 CrUX와 다른 코어 웹 바이탈 수치를 표시할 수 있는 이유를 알아보세요.

누구나 이용할 수 있고 포용적인 사이트를 구축하는 것이 중요합니다. 최적화할 수 있는 주요 장애 영역은 6가지 이상(시각, 청각, 운동성, 인지, 언어, 신경)이 있습니다.

타사 스크립트는 다양하고 유용한 기능을 제공하여 웹을 더욱 동적으로 만듭니다. 서드 파티 스크립트의 로드를 최적화하여 성능에 미치는 영향을 줄이는 방법을 알아보세요.

사용자의 비밀번호 관리자에 패스키가 이미 있는 경우 새 패스키를 만들지 못하게 하는 방법을 알아보세요.

IndexedDB의 기본사항에 관한 가이드입니다.

지금 바로 사용할 수 있는 가치 있고 강력하며 안정적인 CSS입니다.

Time to First Byte(첫 바이트까지의 시간) 측정항목을 최적화하는 방법을 알아봅니다.

호스트, 사이트, 출처의 차이점은 무엇인가요? eTLD란 무엇인가요? 이 도움말에서 설명하는 내용은 다음과 같습니다.

검색 가능한 사용자 인증 정보란 무엇이고 사용 사례에 적합한 사용자 환경을 빌드하는 방법을 알아봅니다.

사용자는 사이트와 앱이 제대로 실행되지 않으면 이를 알아차립니다. 따라서 렌더링 성능 최적화는 매우 중요합니다.

요소의 콘텐츠 직사각형 크기가 변경되면 `ResizeObserver` 를 통해 알려주므로 적절하게 반응할 수 있습니다.

불필요한 리소스 다운로드를 제거한 후 페이지 로드 속도를 개선하기 위해 할 수 있는 가장 좋은 작업은 나머지 리소스를 최적화하고 압축하여 전체 다운로드 크기를 최소화하는 것입니다.

이 문서에서는 웹 앱에서 그래픽을 렌더링할 때 OffscreenCanvas API를 사용하여 성능을 개선하는 방법을 설명합니다.

이 게시물에서는 콘텐츠가 포함된 첫 페인트 (FCP) 측정항목을 소개하고 측정 방법을 설명합니다.

이 도움말에서는 콘텐츠 전송 네트워크 (CDN)를 포괄적으로 간략하게 설명합니다. 또한 CDN 설정을 선택, 구성, 최적화하는 방법을 설명합니다.

사용자가 웹사이트에서 로그아웃했을 때 취해야 할 조치에 대한 실용적인 개발자 가이드입니다.

이 게시물에서는 상호작용 시작 시간 (TTI) 측정항목을 소개하고 이를 측정하는 방법을 설명합니다.

Fetch Priority API는 브라우저에 대한 리소스의 상대적 우선순위를 나타냅니다. 로드를 최적화하고 코어 웹 바이탈을 개선할 수 있습니다.

:user-유효한 가상 클래스와 :user-invalid 가상 클래스 정보 및 이를 사용하여 입력 유효성 검사의 사용자 환경을 개선하는 방법

비즈니스 의사 결정권자와 개발자가 아닌 사람들이 코어 웹 바이탈을 개선하는 방법을 알아보세요.

문자열에 base64 인코딩 및 디코딩을 적용할 때 발생하는 일반적인 문제를 파악하고 피합니다.

Subgrid를 사용하면 그리드를 공유할 수 있으므로 중첩된 그리드를 상위 및 동위 요소에 정렬할 수 있습니다.

오늘날의 디지털 세상에서 온라인 광고는 모두가 즐기는 무료 웹의 중요한 부분입니다. 하지만 광고가 제대로 구현되지 않으면 탐색 속도가 느려지고 사용자가 불만을 느끼며 참여도가 저하될 수 있습니다. 페이지 속도에 영향을 주지 않고 원활한 사용자 환경을 보장하며 웹사이트 소유자의 수익 기회를 극대화하는 방법을 알아보세요.

코드 적용 범위가 무엇인지 알아보고 4가지 일반적인 측정 방법을 살펴보세요.

테스트해야 하는 것과 배제할 수 있는 것을 결정합니다.

테스트할 대상을 결정하고, 테스트 사례를 정의하고, 우선순위를 정합니다.

사용자 중심 실적 측정항목은 실제 사용자에게 도움이 되는 방식으로 사이트 경험을 이해하고 개선하는 데 중요한 도구입니다.

우수한 사용자 환경을 보장하기 위해 반응형 이미지를 미리 로드하는 새롭고 흥미로운 가능성을 알아보세요.

사용자가 콘텐츠를 편안하게 읽을 수 있도록 사용자의 환경설정에 맞게 글꼴을 조정하는 방법입니다.

다양한 테스트 유형을 프로젝트에 맞는 합리적인 전략으로 결합하는 방법을 알아보세요.

기본적인 것부터 시작해 보겠습니다. 두 가지 일반 테스트 모드와 세 가지 일반적인 테스트 자동화 유형을 살펴봅니다.

리소스를 주기적으로 감사하여 각 리소스가 더 나은 사용자 환경을 제공하는 데 도움이 되는지 확인해야 합니다.

mkbitmap C 프로그램은 이미지를 읽고 반전, 하이패스 필터링, 확장, 임계값 연산 중 하나 이상을 순서대로 적용합니다. 각 작업을 개별적으로 제어하고 사용 설정하거나 중지할 수 있습니다. 이 도움말에서는 mkbitmap을 WebAssembly로 컴파일하는 방법을 설명합니다.

실행 프로그램을 위한 휴대용 바이너리 코드 형식 및 해당 텍스트 형식인 WebAssembly (약어: Wasm)와 이러한 프로그램과 호스트 환경 간의 상호작용을 용이하게 하는 소프트웨어 인터페이스에 대한 소개입니다.

파일 시스템 표준은 출처 비공개 파일 시스템 (OPFS)을 페이지 출처에 비공개인 스토리지 엔드포인트로 도입합니다. 이 엔드포인트는 사용자에게 표시되지 않으며 성능에 최적화된 특수한 종류의 파일에 대한 선택적 액세스를 제공합니다. 출처 비공개 파일 시스템은 최신 브라우저에서 지원되며 웹 하이퍼텍스트 애플리케이션 기술 작업 그룹 ( WHATWG )에서 파일 시스템 실시간 표준 으로 표준화했습니다. 브라우저 지원 소스 컴퓨터의 파일을 생각하면

웹 애플리케이션에 사용자 제어 콘텐츠를 안전하게 표시하는 방법

생태계에서 AVIF가 채택되는 방식과 개발자가 스틸 이미지 및 애니메이션에 AVIF를 통해 기대할 수 있는 성능 및 품질상의 이점에 관한 개요입니다.

웹사이트의 다음 페인트와의 상호작용을 최적화하는 방법을 알아보세요.

Baseline의 일부 기능 알아보기

스크립트를 로드할 때 브라우저에서 실행 전에 평가하는 데 시간이 걸리므로 작업이 오래 걸릴 수 있습니다. 스크립트 평가의 작동 방식과 페이지 로드 중에 스크립트로 인해 긴 작업이 발생하지 않도록 할 수 있는 방법을 알아보세요.

큰 DOM 크기는 상호작용이 빠른지 여부에 영향을 미칠 수 있습니다. DOM 크기와 INP의 관계, DOM 크기를 줄이기 위해 취할 수 있는 조치 및 페이지에 DOM 요소가 많은 경우 렌더링 작업을 제한하는 다른 방법에 대해 자세히 알아보세요.

자바스크립트로 HTML을 렌더링하는 것은 서버에서 전송한 HTML을 렌더링하는 것과 다르며 성능에 영향을 줄 수 있습니다. 이 가이드에서 차이점에 대해 알아보고, 특히 상호 작용과 관련된 웹사이트의 렌더링 성능을 유지하기 위해 취할 수 있는 조치에 대해 알아보세요.

입력 지연은 전체 상호작용 지연 시간에 크게 영향을 줄 수 있으며 페이지의 INP에 부정적인 영향을 미칠 수 있습니다. 이 가이드에서는 입력 지연의 정의와 더 빠른 상호작용을 위해 입력을 줄이는 방법을 알아봅니다.

이 게시물에서는 레이아웃 변경 횟수 (CLS) 측정항목을 소개하고 이를 측정하는 방법을 설명합니다.

WebAssembly가 포함된 브라우저에서만 실행되는 PHP 기반 전체 WordPress

WebAssembly 덕분에 이제 웹에서 사용할 수 있는 도구의 쇼케이스입니다.

프로그레시브 웹 앱은 Android Play 스토어나 Microsoft 스토어 등의 앱 스토어에 제출할 수 있습니다.

소스 맵으로 웹 디버깅 환경을 개선합니다.

지금 바로 사용할 수 있는 가치 있고 강력하며 안정적인 CSS입니다.

CSS에서 사인, 코사인, 탄젠트 등을 계산합니다.

requestVideoFrameCallback() 메서드를 사용하면 웹 작성자가 새 동영상 프레임이 컴포지터에 전송될 때 렌더링 단계에서 실행되는 콜백을 등록할 수 있습니다.

Google Developers Experts (GDE) 프로그램 회원과의 인터뷰 중 하나입니다.

이 블로그 게시물에서는 미디어 앱을 위한 새로운 패턴 모음을 발표합니다.

범위 지정된 맞춤 속성과 background-clip을 사용하여 애니메이션 그래디언트 텍스트 효과를 만들어 보겠습니다. CodePen 으로 이동하여 새 펜을 만듭니다. 텍스트의 마크업을 만듭니다. '빠른'이라는 단어가 포함된 제목을 사용해 보겠습니다. 그런 다음 body 에 더 어두운 background-color 를 적용해 보겠습니다. 텍스트의 font-size 를 올립니다. clamp 를 사용하여 반응형으로 만듭니다. 사용할 색상에 맞는

Chrometober에서 재미있고 공포스러운 도움말 및 유용한 정보를 공유하기 위해 스크롤책이 살아나는 과정을 소개합니다.

색상 적응형과 액세스 가능한 도움말 맞춤 요소를 빌드하는 방법에 관한 기본적인 개요입니다.

패스키는 웹사이트의 사용자 계정을 더 안전하고 간단하며 사용하기 쉽고 비밀번호가 없는 상태로 만들어 줍니다. 이 도움말에서는 기존 비밀번호 사용자를 수용하면서 패스키를 사용한 비밀번호 없는 로그인을 설계하는 방법을 설명합니다.

패스키는 웹사이트의 사용자 계정을 더 안전하고 간단하며 사용하기 쉽고 비밀번호가 없는 상태로 만들어 줍니다. 이 도움말에서는 사용자가 웹사이트의 패스키를 만들 수 있도록 허용하는 방법을 설명합니다.

색상 적응성과 응답성이 뛰어나며 접근성이 뛰어난 FAB 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

코어 웹 바이탈에 맞게 웹 글꼴을 최적화하는 방법을 알아보세요.

Google Developers Experts (GDE) 프로그램 회원과의 인터뷰 중 하나입니다.

범위 지정된 맞춤 속성과 animation-timing-function을 사용하여 애니메이션 CSS 로더를 만들어 보겠습니다. CodePen 으로 이동하여 새 펜을 만듭니다. 로더의 마크업을 만듭니다. 인라인 맞춤 속성을 사용하는 방법을 확인합니다. 생성기 ( Pug )를 사용하여 줄 수를 구성할 수도 있습니다. 로더에 스타일을 지정합니다. 절대 위치 지정과 calc 와 transform 의 조합을 사용하여 선을 배치합니다. --index 를

디자인의 접근성 있는 색상 대비를 테스트하고 확인하는 세 가지 도구와 기법에 대한 개요입니다.

이 튜토리얼에서는 웹사이트에서 액세스 가능한 기본 탐색을 빌드하는 방법을 설명합니다. 의미론적 HTML, 접근성, ARIA 속성 사용이 때때로 도움이 되는 것보다 더 많은 해가 될 수 있는 방법에 대해 배웁니다.

이 편리한 CSS 의사 선택기를 사용하면 모달인 요소를 선택할 수 있습니다.

CSS로 착시 현상을 재현하는 방법을 재미있게 알아보세요.

목록의 스타일을 지정할 수 있는 유용하고 창의적인 방법을 살펴보세요.

Core Web Vitals의 태그 및 태그 관리자를 최적화합니다.

디자인 시스템 및 구성요소 라이브러리에서 맞춤 속성을 사용할 때의 이점

개별 변환, 회전, 배율 조정 속성을 사용하여 직관적인 방식으로 변환에 접근하는 방법을 알아봅니다.

CSS에서 테두리에 애니메이션을 적용하는 여러 방법 살펴보기

BBC는 보안 및 성능을 개선하기 위해 웹사이트에 HSTS를 배포하고 있습니다. HSTS의 의미와 HSTS가 어떻게 도움이 되는지 알아보세요.

코어 웹 바이탈 측정항목을 모니터링하는 도구에서 보고되는 수치가 서로 다른 이유와 이러한 차이를 해석하는 방법을 알아보세요.

GDE Enrique Fernandez Guerra가 NGO HelpDev를 오픈소싱합니다.

Maersk.com의 고객과 개발자를 위한 Internet Explorer 지원 종료

HTML5Rocks를 오랫동안 만나 뵙게 되어 반가웠습니다.

보안, 교차 브라우저 호환성을 보장하고 서드 파티 쿠키가 단계적으로 지원 중단되면 손상 가능성을 최소화하기 위해 퍼스트 파티 쿠키를 설정하는 방법을 알아보세요.

Web Audio API를 사용하면 AV 동기화를 제대로 실행할 수 있습니다.

원뿔형 그라데이션을 사용하면 이 멋진 테두리 예와 같은 흥미로운 효과를 만들 수 있습니다. Adam Argyle 님이 만들고 트위터의 이 트윗 을 통해 처음 공유한 이 CodePen 은 원뿔형 그라데이션 을 사용하여 테두리를 만드는 방법을 보여줍니다. 테리 먼 님이 창의적으로 아담의 CodePen을 포크 하여 이 CodePen 을 만들었습니다. 요소 위로 마우스를 가져가면 회전 각도를 저장하는 CSS 맞춤 속성을 업데이트하는 약간의

Fetch API 사용 시 오류 포착

JavaScript 라이브러리 또는 프레임워크 사용과 관련된 결정을 이해합니다.

클라이언트 측 JavaScript 환경 컨텍스트에서 프레임워크와 라이브러리 간의 차이점을 이해합니다.

이 리소스는 터미널을 빠르게 탐색하는 데 도움이 될 수 있습니다.

Google Fonts CSS API의 작동 방식, 사용 방법, 웹 글꼴을 효율적으로 제공하는 방법을 업데이트했습니다.

GOV.UK는 프런트엔드에서 jQuery 종속성을 삭제했습니다. 무슨 일이 일어났는지 절대 추측하지 못합니다. (예, 유지됩니다.)

색상 적응성과 반응성이 뛰어나고 접근성이 우수한 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

브라우저 미리 로드 스캐너가 무엇인지, 성능에 어떻게 도움이 되는지, 어떻게 하면 방해받지 않을 수 있는지 알아보세요.

현재 분석 도구로 웹 바이탈을 측정하는 방법

웹용 빌드를 더 쉽게 만듭니다.

멘토링 프로그램을 통해 리더가 되는 데 어떤 역할을 했는지 설명하는 웹 Google Developers 전문가

가변 글꼴에 관한 실용적인 가이드와 다양한 예시 공유

Josh W Comeau의 이 도구를 사용하면 아주 간단하게 멋진 그래디언트를 만들 수 있습니다.

주요 문제점에 대한 통계 모음으로, 웹 개발자와의 일대일 대화를 통해 수집됩니다.

이미지 도구 상태를 확인합니다.

범위에 대해 알아보고 자바스크립트에서 범위가 어떻게 작동하는지 알아보세요.

`` 요소를 사용하여 색상 적응형, 반응형, 접근성 있는 미니 및 메가 모달을 빌드하는 방법에 관한 기본 개요입니다.

웹에서 미디어 재생 오류를 디버그하는 방법을 알아보세요.

Google Developers Experts (GDE) 프로그램 회원과의 인터뷰 중 하나입니다.

처음 표시 영역 내에서 이미지를 적극적으로 로드하고 나머지는 지연 로드하면 웹 바이탈을 개선하면서도 바이트 로드 수를 줄일 수 있습니다.

`` 요소를 사용하여 색상 적응형 및 액세스 가능한 로드 바를 빌드하는 방법에 관한 기본적인 개요입니다.

등록 및 로그인 양식을 최대한 간단하게 유지하세요. 사용자가 다시 방문할 때 다시 로그인하지 않아도 되도록 로그인 양식의 사용자 인증 정보를 저장합니다. 양식의 사용자 인증 정보를 저장하려면 다음 단계를 따르세요. 계속하기 전에 양식에 autocomplete 속성이 포함되어 있는지 확인합니다. 이렇게 하면 Credential Management API가 양식에서 id 및 password 를 찾아 사용자 인증 정보 객체를 구성하는 데 도움이

사용자 에이전트 문자열 변경사항, Chrome 및 Firefox의 영향을 완화하기 위해 취하는 전략, 도움을 줄 수 있는 방법

적응형 파비콘을 빌드하는 방법에 관한 기본적인 개요입니다.

Emscripten을 사용하여 WebAssembly에서 웹의 캔버스로 2D 그래픽을 렌더링하는 방법을 알아보세요.

Cache-Control 헤더를 잊거나 잘못 사용하면 웹사이트의 보안 및 사용자 개인정보 보호에 부정적인 영향을 미칠 수 있습니다. 가치가 높은 웹사이트를 위한 추천을 받으세요.

건전한 사이트를 위한 필수 측정항목

gPhoto2가 WebAssembly로 포팅되어 웹 앱에서 USB를 통해 외장 카메라를 제어하는 방법을 알아보세요.

네트워크 오류 로깅 (NEL)을 사용하여 클라이언트 측 네트워크 오류를 수집합니다.

모든 브라우저에서 사용자를 지원하면서 최신 WebAssembly 기능을 사용하는 방법을 알아보세요.

WebAssembly 및 Fugu API를 사용하여 외부 기기와 상호작용하는 코드를 웹에 포팅하는 방법을 알아보세요.

적응형 테마 스위치 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

WebAssembly 라이브러리에 자바스크립트 코드를 삽입하여 외부와 통신하는 방법을 알아봅니다.

Oculus Quest 2는 Meta의 자회사인 Oculus에서 만든 가상 현실 (VR) 헤드셋입니다. 이제 개발자는 Oculus Quest 2의 멀티태스킹 기능을 활용하는 2D 및 3D 프로그레시브 웹 앱 (PWA)을 빌드하고 배포할 수 있습니다. 이 도움말에서는 Oculus Quest 2에서 PWA를 빌드하고, 사이드로드하고, 테스트하는 방법에 관해 설명합니다.

Designcember의 공휴일 캘린더 스타일 환경을 구축하는 데 사용되는 프로세스와 도구를 살펴봅니다.

주변광 센서와 창 컨트롤 오버레이 기능을 활용하여 웹에서 태양계 계산기를 다시 만들려고 하는 스큐어모픽스 시도입니다.

가장 오래전에는 JavaScript 값의 상세한 사본을 만들기 위해 해결 방법과 라이브러리를 사용해야 했습니다. 이제 플랫폼에 딥 복사를 위한 내장 함수인 `structuredClone()`이 제공됩니다.

액세스 가능한 적응형 토스트 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

디자인 도구, CSS, HTML 관련 작업자에게 보조금을 제공하기 위해 Chrome의 UI 펀드를 발표합니다.

반응형, 적응형, 접근성을 갖춘 3D 게임 메뉴를 빌드하는 방법에 관한 기본적인 개요입니다.

페이지 및 사이트 품질을 더욱 효과적으로 측정하고 최적화하는 데 도움이 되는 PageSpeed Insights의 최신 정보를 알아보세요.

새로운 Lighthouse API를 사용해 사용자 플로우 전반의 성능과 권장사항을 측정해 보세요.

2021 Chrome Dev Summit의 모든 주요 발표와 함께 더 자세히 알아볼 수 있는 링크가 포함되어 있습니다.

애니메이션 측정, 애니메이션 프레임 계산 방법, 전반적인 페이지 매끄러움에 관해 알아보세요.

지난 3년 동안 Chrome은 브라우저의 한계를 뛰어넘고자 하는 웹 애플리케이션을 지원하기 위해 노력해 왔습니다. 이러한 웹 애플리케이션 중 하나가 Photoshop입니다. 몇 년 전까지만 해도 브라우저에서 Photoshop처럼 복잡한 소프트웨어를 실행한다는 아이디어는 상상하기 어려웠을 것입니다. 하지만 여러 새로운 웹 기술을 사용한 Adobe는 이제 Photoshop의 공개 베타 버전을 웹에 도입했습니다.

사용자 환경을 정렬하고 필터링하기 위해 반응형, 적응형, 액세스 가능한 다중 선택 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

Navigation 및 Resource Timing API를 사용하여 현장의 로드 성능을 평가하는 방법에 관한 기본사항을 알아봅니다.

새로운 Sanitizer API는 임의의 문자열을 페이지에 안전하게 삽입할 수 있는 강력한 프로세서를 빌드하는 것을 목표로 합니다. 이 도움말에서는 API를 소개하고 사용법을 설명합니다.

이 문서에서는 서드 파티 임베딩을 로드할 때 사용할 수 있는 성능 권장사항, 효율적인 로드 기술, 많이 사용되는 임베딩의 레이아웃 변경을 줄이는 데 도움이 되는 Layout Shift Terminator 도구에 대해 설명합니다.

현재의 측정 한계를 해결하기 위한 SPA, 코어 웹 바이탈, Google의 계획에 관한 일반적인 질문에 대한 답변을 제공합니다.

preventDefault 및 stopPropagation: 언제 어떤 메서드를 사용해야 하는지, 각 메서드가 정확히 무엇을 하는지 JavaScript 이벤트 처리는 대개 간단합니다. 이는 특히 단순한 (상대적으로 평면적인) HTML 구조를 처리할 때 중요합니다. 하지만 이벤트가 요소 계층 구조를 통해 이동 (또는 전파)할 때는 상황이 조금 더 복잡해집니다. 일반적으로 개발자가 stopPropagation() 또는 preventDefault()

브라우저와 번들러 모두에서 작동하는 방식으로 자바스크립트에서 다양한 유형의 애셋을 가져오고 번들로 묶는 방법을 알아봅니다.

액세스 가능한 분할 버튼 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

CSS 모듈 스크립트를 사용하여 자바스크립트 모듈과 동일한 문법을 사용해 CSS 스타일시트를 가져오는 방법을 알아봅니다.

반응성이 뛰어나고 액세스 가능한 스위치 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

코드 한 줄로 기본 제공 HTML 양식 입력에 브랜드 색상을 적용합니다.

클라이언트 힌트 헤더 세트를 사용하면 사이트에서 요청 시 선택적으로 사용자의 미디어 환경설정을 가져올 수 있으므로 서버는 성능상의 이유로 올바른 CSS를 인라인할 수 있습니다. CSS 미디어 쿼리, 특히 prefers-color-scheme 또는 prefers-reduced-motion 와 같은 사용자 환경설정 미디어 기능 은 페이지에서 전송해야 하는 CSS의 양과 페이지가 로드될 때 사용자에게 제공되는 환경에 큰 영향을 미칠 수 있습니다.

사용자가 사이트를 탐색할 수 있도록 응답성이 높고 접근성이 우수한 탐색경로 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

다른 언어로 작성된 멀티스레드 애플리케이션을 WebAssembly로 가져오는 방법을 알아봅니다.

미디어 스트리밍은 서버에서 멀티미디어 콘텐츠를 지속적으로 전달하는 방법입니다. 여기서 콘텐츠가 개별 데이터 청크로 분할된 후 특정 순서로 재생되는 동안 DASH 및 HLS와 같은 프로토콜을 사용하여 범위 요청을 통해 다시 결합할 수 있습니다.

미디어 프레임워크는 독점적 및 오픈소스로 제공되며, 그 핵심은 다양한 컨테이너 형식과 전송 프로토콜에 대한 오디오 및/또는 동영상 재생을 지원하는 API 집합입니다.

디지털 권한 관리 개념, 그리고 Clear Key 또는 Widevine 암호화를 모두 사용하여 원시 mov 파일에서 MPEG-DASH 또는 HLS용으로 패키징된 암호화된 미디어로 가져오는 데 필요한 명령어를 알아보세요.

오프라인 스트리밍을 통해 PWA를 빌드하는 데는 어려움이 있습니다. 이 도움말에서는 사용자에게 고품질 오프라인 미디어 환경을 제공하는 API와 기술에 대해 알아봅니다.

이제 웹 글꼴이 로드될 때 크기를 조정하여 문서 글꼴 크기를 정규화하고 글꼴 간에 전환할 때 레이아웃 변경을 방지할 수 있습니다.

구성 가능한 동적 색 구성표를 설정하는 방법에 관한 기본적인 개요

데스크톱 크기의 이미지를 휴대기기에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이미지를 '일률적으로' 제공하는 것이 아니라 기기마다 다른 이미지 크기를 제공합니다.

이 도움말에서는 웹 바이탈을 최적화하기 위한 CSS 관련 기법을 설명합니다.

오늘부터 Lighthouse, PageSpeed Insights, Chrome UX 보고서 등 여러 Chrome 웹 도구 표시 경로에 CLS 변경사항이 적용되었습니다.

겉보기에는 CSS 선택자 문법에 사소한 추가 사항이 있으면 큰 영향을 미칠 것입니다.

이제 6부로 구성된 새로운 프로그레시브 웹 앱 교육을 이용할 수 있습니다. 여기에는 안정적이고 설치 가능하고 기능이 우수한 PWA를 빌드하는 방법을 알려주는 새로운 Codelab 시리즈가 포함되어 있습니다.

사용자 환경설정 기반 미디어 기능, 컨테이너 쿼리, 새로운 화면 유형(예: 폴더블 화면)에 대한 미디어 쿼리를 통해 반응형 웹 디자인의 새로운 시대에 사용할 수 있습니다.

사용자 에이전트 문자열에 의존하지 않고 새로운 사용자 에이전트 클라이언트 힌트로 사이트를 이전하는 전략입니다.

이 도움말에는 웹사이트를 보호하는 데 사용할 수 있는 가장 중요한 보안 헤더 목록이 나와 있습니다. 이 보고서를 통해 웹 기반 보안 기능을 이해하고, 이러한 기능을 웹사이트에 구현하는 방법을 알아보고, 필요한 경우 참고 자료로 활용하세요.

Thomas Steiner의 Google I/O 2021 대담 'Excalidraw and Fugu: Better User Journeys(핵심 사용자 여정 개선)'의 글

서비스 워커는 importScripts() 대신 ES 모듈의 정적 가져오기를 사용하여 추가 코드를 가져올 수 있습니다.

TV, 휴대전화, 데스크톱 등의 반응형 가로 스크롤뷰를 빌드하는 방법에 관한 기본 개요입니다.

오늘은 사이트가 웹 바이탈에서 개선될 수 있는 방법을 파악하는 데 도움이 되는 Lighthouse, PageSpeed, DevTools의 새로운 도구 기능을 살펴보겠습니다.

기존의 동기식 언어를 WebAssembly로 컴파일할 때 비동기 웹 API를 호출하는 방법을 알아봅니다.

개발자는 창 컨트롤 오버레이 기능을 사용하여 설치된 PWA의 제목 표시줄을 맞춤설정하여 PWA가 앱처럼 느껴지도록 할 수 있습니다.

타사 스크립트 또는 "태그"가 사이트 성능 문제의 원인이 될 수 있으므로 최적화의 타겟이 될 수 있습니다. 단, 추가한 태그의 최적화를 시작하기 전에 필요하지 않은 태그는 최적화하지 않았는지 확인하세요. 이 도움말에서는 새 태그에 대한 요청을 평가하고 기존 태그를 관리 및 검토하는 방법을 설명합니다.

이제 WebOTP API가 iframe 내에서 OTP를 수신할 수 있습니다.

DataTransfer 객체는 드래그 앤 드롭 작업 중에 드래그되는 데이터를 보유합니다. 하나 이상의 데이터 항목, 즉 하나 이상의 데이터 유형을 보유할 수 있습니다. 이 도움말에서는 DataTransfer API로 할 수 있는 작업을 설명합니다.

분할 문자 및 단어 애니메이션을 빌드하는 방법에 관한 기본적인 개요입니다.

오래 지속되는 페이지에 더 공정하도록 CLS 측정항목을 개선할 계획입니다.

웹 개발자 만족도는 웹 개발자의 요구사항에 관한 정보를 수집하는 Google 프로젝트입니다. 목표는 더욱 안정적이고 예측 가능하며 상호 운용 가능한 웹 플랫폼으로, 개발자가 여기에 투자하고 신뢰하며 새로운 기능을 채택 및 사용하여 플랫폼과 비즈니스를 성장시킬 수 있도록 하는 것입니다.

슬라이더와 체크박스의 설정 구성요소를 빌드하는 방법에 관한 기본 개요입니다.

자바스크립트에서 `this` 의 값을 파악하는 것은 까다로울 수 있습니다. 방법은 다음과 같습니다.

이 장에서는 흥미로운 미니 앱 오픈소스 프로젝트 몇 가지를 소개합니다.

이 장에서는 '미니 앱 프로그래밍 방식' 접근방식을 따르는 예시 프로젝트를 보여줍니다.

이 장에서는 다양한 미니 앱 플랫폼의 마크업, 스타일 지정, 스크립팅 및 업데이트 옵션을 살펴봅니다.

이 장에서는 미니 앱과는 다른 H5 앱과 QuickApp에 관한 배경 정보를 제공합니다.

이번 장에서는 고정관념을 허물고 버블이 아닌 아이디어에서 아이디어를 얻는 것이 웹에서 더 나은 미래를 만들어 나갈 수 있다는 점을 관찰하면서 미니 앱 컬렉션을 마무리합니다.

이 장에서는 미니 앱을 프로그래밍하는 방법을 소개합니다.

이 장에서는 프로젝트 구조, 수명 주기, 미니 앱의 번들에 대해 다룹니다.

이 장에서는 모든 미니 앱 플랫폼에서 제공하는 구성요소에 대해 자세히 설명합니다.

Streams API를 사용하면 JavaScript가 네트워크를 통해 수신된 데이터 스트림에 프로그래밍 방식으로 액세스하여 원하는 대로 처리할 수 있습니다.

iOS 및 Android 앱에 있는 것과 유사한 탭 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

교차 출처 분리를 통해 웹페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 도움말에서는 웹사이트에서 교차 출처 분리를 사용 설정하는 방법을 설명합니다.

Origin-Agent-Cluster 헤더는 동일한 도메인의 다른 출처에 대한 동기식 액세스를 차단하고 원본 전용 리소스를 제공하도록 브라우저에 힌트를 줍니다.

이제 새로운 가로세로 비율 CSS 속성을 사용하면 이미지와 요소 내에서 가로세로 비율을 더 쉽게 유지할 수 있습니다.

성능과 사용성을 위해 캐러셀을 최적화하는 방법을 알아보세요.

WebRTC의 역사, 아키텍처, 사용 사례, 미래에 대한 간략한 개요입니다.

로컬 개발에는 http://localhost를 사용하는 것이 좋습니다. 단, 몇 가지 특별한 경우는 예외입니다. 이 게시물에서는 HTTPS로 로컬 개발 사이트를 실행해야 하는 경우를 설명합니다. 로컬 개발에 HTTPS를 사용하는 방법 도 참고하세요. 이 게시물에서 localhost 에 관한 문장은 127.0.0.1 및 [::1] 에도 적용됩니다. 둘 다 '루프백 주소'라고도 하는 로컬 컴퓨터 주소를 설명하기 때문입니다. 또한 간단히 하기 위해

대부분의 경우 http://localhost 는 개발 목적으로 HTTPS처럼 작동합니다. 하지만 맞춤 호스트 이름 또는 브라우저 전반에서 보안 쿠키를 사용하는 등 특수한 경우 가 있습니다. 이 경우 프로덕션에서 사이트가 작동하는 방식을 정확하게 나타내기 위해 개발 사이트가 HTTPS처럼 작동하도록 명시적으로 설정해야 합니다. 프로덕션 웹사이트에서 HTTPS를 사용하지 않는 경우 HTTPS로 전환하는 것을 우선적으로 고려 하세요. 이 페이지에서는

레이아웃 변경 횟수 측정항목을 개선하기 위한 Google의 계획에 대해 알아보고 의견을 보내주세요.

반응형 슬라이드 아웃 측면 탐색 빌드 방법에 관한 기본 개요

반응형 슬라이드 아웃 측면 탐색 레이아웃 구성요소를 빌드하는 방법을 알아봅니다.

5가지 센터링 기법을 따라 일련의 테스트를 진행하면서 변화에 탄력성이 가장 높은 기법을 확인해 보세요.

CSS를 사용한 5가지 중심 맞추기 기법을 알아봅니다.

최초 로드 성능도 중요하지만 그것이 전부는 아닙니다. 사이트를 다시 로드하는 사용자는 캐시를 사용하여 콘텐츠에 액세스하므로 사이트의 속도와 정확성이 모두 제대로 작동하는지 확인하는 것이 중요합니다.

Houdini.how를 사용하여 교차 브라우저 Houdini Paint API를 구현하고 Houdini 워크릿의 세계를 탐색하는 방법을 알아보세요.

사용자에게 SMS로 전송된 OTP (일회용 비밀번호)를 제공하도록 요청하는 것이 사용자의 전화번호를 확인하는 일반적인 방법입니다. 이 게시물에서는 우수한 사용자 환경을 제공하는 SMS OTP 양식을 빌드하기 위한 권장사항을 알려드립니다.

여러 소스에서 실적 데이터를 자동으로 수집할 수 있는 새로운 모듈식 도구입니다.

사용자가 주소 및 결제 양식을 최대한 빠르고 쉽게 작성할 수 있도록 지원하여 전환을 극대화하세요.

결제 수단 권장사항 알아보기

사용자가 간편하게 가입, 로그인, 계정 세부정보 관리를 할 수 있도록 지원하세요.

크로스 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 간단한 가입 양식을 만들 수 있습니다.

주소 양식 권장사항 알아보기

서비스 워커가 페이지와 사전에 통신하여 특정 이벤트에 대해 알리는 방법

페이지와 서비스 워커 간의 양방향 통신 채널을 설정하는 방법입니다.

성능, 캐싱, 오프라인과 관련된 작업을 수행하도록 창과 서비스 워커를 통신하는 방법

웹 워커와 서비스 워커가 웹사이트 성능을 개선할 수 있는 방법과 언제 웹 워커와 서비스 워커를 사용해야 하는지 알아봅니다.

이제 웹 앱이 포인터 이벤트를 캡처할 때 마우스 가속을 사용 중지할 수 있습니다.

웹에서 Instagram 스토리와 유사한 환경을 빌드하는 방법을 알아보세요.

웹에서 Instagram 스토리와 유사한 환경을 구축하는 방법에 관한 기본적인 개요입니다.

'동일 사이트'의 정의가 URL 스키마를 포함하도록 진화하고 있으므로 사이트의 HTTP 버전과 HTTPS 버전 간의 링크는 이제 크로스 사이트 요청으로 간주됩니다. 가능한 경우 문제를 방지하려면 기본적으로 HTTPS로 업그레이드하거나 필요한 SameSite 속성 값에 대한 자세한 내용을 읽어보세요.

이 게시물에서는 콘텐츠 관리 시스템에서 로드 속성을 채택하는 방법을 안내합니다.

사용자의 푸시 알림을 구독하고, 푸시 메시지를 알림으로 표시하고, 사용자의 푸시 알림을 구독 취소하는 클라이언트를 빌드하는 방법을 보여주는 단계별 대화형 튜토리얼입니다.

푸시 알림 구독을 관리하고 푸시 서비스에 웹 푸시 프로토콜 요청을 보내는 서버를 구축하는 방법을 보여주는 단계별 대화형 튜토리얼입니다.

푸시 알림의 정의, 푸시 알림을 사용해야 하는 이유, 작동 방식에 관한 개요

사이트의 오프라인 사용 환경이 개선되어야 하는 이유를 알아볼 수 있도록 사이트의 오프라인 사용을 추적하는 방법

고성능 기법을 통해 복잡하고 멋진 애니메이션을 만드는 방법을 보여줍니다.

Min, max, clamp는 더 적은 코드 선취권으로 더 빠르게 반응형 스타일을 지정할 수 있는 강력한 CSS 기능을 제공합니다. 이 게시물에서는 잘 지원되는 CSS 수학 함수를 사용하여 요소 크기를 제어하고 적절한 간격을 유지하며 유동적인 서체를 구현하는 방법을 살펴봅니다.

SXG는 전송된 방식과 관계없이 리소스의 출처를 인증할 수 있는 전송 메커니즘입니다.

Chromium용 새로운 논리적 속성 접두사 및 새로운 인셋 속성

부분 응답이 요청되었을 때 해야 할 일을 서비스 워커가 알고 있는지 확인하세요.

뛰어난 웹 경험을 위해서는 애니메이션을 효과적으로 만드는 것이 중요합니다. 이 게시물에서는 특정 유형의 애니메이션이 다른 애니메이션보다 실적이 좋은 이유를 설명합니다.

CSS 애니메이션의 성능을 개선하려면 변형 및 불투명도 CSS 속성을 최대한 많이 사용하고, 레이아웃이나 페인팅을 트리거하는 요소는 피해야 합니다.

이제 카메라의 화면 이동, 기울이기 및 확대/축소 기능을 웹에서 제어할 수 있게 되었습니다.

오리진 트라이얼은 새로운 또는 실험적인 웹 플랫폼 기능을 테스트하는 방법입니다. 서드 파티 오리진 트라이얼을 통해 삽입된 콘텐츠 제공업체는 여러 사이트에서 새로운 기능을 사용해 볼 수 있습니다. 오리진 트라이얼 은 새로운 또는 실험용 웹 플랫폼 기능을 테스트하는 방법입니다. 오리진 트라이얼은 일반적으로 퍼스트 파티 기반으로만 사용할 수 있으며, 등록된 단일 출처 에만 작동합니다. 개발자가 콘텐츠가 삽입된 다른 출처에서 실험용 기능을 테스트하려는

분리된 창은 메모리 누수의 일반적인 유형으로, 특히 찾아서 해결하기가 어렵습니다.

앱을 위한 간단한 오프라인 환경을 만드는 방법을 알아봅니다.

CSS에서 클리핑을 사용하면 상자처럼 보이는 디자인에서 모든 요소를 벗어날 수 있습니다. 다양한 기본 도형 또는 SVG를 사용하여 클립 경로를 만들 수 있습니다. 그런 다음 엘리먼트에서 표시하고 싶지 않은 부분을 잘라냅니다.

CSS를 사용하여 `` 또는 `` 요소에서 숫자나 글머리기호의 색상, 크기, 유형을 맞춤설정합니다.

/.well-known/change-password에 대한 요청을 비밀번호 변경 URL로 리디렉션하여 사용자가 이전보다 쉽게 비밀번호를 업데이트하도록 할 수 있습니다.

웹 기반 결제 앱이 등록되면 판매자의 결제 요청을 수락할 수 있습니다. 이 도움말에서는 런타임 중에 서비스 워커의 결제 트랜잭션을 조정하는 방법을 설명합니다.

웹 기반 결제 앱이 등록되면 판매자의 결제 요청을 수락할 수 있습니다. 이 도움말에서는 런타임 중에 서비스 워커의 결제 트랜잭션을 조정하는 방법을 설명합니다.

스크린 리더에 거짓말을 하면 접근성을 개선하는 데 도움이 됩니다.

WebAssembly를 사용하여 다른 언어로 작성된 라이브러리를 안전하고 관용적인 방식으로 웹에 가져오는 방법을 알아보세요.

CSS content-visibility 속성을 사용하면 화면 밖에 있는 콘텐츠의 렌더링을 건너뛰어 웹 콘텐츠 렌더링 성능을 개선할 수 있습니다. 이 도움말에서는 auto 키워드를 사용하여 초기 로드 시간을 단축하는 데 이 새로운 CSS 속성을 사용하는 방법을 설명합니다. 또한 브라우저에서 콘텐츠가 렌더링되는 방식을 더 효과적으로 제어할 수 있게 해 주는 CSS Containment Spec 및 기타 콘텐츠 가시성 관련 값에 대해서도 알아봅니다.

Async Clipboard API는 권한 친화적인 복사하여 붙여넣기를 간소화합니다.

다양한 구성요소를 사용하여 Android 앱 내에서 웹 콘텐츠를 렌더링하는 방법을 알아봅니다.

`strict-origin-when-cross-origin`으로 리퍼러 정책을 설정하는 것이 좋습니다. 이렇게 하면 리퍼러의 유용성을 상당 부분 유지하면서 교차 출처의 데이터 유출 위험을 줄일 수 있습니다.

게시판팀이 PWA를 개발하는 동안 서비스 워커에 관해 배운 내용

Lighthouse CI를 설정하고 개발자 워크플로에 통합하는 방법을 알아보세요.

Google 계정에 더 나은 보안과 더 나은 사용자 환경을 제공합니다.

시맨틱 입력, 대체 값 등을 사용하여 CSS 파일에서 직접 CSS 맞춤 속성을 구현하는 방법을 알아보세요.

판매자가 Payment Request API를 통해 요청한 경우 사용자가 선택한 배송지 주소와 연락처 정보를 제공하도록 Android 결제 앱을 수정하는 방법을 알아봅니다.

웹 기반 결제 앱이 웹 결제와 호환되도록 조정하고 고객에게 더 나은 사용자 환경을 제공하는 방법을 알아보세요.

고객의 브라우저에 웹 기반 결제 앱을 등록하는 방법을 알아보세요. 이를 디버그하는 방법도 알아봅니다.

서비스 워커 캐시 및 HTTP 캐시 레이어에서 일관되거나 다른 만료 로직을 사용할 때의 장단점

A/B 테스트를 활용하여 사이트 속도가 비즈니스 측정항목에 미치는 영향을 평가하세요.

탐색 요청은 탐색 메뉴에 새 URL을 입력하거나 페이지의 링크를 클릭할 때마다 생성되는 HTML에 대한 요청입니다. 바로 이 지점에서 서비스 워커가 성능에 가장 큰 영향을 미칩니다. 서비스 워커를 사용하여 네트워크를 기다리지 않고 응답함으로써 탐색이 안정적으로 빠르고 탄력성을 갖추도록 할 수 있습니다.

Chrome UX 보고서 (이전 명칭: CrUX)는 수백만 개의 웹사이트에서 제공되는 실제 사용자 환경 데이터의 공개 데이터 세트입니다. 실험실 데이터와 달리 CrUX 데이터는 실제로 현장의 사전 수신 동의 사용자로부터 발생합니다.

이 게시물에서는 몇 가지 강력한 CSS 라인을 집중적으로 다루며 강력한 최신 레이아웃을 빌드하는 데 도움을 줍니다.

Chrome 84부터 ResizeObserver는 요소의 크기를 실제 픽셀로 측정하는 device-pixel-content-box라는 새로운 상자 측정을 지원합니다. 이는 특히 고밀도 화면의 환경에서 픽셀의 완벽한 그래픽을 렌더링하는 데 중요합니다.

3일간 진행되는 온라인 커뮤니티 이벤트 중에 발표된 주요 뉴스 및 업데이트의 요약과 예정된 지역 이벤트 알림입니다.

교차 플랫폼 브라우저 기능을 사용하여 안전하고 액세스하기 쉽고 사용하기 쉬운 간단한 로그인 양식을 빌드하세요.

교차 플랫폼 브라우저 기능을 사용하여 안전하고 액세스하기 쉽고 사용하기 쉬운 로그인 양식을 빌드하세요.

프로그레시브 웹 앱을 점진적으로 개선하여 모든 최신 브라우저에서 유용한 상태로 유지하면서 파일 시스템 액세스, 시스템 클립보드 액세스, 연락처 검색, 주기적 백그라운드 동기화, 화면 wake lock, 웹 공유 기능 등과 같은 새로운 웹 기능을 지원하는 브라우저에서 고급 환경을 제공하는 방법을 알아보세요.

개별 페이지 또는 전체 사이트의 검색엔진 최적화 문제를 디버깅하는 방법

백그라운드 동기화 및 Push API를 사용하여 Workbox에서 복원력이 우수한 검색 환경을 구현하는 방법입니다.

및 태그를 사용하여 미디어 파일을 웹페이지에 삽입할 수 있습니다.

텍스트 프래그먼트를 사용하면 URL 프래그먼트에 텍스트 스니펫을 지정할 수 있습니다. 이러한 텍스트 프래그먼트가 포함된 URL로 이동할 때 브라우저는 이를 강조하거나 사용자의 주의를 끌 수 있습니다.

브라우저 공급업체의 브라우저나 특정 기기 또는 플랫폼에서 발견한 문제를 브라우저 공급업체에 알리는 것은 웹 플랫폼을 개선하는 데 필수적인 부분입니다.

웹 기술로 플랫폼별 앱 패턴을 구현하는 방법을 이해하여 프로그레시브 웹 앱을 '진짜' 앱처럼 만드는 방법을 알아보세요.

RAIL 모델을 사용하면 디자이너와 개발자가 사용자 환경에 가장 큰 영향을 미치는 성능 최적화 작업을 안정적으로 타겟팅할 수 있습니다. RAIL 모델이 수립하는 목표와 가이드라인, 이를 달성하는 데 사용할 수 있는 도구를 알아봅니다.

Quicklink는 유휴 시간 동안 표시 영역 내 링크를 미리 가져와 후속 페이지 로드 속도를 높이는 라이브러리입니다.

메타데이터 가져오기는 서버가 교차 출처 공격으로부터 스스로를 보호할 수 있도록 설계된 새로운 웹 플랫폼 기능입니다.

CSS를 사용하여 레이아웃을 만들 때는 키보드로 탐색하는 사용자에게 연결 해제된 환경을 만들지 않도록 주의해야 합니다.

웹 애니메이션 랭글링이 훨씬 더 쉬워집니다.

판매자가 결제 앱을 통합하는 방법, 결제 거래가 Payment Request API와 함께 작동하는 방식, 웹 결제에서 가능한 작업을 알아보세요.

웹 결제를 사용한 결제 거래는 결제 앱을 발견하는 순간부터 시작됩니다. 판매자와 고객이 결제할 수 있도록 결제 수단을 설정하고 결제 앱을 준비하는 방법을 알아보세요.

웹 결제는 웹에서 원활한 결제 환경을 제공하는 것을 목표로 합니다. 작동 원리와 이점을 알아보고 결제 앱을 웹 결제와 통합할 준비를 하세요.

Android 결제 앱이 웹 결제와 호환되도록 조정하고 고객에게 더 나은 사용자 환경을 제공하는 방법을 알아보세요.

Chromium 80은 macOS에서 시스템 UI 글꼴 두께 회귀를 일으켰습니다. 고장 난 이유와 해결 후의 새로운 초능력은 Chromium 83에서 기다릴 만한 가치가 있습니다.

PWA에 대한 견고한 비즈니스 사례를 구축합니다. 언제 투자해야 하고 투자의 성공을 측정하는 방법을 알아보세요.

앱 바로가기를 사용하면 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.

AppCache가 삭제될 예정인 Chrome 및 기타 브라우저에 관한 세부정보입니다.

다양한 설치 서비스를 결합하여 설치율을 높이고 플랫폼 경쟁과 자기 잠식을 방지하기 위한 권장사항입니다.

영구 스토리지를 사용하면 중요한 데이터가 제거되지 않도록 보호하고 데이터 손실 가능성을 줄일 수 있습니다.

CommonJS 모듈은 매우 동적이므로 JavaScript 옵티마이저와 번들이 이를 대신하여 고급 최적화를 수행합니다.

`about://tracing` 및 Chrome DevTools의 **WebAudio** 확장 프로그램을 사용하여 Chrome에서 웹 오디오 앱의 성능을 프로파일링하는 방법을 알아보세요.

일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 줄이기 위해 브라우저는 교차 출처 분리라는 선택 기반의 격리된 환경을 제공합니다. `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()`, 더 높은 정밀도의 고해상도 타이머와 같은 강력한 기능을 사용하기 위해 교차 출처 격리가 필요한 이유를 알아보세요.

Next.js와 Gatsby가 빌드 출력을 개선하여 중복 코드를 최소화하고 페이지 로드 성능을 개선한 방법을 알아보세요.

"same-site""same-origin"이 자주 인용되지만 잘못 이해되는 용어입니다. 이 페이지에서는 두 개념의 정의와 차이점을 설명합니다.

프로덕션 환경에서 웹페이지의 메모리 사용량을 측정하여 회귀를 감지하는 방법을 알아보세요.

일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 줄이기 위해 브라우저는 교차 출처 분리라는 선택 기반의 격리된 환경을 제공합니다. COOP 및 COEP를 사용하여 이러한 환경을 설정하고 `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` 또는 고해상도 타이머와 같은 강력한 기능을 더 높은 정밀도로 사용 설정합니다.

web.dev 엔지니어링 팀이 작성한 이 첫 번째 게시물에서는 Eleventy 및 Web Components 사용 방법을 비롯하여 Google에서 사이트를 구축하는 방법에 관해 알아보세요.

색상 구성 CSS 속성과 해당 메타 태그를 사용하면 개발자는 페이지에서 양식 컨트롤, 스크롤바, CSS 시스템 색상 등 사용자 에이전트 스타일시트의 테마별 기본값을 선택할 수 있습니다. 동시에 이 기능은 브라우저가 자체적으로 변환을 적용하는 것을 방지합니다.

웹사이트의 핵심 기능이 항상 사용 가능하고, 액세스할 수 있고, 안전하고, 유용하고, 검색 가능하며, 빠르게 표시되도록 하는 방법

모바일 또는 터치스크린 기기에서 상호작용 요소를 사용할 때 주변에 충분한 공간이 있어야 합니다. 이는 모든 사람, 특히 운동 능력 장애가 있는 사람에게 도움이 됩니다.

서버의 병목 현상을 확인하고 신속하게 해결하여 서버 성능을 향상시키고 회귀를 방지하는 방법을 알아봅니다.

색상 및 대비 사용을 개선하여 페이지 접근성을 높이는 방법을 알아보세요.

최고의 다중 기기 환경을 제공하려면 반응형 디자인이 좋은 생각이지만, 반응형 디자인은 접근성 면에서도 유리합니다.

신뢰할 수 있는 유형 소개: 최신 웹 애플리케이션에서 DOM 기반 교차 사이트 스크립팅을 방지하는 브라우저 API입니다.

Android 앱에서 프로그레시브 웹 앱을 여는 방법

Chrome 83은 렌더링 주기를 최적화하여 선택적 글꼴을 미리 로드할 때 레이아웃 변경을 없앱니다. font-display와 결합: 선택사항은 맞춤 글꼴의 버벅거림 없는 렌더링을 보장하는 가장 효과적인 방법입니다.

SXG 확장 프로그램으로 TLS 인증서를 생성하고, SXG 파일을 생성하는 도구를 설치하고, SXG 파일을 제공하도록 nginx를 구성하는 방법을 알아봅니다.

nginx를 사용하여 SXG 파일을 가져오고 제공하는 방법과 하위 리소스 미리 가져오기의 문제를 알아봅니다.

미디어 쿼리를 사용하여 필요한 크기의 이미지(일반적으로 반응형 이미지라고 함)를 전송합니다.

다른 부서에서 웹사이트 속도 최적화 프로젝트의 성과를 높이는 방법

Chrome 81부터 페이지 레이아웃이 변경될 때 스크롤러가 고정된 상태로 유지됩니다. 즉, 강제로 재지정하기 위해 더 이상 이벤트 리스너를 추가할 필요가 없습니다.

웹 패키지 도구를 사용하여 서명된 교환 (SXG)을 제공하는 방법을 알아보세요.

beforeinstallprompt 이벤트를 사용하면 사용자에게 원활한 맞춤 인앱 설치 환경을 제공할 수 있습니다.

이미 WebXR Device API를 사용해 본 적이 있다면 새로 배울 내용이 거의 없다는 사실에 반가울 것입니다. WebXR 세션에 진입하는 것은 대체로 동일합니다. 프레임 루프를 실행하는 것은 대체로 동일합니다. 차이점은 증강 현실에 맞게 콘텐츠를 적절하게 표시할 수 있는 구성에 있습니다.

Chrome 79에서 가상 현실이 웹에 도입되었습니다. 이번 출시는 WebXR Device API를 기반으로 하는 증강 현실과 가상 현실의 기반이 됩니다. 이 도움말은 시청자에게 이미지가 표시되는 XR 세션의 일부인 프레임 루프에 초점을 맞춘 시리즈의 두 번째 도움말입니다. Firefox Reality, Oculus 브라우저, Edge, Magic Leap Helio 브라우저 등 다른 브라우저에서도 곧 WebXR Device API를 지원할 예정입니다.

WebXR Hit Test API는 웹 증강 현실을 개선하여 가상 객체를 실제 뷰에 배치할 수 있도록 합니다.

Chrome이 자바스크립트 생태계를 발전시키기 위해 여러 오픈소스 도구에 어떻게 투자하고 있는지 알아보세요.

프로그레시브 웹 앱 (PWA)에 대한 소개 및 다른 웹 앱과 구분되는 세 가지 핵심 요소

프로그레시브 웹 앱이 플랫폼별 앱과 함께 시스템 수준 공유 UI에 표시되도록 Workbox에서 경로를 등록하는 방법

마스크 가능한 아이콘은 프로그레시브 웹 앱에서 적응형 아이콘을 더 세밀하게 제어할 수 있는 형식입니다. 마스크 가능한 아이콘은 모든 Android 기기에서 멋지게 표시됩니다.

일반적으로 사용자가 페이지를 닫을 때 페이지 또는 앱에서 제출하지 않은 분석 데이터 또는 기타 데이터가 있습니다. 사이트에서는 XMLHttpRequest()에 대한 동기 호출을 사용하여 데이터가 서버에 전달될 때까지 페이지나 앱을 열린 상태로 유지합니다. 사용자 경험을 해치고 더 나은 데이터 절약 방법을 간과합니다. Chrome 80에서는 이 문제를 해결하기 위해 최근 사양 변경을 구현합니다.

모듈 작업자를 사용하면 표준 자바스크립트 모듈의 인체 공학적 기능과 성능 이점을 유지하면서 비용이 많이 드는 코드를 백그라운드 스레드로 이동하여 기본 스레드의 차단을 쉽게 해제할 수 있습니다.

적응형 로드 패턴, 구현 방법, Facebook, Tinder, eBay를 비롯한 여러 기업이 프로덕션에서 적응형 로드를 사용하는 방법을 알아보세요.

새로운 성능 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트, 웹 생태계에 관한 웹 연감 분석에서 얻은 통계 등 속도 도구와 관련된 최신 소식을 읽어보세요.

브라우저의 기본 스레드가 극도로 과부하되었습니다. 웹 작업자를 사용하여 코드를 기본 스레드 외부로 이동함으로써 앱의 안정성과 사용자 환경을 크게 개선할 수 있습니다.

다양한 이미지 최적화 기법에 대한 설문조사 응답자 의견.

이 Codelab에서는 푸시 알림 서버를 빌드하는 방법을 알아봅니다.

코드 분할 및 스마트 로드 전략으로 Next.js 앱의 속도를 높이는 방법 이 게시물에서는 다양한 유형의 코드 분할 과 동적 가져오기를 사용하여 Next.js 앱의 속도를 높이는 방법을 설명합니다. 기본적으로 Next.js는 JavaScript를 각 경로별로 별도의 청크로 분할합니다. 사용자가 애플리케이션을 로드하면 Next.js는 초기 경로에 필요한 코드만 전송합니다. 사용자가 애플리케이션을 탐색할 때 다른 경로와 연결된 청크를 가져옵니다.

Next.js는 React 앱에서 많은 최적화를 처리하므로 개발자가 Next.js 는 여러 성능 최적화가 내장된 주관적인 React 프레임워크입니다. 프레임워크의 기본적인 아이디어는 이러한 기능을 기본적으로 포함하여 애플리케이션이 시작되고 최대한 성능이 유지되도록 하는 것입니다. 이 소개에서는 프레임워크에서 제공하는 여러 기능을 대략적으로 다룹니다. 이 컬렉션의 다른 가이드에서는 이 기능을 자세히 살펴봅니다. Next.js는 기본적으로 여러

Next.js 앱에서 AMP를 지원할 경우의 이점과 장단점을 알아보세요. AMP 는 빠른 페이지 로드를 보장하는 웹 구성요소 프레임워크입니다. Next.js 에서는 AMP를 기본적으로 지원합니다. 이 가이드에서는 먼저 AMP가 빠른 페이지 로드를 보장하는 방법 을 간단히 설명하고 Next.js 앱에서 AMP를 지원하는 여러 방법 을 설명한 후 가장 적합한 접근 방식을 결정 하는 데 도움을 줍니다. 이 가이드는 Next.js를 사용하기로

Next.js에서 경로 미리 로드로 탐색 속도를 높이는 방법과 이를 맞춤설정하는 방법 이 게시물에서는 Next.js의 라우팅 작동 방식, 속도에 최적화되는 방식, 필요에 맞게 맞춤설정하는 방법을 알아봅니다. Next.js 에서는 라우팅을 수동으로 설정할 필요가 없습니다. Next.js는 파일 시스템 기반 라우팅을 사용하므로./pages/ 디렉터리 내에 파일과 폴더를 만들면 됩니다. 다른 페이지로 연결하려면 기존의 &lt;a&gt; 요소를

Web Share API를 사용하면 웹 앱에서 플랫폼별 앱과 시스템에서 제공하는 동일한 공유 기능을 사용할 수 있습니다. Web Share API를 사용하면 웹 앱이 플랫폼별 앱과 동일한 방식으로 기기에 설치된 다른 앱에 링크, 텍스트 및 파일을 공유할 수 있습니다.

Chrome 79에서 가상 현실이 웹에 도입되었습니다. 이번 출시는 WebXR Devicer API를 기반으로 하는 증강 현실과 가상 현실의 기반이 됩니다. 이 도움말은 기본 개념을 살펴보고 XR 세션에 들어가는 방법을 설명하는 시리즈 중 첫 번째 도움말입니다. Firefox Reality, Oculus 브라우저, Edge, Magic Leap Helio 브라우저 등 다른 브라우저에서도 곧 WebXR Device API를 지원할 예정입니다.

이제 사이트에서 크로스 사이트 사용을 위해 쿠키를 명시적으로 표시할 수 있습니다. 이 변경사항이 구현된 후에도 퍼스트 파티 및 서드 파티 쿠키가 계속 작동하도록 쿠키를 마크업하는 방법에 대해 알아보세요.

쿠키의 작동 방식과 퍼스트 파티 및 서드 파티 쿠키의 정의에 대해 알아봅니다.

빠른 광고의 가치와 광고 속도에 대해 생각하는 방법을 이해합니다.

푸시 알림을 사용하여 타겟팅되고 시기적절한 업데이트로 사용자의 참여를 유도하세요.

이 Codelab에서는 사용자 권한을 요청하고 알림을 전송하는 방법을 알아봅니다.

이 Codelab에서는 서비스 워커로 알림을 관리하는 방법을 알아봅니다.

WebPageTest를 사용하여 레이아웃 불안정성 문제를 식별하고 해결하는 방법을 둘러봅니다.

피처폰이 다시 인기를 얻고 있으며 특히 2G가 표준인 신흥 시장에서 인기가 높습니다. 다음은 모바일 마인스위퍼 클론인 PROXX를 2G 피처폰에서 빠르게 로드하도록 만들면서 얻은 교훈입니다.

CSS 변수는 유용하지만, 값을 취하고 재정의할 수 있으며 전환을 사용할 수 없기 때문에 사용하기가 어렵습니다. CSS Properties and Values API 수준 1은 이러한 문제를 해결합니다.

리소스를 미리 가져와 향후 탐색 속도를 높이는 방법을 알아봅니다.

사용자를 보호하고 모든 콘텐츠가 로드되도록 하려면 웹사이트에서 혼합 콘텐츠 오류를 수정하는 방법을 알아보세요.

초기 HTML이 보안 HTTPS 연결을 통해 로드될 때 혼합 콘텐츠가 발생하지만 다른 리소스는 안전하지 않은 HTTP 연결을 통해 로드됩니다.

연구에 따르면 웹 동영상은 참여도와 판매량을 높입니다. 아직 사이트에 동영상을 추가하지 않은 경우에도 추가할 수 있습니다.

iOS 홈 화면에 표시할 아이콘을 지정하는 방법에 관한 대화형 데모입니다.

웹 플랫폼은 오늘날 게임 개발에 적합하도록 매우 성숙한 상태입니다. 최신 웹 게임을 빌드하는 핵심은 게임 디자인 및 수익 창출의 권장사항을 수용하는 것입니다. 이 게시물에서는 이러한 목표를 위한 지침을 제공합니다.

멀티 출처 아키텍처는 PWA를 빌드할 때 여러 가지 문제를 초래합니다. 여러 출처의 바람직한 사용과 잘못된 사용과 다중 출처 사이트에서 PWA를 빌드하기 위한 몇 가지 해결 방법을 살펴봅니다.

이 게시물에서는 페이지 로드 시 WebFonts를 사용할 수 없을 때 레이아웃 변경과 빈 페이지를 방지하기 위해 WebFonts를 로드하는 방법을 설명합니다.

이 게시물에서는 좋은 서체가 사이트 속도가 느리지 않도록 사이트에서 사용하는 WebFonts의 크기를 줄이는 방법을 설명합니다.

설치 가능한 프로그레시브 Angular 애플리케이션을 만드는 방법을 알아봅니다.

서드 파티 스크립트 사용의 일반적인 위험을 피하여 로드 시간과 사용자 환경을 개선하는 방법을 알아보세요.

이미지 CDN을 사용하여 사이트의 이미지를 최적화하고 사용자의 데이터 비용을 줄여보세요.

Lighthouse와 Chrome DevTools를 사용하여 속도가 느린 서드 파티 리소스를 식별하는 방법을 알아보세요.

이 게시물에서는 일반적인 서드 파티 자바스크립트와 이러한 자바스크립트로 인해 발생할 수 있는 성능 문제를 설명합니다. 또한 서드 파티 스크립트를 최적화하는 방법에 관한 일반적인 가이드도 제공합니다.

Lighthouse의 도움을 받아 느린 서드 파티 리소스를 최적화하는 기법을 알아보세요.

새로운 웹 플랫폼 기능을 사용하면 내장된 양식 컨트롤처럼 작동하는 맞춤 요소를 더 쉽게 만들 수 있습니다.

rel=preconnect 및 rel=dns-prefetch 리소스 힌트와 사용 방법에 대해 알아봅니다.

CSS 배경화면 필터 속성을 사용하여 웹의 UI 요소에 블러 및 투명도와 같은 배경 효과를 추가하는 방법을 알아보세요.

비활성 상태 및 재검증은 개발자가 캐시된 콘텐츠를 즉시 로드하는 즉각적인 상태와 캐시된 콘텐츠의 업데이트가 향후에 사용되도록 하는 최신 상태 사이에서 균형을 맞추는 데 도움이 됩니다.

Angular Component Dev Kit로 가상 스크롤을 구현하여 대규모 목록의 응답성을 높이는 방법을 알아보세요.

더 빠른 앱을 위해 Angular의 미리 로드 전략을 사용하는 방법을 알아보세요.

Angular 앱의 변경 감지를 최적화하여 반응성을 높이는 방법을 알아보세요.

코드 분할을 사용하면 애플리케이션 속도를 높일 수 있지만 후속 탐색이 느려질 수 있습니다. 예측 미리 가져오기는 데이터 분석을 사용하여 사용자가 다음에 사용할 가능성이 높은 항목을 스마트하게 미리 가져와 네트워크 사용률을 최적화하는 효율적인 방법입니다.

Network Information API를 사용하여 네트워크 품질에 따라 콘텐츠를 조정하는 방법을 알아보세요.

codelyzer를 사용하여 Angular 애플리케이션의 접근성을 높이는 방법을 알아봅니다.

Angular 서비스 워커를 사용하여 앱에서 정적 애셋을 사전 캐시하는 방법을 알아봅니다.

Angular CLI에서 직접 성능 예산을 사용하는 방법을 알아보세요.

이제 많은 기기에서 운영체제 전반의 어두운 모드 또는 어두운 테마 환경을 지원합니다. 이 게시물에서는 웹페이지에서 어두운 모드를 지원하는 방법을 설명하고, 권장사항을 나열하고, 웹 개발자가 특정 웹페이지에서 운영체제 수준 환경설정을 재정의할 수 있는 방법을 제공할 수 있는 어두운 모드 전환이라는 맞춤 요소를 소개합니다.

srcset을 사용하여 적절한 이미지 크기를 자동으로 선택합니다.

Angular 애플리케이션의 속도, 안정성, 검색 가능성, 설치 및 접근성을 향상하는 방법을 알아보세요.

경로 수준 코드 분할을 사용하여 초기 App Bundle을 줄이는 방법을 알아봅니다.

이 게시물에서는 Polymer Project의 Kevin Schaaf와 Salesforce의 Caridy Patiño가 2019년 웹 구성 요소 현황에 대해 이야기한 내용을 요약합니다.

이제 Lighthouse에서 성능 예산을 지원합니다. LightWallet이라는 기능은 5분 내에 설정할 수 있으며 페이지 리소스의 크기와 양에 대한 Feedvack을 제공합니다.

Chrome 53에서 Payment Request API가 출시되고 Chrome 68에서 Payment Handler API가 출시된 후 각 사양이 상당히 변경되었습니다. 이 게시물에는 이러한 업데이트가 요약되어 있으며 API 변경사항이 계속 누적됩니다.

마케팅 캠페인과 같은 외부 요인을 제외하고 사이트 개선을 통해 발생한 수익을 입증하세요.

프로그레시브 웹 앱은 Chrome 주소 표시줄 (검색주소창)의 새로운 설치 버튼으로 간편하게 설치할 수 있습니다.

웹사이트 실적이 전자상거래 유입경로의 여러 부분에 미치는 영향 알아보기

프로그레시브 웹 앱 설치를 홍보하는 방법 및 권장사항

서비스 워커로 작업하는 것은 많은 웹 개발자에게 익숙하지 않고 익숙하지 않습니다. 이 게시물에서는 이러한 문제에 대해 공감할 수 있는 몇 가지 팁을 제공합니다.

프로그레시브 웹 앱 설치를 홍보하는 방법 및 권장사항

이미지는 시각적 공간을 상당 부분 차지하며 웹사이트에서 다운로드되는 바이트의 대부분을 차지합니다. 새로운 기능 정책을 사용하여 크기가 큰 이미지를 식별합니다.

중요한 CSS 기술로 렌더링 시간을 개선하는 방법과 프로젝트에 가장 적합한 도구를 선택하는 방법을 알아보세요.

'중요'를 사용하여 중요한 CSS를 추출 및 인라인하고 렌더링 시간을 개선하는 방법을 알아보세요.

비용이 많이 들고 작업에 방해가 되는 사용자 상호작용을 진단하는 방법을 알아보세요.

Google I/O 2019에서는 모두를 위한 더 나은 사용자 환경을 제공하기를 바라는 세 가지 새로운 웹 성능 이니셔티브를 도입했습니다.

PROXX: PWA로 빌드된 지뢰찾기와 같은 게임 이 엔진은 다양한 기기에서 작동하며 기기의 성능이 향상될수록 시각적 외관이 점차 개선됩니다.

SameSite 속성을 사용하여 퍼스트 파티 및 서드 파티 사용을 위해 쿠키를 표시하는 방법을 알아봅니다. SameSite의 Lax 및 Strict 값을 사용하여 CSRF 공격에 대한 보호 기능을 개선하면 사이트의 보안을 강화할 수 있습니다. 새 None 속성을 지정하면 쿠키를 크로스 사이트 사용에 대해 명시적으로 표시할 수 있습니다.

사용자가 카메라로 사이트를 검색할 수 있다면 정말 멋지지 않을까요?

Network Information API를 사용하여 연결 품질에 따라 사용자에게 제공되는 애셋을 조정합니다.

새로 제안된 Portals API를 사용하면 프런트엔드를 단순하게 유지하는 동시에 맞춤 전환을 통해 원활한 탐색을 수행할 수 있습니다. 이 도움말에서는 포털을 사용하여 사이트 전반에서 사용자 환경을 개선하는 방법을 실습합니다.

이 Codelab에서는 Brotli 압축으로 압축 비율과 앱의 전체 크기를 더 줄이는 방법을 알아봅니다.

Google I/O 2019에서 web.dev 팀원이 디자인 업데이트, Lighthouse 문서 추가, 새로운 블로그 등 다양한 업데이트를 전달했습니다.

실제 성능은 사용자 기기, 네트워크 연결 및 기타 요인의 차이로 인해 변동폭이 매우 큽니다. 이 게시물에서는 페이지 성능을 평가하기 위해 실험실 또는 현장 데이터를 수집하는 데 도움이 되는 도구를 살펴봅니다.

속도가 중요한데, 속도란 정확히 무엇을 의미할까요? 사이트 속도가 빠르다는 것은 어떤 의미일까요?

속도를 최적화하는 브랜드는 빠르게 퇴보하는 경우가 많습니다. 이 게시물에서는 빠른 환경을 빠르게 유지하는 방법을 살펴봅니다.

Workbox는 모든 빌드 시 애플리케이션의 모든 정적 애셋을 사전 캐시하는 기본 구성을 사용하여 React App 만들기에 내장되어 있습니다.

React.lazy 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다. Suspense와 함께 사용하여 사용자에게 적절한 로드 상태를 표시합니다.

React 앱 만들기에는 기본적으로 웹 앱 매니페스트가 포함되어 있습니다. 이 파일을 수정하면 사용자의 기기에 애플리케이션이 설치될 때 표시되는 방식을 변경할 수 있습니다.

remember-window는 큰 목록을 효율적으로 렌더링할 수 있는 라이브러리입니다.

React는 UI를 더 쉽게 빌드할 수 있게 해주는 오픈소스 라이브러리입니다. 이 학습 과정에서는 애플리케이션의 성능과 사용성을 개선하는 데 사용을 고려해야 하는 생태계 내 다양한 API와 도구를 다룹니다.

remember-axe는 React 애플리케이션을 감사하고 Chrome DevTools 콘솔에 접근성 문제를 기록하는 라이브러리입니다. eslint-plugin-jsx-a11y는 JSX에서 직접 여러 접근성 규칙을 식별하고 적용하는 ESLint 플러그인입니다. 이 둘을 함께 사용하면 애플리케이션의 접근성 문제를 찾아 해결하기 위한 포괄적인 감사 접근 방식을 제공할 수 있습니다.

remember-snap은 사이트의 페이지를 정적 HTML 파일로 사전 렌더링하는 타사 라이브러리입니다. 이렇게 하면 애플리케이션의 첫 페인트 시간을 개선할 수 있습니다.

이 Codelab에서는 리소스를 미리 로드하여 미리 가져와 페이지 성능을 개선하는 방법을 알아봅니다.

Preferreds-Reduced 모션 미디어 쿼리는 시스템이 사용하는 애니메이션 또는 모션의 양을 최소화하도록 사용자가 요청했는지 여부를 감지합니다. 이는 최소화된 애니메이션이 필요하거나 선호하는 사용자를 위한 것입니다. 예를 들어 전정관 장애가 있는 사람들은 애니메이션을 최소한으로 유지하는 것을 선호하는 경우가 많습니다.

주요 렌더링 경로를 최적화하고 콘텐츠가 포함된 첫 페인트 (FCP) 개선을 위해 중요하지 않은 CSS를 연기하는 방법을 알아보세요.

Intersection Observer v2에는 그 자체로 교집합을 관찰할 수 있는 기능이 더해졌을 뿐만 아니라, 교차하는 시점에 교차하는 요소가 보이는지 여부를 감지할 수 있는 기능이 추가되었습니다.

사용자가 보는 기기의 요구사항과 기능에 맞는 사이트를 만드세요.

구성 가능한 스타일시트를 사용하면 FOUC에 대해 걱정할 필요 없이 스타일을 만들어 문서 또는 섀도우 루트에 배포할 수 있습니다.

앱에서 로직 및 렌더링을 구현하기 위한 권장사항

최소한의 설정으로 성능 예산을 정의하고 이를 Travis CI와 함께 bundlesize를 사용하여 개발 워크플로의 일부로 적용합니다.

실적 예산을 주시하는 가장 좋은 방법은 자동화하는 것입니다. 요구사항과 현재 설정에 가장 적합한 도구를 선택하는 방법을 알아보세요.

성능 예산을 설정하고 번들 크기를 webpack으로 확인하는 방법을 알아보세요.

속도를 높이기 위해 열심히 노력했습니다. 이제 Lighthouse Bot을 사용하여 Travis CI에서 성능 테스트를 자동화하여 속도를 유지할 수 있습니다.

WebAssembly를 이 설정에 어떻게 통합하나요? 이 도움말에서는 C/C++ 및 Emscripten을 예로 들어 이 문제를 해결해 보겠습니다.

getInstalledRelatedApps() API는 iOS/Android/데스크톱 앱 또는 PWA가 사용자 기기에 설치되어 있는지 확인할 수있는 웹 플랫폼 API입니다.

이 Codelab에서는 트랜스파일되는 코드 양을 최소화하여 애플리케이션의 성능을 개선하는 방법을 알아봅니다.

클라이언트 힌트는 사용자 기기 및 네트워크 연결의 특성에 따라 페이지 리소스를 제공하는 방식을 변경하는 데 사용할 수 있는 HTTP 요청 헤더의 집합입니다. 이 도움말에서는 고객 힌트에 대한 모든 사항과 작동 방식, 그리고 이를 통해 사용자가 더 빠르게 사이트를 이용할 수 있도록 하는 방법에 대한 몇 가지 아이디어를 알아봅니다.

접근성이 우수한 사이트란 모든 사용자의 장애가 있는 경우에도 콘텐츠에 액세스할 수 있으며 가능한 한 다양한 범위의 사용자가 기능을 이용할 수 있는 사이트입니다.

일시적이고 영구적인 운동 장애가 있는 사용자부터 효율성과 생산성을 높이기 위해 단축키를 사용하는 사용자까지 다양한 사용자가 키보드를 사용하여 애플리케이션을 탐색합니다. 애플리케이션에 적합한 키보드 탐색 전략을 마련하면 모두에게 더 나은 환경을 제공할 수 있습니다.

제목과 랜드마크에 올바른 요소를 사용하면 보조 기술 사용자의 탐색 환경을 크게 개선할 수 있습니다.

포커스 표시기 (보통 "포커스 링"으로 표시됨)는 현재 포커스가 맞춰진 요소를 나타냅니다. 마우스를 사용할 수 없는 사용자의 경우 이 표시기는 마우스 포인터를 대신하는 역할을 하므로 매우 중요합니다.

스크린 리더와 같은 보조 기술이 사용자에게 어떤 내용을 공지해야 할지 어떻게 알 수 있는지 궁금했던 적이 있나요? 답은 이러한 기술은 시맨틱 HTML로 페이지를 마크업하는 개발자에게 의존한다는 것입니다. 하지만 의미 체계란 무엇이며 스크린 리더에서는 시맨틱스를 어떻게 사용할까요?

표준 HTML 요소에는 키보드 접근성 기능이 내장되어 있습니다. 맞춤 대화형 구성요소를 빌드할 때 키보드에 액세스할 수 있도록 tabindex를 사용하세요.

올바른 의미론적 HTML 요소를 사용하면 키보드 액세스 요구사항의 대부분 또는 전부를 충족할 수 있습니다. 따라서 tabindex를 조정하는 데 드는 시간을 줄이고 더 많은 사용자를 만족시킬 수 있습니다.

스크린 리더가 사용자에게 음성 UI를 표시하려면 의미 있는 요소에 적절한 라벨 또는 대체 텍스트가 있어야 합니다. 대체 라벨 또는 대체 텍스트는 요소에 액세스 가능한 이름을 부여하며, 접근성 트리에서 요소 의미 체계를 표현하는 주요 속성 중 하나입니다.

JavaScript 번들을 분석하여 사용되지 않는 코드를 감지하고 삭제합니다.

이 Codelab에서는 밀도 설명자와 srcset를 사용하여 사용자 기기에 적합한 픽셀 밀도로 이미지를 로드하는 방법을 알아봅니다.

검색엔진은 사서의 디지털 버전입니다. 포괄적인 색인을 사용하여 쿼리에 적합한 정보를 찾습니다. 검색의 기본사항을 이해하면 사용자가 콘텐츠를 검색할 수 있도록 준비할 수 있습니다.

대량의 자바스크립트 페이로드를 전송하면 사이트 속도에 상당한 영향을 미칩니다. 애플리케이션의 첫 페이지가 로드되는 즉시 모든 자바스크립트를 사용자에게 전달하는 대신 번들을 여러 개로 분할하여 맨 처음에 필요한 것만 보내세요.

공격을 방어하려면 개발자는 취약점을 완화하고 애플리케이션에 보안 기능을 추가해야 합니다. 다행히 웹에서 브라우저는 "샌드박스"를 비롯한 많은 보안 기능을 제공합니다.

안전하지 않은 애플리케이션은 사용자와 시스템을 다양한 유형의 손상에 노출시킬 수 있습니다. 악의적인 사용자가 취약점이나 보안 기능 부족을 이용하여 피해를 입히는 것을 공격이라고 합니다. 이 가이드에서는 애플리케이션을 보호할 때 무엇을 살펴봐야 하는지 알 수 있도록 다양한 유형의 공격에 대해 알아봅니다.

Lighthouse 검색엔진 최적화 감사에서는 페이지를 스캔하고 검색엔진에 중요한 사항을 테스트한 후 점수를 부여하므로 개선할 특정 영역을 확인할 수 있습니다. 검색엔진 최적화가 중요한 이유는 관련성이 높은 사용자가 내 콘텐츠를 보도록 하기 때문입니다.

압축되지 않은 이미지는 불필요한 바이트로 페이지를 팽창시킵니다. Lighthouse를 실행하여 이미지를 압축하여 페이지 로드를 개선할 수 있는지 확인합니다.

우수한 성능이 부작용은 거의 없습니다. 실적 예산에 대해 알아보고 실적 예산이 성공을 향해 나아가는 데 어떤 도움이 되는지 알아보세요.

브라우저의 HTTP 캐시는 불필요한 네트워크 요청에 대한 첫 번째 방어선입니다.

이 Codelab에서는 애니메이션 GIF를 동영상으로 바꿔 성능을 개선하는 방법을 알아봅니다.

이 Codelab에서는 올바른 크기의 이미지를 제공하여 네트워크 성능을 개선하는 방법을 알아봅니다.

Imgur 또는 Gfycat과 같은 서비스에서 애니메이션 GIF를 본 적이 있나요? 개발 도구에서 GIF를 검사하다가 GIF가 실제로 동영상이라는 사실을 알아본 적이 있으신가요? 여기에는 합당한 이유가 있습니다. 애니메이션 GIF는 정말 커다란 크기입니다. 대용량 GIF를 동영상으로 변환하여 사용자의 대역폭을 크게 절약할 수 있습니다.

이 Codelab에서는 webpack과 함께 imagemin을 사용하여 JPEG 및 PNG 이미지를 최적화하여 더 빠르게 다운로드하는 방법을 알아봅니다.

이 Codelab에서는 Font Face Observer를 사용하여 즉시 텍스트를 표시하는 방법을 알아봅니다.

이 Codelab에서는 서비스 워커를 등록하여 애플리케이션을 안정적으로 만드는 방법을 알아봅니다.

내 사이트에 의미 있는 성능 측정항목에 대한 기준점을 정의하기 위한 단계별 안내를 통해 사이트가 빠르게 로드되도록 하세요.

이 Codelab에서는 기기 디스플레이 크기에 따라 완전히 다른 이미지를 로드하는 방법을 알아봅니다.

WebP 이미지는 JPEG 및 PNG 이미지보다 작습니다. 일반적으로 파일 크기가 25~35% 줄어듭니다. 이렇게 하면 페이지 크기가 줄어들고 성능이 개선됩니다.

이 Codelab에서는 beforeinstallprompt 이벤트를 사용하여 사이트를 설치 가능하게 만드는 방법을 알아봅니다.

이 Codelab에서는 iframe 내부의 데이터에 액세스할 때 동일 출처 정책이 어떻게 작동하는지 알아봅니다.