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

iPhone의 caching 한계값(25 Kbytes)을 넘는 치장 목적의 커다란 배경 그림은 필요 없겠지.

/* iPhone */
@media only screen and (max-device-width: 480px) {
  #page {background-image: none;}
}

정작, iPhone Simulator에서만 제대로 적용되는 것을 확인함. 😈
그나저나, CSS3의 Media Queries는 iPhone에 내장된 Safari 말고도, Opera Mobile v9 그리고 Opera Mini v4도 지원한다.
참고 – A List Apart: Articles: Return of the Mobile Style Sheet

어제 있었던 스티브 잡스씨의 MWSF 07 개막연설에서 보여준 iPhone의 데모 영상은, 휴대전화와 iPod 그리고 인터넷 통신 장비의 완벽한 조화로 이루어진 또 하나의 만능 개인 휴대 장비로서 많은 사용자들로부터 열광과 찬사를 받았지만, 이를 지켜본 웹 개발자들에게도 다른 시각의 가능성을 제시해 준 사건이었음이 분명하다.

그것은 지금까지 비교적 작은 크기의 휴대 장치 스크린과 느린 접속 속도에 초점이 맞추어졌던 WAP과 이동 통신용 웹 페이지의 정의를 다시 되돌아 보는 계기가 된 것이었다. 소개 시연에서 보여주었던 iPhone에서 실행되는 Safari의 웹 브라우징은 화면 크기의 제약에서 벗어난 새로운 시도로서, 160 ppi 해상도를 가진 320×480의 고해상도 화면 위에서, 손가락 끝에서 자유자재로 확대되고 축소되는 웹 페이지의 모습은 그야말로 진정한 One Web의 새로운 가능성을 일깨워준 것이었다.

지금까지의 Mobile Web 개발에 있어서 대세로 여겨져 왔던 CSS2의 handheld media type을 비롯한 여러가지 휴대 장치를 염두에 둔 기술들을 이용해서 독립된 또 하나의 웹 페이지의 필요성이 고려되고 있는 상황이, 기술과 장치의 발전과 더불어 실현된 상상력이 더해지면서 진정한 하나의 웹으로 다가갈 수 있다는 가능성을 보여주었다. 이것이 가져다 줄 미래의 mobile 웹 개발 방향에 미치는 파급 효과는 아직 예측할 수 없으나, 한 가지 변하지 않는 공통적인 필요 충분 조건은 바로 여태까지 강조되어 온 것으로 웹 표준에 맞춘 사이트일 것이다. 여기에 더해, 요즘 주목받고 있는 유연한 배치(elastic layout)도 큰 몫을 담당하리라고 본다.

그나저나, 한국에서의 진정한 Mobile Web 체험은 그야말로 아직 다른 나라 얘기이다. 🙁