공들여 쓴 소개 글을 손님이 읽어 내려가는 순간, 위쪽 사진이 뒤늦게 불쑥 나타나면서 화면 전체가 아래로 덜컹 밀립니다. 누르려던 '문의하기' 버튼이 한 박자 늦게 다른 자리로 미끄러지고, 손가락은 엉뚱한 링크를 누릅니다. 사이트가 고장 난 건 아닌데, 손님 눈에는 어딘가 엉성하고 불안한 가게로 비칩니다.
왜 화면이 덜컹 밀릴까
브라우저는 글과 사진을 위에서부터 차례로 그립니다. 그런데 사진은 글보다 늦게 도착하는 경우가 많습니다. 문제는 브라우저가 그 사진이 얼마나 큰지 미리 알지 못한다는 데 있습니다. 자리를 비워 두지 않은 채 글부터 그려 두었다가, 뒤늦게 사진이 도착하면 그제야 공간을 만들며 아래 내용을 통째로 밀어냅니다. 이 갑작스러운 밀림을 레이아웃 이동(Layout Shift)이라 부릅니다.
예전엔 어떻게 막았나
과거에는 사진이 들어갈 칸의 높이를 자바스크립트로 직접 계산하거나, 빈 상자에 일부러 위쪽 여백(padding-top)을 비율만큼 넣어 자리를 흉내 내는 편법을 썼습니다. 동작은 했지만 숫자를 손으로 맞춰야 했고, 사진 비율이 바뀌면 코드도 함께 손봐야 하는 번거로운 방식이었습니다.
aspect-ratio — 코드 한 줄로 자리를 미리 잡는다
이제는 CSS의 aspect-ratio 한 줄이면 충분합니다. 사진이 도착하기 전에 '여기는 가로세로 16대 9짜리 자리'라고 미리 알려 두면, 브라우저가 그 비율대로 공간을 먼저 비워 둡니다.
img { width: 100%; aspect-ratio: 16 / 9; }
이 한 줄만으로 사진이 늦게 와도 자리가 이미 잡혀 있어, 아래 글과 버튼이 처음 위치에서 흔들리지 않습니다. 별도 라이브러리도, 복잡한 계산도 필요 없습니다.
작은 회사 사이트에 왜 중요한가
화면 밀림은 단순한 보기 싫음의 문제가 아닙니다. 첫째, 손님이 엉뚱한 버튼을 눌러 원치 않는 화면으로 가면 그 자리에서 이탈하기 쉽습니다. 둘째, 구글은 이 밀림 정도를 검색 순위 평가 항목(CLS)으로 직접 반영합니다. 즉 화면이 자주 덜컹거리는 사이트는 검색 결과에서도 뒤로 밀린다는 뜻입니다. 작은 회사일수록 문의 한 건, 검색 노출 한 칸이 아쉬운 만큼 그냥 넘길 일이 아닙니다.
도입할 때 챙길 점
- 사진과 영상에 비율 지정: 본문 이미지, 유튜브 영상, 배너처럼 늦게 뜨는 요소에 우선 적용합니다.
- 가로 폭과 함께 쓰기: width를 100%로 두고 aspect-ratio를 더하면 화면 크기가 바뀌어도 비율이 유지됩니다.
- 카드 목록에 효과 큼: 사진이 줄지어 뜨는 제품·후기 목록일수록 밀림이 누적되니 가장 먼저 손볼 곳입니다.
화면이 흔들리지 않는다는 건 사소해 보여도, 손님이 가게를 '믿을 만한 곳'으로 느끼게 하는 작은 디테일입니다. CYAN은 이렇게 눈에 잘 띄지 않지만 전환과 검색에 직접 닿는 부분까지 챙겨 작은 회사의 웹사이트를 단단하게 만듭니다.