Google은 모든 사용자를 위해 크로스브라우저에서 작동하며 액세스하기 쉽고 빠르며 안전한 웹사이트를 빌드할 수 있도록 지원하고자 합니다. 이 사이트는 Chrome팀과 접근성, 성능, 디자인과 같은 웹 개발 주제를 전문으로 하는 외부 전문가가 작성한, 개발자 여정을 도와주는 콘텐츠를 제공합니다.
AI를 사용하여 성능이 우수한 웹 우선 환경을 이해하고 빌드하는 데 도움이 되도록 제작된 리소스를 살펴보세요.
자세히 알아보기
이제 다음 페인트에 대한 상호작용 (INP)이 Core Web Vitals 측정항목입니다. 사이트의 INP를 측정하고 최적화하세요.
자세히 알아보기
ID 및 결제 처리와 관련된 최신 기능과 권장사항을 알아보세요.
자세히 알아보기

웹 플랫폼 살펴보기

살펴보기
웹 플랫폼은 개발자가 사용하기 쉽고 즐거운 웹사이트를 만들 수 있도록 브라우저 기능과 API로 구성된 끊임없이 진화하는 생태계입니다. 이 페이지는 web.dev에서 웹 플랫폼의 각 부분을 원하는 속도로 살펴볼 수 있는 경로입니다.
HTML은 페이지의 구조와 의미론을 제공하는 웹의 문서 레이어입니다.
자세히 알아보기
CSS는 웹의 프레젠테이션 레이어로, 웹페이지를 원하는 대로 정확하게 표시할 수 있습니다.
자세히 알아보기
JavaScript는 웹페이지에 풍부한 상호작용을 추가하므로 사용자가 작업을 수행하고 목표를 달성하는 데 도움이 되는 웹사이트를 빌드할 수 있습니다.
자세히 알아보기

웹 플랫폼 알아보기

학습 시작
웹 플랫폼을 처음 사용하시나요? 걱정하지 마세요. HTML, CSS, JavaScript 초보자를 위해 특별히 선별된 강의를 통해 각 레이어를 자세히 살펴보세요.
교육과정
초보자에서 전문가 수준의 HTML까지 개발자를 위한 HTML 개요
강의 시작하기
교육과정
접근성부터 Z-색인까지 모든 내용을 다루는 모듈이 포함된 CSS 가이드입니다.
강의 시작하기
교육과정
JavaScript의 기초에 대한 심층 과정입니다.
강의 시작하기
블로그를 읽고 새로운 웹 플랫폼 기능, Baseline 업데이트, AI, Core Web Vitals 등 웹 개발의 최신 소식을 알아보세요.
블로그 게시물 읽기

기준

기준선에 관한 최신 업데이트와 소식을 확인하세요.
기준에 관해 자세히 알아보기
2026년 3월에 Baseline과 관련된 다양한 소식을 확인하세요.
2026년 2월에 Baseline에서 일어난 다양한 일을 알아보세요.
2026년 1월에 Baseline에서 일어난 다양한 소식을 확인하세요.
2025년 12월에 Baseline에서 일어나는 다양한 일에 대해 알아보세요.

CSS 및 UI 디자인

지금 바로 업무에 사용할 수 있는 최신 팁과 기법을 알아보세요.
CSS 살펴보기
사용자가 콘텐츠를 편하게 읽을 수 있도록 사용자의 선호도에 맞게 글꼴을 조정하세요.
이제 모든 주요 엔진이 새로운 CSS 색상 공간과 함수를 지원합니다. 디자인에 활기를 불어넣는 방법을 알아보세요.

소스 맵이란 무엇인가요?

소스 맵으로 웹 디버깅 환경을 개선합니다.
이제 Subgrid가 세 가지 주요 엔진 모두에서 상호 운용이 가능합니다. 사용 방법을 알아보세요.

Core Web Vitals

코어 웹 바이탈 및 기타 측정항목을 이해하여 더 빠른 웹사이트와 앱을 빌드하세요.
코어 웹 바이탈 살펴보기
웹 상태를 기반으로 웹사이트의 핵심 성능 보고서 실적을 최적화하기 위한 권장사항 모음입니다.
Interaction to Next Paint(다음 페인트와의 상호작용) 측정항목을 최적화하는 방법을 알아봅니다.
이미지 최적화를 넘어 첫 바이트까지의 시간, 리소스 로드 지연과 같은 요소를 고려하여 최대 콘텐츠 페인트 최적화에 관한 일반적인 오해를 살펴보세요.
Web Vitals를 빠르고 안정적으로 수집하고 보고하기 위한 안내

프로그레시브 웹 앱

기능이 우수한 웹 환경을 조성합니다.
PWA에 대해 자세히 알아보기
현대적인 프로그레시브 웹 앱 개발의 모든 측면을 분석하는 과정입니다.
이제 변환 스트림이 Safari, Firefox 및 Chrome에서 지원되므로 마침내 황금기에 대비할 수 있습니다.
클립보드 패턴, 파일 패턴, 고급 앱 패턴 등 멋진 앱을 위한 환상적인 새로운 패턴 컬렉션을 살펴보세요.
Chrome 개발자 사이트에서 기능 API를 살펴봅니다.

누구나 이용 가능

영구적, 일시적, 상황에 관계없이 장애가 있는 사용자가 사이트에 더 쉽게 액세스할 수 있도록 하는 방법을 알아보세요.
접근성 자세히 알아보기
새 과정은 접근성 관련 주제를 참고할 수 있는 훌륭한 진입점이자 참고 자료입니다.
디자인의 접근성 높은 색상 대비를 테스트하고 확인하는 세 가지 도구와 기법에 관한 개요입니다.
이 튜토리얼에서는 웹사이트에서 액세스 가능한 기본 탐색을 빌드하는 방법을 설명합니다. 의미론적 HTML, 접근성, ARIA 속성 사용이 때때로 도움이 되는 것보다 더 많은 해가 될 수 있는 방법에 대해 배웁니다.
디지털 접근성을 전문으로 하는 소프트웨어 엔지니어 Melanie와의 인터뷰를 읽어 보세요.

결제 및 ID

결제 및 사용자가 사이트와 앱에 안전하게 로그인할 수 있도록 지원하기 위한 최신 기술과 권장사항을 확인하세요.
ID 자세히 알아보기
패스키를 사용하면 사용자 계정을 더 안전하고 간편하고 쉽게 사용할 수 있습니다.
기존 비밀번호 사용자를 수용하면서 패스키를 사용하는 로그인 환경을 만듭니다.
웹 결제와 작동 방식에 대해 자세히 알아보세요.
사용자가 최대한 쉽고 빠르게 주소 및 결제 양식을 작성하도록 지원하여 전환수를 극대화하세요.

개발자 뉴스레터

받은편지함에서 바로 최신 소식, 기술, 업데이트를 받아보세요.