반응형 이미지 크기 조절 기준 및 조절 방법

  아임웹 연구소 소장 해준  |  2017 . 09 . 11

시작에 앞서
아임웹은 반응형 사이트 제작 도구입니다. 즉, 우리가 디자인 모드에서 추가한 각종 요소들이 모두 반응형으로 제작됩니다. 그런데 이 반응형이라는 게 브라우저, 디스플레이 별로 모두 다르게 나타나다 보니, 의도한 대로 크기로 편집하는 것이 참 어렵습니다.

특히 이미지가 그렇습니다. 많은 사용자분들이 이미지 크기 조절에 애를 먹고 계신 것으로 알고 있습니다. 그런 분들을 위해 오늘 꿀팁에서는 '이미지 크기 변경에 따른 변화'와, '크기 조절 방법'에 대해 설명해드리고자 합니다.

결론적으로, 이미지는 픽셀(px) 단위로 조절하는 것보다 '비율'로 조절하는 것이 좋습니다.

기본적으로 반응형 사이트의 이미지는 비율에 맞춰 자동 조절되기 때문입니다.



1. 이미지 크기 변경 시 변화 보기

1) 이미지 비율이 같은 경우
아래 모든 이미지들은 4:3 비율로 편집되었습니다. 아래 이미지들은 크기도 같지만, 굳이 크기는 같지 않아도 됩니다. 최소한 비율이 같다면 아래 그림처럼 깔끔한 나열이 가능합니다.



2) 이미지 비율이 서로 다른 경우
이미지 위젯 3개를 추가하고, 2개는 4:3 비율의 이미지를, 마지막 하나는 3:4 비율의 이미지를 삽입했습니다. 그러자 마지막 이미지만 길게 나타난 것을 확인할 수 있습니다.



3) '높이'로 이미지 비율에 맞춰 크기 조절하기
이미지의 높이(px)를 변경해, 이미지 크기를 비율대로 조절할 수 있습니다. 이미지를 비율대로 조절하려면, '이미지 채우기' 기능이 체크 해제된 상태여야 합니다. *단, 이미지 높이를 키움으로써, 가로 길이가 이미지 표시 영역 이상으로 커질 경우 가로 부분이 잘릴 수 있습니다.



4) '이미지 채우기'로 영역에 맞춰 꽉 채우기
'이미지 채우기'를 체크하면, 처음에는 이미지의 정중앙을 기준으로, 가로폭에 맞춰 이미지 비율대로 표시됩니다. '이미지 채우기' 기능은 이미지가 서로 다른 크기를 가지고 있더라도, 각 이미지 표시 영역에 꽉 채워 보여주는 장점이 있습니다. 이미지를 줄이거나 늘려도 항상 이미지 표시 영역 내에서 꽉 차게 조절되기 때문입니다.

그러나 주의할 점은 아무래도 영역 내에서 꽉 차게 표시되기 때문에, 아래 오른쪽 끝 사진처럼 이미지 비율에 따라서는 위아래가 잘릴 수도 있습니다.





2. 이미지 크기 조절하는 방법
위 내용을 읽어보시면서, 이제 이미지는 높이를 변경해 조절할 수 있다는 것을 알게 되셨을 것입니다. 그럼 이제 이미지 위젯의 크기를 조절하는 2가지 방법에 대해 알아보겠습니다.



첫 번째, 마우스로 드래그해 조절하기
첫 번째 방법은 마우스를 이용하는 것입니다. 아래 그림처럼 이미지의 하단 끄트머리를 마우스로 드래그하여 조절할 수 있습니다.



두 번째, 이미지 설정에서 조절하기
두 번째는 [이미지 설정]에서 픽셀 단위로 조절하는 것입니다. 아무래도 픽셀 단위로 조절할 수 있는 만큼 매우 세밀하게 조절할 수 있습니다.

이미지 위젯에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 클릭하면 보조 메뉴가 나타납니다. 여기서 [이미지 설정]을 클릭해주세요.


[이미지 설정] 창이 켜지면, 위 그림처럼 높이 값을 조절할 수 있습니다. 높이를 픽셀(px) 단위로 조절하면, 이미지가 크고 작아지는 걸 확인 가능합니다.



다시 한 번. 꼭 기억하세요.
이미지 높이는 사용자가 직접 입력했다 하더라도, 그 크기는 절대적인 값이 아닙니다. 단지 비율을 맞추기 위한 최소한의 기준이 되는 값입니다.

즉, 브라우저 크기에 따라 다시 자동 조절됩니다. 이미지는 현재 보고 계신 화면에서 정확한 사이즈를 변경하기 위함이 아닌, '비율'을 맞추기 위함이란 걸 기억해주세요. 이미지가 어느 정도 해상도가 높고, 비율만 맞으면, 어떤 브라우저에서든 의도하신 크기로 자동조절됩니다.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, 네이버 페이, KCP 공식파트너입니다.