반응형 콘텐츠에 이미지 삽입하기, 이번에는 마스터 해보자!

안녕하세요. 인시퀀스 UIX Group의 Markup and UI Developer 김정연입니다.

얼마 전 반응형 사이트 프로젝트에 마크업 PA로 투입되어 이벤트 배너가 포함된 서브 페이지를 작업하게 되었습니다. 작업을 진행하면서 유동적인 요소에 이미지를 삽입하는 방법에 대해 고민을 하게 되었고, 공부의 필요성을 느끼게 되어 이번 포스팅 주제로 선정하게 되었습니다~👏👏👏

반응형 배너 작업은 처음이라..

유동적인 화면에 따라 너비가 변경되는 배너 작업은 처음이었지만, 저는 쉽게 구현할 수 있을 것이라 자신했습니다! 텍스트는 마크업으로 작성하고 배경 이미지만 추출하여 삽입 후, width: 100%; height: auto;로 지정하면 될 것이라 쉽게 생각을 했던 것이었죠.

하지만 작업을 끝내고 브라우저에서 작업 결과를 확인하는데, 제 예상과는 다른 결과물에 당황할 수 밖에 없었습니다. 디바이스 넓이에 따라 이미지의 넓이와 높이가 변하면서 하단에 여백이 생기는 것이었는데요.. 대체 왜 이런 결과가 나온 걸까요? 이번 기회에 확실하게 알고 넘어가야겠다고 생각했습니다! ୧(•̀⌄•́ )૭

반응형 이미지를 삽입해야 하는 이유

먼저 반응형 이미지를 삽입해야 하는 이유부터 알아보겠습니다. 이미지는 웹 페이지의 용량 중 가장 큰 비중을 차지하는데요! 브라우저에서 콘텐츠를 렌더링(Rendering)할 때 불필요한 큰 이미지를 다운로드 하거나 똑같은 이미지를 여러 크기로 다운로드 하는 것은 웹 페이지의 성능을 떨어뜨리는 가장 큰 원인이 됩니다.

또한, 과거와 달리 현재는 스마트폰, 태블릿 등과 같은 다양한 기기에서 웹 페이지를 이용할 수 있게 되어 대부분의 웹 사이트가 사용자의 원활한 접근을 위해 반응형 웹을 지원하고 있습니다.

하지만 마크업 개발자들에게 이렇게 다양한 기기에 대응하며 이미지를 삽입하는 것은 보통 힘든 일이 아니었죠..🤨

반응형 콘텐츠에 이미지를 삽입하는 방법

이렇게 반응형 이미지를 삽입해야 되는 이유는 충분히 이해했으니, 유동적인 콘텐츠에 이미지를 삽입하는 방법과 다양한 속성들에 대해 알아보도록 하겠습니다!

1. object-fit

object-fit 속성은 <img>,<video> 와 같은 콘텐츠의 크기를 어떤 방법으로 조절하여 요소에 맞출 것인지 지정할 수 있습니다. object-fit: cover를 이용하면 이미지의 가로, 세로 비율은 그대로 유지하면서 컨테이너에 가득 차도록 설정할 수 있습니다.

img {width: 100%; height: 200px; object-fit: cover;}

위 예시에서는 가로 사이즈 값을 100%로 지정하여 컨테이너 크기가 화면 크기에 따라 유동적으로 변하게 됩니다. 하지만 object-fit: cover를 지정했기 때문에 이미지의 비율이 늘어나거나 줄어들지 않고, 컨테이너 전체가 이미지로 채워지며 비율이 맞지 않는 경우에는 데스크톱 예시와 같이 이미지 일부가 잘려 나가는 것을 확인할 수 있습니다.

object-fit 속성

cover : 이미지의 종횡비를 유지한 채 컨테이너 영역 내 여백이 없도록 이미지를 확대합니다. 종횡비가 일치하지 않는 경우 이미지 일부가 잘릴 수 있습니다.
```
img {width: 100%; height: 200px; object-fit: cover;}
```
예시 결과
contain : 이미지의 종횡비를 유지한 채 크기를 조절하여 컨테이너 영역 내에 전체 이미지가 보이도록 조절합니다. 종횡비가 일치하지 않을 경우 컨테이너 내 여백이 생길 수 있습니다.
```
img {width: 100%; height: 200px; object-fit: contain;}
```
예시 결과
fill : object-fit 속성의 기본 값으로, 종횡비와 상관 없이 컨테이너의 크기에 맞춰 이미지를 가득 채웁니다. 이미지의 가로 세로 비율은 유지되지 않습니다.
```
img {width: 100%; height: 200px; object-fit: fill;}
```
예시 결과
none : 이미지 크기를 조절하지 않고, 본래의 이미지 사이즈를 유지합니다.
```
img {width: 100%; height: 200px; object-fit: none;}
```
예시 결과
scale-down : none과 contain 중 이미지의 크기가 더 작은 값을 자동으로 선택합니다.
```
img {width: 100%; height: 200px; object-fit: scale-down;}
```
예시 결과

장점👍

object-fit 속성 하나로 간단하게 이미지 사이즈 크기를 설정할 수 있습니다.

2. background-size

CSS background-size 속성은 background-image로 이미지를 삽입하였을 때 사용할 수 있는 방법으로, 아래 코드와 같이 작성 시 object-fit: cover와 동일한 결과를 얻어낼 수 있습니다.

img {background-image: url("/images/bg01.png"); background-size: cover;}

background-size 속성

cover : 이미지의 종횡비를 유지하면서 컨테이너에 맞게 사이즈가 조절되며, 종횡비가 일치하지 않는 경우에는 이미지 일부가 잘려 컨테이너를 가득 채우게 됩니다.
```
img {background-image: url("/images/bg01.png"); background-size: cover;}
```
예시 결과
contain : 이미지의 종횡비를 유지하면서 컨테이너에 맞게 사이즈가 조절되며, 컨테이너와 이미지의 비율이 맞지 않는 경우 이미지가 잘리지 않을 때까지만 채웁니다.
```
img {background-image: url("/images/bg01.png"); background-size: contain;}
```
예시 결과
직접 입력 : 입력한 값에 맞춰 사이즈를 조절하며 하나만 입력 시 가로 값만 지정, 쉼표 없이 두 개 입력 시 가로 값과 세로 값을 동시에 설정할 수 있습니다. 지정한 값이 해상도와 맞지 않을 경우 가로 세로 비율이 유지되지 않습니다.
```
img {background-image: url("/images/bg01.png"); background-size: 100% 250px;}
```
예시 결과

장점👍

<img>태그에서 사용할 수 없는 추가 효과 스타일을 적용할 때 유용합니다.

단점👎

배경 이미지로 삽입했을 때만 사용 가능합니다.
단순 꾸밈 요소로 삽입한 이미지가 아닌 사용자에게 이미지를 통해 어떠한 정보를 전달해야 되는 경우 웹 접근성, 검색 SEO 측면에서 시멘틱한 마크업이라고 볼 수 없습니다.
<img>태그에서 지원되는 이미지 복사, 저장 기능 및 drag and drop 기능이 적용되지 않습니다.

3. aspect-ratio

CSS aspect-ratio 속성은 요소를 특정 비율로 지정하여 일관된 비율로 확대, 축소할 수 있는 속성입니다. 하지만 이 속성 하나 만으로는 이미지의 종횡비를 유지할 수 없기 때문에 유동적인 화면에 대응하기 위해서는 아래 예시와 같이 object-fit: cover 속성과 함께 사용하여 반응형 콘텐츠에 종횡비를 유지하는 이미지를 삽입할 수 있습니다.

<!-- 16:9 비율 --> 
img { 
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9; 
} 

<!-- 1:1 비율 --> 
img { 
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1; 
}

장점👍

4:3, 1:1, 16:9, 1920:1280 과 같이 원하는 비율을 CSS 속성 하나로 간단하게 지정할 수 있습니다.

4. padding-top 속성을 이용한 응용 방법

마지막으로 소개해드릴 방법은 CSS padding-top 속성을 이용하여 유동적인 컨테이너에 고정 비율의 이미지를 삽입하는 방법입니다. padding-top 속성을 이용해서 어떻게 반응형 콘텐츠에 대응할 수 있다는 것일까요?🤔 저 또한 얼마 전 반응형 사이트 작업을 진행하면서 이런 방법이 있다는 것을 새롭게 알게 되었는데, 처음 접했을 때 이해가 잘 되지 않아서 여러 번 테스트를 했던 기억이 납니다..!

이 방법의 핵심은 부모 요소에 사용되는 width: n%; 값이 화면의 너비 값을 기준으로 유동적으로 변하게 되고, 자식 요소는 부모의 너비에 비례하여 백분율 단위로 높이를 가지게 되는 것입니다.

기본적으로 자식 요소의 높이는 내부 콘텐츠의 값과 수직 padding 값을 더한 합으로 height 값을 갖게 되는데요, 이러한 특성으로 인해 자식 요소에 원하는 비율만큼 padding-top 값을 %로 지정하게 되면 부모 요소를 기준으로 높이 값이 늘어나게 됩니다. 이는 곧, 유동적인 너비 변화에 따라 이미지의 비율을 고정으로 대응할 수 있다는 것이죠.

<!-- 1:2 비율 -->
<div class="parent-container">
  <div class="child child1"></div>
</div>

<!-- 4:3 비율 -->
<div class="parent-container">
  <div class="child child2"></div>
</div>

<!-- 16:9 비율 -->
<div class="parent-container">
  <div class="child child3"></div>
</div>

<!-- 1.5:1 비율 -->
<div class="parent-container">
  <div class="child child4"></div>
</div>

.parent-container {width: 100%;}
.child {background-image: url("/images/bg01.png"); background-size: cover; background-position: center center;}
.child1 {padding-top: 200%;}
.child2 {padding-top: 75%;}
.child3 {padding-top: 56.25%;}
.child4 {padding-top: 66.66%;}

위 예시 이미지는 background-size: cover 속성으로 이미지를 컨테이너에 가득 채운 후, padding-top에 값을 지정하여 나타낸 결과로 background-position 속성을 사용하여 이미지를 컨테이너의 정 가운데에 위치하도록 설정 한 것입니다.

장점👍

가변되는 요소에 종횡비를 유지하는 이미지 & 동영상을 삽입할 수 있습니다.

가로 너비에 따라 동영상 너비가 유기적으로 변하는 예시

단점👎

반드시 부모 요소가 있어야 사용할 수 있는 방법입니다.

마치며

웹 사이트에서 매우 중요한 요소인 이미지를 반응형 콘텐츠에 삽입하는 방법에 대해 알아보았는데요! 포스팅을 작성하고 나니 반응형 콘텐츠에 이미지를 삽입하는 것은 그 누구보다 자신 있게 할 수 있을 것 같습니다.😉 반응형 웹 사이트 제작 경험이 부족한 초보 마크업 개발자분들은 저와 같은 고민을 하거나 어려움이 있으셨을 텐데, 이 글을 읽고 반응형 웹 작업 시 조금이나마 도움이 되셨으면 좋겠습니다!

감사합니다.😊

참고 사이트

김정연 Markup and UI Developer UIX Group

안녕하세요. 인시퀀스 Markup and UI Developer 김정연입니다. 다양한 경험을 통하여 매일 조금씩 성장하기 위해 고군분투 하고 있습니다.