지난번 포스팅(워드프레스 갤러리 CLS 최적화 가이드)에서 Meow Gallery의 고질적인 CLS 문제를 해결하기 위해 aspect-ratio 속성을 활용한 반응형 대응법을 다뤘었죠. 덕분에 CLS 점수 문제는 깔끔하게 해결되었습니다. 하지만 운영을 하다 보니 또 다른 벽에 부딪혔습니다. 바로 이미지 비율의 다양성입니다.
모든 이미지가 4:3 비율이면 좋겠지만, 때로는 넓은 파노라마 사진이나 세로가 긴 이미지를 갤러리 첫 단에 배치해야 할 때가 있습니다. 이때 지난번에 수동으로 넣어둔 800 / 600 비율은 오히려 독이 되곤 했습니다.
1. 4:3 비율 예약의 한계: “여백의 미가 아닌 여백의 공포”
지난번 해결책은 모든 첫 이미지가 4:3 비율일 것이라는 가정하에 작성되었습니다. 픽셀(px) 고정 방식보다는 진보했지만, 16:9 비율의 넓은 스크린샷이나 다른 규격의 이미지를 올리면 아래와 같은 어색한 상황이 연출됩니다.
위 캡처처럼 CSS가 예약한 공간과 실제 이미지의 높이가 맞지 않으면, 이미지가 로드된 후에도 아래쪽 글자와의 사이에 뜬금없는 공백이 생기거나, 반대로 글자가 이미지를 가리는 등의 레이아웃 불일치가 발생합니다. 결국 CLS 점수는 방어할지언정 실제 사용자 경험(UX)은 여전히 불안정해지는 것이죠.
2. 해결책: PHP로 구현하는 “지능형 비율 예약”
매번 이미지 비율을 계산해서 CSS를 수정하는 것은 ‘최적화’라고 부르기 민망한 노가다입니다. 그래서 이번에는 서버(PHP)가 포스팅 본문을 스스로 분석해서, 첫 번째 이미지의 실제 가로/세로 규격을 읽어와 CSS를 실시간으로 만들어주는 완전 자동화 방식을 도입했습니다.
워드프레스 테마의 functions.php 파일에 아래 코드를 추가(저는 코스 스니펫 플러그인을 사용하고 있습니다.)하면, 서버가 페이지를 그리기 직전에 갤러리의 첫 이미지를 파악해 그에 딱 맞는 ‘전용 예약석’을 마련해 줍니다.
/**
* [최종 진화형] 첫 번째 이미지 비율을 자동 감지하여 CLS 방지 CSS 주입
*/
add_action('wp_head', function() {
global $post;
if ( !isset($post->post_content) ) return;
// 1. 본문 소스에서 첫 번째 갤러리 이미지의 ID를 낚아챔
if ( preg_match( '/(?:ids|image_ids)[\"\]\:\=\s]+(\d+)/', $post->post_content, $matches ) ) {
$first_image_id = $matches[1];
// 2. 워드프레스 DB에서 이미지의 실제 가로, 세로 규격 호출
$meta = wp_get_attachment_metadata( $first_image_id );
if ( ! empty( $meta['width'] ) && ! empty( $meta['height'] ) ) {
$w = $meta['width'];
$h = $meta['height'];
// 3. 추출된 실제 규격을 바탕으로 해당 포스팅 전용 스타일 주입
echo "<style id='mgl-cls-fix'>
.entry-content > div:first-of-type .mgl-root {
aspect-ratio: {$w} / {$h} !important;
width: 100% !important;
min-height: auto !important;
background-color: #f2f2f2;
}
</style>";
}
}
}, 1);
3. 결과: “어떤 비율이든 알아서 척척”
이 코드를 적용하면 운영자는 더 이상 이미지 크기에 신경 쓸 필요가 없습니다. 서버가 DB에 저장된 메타데이터를 직접 읽어오기 때문에, 파노라마 사진이든 정사각형 사진이든 브라우저가 읽기 전에 이미 완벽한 공간이 예약됩니다.
위 결과물처럼 이미지가 로드되기 전부터 실제 높이만큼 자리가 비워져 있고, 로드된 후에도 글자와의 간격이 칼같이 유지됩니다. 브라우저가 페이지를 읽자마자 정확한 위치를 파악하니 Lighthouse의 CLS 점수는 당연히 0점 만점을 기록하게 됩니다.
4. 결론: 자동화가 주는 평화
웹 성능 최적화의 끝은 결국 자동화입니다. 단순히 ‘보이는 문제’를 수동으로 고치는 것을 넘어, 브라우저가 정보를 처리하는 과정을 시스템적으로 보조했을 때 비로소 진정한 최적화가 완성됩니다.
무료 플러그인의 한계를 서버 사이드 코딩으로 극복하면서, 이제 어떤 이미지든 당당하게 포스팅 상단에 배치할 수 있게 되었습니다. 저와 같은 고민으로 CSS 수치 입력에 지치셨던 분들이라면 이 ‘동적 비율 예약’ 방식을 꼭 시도해 보시길 권장합니다.