JavaScript에서 간단하게 다음과 같이 탐지할 수가 있다.

if (document.body.scrollWidth > window.innerWidth) {
  // horizontal scrollbar is visible. 
}

이 시점은 가령 기존 데스크탑 전용 웹페이지를 반응형 디자인으로 구현하고자 할 때, 여러 breakpoints 중 하나의 후보가 될 수 있다. 하지만 미리 마련된 어떤 기준에 따라 나머지 적당한 breakpoints를 자동 탐지해 내는 것은 너무 복잡한 일이다.

결국, 나머진 그냥 눈대중?

웹에 접속하는 장비의 다양한 화면 크기와 점점 높아지는 pixel density에 맞춰서 상황에 따라 적당한 이미지를 전달해 주는 일은 어렵지만 당장 해결해야 할 시급한 문제였다.

이 문제를 적절히 대처하고자 여러 개발자들이 responsive images의 문제에 대응하는 많은 방법을 제시하고 있지만, 각각의 장단점을 고려하기 이전에 어차피 과도기적인 꼼수에 지나지 않는다는 문제를 공통으로 안고 있다.

그래서 이 문제를 해결할 장기적인 표준안을 도출해 내려고 Responsive Images Community Group에 모여서 지금까지 제시된 다양한 방법에 대한 서로의 의견을 교환하고 가장 이상적인 방법을 도출하고자 머리를 맞대고 있는 사이, 이 문제를 해결해 줄 또 하나의 방법으로 며칠 전 Apple에서 WHATWG list에 제시했던 img의 srcset attributes이, 외부에서 보면 갑작스러울 수도 있게, WHATWG 표준 draft에 바로 추가되는 일이 발생하였다. 그래서 그동안 머리를 맞대고 고민했던 많은 개발자들을 발끈하게 만들었고, 다수의 지지를 받으며 새로 도출해낸 <picture> element가 그냥 무시되었다는 점에서도 큰 허탈감을 표시하고 있다.

이런 사태는 개발자와 WHATWG 간의 원만한 소통 창구의 혼돈에서 비롯되었다는 얘기가 나오는데, 지금까지의 진행 상황은 Jeremy Keith씨가 올린 글에 자세히 나와 있다.

과연 이제 막 HTML draft에 추가된 srcset attribute이 앞으로도 그 자리를 지킬 수 있을지 모르는 일이고 또 몇 번의 수정안으로 대체되겠지만, 그 사용법을 보면 다음과 같다.

<h1><img alt="The Breakfast Combo"
         src="banner.jpeg"
         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1>

Responsive images를 위한 img element의 srcset attributes(이)란 제목의 글 마저 읽기 →

HTML5 Boilerpate가 탄생 1주년을 맞아 2.0으로 갱신되었다.

눈에 띄게 바뀐 점이라면 모든 스타일을 기본적으로 밋밋하게 밀어버리는 CSS의 불도저라고 볼 수도 있는 일반 CSS Reset 스타일시트를 버리고 normalize.css로 갈아탄 것. 브라우저별 공통분모는 건드리지 않고 차이를 보이는 놈들만 꼭 집어서 일관성 있게 바꿔준다.
다음 링크로 가면 예전 Reset CSS 스타일을 쓴 것과 새로운 nomalize 스타일을 입힌 후 바뀐 각 element의 차이점을 확인해 볼 수 있다. – HTML5 Boilerpate CSS 변화로 각 엘르먼트의 기본 스타일 차이점

또, Build Script에는 offline 앱을 위한 appcache manifest 파일 자동 생성 기능도 새로 추가되었는데, 빌드 스크립트를 쓰지 못할 상황이라면 사이트 주소만 입력해주면 자동으로 해당 사이트의 appcache 파일을 생성해주는 Cache Manifest Validator도 유용할 것이다. 이 사이트에선 Textmate Bundle도 함께 제공하고 있음.

그리고 이미 예상된 것이지만, 이제 기본적으로 IE6 사용자에겐 Chrome Frame 설치를 권고하게 된다.

더불어 Modernizr 2 안에 respond.js도 함께 추가되면서 요즘 새로 시작되는 웹 프로젝트에는 거의 필수가 되어버린 Responsive Web Design과 ‘Mobile First’ 디자인을 적용해 볼 수 있는 기본 밑바탕도 마련되었다.

스마트 폰 사용자가 증가하면서 덩달아 급격히 늘고 있는 모바일 브라우징으로 말미암아 다양한 화면 크기에 적절히 대처하려는 시도로 최근 주목받고 있는 웹 디자인 패턴이 Responsive Web Design이다.

CSS3 Media Queries를 써서 서로 다른 디바이스의 화면 크기에 맞춰 적당한 layout을 구현해서 최적화된 브라우징 경험을 제공하려는 것인데, 오래전부터 이곳 블로그도 모바일 기기만을 위한 링크를 따로 제공하고 있지만 별로 만족스럽지는 않았는데, 최근 올라온 CSS3 media queries를 사용한 웹 디자인 소개 글을 참고해서 “반응형 웹 디자인”을 구현해 보았다.

윗글에 설명된 내용 중 중요한 것 몇 가지를 간추리면, 우선 Internet Explorer 8 이하 버전에선 CSS3 media queries를 알아듣지 못하기 때문에 JavaScript의 도움이 필요하다. 대표적으로 아래 두 가지가 있다.

• Respond
• css3-mediaqueries-js

여러 media types와 더불어 min-width와 max-width의 media queries만 쓴다며 크기도 작고 실행속도도 빠른 Respond가 안성맞춤.

다음에 웹 페이지에 포함된 그림은 화면 크기에 맞게 그 크기도 줄어들고 늘어나야 하는데 다음과 같이 지정해준다.

img {
  max-width: 100%;
  height: auto;
}
.ie8 img {
  width: auto; /* for IE8 only */
}

Viewport 정의는 다음과 같이.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이미 viewport에 맞게 디자인하였다면 iOS의 Text 크기 자동 조절 기능은 필요 없을 것이다.

html {
  -webkit-text-size-adjust: 100%;
}

덤으로, jQuery plugin인 FitText를 쓰면 header와 같은 곳에 사용된 큼지막한 글자도 화면 크기에 맞게 자동으로 그 크기를 조절해줄 수 있다.

이젠 Responsive Web Design이 선택이 아닌 필수가 되면서, 작은 화면에 보일 ‘content’가 더 돋보이게 되는 순간이다.

기타 참고 사이트:

• Media Queries – Responsive Web Design을 적용한 사이트를 모아놓았다.
• 320 and up – A ‘tiny screen first’ boilerplate extension.
• tinySrc – 작은 화면의 휴대용 기기를 위한 그림 크기 자동 조절/전달 서비스.
• imgsizer.js – 작은 크기로 축소된 그림이 구 버전 IE(IE7 이하)에서도 흉하게 보이지 않도록 해주는 스크립트.
• Detect Mobile Browser – Open source mobile phone detection.