예시 답변 1
약 84초
측정 도구 기반 병목 파악·이미지·번들 최적화·수치 결과 확인 중심으로 푸는 결
학부 프로젝트에서 React 앱을 배포하면서 초기 로딩 속도가 너무 느리다는 팀원 피드백을 받았습니다. Lighthouse로 측정해보니 First Contentful Paint가 4.2초로 기준치를 크게 넘었습니다. 원인을 분석하니 두 가지가 주요 문제였습니다. 첫 번째는 이미지를 원본 크기 그대로 사용한 것이었고, 두 번째는 번들에 사용하지 않는 라이브러리가 포함된 것이었습니다. 이미지는 WebP 포맷으로 변환하고 lazy loading을 적용했고, 번들은 트리 쉐이킹과 코드 스플리팅으로 초기 로드 크기를 줄였습니다. 최적화 후 FCP가 4.2초에서 1.8초로 줄었고, 성능 점수도 52점에서 81점으로 올랐습니다. 이 경험에서 프론트엔드 최적화는 측정 도구로 병목을 먼저 파악하는 것이 출발점임을 배웠습니다.
이 결의 특징
Lighthouse로 FCP 4.2초를 수치로 짚고, 이미지 포맷 전환과 트리 쉐이킹이라는 서로 다른 두 축을 병렬로 손댄 흔적이 있습니다. 4.2초에서 1.8초, 52점에서 81점이라는 전후 숫자가 각 조치의 효과를 따로 증언하는 결이 담겨 있습니다.
이 결이 통하는 자리
측정 도구로 병목을 먼저 잡은 순서가 또렷하고, 원인을 두 갈래로 나눠 각각 해결한 과정이 살아 있을 때 통합니다. 감으로 최적화했다는 인상 없이 지표로 시작해 지표로 닫는 자리에서 면접관의 추가 질문이 줄어드는 결이 보입니다.