Google은 모든 사용자를 위해 크로스브라우저에서 작동하며 액세스하기 쉽고 빠르며 안전한 웹사이트를 빌드할 수 있도록 지원하고자 합니다. 이 사이트는 Chrome팀과 접근성, 성능, 디자인과 같은 웹 개발 주제를 전문으로 하는 외부 전문가가 작성한, 개발자 여정을 도와주는 콘텐츠를 제공합니다.
웹 플랫폼 기준을 사용하면 웹 플랫폼 기능에 대한 브라우저 지원에 관한 정보를 명확하게 파악할 수 있으며 현재 프로젝트에서 사용할 수 있는 웹 플랫폼 기능에 관한 명확한 정보를 얻을 수 있습니다. web.dev에서 도움말을 읽을 때 사용된 기능이 모두 기준에 포함된 경우 브라우저 호환성 수준을 신뢰할 수 있습니다.
자세히 알아보기
AI를 사용하여 성능이 우수한 웹 우선 환경을 이해하고 빌드하는 데 도움이 되도록 제작된 리소스를 살펴보세요.
자세히 알아보기
이제 다음 페인트에 대한 상호작용 (INP)이 Core Web Vitals 측정항목입니다. 사이트의 INP를 측정하고 최적화하세요.
자세히 알아보기
ID 및 결제 처리와 관련된 최신 기능과 권장사항을 알아보세요.
자세히 알아보기
웹 플랫폼은 개발자가 사용하기 쉽고 즐거운 웹사이트를 만드는 데 사용할 수 있는 브라우저 기능과 API의 지속적으로 진화하는 생태계입니다. 다음 페이지는 web.dev에서 웹 플랫폼의 각 부분을 원하는 속도로 살펴볼 수 있는 개발자 과정입니다.
HTML은 페이지의 구조와 의미론을 제공하는 웹의 문서 레이어입니다.
자세히 알아보기
CSS는 웹의 프레젠테이션 레이어이며 웹페이지를 원하는 대로 표시할 수 있습니다.
자세히 알아보기
JavaScript는 웹페이지에 풍부한 상호작용을 제공하므로 개발자는 사용자가 작업을 실행하고 목표를 달성하는 데 도움이 되는 풍부한 상호작용 웹사이트를 빌드할 수 있습니다.
자세히 알아보기
웹 플랫폼을 처음 사용하시나요? 걱정하지 마세요. HTML, CSS, JavaScript 초보자를 위해 선별된 과정을 통해 웹 플랫폼의 각 부분을 자세히 살펴보세요.
교육과정
초보자에서 전문가 수준의 HTML까지 개발자를 위한 HTML 개요
강의 시작하기
교육과정
접근성부터 Z-색인까지 모든 내용을 다루는 모듈이 포함된 CSS 가이드입니다.
강의 시작하기
교육과정
JavaScript의 기초에 대한 심층 과정입니다.
강의 시작하기
이 블로그에는 새로운 웹 플랫폼 기능, 기준점, AI, Core Web Vitals 업데이트 등 웹 개발의 최신 소식이 포함되어 있습니다. 블로그에서 최신 블로그 소식을 확인하세요.
블로그 게시물 읽기

CSS 및 UI 디자인

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

소스 맵이란 무엇인가요?

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

Core Web Vitals

코어 웹 바이탈 및 기타 측정항목을 이해하여 더 빠른 웹사이트와 앱을 빌드하세요.
코어 웹 바이탈 살펴보기
'다음 페인트에 대한 상호작용'은 공식적으로 코어 웹 바이탈이 되며 3월 12일에 최초 입력 지연을 대체합니다.
Interaction to Next Paint(다음 페인트와의 상호작용) 측정항목을 최적화하는 방법을 알아봅니다.
웹 상태에 따라 웹사이트의 Core Web Vitals 실적을 최적화하기 위한 권장사항 모음
이미지 최적화 외에도 첫 바이트까지의 시간 (TTFB) 및 리소스 로드 지연과 같은 요소를 고려하여 최대 콘텐츠 렌더링 시간 (LCP) 최적화에 관한 일반적인 오해를 살펴보세요.

프로그레시브 웹 앱

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

누구나 이용 가능

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

결제 및 ID

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

개발자 뉴스레터

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