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

Service

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

My

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

Policy

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

© 2026 그알것 · What Still Matters

질문 목록Performance
Performance

Core Web Vitals란 무엇이며 어떻게 개선하나요?

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

면접관의 질문 의도

지표 이름을 외웠는지가 아니라, 측정으로 병목을 짚고 지표별 개선 레버를 우리 코드 위로 끌어올 수 있는지 가르려는 질문이다.

큐레이션 답변

학습 자료

Core Web Vitals는 사용자 체감을 세 축으로 묶은 지표로, LCP는 큰 콘텐츠가 처음 그려지는 시점, INP는 사용자 상호작용에 화면이 응답하기까지의 지연, CLS는 의도치 않은 레이아웃 이동의 누적량을 잰다. 개선은 병목을 먼저 찾고 그 자리에 맞춰 손대는 흐름이다. LCP는 LCP 후보 요소를 식별해 이미지·폰트 preload·서버 응답·CSS 차단 자원을 줄이는 쪽으로, INP는 핸들러 안의 무거운 동기 작업과 큰 리렌더를 쪼개는 쪽으로, CLS는 이미지·iframe·광고에 크기를 잡고 폰트·동적 삽입 영역을 다듬는 쪽으로 간다. 한 번 줄였다고 끝이 아니라, 필드 데이터를 보며 회귀를 막는 운영이 본 작업이다.

좋은 답변 구조

  1. 01LCP·INP·CLS가 각각 무엇을 재는지 한 줄씩 정의한다
  2. 02필드 데이터로 어떤 지표가 우리의 병목인지 측정해서 우선순위를 잡는 절차를 짚는다
  3. 03지표별 대표 개선 레버(이미지·폰트·핸들러 분할·크기 명시)를 연결한다
  4. 04한 번 개선이 아니라 회귀를 막는 운영 관점으로 마무리한다

자주 실수하는 포인트

Lighthouse 한 번의 합성 점수만 보고 실 사용자 성능을 단정한다
로딩 최적화에만 매달리고 INP 같은 상호작용 지표는 손대지 않는다
CLS 원인을 이미지 크기 미지정으로만 잡고 폰트·광고·동적 삽입을 빼먹는다

실무 맥락

  • 검색 노출이 트래픽에 직접 영향을 줘서 성능 점수가 사업 지표가 되는 서비스
  • 모바일·저속망 비중이 높아 합성 점수와 실제 체감이 크게 벌어지는 환경
  • 릴리즈마다 성능 회귀가 새어 들어와 모니터링이 필요한 운영 환경

본인 경험에 녹이는 힌트

필드 데이터에서 LCP 후보 요소가 의외로 텍스트 블록이었던 식의 경험이 있다면 측정 기반 진단 사례로 연결할 수 있다

INP 악화 원인을 무거운 핸들러나 큰 리렌더로 좁혀 본 적이 있다면 상호작용 병목 진단으로 엮을 수 있다

CWV 대시보드를 팀 목표로 운영해 본 경험이 있다면 회귀 방지·우선순위 합의 관점으로 말할 수 있다

커뮤니티 인기 답변

전체 0개

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

관련 꼬리 질문

Q1LCP 후보 요소는 어떤 조건에서 바뀌나요
Q2INP와 TBT는 어떤 관계가 있나요
Q3CLS를 줄이기 위해 광고 슬롯은 어떻게 설계하나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문