6.0 KiB

Raw Permalink Blame History

사이트 성능 분석하기

과제 개요

성능 분석은 현대 웹 개발자에게 필수적인 역량입니다. 이 과제에서는 실제 웹사이트에 대해 브라우저 기반 도구와 타사 서비스를 사용하여 병목 현상을 찾아내고 최적화 전략을 제안하는 종합적인 성능 감사를 수행합니다.

귀하의 임무는 웹 성능 원리에 대한 이해와 전문 분석 도구를 효과적으로 활용하는 능력을 보여주는 상세한 성능 보고서를 제출하는 것입니다.

과제 지침

분석할 웹사이트 선택 - 다음 옵션 중 하나를 선택하세요:

자주 사용하는 인기 웹사이트(뉴스 사이트, 소셜 미디어, 전자상거래 등)
오픈 소스 프로젝트 웹사이트(GitHub 페이지, 문서 사이트)
지역 비즈니스 웹사이트나 포트폴리오 사이트
본인 프로젝트나 이전에 수행한 과제

최소 3가지 다른 접근법으로 다중 도구 분석 수행:

브라우저 개발자 도구 - Chrome/Edge Performance 탭을 사용한 상세 프로파일링
온라인 감사 도구 - Lighthouse, GTmetrix, WebPageTest 등 사용
네트워크 분석 - 자원 로딩, 파일 크기, 요청 패턴 점검

발견 내용 문서화 - 다음 항목을 포함하는 종합 보고서 작성:

성능 지표 분석

여러 도구와 관점에서의 로딩 시간 측정
Core Web Vitals 점수(LCP, FID, CLS) 및 그 의미
리소스 분해를 통한 로딩 시간에 가장 크게 기여하는 자산 식별
네트워크 워터폴 분석으로 차단 자원 파악

문제점 식별

구체적인 성능 병목 현상과 근거 데이터
각 문제 발생 원인에 대한 근본 원인 분석
실제 사용자에 미치는 영향에 대한 사용자 영향 평가
심각도와 해결 난이도를 기준으로 한 우선순위 선정

최적화 권고사항

기대 효과가 명확한 구체적이고 실행 가능한 개선점
각 권장 사항의 구현 전략
적용 가능한 최신 모범 사례(지연 로딩, 압축 등)
지속적인 성능 모니터링을 위한 도구 및 기법

연구 요구사항

브라우저 도구만 의존하지 말 것 - 다음과 같은 추가 분석 도구 활용:

타사 감사 서비스:

Google Lighthouse - 종합 감사
GTmetrix - 성능 및 최적화 인사이트
WebPageTest - 실제 테스트 조건
Pingdom - 글로벌 성능 모니터링

전문화된 분석 도구:

Bundle Analyzer - JavaScript 번들 크기 분석
이미지 최적화 도구 - 자산 최적화 기회
보안 헤더 분석 - 보안 성능 영향

제출물 형식

전문 보고서(2~3페이지 분량) 작성, 포함 내용:

요약 - 주요 발견 내용 및 권고사항 개요
방법론 - 사용 도구 및 테스트 방법
현재 성능 평가 - 기준 메트릭과 측정 결과
발견된 문제점 - 상세 문제 분석 및 근거 데이터
권고사항 - 우선순위가 매겨진 개선 전략
구현 로드맵 - 단계별 최적화 계획

시각적 증거 포함:

성능 도구 및 지표 스크린샷
성능 데이터 차트 또는 그래프
가능할 경우 전후 비교
네트워크 워터폴 차트 및 자원 분해

평가 기준

기준	우수 (90-100%)	적절 (70-89%)	개선 필요 (50-69%)
분석 깊이	4개 이상 도구를 사용한 종합 분석, 상세 메트릭, 근본 원인 분석 및 사용자 영향 평가 포함	3개 도구 사용, 명확한 메트릭 및 기본 문제 식별	2개 도구 사용, 깊이 부족 및 최소한의 문제 식별
도구 다양성	브라우저 도구 + 3개 이상 타사 서비스 사용 및 비교 분석	브라우저 도구 + 2개 타사 서비스 사용, 비교 분석 일부 포함	브라우저 도구 + 1개 타사 서비스, 제한적 비교
문제 식별	5개 이상 구체적 성능 문제 식별, 상세 근본 원인 분석과 영향 정량화 포함	3-4개 성능 문제 식별, 분석 및 영향 측정 일부 포함	1-2개 성능 문제 식별, 기본 분석
권고사항	구체적이고 실행 가능한 권고, 구현 세부사항 및 모범 사례 포함	적절한 권고사항과 일부 구현 안내, 기대 결과 포함	기본 권고사항, 제한적 구현 세부사항
전문적 발표	명확한 구조, 시각 증거, 요약 및 전문형식으로 잘 구성	적절한 구성 및 일부 시각 증거 포함	기본 구성, 최소 시각 증거

학습 성과

이 과제를 완료하면 다음 능력을 보여줄 수 있습니다:

전문 성능 분석 도구 및 방법론 활용
데이터 기반 분석을 통한 성능 병목 현상 식별
코드 품질 및 사용자 경험 간 상관 관계 분석
구체적이고 실행 가능한 최적화 전략 제안
전문적인 형식으로 기술적 결과물 소통

이 과제는 수업에서 배운 성능 개념을 강화함과 동시에 웹 개발 경력 전반에 걸쳐 활용할 실무 능력을 키우도록 돕습니다.

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역은 오류나 부정확한 부분이 있을 수 있음을 유의하시기 바랍니다. 원본 문서가 권위 있는 출처로 간주되어야 합니다. 중요한 정보에 대해서는 전문 인력의 번역을 권장합니다. 본 번역 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.

6.0 KiB Raw Permalink Blame History