이 글에서 정리하는 내용
저는 반응형에서 이미지가 깨지거나 찌그러지거나 자글거릴 때, 어떤 순서로 확인해야 하는지 체크리스트 기준으로 정리하겠습니다. object-fit과 background-size 차이부터 큰 이미지를 작게 보여도 거칠어 보이는 원인까지 문제 단위로 빠르게 확인할 수 있게 구성했습니다.
- 체크리스트 1. img인지 배경인지 구분하기
- 체크리스트 2. width와 height 강제 여부 확인
- 체크리스트 3. 박스 비율과 cover/contain 확인
- 체크리스트 4. 잘림과 여백 허용 기준 정하기
- 체크리스트 5. 큰 이미지를 작게 보여도 자글거릴 때
- FAQ
체크리스트 1. 이 이미지가 img인지 background-image인지부터 구분하기
저는 반응형 이미지 이슈를 볼 때 가장 먼저 이 이미지가 콘텐츠인지 장식인지부터 구분합니다. 상품 사진, 프로필 사진, 게시글 썸네일처럼 이미지 자체가 정보라면 img를 쓰는 쪽이 맞습니다. 이 경우에는 alt를 줄 수 있고, 검색이나 접근성 측면에서도 의미가 분명합니다. 반대로 이벤트 상단 비주얼, 카드 배경, 텍스트 뒤에 깔리는 장식 이미지는 background-image가 더 자연스럽습니다. object-fit은 img 같은 대체 요소의 내부 콘텐츠를 다루고, background-size는 요소의 배경 레이어를 다룹니다. 화면상 비슷해 보여도 적용 대상이 다르기 때문에 여기서부터 분리해서 봐야 이후 판단이 깔끔해집니다.
의미 있는 이미지와 장식용 배경 구분 예시
<!-- 의미 있는 이미지 -->
<img src="/images/product.jpg" alt="블랙 가죽 자켓 정면 이미지">
<!-- 장식용 배경 -->
<div class="promo-banner">이벤트 배너 텍스트</div>저는 “alt가 필요한가?”, “이미지가 없어지면 정보가 사라지는가?”를 먼저 묻습니다. 답이 예라면 img를 우선 고려합니다. 반대로 핵심 정보가 텍스트로 남아 있고 이미지는 연출만 담당한다면 background-image가 더 적절합니다. 이 기준을 먼저 잡아야 object-fit을 쓸지, background-size를 쓸지 자연스럽게 결정됩니다.
체크리스트 2. width와 height를 동시에 강제해서 비율을 깨고 있지 않은지 확인하기
저는 이미지가 찌그러질 때 가장 흔한 원인을 width와 height의 동시 강제에서 찾습니다. 원본 이미지 비율과 부모 박스 비율이 다른데도 img에 width: 100%와 height: 100%를 동시에 주면, 브라우저는 박스를 채우기 위해 이미지를 늘이거나 눌러 버릴 수 있습니다. 특히 object-fit 없이 이런 구조를 쓰면 원본 비율 유지 규칙이 없기 때문에 찌그러짐이 더 쉽게 발생합니다. 그래서 반응형에서는 이미지 자체를 억지로 맞추기보다, 박스와 이미지를 분리해서 제어하는 편이 더 안정적입니다.
찌그러짐이 자주 생기는 패턴
<div class="thumb">
<img src="/images/sample.jpg" alt="상품 이미지">
</div>.thumb {
width: 100%;
height: 240px;
}
.thumb img {
width: 100%;
height: 100%;
}저는 위 구조를 보면 먼저 원본 이미지 비율과 썸네일 박스 비율이 같은지부터 확인합니다. 다르면 이미지가 늘어나거나 눌릴 가능성이 큽니다. 이럴 때는 단순히 크기만 더 키우거나 줄이는 것보다 object-fit 또는 background-size로 어떤 방식으로 맞출지 명확하게 정해야 합니다.
체크리스트 3. 박스 비율을 먼저 정하고 object-fit 또는 background-size를 확인하기
저는 반응형에서 이미지가 계속 흔들리는 화면이라면 부모 박스 비율부터 먼저 고정하는 편을 자주 사용합니다. aspect-ratio를 주면 화면 너비가 달라져도 박스가 어떤 비율을 유지해야 하는지가 먼저 정해집니다. 그다음 img라면 object-fit으로, 배경 이미지라면 background-size로 내부 이미지를 어떻게 맞출지 정리하면 됩니다. object-fit의 cover는 비율을 유지하면서 박스를 채우고 일부를 잘라낼 수 있고, contain은 전체를 보여 주는 대신 여백이 생길 수 있습니다. background-size의 cover와 contain도 비슷한 시각적 결과를 만들 수 있지만, 이것은 img 콘텐츠가 아니라 배경 레이어에 적용된다는 점이 다릅니다.
박스 비율과 object-fit을 함께 쓰는 예시
.thumb {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}저는 썸네일, 프로필, 카드형 이미지에서 이 패턴을 자주 씁니다. 먼저 박스 비율을 안정시키고, 그다음 이미지가 박스를 어떻게 채울지를 정하면 화면 크기가 바뀌어도 결과를 예측하기 쉽습니다. 얼굴이 들어간 사진이라면 object-position으로 초점을 위쪽으로 옮겨 잘림 위치를 보정할 수도 있습니다.
| 상황 | 우선 확인할 것 |
|---|---|
| img 사용 | aspect-ratio, object-fit, object-position |
| 배경 이미지 사용 | background-size, background-position, background-repeat |
체크리스트 4. cover로 잘라도 되는지, contain으로 여백이 남아도 되는지 먼저 정하기
저는 cover와 contain을 단순한 속성값 암기로 보지 않고, 잘림과 여백 중 무엇을 허용할지 결정하는 기준으로 봅니다. 화면을 빈틈 없이 채우는 것이 더 중요하면 cover가 맞고, 이미지 전체를 빠짐없이 보여 주는 것이 중요하면 contain이 맞습니다. 예를 들어 상품 썸네일, 프로필, 카드 대표 이미지는 화면 정렬이 중요해서 cover를 더 자주 쓰게 됩니다. 반대로 포스터 전체, 인증 이미지, 비율 손실 없이 다 보여줘야 하는 자료라면 contain이 더 적절할 수 있습니다. 반응형에서 이미지가 이상해 보일 때는 속성 자체가 틀렸다기보다, 잘림과 여백 중 어떤 쪽을 허용해야 하는지 기준이 없어서 어색해지는 경우가 많습니다.
배경 이미지를 꽉 채울 때의 예시
.hero {
min-height: 320px;
padding: 40px 24px;
color: #fff;
background-image: url("/images/hero.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}저는 텍스트가 주인공이고 이미지는 분위기를 보조하는 히어로 섹션이나 이벤트 배너에서는 background-size: cover를 자주 씁니다. 반대로 배경 이미지가 반복되면 안 되는 화면에서는 background-repeat도 함께 꺼야 합니다. 즉 background-size만 따로 보는 것이 아니라, 배경 레이어 전체를 한 세트로 보는 편이 실무에 가깝습니다.
체크리스트 5. 큰 이미지를 작게 보여도 자글거릴 때는 해상도 후보와 로딩 전략까지 같이 확인하기
저는 이 부분이 많은 분들이 놓치기 쉬운 지점이라고 봅니다. 큰 이미지를 CSS로 작게 표시한다고 해서 항상 선명해지는 것은 아닙니다. 실제 표시 크기가 500px이어도 고밀도 화면에서는 같은 자리에 더 많은 디바이스 픽셀이 사용될 수 있기 때문에, 1배 해상도 이미지 하나만으로는 가장자리가 거칠어 보일 수 있습니다. 또한 이미지 안에 작은 글자, 얇은 선, 아이콘, 세밀한 패턴이 포함되어 있으면 축소 과정에서 계단 현상이나 미세한 자글거림이 더 잘 드러납니다. 그래서 이 문제는 단순히 object-fit이나 background-size만으로 해결되지 않고, 어떤 파일을 내려받을지 결정하는 로딩 전략까지 같이 봐야 합니다.
srcset과 sizes로 해상도 후보를 주는 예시
<img
src="/images/card-1000.jpg"
srcset="/images/card-1000.jpg 1x, /images/card-2000.jpg 2x"
alt="프로모션 카드 이미지"
class="promo-image"
>.promo-image {
width: 500px;
height: 500px;
object-fit: cover;
}저는 고정 크기 카드나 배너라면 1x와 2x 후보를 나누는 것부터 먼저 생각합니다. 이렇게 하면 기기 해상도에 따라 더 적절한 파일을 선택할 수 있습니다. 로고나 선명도가 중요한 아이콘은 SVG를 고려하고, 이미지 안의 텍스트는 가능하면 HTML 텍스트로 분리하는 편이 더 선명하고 유지보수도 쉽습니다. image-rendering 속성도 존재하지만, 일반 사진 품질을 무조건 좋게 만드는 속성이라기보다 이미지 스케일링 알고리즘을 지정하는 쪽에 가깝기 때문에 만능 해결책으로 보면 안 됩니다.
picture와 sizes까지 함께 보는 이유
<picture>
<source
media="(max-width: 767px)"
srcset="/images/photo-mobile.jpg 1x, /images/photo-mobile@2x.jpg 2x"
>
<img
src="/images/photo-desktop.jpg"
srcset="/images/photo-desktop.jpg 1200w, /images/photo-desktop-large.jpg 2000w"
sizes="(max-width: 767px) 100vw, 50vw"
alt="서비스 소개 이미지"
loading="lazy"
>
</picture>저는 CSS의 표시 방식과 HTML의 로딩 전략을 반드시 분리해서 설명하는 편입니다. object-fit과 background-size는 이미 선택된 이미지를 박스 안에서 어떻게 보이게 할지 정하는 표시 방식입니다. 반면 srcset과 sizes는 브라우저가 어떤 이미지를 내려받을지 선택하는 로딩 전략입니다. 그리고 picture는 모바일과 데스크톱에서 아예 다른 구도의 이미지를 쓰는 아트 디렉션에도 적합합니다. 따라서 “큰 이미지인데 왜 거칠지?”라는 질문은 CSS만 볼 문제가 아니라, 현재 화면 크기와 픽셀 밀도에 맞는 파일을 실제로 내려받고 있는지도 함께 확인해야 합니다.
많이 받는 질문
Q. 제목을 [html, css] 이미지가 깨지거나 찌그러지거나 자글거리면 확인해야할 체크리스트로 가도 괜찮을까요?
저는 괜찮다고 봅니다. 사용자가 겪는 문제를 제목에 바로 넣고, 본문도 체크리스트 구조로 맞추면 검색 의도와 읽기 흐름이 잘 맞습니다. 다만 게시글 톤을 조금 더 매끄럽게 하려면 “깨지거나, 찌그러지거나, 자글거리면”처럼 쉼표를 넣어 가독성을 높이는 편이 좋습니다.
Q. object-fit: cover와 background-size: cover는 같은 건가요?
아닙니다. 저는 둘이 비슷해 보여도 적용 대상이 다르다고 정리합니다. object-fit은 img 같은 대체 요소 내부 콘텐츠를 다루고, background-size는 요소의 배경 레이어를 다룹니다.
Q. 큰 이미지를 작게 보여 주는데 왜 선명하지 않고 거칠어 보일 수 있나요?
실제 표시 크기와 기기 픽셀 밀도가 다를 수 있고, 이미지 안에 얇은 선이나 작은 글자가 있으면 축소 과정에서 자글거림이 더 잘 보일 수 있습니다. 저는 이때 CSS 표시 크기만 보지 않고 srcset, sizes, picture 같은 로딩 전략까지 함께 확인하는 편을 권합니다.