반응형 웹사이트 이미지 사이즈 비율 맞추기

 

1. 반응형 웹사이트란?
2. 이미지 사이즈의 비율을 맞춰야 되는 이유
3. 몇 가지 방법
   • - 미디어 쿼리를 사용하기
   • - vh, vw 사용하기
   • - flex 속성과 calc() 함수 사용하기
   • - javascript(jqurey) resize 함수 사용하기
   • - css 속성 사용하기
4. 현업에서 사용하기

 반응형 웹사이트를 만들다 보면 이미지 사이즈의 비율을 맞추는 문제는 항상 발생합니다. 화면의 width가 resize 되며 이미지의 크기 또한 자연스럽게 변경되어야 합니다. 

반응형 웹사이트란?

 반응형 웹사이트란 하나의 웹사이트 주소로 다양한 기기에서 어려움 없이 사용 가능하도록 서비스를 제공하는 웹사이트 형식을 말합니다. 하나의 웹사이트를 다양한 비율과 크기의 기기에 최적화 되도록 제작한다면 별도의 애플리케이션 제공이 필요 없기 때문에 다양한 방면으로 만들어지고 있습니다. 우리가 지금 이용하고 있는 티스토리 블로그 또한 자동으로 모바일 사이즈에 적합하도록 이미지나 폰트 사이즈가 조절되는 반응형 웹사이트입니다.

이미지 사이즈의 비율을 맞춰야 되는 이유

 반응형 웹사이트는 다양한 기기에서 해당 주소에 접속할 수 있습니다. 때문에 웹사이트의 모든 부분은 최대한 다양한 상황에 일그러짐 없도록 사용자에게 제공되어야 합니다. 우리가 이미지 크기와 비율에 대하여 충분히 고려하지 않는다면 사용자는 특정 환경에서 부분적으로 잘리거나 일그러진 이미지를 보게 될 수 있습니다. 최악의 경우 pc 환경에 맞춰둔 이미지 사이즈가 모바일 화면에서 조절 되지 않아 웹사이트 자체를 어그러뜨릴수 있습니다.

몇 가지 방법

미디어 쿼리를 사용하기

See the Pen test by solip000 (@solip000) on CodePen.

미디어 쿼리를 사용하여 특정한 window 넓이에서 이미지(또는 div)의 크기를 조절하는 방식입니다. 원하는 window width의 분기 마다 @media (max-with:000px){}문법을 사용하여 이미지의 크기 및 비율을 조절할 수 있습니다. 미디어 쿼리는 max-width, min-width를 혼합하여 사용할 수 있어 다양하게 활용 가능합니다. max- width: 700px은 window가 700px 이하일 때, min-width: 700px은 700px 이상일 경우에 해당합니다.

단점

가장 쉽게 떠올릴 수 있는 방법이지만 가장 허점이 많은 방법이기도 합니다. 미디어 쿼리의 경우 딱 지정한 위치에서만 크기가 변경되기 때문에 px로 지정해둔 이미지의 사이즈가 부드럽게 변경되지 않습니다. 또한 미처 고려되지 않은 분기의 window 사이즈에서 화면을 보았을 때 화면이 일그러지는 다양한 문제를 가지고 있습니다.

vh, vw 사용하기

See the Pen vw사용하기 by solip000 (@solip000) on CodePen.

이미지의 width를 부모 태그가 아닌 window 전체의 너비에 비율을 맞추는 방법입니다. vw는 window width를 기준으로 두는 수치이고 wh는 window height를 기준으로 두는 단위입니다.

개인적인 경험으로 태블렛에 만 서비스를 제공하는 웹사이트를 만들 때 해당 방법을 매우 유용하게 사용했습니다. 태블릿의 경우 기기의 사이즈가 작아지거나 커지더라도 가로 세로 비율이 편차가 없기 때문에 vw와 vh을 혼합하여 사용할 수 있었습니다.

단점

 웹과 모바일 환경 양측 모두 서비스가 제공되는 웹사이트에서는 사용이 까다롭다는 단점이 있습니다. 다양한 기기에서 열람할 수 있는 사이트라는 것은 가로와 세로의 길이가 유동적이게 된다는 뜻과 동일합니다. 이러한 경우에는 vw나 vw 단위 처럼 웹사이트 크기 자체에 기반을 두는 단위를 사용하는 것은 이미지가 일그러질 위험도가 높습니다.

flex 속성과 calc() 함수 사용하기 

See the Pen flex by solip000 (@solip000) on CodePen.

calc() 함수는 css에서 자동 계산을 할 수 있게 해주는 속성입니다. 부모 태그의 사이즈를 기반으로 % 계산을 할 수 있고, 빼기, 더하기, 나누기, 곱하기의 계산이 가능합니다.

위 예시의 경우 전체 window 넓이에서 이미지들 사이의 여백을 빼고(20px) 남은 숫자를 셋으로 나눠 윈도우의 넓이가 변경되더라도 이미지가 자동으로 크기가 조절되도록 하였습니다. 

단점

등록되는 이미지의 비율이 모두 동일하다면 height 값을 지정해 주지 않더라도 문제없이 이미지 리스트가 정렬됩니다. 그러나 비율이 모두 다른 이미지가 사용된다면 높이 값이 들쭉날쭉 하여 문제가 발생합니다. height 값을 지정하여 높이 갚을 일정하게 변경하더라도 윈도우 사이즈의 변화에 따라 미디어쿼리를 사용하여 일일이 다양한 너비에서의 height 값을 조절해 줘야 하는 문제가 발생합니다.

javascript(jqurey) resize 함수 사용하기

See the Pen Untitled by solip000 (@solip000) on CodePen.

자바스크립트를 사용하여 window 사이즈가 리사이즈 될 때마다 height값을 수시로 변경해 주는 방법입니다. 동일한 방법으로 width 값도 변경할 수 있습니다. if 문을 사용하여 모바일과 pc 각각 다른 비율을 적용하는 것도 가능합니다. 예문에서 0.665로 설정한 수치는 네이버 비율 계산기를 통해 가로 700 대비 세로 466의 비율을 계산하여 넣은 것입니다. 계산 값은 6.65로 나오지만 함수에는 소수점 한자리를 당겨 0.665로 넣어야 원하는 비율로 계산됩니다.

단점

이 방법의 경우 컴퓨터가 js 파일까지 읽어주어야 하는 단점이 있습니다. 각 파일의 무게가 무게가 무거울수록 함수가 작동되는 데 딜레이가 걸리게 됩니다. 특히 js 파일은 html, css 파일을 읽고 가장 나중에 읽히게 되기 때문에 인터넷 속도가 느리거나 resize 함수에 많은 조건을 달아놓을수록 딜레이나 오류가 생길 수 있습니다.

css 속성 사용하기

See the Pen aspact-ratio by solip000 (@solip000) on CodePen.

css 속성, aspact-ratio를 사용한 방법입니다. js로 리사이즈 함수를 만들 때와 동일하게 네이버 비율 계산기를 통해 원하는 비율 값을 알아내면 됩니다. js 파일까지 불러올 것 없이 css에서 바로 적용되기 때문에 딜레이가 되는 문제도 없습니다. 반응형 모바일에서 이미지 비율이 변경하고 싶다면 미디어 쿼리를 활용하여 변경 가능합니다. 

단점?

과거에는 인터넷 익스플로러에서 지원이 되지 않는 속성이었습니다. 스러나 인터넷 익스플로러가 사라진 이후, 지금에서는 대부분의 브라우저에서 적용되기 때문에 접근성 걱정 없이 사용 가능합니다.

현업에서 사용하기

웹 퍼블리셔로서 현업에서 이런저런 시도를 해본 바 상황에 따라 적절 한 방법들이 있는 것 같습니다. 여러가지를 혼합해 사용하는 경우도 종종 있고 어떨 때는 어느 것도 맞지 않아 새로운 시도를 해봐야 하는 상황이 오기도 합니다.

그러나 대체로 calc와 resize 함수,  aspact-ratio를 적절히 혼합하는 것으로 대부분의 문제를 해결할 수 있었습니다.