NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


Mobile first strategy for CSS designer.

본문 건너 뛰기

마지막으로 블로그에 글을 포스팅 했던 날짜가 작년 여름이네요. 오늘 주제는 CSS 디자이너를 위한 모바일 퍼스트 전략 인데요. 작년에 썼던 'HTML5 & Responsive Web Design' 포스팅과 관련이 있습니다. 모바일 퍼스트 전략이라는 것은 IT 기업들 입에 자주 오르내리는 단어 인데요. 이 개념은 CSS 개발에도 적용할 수 있습니다. 말 그대로 모바일 우선 전략입니다. 2013년 말 또는 2014년 초에는 모바일 인터넷 사용자가 데스크탑 인터넷 사용자를 앞지를 것이라는 전망이 우리를 두근거리게 만들고 있습니다. CSS 디자이너를 위한 모바일 퍼스트 전략이란 무엇인지 알아보죠.

CSS3 Media Queries

여러분이 CSS3를 배울 기회가 있었다면 다음과 같은 코드 @media (조건문) {실행문} 으로 무엇을 할 수 있는지 알 수 있습니다. CSS3 미디어 쿼리를 이용하면 모바일 환경의 뷰와 데스크탑 환경의 뷰를 원하는 해상도에 따라 완벽하게 분기 처리할 수 있습니다. 단 하나의 HTML 문서만가지고 말입니다.

@media (max-width:799px) { ... CSS for Mobile ... }  /* 이 코드는 799px 이하의 해상도에서 해석 됩니다 */ 
@media (min-width:800px) { ... CSS for Desktop ... } /* 이 코드는 800px 이상의 해상도에서 해석 됩니다 */

현존하는 최신 버전의 브라우저들은 CSS3 미디어 쿼리를 잘 지원하기 때문에 문제가 없지만 이 코드는 두 가지 문제가 있습니다. 첫째, 미디어 쿼리를 지원하지 않는 모바일 브라우저에 적용되지 않습니다. 둘째, 미디어 쿼리를 지원하지 않는 데스크탑 브라우저에 적용되지 않습니다. 두 가지 문제를 하나씩 풀어 보도록 하지요.

Mobile First CSS

미디어 쿼리를 지원하지 않는 모바일 브라우저에 대응하기 위해 저는 다음과 같이 코드를 작성 했습니다. 모바일에 대응하기 위한 코드를 미디어 쿼리 밖에 작성한 것입니다.

... CSS for Mobile ...
@media (min-width:800px) { ... CSS for Desktop ... }

이것으로 첫 번째 문제를 해결 했습니다. 미디어 쿼리를 지원하지 않는 모바일 브라우저는 미디어 쿼리 조건문 밖에 있는 코드를 해석합니다. 미디어 쿼리 구문은 지원하지 않으므로 해석하지 않습니다. 미디어 쿼리를 지원하는 모바일 브라우저는 해상도가 800px이 넘지 않는 이상 미디어 쿼리 구문을 해석하지 않습니다. 조건에 맞지 않으니까요. 미디어 쿼리 지원 여부에 관계 없이 799px 이하의 해상도를 지닌 모든 브라우저는 모바일용 CSS 코드만 해석합니다. 간단 명료하죠? 한편 미디어 쿼리를 지원하지 않는 IE 6~8 브라우저에서는 어떻게 보일까요?

IE 6, 7, 8 Compatibility

미디어 쿼리를 지원하지 않는 데스크탑 브라우저(IE 6~8)는 모바일 퍼스트 CSS 코드만 해석하기 때문에 모바일 뷰로 보일 것입니다. 낡은 데스크탑 브라우저가 미디어 쿼리문을 바르게 해석하도록 하기 위해 저는 다음과 같이 CSS3 미디어 쿼리 활성 스크립트를 HTML 문서에 추가 했습니다. 

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

IE 조건부 주석 'if lt IE 9 = if less than IE 9 = IE 9 미만이면 해석'을 사용하여 IE 9 보다 버전이 낮은 브라우저에서만 이 스크립트를 해석하게 됩니다. 표준계열 브라우저는 이 부분을 주석으로 처리하죠. 이제 IE 6~8 브라우저는 미디어 쿼리 구문을 올바르게 해석할 수 있게 됐습니다. 간단 명료하죠?

Tip 1: Performance Improvement

미디어 쿼리를 이용하여 데스크탑용 배경 이미지(background-image)와 모바일용 배경 이미지를 다르게 설정해 보세요. 미디어 쿼리를 이용하여 해상도별로 배경 이미지를 다르게 설정하면 다른 해상도에 필요한 배경 이미지는 서버로 전송 요청하지 않습니다. 즉, 특정 해상도에서 필요로하는 이미지만 요청(http request)하므로 미디어 쿼리를 통해 네트워크 자원을 아낄 수 있습니다. 웹 브라우저 개발자 도구의 네트워크(Network) 탭을 통해서 직접 확인해 보세요.

Tip 2: Override Mobile by Desktop CSS

모바일 퍼스트 CSS 코드는 낮은 해상도의 모바일용 브라우저에서만 해석하는 것이 아니라 높은 해상도의 데스크탑 브라우저에서도 동시에 해석하게 됩니다. 따라서 미디어 쿼리 조건문 안에서는 데스크탑용 CSS 코드가 모바일용 CSS 코드보다 더 높은 우선순위를 가질 수 있도록 덮어쓰기 하는 작업이 필요합니다. 손이 많이 갈것 같지만 모바일용 코드는 비교적 단순하기 때문에 그리 어렵지는 않을 것입니다.

References

분류: CSS,웹 기획,웹 디자인,웹 표준 | 2012년 1월 18일, 0:13 | 정찬명 | 댓글: 23개 |
트랙백URI - http://naradesign.net/wp/2012/01/18/1742/trackback/

23개의 댓글이 있습니다.

  1. 임미연 댓글:

    오랜만에 글을 올리셧네요 ^^
    잘보고 갑니다`~~

  2. 황규연 댓글:

    원소스를 이용한 비슷한 프로젝트를 진행하다보니 어려운 점이 많은것 같습니다.
    가장 큰 장애요소가 콘텐츠에 대한 제대로 된 계획이 없다면 어렵다는것을 뼈저리게 느꼈습니다.
    저도 이쪽에 관심이 많은데 찬명님께서도 관심이 많으신것 같네요..~

  3. 정찬명 댓글:

    @황규연
    콘텐츠 영역 스타일이 매우 단순해야하는데 사실 쉽지는 않은 일이죠. ^^

  4. Toby 댓글:

    respond.js를 검토하셨던 것 같은데 css3-mediaqueries.js가 그 보다 나았는지요? ^^

  5. 정찬명 댓글:

    @Toby
    두 파일 사이에 어떤 차이가 있는지는 파악하지 못했구요. css3-mediaqueries.js 는 CDN을 지원해서 개인적인 용도로 사용하기 더 좋네요.

  6. 초짜 댓글:

    아~ 매우 유익한 정보들 항상 잘보고 있습니다. 감사드립니다..^___^

  7. 정찬명 댓글:

    @Toby
    css3-mediaqueries.js (15.6KB)
    respond.min.js (4KB)

    respond.min.js 개발자가 이렇게 작성했군요.

    Alternatives to this script
    This isn’t the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

    If you’re looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I’ve found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)

    요약하면…
    respond.min.js가 파일 크기나 성능 면에서 훨씬 좋다. 테스트 결과 css3-mediaqueries.js는 복잡한 반응형 디자인에서 현저하게 느린것을 확인했다. 그러나 mediaqueries.js 파일이 더 많은 미디어 쿼리 피처를 지원한다.

  8. 초보 댓글:

    굳이 ie6~8에도 대응하려 노력할 필요가 있을까요?
    보통 모바일홈과 pc홈을 따로 두니 모바일쪽에서 굳이 ie6~8까지 신경쓰는건
    불필요해보이는데

  9. 정찬명 댓글:

    @초보
    이 포스트는 별도의 모바일 홈을 구축하는 대신 하나의 소스로 모든 디바이스를 커버하는 방법을 다루고 있습니다. 이런 반응형 웹 구현시 IE 6~8에 대응하지 않았을 때 어떤 상황이 발생하는지 정확히 알고 말씀하신 것인지 궁금합니다. 모바일 퍼스트 개념을 적용하면 IE 6~8 브라우저는 모바일 뷰를 표시하기 때문에 이 문제를 해결하려고 대응하는 것입니다.

  10. 고나 댓글:

    IE때문에 절망하다가,
    찬명님 덕에 웃고 갑니다!
    우호호! 나이스!

  11. […] 사용법만 알아도 반응형 웹 디자인은 게임 끝입니다. 게임 끝 아닙니다. 모바일 퍼스트 CSS 전략에 대해 더 자세히 […]

  12. 오후네시반 댓글:

    안녕하세요^^ 항상 좋은 정보 많이 배우고 갑니다.

    “모바일 퍼스트 반응형 웹디자인” 아직 실무에서 적용될 사례는 없지만 그날을 기다리며 연습중인데요, 다름이 아니라 ie8이하 브라우져에서 css 미디어쿼리 해석하기 위한 ‘CSS3 미디어 쿼리 활성 스크립트’ 이부분에 대해서 몇가지 궁금한 점이 있어서요.
    여러가지 방법으로 테스트 해보니 안되는 경우가 몇가지 있어서 여쭙니다.

    1. 스크립트 부분을 css link보다 앞줄에 작성할 경우,
    2,html 문서 안에 작성한 경우,
    3.CSS 문서 안에 @import 된 CSS안에 작성된 경우
    위 3가지 경우에 미디어 쿼리 활성 스크립트가 작동하지 않더군요.

    그리고 로컬에서는 원래 안되는건가요?^^

  13. 오후네시반 댓글:

    죄송합니다. 위에 2번에 몇글자 빠졌네요;;
    2. html 문서안에 로 미디어쿼리 작성한 경우

  14. 누님 댓글:

    3번의 경우 아래와 같이 노트가 있네요~.

    Note: Doesn’t work on @import’ed stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the and elements.

    http://code.google.com/p/css3-mediaqueries-js/

  15. 오후네시반 댓글:

    style 이 태그로 인식해서 작성이 안되네요 ^^;

    2,html 문서 안에 <style>에 작성한 경우,

  16. 오후네시반 댓글:

    @누님

    그러네요^^ @import에선 작동하지 않는다.
    근데 괄호안에 글을 보니 성능상 좋지 않다는 내용인거 같은데 @import 시키는 방법이 별로 안좋은 방법인가요?

  17. 정찬명 댓글:

    @오후네시반
    저는 다양한 방법으로 테스트 해보지 않아서 잘 모르겠어요. ^^ 참고로 @import는 낡은 IE 브라우저에서 체감 성능을 떨어뜨리는 것으로 알려져 있습니다.

  18. 이순재 댓글:

    제가 완전히 초보인데 반응형 웹을 보다가 거슬러 왓는데 벌써 많이 배우고 가는거 같아요.싸이트 가끔 들어와서 눈팅하고 가겠습니다. ^ ㅁ ^/

  19. 익명 댓글:

    너무 잘 정리된 글 잘 읽었습니다.

    미디어쿼리를 이용한 선택적 이미지 다운로딩에 관련해서 의미있는 실험이 있어서 링크를 남깁니다. ^^

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

    그리고 제가 정리한 블로그 글.. ^^;
    http://blog.gnuboard.org/2012/04/media-query-image-downloads/

  20. 정찬명 댓글:

    @익명
    정리해 주신 글 유익하게 잘 봤습니다. ^^

  21. 익명 댓글:

    워드프레스에서 view source 보는게 불가능한가요?

  22. 정찬명 댓글:

    @익명
    아니요. 전혀 그렇지 않아요. 자바스크립트를 통해서 콘텍스트 메뉴(마우스 오른쪽 클릭)를 막아놓을 수는 있지만 그런 경우라도 다른 방법으로 얼마든지 소스를 볼 수 있어요.

  23. 익명 댓글:

    님때문에 도움 많이 받습니다 감사합니다 ^^

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님