그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Performance
Performance

이미지 크기가 클 경우 렌더링 속도가 느려질 텐데, 이를 개선하기 위한 방법들을 설명해주세요

실무4/5
설계4/5
인간3/5
기초2/5

면접관의 질문 의도

기법 나열로 끝내는지, 전송·표시·호환성·CLS까지 묶어 _우선순위로 적용_할 수 있는 사람인지를 가른다.

큐레이션 답변

학습 자료

이미지 성능 최적화는 _용량 축소_와 _렌더 안정성_을 동시에 다뤄야 한다. 포맷은 사진은 WebP/AVIF, 투명 그래픽은 PNG/SVG처럼 목적별로 고르고, srcset/sizes로 기기 해상도에 맞는 파일만 내려보낸다. LCP 후보 이미지는 preload/fetchpriority=high로 먼저 끌어오고, 나머지는 loading="lazy"로 뒤로 미룬다. 또한 width/height(또는 aspect-ratio)를 명시해 CLS를 막아야 _체감 성능_이 같이 따라온다.

좋은 답변 구조

  1. 01현재 LCP/CLS 지표와 목표를 먼저 정한다
  2. 02포맷·반응형 이미지·preload/lazy·width-height 명시 같은 측정 가능한 기법을 우선순위로 제시한다
  3. 03각 기법의 비용(브라우저 호환 폴백·과한 preload·과한 lazy)과 부작용을 짚는다
  4. 04Lighthouse/RUM 지표로 개선을 검증하는 방법으로 마무리한다

자주 실수하는 포인트

LCP 후보 이미지에 loading="lazy"를 그대로 붙여 초기 페인트를 늦춘다
WebP/AVIF만 말하고 폴백/호환 전략을 빠뜨린다
width/height를 비워둬 이미지 로드 시 CLS가 튄다
이미지 품질 기준 없이 "무조건 압축"으로 결정한다

실무 맥락

  • 히어로 이미지 한 장이 LCP를 늦추는 랜딩 페이지
  • 다양한 기기 해상도에 같은 이미지를 보내 모바일에서 트래픽이 새는 서비스
  • 광고/배너 영역의 이미지 로드로 CLS가 튀는 페이지

본인 경험에 녹이는 힌트

LCP 이미지를 preload·fetchpriority=high로 끌어와 지표를 잡아본 경험이 있다면 우선순위 적용 이야기 자체가 답변 후크가 된다

srcset/sizes를 도입해 모바일 트래픽이 줄어든 경험이 있다면 정량 효과로 말할 수 있다

이미지 영역에 aspect-ratio·width/height를 명시해 CLS를 잡은 적이 있다면 _체감 성능_ 측면으로 연결할 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1WebP/AVIF 폴백 전략은 어떻게 구성하나요
Q2이미지 품질과 용량의 균형은 어떤 기준으로 정하나요
Q3LCP 이미지 최적화에서 가장 먼저 볼 항목은 무엇인가요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문