2011. 6. 12. 23:20ㆍGUI 가벼운 이야기
PC모니터해상도는 점점 커지고 있고, 모바일Device의 해상도 또한 다양해지고 있습니다.
급변하는 환경에서 새로운 Device가 출현할 때마다 해상도Porting작업을 해야 한다면 비효율이겠죠.
지금 이 시간에도 '모바일버전 제작', 'PC버전 제작', 'N-Screen지원' 을 얘기하며 머리를 싸매고 있을 분들이 많을텐데 Responsive Web Design이 그 비효율을 줄일 묘안으로 떠오르고 있습니다. 게다가 굉장히 적절해 보입니다.
Responsive Web Design은 HTML파일 한 벌로 PC모니터, 태블릿PC, 모바일Device, TV 등의 다양한 스크린해상도에 대해 각각 최적화된 레이아웃과 인터페이스를 제공하는 웹디자인기법으로서 이러한 웹사이트들이 속속 만들어지고 있습니다.
적용 사이트 모음 : http://mediaqueri.es/ (이미지 클릭하여 웹사이트 오픈 후, 브라우져를 리사이징해 보세요.)
이미지출처 : http://mediaqueri.es/
넓은 의미에선 '사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응(대응)하는 웹요소들에 대한 총체적 디자인'을 말하는 것이겠지만, 현재는 사용환경에 가장 큰 영향을 주고 있는 다양한 해상도 지원이 초점인 것 같습니다.
자바스크립트나 css3의 미디어쿼리를 이용해 스크린 가로사이즈들을 규정하고 해상도별 임계치에 따라 임계치까지는 화면요소들의 Resizing이 일어나도록, 임계치를 벗어나면 Re-layout(Re-Grid)하는 방식으로 제작하고 있네요.
아래의 웹사이트처럼 Resizing을 주로 적용한 예도 있습니다.
http://www.designmadeingermany.de/magazin/5/
물론, 이러한 시도와 연구는 과거에도 있었습니다.
폰Device까지를 지원하진 못했지만 화면요소에 비율을 적용한 html, 플래쉬를 이용한 이미지 리사이징 등 다양한 디바이스에서의 웹브라우징을 지원하기 위해 노력했었죠.
http://www.meritzgroup.com/
이와 더불어 웹이 1024px해상도(960 Grid)를 기준으로 지원할 것이냐, 최근 대세인 1280px해상도(1140 Grid)까지를 지원해야 하느냐에 대한 논의도 활발합니다.
http://www.qbn.com/topics/646761/
http://news.ycombinator.com/item?id=1886187
Responsive Web Design에 대한 보다 상세한 정보는 아래의 Article을 참고하시기 바랍니다.
http://www.alistapart.com/articles/responsive-web-design/
예시디자인 - http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
아무튼 Responsive Web Design이 앞으로 어떻게 더 발전할 지 기대됩니다.
* 주요 용어 : Fluid Grids, Flexible Images, Media Queries
* Grid 자료 다운로드
http://lessframework.com/
http://cssgrid.net/
http://adapt.960.gs/ (Javascript)
[참고##트렌드##]
위 내용을 구성하는 데에 정보를 주신 @keywonc 님께 감사드립니다.