나눔웹 UX/UI 꿀팁
클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법
스마트폰으로 기사를 읽거나 버튼을 누르려던 찰나, 갑자기 위쪽에 늦게 로딩된 이미지나 배너가 뜨면서 화면이 밑으로 훅 밀려 엉뚱한 곳을 클릭해 본 경험, 다들 한 번쯤 있으실 겁니다.
사용자의 혈압을 올리는 이 현상을 개발 용어로 CLS (Cumulative Layout Shift : 누적 레이아웃 이동)라고 부릅니다.
💡 CLS 현상을 절대 방치하면 안 되는 이유
단순한 불편함을 넘어, 구글(Google)은 이 CLS 수치가 높은 웹사이트에 대해 검색 엔진 노출 순위(SEO)를 대폭 깎아버리는 페널티를 부여합니다. 방문자 이탈과 마케팅 효율 저하의 1순위 원인입니다.
1. 문제의 원인: 브라우저는 이미지의 크기를 모른다
과거에는 CSS로 이미지의 width: 100%만 주면 높이는 알아서 조절되게 코딩했습니다. 하지만 브라우저 입장에서는 이미지 파일이 완전히 다운로드되기 전까지는 이 이미지가 세로로 얼마나 긴지 알 길이 없습니다.
그래서 처음엔 높이를 0으로 잡았다가, 이미지가 뜨는 순간 본래 크기만큼 화면을 밀어내버리는 것입니다.
2. 모던 CSS의 축복: aspect-ratio 속성 도입
이 문제를 한 방에 해결하는 최신 CSS 속성이 바로 aspect-ratio(종횡비)입니다. 브라우저에게 "이미지 다운로드가 안 끝났어도, 가로 16 : 세로 9 비율로 미리 빈 공간을 뚫어놔!"라고 지시하는 것입니다.
/* 완벽한 반응형 썸네일 이미지 설정 */
.post-thumbnail {
width: 100%;
/* 16:9 비율로 미리 영역을 확보하여 화면 밀림(CLS) 완벽 방지 */
aspect-ratio: 16 / 9;
/* 이미지가 비율에 맞게 예쁘게 잘리도록(찌그러짐 방지) 설정 */
object-fit: cover;
background-color: #f0f0f0; /* 로딩 전 빈 공간에 연한 회색 배경 처리 */
}
명품 웹사이트는 눈에 보이지 않는 쾌적함에서 결정됩니다.
나눔웹은 철저한 코어 웹 바이탈(Core Web Vitals) 분석을 통해
로딩 중에도 단 1px의 흔들림 없는 견고한 레이아웃을 구축합니다.