기사
장기 작업 최적화
'기본 스레드를 차단하지 말고' '장기 작업을 중단'해야 한다는 말을 들었는데 이러한 작업을 수행한다는 것은 어떤 의미일까요?
결제 수단 설정
웹 결제를 사용한 결제 거래는 결제 앱을 발견하는 순간부터 시작됩니다. 판매자와 고객이 결제할 수 있도록 결제 수단을 설정하고 결제 앱을 준비하는 방법을 알아보세요.
모듈 미리 로드
모듈 미리 로드는 JavaScript 모듈을 선언적으로 미리 로드하는 방법을 제공합니다.
양식에서 브라우저 자동 완성 측정
사용자 환경을 최적화하려면 사용자가 양식과 상호작용하는 방식을 이해하는 것이 중요합니다. 브라우저 자동 완성은 이 과정에서 중요한 역할을 합니다. 사용자가 양식에서 자동 완성을 사용하는 방식에 관한 데이터를 수집하고 분석하는 방법을 알아보세요.
1단계: 온라인 악성 댓글을 방지하기 위한 클라이언트 측 AI
'독성 감지로 사용자를 보호하고 더 안전한 온라인 환경을 만드세요. 1부에서는 AI를 배포하여 악성 콘텐츠의 근원인 사용자의 키보드에서 악성 콘텐츠를 완화하는 데 필요한 컨텍스트를 공유합니다."
2단계: 클라이언트 측 AI 독성 감지 빌드
악성 콘텐츠 감지는 사용자를 보호하고 더 안전한 온라인 환경을 조성합니다. 두 번째 부분에서는 근본적으로 악의적인 표현을 감지하고 완화하는 클라이언트 측 AI 도구를 빌드하는 방법을 알아봅니다.
총 차단 시간 (TBT)
이 게시물에서는 총 차단 시간 (TBT) 측정항목과 이 측정항목을 측정하는 방법을 설명합니다.
최대 콘텐츠 렌더링 시간 최적화
LCP 분석 및 개선이 필요한 주요 영역을 파악하는 방법에 관한 단계별 안내
웹 바이탈 측정 시작하기
실제 환경과 실험실 환경에서 사이트의 웹 바이탈을 측정하는 방법을 알아보세요.
Web Vitals
건전한 사이트를 위한 필수 측정항목
Core Web Vitals를 개선하는 가장 효과적인 방법
Chrome에서 웹 성능을 최적화하고 Core Web Vitals를 개선할 수 있는 가장 큰 기회로 파악한 권장사항 모음
CSS content-visibility 속성이 이제 기준으로 새로 제공됨
이제 CSS content-visibility 속성을 기준으로 새로 사용할 수 있습니다.
LLM 기능과 요약 비교
LLM을 판단 기법으로 사용하여 다양한 모델과 프롬프트의 결과를 평가합니다. 인간의 판단에 의존하는 대신 모델 검증이 다른 LLM에 위임됩니다.
Core Web Vitals 측정항목 기준점을 정의하는 방법
코어 웹 바이탈 기준점의 기반이 되는 연구 및 방법론
실습에서 느린 상호작용 수동으로 진단
필드 데이터를 살펴본 결과 상호작용이 느린 것으로 나타났습니다. 다음 단계에서는 이러한 상호작용을 수동으로 테스트하는 방법을 자세히 알아보고 그 원인을 파악합니다.
Google 도구를 사용한 코어 웹 바이탈 워크플로
Core Web Vitals의 중요성이 커짐에 따라 사이트 소유자와 개발자는 성능과 주요 사용자 경험에 점점 더 많은 관심을 기울이고 있습니다. Google에서 페이지를 평가, 최적화 및 모니터링하는 데 도움이 되는 많은 도구를 제공하지만 다양한 데이터 소스와 이를 효과적으로 사용하는 방법을 혼동하는 경우가 많습니다. 이 가이드에서는 여러 도구를 결합하는 워크플로를 제안하고 개발 프로세스에서 이러한 도구가 적절한 위치와 방법을 명확히 설명합니다.
기준
이 도움말에서는 Baseline의 기원, Google의 참여, WebDX 커뮤니티 그룹의 소유권에 대해 설명합니다.
뒤로-앞으로 캐시
브라우저의 뒤로 및 앞으로 버튼을 사용할 때 페이지가 즉시 로드되도록 최적화하는 방법에 대해 알아보세요.
CSSNestedDeclarations를 사용하면 CSS 중첩이 개선됨
CSS 중첩이 훨씬 개선됩니다.
First Input Delay (FID)
이 게시물에서는 최초 입력 반응 시간 (FID) 측정항목을 소개하고 측정 방법을 설명합니다.
현장에서 성능 디버그
분석과 관련된 실제 사용자 문제를 식별하고 해결하는 데 도움이 되도록 성능 데이터와 디버그 정보를 함께 표시하는 방법을 알아보세요.
클라이언트 측 AI의 성능 및 UX 개선
낮은 지연 시간, 감소된 서버 측 비용, API 키 요구사항 없음, 향상된 사용자 개인 정보 보호, 오프라인 액세스 등 클라이언트 측 AI의 이점을 알아보세요.
CSS @property의 성능 벤치마킹
@property는 CSS의 성능에 어떤 영향을 미치나요?
Google 도구로 Core Web Vitals와 광고 수익을 상관시키기
Google 도구를 사용하여 Core Web Vitals와 광고 수익의 상관관계를 파악하는 방법을 알아보세요.
이제 오프스크린 iframe을 지연 로드해 보겠습니다.
이 게시물에서는 로드 속성 및 이 속성을 사용하여 iframe 로드를 제어하는 방법을 설명합니다.
웹용 스토리지
브라우저에 데이터를 저장하는 다양한 옵션이 있습니다. 요구사항에 가장 적합한 것은 무엇인가요?
동일한 도메인에 여러 프로그레시브 웹 앱 구축
동일한 도메인을 재사용하는 여러 PWA를 빌드하는 데 권장되는 방법과 권장되지 않는 방법마다 장단점을 살펴봅니다.
웹 푸시 프로토콜
푸시 알림 구독을 관리하고 푸시 서비스에 웹 푸시 프로토콜 요청을 보내는 서버를 구축하는 방법을 보여주는 단계별 대화형 튜토리얼입니다.
좋은 프로그레시브 웹 앱의 특징은 무엇인가요?
좋은 프로그레시브 웹 앱 또는 훌륭한 프로그레시브 웹 앱의 특징은 무엇인가요?
Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법
PWA의 웹 앱 매니페스트에서 아이콘, 바로가기, 색상, 기타 메타데이터를 변경하는 데 필요한 작업입니다.
설치할 수 있게 되는 데 필요한 것은 무엇입니까?
프로그레시브 웹 앱 설치 가능 기준
웹 앱 매니페스트 추가
웹 앱 매니페스트는 웹 앱의 작동 방식을 브라우저에 알려주는 간단한 JSON 파일입니다.
엄격한 콘텐츠 보안 정책 (CSP)으로 교차 사이트 스크립팅 (XSS) 완화
교차 사이트 스크립팅에 대한 심층 방어로 스크립트 nonce 또는 해시를 기반으로 CSP를 배포하는 방법을 알아보세요.
웹에서 하드웨어 기기에 액세스
이 도움말은 웹 개발자가 특정 기기에 따라 올바른 하드웨어 API를 선택하는 데 도움이 됩니다.
관련 출처 요청을 통해 사이트 전반에서 패스키 재사용 허용
관련 출처 요청을 사용하여 사이트 전반에서 패스키 재사용을 허용하는 방법을 알아보세요.
올바른 이미지 형식 선택
웹사이트에 최적화된 이미지를 제공하려면 먼저 적절한 이미지 형식을 선택해야 합니다. 이 게시물은 올바른 선택을 하는 데 도움이 됩니다.
웹용 브라우저 수준 이미지 지연 로드
이 게시물에서는 로드 속성 및 이 속성을 사용하여 이미지 로드를 제어하는 방법을 다룹니다.
커스텀 측정항목
맞춤 측정항목을 사용하면 사이트 고유의 사이트 환경을 측정하고 최적화할 수 있습니다.
Google 애널리틱스 4 및 BigQuery로 성능 측정 및 디버그
웹 바이탈 데이터를 Google 애널리틱스 4 속성으로 전송하고 BigQuery 및 Looker Studio에서 분석하도록 데이터를 내보내는 방법을 알아보세요.
웹 권한 권장사항
이 가이드에서는 불필요한 메시지 및 액세스 차단을 최소화하기 위해 사용자에게 민감한 기능 (예: 카메라, 마이크, 위치)에 대한 액세스 권한을 요청할 때 따라야 할 웹사이트에서 따라야 할 권장사항을 설명합니다.
쿠키 알림 권장사항
쿠키 알림이 실적, 실적 측정, UX에 미치는 영향을 알아보세요.
Media Session API로 미디어 알림 및 재생 컨트롤 맞춤설정
웹 개발자는 미디어 알림을 맞춤설정하고 Media Session API를 사용하여 변경을 추적하거나 탐색하는 것과 같은 미디어 관련 이벤트에 응답할 수 있습니다.
필드에서 느린 상호작용 찾기
실험실에서 웹사이트의 '다음 페인트에 대한 상호작용'을 최적화하기 위해 느린 상호작용을 재현하려면 먼저 필드 데이터를 사용하여 '다음 페인트'에 대한 상호작용을 찾아야 합니다. 이 가이드에서 그 방법을 알아보세요.
tabindex 사용
요소의 탭 위치를 명시적으로 설정하려면 tabindex 속성을 사용합니다.
TTFB (Time to First Byte)
이 게시물에서는 TTFB (Time to First Byte) 측정항목을 소개하고 측정 방법을 설명합니다.
소규모 LLM을 위한 실용적인 프롬프트 엔지니어링
다양한 LLM, 모델, 모델 크기에서 원하는 결과를 얻기 위해 프롬프트를 조정하는 방법을 알아보세요.
첫 바이트까지의 시간 최적화
Time to First Byte(첫 바이트까지의 시간) 측정항목을 최적화하는 방법을 알아봅니다.
Interaction to Next Paint(다음 페인트와의 상호작용)(INP)
이 게시물에서는 '다음 페인트와의 상호작용 (INP)' 측정항목을 소개하고 작동 방식, 측정 방법, 개선 방법에 관한 제안사항을 제공합니다.
Light-dark()를 사용한 CSS 색상 스키마에 종속된 색상
설명: Light-dark() 함수를 사용하여 사용된 색 구성표에 반응하는 색상을 정의합니다.
웹 앱의 WebAssembly 성능 패턴
이 가이드에서는 WebAssembly의 이점을 활용하려는 웹 개발자를 대상으로, 실행 중인 예제를 통해 Wasm을 활용하여 CPU 집약적인 작업을 아웃소싱하는 방법을 알아봅니다.
CSS 애니메이션 그리드 레이아웃
CSS 그리드에서 `grid-template-columns` 및 `grid-template-rows` 속성을 사용하면 각각 선 이름을 정의하고 그리드 열과 행의 크기를 추적할 수 있습니다. 이러한 속성에 보간 유형을 지원하면 애니메이션이나 전환의 중간 지점에서 그리드 레이아웃이 상태 간에 부드럽게 전환할 수 있습니다.
게임패드로 Chrome 공룡 게임을 플레이하세요.
Gamepad API로 웹 게임을 제어하는 방법을 알아보세요.
inert 속성
inert 속성은 포커스 이벤트 및 보조 기술의 이벤트를 비롯하여 요소의 사용자 입력 이벤트를 삭제하고 복원하는 방법을 단순화하는 전역 HTML 속성입니다.
인공지능이란?
AI라는 약어는 종종 혼용되어 AI 분야를 구성하는 다양한 유형의 기술을 나타냅니다.
Web.dev AI팀 소개
테크니컬 라이터와 개발자 관계팀을 소개합니다.
윤리 및 AI
AI 도구를 사용하고 새로운 콘텐츠를 생성할 때는 윤리적 고려사항이 많습니다.
사이트 검색 업그레이드: 생성형 AI를 통한 상황별 답변
AI 도구를 사용하고 새로운 콘텐츠를 생성할 때는 윤리적 고려사항이 많습니다.
AAGUID로 패스키 제공업체 확인
신뢰할 수 있는 당사자는 AAGUID를 검사하여 패스키의 출처를 확인할 수 있습니다. 작동 방식을 알아보세요.
Binaryen으로 Wasm 컴파일 및 최적화
ExampleScript라는 합성 장난감 언어의 예를 사용하여 Binaryen.js API를 사용하여 자바스크립트에서 WebAssembly 모듈을 작성하고 최적화하는 방법을 알아봅니다.
<model-viewer> 웹 구성요소
<model-viewer> 웹 구성요소를 사용하면 웹페이지에서 3D 모델을 선언적으로 사용할 수 있습니다.
HTML5에서 오디오 및 동영상 캡처
오디오/동영상 캡처는 오랫동안 웹 개발의 '무한한 가능성'이었습니다. 오랫동안 브라우저 플러그인 ( Flash 또는 Silverlight )을 사용해 이 작업을 처리해야 했습니다. 어서요! HTML5가 해결해 줍니다. 분명하지는 않지만 HTML5의 등장으로 기기 하드웨어에 대한 액세스가 급증했습니다. Geolocation (GPS), Orientation API (가속도계), WebGL (GPU), Web Audio API (오디오 하드웨어)가
userVerification 심층 분석
WebAuthn에서 `userVerification` 을 사용하는 방법 알아보기
CrUX 데이터가 RUM 데이터와 다른 이유는 무엇인가요?
RUM 데이터가 CrUX와 다른 코어 웹 바이탈 수치를 표시할 수 있는 이유를 알아보세요.
웹 개발자를 위한 접근성
누구나 이용할 수 있고 포용적인 사이트를 구축하는 것이 중요합니다. 최적화할 수 있는 주요 장애 영역은 6가지 이상(시각, 청각, 운동성, 인지, 언어, 신경)이 있습니다.
Largest Contentful Paint (LCP)
이 게시물에서는 최대 콘텐츠 렌더링 시간 (LCP) 측정항목을 소개하고 측정 방법을 설명합니다.
타사 자바스크립트 로드
타사 스크립트는 다양하고 유용한 기능을 제공하여 웹을 더욱 동적으로 만듭니다. 서드 파티 스크립트의 로드를 최적화하여 성능에 미치는 영향을 줄이는 방법을 알아보세요.
이미 패스키가 있는 경우 새 패스키의 생성을 방지합니다.
사용자의 비밀번호 관리자에 패스키가 이미 있는 경우 새 패스키를 만들지 못하게 하는 방법을 알아보세요.
IndexedDB 사용
IndexedDB의 기본사항에 관한 가이드입니다.
모든 프런트엔드 개발자가 2024년에 알아야 할 5가지 CSS 스니펫
지금 바로 사용할 수 있는 가치 있고 강력하며 안정적인 CSS입니다.
URL의 구성요소는 무엇인가요?
호스트, 사이트, 출처의 차이점은 무엇인가요? eTLD란 무엇인가요? 이 도움말에서 설명하는 내용은 다음과 같습니다.
검색 가능한 사용자 인증 정보 자세히 알아보기
검색 가능한 사용자 인증 정보란 무엇이고 사용 사례에 적합한 사용자 환경을 빌드하는 방법을 알아봅니다.
렌더링 성능
사용자는 사이트와 앱이 제대로 실행되지 않으면 이를 알아차립니다. 따라서 렌더링 성능 최적화는 매우 중요합니다.
ResizeObserver: 요소의 document.onresize와 유사
요소의 콘텐츠 직사각형 크기가 변경되면 `ResizeObserver` 를 통해 알려주므로 적절하게 반응할 수 있습니다.
텍스트 기반 애셋의 인코딩 및 전송 크기 최적화
불필요한 리소스 다운로드를 제거한 후 페이지 로드 속도를 개선하기 위해 할 수 있는 가장 좋은 작업은 나머지 리소스를 최적화하고 압축하여 전체 다운로드 크기를 최소화하는 것입니다.
오프스크린 캔버스—웹 작업자로 캔버스 작업 속도를 높이세요.
이 문서에서는 웹 앱에서 그래픽을 렌더링할 때 OffscreenCanvas API를 사용하여 성능을 개선하는 방법을 설명합니다.
First Contentful Paint (FCP)
이 게시물에서는 콘텐츠가 포함된 첫 페인트 (FCP) 측정항목을 소개하고 측정 방법을 설명합니다.
콘텐츠 전송 네트워크 (CDN)
이 도움말에서는 콘텐츠 전송 네트워크 (CDN)를 포괄적으로 간략하게 설명합니다. 또한 CDN 설정을 선택, 구성, 최적화하는 방법을 설명합니다.
좋은 로그아웃 경험의 조건
사용자가 웹사이트에서 로그아웃했을 때 취해야 할 조치에 대한 실용적인 개발자 가이드입니다.
상호작용 시작 시간 (TTI)
이 게시물에서는 상호작용 시작 시간 (TTI) 측정항목을 소개하고 이를 측정하는 방법을 설명합니다.
Fetch Priority API로 리소스 로드 최적화
Fetch Priority API는 브라우저에 대한 리소스의 상대적 우선순위를 나타냅니다. 로드를 최적화하고 코어 웹 바이탈을 개선할 수 있습니다.
:user-유효한 가상 클래스 및 :user-invalid 유사 클래스
:user-유효한 가상 클래스와 :user-invalid 가상 클래스 정보 및 이를 사용하여 입력 유효성 검사의 사용자 환경을 개선하는 방법
비즈니스 의사 결정권자를 위해 Core Web Vitals 최적화
비즈니스 의사 결정권자와 개발자가 아닌 사람들이 코어 웹 바이탈을 개선하는 방법을 알아보세요.
자바스크립트에서 base64 인코딩 문자열의 미묘한 차이
문자열에 base64 인코딩 및 디코딩을 적용할 때 발생하는 일반적인 문제를 파악하고 피합니다.
CSS 서브 그리드
Subgrid를 사용하면 그리드를 공유할 수 있으므로 중첩된 그리드를 상위 및 동위 요소에 정렬할 수 있습니다.
페이지 속도에 영향을 주지 않으면서 광고를 효과적으로 로드하기
오늘날의 디지털 세계에서 온라인 광고는 우리 모두가 누리는 무료 웹의 중요한 부분입니다. 그러나 광고가 제대로 구현되지 않으면 탐색 환경이 느려지고 사용자가 불편을 겪고 참여도가 하락할 수 있습니다. 페이지 속도에 영향을 주지 않으면서 광고를 효과적으로 로드하고, 원활한 사용자 환경을 보장하며, 웹사이트 소유자의 수익 기회를 극대화하는 방법을 알아보세요.
일반적인 코드 적용 범위의 네 가지 유형
코드 적용 범위가 무엇인지 알아보고 4가지 일반적인 측정 방법을 살펴보세요.
테스트하거나 하지 않는 것의 기술적 관점
테스트해야 하는 것과 배제할 수 있는 것을 결정합니다.
테스트 사례 및 우선순위 정의
테스트할 대상을 결정하고, 테스트 사례를 정의하고, 우선순위를 정합니다.
사용자 중심 성능 측정항목
사용자 중심 실적 측정항목은 실제 사용자에게 도움이 되는 방식으로 사이트 경험을 이해하고 개선하는 데 중요한 도구입니다.
반응형 이미지 미리 로드
우수한 사용자 환경을 보장하기 위해 반응형 이미지를 미리 로드하는 새롭고 흥미로운 가능성을 알아보세요.
CSS로 사용자 환경설정에 맞게 서체 조정
사용자가 콘텐츠를 편안하게 읽을 수 있도록 사용자의 환경설정에 맞게 글꼴을 조정하는 방법입니다.
피라미드 vs. 게? 적절한 테스트 전략 찾기
다양한 테스트 유형을 프로젝트에 맞는 합리적인 전략으로 결합하는 방법을 알아보세요.
테스트 자동화의 세 가지 일반적인 유형
기본적인 것부터 시작해 보겠습니다. 두 가지 일반 테스트 모드와 세 가지 일반적인 테스트 자동화 유형을 살펴봅니다.
불필요한 다운로드 제거
리소스를 주기적으로 감사하여 각 리소스가 더 나은 사용자 환경을 제공하는 데 도움이 되는지 확인해야 합니다.
WebAssembly란 무엇이며 어디에서 발생했나요?
실행 프로그램을 위한 휴대용 바이너리 코드 형식 및 해당 텍스트 형식인 WebAssembly (약어: Wasm)와 이러한 프로그램과 호스트 환경 간의 상호작용을 용이하게 하는 소프트웨어 인터페이스에 대한 소개입니다.
mkbitmap을 WebAssembly로 컴파일
mkbitmap C 프로그램은 이미지를 읽고 반전, 하이패스 필터링, 확장, 임계값 연산 중 하나 이상을 순서대로 적용합니다. 각 작업을 개별적으로 제어하고 사용 설정하거나 중지할 수 있습니다. 이 도움말에서는 mkbitmap을 WebAssembly로 컴파일하는 방법을 설명합니다.
최신 웹 애플리케이션에서 사용자 데이터를 안전하게 호스팅
웹 애플리케이션에 사용자 제어 콘텐츠를 안전하게 표시하는 방법
원본 비공개 파일 시스템
파일 시스템 표준은 출처 비공개 파일 시스템 (OPFS)을 페이지 출처에 비공개인 스토리지 엔드포인트로 도입합니다. 이 엔드포인트는 사용자에게 표시되지 않으며 성능에 최적화된 특수한 종류의 파일에 대한 선택적 액세스를 제공합니다. 출처 비공개 파일 시스템은 최신 브라우저에서 지원되며 웹 하이퍼텍스트 애플리케이션 기술 작업 그룹 ( WHATWG )에서 파일 시스템 실시간 표준 으로 표준화했습니다. 브라우저 지원 소스 컴퓨터의 파일을 생각하면
응답성이 높은 웹사이트를 위한 AVIF 배포
생태계에서 AVIF가 채택되는 방식과 개발자가 스틸 이미지 및 애니메이션에 AVIF를 통해 기대할 수 있는 성능 및 품질상의 이점에 관한 개요입니다.
다음 페인트에 대한 상호작용 최적화
웹사이트의 다음 페인트와의 상호작용을 최적화하는 방법을 알아보세요.
지금 사용할 수 있는 기준 기능
Baseline의 일부 기능 알아보기
스크립트 평가 및 장기 작업
스크립트를 로드할 때 브라우저에서 실행 전에 평가하는 데 시간이 걸리므로 작업이 오래 걸릴 수 있습니다. 스크립트 평가의 작동 방식과 페이지 로드 중에 스크립트로 인해 긴 작업이 발생하지 않도록 할 수 있는 방법을 알아보세요.
큰 DOM 크기가 상호작용에 미치는 영향과 이에 대해 취할 수 있는 조치
큰 DOM 크기는 상호작용이 빠른지 여부에 영향을 미칠 수 있습니다. DOM 크기와 INP의 관계, DOM 크기를 줄이기 위해 취할 수 있는 조치 및 페이지에 DOM 요소가 많은 경우 렌더링 작업을 제한하는 다른 방법에 대해 자세히 알아보세요.
HTML 및 상호작용의 클라이언트 측 렌더링
자바스크립트로 HTML을 렌더링하는 것은 서버에서 전송한 HTML을 렌더링하는 것과 다르며 성능에 영향을 줄 수 있습니다. 이 가이드에서 차이점에 대해 알아보고, 특히 상호 작용과 관련된 웹사이트의 렌더링 성능을 유지하기 위해 취할 수 있는 조치에 대해 알아보세요.
입력 지연 최적화
입력 지연은 전체 상호작용 지연 시간에 크게 영향을 줄 수 있으며 페이지의 INP에 부정적인 영향을 미칠 수 있습니다. 이 가이드에서는 입력 지연의 정의와 더 빠른 상호작용을 위해 입력을 줄이는 방법을 알아봅니다.
웹 바이탈 확장 프로그램을 사용하여 코어 웹 바이탈 문제 디버그
이제 웹 바이탈 확장 프로그램에 더 많은 디버깅 정보가 표시되어 코어 웹 바이탈 문제의 근본 원인을 파악하는 데 도움이 됩니다.
레이아웃 변경 누적 최적화
레이아웃 변경 횟수 (CLS)는 사용자가 페이지 콘텐츠의 갑작스러운 변화를 경험하는 빈도를 정량화하는 측정항목입니다. 이 가이드에서는 크기 또는 동적 콘텐츠가 없는 이미지 및 iframe과 같이 CLS의 일반적인 원인을 최적화하는 방법을 다룹니다.
WordPress 플레이그라운드 및 WebAssembly로 브라우저 내 WordPress 환경 빌드
WebAssembly가 포함된 브라우저에서만 실행되는 PHP 기반 전체 WordPress
Cumulative Layout Shift (CLS)
이 게시물에서는 레이아웃 변경 횟수 (CLS) 측정항목을 소개하고 이를 측정하는 방법을 설명합니다.
WebAssembly가 제공하는 새로운 개발자용 기능
WebAssembly 덕분에 이제 웹에서 사용할 수 있는 도구의 쇼케이스입니다.
소스 맵이란 무엇인가요?
소스 맵으로 웹 디버깅 환경을 개선합니다.
앱 스토어의 PWA
프로그레시브 웹 앱은 Android Play 스토어나 Microsoft 스토어 등의 앱 스토어에 제출할 수 있습니다.
모든 프런트엔드 개발자가 2023년에 알아야 할 6가지 CSS 스니펫
지금 바로 사용할 수 있는 가치 있고 강력하며 안정적인 CSS입니다.
CSS의 삼각 함수
CSS에서 사인, 코사인, 탄젠트 등을 계산합니다.
requestVideoFrameCallback()을 사용하여 동영상에서 효율적인 동영상 프레임별 작업 수행
requestVideoFrameCallback() 메서드를 사용하면 웹 작성자가 새 동영상 프레임이 컴포지터에 전송될 때 렌더링 단계에서 실행되는 콜백을 등록할 수 있습니다.
GDE 커뮤니티 하이라이트: Lars Knudsen
Google Developers Experts (GDE) 프로그램 회원과의 인터뷰 중 하나입니다.
신속한 CSS 팁 애니메이션 그라데이션 텍스트
범위 지정된 맞춤 속성과 background-clip을 사용하여 애니메이션 그래디언트 텍스트 효과를 만들어 보겠습니다. CodePen 으로 이동하여 새 펜을 만듭니다. 텍스트의 마크업을 만듭니다. '빠른'이라는 단어가 포함된 제목을 사용해 보겠습니다. 그런 다음 body 에 더 어두운 background-color 를 적용해 보겠습니다. 텍스트의 font-size 를 올립니다. clamp 를 사용하여 반응형으로 만듭니다. 사용할 색상에 맞는
미디어 앱을 위한 새로운 패턴
이 블로그 게시물에서는 미디어 앱을 위한 새로운 패턴 모음을 발표합니다.
Chrometober 빌드
Chrometober에서 재미있고 공포스러운 도움말 및 유용한 정보를 공유하기 위해 스크롤책이 살아나는 과정을 소개합니다.
도움말 구성요소 빌드
색상 적응형과 액세스 가능한 도움말 맞춤 요소를 빌드하는 방법에 관한 기본적인 개요입니다.
비밀번호 없는 로그인의 패스키 생성
패스키는 웹사이트의 사용자 계정을 더 안전하고 간단하며 사용하기 쉽고 비밀번호가 없는 상태로 만들어 줍니다. 이 도움말에서는 사용자가 웹사이트의 패스키를 만들 수 있도록 허용하는 방법을 설명합니다.
양식 자동 완성을 통한 패스키 로그인
패스키는 웹사이트의 사용자 계정을 더 안전하고 간단하며 사용하기 쉽고 비밀번호가 없는 상태로 만들어 줍니다. 이 도움말에서는 기존 비밀번호 사용자를 수용하면서 패스키를 사용한 비밀번호 없는 로그인을 설계하는 방법을 설명합니다.
플로팅 작업 버튼 (FAB) 구성요소 빌드
색상 적응성과 응답성이 뛰어나며 접근성이 뛰어난 FAB 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
글꼴 권장사항
코어 웹 바이탈에 맞게 웹 글꼴을 최적화하는 방법을 알아보세요.
신속한 CSS 팁 애니메이션 로더
범위 지정된 맞춤 속성과 animation-timing-function을 사용하여 애니메이션 CSS 로더를 만들어 보겠습니다. CodePen 으로 이동하여 새 펜을 만듭니다. 로더의 마크업을 만듭니다. 인라인 맞춤 속성을 사용하는 방법을 확인합니다. 생성기 ( Pug )를 사용하여 줄 수를 구성할 수도 있습니다. 로더에 스타일을 지정합니다. 절대 위치 지정과 calc 와 transform 의 조합을 사용하여 선을 배치합니다. --index 를
GDE 커뮤니티 하이라이트: Alba Silvente Fuentes
Google Developers Experts (GDE) 프로그램 회원과의 인터뷰 중 하나입니다.
웹 디자인 색상 대비 테스트
디자인의 접근성 높은 색상 대비를 테스트하고 확인하는 세 가지 도구와 기법에 관한 개요입니다.
웹사이트의 기본 탐색 메뉴 빌드하기
이 튜토리얼에서는 웹사이트에서 액세스 가능한 기본 탐색을 빌드하는 방법을 설명합니다. 의미론적 HTML, 접근성, ARIA 속성 사용이 때때로 도움이 되는 것보다 더 많은 해가 될 수 있는 방법에 대해 배웁니다.
:modal?
이 편리한 CSS 의사 선택기를 사용하면 모달인 요소를 선택할 수 있습니다.
비뚤어진 그리드 착시 현상 만들기
CSS로 착시 현상을 재현하는 방법을 재미있게 알아보세요.
광고 소재 목록 스타일 지정
목록의 스타일을 지정할 수 있는 유용하고 창의적인 방법을 살펴보세요.
태그 및 태그 관리자를 위한 권장사항
Core Web Vitals의 태그 및 태그 관리자를 최적화합니다.
Nordhealth가 웹 구성요소에서 커스텀 속성을 사용하는 방법
디자인 시스템 및 구성요소 라이브러리에서 맞춤 속성을 사용할 때의 이점
개별 변환 속성으로 CSS 변환을 세밀하게 제어
개별 변환, 회전, 배율 조정 속성을 사용하여 직관적인 방식으로 변환에 접근하는 방법을 알아봅니다.
CSS 테두리 애니메이션
CSS에서 테두리에 애니메이션을 적용하는 여러 방법 살펴보기
BBC에서 보안 및 성능 향상을 위해 HSTS를 출시하는 방법
BBC는 보안 및 성능을 개선하기 위해 웹사이트에 HSTS를 배포하고 있습니다. HSTS의 의미와 HSTS가 어떻게 도움이 되는지 알아보세요.
실험실 및 현장 데이터가 다를 수 있는 이유와 해야 할 일
코어 웹 바이탈 측정항목을 모니터링하는 도구에서 보고되는 수치가 서로 다른 이유와 이러한 차이를 해석하는 방법을 알아보세요.
윈윈 상황
GDE Enrique Fernandez Guerra가 NGO HelpDev를 오픈소싱합니다.
Internet Explorer의 끝
Maersk.com의 고객과 개발자를 위한 Internet Explorer 지원 종료
HTML5Rocks 사용 중단
HTML5Rocks를 오랫동안 만나 뵙게 되어 반가웠습니다.
퍼스트 파티 쿠키 레시피
보안, 교차 브라우저 호환성을 보장하고 서드 파티 쿠키가 단계적으로 지원 중단되면 손상 가능성을 최소화하기 위해 퍼스트 파티 쿠키를 설정하는 방법을 알아보세요.
웹에서 오디오와 동영상 재생 동기화
Web Audio API를 사용하면 AV 동기화를 제대로 실행할 수 있습니다.
원뿔 그래디언트를 사용해 멋진 테두리 만들기
원뿔형 그라데이션을 사용하면 이 멋진 테두리 예와 같은 흥미로운 효과를 만들 수 있습니다. Adam Argyle 님이 만들고 트위터의 이 트윗 을 통해 처음 공유한 이 CodePen 은 원뿔형 그라데이션 을 사용하여 테두리를 만드는 방법을 보여줍니다. 테리 먼 님이 창의적으로 아담의 CodePen을 포크 하여 이 CodePen 을 만들었습니다. 요소 위로 마우스를 가져가면 회전 각도를 저장하는 CSS 맞춤 속성을 업데이트하는 약간의
Fetch API 사용 시 오류 처리 구현
Fetch API 사용 시 오류 포착
자바스크립트 라이브러리 또는 프레임워크 선택
자바스크립트 라이브러리 또는 프레임워크 사용과 관련된 결정 이해
자바스크립트 라이브러리와 프레임워크의 차이점
클라이언트 측 JavaScript 환경 컨텍스트에서 프레임워크와 라이브러리 간의 차이점을 이해합니다.
빠르고 아름다운 웹 글꼴을 위한 API
Google Fonts CSS API의 작동 방식, 사용 방법, 웹 글꼴을 효율적으로 제공하는 방법을 업데이트했습니다.
터미널에 대한 프런트엔드 개발자 가이드
이 리소스는 터미널을 빠르게 탐색하는 데 도움이 될 수 있습니다.
GOV.UK는 프런트 엔드에서 jQuery를 삭제합니다.
GOV.UK는 프런트엔드에서 jQuery 종속성을 삭제했습니다. 무슨 일이 일어났는지 절대 추측하지 못합니다. (예, 유지됩니다.)
버튼 구성요소 빌드
색상 적응성과 반응성이 뛰어나고 접근성이 우수한 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
브라우저 미리 로드 스캐너와 싸우지 마세요.
브라우저 미리 로드 스캐너가 무엇인지, 성능에 어떻게 도움이 되는지, 어떻게 하면 방해받지 않을 수 있는지 알아보세요.
격차 줄이기
웹용 빌드를 더 쉽게 만듭니다.
현장에서 웹 바이탈을 측정하기 위한 권장사항
현재 분석 도구로 웹 바이탈을 측정하는 방법
개발자 커뮤니티에서 용기와 영감 얻기
멘토링 프로그램을 통해 리더가 되는 데 어떤 역할을 했는지 설명하는 웹 Google Developers 전문가
실제 사용되는 가변 글꼴
가변 글꼴에 관한 실용적인 가이드와 다양한 예시 공유
CSS Gradient Creator로 빠르게 멋진 CSS 그래디언트 만들기
Josh W Comeau의 이 도구를 사용하면 아주 간단하게 멋진 그래디언트를 만들 수 있습니다.
주요 웹 개발자 고충사항 심층 탐구
주요 문제점에 대한 통계 모음으로, 웹 개발자와의 일대일 대화를 통해 수집됩니다.
images.tooling.report를 사용하여 사이트 사진을 완벽하게 만들기
이미지 도구 상태를 확인합니다.
전역 및 로컬 변수 범위
범위에 대해 알아보고 자바스크립트에서 범위가 어떻게 작동하는지 알아보세요.
대화상자 구성요소 빌드
`` 요소를 사용하여 색상 적응성과 반응성이 뛰어나고 접근성이 뛰어난 미니 및 메가 모달을 빌드하는 방법에 관한 기본적인 개요입니다.
웹에서 미디어 재생 오류 디버그
웹에서 미디어 재생 오류를 디버그하는 방법을 알아보세요.
GDE 커뮤니티 하이라이트: Nishu Goel
Google Developers Experts (GDE) 프로그램 회원과의 인터뷰 중 하나입니다.
너무 많은 지연 로드가 성능에 미치는 영향
초기 표시 영역 내에서 이미지를 빠르게 로드하고 나머지는 지연 로드하면 로드하는 바이트는 줄이면서 웹 바이탈을 개선할 수 있습니다.
로드 표시줄 구성요소 빌드
`` 요소를 사용하여 색상 적응형 및 액세스 가능한 로드 바를 빌드하는 방법에 관한 기본적인 개요입니다.
양식에서 사용자 인증 정보 저장
등록 및 로그인 양식을 최대한 간단하게 유지하세요. 사용자가 다시 방문할 때 다시 로그인하지 않아도 되도록 로그인 양식의 사용자 인증 정보를 저장합니다. 양식의 사용자 인증 정보를 저장하려면 다음 단계를 따르세요. 계속하기 전에 양식에 autocomplete 속성이 포함되어 있는지 확인합니다. 이렇게 하면 Credential Management API가 양식에서 id 및 password 를 찾아 사용자 인증 정보 객체를 구성하는 데 도움이
Chrome 및 Firefox 곧 메이저 버전 100 출시
사용자 에이전트 문자열 변경사항, Chrome 및 Firefox의 영향을 완화하기 위해 취하는 전략, 도움을 줄 수 있는 방법
적응형 파비콘 빌드
적응형 파비콘을 빌드하는 방법에 관한 기본적인 개요입니다.
HTTP 캐시를 업데이트하여 보안 및 개인 정보 보호 개선
Cache-Control 헤더를 잊거나 잘못 사용하면 웹사이트의 보안 및 사용자 개인정보 보호에 부정적인 영향을 미칠 수 있습니다. 가치가 높은 웹사이트를 위한 추천을 받으세요.
Emscripten에서 캔버스에 그리기
Emscripten을 사용하여 WebAssembly에서 웹의 캔버스로 2D 그래픽을 렌더링하는 방법을 알아보세요.
추가 HTML 요소
건전한 사이트를 위한 필수 측정항목
USB 애플리케이션을 웹에 포팅 파트 2: gPhoto2
gPhoto2가 WebAssembly로 포팅되어 웹 앱에서 USB를 통해 외장 카메라를 제어하는 방법을 알아보세요.
네트워크 오류 로깅 (NEL)
네트워크 오류 로깅 (NEL)을 사용하여 클라이언트 측 네트워크 오류를 수집합니다.
WebAssembly 기능 감지
모든 브라우저에서 사용자를 지원하면서 최신 WebAssembly 기능을 사용하는 방법을 알아보세요.
USB 애플리케이션을 웹에 포팅 파트 1: libusb
WebAssembly 및 Fugu API를 사용하여 외부 기기와 상호작용하는 코드를 웹에 포팅하는 방법을 알아보세요.
테마 스위치 구성요소 빌드
적응형 테마 스위치 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
Emscripten을 사용하여 C++에 자바스크립트 스니펫 삽입하기
WebAssembly 라이브러리에 자바스크립트 코드를 삽입하여 외부와 통신하는 방법을 알아봅니다.
Oculus 퀘스트 2의 PWA
Oculus Quest 2는 Meta의 자회사인 Oculus에서 만든 가상 현실 (VR) 헤드셋입니다. 이제 개발자는 Oculus Quest 2의 멀티태스킹 기능을 활용하는 2D 및 3D 프로그레시브 웹 앱 (PWA)을 빌드하고 배포할 수 있습니다. 이 도움말에서는 Oculus Quest 2에서 PWA를 빌드하고, 사이드로드하고, 테스트하는 방법에 관해 설명합니다.
건물 디자인
Designcember의 공휴일 캘린더 스타일 환경을 구축하는 데 사용되는 프로세스와 도구를 살펴봅니다.
Designcember 계산기
주변광 센서와 창 컨트롤 오버레이 기능을 활용하여 웹에서 태양계 계산기를 다시 만들려고 하는 스큐어모픽스 시도입니다.
구조화된 Clone을 사용하여 자바스크립트 딥 복사
가장 오래전에는 JavaScript 값의 상세한 사본을 만들기 위해 해결 방법과 라이브러리를 사용해야 했습니다. 이제 플랫폼에 딥 복사를 위한 내장 함수인 `structuredClone()`이 제공됩니다.
토스트 메시지 구성요소 빌드
액세스 가능한 적응형 토스트 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
UI 펀드
디자인 도구, CSS, HTML 관련 작업자에게 보조금을 제공하기 위해 Chrome의 UI 펀드를 발표합니다.
3D 게임 메뉴 구성요소 빌드
반응형, 적응형, 접근성을 갖춘 3D 게임 메뉴를 빌드하는 방법에 관한 기본적인 개요입니다.
애니메이션 부드러움 측정항목에 대응
애니메이션 측정, 애니메이션 프레임 계산 방법, 전반적인 페이지 매끄러움에 관해 알아보세요.
Lighthouse 사용자 플로우
새로운 Lighthouse API를 사용해 사용자 플로우 전반의 성능과 권장사항을 측정해 보세요.
Chrome Dev Summit 2021에서 발표된 모든 내용
2021 Chrome Dev Summit의 모든 주요 발표와 함께 더 자세히 알아볼 수 있는 링크가 포함되어 있습니다.
PageSpeed Insights의 새로운 기능
페이지 및 사이트 품질을 더욱 효과적으로 측정하고 최적화하는 데 도움이 되는 PageSpeed Insights의 최신 정보를 알아보세요.
Photoshop의 웹 여정
지난 3년 동안 Chrome은 브라우저의 한계를 뛰어넘고자 하는 웹 애플리케이션을 지원하기 위해 노력해 왔습니다. 이러한 웹 애플리케이션 중 하나가 Photoshop입니다. 몇 년 전까지만 해도 브라우저에서 Photoshop처럼 복잡한 소프트웨어를 실행한다는 아이디어는 상상하기 어려웠을 것입니다. 하지만 여러 새로운 웹 기술을 사용한 Adobe는 이제 Photoshop의 공개 베타 버전을 웹에 도입했습니다.
다중 선택 구성요소 빌드
사용자 환경을 정렬하고 필터링하기 위해 반응형, 적응형, 액세스 가능한 다중 선택 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
Navigation Timing 및 Resource Timing을 통해 필드의 로드 성능을 평가하는 방법
Navigation 및 Resource Timing API를 사용하여 현장의 로드 성능을 평가하는 방법에 관한 기본사항을 알아봅니다.
Sanitizer API를 사용한 안전한 DOM 조작
새로운 Sanitizer API는 임의의 문자열을 페이지에 안전하게 삽입할 수 있는 강력한 프로세서를 빌드하는 것을 목표로 합니다. 이 도움말에서는 API를 소개하고 사용법을 설명합니다.
서드 파티 삽입 사용 시 권장사항
이 문서에서는 서드 파티 임베딩을 로드할 때 사용할 수 있는 성능 권장사항, 효율적인 로드 기술, 많이 사용되는 임베딩의 레이아웃 변경을 줄이는 데 도움이 되는 Layout Shift Terminator 도구에 대해 설명합니다.
SPA 아키텍처가 코어 웹 바이탈에 미치는 영향
현재의 측정 한계를 해결하기 위한 SPA, 코어 웹 바이탈, Google의 계획에 관한 일반적인 질문에 대한 답변을 제공합니다.
JavaScript 이벤트 자세히 알아보기
preventDefault 및 stopPropagation: 언제 어떤 메서드를 사용해야 하는지, 각 메서드가 정확히 무엇을 하는지 JavaScript 이벤트 처리는 대개 간단합니다. 이는 특히 단순한 (상대적으로 평면적인) HTML 구조를 처리할 때 중요합니다. 하지만 이벤트가 요소 계층 구조를 통해 이동 (또는 전파)할 때는 상황이 조금 더 복잡해집니다. 일반적으로 개발자가 stopPropagation() 또는 preventDefault()
자바스크립트가 아닌 리소스 번들링
브라우저와 번들러 모두에서 작동하는 방식으로 자바스크립트에서 다양한 유형의 애셋을 가져오고 번들로 묶는 방법을 알아봅니다.
분할 버튼 구성요소 빌드
액세스 가능한 분할 버튼 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
CSS 모듈 스크립트를 사용하여 스타일시트 가져오기
CSS 모듈 스크립트를 사용하여 자바스크립트 모듈과 동일한 문법을 사용해 CSS 스타일시트를 가져오는 방법을 알아봅니다.
switch 구성요소 빌드
반응성이 뛰어나고 액세스 가능한 스위치 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
CSS 강조 색상
코드 한 줄로 기본 제공 HTML 양식 입력에 브랜드 색상을 적용합니다.
사용자 환경설정 미디어 기능 클라이언트 힌트 헤더
클라이언트 힌트 헤더 세트를 사용하면 사이트에서 요청 시 선택적으로 사용자의 미디어 환경설정을 가져올 수 있으므로 서버는 성능상의 이유로 올바른 CSS를 인라인할 수 있습니다. CSS 미디어 쿼리, 특히 prefers-color-scheme 또는 prefers-reduced-motion 와 같은 사용자 환경설정 미디어 기능 은 페이지에서 전송해야 하는 CSS의 양과 페이지가 로드될 때 사용자에게 제공되는 환경에 큰 영향을 미칠 수 있습니다.
탐색경로 구성요소 빌드
사용자가 사이트를 탐색할 수 있도록 응답성이 높고 접근성이 우수한 탐색경로 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
C, C++, Rust의 WebAssembly 스레드 사용
다른 언어로 작성된 멀티스레드 애플리케이션을 WebAssembly로 가져오는 방법을 알아봅니다.
미디어 프레임워크
미디어 프레임워크는 독점적 및 오픈소스로 제공되며, 그 핵심은 다양한 컨테이너 형식과 전송 프로토콜에 대한 오디오 및/또는 동영상 재생을 지원하는 API 집합입니다.
미디어 스트리밍 기본사항
미디어 스트리밍은 서버에서 멀티미디어 콘텐츠를 지속적으로 전달하는 방법입니다. 여기서 콘텐츠가 개별 데이터 청크로 분할된 후 특정 순서로 재생되는 동안 DASH 및 HLS와 같은 프로토콜을 사용하여 범위 요청을 통해 다시 결합할 수 있습니다.
미디어 암호화
디지털 권한 관리 개념, 그리고 Clear Key 또는 Widevine 암호화를 모두 사용하여 원시 mov 파일에서 MPEG-DASH 또는 HLS용으로 패키징된 암호화된 미디어로 가져오는 데 필요한 명령어를 알아보세요.
오프라인 스트리밍 기능이 있는 PWA
오프라인 스트리밍을 통해 PWA를 빌드하는 데는 어려움이 있습니다. 이 도움말에서는 사용자에게 고품질 오프라인 미디어 환경을 제공하는 API와 기술에 대해 알아봅니다.
웹 바이탈 확장 프로그램 업데이트에서 필드 데이터로 길을 찾으세요
이제 웹 바이탈 확장 프로그램이 현장에서의 실제 사용자 환경과 관련하여 로컬 환경이 어디에 있는지 보여줍니다.
색 구성표 빌드
구성 가능한 동적 색 구성표를 설정하는 방법에 관한 기본적인 개요
@font-face용 CSS 크기 조정
이제 웹 글꼴이 로드될 때 크기를 조정하여 문서 글꼴 크기를 정규화하고 글꼴 간에 전환할 때 레이아웃 변경을 방지할 수 있습니다.
AVIF를 사용하여 사이트의 이미지 압축
데스크톱 크기의 이미지를 휴대기기에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이미지를 '일률적으로' 제공하는 것이 아니라 기기마다 다른 이미지 크기를 제공합니다.
웹 바이탈용 CSS
이 도움말에서는 웹 바이탈을 최적화하기 위한 CSS 관련 기법을 설명합니다.
웹 도구의 누적 레이아웃 변경 변화
오늘부터 Lighthouse, PageSpeed Insights, Chrome UX 보고서 등 여러 Chrome 웹 도구 표시 경로에 CLS 변경사항이 적용되었습니다.
새로운 CSS 함수 의사 클래스 선택기 :is() 및 :where()
겉보기에는 CSS 선택자 문법에 사소한 추가 사항이 있으면 큰 영향을 미칠 것입니다.
새로운 프로그레시브 웹 앱 교육 이용 가능
이제 6부로 구성된 새로운 프로그레시브 웹 앱 교육을 이용할 수 있습니다. 여기에는 안정적이고 설치 가능하고 기능이 우수한 PWA를 빌드하는 방법을 알려주는 새로운 Codelab 시리즈가 포함되어 있습니다.
새로운 반응형: 구성요소 중심 환경에서의 웹 디자인
사용자 환경설정 기반 미디어 기능, 컨테이너 쿼리, 새로운 화면 유형(예: 폴더블 화면)에 대한 미디어 쿼리를 통해 반응형 웹 디자인의 새로운 시대에 사용할 수 있습니다.
User-Agent 클라이언트 힌트로 이전
사용자 에이전트 문자열에 의존하지 않고 새로운 사용자 에이전트 클라이언트 힌트로 사이트를 이전하는 전략입니다.
Excalidraw 및 Fugu: 핵심 사용자 여정 개선
Thomas Steiner의 Google I/O 2021 대담 'Excalidraw and Fugu: Better User Journeys(핵심 사용자 여정 개선)'의 글
보안 헤더 빠른 참조
이 도움말에는 웹사이트를 보호하는 데 사용할 수 있는 가장 중요한 보안 헤더 목록이 나와 있습니다. 이 보고서를 통해 웹 기반 보안 기능을 이해하고, 이러한 기능을 웹사이트에 구현하는 방법을 알아보고, 필요한 경우 참고 자료로 활용하세요.
서비스 워커의 ES 모듈
서비스 워커는 importScripts() 대신 ES 모듈의 정적 가져오기를 사용하여 추가 코드를 가져올 수 있습니다.
미디어 스크롤러 구성요소 빌드
TV, 휴대전화, 데스크톱 등을 위한 반응형 가로 스크롤 뷰를 빌드하는 방법에 관한 기본적인 개요입니다.
Lighthouse를 사용하여 웹 바이탈 최적화
오늘은 사이트가 웹 바이탈에서 개선될 수 있는 방법을 파악하는 데 도움이 되는 Lighthouse, PageSpeed, DevTools의 새로운 도구 기능을 살펴보겠습니다.
WebAssembly에서 비동기 웹 API 사용
기존 동기 언어를 WebAssembly로 컴파일할 때 비동기 웹 API를 호출하는 방법을 알아봅니다.
PWA 제목 표시줄의 창 컨트롤 오버레이 맞춤설정
개발자는 창 컨트롤 오버레이 기능을 사용하여 설치된 PWA의 제목 표시줄을 맞춤설정하여 PWA가 앱처럼 느껴지도록 할 수 있습니다.
타사 스크립트의 제어 유지
타사 스크립트 또는 "태그"가 사이트 성능 문제의 원인이 될 수 있으므로 최적화의 타겟이 될 수 있습니다. 단, 추가한 태그의 최적화를 시작하기 전에 필요하지 않은 태그는 최적화하지 않았는지 확인하세요. 이 도움말에서는 새 태그에 대한 요청을 평가하고 기존 태그를 관리 및 검토하는 방법을 설명합니다.
WebOTP API를 사용하여 교차 출처 iframe 내의 OTP 양식 작성
이제 WebOTP API가 iframe 내에서 OTP를 수신할 수 있습니다.
DataTransfer API를 사용한 장벽 해소
DataTransfer 객체는 드래그 앤 드롭 작업 중에 드래그되는 데이터를 보유합니다. 하나 이상의 데이터 항목, 즉 하나 이상의 데이터 유형을 보유할 수 있습니다. 이 도움말에서는 DataTransfer API로 할 수 있는 작업을 설명합니다.
분할 텍스트 애니메이션 빌드
분할 문자 및 단어 애니메이션을 빌드하는 방법에 관한 기본적인 개요입니다.
CLS 측정항목 발전
오래 지속되는 페이지에 더 공정하도록 CLS 측정항목을 개선할 계획입니다.
웹 개발자 만족도
웹 개발자 만족도는 웹 개발자의 요구사항에 관한 정보를 수집하는 Google 프로젝트입니다. 목표는 더욱 안정적이고 예측 가능하며 상호 운용 가능한 웹 플랫폼으로, 개발자가 여기에 투자하고 신뢰하며 새로운 기능을 채택 및 사용하여 플랫폼과 비즈니스를 성장시킬 수 있도록 하는 것입니다.
설정 구성요소 빌드
슬라이더와 체크박스의 설정 구성요소를 만드는 방법에 관한 기본적인 개요입니다.
레이아웃 변경 디버그
레이아웃 변경을 식별하고 수정하는 방법을 알아보세요.
자바스크립트: 이 기능의 의미는 무엇인가요?
자바스크립트에서 `this` 의 값을 파악하는 것은 까다로울 수 있습니다. 방법은 다음과 같습니다.
프로젝트 구조, 수명 주기, 번들
이 장에서는 프로젝트 구조, 수명 주기, 미니 앱의 번들에 대해 다룹니다.
H5 및 QuickApp이란 무엇인가요?
이 장에서는 미니 앱과는 다른 H5 앱과 QuickApp에 관한 배경 정보를 제공합니다.
미니 앱 구성요소
이 장에서는 모든 미니 앱 플랫폼에서 제공하는 구성요소에 대해 자세히 설명합니다.
미니 앱 오픈소스 프로젝트
이 장에서는 흥미로운 미니 앱 오픈소스 프로젝트 몇 가지를 소개합니다.
미니 앱 프로그래밍 방식
이 장에서는 미니 앱을 프로그래밍하는 방법을 소개합니다.
웹 개발자의 미니 앱에 관한 의견 마무리하기
이번 장에서는 고정관념을 허물고 버블이 아닌 아이디어에서 아이디어를 얻는 것이 웹에서 더 나은 미래를 만들어 나갈 수 있다는 점을 관찰하면서 미니 앱 컬렉션을 마무리합니다.
미니 앱 마크업, 스타일 지정, 스크립팅, 업데이트
이 장에서는 다양한 미니 앱 플랫폼의 마크업, 스타일 지정, 스크립팅 및 업데이트 옵션을 살펴봅니다.
예시 프로젝트에 미니 앱 프로그래밍 원칙 적용
이 장에서는 '미니 앱 프로그래밍 방식' 접근방식을 따르는 예시 프로젝트를 보여줍니다.
Streams - 최종 가이드
Streams API를 사용하면 JavaScript가 네트워크를 통해 수신된 데이터 스트림에 프로그래밍 방식으로 액세스하여 원하는 대로 처리할 수 있습니다.
Tabs 구성요소 빌드
iOS 및 Android 앱에 있는 것과 유사한 탭 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.
교차 출처 분리 사용 설정 가이드
교차 출처 분리를 통해 웹페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 이 도움말에서는 웹사이트에서 교차 출처 분리를 사용 설정하는 방법을 설명합니다.
Origin-Agent-Cluster: 헤더로 성능 격리 요청
Origin-Agent-Cluster 헤더는 동일한 도메인의 다른 출처에 대한 동기식 액세스를 차단하고 원본 전용 리소스를 제공하도록 브라우저에 힌트를 줍니다.
CSS aspect-ratio 속성
이제 새로운 가로세로 비율 CSS 속성을 사용하면 이미지와 요소 내에서 가로세로 비율을 더 쉽게 유지할 수 있습니다.
WebRTC는 이제 W3C 및 IETF 표준입니다.
WebRTC의 역사, 아키텍처, 사용 사례, 미래에 대한 간략한 개요입니다.
캐러셀 권장사항
성능과 사용성을 위해 캐러셀을 최적화하는 방법을 알아보세요.
로컬 개발에 HTTPS 사용
대부분의 경우 http://localhost 는 개발 목적으로 HTTPS처럼 작동합니다. 하지만 맞춤 호스트 이름 또는 브라우저 전반에서 보안 쿠키를 사용하는 등 특수한 경우 가 있습니다. 이 경우 프로덕션에서 사이트가 작동하는 방식을 정확하게 나타내기 위해 개발 사이트가 HTTPS처럼 작동하도록 명시적으로 설정해야 합니다. 프로덕션 웹사이트에서 HTTPS를 사용하지 않는 경우 HTTPS로 전환하는 것을 우선적으로 고려 하세요. 이 페이지에서는
의견 요청: 수명이 긴 페이지의 레이아웃 변경 측정항목을 개선하기 위한 개선
레이아웃 변경 횟수 측정항목을 개선하기 위한 Google의 계획에 대해 알아보고 의견을 보내주세요.
로컬 개발에 HTTPS를 사용해야 하는 경우
일부 특수한 경우를 제외하고 로컬 개발에 http://localhost를 사용하면 대부분 문제가 해결됩니다. 이 게시물에서는 HTTPS를 사용하여 로컬 개발 사이트를 실행해야 하는 경우를 설명합니다. 참고 항목: 로컬 개발에 HTTPS를 사용하는 방법 이 게시물에서 localhost 에 관한 문은 127.0.0.1 및 [::1] 에도 유효합니다. 둘 다 로컬 컴퓨터 주소('루프백 주소'라고도 함)를 설명하기 때문입니다. 또한 편의를 위해 포트
Codelab: Sidenav 구성요소 빌드
반응형 슬라이드 아웃 측면 탐색 레이아웃 구성요소를 빌드하는 방법을 알아봅니다.
sidenav 구성요소 빌드
반응형 슬라이드 아웃 측면 탐색 빌드 방법에 관한 기본 개요
Codelab: CSS의 중앙에 배치
CSS를 사용한 5가지 중심 맞추기 기법을 알아봅니다.
CSS의 가운데 맞춤
5가지 센터링 기법을 따라 일련의 테스트를 진행하면서 변화에 탄력성이 가장 높은 기법을 확인해 보세요.
캐시가 마음에 드네요 ❤️
최초 로드 성능도 중요하지만 그것이 전부는 아닙니다. 사이트를 다시 로드하는 사용자는 캐시를 사용하여 콘텐츠에 액세스하므로 사이트의 속도와 정확성이 모두 제대로 작동하는지 확인하는 것이 중요합니다.
더 빠른 애플리케이션을 위한 최신 JavaScript 게시, 제공, 설치
최신 JavaScript는 트랜스파일된 ES5보다 크기 및 성능이 개선되며 웹브라우저의 95% 에서 지원됩니다. 최신 JavaScript 출력을 사용 설정하면 애플리케이션에 이러한 이점이 제공되지만 이미 ES5로 트랜스파일된 종속 항목의 영향은 제한적입니다. 이 가이드에서는 최신 패키지를 npm에 게시하는 방법과 최신 JavaScript 패키지를 설치하고 최적으로 번들로 묶는 방법을 설명합니다.
교차 브라우저 페인트 워크렛 및 Houdini.how
Houdini.how를 사용하여 교차 브라우저 Houdini Paint API를 구현하고 Houdini 워크릿의 세계를 탐색하는 방법을 알아보세요.
가입 양식 권장사항
사용자가 쉽고 간단하게 가입하고 계정 세부정보를 관리할 수 있도록 지원합니다.
가입 양식 권장사항 Codelab
크로스 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 간단한 가입 양식을 만들 수 있습니다.
AutoWebPerf로 감사 자동화
여러 소스의 실적 데이터를 자동으로 수집할 수 있는 새로운 모듈식 도구입니다.
결제 및 주소 양식 권장사항
사용자가 최대한 쉽고 빠르게 주소 및 결제 양식을 작성하도록 지원하여 전환수를 극대화하세요.
결제 양식 권장사항 Codelab
결제 수단 권장사항 알아보기
SMS OTP 양식 권장사항
사용자에게 SMS로 전송된 OTP (일회용 비밀번호)를 제공하도록 요청하는 것이 사용자의 전화번호를 확인하는 일반적인 방법입니다. 이 게시물에서는 우수한 사용자 환경을 제공하는 SMS OTP 양식을 빌드하기 위한 권장사항을 알려드립니다.
주소 양식 권장사항 Codelab
주소 양식 권장사항 알아보기
서비스 워커를 사용하여 페이지에 업데이트 브로드캐스트
서비스 워커가 페이지와 사전에 통신하여 특정 이벤트에 대해 알리는 방법
서비스 워커와의 양방향 통신
페이지와 서비스 워커 간의 양방향 통신 채널을 설정하는 방법입니다.
작업자 개요
웹 워커와 서비스 워커가 웹사이트 성능을 개선할 수 있는 방법과 언제 웹 워커와 서비스 워커를 사용해야 하는지 알아봅니다.
명령형 캐싱 가이드
성능, 캐싱, 오프라인과 관련된 작업을 수행하도록 창과 서비스 워커를 통신하는 방법
마우스 가속을 사용 중지하여 더 나은 FPS 게임 환경을 제공합니다.
이제 웹 앱이 포인터 이벤트를 캡처할 때 마우스 가속을 사용 중지할 수 있습니다.
스토리 구성요소 빌드
웹에서 Instagram 스토리와 유사한 환경을 구축하는 방법에 관한 기본적인 개요입니다.
Codelab: 스토리 구성요소 빌드
웹에서 Instagram 스토리와 유사한 환경을 빌드하는 방법을 알아보세요.
스키마가 있는 Same-Site
'동일 사이트'의 정의가 URL 스키마를 포함하도록 진화하고 있으므로 사이트의 HTTP 버전과 HTTPS 버전 간의 링크는 이제 크로스 사이트 요청으로 간주됩니다. 가능한 경우 문제를 방지하려면 기본적으로 HTTPS로 업그레이드하거나 필요한 SameSite 속성 값에 대한 자세한 내용을 읽어보세요.
CMS용 브라우저 수준 지연 로드
이 게시물에서는 콘텐츠 관리 시스템에서 로드 속성을 채택하는 방법을 안내합니다.
Codelab: 푸시 알림 클라이언트 빌드
사용자의 푸시 알림을 구독하고, 푸시 메시지를 알림으로 표시하고, 사용자의 푸시 알림을 구독 취소하는 클라이언트를 빌드하는 방법을 보여주는 단계별 대화형 튜토리얼입니다.
Codelab: 푸시 알림 서버 빌드
푸시 알림 구독을 관리하고 푸시 서비스에 웹 푸시 프로토콜 요청을 보내는 서버를 구축하는 방법을 보여주는 단계별 대화형 튜토리얼입니다.
푸시 알림 개요
푸시 알림의 정의, 푸시 알림을 사용해야 하는 이유, 작동 방식에 관한 개요
오프라인 사용 측정
사이트의 오프라인 사용 환경이 개선되어야 하는 이유를 알아볼 수 있도록 사이트의 오프라인 사용을 추적하는 방법
고성능 CSS 애니메이션의 예
고성능 기법을 통해 복잡하고 멋진 애니메이션을 만드는 방법을 보여줍니다.
CSS min(), max(), clamp()
Min, max, clamp는 더 적은 코드 선취권으로 더 빠르게 반응형 스타일을 지정할 수 있는 강력한 CSS 기능을 제공합니다. 이 게시물에서는 잘 지원되는 CSS 수학 함수를 사용하여 요소 크기를 제어하고 적절한 간격을 유지하며 유동적인 서체를 구현하는 방법을 살펴봅니다.
서명된 교환 (SXG)
SXG는 전송된 방식과 관계없이 리소스의 출처를 인증할 수 있는 전송 메커니즘입니다.
흐름 기준 약식을 사용한 논리 레이아웃 개선
Chromium의 새로운 논리 속성 약식 및 새로운 인셋 속성이 추가되었습니다.
일부 애니메이션이 느린 이유는 무엇인가요?
뛰어난 웹 경험을 위해서는 애니메이션을 효과적으로 만드는 것이 중요합니다. 이 게시물에서는 특정 유형의 애니메이션이 다른 애니메이션보다 실적이 좋은 이유를 설명합니다.
고성능 CSS 애니메이션을 만드는 방법
CSS 애니메이션의 성능을 개선하려면 변형 및 불투명도 CSS 속성을 최대한 많이 사용하고, 레이아웃이나 페인팅을 트리거하는 요소는 피해야 합니다.
서비스 워커에서 범위 요청 처리
부분 응답이 요청되었을 때 해야 할 일을 서비스 워커가 알고 있는지 확인하세요.
카메라 이동, 기울이기, 확대/축소를 제어합니다.
이제 카메라의 화면 이동, 기울이기 및 확대/축소 기능을 웹에서 제어할 수 있게 되었습니다.
서드 파티 오리진 트라이얼이란 무엇인가요?
오리진 트라이얼은 새로운 또는 실험적인 웹 플랫폼 기능을 테스트하는 방법입니다. 서드 파티 오리진 트라이얼을 통해 삽입된 콘텐츠 제공업체는 여러 사이트에서 새로운 기능을 사용해 볼 수 있습니다. 오리진 트라이얼 은 새로운 또는 실험용 웹 플랫폼 기능을 테스트하는 방법입니다. 오리진 트라이얼은 일반적으로 퍼스트 파티 기반으로만 사용할 수 있으며, 등록된 단일 출처 에만 작동합니다. 개발자가 콘텐츠가 삽입된 다른 출처에서 실험용 기능을 테스트하려는
분리된 창 메모리 누수
분리된 창은 메모리 누수의 일반적인 유형으로, 특히 찾아서 해결하기가 어렵습니다.
오프라인 대체 페이지 만들기
앱을 위한 간단한 오프라인 환경을 만드는 방법을 알아봅니다.
CSS의 마스크 이미지 속성으로 이미지에 효과 적용
CSS 마스킹은 이미지를 마스크 레이어로 사용할 수 있는 옵션을 제공합니다. 즉, 이미지, SVG 또는 그래디언트를 마스크로 사용하여 이미지 편집기 없이도 흥미로운 효과를 만들 수 있습니다.
CSS의 클립 경로 속성으로 흥미로운 이미지 도형 만들기
CSS에서 클리핑을 사용하면 상자처럼 보이는 디자인에서 모든 요소를 벗어날 수 있습니다. 다양한 기본 도형 또는 SVG를 사용하여 클립 경로를 만들 수 있습니다. 그런 다음 엘리먼트에서 표시하고 싶지 않은 부분을 잘라냅니다.
CSS ::marker를 사용한 맞춤 글머리기호
CSS를 사용하여 `` 또는 `` 요소에서 숫자나 글머리기호의 색상, 크기, 유형을 맞춤설정합니다.
비밀번호 변경을 위한 잘 알려진 URL을 추가하여 사용자가 비밀번호를 쉽게 변경할 수 있도록 지원합니다.
/.well-known/change-password에 대한 요청을 비밀번호 변경 URL로 리디렉션하여 사용자가 이전보다 쉽게 비밀번호를 업데이트하도록 할 수 있습니다.
서비스 워커를 사용한 결제 트랜잭션 조정
웹 기반 결제 앱이 등록되면 판매자의 결제 요청을 수락할 수 있습니다. 이 도움말에서는 런타임 중에 서비스 워커의 결제 트랜잭션을 조정하는 방법을 설명합니다.
서비스 워커로 선택적 결제 정보 처리
웹 기반 결제 앱이 등록되면 판매자의 결제 요청을 수락할 수 있습니다. 이 도움말에서는 런타임 중에 서비스 워커의 결제 트랜잭션을 조정하는 방법을 설명합니다.
ARIA: 독극물 또는 해독제?
스크린 리더에 거짓말을 하면 접근성을 개선하는 데 도움이 됩니다.
Emscripten을 사용하여 WebAssembly의 메모리 누수 디버깅
WebAssembly를 사용하여 다른 언어로 작성된 라이브러리를 안전하고 관용적인 방식으로 웹에 가져오는 방법을 알아봅니다.
콘텐츠 가시성: 렌더링 성능을 향상시키는 새로운 CSS 속성
CSS content-visibility 속성을 사용하면 화면 밖에 있는 콘텐츠의 렌더링을 건너뛰어 웹 콘텐츠 렌더링 성능을 개선할 수 있습니다. 이 도움말에서는 auto 키워드를 사용하여 초기 로드 시간을 단축하는 데 이 새로운 CSS 속성을 사용하는 방법을 설명합니다. 또한 브라우저에서 콘텐츠가 렌더링되는 방식을 더 효과적으로 제어할 수 있게 해 주는 CSS Containment Spec 및 기타 콘텐츠 가시성 관련 값에 대해서도 알아봅니다.
클립보드 액세스 차단 해제
Async Clipboard API는 권한 친화적인 복사하여 붙여넣기를 간소화합니다.
리퍼러 및 리퍼러 정책 권장사항
`strict-origin-when-cross-origin`으로 리퍼러 정책을 설정하는 것이 좋습니다. 이렇게 하면 리퍼러의 유용성을 상당 부분 유지하면서 교차 출처의 데이터 유출 위험을 줄일 수 있습니다.
Android의 웹
다양한 구성요소를 사용하여 Android 앱 내에서 웹 콘텐츠를 렌더링하는 방법을 알아봅니다.
Google에서 PWA 구축, 1부
게시판팀이 PWA를 개발하는 동안 서비스 워커에 관해 배운 내용
Lighthouse CI로 성능 모니터링
Lighthouse CI를 설정하고 개발자 워크플로에 통합하는 방법을 알아보세요.
Google 계정에서 패스키의 사용자 환경 설계
Google 계정에 더 나은 보안과 더 나은 사용자 환경을 제공합니다.
@property: CSS 변수에 초능력 부여
시맨틱 입력, 대체 값 등을 사용하여 CSS 파일에서 직접 CSS 맞춤 속성을 구현하는 방법을 알아보세요.
Android 결제 앱의 배송 및 연락처 정보 제공
판매자가 Payment Request API를 통해 요청한 경우 사용자가 선택한 배송지 주소와 연락처 정보를 제공하도록 Android 결제 앱을 수정하는 방법을 알아봅니다.
서비스 워커 캐싱 및 HTTP 캐싱
서비스 워커 캐시 및 HTTP 캐시 레이어에서 일관되거나 다른 만료 로직을 사용할 때의 장단점
웹 기반 결제 앱 개요
웹 기반 결제 앱이 웹 결제와 호환되도록 조정하고 고객에게 더 나은 사용자 환경을 제공하는 방법을 알아보세요.
웹 기반 결제 앱 등록
고객의 브라우저에 웹 기반 결제 앱을 등록하는 방법을 알아보세요. 이를 디버그하는 방법도 알아봅니다.
사이트 속도와 비즈니스 측정항목 관련 정보
A/B 테스트를 활용하여 사이트 속도가 비즈니스 측정항목에 미치는 영향을 평가하세요.
Chrome UX 보고서를 통해 현장 성능 살펴보기
Chrome UX 보고서 (이전 명칭: CrUX)는 수백만 개의 웹사이트에서 제공되는 실제 사용자 환경 데이터의 공개 데이터 세트입니다. 실험실 데이터와 달리 CrUX 데이터는 실제로 현장의 사전 수신 동의 사용자로부터 발생합니다.
탐색 요청 처리
탐색 요청은 탐색 메뉴에 새 URL을 입력하거나 페이지의 링크를 클릭할 때마다 생성되는 HTML에 대한 요청입니다. 바로 이 지점에서 서비스 워커가 성능에 가장 큰 영향을 미칩니다. 서비스 워커를 사용하여 네트워크를 기다리지 않고 응답함으로써 탐색이 안정적으로 빠르고 탄력성을 갖추도록 할 수 있습니다.
한 줄의 CSS로 이루어진 10개의 최신 레이아웃
이 게시물에서는 몇 가지 강력한 CSS 라인을 집중적으로 다루며 강력한 최신 레이아웃을 빌드하는 데 도움을 줍니다.
devicePixelContentBox로 완벽한 픽셀 렌더링
Chrome 84부터 ResizeObserver는 요소의 크기를 실제 픽셀로 측정하는 device-pixel-content-box라는 새로운 상자 측정을 지원합니다. 이는 특히 고밀도 화면의 환경에서 픽셀의 완벽한 그래픽을 렌더링하는 데 중요합니다.
web.dev 실시간 스트리밍 요약
3일간 진행되는 온라인 커뮤니티 이벤트 중에 발표된 주요 뉴스 및 업데이트의 요약과 예정된 지역 이벤트 알림입니다.
로그인 양식 권장사항
크로스 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 및 사용이 간편한 로그인 양식을 만들 수 있습니다.
크로스 플랫폼 브라우저 기능을 사용하여 로그인 양식 작성
크로스 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 및 사용이 간편한 간단한 로그인 양식을 구축하세요.
프로그레시브 웹 앱을 점진적으로 개선하기
프로그레시브 웹 앱을 점진적으로 개선하여 모든 최신 브라우저에서 유용한 상태로 유지하면서 파일 시스템 액세스, 시스템 클립보드 액세스, 연락처 검색, 주기적 백그라운드 동기화, 화면 wake lock, 웹 공유 기능 등과 같은 새로운 웹 기능을 지원하는 브라우저에서 고급 환경을 제공하는 방법을 알아보세요.
Google 검색의 자바스크립트 문제를 디버깅하기 위한 웹 개발자 도구
개별 페이지 또는 전체 사이트의 검색엔진 최적화 문제를 디버깅하는 방법
Workbox로 복원력이 우수한 검색 환경 빌드
백그라운드 동기화 및 Push API를 사용하여 Workbox에서 복원력이 우수한 검색 환경을 구현하는 방법입니다.
웹페이지에 미디어 추가
및 태그를 사용하여 미디어 파일을 웹페이지에 삽입할 수 있습니다.
이전에 아무도 링크한 적이 없는 대담한 링크: 텍스트 프래그먼트
텍스트 프래그먼트를 사용하면 URL 프래그먼트에 텍스트 스니펫을 지정할 수 있습니다. 이러한 텍스트 프래그먼트가 포함된 URL로 이동할 때 브라우저는 이를 강조하거나 사용자의 주의를 끌 수 있습니다.
좋은 브라우저 버그를 신고하는 방법
브라우저 공급업체의 브라우저나 특정 기기 또는 플랫폼에서 발견한 문제를 브라우저 공급업체에 알리는 것은 웹 플랫폼을 개선하는 데 필수적인 부분입니다.
PWA를 앱처럼 구현
웹 기술로 플랫폼별 앱 패턴을 구현하는 방법을 이해하여 프로그레시브 웹 앱을 '진짜' 앱처럼 만드는 방법을 알아보세요.
RAIL 모델을 사용한 성능 측정
RAIL 모델을 사용하면 디자이너와 개발자가 사용자 환경에 가장 큰 영향을 미치는 성능 최적화 작업을 안정적으로 타겟팅할 수 있습니다. RAIL 모델이 수립하는 목표와 가이드라인, 이를 달성하는 데 사용할 수 있는 도구를 알아봅니다.
Quicklink로 React에서 탐색 속도 높이기
Quicklink는 유휴 시간 동안 표시 영역 내 링크를 미리 가져와 후속 페이지 로드 속도를 높이는 라이브러리입니다.
메타데이터 가져오기로 웹 공격으로부터 리소스 보호
메타데이터 가져오기는 서버가 교차 출처 공격으로부터 스스로를 보호할 수 있도록 설계된 새로운 웹 플랫폼 기능입니다.
콘텐츠 재정렬
CSS를 사용하여 레이아웃을 만들 때는 키보드로 탐색하는 사용자에게 연결 해제된 환경을 만들지 않도록 주의해야 합니다.
Chromium 84의 Web Animations API 개선사항
웹 애니메이션 랭글링이 훨씬 더 쉬워집니다.
결제 거래의 처리 과정
판매자가 결제 앱을 통합하는 방법, 결제 거래가 Payment Request API와 연동되는 방식, 웹 결제에서 가능한 작업을 알아보세요.
Android 결제 앱 개발자 가이드
Android 결제 앱이 웹 결제와 호환되도록 조정하고 고객에게 더 나은 사용자 환경을 제공하는 방법을 알아보세요.
웹 결제를 통한 결제 앱 지원
웹 결제는 웹에서 원활한 결제 환경을 제공하는 것을 목표로 합니다. 작동 원리와 이점을 알아보고 결제 앱을 웹 결제와 통합할 준비를 하세요.
Chromium 83의 macOS system-ui 글꼴에 관한 더 많은 가변 글꼴 옵션
Chromium 80은 macOS에서 시스템 UI 글꼴 두께 회귀를 일으켰습니다. 고장 난 이유와 해결 후의 새로운 초능력은 Chromium 83에서 기다릴 만한 가치가 있습니다.
앱 바로가기로 빠르게 작업하기
앱 바로가기를 사용하면 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
프로그레시브 웹 앱이 비즈니스 성공을 이끄는 방법
PWA에 대한 견고한 비즈니스 사례를 구축합니다. 언제 투자해야 하고 투자의 성공을 측정하는 방법을 알아보세요.
AppCache 삭제 준비
AppCache가 삭제될 예정인 Chrome 및 기타 브라우저에 관한 세부정보입니다.
영구 스토리지
영구 스토리지를 사용하면 중요한 데이터가 제거되지 않도록 보호하고 데이터 손실 가능성을 줄일 수 있습니다.
설치 전략을 정의하는 방법
다양한 설치 서비스를 결합하여 설치율을 높이고 플랫폼 경쟁과 자기 잠식을 방지하기 위한 권장사항입니다.
CommonJS가 번들을 더 크게 만드는 방법
CommonJS 모듈은 매우 동적이므로 JavaScript 옵티마이저와 번들이 이를 대신하여 고급 최적화를 수행합니다.
Chrome에서 웹 오디오 앱 프로파일링
`about://tracing` 및 Chrome DevTools의 **WebAudio** 확장 프로그램을 사용하여 Chrome에서 웹 오디오 앱의 성능을 프로파일링하는 방법을 알아보세요.
강력한 기능을 위해 '교차 출처 분리'가 필요한 이유
일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 줄이기 위해 브라우저는 교차 출처 분리라는 선택 기반의 격리된 환경을 제공합니다. `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()`, 더 높은 정밀도의 고해상도 타이머와 같은 강력한 기능을 사용하기 위해 교차 출처 격리가 필요한 이유를 알아보세요.
세분화된 청크 분할로 Next.js 및 Gatsby 페이지 로드 성능 개선
Next.js와 Gatsby가 빌드 출력을 개선하여 중복 코드를 최소화하고 페이지 로드 성능을 개선한 방법을 알아보세요.
'동일 사이트' 및 '동일 출처'
"same-site""same-origin"이 자주 인용되지만 잘못 이해되는 용어입니다. 이 페이지에서는 두 개념의 정의와 차이점을 설명합니다.
COOP 및 COEP를 사용하여 웹사이트를 '교차 출처 분리'했습니다.
일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 줄이기 위해 브라우저는 교차 출처 분리라는 선택 기반의 격리된 환경을 제공합니다. COOP 및 COEP를 사용하여 이러한 환경을 설정하고 `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` 또는 고해상도 타이머와 같은 강력한 기능을 더 높은 정밀도로 사용 설정합니다.
measureUserAgentSpecificMemory()로 웹페이지의 총 메모리 사용량을 모니터링합니다.
프로덕션 환경에서 웹페이지의 메모리 사용량을 측정하여 회귀를 감지하는 방법을 알아보세요.
web.dev 엔지니어링 블로그 #1: 사이트 구축 및 웹 구성요소 사용 방법
web.dev 엔지니어링 팀이 작성한 이 첫 번째 게시물에서는 Eleventy 및 Web Components 사용 방법을 비롯하여 Google에서 사이트를 구축하는 방법에 관해 알아보세요.
color-scheme CSS 속성 및 해당 메타 태그로 어두운 모드 기본 스타일 지정이 개선되었습니다.
색상 구성 CSS 속성과 해당 메타 태그를 사용하면 개발자는 페이지에서 양식 컨트롤, 스크롤바, CSS 시스템 색상 등 사용자 에이전트 스타일시트의 테마별 기본값을 선택할 수 있습니다. 동시에 이 기능은 브라우저가 자체적으로 변환을 적용하는 것을 방지합니다.
코로나19 사태 동안 모든 사용자가 웹사이트를 사용할 수 있도록 지원하세요
웹사이트의 핵심 기능이 항상 사용 가능하고, 액세스할 수 있고, 안전하고, 유용하고, 검색 가능하며, 빠르게 표시되도록 하는 방법
색상 및 대비 접근성
색상 및 대비 사용을 개선하여 페이지 접근성을 높이는 방법을 알아보세요.
액세스 가능한 탭 타겟
모바일 또는 터치스크린 기기에서 상호작용 요소를 사용할 때 주변에 충분한 공간이 있어야 합니다. 이는 모든 사람, 특히 운동 능력 장애가 있는 사람에게 도움이 됩니다.
접근성이 뛰어난 반응형 디자인
최고의 다중 기기 환경을 제공하려면 반응형 디자인이 좋은 생각이지만, 반응형 디자인은 접근성 면에서도 유리합니다.
오버로드된 서버 문제 해결
서버의 병목 현상을 확인하고 신속하게 해결하여 서버 성능을 향상시키고 회귀를 방지하는 방법을 알아봅니다.
신뢰할 수 있는 유형으로 DOM 기반 교차 사이트 스크립팅 취약점 방지
신뢰할 수 있는 유형 소개: 최신 웹 애플리케이션에서 DOM 기반 교차 사이트 스크립팅을 방지하는 브라우저 API입니다.
Android 앱에서 PWA 사용
Android 앱에서 프로그레시브 웹 앱을 여는 방법
선택적 글꼴을 미리 로드하여 레이아웃 변경 및 보이지 않는 텍스트 (FOIT)의 플래시 방지
Chrome 83은 렌더링 주기를 최적화하여 선택적 글꼴을 미리 로드할 때 레이아웃 변경을 없앱니다. font-display와 결합: 선택사항은 맞춤 글꼴의 버벅거림 없는 렌더링을 보장하는 가장 효과적인 방법입니다.
nginx를 사용하여 서명된 HTTP 교환 (SXG)을 배포하는 방법
nginx를 사용하여 SXG 파일을 가져오고 제공하는 방법과 하위 리소스 미리 가져오기의 문제를 알아봅니다.
nginx를 사용하여 서명된 HTTP 교환 (SXG)을 설정하는 방법
SXG 확장 프로그램으로 TLS 인증서를 생성하고, SXG 파일을 생성하는 도구를 설치하고, SXG 파일을 제공하도록 nginx를 구성하는 방법을 알아봅니다.
미디어 쿼리로 CSS 배경 이미지 최적화
미디어 쿼리를 사용하여 필요한 크기의 이미지(일반적으로 반응형 이미지라고 함)를 전송합니다.
여러 부서에서 웹사이트 속도 수정
다른 부서에서 웹사이트 속도 최적화 프로젝트의 성과를 높이는 방법
레이아웃 변경 후 스크롤 맞추기
Chrome 81부터 페이지 레이아웃이 변경될 때 스크롤러가 고정된 상태로 유지됩니다. 즉, 강제로 재지정하기 위해 더 이상 이벤트 리스너를 추가할 필요가 없습니다.
웹 패키지 도구를 사용하여 서명된 교환을 설정하는 방법
웹 패키지 도구를 사용하여 서명된 교환 (SXG)을 제공하는 방법을 알아보세요.
나만의 인앱 설치 환경을 제공하는 방법
beforeinstallprompt 이벤트를 사용하면 사용자에게 원활한 맞춤 인앱 설치 환경을 제공할 수 있습니다.
실제 뷰에서 가상 객체 배치
WebXR Hit Test API는 웹 증강 현실을 개선하여 가상 객체를 실제 뷰에 배치할 수 있도록 합니다.
웹에 도입된 가상 현실 2부
Chrome 79에서 가상 현실이 웹에 도입되었습니다. 이번 출시는 WebXR Device API를 기반으로 하는 증강 현실과 가상 현실의 기반이 됩니다. 이 도움말은 시청자에게 이미지가 표시되는 XR 세션의 일부인 프레임 루프에 초점을 맞춘 시리즈의 두 번째 도움말입니다. Firefox Reality, Oculus 브라우저, Edge, Magic Leap Helio 브라우저 등 다른 브라우저에서도 곧 WebXR Device API를 지원할 예정입니다.
증강 현실: 이미 알고 계신가요?
이미 WebXR Device API를 사용해 본 적이 있다면 새로 배울 내용이 거의 없다는 사실에 반가울 것입니다. WebXR 세션에 진입하는 것은 대체로 동일합니다. 프레임 루프를 실행하는 것은 대체로 동일합니다. 차이점은 증강 현실에 맞게 콘텐츠를 적절하게 표시할 수 있는 구성에 있습니다.
웹 프레임워크 생태계 발전
Chrome이 자바스크립트 생태계를 발전시키기 위해 여러 오픈소스 도구에 어떻게 투자하고 있는지 알아보세요.
프로그레시브 웹 앱이란?
프로그레시브 웹 앱 (PWA)에 대한 소개 및 다른 웹 앱과 구분되는 세 가지 핵심 요소
마스크 가능한 아이콘이 있는 PWA에서 적응형 아이콘 지원
마스크 가능한 아이콘은 프로그레시브 웹 앱에서 적응형 아이콘을 더 세밀하게 제어할 수 있는 형식입니다. 마스크 가능한 아이콘은 모든 Android 기기에서 멋지게 표시됩니다.
Workbox를 사용하여 내장된 공유 UI에 PWA 통합
프로그레시브 웹 앱이 플랫폼별 앱과 함께 시스템 수준 공유 UI에 표시되도록 Workbox에서 경로를 등록하는 방법
동기 XMLHttpRequest()에서 페이지 닫기 개선
일반적으로 사용자가 페이지를 닫을 때 페이지 또는 앱에서 제출하지 않은 분석 데이터 또는 기타 데이터가 있습니다. 사이트에서는 XMLHttpRequest()에 대한 동기 호출을 사용하여 데이터가 서버에 전달될 때까지 페이지나 앱을 열린 상태로 유지합니다. 사용자 경험을 해치고 더 나은 데이터 절약 방법을 간과합니다. Chrome 80에서는 이 문제를 해결하기 위해 최근 사양 변경을 구현합니다.
모듈 작업자로 웹 스레딩
모듈 작업자를 사용하면 표준 자바스크립트 모듈의 인체 공학적 기능과 성능 이점을 유지하면서 비용이 많이 드는 코드를 백그라운드 스레드로 이동하여 기본 스레드의 차단을 쉽게 해제할 수 있습니다.
속도 도구의 진화: Chrome Developer Summit 2019의 주요 소식
새로운 성능 측정항목, PageSpeed Insights 및 Chrome 사용자 환경 보고서 (CrUX) 업데이트, 웹 생태계에 관한 웹 연감 분석에서 얻은 통계 등 속도 도구와 관련된 최신 소식을 읽어보세요.
적응형 로드: 느린 기기에서 웹 성능 개선
적응형 로드 패턴, 구현 방법, Facebook, Tinder, eBay를 비롯한 여러 기업이 프로덕션에서 적응형 로드를 사용하는 방법을 알아보세요.
웹 작업자를 사용하여 브라우저의 기본 스레드에서 자바스크립트 실행
브라우저의 기본 스레드가 극도로 과부하되었습니다. 웹 작업자를 사용하여 코드를 기본 스레드 외부로 이동함으로써 앱의 안정성과 사용자 환경을 크게 개선할 수 있습니다.
2019년 여름 이미지 최적화 설문조사 의견
다양한 이미지 최적화 기법에 대한 설문조사 응답자 의견.
푸시 알림 서버 빌드
이 Codelab에서는 푸시 알림 서버를 빌드하는 방법을 알아봅니다.
Next.js에서 경로 미리 가져오기
Next.js에서 경로 미리 로드로 탐색 속도를 높이는 방법과 이를 맞춤설정하는 방법 이 게시물에서는 Next.js의 라우팅 작동 방식, 속도에 최적화되는 방식, 필요에 맞게 맞춤설정하는 방법을 알아봅니다. Next.js 에서는 라우팅을 수동으로 설정할 필요가 없습니다. Next.js는 파일 시스템 기반 라우팅을 사용하므로./pages/ 디렉터리 내에 파일과 폴더를 만들면 됩니다. 다른 페이지로 연결하려면 기존의 <a> 요소를
Web Share API를 사용하여 OS 공유 UI와 통합
Web Share API를 사용하면 웹 앱에서 플랫폼별 앱과 시스템에서 제공하는 동일한 공유 기능을 사용할 수 있습니다. Web Share API를 사용하면 웹 앱이 플랫폼별 앱과 동일한 방식으로 기기에 설치된 다른 앱에 링크, 텍스트 및 파일을 공유할 수 있습니다.
Next.js를 사용한 기본 성능
Next.js는 React 앱에서 많은 최적화를 처리하므로 개발자가 Next.js 는 여러 성능 최적화가 내장된 주관적인 React 프레임워크입니다. 프레임워크의 기본적인 아이디어는 이러한 기능을 기본적으로 포함하여 애플리케이션이 시작되고 최대한 성능이 유지되도록 하는 것입니다. 이 소개에서는 프레임워크에서 제공하는 여러 기능을 대략적으로 다룹니다. 이 컬렉션의 다른 가이드에서는 이 기능을 자세히 살펴봅니다. Next.js는 기본적으로 여러
AMP가 Next.js 앱에서 빠른 속도를 보장하는 방법
Next.js 앱에서 AMP를 지원할 경우의 이점과 장단점을 알아보세요. AMP 는 빠른 페이지 로드를 보장하는 웹 구성요소 프레임워크입니다. Next.js 에서는 AMP를 기본적으로 지원합니다. 이 가이드에서는 먼저 AMP가 빠른 페이지 로드를 보장하는 방법 을 간단히 설명하고 Next.js 앱에서 AMP를 지원하는 여러 방법 을 설명한 후 가장 적합한 접근 방식을 결정 하는 데 도움을 줍니다. 이 가이드는 Next.js를 사용하기로
Next.js에서 동적 가져오기를 사용한 코드 분할
코드 분할 및 스마트 로드 전략으로 Next.js 앱의 속도를 높이는 방법 이 게시물에서는 다양한 유형의 코드 분할 과 동적 가져오기를 사용하여 Next.js 앱의 속도를 높이는 방법을 설명합니다. 기본적으로 Next.js는 JavaScript를 각 경로별로 별도의 청크로 분할합니다. 사용자가 애플리케이션을 로드하면 Next.js는 초기 경로에 필요한 코드만 전송합니다. 사용자가 애플리케이션을 탐색할 때 다른 경로와 연결된 청크를 가져옵니다.
웹으로 만나는 가상 현실
Chrome 79에서 가상 현실이 웹에 도입되었습니다. 이번 출시는 WebXR Devicer API를 기반으로 하는 증강 현실과 가상 현실의 기반이 됩니다. 이 도움말은 기본 개념을 살펴보고 XR 세션에 들어가는 방법을 설명하는 시리즈 중 첫 번째 도움말입니다. Firefox Reality, Oculus 브라우저, Edge, Magic Leap Helio 브라우저 등 다른 브라우저에서도 곧 WebXR Device API를 지원할 예정입니다.
SameSite 쿠키 레시피
이제 사이트에서 크로스 사이트 사용을 위해 쿠키를 명시적으로 표시할 수 있습니다. 이 변경사항이 구현된 후에도 퍼스트 파티 및 서드 파티 쿠키가 계속 작동하도록 쿠키를 마크업하는 방법에 대해 알아보세요.
쿠키 이해
쿠키의 작동 방식과 퍼스트 파티 및 서드 파티 쿠키의 정의에 대해 알아봅니다.
빠른 광고의 중요성
빠른 광고의 가치와 광고 속도에 대해 생각하는 방법을 이해합니다.
푸시 알림을 사용하여 사용자 참여 유도 및 재참여 유도
푸시 알림을 사용하여 타겟팅되고 시기적절한 업데이트로 사용자의 참여를 유도하세요.
알림 API 시작하기
이 Codelab에서는 사용자 권한을 요청하고 알림을 전송하는 방법을 알아봅니다.
서비스 워커를 사용하여 알림 관리
이 Codelab에서는 서비스 워커로 알림을 관리하는 방법을 알아봅니다.
레이아웃 불안정성 수정
WebPageTest를 사용하여 레이아웃 불안정성 문제를 식별하고 해결하는 방법을 둘러봅니다.
피처폰에서도 웹 앱을 빠르게 로드하는 기술
피처폰이 다시 유행하고 있으며, 특히 2G가 표준인 신흥 시장에서 특히 인기를 얻고 있습니다. 모바일 지뢰찾기 복제품인 PROXX를 피처폰에서 2G로 빠르게 로드하도록 만들 수 있었던 비결은 다음과 같습니다.
Houdini의 새 API를 사용한 더 스마트한 맞춤 속성
CSS 변수는 유용하지만, 값을 취하고 재정의할 수 있으며 전환을 사용할 수 없기 때문에 사용하기가 어렵습니다. CSS Properties and Values API 수준 1은 이러한 문제를 해결합니다.
향후 탐색 속도를 높이기 위해 리소스 미리 가져오기
rel=prefetch 리소스 힌트와 사용 방법을 알아보세요.
미리 가져오는 두 가지 방법: <link> 태그 및 HTTP 헤더
리소스를 미리 가져와 향후 탐색 속도를 높이는 방법을 알아봅니다.
혼합 콘텐츠란 무엇인가요?
초기 HTML이 보안 HTTPS 연결을 통해 로드될 때 혼합 콘텐츠가 발생하지만 다른 리소스는 안전하지 않은 HTTP 연결을 통해 로드됩니다.
혼합 콘텐츠 수정
사용자를 보호하고 모든 콘텐츠가 로드되도록 하려면 웹사이트에서 혼합 콘텐츠 오류를 수정하는 방법을 알아보세요.
기본적인 웹용 동영상으로 단순한 이미지 활용
연구에 따르면 웹 동영상은 참여도와 판매량을 높입니다. 아직 사이트에 동영상을 추가하지 않은 경우에도 추가할 수 있습니다.
프로그레시브 웹 앱에 Apple 터치 아이콘 추가
iOS 홈 화면에 표시할 아이콘을 지정하는 방법에 관한 대화형 데모입니다.
Ready Player 웹
웹 플랫폼은 오늘날 게임 개발에 적합하도록 매우 성숙한 상태입니다. 최신 웹 게임을 빌드하는 핵심은 게임 디자인 및 수익 창출의 권장사항을 수용하는 것입니다. 이 게시물에서는 이러한 목표를 위한 지침을 제공합니다.
다중 출처 사이트의 프로그레시브 웹 앱
멀티 출처 아키텍처는 PWA를 빌드할 때 여러 가지 문제를 초래합니다. 여러 출처의 바람직한 사용과 잘못된 사용과 다중 출처 사이트에서 PWA를 빌드하기 위한 몇 가지 해결 방법을 살펴봅니다.
웹 글꼴 크기 줄이기
이 게시물에서는 좋은 서체가 사이트 속도가 느리지 않도록 사이트에서 사용하는 WebFonts의 크기를 줄이는 방법을 설명합니다.
WebFont 로드 및 렌더링 최적화
이 게시물에서는 페이지 로드 시 WebFonts를 사용할 수 없을 때 레이아웃 변경과 빈 페이지를 방지하기 위해 WebFonts를 로드하는 방법을 설명합니다.
Angular CLI로 프로그레시브 웹 앱 만들기
설치 가능한 프로그레시브 Angular 애플리케이션을 만드는 방법을 알아봅니다.
속도가 느린 서드 파티 자바스크립트 식별
Lighthouse와 Chrome DevTools를 사용하여 속도가 느린 서드 파티 리소스를 식별하는 방법을 알아보세요.
이미지 CDN을 사용하여 이미지 최적화
이미지 CDN을 사용하여 사이트의 이미지를 최적화하고 사용자의 데이터 비용을 줄여보세요.
서드 파티 자바스크립트를 효율적으로 로드
서드 파티 스크립트 사용의 일반적인 위험을 피하여 로드 시간과 사용자 환경을 개선하는 방법을 알아보세요.
서드 파티 자바스크립트 성능
이 게시물에서는 일반적인 서드 파티 자바스크립트와 이러한 자바스크립트로 인해 발생할 수 있는 성능 문제를 설명합니다. 또한 서드 파티 스크립트를 최적화하는 방법에 관한 일반적인 가이드도 제공합니다.
서드 파티 자바스크립트 최적화
Lighthouse의 도움을 받아 느린 서드 파티 리소스를 최적화하는 기법을 알아보세요.
더 강력한 양식 제어 기능
새로운 웹 플랫폼 기능을 사용하면 내장된 양식 컨트롤처럼 작동하는 맞춤 요소를 더 쉽게 만들 수 있습니다.
조기에 네트워크 연결을 설정하여 체감되는 페이지 속도 개선
rel=preconnect 및 rel=dns-prefetch 리소스 힌트와 사용 방법에 대해 알아봅니다.
배경화면 필터로 OS 스타일 배경 만들기
CSS 배경화면 필터 속성을 사용하여 웹의 UI 요소에 블러 및 투명도와 같은 배경 효과를 추가하는 방법을 알아보세요.
비활성 상태 재검증을 통해 최신 상태 유지
비활성 상태 및 재검증은 개발자가 캐시된 콘텐츠를 즉시 로드하는 즉각적인 상태와 캐시된 콘텐츠의 업데이트가 향후에 사용되도록 하는 최신 상태 사이에서 균형을 맞추는 데 도움이 됩니다.
Angular CDK를 사용하여 대규모 목록 가상화
Angular Component Dev Kit로 가상 스크롤을 구현하여 대규모 목록의 응답성을 높이는 방법을 알아보세요.
Angular에서 경로 미리 로드 전략
더 빠른 앱을 위해 Angular의 미리 로드 전략을 사용하는 방법을 알아보세요.
Angular의 변경 감지 최적화
Angular 앱의 변경 감지를 최적화하여 반응성을 높이는 방법을 알아보세요.
네트워크 품질에 따라 이미지 제공에 맞게 동영상 조정
Network Information API를 사용하여 네트워크 품질에 따라 콘텐츠를 조정하는 방법을 알아보세요.
예측 미리 가져오기를 통한 빠른 웹 탐색
코드 분할을 사용하면 애플리케이션 속도를 높일 수 있지만 후속 탐색이 느려질 수 있습니다. 예측 미리 가져오기는 데이터 분석을 사용하여 사용자가 다음에 사용할 가능성이 높은 항목을 스마트하게 미리 가져와 네트워크 사용률을 최적화하는 효율적인 방법입니다.
codelyzer로 Angular 앱의 접근성 검사
codelyzer를 사용하여 Angular 애플리케이션의 접근성을 높이는 방법을 알아봅니다.
Angular CLI를 사용한 성능 예산
Angular CLI에서 직접 성능 예산을 사용하는 방법을 알아보세요.
Angular 서비스 워커로 사전 캐싱
Angular 서비스 워커를 사용하여 앱에서 정적 애셋을 사전 캐시하는 방법을 알아봅니다.
Preferreds-color-scheme: 안녕 어둠, 내 오랜 친구
이제 많은 기기에서 운영체제 전반의 어두운 모드 또는 어두운 테마 환경을 지원합니다. 이 게시물에서는 웹페이지에서 어두운 모드를 지원하는 방법을 설명하고, 권장사항을 나열하고, 웹 개발자가 특정 웹페이지에서 운영체제 수준 환경설정을 재정의할 수 있는 방법을 제공할 수 있는 어두운 모드 전환이라는 맞춤 요소를 소개합니다.
Angular에서 경로 수준 코드 분할
경로 수준 코드 분할을 사용하여 초기 App Bundle을 줄이는 방법을 알아봅니다.
웹 성능을 위한 주요 팁
srcset를 사용하여 자동으로 올바른 이미지 크기를 선택합니다.
시작하기: Angular 애플리케이션 최적화
Angular 애플리케이션의 속도, 안정성, 검색 가능성, 설치 및 접근성을 향상하는 방법을 알아보세요.
웹 구성요소: 웹을 작동시키는 비밀 요소
이 게시물에서는 Polymer Project의 Kevin Schaaf와 Salesforce의 Caridy Patiño가 2019년 웹 구성 요소 현황에 대해 이야기한 내용을 요약합니다.
성능 예산에 Lighthouse 사용
이제 Lighthouse에서 성능 예산을 지원합니다. LightWallet이라는 기능은 5분 내에 설정할 수 있으며 페이지 리소스의 크기와 양에 대한 Feedvack을 제공합니다.
Web Payments API 업데이트
Chrome 53에서 Payment Request API가 출시되고 Chrome 68에서 Payment Handler API가 출시된 후 각 사양이 상당히 변경되었습니다. 이 게시물에는 이러한 업데이트가 요약되어 있으며 API 변경사항이 계속 누적됩니다.
속도의 가치
마케팅 캠페인과 같은 외부 요인을 제외하고 사이트 개선을 통해 발생한 수익을 입증하세요.
데스크톱에서 프로그레시브 웹 앱용 주소 표시줄 설치
프로그레시브 웹 앱은 Chrome 주소 표시줄 (검색주소창)의 새로운 설치 버튼으로 간편하게 설치할 수 있습니다.
실적으로 어떻게 전환을 개선할 수 있나요?
웹사이트 실적이 전자상거래 유입경로의 여러 부분에 미치는 영향 알아보기
PWA 설치 승격 패턴
프로그레시브 웹 앱 설치를 홍보하는 방법 및 권장사항
PWA를 설치할 수 있다고 사용자에게 알리려면 어떻게 해야 하나요?
프로그레시브 웹 앱 설치를 홍보하는 방법 및 권장사항
서비스 워커 사고방식
서비스 워커로 작업하는 것은 많은 웹 개발자에게 익숙하지 않고 익숙하지 않습니다. 이 게시물에서는 이러한 문제에 대해 공감할 수 있는 몇 가지 팁을 제공합니다.
빠른 로드 시간 등을 위한 이미지 정책
이미지는 시각적 공간을 상당 부분 차지하며 웹사이트에서 다운로드되는 바이트의 대부분을 차지합니다. 새로운 기능 정책을 사용하여 크기가 큰 이미지를 식별합니다.
긴 자바스크립트 작업으로 인해 상호작용 시작 시간이 지연되고 있나요?
비용이 많이 들고 작업에 방해가 되는 사용자 상호작용을 진단하는 방법을 알아보세요.
중요한 CSS 추출
중요한 CSS 기술로 렌더링 시간을 개선하는 방법과 프로젝트에 가장 적합한 도구를 선택하는 방법을 알아보세요.
'중요'로 중요한 CSS 추출 및 삽입
'중요'를 사용하여 중요한 CSS를 추출 및 인라인하고 렌더링 시간을 개선하는 방법을 알아보세요.
대규모 속도: 웹 성능의 새로운 기능은 무엇인가요?
Google I/O 2019에서는 모두를 위한 더 나은 사용자 환경을 제공하기를 바라는 세 가지 새로운 웹 성능 이니셔티브를 도입했습니다.
PROXX 소개
PROXX는 PWA로 빌드된 지뢰찾기와 유사한 게임입니다. 다양한 기기에서 작동하며 기기의 성능이 향상될수록 시각적 모양도 점진적으로 개선됩니다.
웹 인식 툴킷을 사용한 시각적 검색
사용자가 카메라로 사이트를 검색할 수 있다면 정말 멋지지 않을까요?
SameSite 쿠키 설명
SameSite 속성을 사용하여 퍼스트 파티 및 서드 파티 사용을 위해 쿠키를 표시하는 방법을 알아봅니다. SameSite의 Lax 및 Strict 값을 사용하여 CSRF 공격에 대한 보호 기능을 개선하면 사이트의 보안을 강화할 수 있습니다. 새 None 속성을 지정하면 쿠키를 크로스 사이트 사용에 대해 명시적으로 표시할 수 있습니다.
네트워크 품질에 따른 적응형 게재
Network Information API를 사용하여 연결 품질에 따라 사용자에게 제공되는 애셋을 조정합니다.
포털 실습: 웹에서 원활한 탐색
새로 제안된 Portals API를 사용하면 프런트엔드를 단순하게 유지하는 동시에 맞춤 전환을 통해 원활한 탐색을 수행할 수 있습니다. 이 도움말에서는 포털을 사용하여 사이트 전반에서 사용자 환경을 개선하는 방법을 실습합니다.
brotli로 네트워크 페이로드 축소 및 압축
이 Codelab에서는 Brotli 압축으로 압축 비율과 앱의 전체 크기를 더 줄이는 방법을 알아봅니다.
I/O 2019의 web.dev
Google I/O 2019에서 web.dev 팀원이 디자인 업데이트, Lighthouse 문서 추가, 새로운 블로그 등 다양한 업데이트를 전달했습니다.
속도를 유지하는 방법
속도를 최적화하는 브랜드는 빠르게 퇴보하는 경우가 많습니다. 이 게시물에서는 빠른 환경을 빠르게 유지하는 방법을 살펴봅니다.
속도 측정 방법
실제 성능은 사용자 기기, 네트워크 연결 및 기타 요인의 차이로 인해 변동폭이 매우 큽니다. 이 게시물에서는 페이지 성능을 평가하기 위해 실험실 또는 현장 데이터를 수집하는 데 도움이 되는 도구를 살펴봅니다.
속도란 무엇인가요?
속도가 중요한데, 속도란 정확히 무엇을 의미할까요? 사이트 속도가 빠르다는 것은 어떤 의미일까요?
React.lazy 및 Suspense를 사용한 코드 분할
React.lazy 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다. Suspense와 함께 사용하여 사용자에게 적절한 로드 상태를 표시합니다.
반응 스냅을 사용하여 경로 사전 렌더링
remember-snap은 사이트의 페이지를 정적 HTML 파일로 사전 렌더링하는 타사 라이브러리입니다. 이렇게 하면 애플리케이션의 첫 페인트 시간을 개선할 수 있습니다.
Workbox로 React 앱 만들기에서 사전 캐싱
Workbox는 모든 빌드 시 애플리케이션의 모든 정적 애셋을 사전 캐시하는 기본 구성을 사용하여 React App 만들기에 내장되어 있습니다.
React 앱 만들기로 웹 앱 매니페스트 추가
React 앱 만들기에는 기본적으로 웹 앱 매니페스트가 포함되어 있습니다. 이 파일을 수정하면 사용자의 기기에 애플리케이션이 설치될 때 표시되는 방식을 변경할 수 있습니다.
react-axe 및 eslint-plugin-jsx-a11y를 사용한 접근성 감사
remember-axe는 React 애플리케이션을 감사하고 Chrome DevTools 콘솔에 접근성 문제를 기록하는 라이브러리입니다. eslint-plugin-jsx-a11y는 JSX에서 직접 여러 접근성 규칙을 식별하고 적용하는 ESLint 플러그인입니다. 이 둘을 함께 사용하면 애플리케이션의 접근성 문제를 찾아 해결하기 위한 포괄적인 감사 접근 방식을 제공할 수 있습니다.
반응 창을 사용하여 대규모 목록 가상화
remember-window는 큰 목록을 효율적으로 렌더링할 수 있는 라이브러리입니다.
시작하기: React 앱 최적화
React는 UI를 더 쉽게 빌드할 수 있게 해주는 오픈소스 라이브러리입니다. 이 학습 과정에서는 애플리케이션의 성능과 사용성을 개선하는 데 사용을 고려해야 하는 생태계 내 다양한 API와 도구를 다룹니다.
Codelab: 중요한 애셋을 미리 로드하여 로드 속도 개선
이 Codelab에서는 리소스를 미리 로드하여 미리 가져와 페이지 성능을 개선하는 방법을 알아봅니다.
Preferreds-reducedmotion: 때로는 적은 움직임이 더 효과적일 수 있습니다.
Preferreds-Reduced 모션 미디어 쿼리는 시스템이 사용하는 애니메이션 또는 모션의 양을 최소화하도록 사용자가 요청했는지 여부를 감지합니다. 이는 최소화된 애니메이션이 필요하거나 선호하는 사용자를 위한 것입니다. 예를 들어 전정관 장애가 있는 사람들은 애니메이션을 최소한으로 유지하는 것을 선호하는 경우가 많습니다.
중요하지 않은 CSS 연기
주요 렌더링 경로를 최적화하고 콘텐츠가 포함된 첫 페인트 (FCP) 개선을 위해 중요하지 않은 CSS를 연기하는 방법을 알아보세요.
신뢰는 좋고 관찰은 더 좋습니다: Intersection Observer v2
Intersection Observer v2에는 그 자체로 교집합을 관찰할 수 있는 기능이 더해졌을 뿐만 아니라, 교차하는 시점에 교차하는 요소가 보이는지 여부를 감지할 수 있는 기능이 추가되었습니다.
반응형 웹 디자인 기본사항
사용자가 보는 기기의 요구사항과 기능에 맞는 사이트를 만드세요.
구성 가능한 스타일시트
구성 가능한 스타일시트를 사용하면 FOUC에 대해 걱정할 필요 없이 스타일을 만들어 문서 또는 섀도우 루트에 배포할 수 있습니다.
웹에서 렌더링
앱에서 로직 및 렌더링을 구현하기 위한 권장사항
Travis CI와 함께 bundlesize 사용
최소한의 설정으로 성능 예산을 정의하고 이를 Travis CI와 함께 bundlesize를 사용하여 개발 워크플로의 일부로 적용합니다.
빌드 프로세스에 성능 예산 통합
실적 예산을 주시하는 가장 좋은 방법은 자동화하는 것입니다. 요구사항과 현재 설정에 가장 적합한 도구를 선택하는 방법을 알아보세요.
webpack으로 성능 예산 설정
성능 예산을 설정하고 번들 크기를 webpack으로 확인하는 방법을 알아보세요.
Lighthouse 봇을 사용하여 성능 예산 설정
속도를 높이기 위해 열심히 노력했습니다. 이제 Lighthouse Bot을 사용하여 Travis CI에서 성능 테스트를 자동화하여 속도를 유지할 수 있습니다.
Emscripten 및 npm
WebAssembly를 이 설정에 어떻게 통합하나요? 이 도움말에서는 C/C++ 및 Emscripten을 예로 들어 이 문제를 해결해 보겠습니다.
앱이 설치되었나요? getInstalledRelatedApps()로 알 수 있습니다.
getInstalledRelatedApps() API는 iOS/Android/데스크톱 앱 또는 PWA가 사용자 기기에 설치되어 있는지 확인할 수있는 웹 플랫폼 API입니다.
페이지 로드 속도를 높이기 위해 최신 브라우저에 최신 코드 제공하기
이 Codelab에서는 트랜스파일되는 코드 양을 최소화하여 애플리케이션의 성능을 개선하는 방법을 알아봅니다.
클라이언트 힌트를 사용하여 사용자에 맞게 조정
클라이언트 힌트는 사용자 기기 및 네트워크 연결의 특성에 따라 페이지 리소스를 제공하는 방식을 변경하는 데 사용할 수 있는 HTTP 요청 헤더의 집합입니다. 이 도움말에서는 고객 힌트에 대한 모든 사항과 작동 방식, 그리고 이를 통해 사용자가 더 빠르게 사이트를 이용할 수 있도록 하는 방법에 대한 몇 가지 아이디어를 알아봅니다.
접근성이란 무엇인가요?
접근성이 우수한 사이트란 모든 사용자의 장애가 있는 경우에도 콘텐츠에 액세스할 수 있으며 가능한 한 다양한 범위의 사용자가 기능을 이용할 수 있는 사이트입니다.
시맨틱 및 스크린 리더
스크린 리더와 같은 보조 기술이 사용자에게 어떤 내용을 공지해야 할지 어떻게 알 수 있는지 궁금했던 적이 있나요? 답은 이러한 기술은 시맨틱 HTML로 페이지를 마크업하는 개발자에게 의존한다는 것입니다. 하지만 의미 체계란 무엇이며 스크린 리더에서는 시맨틱스를 어떻게 사용할까요?
키보드 액세스 기본사항
일시적이고 영구적인 운동 장애가 있는 사용자부터 효율성과 생산성을 높이기 위해 단축키를 사용하는 사용자까지 다양한 사용자가 키보드를 사용하여 애플리케이션을 탐색합니다. 애플리케이션에 적합한 키보드 탐색 전략을 마련하면 모두에게 더 나은 환경을 제공할 수 있습니다.
tabindex로 포커스 제어
표준 HTML 요소에는 키보드 접근성 기능이 내장되어 있습니다. 맞춤 대화형 구성요소를 빌드할 때 키보드에 액세스할 수 있도록 tabindex를 사용하세요.
라벨 및 텍스트 대체
스크린 리더가 사용자에게 음성 UI를 표시하려면 의미 있는 요소에 적절한 라벨 또는 대체 텍스트가 있어야 합니다. 대체 라벨 또는 대체 텍스트는 요소에 액세스 가능한 이름을 부여하며, 접근성 트리에서 요소 의미 체계를 표현하는 주요 속성 중 하나입니다.
키보드 입력을 쉽게 하기 위해 시맨틱 HTML 사용
올바른 의미론적 HTML 요소를 사용하면 키보드 액세스 요구사항의 대부분 또는 전체를 충족할 수 있습니다. 즉, tabindex를 사용하는 시간은 줄어들고 사용자의 만족도도 높아집니다.
제목 및 랜드마크
제목과 랜드마크에 올바른 요소를 사용하면 보조 기술 사용자의 탐색 환경을 크게 개선할 수 있습니다.
스타일 포커스
포커스 표시기 (보통 "포커스 링"으로 표시됨)는 현재 포커스가 맞춰진 요소를 나타냅니다. 마우스를 사용할 수 없는 사용자의 경우 이 표시기는 마우스 포인터를 대신하는 역할을 하므로 매우 중요합니다.
보안은 너무 두려워해서는 안 됩니다.
'보안'이란 단어가 떠오르면 보통 나쁜 소식과 관련되어 있습니다. 하지만 보안은 '사용자 환경' 또는 '접근성'처럼 웹 개발에서 긍정적이고 필요한 부분으로 여겨져야 합니다.
Lighthouse로 성능 기회 탐색하기
Lighthouse는 페이지 성능을 측정하고 개선 방법을 찾는 데 도움이 되는 도구입니다. Lighthouse는 페이지 실적에 관한 보고서를 제공합니다. 이 보고서는 각 측정항목의 점수와 함께 페이지 로드 속도를 높일 수 있는 추천 목록을 제공합니다.
명령줄로 WebP 이미지 만들기
이 Codelab에서는 WebP를 사용하여 최적화된 이미지를 제공하는 방법을 알아봅니다.
코드 분할로 자바스크립트 페이로드 줄이기
이 Codelab에서는 코드 분할을 통해 간단한 애플리케이션의 성능을 개선하는 방법을 알아봅니다.
DevTools 네트워크 패널 살펴보기
이 Codelab에서는 Chrome DevTools를 사용하여 네트워크 트래픽을 해석하는 방법을 알아봅니다.
여러 슬롯 너비 지정
이 Codelab에서는 크기 속성을 사용하여 사용자의 표시 영역에 따라 이미지 크기를 올바르게 조정하는 방법을 알아봅니다.
서비스 워커 및 Cache Storage API
브라우저의 HTTP 캐시는 첫 번째 방어선입니다. 반드시 가장 강력하거나 유연한 접근 방식은 아니며, 캐시된 응답의 전체 기간을 제한적으로 제어할 수 있습니다. 그러나 많은 노력 없이도 합리적인 캐싱 구현을 제공할 수 있는 경험적 규칙이 여러 개 있으므로 항상 이를 따르는 것이 좋습니다.
검색의 원리
검색엔진은 사서의 디지털 버전입니다. 포괄적인 색인을 사용하여 쿼리에 적합한 정보를 찾습니다. 검색의 기본사항을 이해하면 사용자가 콘텐츠를 검색할 수 있도록 준비할 수 있습니다.
반응형 이미지 제공
데스크톱 크기의 이미지를 휴대기기에 제공하면 필요한 것보다 2~4배 더 많은 데이터를 사용할 수 있습니다. 이미지를 '일률적으로' 제공하는 것이 아니라 기기마다 다른 이미지 크기를 제공합니다.
페이지 로드 속도를 높이기 위해 최신 브라우저에 최신 코드 제공하기
모든 주요 브라우저에서 원활하게 작동하는 웹사이트를 구축하는 것은 개방형 웹 생태계의 핵심 원칙입니다. 그러나 이는 작성하는 모든 코드가 타겟팅하려는 각 브라우저에서 지원되는지 확인하는 추가 작업을 의미합니다. 새로운 자바스크립트 언어 기능을 사용하려면 이러한 기능을 이전 버전과 호환되는 형식으로 트랜스파일해야 합니다.
교차 출처 리소스 공유(CORS)
브라우저의 동일 출처 정책은 보안을 위해 다른 출처에서 리소스를 읽는 것을 차단합니다. CORS를 사용 설정하면 서버가 브라우저에 추가 출처를 사용할 수 있음을 알립니다.
코드 분할로 자바스크립트 페이로드 줄이기
대량의 자바스크립트 페이로드를 전송하면 사이트 속도에 상당한 영향을 미칩니다. 애플리케이션의 첫 페이지가 로드되는 즉시 모든 자바스크립트를 사용자에게 전달하는 대신 번들을 여러 개로 분할하여 맨 처음에 필요한 것만 보내세요.
밀도 설명자 사용
이 Codelab에서는 밀도 설명자와 srcset를 사용하여 사용자 기기에 적합한 픽셀 밀도로 이미지를 로드하는 방법을 알아봅니다.
페이지 로드 속도를 높이기 위해 애니메이션 GIF를 동영상으로 대체합니다.
Imgur 또는 Gfycat과 같은 서비스에서 애니메이션 GIF를 본 적이 있나요? 개발 도구에서 GIF를 검사하다가 GIF가 실제로 동영상이라는 사실을 알아본 적이 있으신가요? 여기에는 합당한 이유가 있습니다. 애니메이션 GIF는 정말 커다란 크기입니다. 대용량 GIF를 동영상으로 변환하여 사용자의 대역폭을 크게 절약할 수 있습니다.
동일한 출처 정책 및 가져오기 요청
이 Codelab에서는 리소스를 가져올 때 동일 출처 정책이 어떻게 작동하는지 알아봅니다.
사용하지 않는 코드 삭제하기
JavaScript 번들을 분석하여 사용되지 않는 코드를 감지하고 삭제합니다.
GIF를 동영상으로 바꾸기
이 Codelab에서는 애니메이션 GIF를 동영상으로 바꿔 성능을 개선하는 방법을 알아봅니다.
브라우저 샌드박스
공격을 방어하려면 개발자는 취약점을 완화하고 애플리케이션에 보안 기능을 추가해야 합니다. 다행히 웹에서 브라우저는 "샌드박스"를 비롯한 많은 보안 기능을 제공합니다.
사용하지 않는 코드 삭제하기
이 Codelab에서는 사용되지 않는 종속 항목을 삭제하여 애플리케이션의 성능을 개선하는 방법을 알아봅니다.
올바른 크기로 이미지 제공
이 Codelab에서는 올바른 크기의 이미지를 제공하여 네트워크 성능을 개선하는 방법을 알아봅니다.
WebP 이미지 사용
WebP 이미지는 JPEG 및 PNG 이미지보다 작습니다. 일반적으로 파일 크기가 25~35% 줄어듭니다. 이렇게 하면 페이지 크기가 줄어들고 성능이 개선됩니다.
webpack과 함께 Imagemin 사용
이 Codelab에서는 webpack과 함께 imagemin을 사용하여 JPEG 및 PNG 이미지를 최적화하여 더 빠르게 다운로드하는 방법을 알아봅니다.
HTTP 캐시로 불필요한 네트워크 요청 방지
브라우저의 HTTP 캐시는 불필요한 네트워크 요청에 대한 첫 번째 방어선입니다.