이 워드프레스의 디자인을 뉴스 레이아웃으로 변경한 후에 페이지를 로드하면 푸터 영역을 비롯하여 페이지 전체가 미세하게 흔들리는 현상이 관찰되었습니다. 이렇게 페이지 로딩 시 특정 요소가 흔들리면 코어 웹 바이탈에서 CLS 문제가 나타날 수 있지만 CLS 관련 경고가 표시되지 않아서 그대로 두었습니다.
그래도 문제를 해결하면 좋을 것 같아서 이런 저런 방법을 시도하여 겨우 원인을 파악해서 문제를 해결했습니다. 페이지 로드 시 페이지 전체 혹은 특정 요소가 흔들리는 경우 크롬 개발자 도구의 Rendering 탭에서 문제가 되는 요소를 확인할 수 있습니다. 이를 통해 원인을 파악하여 해결을 시도해볼 수 있습니다.
워드프레스 페이지 로딩 시 화면이 미세하게 흔들리는 문제가 발생하는 경우 해결 방법
워드프레스 블로그나 사이트를 운영하다 보면, 페이지를 로드하거나 스크롤할 때 화면이 살짝 흔들리는 느낌을 받을 때가 있습니다. 눈에 띄게 크게 흔들리는 건 아니어서 대수롭지 않게 넘기기 쉽지만, 이런 현상은 사용자 경험뿐 아니라 구글이 평가하는 코어 웹 바이탈의 CLS(Cumulative Layout Shift, 누적 레이아웃 이동) 점수에 영향을 줄 수 있습니다.
페이지 로딩 시 화면이 흔들리는 원인
다양한 원인에 의해 워드프레스에서 페이지 로드 시 화면이 살짝 흔들리는(레이아웃이 밀리는) 현상이 발생할 수 있습니다.
- 이미지/썸네일에 크기(width·height)가 지정되지 않음: 이미지가 로드되기 전에는 브라우저가 공간을 확보하지 못하다가, 이미지가 다운로드된 순간 갑자기 그 크기만큼 공간이 생기면서 아래 콘텐츠를 밀어냅니다. width/height 속성이나 CSS aspect-ratio(종횡비)로 미리 공간을 확보해두면 해결됩니다.
- 웹폰트 로딩으로 인한 텍스트 크기 변화 (FOUT/FOIT): 구글 폰트 등 외부 폰트가 늦게 로드되면, 로드 전 기본 폰트로 렌더링됐다가 로드 후 실제 폰트로 바뀌면서 글자 너비·줄바꿈이 달라져 주변 요소가 밀립니다. font-display: swap을 쓰더라도 폰트 간 글자 너비 차이가 크면 여전히 발생할 수 있습니다.
- 광고(Adsense 등) 삽입 영역에 고정 크기가 없음: 광고 스크립트가 비동기로 로드되면서 나중에 배너 영역이 생기면, 그 크기만큼 주변 콘텐츠가 밀립니다. 광고 슬롯에 미리 최소 높이를 지정해두는 게 일반적인 해결책입니다
- 쿠키 배너·공지 바 등이 나중에 삽입됨: GDPR 쿠키 동의 배너나 상단 공지 바가 페이지 로드 후 JS로 뒤늦게 삽입되면, 삽입되는 순간 그 높이만큼 전체 레이아웃이 밀릴 수 있습니다.
- Ajax로 콘텐츠를 나중에 불러와 기존 콘텐츠 위/사이에 삽입: "더보기" 같은 기능이 콘텐츠 아래에 추가되는 경우는 괜찮지만, 만약 목록 위쪽이나 중간에 동적으로 콘텐츠가 끼워지는 구조라면 그 아래 요소들이 전부 밀립니다.
- 플러그인/테마 CSS 로딩 순서 문제 (FOUC): CSS가 늦게 적용되거나 일부만 먼저 적용되면, 스타일링 안 된 상태로 잠깐 렌더링됐다가 스타일이 적용되면서 크기가 바뀌는 경우가 있습니다. 렌더링 차단(render-blocking) 방식으로 CSS를 불러오면 대부분 방지되지만, 일부를 지연 로드(defer/async)하는 최적화 플러그인을 쓰면 오히려 이런 문제가 생기기도 합니다.
- 팝업/모달, 소셜 공유 위젯 등 서드파티 스크립트: 페이지 로드 후 별도 스크립트가 실행되면서 배너나 위젯을 삽입하는 경우, 그 요소가 차지하는 공간만큼 주변이 밀립니다.
- 임베드 콘텐츠(유튜브, 트위터/X 등)의 크기 미지정: iframe으로 삽입되는 외부 콘텐츠도 로드 전후 크기가 다르면 이미지와 마찬가지로 레이아웃을 밀어낼 수 있습니다.
크롬 개발자 도구의 Rendering 탭으로 직접 확인하는 방법
페이지 로드 시 화면이 흔들리는 느낌을 받는다면 "이것이 원인이 아닐까"하는 감으로 판단하지 말고, 크롬 개발자 도구로 눈으로 확인하는 것이 좋습니다.
다음과 같은 순서로 사이트를 열 때 흔들리는 요소를 특정할 수 있습니다.
1 사이트에 접속하고 크롬 브라우저에서 F12를 클릭하거나 마우스 오른쪽 버튼을 클릭하고 검사를 선택하아여 개발자 도구를 엽니다.
2 Rendering 탭을 선택합니다. Rendering이 없다면 오른쪽 끝의 ⋮(더 보기) 메뉴 → More tools → Rendering을 클릭해서 추가합니다.
3 Rendering (렌더링) 패널에서 "Layout Shift Regions" (레이아웃 밀림 영역 표시) 항목을 체크합니다.
이 상태에서 페이지를 새로 고침하거나 아래로 스크롤하다 보면, 실제로 레이아웃이 밀리는 순간에 해당 영역이 파란색 테두리로 잠시 동안 표시됩니다.
예시: GeneratePress 테마에서 붙박이 내비게이션 때문에 화면이 미세하게 흔들리는 문제 해결
저는 GeneratePress 테마에서 페이지 로딩 시 페이지 콘텐츠가 살짝 흔들리는 현상이 발생하여 이 방법을 시도해보니 상단 메뉴 부분이 순간적으로 파란색 테두리로 표시되는 것을 목격했습니다.
메뉴 부분의 문제라 의심되어 Sticky Navigation 기능을 비활성화하니 더 이상 콘텐츠가 위아래로 미세하게 흔들리는 증상이 사라졌습니다.
아마도 붙박이 내비게이션 기능을 활성화할 때 메뉴 높이를 헤더 높이보다 작게 설정하는 바람에 페이지를 로드하거나 아래로 스크롤할 때 미세하게 흔들리는 현상이 발생한 것으로 의심되었습니다. 실제로 아래와 같이 Sticky Navigation 설정 페이지에서 메뉴 항목 높이(Menu Item Height)를 헤더 높이와 동일하게 설정하니 문제가 재발하지 않았습니다.
- 증상: 페이지 로딩/스크롤 시 콘텐츠가 미세하게 위아래로 흔들림
- 원인: GeneratePress 테마의 Sticky Navigation 설정에서 붙박이 메뉴 높이가 원래 헤더 높이보다 작게 설정됨 (붙박이 내비게이션은 무료 버전에서는 제공되지 않고 유료 버전인 GP Premium이 필요합니다.)
- 해결: 고정 메뉴 높이를 원래 헤더 높이와 동일하게 맞춤
문제를 해결한 후에 구글 페이지 스피드 인사이트에서 사이트를 분석해보니 점수가 높게 나오네요. 크롬 개발자 도구의 Lighthouse 탭에서 점수를 체크해볼 수 있습니다.
데스크톱 점수:
모바일 점수:
PageSpeed Insights 점수는 크게 중요하지 않지만 분석 결과를 바탕으로 속도 개선에 필요한 인사이트(통찰력)를 얻을 수 있습니다.
질문과 답변 (Q&A)
Q1. CLS 경고가 안 떠도 화면이 흔들리면 문제가 있는 건가요?
네, 그럴 수 있습니다. 구글 서치 콘솔이나 페이지 스피드 인사이트에서 CLS 관련 경고가 표시되지 않더라도, 흔들림이 미세하거나 특정 조건(스크롤, 특정 뷰포트 크기 등)에서만 발생하면 자동 측정 도구가 잡아내지 못할 수 있습니다. 눈으로 흔들림이 느껴진다면 크롬 개발자 도구의 Rendering 탭에서 원인 파악을 시도해 볼 볼 수 있습니다.
Q2. Rendering 탭에서 파란색 테두리가 여러 곳에서 동시에 나타나면 어떻게 원인을 좁혀야 하나요?
한 번에 모든 요소를 다 확인하려 하지 말고, 의심되는 요소를 하나씩 비활성화하면서 재현해보는 방식이 효과적일 수 있습니다. 예를 들어, 메뉴, 광고 슬롯, 쿠키 배너처럼 후보를 나눠서 각각 임시로 껐다 켜보면서 어떤 요소가 사라지면 흔들림도 함께 사라지는지 확인하면 원인을 특정하기 수월할 수 있습니다.
Q3. GeneratePress 테마의 Sticky Navigation 때문에 미세한 흔들림 현상이 나타난다면, 붙박이 내비게이션 옵션을 비활성화하지 않고 문제를 해결할 수 있을까요?
있습니다. 본문에서 소개한 것처럼 붙박이 메뉴 기능 자체를 끄지 않아도, GeneratePress의 Sticky Navigation 설정에서 메뉴 항목 높이(Menu Item Height)를 원래 헤더 높이와 동일하게 맞춰주면 기능은 그대로 유지하면서 흔들림 현상이 해결될 수 있습니다.
Q4. 이미지 크기(폭과 높이)를 모두 지정했는데도 여전히 흔들림이 있습니다.
이미지 외에도 원인이 여러 가지일 수 있습니다. 웹폰트 로딩으로 인한 텍스트 크기 변화, 광고 슬롯의 고정 크기 미지정, 쿠키 배너나 공지 바의 지연 삽입, 테마·플러그인의 CSS 로딩 순서 문제 등이 겹쳐서 발생하는 경우가 많습니다. 이미지 문제를 해결한 후에도 여전히 흔들림 현상이 느껴진다면 Rendering 탭으로 다시 확인해 다른 요소를 찾아볼 수 있습니다.
Q5. CLS 점수는 실제로 SEO 순위에 얼마나 영향을 주나요?
CLS는 코어 웹 바이탈의 세 가지 지표(LCP, INP, CLS) 중 하나로 구글의 페이지 경험 신호에 포함되지만, 콘텐츠 품질이나 관련성 같은 요소에 비하면 순위에 미치는 영향은 크지 않은 편입니다. 다만 CLS 점수가 나쁘면 사용자가 클릭 실수를 하거나 이탈하는 등 실제 사용자 경험이 나빠지므로, 순위와 별개로 개선하는 것이 좋습니다.
댓글 남기기