0Pricing
Web Performance Optimization & Lighthouse icon

Web Performance Optimization & Lighthouse

WebFrontendBackendNetwork

웹 성능 최적화 기법을 마스터하고 Google Lighthouse를 활용하여 번개처럼 빠르고 사용자 친화적인 웹 애플리케이션을 구축하세요.

🤖 AI 기반📚 12개 코스👥 100,000명 이상의 학습자⭐ 4.9 평점
코스 개요

Web Performance: From Slow Pages to Lighthouse 100s

웹 성능은 사이트가 전환되는지 아니면 포기되는지를 결정하는 요소입니다. 렌더링 지연의 밀리초 단위 차이는 직접적으로 이탈률, Core Web Vitals 점수, 검색 순위에 영향을 미칩니다. 이 트랙은 Lighthouse 감사와 Core Web Vitals부터 JavaScript 실행, 서버 튜닝, 실사용자 모니터링에 이르기까지 최적화의 전체 스택을 다루며, 브라우저와 Google이 실제로 측정하는 도구를 기반으로 합니다.

What You Will Learn

Lighthouse 감사를 실행하고 해석하는 방법, 이미지, 미디어, CSS, 폰트를 최적화하여 페이로드 크기를 줄이는 방법, 그리고 중요 렌더링 경로가 어떻게 작동하는지와 어디서 간섭해야 하는지를 배웁니다. Core Web Vitals (LCP, CLS, INP)를 통해 사용자 경험을 측정하고, 성능 예산을 설정하고 시행하며, HTTP 캐싱과 네트워크 레벨 전략을 구현합니다. 레이아웃 스래싱과 장시간 작업을 피하여 더 빠른 JavaScript를 작성하고, 서버 측 응답 시간을 튜닝한 후, 합성 테스트와 함께 Real User Monitoring (RUM)으로 프로덕션 트래픽을 계측합니다.

The Learning Path

12개 코스가 A1부터 C1까지 걸쳐 있습니다. 이 트랙은 핵심 개념과 첫 번째 Lighthouse 안내로 시작한 후, 이미지 및 미디어 최적화, CSS 및 폰트 전략, B1 레벨의 Core Web Vitals을 거칩니다. B2 코스는 중요 렌더링 경로, 고급 Lighthouse 커스터마이제이션, 네트워크 캐싱, 성능 예산을 다룹니다. 마지막 C1 코스들 — JavaScript Performance Best Practices, Server-Side Performance & Backend Optimization, Real User Monitoring (RUM) & Synthetic Monitoring — 은 단일 감사로는 드러나지 않는 프로덕션 수준의 문제를 다룹니다.

How It Works

각 코스는 짧고 실습적인 레슨으로 나뉘어 있으며, 내장 편집기에서 실시간 피드백과 함께 완료하고 막히면 AI 튜터를 활용할 수 있습니다. 개념은 실제 브라우저 도구와 Lighthouse 메트릭과 연결된 연습을 통해 즉시 강화되므로, 각 세션을 메모로만 끝내는 것이 아니라 측정 가능한 결과물을 얻게 됩니다.

학습 시작 →

학습 방식

🎯
인터랙티브 레슨
실시간 피드백을 받으며 직접 코딩 연습하기
🤖
AI 튜터
막힐 때마다 AI 튜터에게 즉시 도움받기
💻
내장 에디터
브라우저에서 바로 코드 작성 & 실행하기
🏆
수료증
과정을 완료하면 수료증 취득하기
커리큘럼

12개 코스

Web Performance Optimization & Lighthouse 학습 경로의 모든 코스.

01

웹 성능 및 핵심 개념 입문

A14개 레슨

웹 성능의 기초를 살펴보고 사용자 경험과 비즈니스 목표에서 속도가 중요한 이유를 이해해 보세요. 빠른 웹 애플리케이션을 정의하는 주요 지표를 배웁니다.

02

Lighthouse 감사 시작하기

A24개 레슨PRO

웹 페이지 품질을 감사하는 강력한 도구인 Google Lighthouse와 함께 학습을 시작해 보세요. 첫 번째 감사를 실행하고 생성된 보고서를 해석하는 방법을 배웁니다.

03

이미지 및 미디어 최적화 기법

B14개 레슨PRO

이미지, 동영상 및 기타 미디어 자산을 최적화하여 페이지 용량을 크게 줄이고 로딩 속도를 높이는 방법을 익혀 보세요. 최신 형식과 반응형 전략을 배웁니다.

04

CSS 및 글꼴 최적화 전략

B14개 레슨PRO

스타일시트와 웹 글꼴을 최적화하여 렌더링 성능과 시각적 안정성을 높여 보세요. 중요 CSS, 글꼴 로딩, 사용자 경험에 미치는 영향을 배웁니다.

05

사용자 경험 지표 및 핵심 웹 바이탈

B14개 레슨PRO

특히 Google의 핵심 웹 바이탈처럼 사용자 경험에 직접 영향을 미치는 지표에 집중합니다. 이러한 핵심 지표를 측정하고 이해하며 크게 개선하는 방법을 배워 보세요.

06

중요 렌더링 경로 최적화

B24개 레슨PRO

브라우저가 웹 페이지를 렌더링하는 방식을 이해하고 중요 렌더링 경로의 병목 지점을 찾아보세요. 리소스 로딩을 최적화하고 콘텐츠가 빠르게 표시되도록 하는 전략을 배웁니다.

07

고급 Lighthouse 감사 및 맞춤 설정

B24개 레슨PRO

Lighthouse의 명령줄 인터페이스, 프로그래밍 방식 API, 맞춤 감사 기능을 살펴보며 기본 보고서 이상의 기능을 활용해 보세요. Lighthouse를 개발 워크플로에 통합하는 방법을 배웁니다.

08

네트워크 성능 및 캐싱 전략

B24개 레슨PRO

네트워크 프로토콜과 고급 캐싱 메커니즘에 대한 이해를 넓혀 보세요. 데이터 전송을 최적화하고 콘텐츠 전송 네트워크를 활용하여 전 세계 사용자에게 빠르게 콘텐츠를 제공하는 방법을 배웁니다.

09

성능 예산 및 미래 동향

B24개 레슨PRO

시간이 지나도 웹사이트 속도를 최적의 상태로 유지하도록 성능 예산을 설정하고 적용하는 방법을 배워 보세요. 웹 성능 최적화의 새로운 기술과 미래 동향을 살펴봅니다.

10

JavaScript 성능 모범 사례

C14개 레슨PRO

페이지 반응성을 저해하지 않으면서 스크립트가 효율적으로 실행되도록 하는 고급 JavaScript 최적화 기법을 자세히 살펴보세요. 전송 용량을 줄이고 실행을 관리하는 방법을 배웁니다.

11

서버 측 성능 및 백엔드 최적화

C14개 레슨PRO

성능에 대한 이해를 백엔드로 확장하여 서버 측 병목 지점을 찾고 해결해 보세요. 서버 아키텍처와 데이터 처리가 프런트엔드 성능에 미치는 영향을 이해합니다.

12

실제 사용자 모니터링(RUM) 및 합성 모니터링

C14개 레슨PRO

실제 사용자 모니터링(RUM)과 합성 모니터링을 포함한 고급 성능 모니터링 기법을 살펴보세요. 실제 사용자와 통제된 환경에서 성능 데이터를 수집하고 분석하는 방법을 배웁니다.

자주 묻는 질문

자주 묻는 질문

Web Performance Optimization & Lighthouse 강의는 무료인가요?

네, Web Performance Optimization & Lighthouse 강의를 무료로 시작하고 인터랙티브 레슨을 모두 무료로 완료할 수 있습니다. 선택적 PRO 구독을 통해 고급 AI 도구와 공유 가능한 수료증을 잠금 해제할 수 있습니다.

ALL을(를) 배우기 위해 사전 경험이 필요한가요?

아니요. 강의는 기초부터 시작하여 점차 더 심화된 주제로 나아가므로 ALL 경험이 없어도 시작할 수 있습니다.

CoddyKit에서 ALL은(는) 어떻게 배우나요?

직접 해보면서 배웁니다. 짧은 인터랙티브 레슨은 명확한 설명과 실시간으로 실행되는 실습 코딩 연습을 함께 제공하며, 24시간 AI 튜터가 막힐 때마다 맞춤형 도움을 줍니다.

Web Performance Optimization & Lighthouse을(를) 완료하면 수료증을 받나요?

네, PRO 학습자는 시험을 응시하고 Web Performance Optimization & Lighthouse 강의의 검증 코드가 포함된 공유 가능한 수료증을 취득할 수 있습니다.

휴대폰에서 ALL을(를) 배울 수 있나요?

네, CoddyKit은 웹과 iOS, Android 네이티브 앱으로 이용 가능하므로 어느 기기에서나 ALL을(를) 배우고 진행 상황이 모든 기기에서 동기화됩니다.

Web Performance Optimization & Lighthouse을(를) 지금 시작하기

AI 기반 강의로 프로그래밍을 배우는 수천 명의 학습자들과 함께하세요.

무료로 시작하기 →모든 강의 보기