[RWD] 반응형 웹 디자인 - 개념 잡기

RWD는 Responsive Web Design (반응형 웹 디자인)을 일컸는다. 어떻게 시작해야 할지 경험한 내용을 정리해 본다. 먼저 http://www.unitedpixelworkers.com 사이트를 들어가서 브라우져 사이즈를 모바일 기기 크기 - 스마트폰, 테블릿 - 로 변경하여 본다. 반응형 웹 디자인이 무엇인지 감상해 보시길...

1. 개념잡기 

  - RWD의 기초 개념이해

    + Fluid images  : img{ max-width: 100%, height: auto }

    + Fluid Grid : fluid-container안에서 움직임. 해상도에 따라 floating 

    + Media Queries : @media screen and {max-width: 980px} , 다양한 기기의 해상도에 따른 화면 사이즈 변경

  - Font Responsively : 폰트를 픽셀로 할지 %로할지 em으로 할지에 대한 반응형 폰트. %로 한다 

  - Fluid Layout : Fixed 에서 Fluid(Liquid) 로 변화 이젠 Hybrid layout으로 간다 

  - Custom Grid Layout : div[ float: left, width:200px }, header, content, sidebar, footer의 구분예

  - Responsive Imagery : 모바일 속도 향상을 위하여 이미지도 minify

  - Browser Compatibility : 브라우져 호환도 중요

  반응형 웹 디자인은 각 경우에 충족하는 디자인이 되었는지 살펴 보아야 한다. 

2. 반응형 패턴

  - 반응형으로 만들기 위한 패턴을 익힌다 : Responsive Patterns

    + Layout : 전체 위치 잡기

    + Navigation : 메뉴 구조화 하기 

    + Image : 이미지

    + Media : 비디오

    + Forms : 입력 제출

    + Modules : 기타 위젯들

  - Creating a Mobile-First Responsive Web Design : 실제 간단한 실습을 해본다  

3. 개발자가 사용할 도구 & 소스

  - Twitter Bootstrap

    + 가장 많이 사용하는 CSS, Widget 이면서 Responsive 지원 

    + 부트 스트랩 어떻게 사용하는지 프로토 타입핑해 본다  

    + Wrap Bootstrap 사이트에서 Bootstrap을 어떻게 확장했는지 보자 (상업용 구매 사이트) : 전부 반응형 웹 디자인 템플릿

       외국의 퍼블리셔는 그래픽 작업 및 RWD를 위한 HTML5 & CSS3 그리고 기본 jQuery 자바스크립트 코딩을 한다!!!

       솔루션 개발에 많이 참조하고 있는 사이트이다. 

    + Bootstrap 가지고 서비스를 만드는 회사들이 존재 : http://www.layoutit.com/

  - Zurb Foundation

    + 사이트 제작에 적합하다고 판단 됨

  - Gumby Framework 

    + RWD를 기반의 웹사이트 제작 프레임워크 

  - 그외 RWD를 위한 도구들 (필독)

  - 깃헙에서 rwd 또는 Responsive 로 검색하면 개발자들이 만들어 놓은 간혹 괜찮은 RWD들이 올라와 있다

    + Iacien Collapsible Menu

  - 15개의 신규 CSS Frameworks

<참조> 

  - 반응형 웹 디자인의 이슈 : 우리나라 어느 퍼블리셔 발표 자료 

  - 10 가지 쥑이는 RWD 예제 사이트

  - Responsive Design 프리젠테이션

  - ViewPort에 대한 이해

  - ViewPort와 Media Queries의 적용 예제 및 데모

  - RWD 연재 글 2편 : RWD 어디에 사용할까?

  - SpeckyBoy - RWD 웹사이트 만들기 with Gumby