VibeOn: Responsive Design

정말 오래간만이네요.

구글 코리아로 자리를 옮기고 폭풍과 같은 프로젝트에 밀려 떠다니다보니, 반년이 후딱 가버렸네요. 종종 포스팅하려고 글감을 찜해놓고 써야지했다가 막상 쓰려고 하면, 이미 흘러가버린 주제가 되어버려서... 글쓰기가 참 쉽지 않네요. 각설하구요...

Responsive Design이라는 컨셉도 막떠오르는 핫한 키워드는 아닙니다. 하지만, 많이 또 제대로 알고 계시는 분도 많지 않은 것 같아서 한 번 정리해보려 합니다.

Image from "Responsive web design and web analytic"

Responsive Design에 대한 사전적인 설명은 이미 위키에도 잘 정리되어 있습니다. 다양한 정의가 있지만 간단히 말하자면 "하나의 페이지만 만들되, 다양한 디바이스에서 잘 보이도록 하겠다"는 것입니다. (Responsive Web Design이라고 쓰고, RWD라고 줄여서 말하기도 합니다만... 개인적으로는 그냥 Responsive Design이 더 좋습니다. 대상이 Web이냐 아니냐가 별로 중요한게 아니니까요...)

별로 특별한 컨셉은 아닙니다. 이러한 시도는 이미 Mobile Web Design에서 하고 있었던 것입니다. 근데 이게 CSS3의 Media Query를 만나면서 봇물이 터지듯이 유명세를 타고 있는 것이죠. Mashable은 "2013년이 Responsive Web Design의 해가 될 것이다"라고 언급하기도 했고, 2013년의 디자인 키워드 20에 첫번째로 들기도 했습니다.

HTML5와 CSS3는 정말 많은 걸 바꿔놓았습니다. 약간의 코딩 능력만 있다면 JQuery를 살짝 더해서 이전에는 많은 코드로 해결해야했던 걸 단순화시켜주거나 Flash와 같은 저작툴로 해결했던 걸 쉽게 해결해주고 있습니다. Responsive Design은 Media Query에 전적으로 의존하고 있는데요, Media Query는 사용자가 사용하고 있는 디바이스가 무엇인가에 따라서 적용하는 스타일시트를 변경해주는 역할을 합니다. Media Query가 워낙 영특해서 사용자의 디바이스가 뭔지 확인하는 건 아니구요, 디바이스가 가진 디스플레이의 가로 세로 사이즈를 확인해서 조건에 맞으면 스타일 시트를 변경하는 역할을 합니다. 예를 들자면 아래와 같습니다. (CSS tricks에서 빌려옴)

@media screen and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

위를 해석하면, "브라우저 내의 창 가로너비가 520px보다 크고 699px보다 작으면 아래의 CSS를 실행한다"입니다. 특정 Class나 ID의 스타일을 정의할 수 있기 때문에, Float만 잘 사용한다면 브라우저 사이즈에 따라서 요소들을 다르게 배치할 수 있습니다. 구글의 예를 본다면 아래와 같습니다. 브라우저 가로 너비를 조금씩 작게 줄여보세요. 이미지의 사이즈가 변하거나 (혹은 사라지거나) 레이아웃이 변경되는 것을 알 수 있습니다.

Media Query를 사용할 때는 각 디바이스가 가지고 있는 디스플레이의 사이즈를 알 필요가 있습니다. 경험적인 가이드를 드리자면...

가로 978px - 데스크탑 & 큰 화면의 타블렛 (10인치대)
가로 600px - 타블렛 (킨들 파이어나 넥서스7등의 7인치대)
가로 480px - 스마트폰
@media only screen and (device-width: 768px) - 요렇게 정의하면 iPad만

자세한 디바이스별 가이드는 여기서 볼 수 있습니다. 그럼 모든 브라우저가 Media Query를 지원할까요? 대답은 "예"입니다. 보다 정확히는, 현재 최신 브라우저에서 모두 지원합니다. 안타깝게도 IE는 9.0에서부터 지원합니다. (하지만 세상에는 꼼수는 많으니 걱정은 마시고...)

그러면 왜 Media Query를 사용해야할까요? 확실히 일반적인 웹페잊를 마크업하는 것보다 많은 노력과 주의가 필요할 것은 사실인데요, 그걸 감수할만한 효과가 있을까요?

컨텐츠 유지보수
컨텐츠가 자주 업데이트되는 페이지라면 당연히 여러 페이지를 관리하는 것보다 한 페이지를 관리하는 것이 효율적입니다.
SEO (Search Engine Optimization)
데스크탑용 페이지를 잘 만들고 Media Query를 잘 활용해서 모바일 지원을 한다면 굳이 모바일용 페이지에 SEO 하는데 특별한 노력을 하지 않아도 됩니다. 이미 SEO를 잘 해두었다면 지원 디바이스를 하나 추가할 때마다 들여야하는 비용을 많이 절약할 수 있겠죠.
다양한 디바이스를 지원
만일 다양한 디바이스를 지속적으로 지원해야한다면 개별 페이지를 만드는 것보다 몇 줄의 코드를 적어 넣는게 훨씬 경제적입니다. 또, 특정 디바이스만 타게팅해서 특정한 컨텐츠를 보여줄 수도 있습니다. (예, 아이패드 사용자에게만 아이패드 앱을 다운받으라는 프로모션을 노출)

이런 장점이 많은 디자인 방법인것은 확실한데, 다양한 디바이스에서 실제로 정상 작동하는지 확인도 해봐야하고 은근히 손이 많이 가는 것은 사실입니다. 경제적으로 잘 판단한다음에 충분히 시간과 노력을 투자할 가치가 있다고 판단이 된다면, 해볼만한 가치는 있을 것입니다.

팁! Media Query를 사용했는데도, 스마트폰에서 보면 CSS 변경이 되지 않은 경우가 발생합니다. 이건 Viewport를 함께 사용해야하는 이슈인데요, 스마트폰들이 매우 스마트해서 마음대로 전체 페이지를 줌아웃해서 보여주기 때문이죠. 디바이스 사이즈에 맞춰서 1:1로 보여달라라고 정의를 하셔야 합니다. 아래의 태그를 메타태그 영역에 삽입해주시면 간단히 해결됩니다.

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

더 볼거리
http://alistapart.com/article/responsive-web-design
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/
http://vimeo.com/27484362
http://css-tricks.com/box-sizing/

VibeOn

2013/03/21

Responsive Design

댓글 1개: