블로그 제목을 클릭했을 때 화면 상단이 잠시 여백 상태로 보이다가 전체가 나타나는 경우 혹시 경험하지 않으셨나요? 이렇게 상단이 잠시 여백처럼 보였다가 전체가 나타나는 현상은 주로 렌더링 지연, 스크립트 지연, 또는 스타일 적용 시점의 문제 때문에 발생한다고 합니다. 아래에서 원인과 해결 방법을 살펴봅니다.
🔍 원인 분석
1. CSS 스타일 시점 지연
- 외부 CSS 또는 웹폰트를 불러오는 과정에서 스타일이 늦게 적용되면, 초기에는 스타일이 없는 기본 형태(예: 흰 여백)로 보이다가 적용 후 레이아웃이 정상적으로 보입니다.
2. 자바스크립트 동작 순서
- 블로그에 적용된 스크립트가 window.onload 이후 레이아웃을 조정하거나 이미지 로딩을 제어한다면, 스크립트 실행 전까지 공백처럼 보이는 영역이 생길 수 있습니다.
3. 이미지/폰트 지연 로딩
- 대표 이미지나 폰트를 **지연 로딩(lazy loading)**하거나 CDN에서 불러올 경우,
화면 상단에 해당 콘텐츠가 있을 때 잠시 공백 상태처럼 보일 수 있어요.
4. CSS 초기 설정 문제
- body나 html에 min-height, margin, padding 등이 잘못 설정되었거나
CSS 리셋이 누락되면 상단이 밀리거나 공백처럼 보일 수 있습니다.
✅ 진단 결과 요약
🔎 1. 스크립트/레이아웃 지연 로딩
사이트에 들어가면, 레이아웃이 살짝 밀렸다가 자리를 잡는 현상이 보입니다. 이는 다음과 같은 코드들이 페이지 로딩 시점 이후에 실행되기 때문이에요:
- 티스토리 기본 테마나 스킨에서 document.ready 또는 window.onload 이벤트 이후 레이아웃 조정을 수행
- 상단 고정 영역(헤더, 메뉴바 등)이 JS로 동적으로 적용되면서, 렌더링이 1초 미만으로 지연됨
🔎 2. 웹폰트 사용으로 인한 FOUT(폰트 깜빡임) 현상
사이트는 웹폰트를 사용 중인데, <head>에 link로 웹폰트를 불러오고 있어 폰트 적용 전에 기본 폰트로 잠깐 보이다가 웹폰트로 바뀌는 현상이 발생합니다. 이것도 화면이 순간 깜빡이거나 여백처럼 느껴지는 이유 중 하나예요.
🔎 3. 상단 광고 또는 이미지 로딩 순서 문제
- 상단에 이미지/광고 영역이 있을 경우, 이 부분이 지연 로딩될 경우 전체 콘텐츠가 아래로 밀리며 "공백처럼" 보일 수 있습니다.
- 특히 모바일에서는 화면 비율상 아주 작은 밀림도 사용자에겐 눈에 띄게 보이죠.
💡 해결 방법 제안 (티스토리 전용)
✅ 방법 1: 웹폰트 깜빡임 방지
웹폰트 preconnect / preload 추가하기: 아래 코드를 <head> 영역에 넣어주세요.
⚠️ 사용 중인 정확한 웹폰트 이름은 HTML/CSS에서 확인하고 넣어야 해요!
✅ 방법 2: body visibility 트릭 사용
이렇게 하면 페이지가 다 로드된 뒤 한 번에 보여줘서 여백이 생기는 느낌을 줄일 수 있어요.
단, 페이지가 무겁거나 느릴 경우 오히려 전체 로딩 지연처럼 느껴질 수 있으니 가볍게 사용해야 해요.
✅ 방법 3: 상단 콘텐츠 Lazy Loading 제거
대표 이미지나 광고를 <img loading="lazy"> 속성으로 설정하면, 스크롤할 때까지 로딩이 지연되기 때문에 상단 콘텐츠는 lazy 속성을 제거해주는 것이 좋습니다.
✨결론
이 현상은 블로그가 느리거나 오류가 있어서가 아니라, 스타일이나 스크립트가 완전히 적용되기 전에 화면이 먼저 뜨는 과정에서 생기는 자연스러운 현상입니다.
📁 추천 체크리스트
- CSS 로딩 방식 확인 (head 안에 핵심 스타일 넣기)
- 이미지나 폰트 preload 설정
- 상단 콘텐츠는 lazy loading 사용 안 하기
- 자바스크립트 의존한 콘텐츠 지연 렌더링 여부 확인
저의 경우는 스킨을 변경하니 문제가 해결되었습니다. 사용하는 블로그 플랫폼이 티스토리 / 워드프레스 / 브런치 / 네이버 블로그 중 어떤 곳인지에 따라 다르게 적용됩니다.😊