렌더링 병목 원인을 찾아 개선한 경험 말하기
약 85초
레이아웃 스래싱·리플로우 최소화 중심으로 실제 개선 과정을 설명한다
모바일 웹뷰 프로젝트에서 스크롤할 때마다 프레임이 튀는 현상이 있었습니다. 처음에는 이미지 최적화 문제라고 생각했으나, DevTools 프로파일러로 확인해 보니 JavaScript가 스크롤 이벤트 핸들러에서 DOM 레이아웃을 강제로 읽고 있었습니다. offsetTop, clientHeight를 스크롤마다 반복 호출하면서 레이아웃 스래싱이 발생하는 구조였습니다.
수정 방향은 두 가지였습니다. 첫째, Intersection Observer로 스크롤 이벤트 직접 리스닝을 제거하였고, 둘째, 레이아웃 값 읽기와 쓰기를 requestAnimationFrame 한 사이클 안에서 분리하였습니다. 결과적으로 스크롤 중 프레임이 42에서 59 수준으로 개선되었습니다. 다만 Intersection Observer를 처음 사용해 보아 rootMargin 설정을 잘못 잡아 뷰포트 진입 감지가 100px 이상 늦게 트리거된 실수가 있었습니다.
모바일 웹뷰는 네이티브보다 GPU 자원이 제한적이므로 will-change, transform 같은 레이어 분리 힌트도 함께 사용하였으나, 과도하게 적용하면 오히려 메모리 압박이 생긴다는 것을 알고 나서부터 필요한 요소에만 선택적으로 사용하였습니다.
이 결의 특징
프레임 튀는 현상을 이미지 문제로 오판했다가 프로파일러로 레이아웃 스래싱을 찾아낸 전환점이 담겨 있습니다. rootMargin 설정 실수까지 솔직히 짚으면서 프레임 42에서 59로 개선된 수치가 보입니다.
이 결이 통하는 자리
원인을 잘못 짚었던 과정을 감추지 않고 도구로 재확인한 흐름이 구체적으로 살아 있을 때 통합니다. 과도한 최적화가 메모리 압박을 부른다는 절제된 판단이 이어질 때 면접관이 읽는 결이 보입니다.