웹 플랫폼 대시보드와 HTTP API를 쿼리하여 기준점에 도달한 기능에 관한 데이터를 가져와 개발 워크플로를 위한 도구를 빌드하는 방법을 알아봅니다.

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의 계획에 관한 일반적인 질문에 대한 답변을 제공합니다.