document.fonts.ready 활용을 통한 Sticky Header 레이아웃 점프 해결

⭐ One line of code that fixed my jumping sticky header

Giulio2026년 6월 3일4분intermediate

AI 요약

Context

position: fixed 적용 시 Document Flow에서 제외되는 Header의 높이만큼 Spacer를 삽입하는 구조 설계. Webfont의 비동기 로딩 및 font-display: swap 동작으로 인해 Fallback 폰트와 실제 폰트 간의 높이 차이가 발생하며, 이로 인해 Sticky 전환 시 콘텐츠가 튀는 레이아웃 점프 현상 발생.

Technical Solution

document.fonts.ready Promise를 활용하여 모든 Webfont 로딩 완료 시점에 높이를 재측정하는 로직 구현
폰트 캐싱 여부와 무관하게 일관된 UI를 제공하기 위한 초기 측정 및 폰트 로드 후 재측정의 2단계 프로세스 적용
window.resize 이벤트 리스너를 통해 브라우저 크기 변경에 따른 동적 높이 대응 체계 구축
이미 is-sticky 클래스가 적용된 상태에서 정확한 높이 측정을 위해 클래스를 일시적으로 제거하고 측정 후 즉시 복구하는 동기적 처리 수행
브라우저의 Batch Rendering 특성을 이용해 상태 변경 과정의 Flicker 현상을 원천 차단한 Zero-visual-flicker 측정 기법 도입

실천 포인트

- Webfont를 사용하는 요소의 높이/위치 기반 JS 계산 시 반드시 `document.fonts.ready` 시점 고려 - DOM 측정값이 렌더링 상태에 영향을 받는 경우, 일시적 상태 변경 후 즉시 복구하는 동기적 측정 패턴 검토 - 로컬 개발 환경의 캐싱 상태가 실제 사용자 환경(Cold Load)과 다를 수 있음을 인지하고 네트워크 스로틀링 테스트 수행

태그

#Critical Rendering Path #WebFont #DOM Measurement #Layout Shift #Reflow

원문 읽기