Erzsamatory Weblog


해상도에 따라서 이미지 동영상의 사이즈를 자동적으로 조절하는 방법 / 반응형 웹 기술


최근들어 반응형 웹에 대한 관심이 높아지고 있습니다. 특히 블로거들 사이에서 반응형 웹은 큰 이슈가 되고 있습니다. 스마트폰의 보급으로 모바일 환경에서의 블로그 방문이 급증했기 때문입니다. 이 글에서 소개할 것은 해상도에 따라서 자동으로 이미지 또는 동영상의 사이즈를 조절하는 방법입니다. 반응형 웹에서 가장 중요한 것은 해상도에 따른 시각적 요소의 크기 조절인데, 이 부분이 생각보다 까다로운 작업을 필요로 합니다. 저는 이 글을 통해서 반응형 웹에서의 시각적 요소에 대한 크기 조절에 관한 기본적인 틀을 제시하고자 합니다.


완벽한 반응형 웹이란?


반응형 웹은 말 그대로 상황에 따라 반응하는 웹을 말합니다. 여기에서 상황이라는 것은 접속 기기에 따라 해상도가 바뀌는 것을 의미하는데, 기존의 웹에서는 해상도의 변화에 대해서 능동적으로 대처하지 못 했습니다. 이러한 문제점이 핫 이슈가 된 계기는 바로 스마트폰의 대중화입니다. 스마트폰이 널리 사용되면서 모바일 환경에서 인터넷 서핑을 하는 것이 일반화되었습니다. 이에 따라 웹 관리자는 데스크탑 컴퓨터에서의 환경과 모바일에서의 환경 모두에서 정상적으로 홈페이지가 출력될 수 있도록 해야만 했습니다. 모바일 환경을 지원하기 위한 개발에 있어서 초기에는 모바일 버전과 데스크탑 PC 버전을 따로 개발하는 방법을 사용하였으나, 이제는 한 페이지에서 모바일과 데스크탑 PC를 모두 지원하는 방법을 주로 사용합니다. 이와 같은 방법이 바로 반응형 웹 기술입니다.

그렇다면 완벽한 반응형 웹이란 무엇일까요? 본인은 다음과 같이 정의하고자 합니다.
어떠한 해상도에서도 모든 시각적 요소의 크기가 비율에 따라 자동적으로 조절되는 웹

웹에서 사용되는 시각적 요소에는 이미지 동영상 표 등이 있습니다. 이러한 것들은 대부분 인터넷 홈페이지에서 비율이 아닌 고정된 크기로 사용되고 있습니다. 이러한 이유 때문에 반응형 웹 기술이 적용되어 있지 않은 기존의 홈페이지를 반응형 웹으로 업그레이드할 때에는 반드시 매우 번거로운 작업을 해야만 합니다. 모든 시각적 요소의 속성들을 바꾸어야 하는 이유에서입니다. 그런데 간편하게 반응형 웹으로 업그레이드할 수 있는 방법은 없을까요? 아니다. 간편하게 업그레이드할 수 있는 방법은 분명히 있습니다. 바로 이 글에서 간편하게 반응형 웹으로 업그레이드할 수 있는 방법 중 하나를 소개할 것입니다.


반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제


HTML에서는 시각적 요소의 크기를 다음과 같은 방법으로 정의할 수 있다. 티스토리나 텍스트큐브와 같은 블로그 관리 프로그램에서는 <img> 태그에 자동으로 적당한 width 속성과 height 속성이 입력됩니다. 블로거가 직접 사이즈를 정하지 않는 경우에도 입력되는데, 바로 이것이 반응형 웹으로 전환할 때 가장 큰 문제점이 됩니다.

<!-- 고정된 크기 (픽셀 단위 사용) //-->
<img src="..." width="500" height="500" />
<div style="width:500px; height:500px;"></div>
<iframe src="..." width="500" height="500"></iframe>
 
<!-- 상대적인 크기 (백분율 단위 사용) //-->
<img src="..." width="100%" />
<div style="width:50%;"></div>


HTML에서 시각적 요소의 크기를 결정할 때에는 고정된 단위 또는 상대적인 단위를 사용할 수 있습니다. 고정된 단위의 대표적인 것은 픽셀(px)이며 상대적인 단위의 대표적인 것은 백분율(%)입니다. 모든 반응형 웹에서는 픽셀이 아닌 백분율을 사용합니다. 왜냐하면 해상도에 따라서 각각의 요소의 크기가 유동적으로 바뀌어야 하기 때문입니다. 반응형 웹에서 HTML의 모든 시각적 요소들은 모바일에서나 데스크탑 PC에서나 클라이언트의 웹브라우저 화면에 맞게 그 크기가 조절되어야 합니다.

그런데 모든 요소에 대해서 백분율을 사용할 수 있을까요? 분명히 아니라고 할 수 있습니다. 왜냐하면 이미지와 동영상은 자체적으로 최대로 늘릴 수 있는 크기가 정해져 있기 때문이다. 이 크기를 벗어나서 픽셀 수를 계속해서 늘리면 이미지와 동영상의 화면이 깨져 잘 보이지 않는 현상이 발생할 것입니다. 그렇다면 이 문제는 어떻게 해결할 수 있을까요? 이 글에서 설명하고자 하는 것이 바로 이 문제에 대한 것입니다. 아래에 설명되어 있는 내용을 잘 숙지한다면 해결 방법을 찾을 수 있을 것입니다.

완벽한 반응형 웹을 위한 시각적 요소의 크기 자동 조절 방법


위에서 언급했듯이 이미지와 동영상은 최대 해상도가 정해져 있습니다. 따라서 반응형 웹에서 이러한 것들을 출력할 때에는 최대 해상도를 미리 정한 후, 정해진 수치 이상으로 해상도가 벗어나지 않도록 해야 합니다. 언뜻 보면 매우 어려운 작업 같지만 의외로 이 작업은 매우 쉽습니다. 여러분은 CSS의 max-width 속성과 max-height 속성에 대해서 알고 있습니까? 이 속성은 최대 넓이와 최대 높이를 정의하는 CSS 속성입니다. 이 속성을 이용하면 이미지와 동영상의 최대 해상도를 미리 정해 놓을 수 있습니다. 그리고 이 속성이 지정된 객체에 width 속성과 height 속성 모두를 100%로 정의하면 해상도에 따라 자동으로 크기가 조절되는 시각적 요소가 완성됩니다. 다음 예시를 보면 쉽게 이해할 수 있을 것입니다.

<img src="..." style="max-width:1024px; max-height:800px; width:100%; height:100%;" />


그러나 매번 이렇게 이미지에 스타일을 지정하는 것은 너무나 번거로운 작업입니다. 또한 티스토리나 텍스트큐브와 같은 블로그 관리 프로그램에서는 <img>와 같은 시각적 요소에 자동으로 width 속성과 height 속성이 추가되어 블로거가 위와 같은 방법을 사용할 수 없습니다. 그렇다면 아래의 방법을 사용하기 바랍니다. 만약 번거롭지 않고 티스토리나 텍스트큐브가 아니라면, 위의 방법을 사용해도 괜찮습니다.


자바스크립트를 이용한 시각적 요소의 크기 자동 조절 방법


이 글에서는 티스토리에서 기본적으로 지원하고 있는 jQuery를 이용하여 시각적 요소의 크기를 자동적으로 조절하는 방법에 대해서 알아볼 것입니다. 만약 현재 자신이 운영하고 있는 블로그에서 jQuery를 사용할 수 없는 경우에는 다음 글을 참고하시기 바랍니다. 블로그에서 jQuery를 사용하는 방법에 자세하게 설명되어 있습니다. ㅡ 외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법

jQuery를 이용하면 웹 페이지 내에 있는 모든 이미지에 대해서 위에서 설명한 크기 자동 조절 속성을 추가할 수 있습니다. 위에서 설명했던 스타일 속성을 일일이 웹 페이지 내에 있는 모든 이미지에 적용시키는 것은 매우 번거로운 작업일 것입니다. 그리고 해당되는 이미지의 최대 이미지가 항상 픽셀로 정해져 있는 것은 아닙니다. 어떤 이미지는 800px이 최대 크기일 것이고, 또 어떤 이미지는 500px이 최대 크기일 것입니다. 조금이나마 이러한 불편함을 덜 수 있도록 이 글에서는 자바스크립트를 이용하여 일괄적으로 웹 페이지 내의 모든 이미지에 대해서 스타일 속성을 추가하는 방법에 대해서 소개할 것입니다.

먼저 아래의 자바스크립트 소스코드를 보도록 하겠습니다.

$(function() {
    $("#post_content img, .resizablebox").each(function() {
        var oImgWidth = $(this).width();
        var oImgHeight = $(this).height();
        $(this).css({
            'max-width':oImgWidth+'px',
            'max-height':oImgHeight+'px',
            'width':'100%',
            'height':'100%'
        });
    });
});


위의 소스코드는 #post_content 내의 모든 이미지 그리고 resizable 클래스가 적용된 모든 객체에 대해서 최대 해상도를 지정하고 기본 해상도를 100% x 100%로 맞추는 역할을 합니다. 자바스크립트의 작동 순서를 보자면, 이미지에 이미 정해져 있던 또는 이미지의 본래 크기를 구한 후 이것을 최대로 확대 가능한 해상도로 정의하고, 반응형 웹에서는 해상도에 따라 크기가 변동되어야 하므로 기본 해상도를 100% x 100% 로 정의하는 순서로 작동합니다. 이렇게 하면 웹페이지에 삽입되어 있는 모든 이미지와 시각적 요소에 대해서 그 크기를 반응형으로 만들 수 있습니다.

지금까지 설명했던 모든 것들을 적용한 실제 HTML 소스코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <title>Responsive Web</title>
    <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
    <style>
        body {
            padding:0px;
            margin:0px;
        }
    </style>
    <script>
        $(function() {
            $("#post_content img, .resizablebox").each(function() {
                var oImgWidth = $(this).width();
                var oImgHeight = $(this).height();
                $(this).css({
                    'max-width':oImgWidth+'px',
                    'max-height':oImgHeight+'px',
                    'width':'100%',
                    'height':'100%'
                });
            });
        });
    </script>
</head>
<body>
    <div id="post_content">
        <img src="http://www.erzsamatory.net/attach/1/3349047834.jpg" />
        <br /><br />
        <img src="http://www.erzsamatory.net/attach/1/2751001801.jpg" />
    </div>
</body>
</html>


위의 소스코드를 그대로 복사하여 HTML 파일에 붙여넣기 한 후 웹브라우저에서 실행하면 놀라운 결과가 나타날 것입니다. 해상도에 따라서 이미지의 크기가 자동으로 변하면서도, 이미지 본래의 크기보다 해상도가 커지는 경우에는 이미지 크기가 고정되는 것을 확인할 수 있을 것입니다. 이것이 바로 반응형 웹에서 이미지의 크기를 조절하는 방법입니다. 자바스크립트가 아닌 CSS만을 사용한다면 이와 같이 매우 효율적인 이미지 관리를 할 수 없을 것입니다. 이미지 크기를 해상도에 맞게 제대로 조절하는 것이야말로 완벽한 반응형 웹을 만들 때의 필수적인 기술이라고 할 수 있겠습니다.


마무리


예시 페이지: http://goo.gl/tgLS4Y

※ 위 링크의 페이지에서는 이 글에서 소개한 HTML이 적용된 페이지를 직접 경험해볼 수 있습니다.

지금까지 반응형 웹에서 이미지 또는 동영상의 크기를 어떻게 조절하는가에 대해서 알아보았습니다. 반응형 웹이라고 하는 것은 최근에 이슈가 되고 있기 때문에 아직까지는 많은 예시가 마련되어 있지 않습니다. 반응형 웹이 큰 이슈인 티스토리 블로그를 보더라도 단 두 개의 반응형 웹 스킨이 있을 뿐입니다. 하지만 언젠가는 반응형 웹이 아닌 홈페이지는 존재하지 않을 정도로 반응형 웹은 인터넷에서의 당연한 기술이 될 것입니다. 스마트폰이 대중화 되면서 스마트폰을 이용하여 인터넷 서핑을 하는 사람들이 급속도로 늘어나고 있기 때문입니다. 블로그 또는 사이트를 관리하고 있는 저희는 미래를 준비해야만 합니다.
http://www.erzsamatory.net/trackback/86

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 김유찬
    김유찬
    2014/08/09 16:01
    안녕하세요 ^^ 정말 유익한 정보입니다. 한가지 부탁드려도 될까요? 제이쿼리 없이 아래 를 CSS 로 바꿔서 사용할수 있는지요?
    "max-width:1024px; max-height:800px; width:100%; height:100%;"
    제가 CSS 를 할줄몰라서, 도와주셨으면 합니다... 감사합니다.
    • Walter E.
      Walter E.
      2014/08/09 18:09
      제이쿼리 없이 CSS를 사용한다는 것이 <style> 태그를 사용하는 것을 의미하는건가요?

      그렇다면 아래와 같이 할 수 있습니다.

      모든 이미지에 대해서 해상도에 맞게 사이즈를 조절하기 위해서는 아래와 같은 내용을 <style> 에 넣으면 됩니다.

      .resizable, img {
      max-width: 1024px;
      max-height: 800px;
      width: 100% !important;
      height: 100% !important;
      }

      중간에 !important 가 들어가 있는 이유는 티스토리나 텍스트큐브에서 이미지를 넣는 경우에 <img> 태그에 width와 height 속성이 입력되기 때문입니다.

      !important 옵션을 사용하면 다른 곳에서 입력된 스타일들을 모두 무시할 수 있습니다.
    • Walter E.
      Walter E.
      2014/08/09 18:09
      하지만 위의 방법을 사용하면 이미지 본래의 크기를 확인할 수 없기 때문에 제대로 이미지 크기 조정이 되지 않을 수 있습니다. 따라서 완벽한 반응형 웹을 만들 때에는 CSS와 자바스크립트를 약간 섞어서 만드는 것이 필요합니다.
  2. 김재희
    김재희
    2014/09/30 13:00
    안녕하세요!! 반응형웹이라는것이 무엇인지 이 글을 읽으니까 이해가 가는 것 같아요!! 감사합니다.제가 요즘 만들고 있는 웹페이지에 적용해보고 싶은데 질문 하나 드려도 될까요....?

    저가 만들고 있는 웹페이지는 가로 패럴랙스 스크롤링이 되는 사이트에요.
    자세하세 말씀드리자면.
    큰 백그라운드jpg에 2행3열?로 6분할이 되어 있는 페이지로

    구조화 하자면 아래처럼
    A B C
    D E F

    알파벳 하나가 모니터에 꽉차게 보여지고 있는 상태이고
    버튼을 누르게 되면 가로로 스크롤링이 되면서
    D에서 E로 혹은 E에서 F로 가로 스크롤링이 됩니다.
    그리고
    D에있는 버튼을 누르면 A로 새로로 이동 되면서 A페이지가 보여지고 같은방식으로
    E와 B, F와 C도 세로로 올라가면서 페이지가 보여지는 방식입니다.

    그래서 예를들면
    A페이지가 제 노트북에서는 딱맞게 보여지게 디자인을 했는데
    다른 데스크탑으로 보게되면 위아래 좌우가 짤려 보이더라구요.

    이럴경우도 반응형웹으로 해서 코딩이 가능한가요?
    제 컴에서 보이는 것처럼 다른 컴퓨터에서도 같은 사이즈로 볼수 있게 하고 싶어요.

    포스팅 예시 보니까 큰 사진통째로 반응형웹이 되던데
    저같은 경우는 전체 백그라운드의 일부분이 반응형웹이 되어야 하는 경우이거든요..

    말을 잘 조리있게 못해서 이해가 잘 되셨나 모르겟어요...ㅠㅠ
    졸업 프로젝트로 디자인과 학생이 코딩까지 하려다 보니까
    어려움이 많아요..

    제 질문에 답을 얻을 수 있을까요??
    감사합니다..
    그리고 포스팅 잘 보고 갑니다!!
    • Walter E.
      Walter E.
      2014/09/30 19:42
      제가 전문가가 아니라서 자세히는 잘 모르겠습니다. ^^;;

      꼭 백그라운드 이미지로 이용을 해야 하는지요?

      위의 예시와 같이 이미지를 삽입하면 해결할 수 있지 않을까요?
  3. 이용현
    이용현
    2015/01/23 15:29
    아..정말 몇일동안 이것 때문에 몇일간 웹검색하면서 소스구하고 다녔는데 안됬거든요. 근데 이걸로 하니까 드디어 되네요. 일단 한줄기의 빛이 보여서 너무 기분이 좋습니다. 일단 감사드리구요. 근데 개인적인 작업중에 한가지 문제점이 생겨서 조언좀 구하고자 싶어서 댓글 남깁니다,.

    일단 Walter E. 님께서 올려주신 예시 소스로는 100%잘되구요 비율맞게 리사이징이 잘됩니다. 그런데 DIV 의 POSITION 속성이 absolute 이 div 는 리사이징이 되긴 되는데 비율을 무시한채 리사이징이 됩니다.

    말로써 설명이 잘 안되는것같아서 이미지 주소 같이 첨부합니다.


    http://yongbal88.cafe24.com/er.jpg


    저것만 해결되면 정말 좋을텐데.. 조언부탁드릴게요 감사합니다!
    • Walter E.
      Walter E.
      2015/01/24 05:35
      position이 absolute로 설정되어 있는 경우에는 다른 객체와의 상관성이 없고 window를 하나의 영역으로 인식하기 때문에 이와 같은 문제가 발생하는 것 같습니다.

      일단 position이 absolute일 때에도 윈도우 크기에 따른 리사이징이 가능한 소스코드를 만들어보았습니다. 이 소스코드의 원리는 absolute로 설정된 객체에 대해서만 사이즈 축소 비율을 구한 후 스타일에 적용하는 원리입니다. max-width와 max-height가 설정되어 있기 때문에 윈도우 크기에 따라 항상 이미지의 width, height 속성은 비율에 따라 변동됩니다.

      새롭게 만들어진 예제는 다음 링크에서 확인 가능합니다.
      http://goo.gl/tDqZ0r

      전체 소스코드는 아래 링크에서 확인할 수 있습니다.
      http://goo.gl/tbbhbP

      간단한 테스트는 하였으나 특별한 이상은 발견하지 못 했습니다.
      완벽할 수는 없겠지만, 기본적인 틀은 맞을 겁니다. ^^
      이 소스코드의 기본 원리는 이 블로그에서도 사용하고 있답니다!
  4. 이용현
    이용현
    2015/01/26 12:03
    정말 정말 정말로 감사드립니다!!! 이번에 알려주신 소스와 현재 블로그에 게시되있는 소스 활용해서 제가 원하던 리사이징이 말그대로
    완.벽.하.게 이루어졌습니다. 정말 감사드려요. 정말 한 2주동안 소스 구하러 다니느라 지쳐있었거든요. 이고 블로그에와서 이 게시물 차근차근히 읽어보고 처음으로 리사이징 할 수있는 빛을 보고 또 완벽한 리사이징 까지 할 수있는 소스를 얻어가서 너너무너무 감사드립니다. 정말 감사드립니다. 거짓말 아니고 진심으로 감사드립니다...^^ 제가 작업중에 좀 아리송한 점이 있으면 가끔씩 여쭤봐도 되죠?^^ 싫다고하지말아주세요 ㅎㅎ

    정말 감사합니다!!!
    즐겨찾기로 자주자주오고 있습니다 감사합니다^^
    좀 늦은감이 있긴하지만 새해복 많이 받으세요^^
    • Walter E.
      Walter E.
      2015/01/26 12:31
      즐겨찾기까지 해주셨다니 정말 감사합니다 ^^
      제 블로그에 있는 글들이 다른 곳에서도 찾을 수 있는 글이 많고, 저는 그냥 제 의견을 보태서 글을 쓰는 것에 불과한데 이렇게 좋게 봐주시니 너무 감사합니다~

      궁금한 점 있으시면 언제든지 문의해주세요.
      제가 알고 있는 부분에 대해서는 답변드리도록 하겠습니다. ^^

      새해 복 많이 받으세요.
  5. 정다은
    정다은
    2015/04/02 19:13
    제가 찾던 정보네요 감사합니다!!
    근데 li 안의 이미지에는 적용이 안되는데 왜그런지 혹시 이유를 알수 있을까요??
    • Walter E.
      Walter E.
      2015/04/02 19:44
      #post_content 내부에 li가 있는 것인지요?
      만약 만약 그렇다면 #post_content img 으로 지정을 했기 때문에 정상적으로 동작하는 것이 맞습니다. 원인을 찾아보겠습니다.
  6. ah
    ah
    2015/05/19 03:05
    저는 ir방식으로 작업중인데요.. css로 백그라운드로 이미지를 넣어 백그라운드 포지션을 변경해 홈페이지를 만들고 있습니다. 그렇다보니 이미지가 css에 백그라운드로 지정되어있어서 위에서 보여주신 자바스크립트코드가 적용이 되지 않습니다. 이런경우에는 어떻게 반응형 웹으로 만들수 있는지 궁금합니다.
    • Walter Erzsa
      Walter Erzsa
      2015/05/20 05:53
      백그라운드 이미지를 통한 반응형 웹 만들기는 아직 시도해보지 않았습니다. 한 번 시도해보고 말씀드리도록 하겠습니다. ^^
    • ah
      ah
      2015/05/21 01:56
      감사합니다
  7. 비밀방문자
    비밀방문자
    2017/01/21 20:17
    관리자만 볼 수 있는 댓글입니다.
    • Walter Erzsa
      Walter Erzsa
      2017/01/27 00:03
      동영상이 유튜브와 같은 형태로 나타나는 것이라면 <embed> 태그를 <img> 태그와 동일하게 적용하면 위의 방법을 그대로 사용할 수 있습니다.

      위 글에서는 <img> 태그와 함께 resizablebox 클래스를 가진 객체도 처리하기 때문에 다음과 같이 적용해보시면 될 것 같습니다.

      <embed class="resizablebox" ... > </embed>