kth 개발자 블로그

개발자가 행복한 회사 kth

RESS: Responsive Design + Server Side Components

October 6, 2011

kth 모바일서비스2팀 김태훈

Background

근 몇 년간 다양한 device들(아이팟, 아이패드, 갤럭시, 아이폰, 넷북, Kindle 등등)이 쏟아져 나오면서 그 종류는 매우 다양해졌으며 그에 따른 해상도 또한 각각 상이합니다. 특히나 해상도에 대한 제약이 없는 android 계열은 더할 나위 없겠죠. 그렇다면 그럴 때마다 각각의 해상도에 맞는 웹 페이지를 새로 디자인해야 할까요? 우리는 그동안 이러한 변화에 수동적으로 대처해 왔습니다. 물론 가장 손쉬운 방법으로요.(새로운 user-agent가 나올 때마다 그에 맞게 새롭게 디자인하고 퍼블리싱하는 것) 하지만, 이러한 대응에 대한 주기는 더욱 잦아지고, 변화는 더욱 빨라집니다. 이러한 것을 어떻게 하면 해결할 수 있을까요?

여기에서 등장한 용어가 ‘Responsive Design’ 입니다. 국내에서는 ‘반응형 디자인’으로 해석되며, 웹 브라우저의 창 크기가 변함에 따라 웹페이지의 화면 구성이 바뀌는 것을 말합니다. 이러한 ‘Responsive Design’은 대부분은 사용자에게 보여지는 view단에서 작업이 이루어집니다. 하지만, server-side에서도 이에 대한 문제를 해결하려는 노력은 많이 있어왔습니다. RESS ( Responsive Design + Server Side Components )는 두 영역에서 이에 대한 문제를 해결하고자 하는 방법에 대한 제안입니다.

Responsive Design^[2]은 최근 웹 디자인 커뮤니티에서는 매우 뜨거운 이슈였으며, 그만큼의 관심에 비례해 끊임없이 자료가 나오고 있습니다. 이미 kth 사내에서도 이에 대한 내용이 많이 공유되었고, 개발자 블로그를 통해선 미디어 쿼리를 이용한 Responsive Web Design 실제 구현 이슈와 같은 글로도 공유되었지요. 이에 본 문서에서는 Responsive Design를 위한 Server-side에서의 기술에 대해 논의합니다.

Responsive Design

Responsive Design은 국내에서는 ‘반응형 디자인’이라는 용어로 해석됩니다. 쉽게 이해하면, 웹 브라우저의 창 크기가 크기가 변함에 따라 웹페이지의 화면 구성이 바뀌는 것을 말합니다. 이는 사용자의 behavior와 screen 사이즈를 기반으로 한 환경에 따라 웹 layout을 대응해야 한다는 접근법입니다. 이것은 다음과 같은 요소들로 구성됩니다. 아래의 요소에 대한 좀더 많은 정보는 아래 Reference [3]을 통해 확인하세요.

1) Fluid grid

사이트는 fuild grid 형태의 layout을 가지고 있습니다.

2) Flexible images and media

사이트 내의 이미지(img)와 미디어(embed, object, video)들은 고정되지 않은 유연한 형태로 디자인되어 있습니다.

3) Media queries

각기 다른 view 화면은 media query를 통해서 각각 다르게 보여집니다.
더욱 자세한 설명은 Reference [4]를 참고하시면 더욱 쉽게 이해하실 수 있습니다.

How to it Work?

어떻게 이러한 작업을 하는지 모바일 device와 데스크탑 device를 위해 각기 다른 상단 및 하단 navigation 을 작업한다고 가정해 봅니다.(http://www.bagcheck.com 사이트의 예를 듭니다) 여기서 우리가 먼저 알아두어야 할 것은 mobile의 스크린은 작고, desktop의 스크린은 이보다는 크다는 것입니다.

RESS_backcheck_exam

그림1) mobile website 그림2) desktop website

스크린이 크고 작다는 차이는 사용자에게 각기 다른 UI 경험을 주어야 한다는 것을 의미합니다. 이는 물론device가 달라짐에 따라 달라져야 합니다. 이를 위해 다음과 같이 4개의 파일을 별도로 만듭니다.

header.html
mobile_header.html
footer.html
mobile_footer.html

여러 device에서 http://www.bagcheck.com을 접속했을 경우, 서버에서는 단말기의 User-agent에 대한 정보를 토대로, 해당 단말기에 대해 최적화된 html 구성요소( desktop일 경우 header.html + footer.html, mobile일 경우 mobile_header.html + mobile_footer.html )를 내려줍니다.

이러한 방법으로 html 내부의 이미지를 표현하는 view.html 은 아래와 같은 형태로 각기 다르게 구성할 수 있습니다.

// view.html을 구성하는 템플릿 소스 예

<img class="”{클래스명}”" src="”{이미지명}”" alt="”{이미지설명}”" width="”{세로사이즈}”" height="”{가로사이즈}”" />;

// desktop의 view.html 일 경우

<img class="”big_cls”" src="”bigimg.gif”" alt="”큰이미지”" width="”300”" height="”300”" />;

// mobile의 view.html 일 경우

<img class="”small_cls”" src="”smallimg.gif”" alt="”작은이미지”" width="”50”" height="”50”" />;

여기서 {name} 은 서버에서 User-agent에 따라 설정하는 변수이며, 서버는 desktop / mobile 의 구분 뿐 아니라, iphone , ipad, galaxy tab… 과 같은 각기 다른 device 대해 가장 최적화된 구성요소를 서버에서 내려줄 수 있습니다. 이러한 방법은 다음에 설명할 responsive images^[5]의 방법과 유사한 효과를 얻기위해 client 브라우저 내에서 javascript를 사용합니다.

Responsive images’ s way

며칠전, kth기술뉴스를 통해 공유도 되었던, 새롭게 단장한 보스턴 글러브 웹사이트(http://bostonglobe.com)의 를 보셨습니까? 이번에는 Responsive Web Design을 적용했던 Filament group에서 github에 올려둔 ‘responsive images’의 구조를 살펴보고 이것은 어떠한 형태로 responsive design을 위해 Server-side에서 구성했는지 살펴 봅니다. 다운로드는 https://github.com/filamentgroup/Responsive-Images 에서 받을 수 있습니다.

Client 브라우저의 해상도가 낮은 device에서는 굳이 responsive design을 위해 큰 사이즈의 이미지를 보낼 필요는 없습니다. mobile device에서 이는 큰 낭비이며, 또다른 문제를 야기할 수도 있습니다. ‘Responsive images’는 서버에서의 판단없이(user-agent의 구분), client 브라우저의 해상도에 따라 최적화된 이미지를 전달하기 위한 방법을 제시합니다. 이를 위해, 서버에서는 apache rewirte 모듈을 사용하기 위한 환경과, 각기 다른 사이즈의 2개의 이미지(big_logo.jpg, small_logo.jpg)를 만들어 놓고 브라우저의 요청을 기다리면 됩니다. 이는 이미지 뿐 아니라, script, css, 및 media 자원요청에도 활용할 수 있는 매우 효율적인 방법입니다.

Client 브라우저에서는 이미지 로드시 javascript를 통해 브라우저의 해상도를 확인하고 정해놓은 임계값에 따라 적절한 사이즈의 페이지 내의 요소들에 대해 가상의 “/rwd-router/” 디렉토리를 포함하도록 합니다. 예를 들어, 기준 해상도가 가로800px일 경우, 가로800px이 넘을 경우 아래와 같은 URL의 형태로 변환시킵니다.

// original img attribute, <strong>resolution < 800</strong>

<img src="”http://www.paran.com/img/small_logo.jpg?full=big_logo.jpg”" alt="" />

// changed img attribute, <strong>resolution > 800</strong>

<img src="”" alt="" />/rwd-router/img/small_logo.jpg?full=/img/big_logo.jpg >;

그리고 이 이미지 URL을 받는 서버에서는 다음과 같은 .htaccess 설정을 이용해서 아래와 같이 처리합니다.

# 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

.htaccess 의 rewrite module을 이용해서 ‘http://www.paran.com/rwd-router/img/small_logo.jpg?full=img/big_logo.jpg’ 의 형태로 들어오는 이미지 URL은, rewrite module을 거친뒤에는 ‘http://www.paran.com/img/big_logo.jpg’의 형태로 큰 사이즈의 이미지를 호출합니다. 물론 이때, client 해상도가 800px 이하인 이미지에 대해서는 http://www.paran.com /img/small_logo.jpg?full=img/big_logo.jpg’ 을 요청하게 되어 작은 사이즈의 이미지를 호출합니다. 단순히 이것으로 끝입니다.

Problems

User-agent – 어떠한 device 인지를 구분해서 Server side에서 이에 대한 최종결정하는 것에 있어서 가장 중요한 값은 Client의 User-agent를 확인하는 것입니다. user-agent를 어떻게 정확히 검출할 수 있느냐 하는 것에는 많은 논쟁이 있습니다.^[6]
Responsive Design’s Problems – 아래와 같은 Responsive Design 자체에 대한 이슈들은 이미 알려져 있습니다.^[7]
- Using Media Queries to Deliver Different Images Doesn’t Work
  단지 모바일 장치에서만 보여주고자 하는 경우에도, media query를 사용하기 위해 다른 불필요한 이미지(desktop 에서 보여주고자 하는 큰 이미지들)까지 함께 다운로드 합니다.
- Speed Matters on Mobile
  모바일에서는 responsive design 보다 속도가 더욱 중요한 이슈입니다. 느린 웹페이지에 대해서 사용자는 관대하지 않습니다. 속도를 더욱 느리게 한다면 다시 생각해 보아야 합니다.
- Letting the browser scale images is a bad idea
  Fluid image 테크닉의 이면에는 항상 최대크기의 이미지를 다운로드하고 이를 scaling 한다는 것입니다. 브라우저에게 scaling을 시키는 것은 좋지 않은 방법입니다.
- Unnecessarily Large Files to Download
  단지 모바일 장치의 일부에서만 사용됨에도 불구하고, 불필요하게 큰 사이즈의 이미지를 다운로드 합니다.
- Browser resizing은 CPU와 Memory에 부하를 줍니다.
  브라우저에서 resizing하는 것은 CPU 성능이 낮은 단말기나 memory가 부족한 단말기에서는 문제가 될 수 있습니다.
- CSS Media Queries Do Not Optimize HTML or Javascript
  Media query는 불필요한 html이나 javascript를 제거하지도 않아서, 브라우저의 속도를 느리게 합니다.
- Media query support
  media query는 CSS3[8] 규약입니다. Safari3+, Chrome, FireFox 3.5+, Opera7+, IE9+ 에서는 media query를 지원합니다만, 그 이하 버전에서는 지원하지 않습니다. 이하 구식 버전를 위해 우리는 다음의 코드를 활용해서 media query를 구현할 수 있습니다.
  - css-mediaqueries-js 이용 – http://code.google.com/p/css3-mediaqueries-js/
  - jQuery plug-in 이용 – http://plugins.jquery.com/project/MediaQueries
- Ignoring the Mobile Context
- Separate Mobile Web Sites are a Good Thing

Conclusion

우리는 Responsive Design을 적용하는 것은 분명히 client 사용자에게 동일한 UI 경험을 제공하고, 시장에서 새로운 기기들에 대한 설계 및 개발 단계의 필요성을 제거해 준다는 측면에서 분명 큰 도움을 주는 기술입니다. 하지만 이를 도입하기 위해서는 위에 논의된 문제들과 같은 것들에 대해 server side 기술을 통해 보완하여, 이와 병행하여 적용해야 한다는 것 또한 알 수 있습니다. Server side에서 이를 해결하기 위한 기술들은 아직 많이 보고되지는 않았지만, 분명 더 발전되고 새로운 기술들이 점차 보고될 것입니다. 앞으로 또 어떠한 기술들이 나타나게 될지 궁금합니다.