A
약 75초
경험 중심 1인칭 답변
팀 프로젝트에서 모바일 화면에서 스크롤 시 버벅임이 생기는 성능 문제를 맡아 개선한 경험이 있습니다. 먼저 Chrome DevTools 성능 탭으로 렌더링 병목이 어디서 생기는지 프로파일링했습니다. 문제는 리스트에서 아이템을 수백 개 한꺼번에 렌더링하고 있었고, 스크롤할 때마다 전체 리스트가 다시 그려지고 있었습니다.
가상 스크롤(virtual scroll) 방식을 도입해 화면에 보이는 아이템만 DOM에 유지하도록 변경했습니다. 추가로 이미지 로딩은 Intersection Observer로 뷰포트에 진입할 때만 로드되도록 lazy load를 적용했습니다. 적용 후 Lighthouse 성능 점수가 62점에서 84점으로 올라갔고, 스크롤 시 버벅임이 사라졌다는 팀원 피드백을 받았습니다. 이 경험에서 성능 최적화는 "느릴 것 같은 곳"이 아니라 "실제로 느린 곳"을 먼저 측정하는 것에서 시작해야 한다는 것을 배웠습니다.
이 결의 특징
성능 문제를 DevTools로 실제 병목을 프로파일링한 후 가상 스크롤과 Lazy Load라는 구체적 기술로 해결합니다. 측정 단계에서 최적화까지 논리적 인과 관계가 명확합니다.
이 결이 통하는 자리
기술 디버깅에 앞서 측정 도구 사용을 자연스럽게 습관화한 팀에서 높이 평가합니다. 성능 개선의 근거로 점수 상승을 정량 제시하는 자세를 중시하는 환경입니다.