고해상도 이미지와 비디오 콘텐츠가 많은 미디어 기반 웹 서비스에서, 사용자 경험 저하 없이 성능을 최적화하기 위한 고급 이미지 및 비디오 로딩 전략을 설명해주세요. 단순히 `lazy loading`을 넘어, `srcset`, `sizes`를 활용한 반응형 이미지, WebP/AVIF와 같은 차세대 이미지 포맷 적용, Adaptive Streaming(HLS/DASH) 비디오 구현, 그리고 CLS(Cumulative Layout Shift)를 최소화하기 위한 이미지 플레이스홀더 전략 등을 포함하여 설명해야 합니다.
힌트 · `<picture>` 태그, `loading="lazy"`, `decoding="async"`, CDN의 이미지 변환 서비스 활용, 비디오 스트리밍 프로토콜의 작동 방식과 이점, 그리고 레이아웃 시프트 방지를 위한 이미지 영역 확보 전략을 언급합니다.
모범답안
미디어 기반 웹 서비스 성능 최적화를 위해 다음과 같은 전략을 사용하겠습니다.
반응형 이미지:
srcset과sizes속성을 활용하여 다양한 화면 크기와 해상도에 최적화된 이미지를 제공합니다.<picture>태그를 사용하여 브라우저 지원 여부에 따라 WebP나 AVIF 같은 차세대 포맷을 선택적으로 제공할 수 있습니다.차세대 이미지 포맷: WebP 또는 AVIF 포맷을 사용하여 이미지 크기를 줄이고 품질을 향상시킵니다. CDN의 이미지 변환 서비스를 활용하면 원본 이미지를 다양한 포맷과 크기로 쉽게 변환할 수 있습니다.
Adaptive Streaming: HLS 또는 DASH와 같은 Adaptive Streaming 프로토콜을 사용하여 네트워크 환경에 따라 비디오 품질을 동적으로 조절합니다. 이를 통해 사용자 경험 저하 없이 안정적인 비디오 재생을 보장합니다.
CLS 최소화: 이미지 로딩 중 레이아웃 시프트를 최소화하기 위해 이미지의 가로/세로 비율을 미리 지정하거나, 플레이스홀더를 사용합니다.
loading="lazy"속성을 사용하여 초기 로딩 속도를 개선하고,decoding="async"속성을 사용하여 이미지 디코딩이 메인 스레드를 차단하지 않도록 합니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- 대규모 전자상거래 웹사이트에서 Core Web Vitals 지표 중 특히 LCP(Largest Contentful Paint)와 INP(Interaction to Next Paint)가 저조하게 측정될 때, 이를 진단하고 개선하기 위한 심층적인 접근 방식과 구체적인 해결 전략을 제시해주세요. 단순한 이미지 최적화를 넘어선 복합적인 원인 분석과 해결 방안(예: JavaScript 번들 최적화, 폰트 로딩 전략, 서드파티 스크립트 관리)을 포함하여 설명해야 합니다.
- Service Worker를 활용하여 웹 애플리케이션의 오프라인 지원을 넘어, 네트워크 요청에 대한 응답 속도와 안정성을 극대화하기 위한 고급 캐싱 전략(예: Stale-While-Revalidate, Cache-First with Network Fallback, Background Sync)을 설명해주세요. 각 전략의 동작 원리, 적합한 사용 시나리오, 그리고 캐시 무효화 및 업데이트 메커니즘을 구체적인 코드 예시와 함께 제시할 수 있습니까?
- 대규모 프론트엔드 프로젝트에서 성능 예산(Performance Budget)을 설정하고 이를 지속적으로 관리, 모니터링하기 위한 체계적인 접근 방식을 설명해주세요. 어떤 지표들을 기준으로 예산을 설정해야 하며, CI/CD 파이프라인에 성능 테스트를 통합하여 예산 초과를 방지하고 성능 회귀(Performance Regression)를 감지하는 구체적인 방법론을 제시할 수 있습니까?