태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2011.06.12 23:20

[Web Design Trend] 다양한 디바이스 환경에 반응하는 Responsive Web Design-반응형 웹디자인

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 님께 감사드립니다.

신고

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
  1. 無異 2011.06.15 03:11 신고 address edit & del reply

    1. 요즘 모니터 해상도가 다양해지고 있으니 플렉서블한 웹 페이지를 만드는건 좋은데(제발)

    2. 다양한 디바이스에 최적화된 레이아웃을 하나의 페이지로 만들려고 고민하고 잘 적용되는지 테스트를 반복하기 보다는 그냥 따로 만드는게 비용(시간)면에서 효율적일 것 같습니다. 그래픽디자인과 웹코딩을 분업하여 작업하는 경우에는 더 그렇겠고요.
    만들때는 모바일(컨텐트) 우선으로 만들고요. http://www.lukew.com/ff/entry.asp?1353

    3. 요즘 이슈가 되는건 아이패드때문이 아닐까 싶습니다. 막 내키는대로 가로 세로로 돌려서 보니까요. 매거진 앱은 거의 다 오리엔테이션에 따라 동적으로 레이아웃을 구성하고 있고요. 대부분 어도비 솔루션을 사용해서 구현은 다른 것 같지만요.

    4. 포탈사이트가 태블릿 전용 사이트를 만들때 고민이 필요 할 것 같습니다.

  2. 이 재용 2012.07.19 10:12 신고 address edit & del reply

    1. Luke W가 RWD로 클라이언트에서 최적화하는거랑, 브라우저에서 인식해서 서버에서 아예 따로 보내는 거랑 두 가지 모두 필요하다고 이야기했네요. http://www.uie.com/articles/adaptation_vs_optimization

    2. 그래서 어떻게 하면 두 가지를 동시에 최적화할건가 www.lukew.com/ff/entry.asp?1392

Ad Test...