#반응형 웹과 적응형 웹에 대한 고찰

반응형 웹 디자인 ( RWD; Responsive Web Design )

반응형 웹다지안은 가로 크기에 변화를 줄 때, 컨텐츠들이 사이즈에 맞춰 유동적으로 재배치 되는 형태.

" 너가 어떤 화면 크기를 갖고 있는 디바이스일지 몰라서 모두 다 준비해봤어!

걱정은 하지마 너의 디바이스 크기대로 바뀔테니!! "

적응형 웹 디자인 ( AWD; Adaptive Web Design )

브라우저 크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 재배치 되는 형태.

스크린에 맞는 성능을 보장하지만 모든 디바이스에 맞춘 화면을 설계한다는 것은 불가능에 가깝다.

" 너가 그 크기라면 이것을 줄게! 물론 그 크기도 내가 따로 준비했지! 헉헉... "

웹 디자인의 현주소

N-Screen의 모바일 시대다.

10개가 넘는 브라우저가 1~2% 정도의 시장 지분을 갖고 있다.

대부분 모바일 이라는 뜻이다.

모바일 웹을 과소평가해서는 안된다.

일단 어떠한 목표보다 모바일 웹 경험은 아주 빨라야 한다.

애초에 반응형 웹 디자인(responsive web design)이라는 용어를 만든 Ethan Marcotte는 다음과 같이 말했다.

“ 중요한 것은 반응형 웹 디자인이

모바일 웹 사이트를 위한 대체 수단으로서의 역할을 수행하기 위해 의도된 것이

아니라는 점이다. "

스크린 사이즈만을 생각하면 모바일 장치의 특성을 무시하게 될 수 있다.

기존의 반응형 문제점을 개선할 수 있는 방법 또는 전략을 소개하겠다.

모바일 퍼스트 ( Mobile First ) : 기획 단계부터 모바일 우선 접근법을 따른다.

각 문서가 모든 기기에 같은 URL로 같은 컨텐츠를 전송하지만 필수적으로 같은 구조는 아니다.

조건적인 로딩을 사용하여 현재 장치를 위해 필요한 자바스크립트만 로딩한다.

미디어 쿼리에 의존하면 안된다.

일단 브라우저는 모든 기기에 대한 스타일과 셀렉터 전체를 로드하고 파싱하기 한다.

이것은 모바일 환경에서 더 큰 스크린을 위한 CSS까지 다운로드하고 파싱한다는 것을 의미한다.

이 CSS가 렌더링을 방해하기 때문에 모바일 접속에 대해서 소중한 시간을 낭비하게 된다.

중요한 것은 필요한 CSS 미디어 쿼리만 로드한다는 것이다.

비 교

반응형 웹이 적합한 사이트는 단순하고 간단하고 심플한 사이트다.

블로그나 회소 소개 페이지 같은 정보를 전달하는 역할의 사이트가 적합하다.

적합하지 않은 경우에는 동적이며 고정적이지 않는 사이트다.

방대한 양의 컨텐츠를 갖고 있는 인터넷 쇼핑몰 사이트가 적합하지 않다.

반응형 웹에 대한 모든 것 http://iropke.com/blog/archives/3428

반응형 웹 디자인에 대한 오해 http://cyberx.tistory.com/20

반응형 웹 사이트의 속도를 빠르게 하는 7가지 요소 http://cimple.postype.com/post/578/

End