6. 반응형 이미지 > 퍼블리싱강좌

퍼블리싱강좌

본 게시판은 강좌를 연재하는 회원님들을 위한 전용 게시판입니다.
강좌를 연재하시려는 경우 미리 관리자에게 알려 주십시오.
알리지 않고 등록되는 글은 팁 게시판 등으로 이동됩니다.

6. 반응형 이미지 정보

반응형웹 6. 반응형 이미지

본문

목차

  1. 유동형 이미지
  2. 유동형 비디오
    1. Fitvids.js
    2. 관련자료
  3. 반응형 이미지
    1. 모바일 퍼스트 접근방법
    2. 선택적 이미지 전송
    3. 외부 서비스
  4. 이미지 다운로드 테스트
  5. 새로운 반응형 이미지 (표준)
    1. 반응형 이미지 그룹
    2. 구현들
  6. 반응형 비 텍스트 요소들
    1. 반응형 맵
    2. 반응형 광고
    3. 반응형 슬라이더
  7. 참고문헌/자료

유동형 이미지

반응형 웹을 제안한 Ethan Marcotte (이하 EM)가, 유동형 그리드 (fluid grids)글과 함께 2009년에 제안했던 기법으로, 화면의 폭보다 큰 이미지를 화면폭에 맞춰주도록 max-width:100%로 주는 것을 뜻합니다.

img {
     max-width: 100%;
}

뿐만아니라, 대부분의 비디오 태그에도 max-width 를 적용하는 것으로 대부분의 문제는 해결됩니다.

img,
embed,
object,
video {
    max-width: 100%;
}

물론 기대를 저버리지 않는 IE 구버전은 max-width를 지원하지 않습니다. 한가지 방법은, 해당 브라우져에서는 width 자체를 100%으로 만드는 방법도 있습니다.

img {
     width: 100%;
}

하지만 더 큰 문제는, 큰 이미지가 축소될때 몇몇 OS/브라우져가 제대로 작업을 하지 못하는 경우입니다. (IE 6 과 Windows FF 3 이전버전)

놀랍게도, IE 구버전의 경우, AlphaImageLoader 를 사용하면 이 문제가 해결된다고 합니다. IE7에서 이 방법을 사용하지 않았을때의 이미지사용했을때의 이미지를 보면 차이를 알 수 있습니다. EM이 사용한 스크립트는 여기서 다운로드 할 수 있습니다.

출처: Fluid Images by EM - http://www.alistapart.com/articles/fluid-images

Chris Coyier의 ‘유연한 이미지 (flexible images)’는 max-width와 더불어, height를 auto로 잡아주어서 가로 세로 비율을 ‘강제로’ 유지하는 것도 필요하다고 합니다. (출처: 링크) 또한 -ms-interpolation-mode 를 이용해서 위와 같은 문제를 해결할 수도 있다고 합니다.

img {
   max-width: 100%;

   // just in case, to force correct aspet ratio */
   height: auto !important;
}
img { 
   -ms-interpolation-mode: bicubic; 
}

하지만, EM의 댓글에서 보면, 위 -ms-interpolation-mode: bicubic이 작동은 하지만, 너무 느리다고 지적하고 있습니다.

유동형 비디오

위 유동형 이미지 글에서 다뤘듯이, 비디오도 간단히 max-width:100% 로 처리한다고 했지만, 몇몇 경우에는 간단히 처리되지 않을 수 있습니다. 구체적인 문제점으로 가로/세로 비율이 맞지 않거나 비디오 오브젝트의 종류에 따라서 달리 처리해야 합니다.

Fitvids.js

Css-tricks.com의 Chris Coyier와 Paravel 이 제작한 Fitvids.js 는 유동형/반응형 비디오를 처리하기 위한 간단한 jQuery 플러그인 입니다. 사용방법은 다음과 같습니다. (출처: github/fitvids.js)




이러한 코드가 적용되면, 해당 요소 (이경우는 #thing-with-videos)를 둘러싸는 div.fluid-width-video-wrapper 가 생성되고 필요한 CSS가 적용됩니다. 현재 처리되는 비디오 소스로는, youtube, vimeo, blip.tv, viddler, kickstarter 라고 합니다.

  1. Creating Intrinsic Ratios for Video: 비디오의 가로세로 비율을 유지하기 위한 기법들
  2. CSS: Elastic Videos
  3. Create fluid width videos: Chris Coyier 글
  4. Rundown of handling flexible media: 유연한 이미지 이외에 비디오/오디오 등에 대한 설명 (Chris Coyier)
  5. This Is Responsive - Resources - Images: Brad Frost의 This Is Responsive: Resources 중 이미지 부분

반응형 이미지

그렇다면 유동형 이미지와 반응형 이미지의 차이점은 무엇일까요? 즉 유동형 이미지만으로 해결되지 않는 문제점은 무엇일까요? 대표적인 문제점으로, 데스크탑에서 사용하는 화일크기가 큰 이미지를, 모바일에서 단순히 이미지 가로/세로만 줄인다는 것입니다.

이 문제점을 해결하기 위한 합리적인 방법은, 데스크탑용과 모바일용 이미지를 선별적으로 제공/사용하는 것일것입니다. 반응형 이미지는, 이러한 선별적 이미지 제공/사용을 처리하기 위한 기법들을 뜻합니다. (참고로, 본 강좌에서는, ‘반응형 이미지’ 가 ‘유동형 이미지’를 포함하는 개념/기법으로 사용합니다.)

다음은 이전에 포스팅한 제 블로그 글을 발췌했습니다.

반응형 이미지의 선택적 화일 사용은 기본적으로 데스크탑용 이미지 화일과 모바일 기기용 (여러크기의) 이미지 화일들을 미리 준비해두어야 합니다. 이렇게 준비된 기기별 이미지를 전송하는 접근 방법은, 모바일용 이미지를 기본으로 보내는 방법 (모바일 퍼스트)과 기기에 따라서 선별적으로 보내는 방법으로 나눌 수 있습니다.

모바일 퍼스트 접근방법

기본적으로 모바일용 작은 이미지는 기본적으로 로딩을 하고, 데스크탑 환경에서는 큰 이미지 화일을 별도로 ‘더’ 다운 받는 방법입니다.

모바일 퍼스트 접근방법 1

출처: filamemt group - Responsive Images Experimenting with Context Aware Image Sizing

.htaccess와 별도의 js (responsiveimgs.js) 를 이용하여, 화면폭이 480px보다 클때 큰 이미지 화일을 다운받는 방법입니다. 사용방법은 다음과 같습니다.


<img src="images/test.png?full=images/test-full.png">

이를 사용하기 위해서는 mod_rewrite가 허용된 서버에서 다음과 같은 .htaccess를 설정해야 합니다.

# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Scott Jehl, Filament Group, Inc
# Dual licensed under the MIT or GPL Version 2 licenses.
# //Start Responsive Images
RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif|webp) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)rwd-router/(.*)$ $1$2
# //End Responsive Images

단점은, IE8 미만에서는 작동하지 않고 기본 (작은) 그림만 보여주는 것이고, 스크린 경계치를 하나 (480px 기본이고, 옵션을 주어서 다른 경계치를 사용할 수 있습니다.).

모바일 퍼스트 접근방법 2

출처: Responsive Images Using CSS3

방법1과는 좀 다른 접근 방법으로, css3의 media-query와 data 필드, attr()함수를 이용하여 스크린 크기에 따라 선택적으로 큰 이미지 화일로 교체하는 방법입니다.

<img src="image.png" data-src-600px="image-600px.png">
@media (min-device-width:600px) {
 img[data-src-600px] {
   content: attr(data-src-600px, url);
 }
}

위 1번 방법과 비교하면, js가 불필요하다는 장점이 있습니다.

선택적 이미지 전송

모바일 퍼스트와는 달리, 서버 쪽에서 대상 스크린에 선택적으로 이미지를 보내는 접근방법으로, 대상 스크린의 크기를 취득하여 저장하는 구체적인 기법이 필요합니다. User agent를 이용한 방법도 가능하겠고, 아래와 같이 쿠키를 이용한 방법도 가능할 것 같습니다.

특히 user agent를 사용하는 방법은, 다음 강인 서버측 접근방법 (RESS)에서 더 자세히 다루겠습니다.

브라우져 쿠키를 이용한 선택적 이미지 화일 제공 기법

링크: Responsive Images using Cookies

웹페이지에서는 스크린 크기를 쿠키에 저장하고

document.cookie = "device_dimensions=" + screen.width + "x" + screen.height;

서버쪽에서 그 쿠기값을 이용하여 선택적으로 이미지 화일을 보냅니다. 이렇게 저장된 쿠키값을 이용하여 적절한 이미지화일을 전송하게 됩니다. (완전한 코드는 위 링크를 참조하세요)



<img src="images/?test.png">

와 같이 사용하면, 화면폭이 작은 경우 (이 경우 800px), test.png 대신, test-low.png 를 전송하게 됩니다.

이러한 방법의 장점은, 모바일 퍼스트와는 달리, 한 이미지만 전송한다는 점입니다. 단점으로는, 쿠키를 사용해야 한다는 점입니다.

쿠키를 이용하는 방법으로 Adaptive Image 도 있습니다.

외부 서비스

대표적으로 Sencha.io 가 있습니다.

sencha의 서비스를 사용하게 되면, 자동으로 각 기기마다 최적으로 크기/품질이 조정된 이미지를 제공하는 서비스입니다.

이미지 다운로드 테스트

비슷한 고민에서 시작된, 여러 브라우저에서 display:none 을 이용하여 선택적으로 다운로딩 할 수 있는지의 실험이 있습니다.

원글: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ 

제 블로그: http://blog.gnuboard.org/2012/04/media-query-image-downloads/ 

결론적으로, background-image 의 부모 태그에 display:none 을 적용하는 경우 (실험의 test # 3), 거의 모든 (모바일) 웹 브라우져에서 해당 백그라운드 이미지를 다운로드 하지 않는다고 합니다.

#test3 div { background-image:url('images/test3.png'); width:200px; height:75px; } @media all and (max-width: 600px) { #test3 { display:none; } }

물론, 미디어쿼리로 각 기기별로 완전히 분리된 조건(실험의 test # 5)으로 다운로드 할 수도 있습니다.

@media all and (min-width: 601px) { #test5 { background-image:url('images/test5-desktop.png'); width:200px; height:75px; } } @media all and (max-width: 600px) { #test5 { background-image:url('images/test5-mobile.png'); width:200px; height:75px; } }

지만 이렇게 되면, CSS3 미디어쿼리를 사용하지 못하는 경우, 백그라운드 이미지가 아예 사용되지 않는 문제점이 있습니다.

새로운 반응형 이미지 (표준)

이와 같이 별도의 기법으로 처리하지 말고, HTML 표준 (picture과 srcset)으로 넣으려는 노력이 있습니다.

반응형 이미지 그룹

  1. 반응형 이미지 W3그룹
  2. Picture Element 제안서
  3. HTML Responsive Images Extension 제안서 

picture 요소의 사용방법 예는 다음과 같습니다.


 
 
 <img src="fallback.jpg" alt="">

예에서 보듯이, 미디어 쿼리가 source 속성으로 들어가서 해당 조건에 맞는 경우에 srcset으로 설정된 이미지 화일을 사용합니다. 여기서 사용된 srcset은 기존의 img 요소에도 적용될 수 있도록 제안되었습니다.

<img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, med.jpg 1x, med-hd.jpg 2x ">

즉, 스크린 폭이 640px보다 작을때는 small.jpg, 그렇지 않을때는 med.jpg를 소스로 사용하고, 또한 고해상도 (2x)일때는 각각 small-hd.jpg와 med-hd.jpg를 사용하도록 설정할 수 있습니다.

또한, 화일 크기 뿐만아니라 (resolution switching), 화면 폭에 따라서 이미지의 어느 부분을 사용하는 가 (art direction) 도 고려되고 있습니다. 아래 그림에서 보듯이, 스크린의 크기에 따라서 이미지의 특정 부분만을 사용하도록 설정하는 접근방법입니다.

출처: responsiveimages.org use cases - http://responsiveimagescg.github.com/ri-usecases/

구현들

위와 같은 표준을 현재 기술로 (비슷하게) 구현한 기법도 존재합니다.

picturefill.js

fillament group의 Scott Jehl가 picturefill.js를 이용하여 제안하는 방법입니다.

data-picture 로 선언된 div에 대해서는 자동으로 ‘반응형 이미지’를 처리해줍니다.

jquery-picture.js

위 표준으로 제안된 태그들 (picture/source)을 직접 이용할 수 있도록 jQuery 플러그인이 제안되기도 했습니다.


   
   
   
   

$(function(){
   $('picture').picture();
});

반응형 비 텍스트 요소들

그밖에 이미지는 아니지만, 비 텍스트 요소들의 반응형 기법들에 대한 (완전하지 않은) 자료 링크들입니다. 특히 반응형 광고는, 나중에 시간이 되면 더 많은 자료 조사 후 별도의 강의로 만들려고 합니다.

반응형 맵

  1. http://bradfrostweb.com/blog/post/adaptive-maps/

반응형 광고

  1. Responsive Advertising
  2. Where Does Advertising Fit In A Responsive World?
  3. Adaptive Web-Design & Advertising
  4. Link Dump on Responsive Ads

반응형 슬라이더

  1. http://jasonweaver.name/lab/conditionalslideshow/
  2. http://responsive-slides.viljamis.com/
  3. http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins 자료모음

참고문헌/자료

  1. Ethan Marcotte, Fluid Iimages, unstoppablerobotninja.com, 2009
  2. Chris Coyier, Rundown of Handling Flexible Media, css-tricks.com, 2012
  3. Fitvids.js 
  4. 전진, 반응형 이미지, 그누보드 배우기, 2012
  5. Tim Kadlec, Media Query & Asset Downloading Results, 2012
  6. 전진, 미디어 쿼리와 이미지 다운로딩, 그누보드 배우기, 2012
  7. Responsive Images Community Group
  8. picturefill.js
  9. jQuery Picture
스폰서링크

댓글 전체

(다른 강좌글도 마찬가지지만) 코드 하이라이트 파싱 문제로
1. /*  로 시작하는 주석은 사라져버리기에, 대신 //로 수정하였고 (심지어 css 안에서도)
2. <img 태그를 실제 이미지로 처리하려고 하여, <img  대신 &lt;img 를 사용했는데, 일부는 그대로 노출 되는 경우가 있습니다.
정확한 코드는 원 출처나, 강좌글 원본 (구글문서) 를 참조하세요.
지운아빠님.
위 코드 하이라이트 이슈와 함께, 링크를 자동으로 _blank로 바꾸는 것을, 특히 목차부분에는 적용하지 않도록 할 수 있을까요?
picturefill.js 하고 jquery-picture.js 중 어느 것을 사용하실것 같아요?
나중의 표준을 생각하면 jquery-picture.js 를 써야 할것 같긴 한데..
jquery 가 필요없는 picturefill.js가 더 가볍기는 할것 같네요.. ^^
워낙 글을 쉽게 쓰는 편이 아니라서.. ^^;
간단하게 요약하면,
1. max-width:100% 로 화면 폭보다 커지지 않게하기
2. 여러크기의 이미지를 선별적으로 사용하는 법
3. 새로운 표준이 제안되고, jquery로 구현되어 있슴
정도일까요? ^^
아 요약글이 정말 쿨하고 좋네요~
이제껏 모바일에서 1.의 경우를 사용을 햇는데요;;
아무래도 3.표준이 맞는거겟죵..?
배워야할게 엄청나네요..
앞으로도 좋은 강좌 부탁드려요~
감사합니다~ (__) 꾸뻑
아, 아직 표준이 된것은 아니니까, 사용자의 결정이 필요하겠죠?
2번하고 3번이 비슷한 접근 방법 (여러 이미지를 선택적으로 사용) 이니
적절히 선택하시면 될것 같네요. ^^
벌려놓은 일이 많아 이제야 대략적으로 훑어보고 있습니다.
아직 이해하긴 어려운 것 같고, HTML 표준 (picture과 srcset) 이 흥미롭네요. ^^
이번글은, 특히 잘 정리가 안된것 같아요..
양이 많아지길래 몇부분의 설명을 좀 줄였더니, 문맥도 잘 안맞고..
시간될때마다 구글문서 원본글을 좀 다듬어야 할까봐요.. -_-

그리고, (서버측) 반응형 이미지를 처리하기 위해서라도
반응형 에디터/업로더 가 꼭 필요할 것 같아요..
일단 모바일에서도 디자인도 안깨지고, 기능도 잘 작동해야 하겠죠? ^^:
그리고 위의 (서버측) 반응형 이미지를 하려면, 이미지를 등록하는 시점에서, 모바일용 파일들을 생성해줘야 할것 같고요..
아, write_update.skin.php에 (일종의) 썸네일 절차를 거치면 되겠군요..^^;;
역시 신화에 전진님 대단하십니다.

글로 대강 눈여겨 봤는데 많이 쓰일 예제가 많네요 ㅎ

익히려면 2~3번은 써먹어 봐야 될듯합니다 ㅎ
전진님글은 몇번식 보고 관련자료들 보는 재미가 정말 시간가는줄 모르겠어요..
영어에 까막눈인지라ㅜㅜㅜㅜ 좀 힘들긴하지만 신기한것들 참 많군요!
좋은 정보 두번 세번 감사합니다.
소견을 듣고 싶다고 해서 글 남깁니다.
이건 어디 까지나 제 개인 소견 입니다.

반응형을 적용 할려고 했으나 단순 이미지는 적용하기 쉬웠으나
이미지맵이나 복잡하게 구성된 이미지는 적용이 힘들다고 결론 내렸습니다.

몰론 방법이 있을 수 있으나 시간과 개발의 어려움이 발생했습니다.

그래서 단순하게 레이아웃 구성하는 곳에는 사용이 가능하다고 결론 내렸으며
모바일은 레이아웃 구성용도로 사용하여 개발 했으며
게시판은 스타일을 이용하여 모바일시 안보이게 pc일땐 보이게 이런식으로 하여
같은 소스를 사용하여 프로그램은 같이 사용했습니다.

게시판 이미지는 별도로 처리를 안해도 viewport 처리로 알맞게 자동으로 이미지가 resizing 되었습니다.
이런 방식으로 따로 개발 하지 않고 개발 비용을 줄였습니다.

그럼 주말 잘 보내세요. ^^
다른 종류의 반응형 웹 이미지 jq 플러그인입니다.
https://github.com/teleject/hisrc
다른 플러그인들이 미디어쿼리를 이용한다면, 이 플러그인인 인터넷속도와 디스플레이 해상도를 이용하여 보여줄 이미지를 결정한다네요.

<div class="hisrc">
        <img src="http://placehold.it/200x100.png" data-1x="http://placehold.it/400x200.png" data-2x="http://placehold.it/800x400.png">
</div>

$(".hisrc img").hisrc();

우선 모바일퍼스트로, 200x100 짜리 이미지를 로딩하고
(모바일) 인터넷 속도를 체크하여 일정정도 이상 (기본 300) 이면 1x 짜리를
그리고 해상도가 2x 이면 (예: 레티나) 2x 짜리를 로딩한다고 합니다.

아직 테스트 해보지는 않았지만, 속도를 기반으로 이미지를 선택하는 것은 좋은 아이디어 같습니다.
(실제 속도체크 코드는 https://github.com/adamdbradley/foresight.js 라네요)
또다른 종류의 반응형 웹 이미지 용 css 팩입니다.

이번것은 위 본문의 백악관 개 (^^;;) 그림으로 설명했던 art direction를 가능하게 하는 css 입니다.
한마디로 말하면 이미지가 너무 작아질때 이미지의 일부만 보이고 싶을때 특정 영역 (포칼포인트)을 중심으로 보여주는 기법입니다.

http://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution  (영어죄송 ^^)
사용방법은
<div class="focal-point right-3 up-3">
    <div><img src="guy.jpg" alt="guy"></div>
</div>
처럼 이미지를 감싸는 div를 두개 만들고, 맨 상위 div에 focal-point 클래스 선언과 함께,
그림에서 어느 부분을 중심으로 할지를 right-3 up-3 식으로 알려주는 것입니다.
설명그림: http://designshack.co.uk/wp-content/uploads/focalpoint-5.jpg
현재는 767px을 경계치로 사용하고 있어서 그 이하가 되면, 위에서 선택된 중심영역을 중심으로 이미지를 일부만 보여줍니다.
설명그림: http://designshack.co.uk/wp-content/uploads/focalpoint-7.jpg]

767px 아래로 내려갈때 이미지를 가리는 방법은

@media all and (max-width: 767px) {
 
    /* 4x3 Landscape Shape (Default) */
    .focal-point div {
        margin: -3em -4em;
    }
 
    /* Landscape up (Total 6em) */
    .up-3 div {
        margin-top:    -1.5em;
        margin-bottom: -4.5em;
    }
   
    .right-3 div {
        margin-left:  -6em;
        margin-right: -2em;
    }
}
와 같이 이미지를 감싸는 div의 마진을 기본 폰트크기를 단위로 해서 조정하는 방법을 사용합니다..
폰트크기를 기본으로 하였기에, 767 이하의 화면 폭의 경우
@media all and (max-width: 550px) {
  h1 {
    font-size: 23px;
  }
}
와 같은식으로 폰트 크기를 지정하면 이미지의 크롭비율도 같이 조정되는 방식입니다.

자바스크립트 없이 css로만 art direction 을 이룬 노력에 감탄을 했습니다. ^^;
srcset 이 드디어 구현되었다고 합니다.
http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ (영어)
요약하면, 사파리 (개발자 버전)에 (위에서 설명한) srcset 구현이 되었다는 것인데,
picture가 아닌, 애플에서 제안한 (약간은 편법같아 보이는 문법의) srcset을 (일부) 구현한것이긴 하지만,
그래도 반응형 이미지 사용에 '청신호'가 될것이라고 보고 있습니다.
(애플보다 먼저 반응형 이미지 표준을 제안했다가 w3c에게 물먹고, 대기업 애플의 표준만 받아들여진 상황에 가슴이 아플만한 사람이 평가를 그렇게 했네요. ^^;)
srcset이 구글 크롬 beta에도 적용되었다고 합니다.
http://blog.chromium.org/2014/02/chrome-34-responsive-images-and_9316.html
위의 사파리 (개발자버전)에 적용된 문법이 역시 적용되었다고 합니다.
아무래도 picture 태그보다는 img 태그안의 새로운 attribute인 srcset이 반응형 이미지로 자리잡을 것 같네요.. ^^;
혹시나 나중에라도 찾으실 분들을 위하여..
2015/07 현재,
picture는 크롬, 파폭, 오페라에서 지원되고 있고
srcset은 위 셋과 사파리에서 일부 지원되고 있습니다.

예제와 함께 적은 글. http://sir.co.kr/so_responsive/221
전체 281
퍼블리싱강좌 내용 검색

회원로그인

진행중 포인트경매

  1. 마르코☆ 의 명함제작 (feat: 스캐폴더님)

    참여6 회 시작18.02.21 16:04 종료18.02.24 16:04
  2. [해피정님 추천도서] PHP7 예비학교

    참여88 회 시작18.02.19 18:44 종료18.02.24 18:44

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT