피드로 돌아가기
Dev.toFrontend
원문 읽기
Build-time 측정 기반 Skeleton 도입으로 Layout Shift 제거 및 TTI 40% 개선
Skeleton maintenance is Broken. We Fixed It.
AI 요약
Context
Runtime 기반 Skeleton 생성 방식에 따른 디자인 불일치와 Layout Shift 발생 문제 직면. 수동 SVG 설정이나 런타임 Props 튜닝 방식은 컴포넌트 증가 시 유지보수 비용 상승 및 렌더링 오버헤드를 유발하는 한계 존재.
Technical Solution
- Runtime 생성을 배제하고 Build-time 단계에서 Skeleton을 생성하는 정적 접근 방식 채택
- Playwright를 활용한 실제 DOM Geometry(Font-size, Line-height 등) 정밀 측정 로직 구현
- 측정 데이터를 기반으로
.skeleton.tsx파일을 자동 생성하는 Design-time 분석 파이프라인 구축 - 정적 CSS Shimmer 적용을 통한 JS 실행 및 DOM 파싱 오버헤드 제거
- RSC, React Query, next/dynamic 등 다양한 비동기 렌더링 패턴에 대응하는 통합 API 설계
Impact
- 정적 자산 활용을 통한 TTI(Time to Interactive) 40% 향상
- 픽셀 단위 정밀 측정 기반의 Layout Shift 완전 제거
실천 포인트
1. Runtime 연산 비용이 높은 UI 요소의 정적 생성 가능 여부 검토
2. Headless Browser 기반의 DOM 측정 자동화를 통한 디자인-코드 동기화 방안 고려
3. Layout Shift 최소화를 위한 Skeleton Bounding Box의 실제 컴포넌트 일치 여부 검증