백그라운드 이미지는 사악합니다
백그라운드 이미지가 Core Web Vitals에 악영향을 미치는 이유와 교체 방법
백그라운드 이미지는 사악합니다
저를 아시거나 제 강연을 들어보신 분들은 제가 백그라운드 이미지에 대해 이야기하는 것을 들어보셨을 것입니다. 그렇지 않은 분들을 위해 말씀드리자면, 저는 백그라운드 이미지를 정말이지 싫어합니다. 제가 백그라운드 이미지를 싫어하는 이유, 백그라운드 이미지가 있는 페이지를 빠르게 찾는 방법, 그리고 이를 수정하는 방법을 소개합니다.
최종 검토: Arjen Karel (2026년 3월)
백그라운드 이미지가 Core Web Vitals에 나쁜 이유
웹 페이지를 로드할 때 모든 요소에는 적절한 시간과 위치가 있습니다. 지연(deferring), 사전 로드(preloading), 비동기 로드(async loading), 스케줄링(scheduling), fetchpriority 정의 등과 같은 최신 기술을 사용하면 모든 핵심 리소스를 꽤 잘 제어할 수 있습니다. 백그라운드 이미지만 제외하고 말이죠!
다음 실제 사례를 생각해 보세요:
매일, 주로 WordPress 사이트에서 이러한 패턴을 봅니다. 모든 일반 이미지는 지연 로드되고 일부 이미지(이 경우 푸터의 소셜 아이콘)는 백그라운드 이미지로 처리됩니다. 무슨 일이 일어날지 짐작이 가시나요?
<html>
<head>
<style>
footer {
/* 100vh의 마진은 푸터를 화면 밖으로 밀어냅니다! */
margin-top: 100vh;
>.social {
>.facebook {background-image: url('img/facebook.jpg');}
>.instagram {background-image: url('img/instagram.jpg');}
>.linkedin {background-image: url('img/linkedin.jpg');}
>.email {background-image: url('img/email.jpg');}
}
}
</style>
</head>
<body>
<!-- 네, 이 이미지는 지연 로드됩니다. 사소한 실수는 일어나기 마련이니까요! -->
<img loading="lazy" src="img/hero.jpg"></img>
<footer>
<div class="social">
<span class="facebook"></span> <span class="instagram"></span> <span class="linkedin"></span> <span class="email"></span> </div>
</footer>
</body>
</html>짐작하셨겠지만, 대개 페이지에서 Largest Contentful Paint 요소가 될 훨씬 더 중요한 'hero.jpg' 이미지보다 화면 밖의 백그라운드 이미지가 먼저 다운로드 대기열에 추가됩니다.
하지만 이게 전부가 아닙니다!
앞서 말했듯이 백그라운드 이미지는 사악합니다! 때때로 부여되는 이상한 우선순위 외에도, 일반 이미지가 가진 멋진 기능들이 백그라운드 이미지에는 없기 때문입니다.
- 지연 로드 불가: 백그라운드 이미지에는 loading 속성이 없습니다.
<img>태그에서 작동하는loading="lazy"속성(전 세계 94.9% 지원)은 백그라운드에는 아예 존재하지 않습니다. - 비동기 디코딩 불가: 백그라운드 이미지에는 decoding 속성이 없습니다.
- fetchpriority 없음: 백그라운드 이미지에는 fetchpriority 속성이 없습니다. 브라우저에게 어떤 백그라운드 이미지가 가장 중요한지 알려줄 수 없습니다.
<img>태그의 경우, 2025 Web Almanac에 따르면 이미 모바일 페이지의 17.3%가 LCP 이미지에fetchpriority="high"를 사용하고 있습니다. - 반응형 이미지 소스: 백그라운드 이미지를 위한 image-set() 함수는
srcset및<picture>요소에서 얻을 수 있는 기능과 동일한 기능을 제공하지 않습니다. - width 및 height 속성 없음. 단순한 width 및 height 속성을 설정할 수 없다는 것은 브라우저가 이미지를 위한 공간을 예약할 수 없음을 의미하며, 이는 Cumulative Layout Shift (CLS)를 유발합니다. 결국 CSS 우회 방법을 사용하게 되며, 같은 복잡도라면 코드가 많을수록 항상 더 느려집니다!
- alt 텍스트 없음: 백그라운드 이미지에는 alt 속성이 없어 접근성을 해치며, Google 이미지가 이를 색인할 수 없음을 의미합니다.
url()을 통해 로드된 백그라운드 이미지는 실제로 유효한 LCP 후보입니다. 느린 백그라운드 이미지가 LCP로 표시되겠지만, 이를 최적화할 수 있는 위의 도구 중 어느 것도 사용할 수 없습니다. 브라우저는 이미지가 존재하는지조차 알기 전에 먼저 CSS를 다운로드하고 파싱해야 합니다. Google의 자체 측정 결과에 따르면, 이러한 리소스 로드 지연(resource load delay)은 중앙값 LCP에 약 400ms를 더합니다.
2025 Web Almanac에 따르면, 모바일 페이지의 9%가 여전히 CSS로 시작된 이미지를 LCP 요소로 사용하고 있습니다. 이 수치는 2022년 이후로 변하지 않았습니다. CoreDash로 모니터링된 사이트에서 히어로 백그라운드 이미지를 <img> 태그로 교체한 결과 중앙값 LCP가 35% 개선되었습니다.
페이지의 모든 백그라운드 이미지를 빠르게 찾기
let bgimg = performance.getEntriesByType('resource')
.filter(rs => rs.initiatorType == 'css')
.map(rs => {
return {
name: rs.name,
initiator: rs.initiatorType
}
}) || [];
(bgimg.length > 0)?
console.table(bgimg):
console.log('이 페이지에는 백그라운드 이미지가 없습니다!'); 그러면 모든 백그라운드 이미지 이름과 개시자가 깔끔하게 포맷된 표로 나타납니다.
백그라운드 이미지를 피하는 방법
백그라운드 이미지는 쉽게 피할 수 있습니다. 피하는 방법은 이미지 자체에 따라 다릅니다. 크게 두 가지 방법이 있습니다.
'일반 이미지'인 경우
믿기 어려우시겠지만, 백그라운드 이미지가 발견되는 대부분의 경우 이미지의 배경 부분은 아무런 목적도 갖고 있지 않습니다. 이미지가 그저 '페이지 어딘가에 있어야 하기' 때문에 background-image:url() 이 오용되는 것입니다.
이런 경우라면 일반 이미지 태그를 추가하고 스타일시트에서 백그라운드 이미지를 제거하기만 하면 됩니다.
커버 이미지인 경우:
커버 이미지는 부모 컨테이너를 완전히 덮는 이미지입니다. 오래전에는 커버 이미지를 구현하는 유일한 방법이었기 때문에 백그라운드 이미지를 커버 이미지로 사용하는 것이 어느 정도 이해는 됩니다. 아마 사람들은 익숙한 방식을 고수하는 것일 겁니다. 다행히 지금은 우리에게 더 나은 옵션이 있습니다. 그러니 수정해 봅시다!
커버 이미지의 경우 background-image: url(hero.jpg); background-size: cover; 스타일을 제거하고 동일한 컨테이너에 일반 이미지를 배치한 다음 CSS를 다음과 같이 수정하세요.
<style>
.img-container {
position: relative;
> img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
z-index: 1;
}
}
</style>
<div class="img-container">
<img
height="500"
width="300"
decoding="async"
loading="lazy"
src="hero.jpg"
srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
alt="alt text"
fetchpriority="low"
>
</div>
이제 width, height, loading, decoding, srcset, fetchpriority 및 alt 속성을 갖춘 적절한 이미지가 완성되었습니다. 브라우저가 효율적으로 로드하는 데 필요한 모든 것을 갖추고 있습니다.
백그라운드 이미지를 유지해야만 하는 경우
반복되는 패턴, 장식용 오버레이 또는 CMS에서 다른 옵션을 제공하지 않는 경우처럼 CSS 백그라운드 이미지가 반드시 필요한 때도 있습니다. 이러한 상황에서는 브라우저가 이미지를 일찍 발견할 수 있도록 이미지를 사전 로드하세요:
<link rel="preload" href="hero.webp" as="image" type="image/webp" fetchpriority="high">
이 코드를 <head> 내에서 가능한 한 위쪽에 배치하세요. 화면 밖의 백그라운드 이미지의 경우, IntersectionObserver를 사용하여 지연시킬 수 있으므로 사용자가 근처로 스크롤할 때만 로드되도록 할 수 있습니다.
변경 사항이 실제로 user experience를 개선하는지 확인하려면 Real User Monitoring을 설정하세요. 실험실(Lab) 점수는 무엇이 더 빨라져야 하는지를 알려줍니다. 실제 방문자의 필드 데이터는 실제로 무엇이 더 빠른지를 알려줍니다.
