반응형 이미지 크기 설정 방법 - CSS와 HTML로 모든 화면에 맞추기
모바일, 태블릿, 데스크톱에서 이미지가 깨지거나 잘리지 않도록 반응형 이미지 크기 설정하는 실전 방법을 단계별로 정리했습니다.
블로그 글을 작성하고, 확인차 스마트폰으로 열어봤더니 이미지가 화면 밖으로 삐져나와 있었던 경험이 있으신가요? 데스크톱에서는 멀쩡했던 이미지가 모바일에서 깨지거나 잘리는 문제는 생각보다 흔합니다. 반응형 이미지 크기 설정만 제대로 해두면 이런 문제를 근본적으로 해결할 수 있습니다.
반응형 이미지가 필요한 이유
2025년 기준 전 세계 웹 트래픽의 약 60% 이상이 모바일에서 발생합니다. 사용자가 접속하는 기기의 화면 크기는 320px 스마트폰부터 2560px 이상의 울트라와이드 모니터까지 천차만별입니다.
고정 크기로 설정된 이미지는 특정 화면에서만 정상적으로 보입니다. 예를 들어 width: 800px로 고정해둔 이미지는 375px 너비의 스마트폰에서 가로 스크롤을 유발합니다. 반대로 너무 작은 이미지는 데스크톱에서 흐릿하게 보이죠.
반응형 이미지 크기 설정이 중요한 이유를 정리하면 다음과 같습니다.
- 사용자 경험 - 어떤 기기에서든 이미지가 화면에 맞게 표시됩니다
- 페이지 속도 - 불필요하게 큰 이미지를 모바일에 전송하지 않아 로딩이 빨라집니다
- SEO 점수 - 구글 Core Web Vitals에서 CLS(누적 레이아웃 변경) 점수가 개선됩니다
- 데이터 절약 - 모바일 사용자의 데이터 소비를 줄일 수 있습니다
반응형 이미지는 단순히 '보기 좋게' 만드는 것이 아닙니다. 구글 검색 순위, 페이지 로딩 속도, 이탈률까지 직접적으로 영향을 미치는 핵심 웹 최적화 요소입니다.
CSS로 반응형 이미지 크기 설정하는 기본 방법
가장 간단하면서도 효과적인 방법은 CSS를 활용하는 것입니다. 핵심은 고정 단위(px) 대신 상대 단위(%)를 사용하는 것입니다.
기본 반응형 이미지 CSS
아래 코드 한 줄이면 대부분의 상황에서 이미지가 반응형으로 동작합니다.
| 속성 | 값 | 역할 |
|---|---|---|
| max-width | 100% | 부모 요소 너비를 초과하지 않음 |
| height | auto | 원본 비율에 맞춰 높이 자동 조절 |
| display | block | 인라인 요소의 하단 여백 제거 |
| width | 100% | 항상 부모 너비에 꽉 차게 표시 |
max-width: 100%와 width: 100%의 차이를 정확히 이해해야 합니다. max-width: 100%는 이미지 원본 크기보다 커지지 않으면서 부모 요소에 맞게 줄어듭니다. width: 100%는 원본 크기와 관계없이 항상 부모 너비에 맞춰 늘어나거나 줄어듭니다.
실무에서 권장하는 기본 설정
실무에서는 보통 글로벌 스타일시트에 다음과 같은 규칙을 넣어둡니다. img 태그에 max-width: 100%와 height: auto를 기본 적용하고, 필요에 따라 개별 이미지에 추가 스타일을 덮어씌우는 방식입니다. 이렇게 하면 실수로 고정 크기 이미지가 삽입되어도 레이아웃이 깨지지 않습니다.
HTML srcset과 sizes 속성 활용법
CSS 방법만으로는 한 가지 문제가 해결되지 않습니다. 모바일 사용자에게도 데스크톱용 대용량 이미지를 전송한다는 점입니다. HTML의 srcset과 sizes 속성을 사용하면 브라우저가 화면 크기에 맞는 이미지를 자동으로 선택합니다.
srcset 속성의 작동 원리
srcset은 브라우저에게 여러 버전의 이미지를 제공하는 속성입니다. 브라우저는 현재 뷰포트 크기와 디스플레이 밀도(DPR)를 고려해 가장 적합한 이미지를 자동으로 선택합니다.
- w 디스크립터 - 이미지의 실제 픽셀 너비를 명시합니다. 예: image-400.jpg 400w
- x 디스크립터 - 디스플레이 밀도를 기준으로 합니다. 예: image-2x.jpg 2x
- sizes 속성 - 뷰포트 크기별로 이미지가 차지할 너비를 브라우저에 알려줍니다
예를 들어 sizes 속성에 "(max-width: 768px) 100vw, 50vw"라고 지정하면, 모바일에서는 화면 전체 너비로, 데스크톱에서는 화면의 절반 너비로 이미지가 표시된다는 의미입니다. 브라우저는 이 정보를 바탕으로 srcset에서 최적의 이미지를 골라 다운로드합니다.
picture 태그로 아트 디렉션 구현
단순히 크기만 바꾸는 것이 아니라 화면 크기에 따라 완전히 다른 이미지를 보여주고 싶을 때는 picture 태그를 사용합니다. 예를 들어 데스크톱에서는 가로로 긴 배너 이미지를, 모바일에서는 세로로 잘라낸 이미지를 보여줄 수 있습니다. source 태그의 media 속성에 미디어 쿼리를 넣고, 각각 다른 이미지 파일을 지정하면 됩니다.
가로세로 비율 유지하면서 크기 조절하기
반응형 이미지에서 가장 까다로운 부분이 가로세로 비율(aspect ratio) 유지입니다. 비율이 무너지면 이미지가 찌그러져 보이고, 레이아웃 시프트(CLS)가 발생해 사용자 경험이 나빠집니다.
CSS aspect-ratio 속성
최신 CSS에는 aspect-ratio 속성이 있습니다. 예를 들어 aspect-ratio: 16/9로 지정하면 너비가 변해도 항상 16:9 비율을 유지합니다. 2024년 기준 주요 브라우저 지원율이 95% 이상이므로 실무에서 안심하고 사용할 수 있습니다.
object-fit 속성 활용
고정 크기 컨테이너 안에서 이미지를 반응형으로 채워야 할 때는 object-fit 속성을 사용합니다.
| object-fit 값 | 동작 | 사용 시점 |
|---|---|---|
| cover | 비율 유지하며 컨테이너를 꽉 채움 (일부 잘림) | 카드 썸네일, 히어로 이미지 |
| contain | 비율 유지하며 이미지 전체가 보이게 표시 | 제품 이미지, 로고 |
| fill | 비율 무시하고 컨테이너에 맞춤 | 거의 사용하지 않음 |
| none | 원본 크기 그대로 표시 | 아이콘, 고정 크기 요소 |
| scale-down | none과 contain 중 더 작은 쪽 적용 | 다양한 크기의 로고 정렬 |
카드형 레이아웃에서 썸네일을 일정한 크기로 통일할 때 object-fit: cover를 사용하면 이미지 비율과 관계없이 깔끔하게 표시됩니다. object-position 속성과 함께 사용하면 잘리는 위치도 조절할 수 있습니다.
자주 하는 실수와 해결 방법
반응형 이미지 크기 설정 시 개발자들이 반복적으로 겪는 문제들이 있습니다. 미리 알아두면 디버깅 시간을 크게 줄일 수 있습니다.
1. 뷰포트 메타 태그 누락
아무리 CSS를 완벽하게 작성해도 HTML head에 viewport 메타 태그가 없으면 모바일 브라우저가 데스크톱 화면처럼 렌더링합니다. <meta name="viewport" content="width=device-width, initial-scale=1">은 반응형 웹의 필수 전제 조건입니다.
2. 인라인 스타일로 고정 크기 지정
CMS나 위지윅 에디터에서 이미지를 삽입하면 인라인 스타일로 width와 height가 px 단위로 고정되는 경우가 많습니다. 이런 경우 CSS에서 img 태그에 max-width: 100%와 height: auto를 !important로 지정하면 인라인 스타일을 덮어씌울 수 있습니다.
3. 불필요하게 큰 원본 이미지 사용
5000x3000px 원본 이미지를 그대로 업로드하고 CSS로만 줄이면 파일 용량은 그대로입니다. 실제 표시 크기의 2배(레티나 대응) 정도로 리사이즈한 이미지를 준비하는 것이 좋습니다. 블로그 본문 기준으로 1600px 너비면 대부분의 상황에서 충분합니다.
- WebP 포맷을 사용하면 JPEG 대비 25-35% 파일 크기를 줄일 수 있습니다
- AVIF 포맷은 WebP보다 더 작지만 브라우저 지원이 아직 제한적입니다
- 이미지 압축 도구(Squoosh, TinyPNG 등)로 화질 손실 없이 용량을 줄이세요
웹사이트나 블로그 작업 외에 일상에서도 다양한 온라인 도구가 시간을 절약해 줍니다. 예를 들어 특정 날짜까지 남은 일수를 빠르게 확인하고 싶을 때는 D-Day 계산기 같은 웹 유틸리티를 활용하면 편리합니다.
실전 체크리스트와 테스트 방법
반응형 이미지 크기 설정을 마친 후에는 반드시 여러 환경에서 테스트해야 합니다. 아래 체크리스트를 활용하세요.
배포 전 확인 항목
- viewport 메타 태그가 HTML head에 포함되어 있는가
- 모든 img 태그에 max-width: 100%와 height: auto가 적용되는가
- img 태그에 width, height 속성이 명시되어 있는가 (CLS 방지)
- srcset/sizes를 사용해 기기별 최적 이미지를 제공하는가
- 이미지 파일 크기가 적절한가 (본문 이미지 기준 200KB 이하 권장)
- alt 속성이 모든 이미지에 적절히 작성되어 있는가
테스트 도구 활용
Chrome DevTools의 기기 에뮬레이션(F12 - Toggle Device Toolbar)을 사용하면 다양한 화면 크기를 시뮬레이션할 수 있습니다. 주요 확인 포인트는 375px(iPhone SE), 768px(iPad), 1024px(태블릿 가로), 1440px(데스크톱) 네 가지 너비입니다.
구글 PageSpeed Insights에서 Properly size images 항목을 확인하면 불필요하게 큰 이미지가 전송되고 있는지 진단할 수 있습니다. Lighthouse의 Performance 탭에서 CLS 점수도 함께 체크하세요.
반응형 이미지 크기 설정은 한 번 제대로 해두면 이후 모든 콘텐츠에 자동으로 적용됩니다. 오늘 할 일은 두 가지입니다. 첫째, 글로벌 CSS에 img { max-width: 100%; height: auto; }를 추가하세요. 둘째, 기존 콘텐츠 중 고정 크기 이미지가 있는지 확인하고 수정하세요. 이 두 단계만 실행해도 대부분의 반응형 이미지 문제가 해결됩니다.
