최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도
데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다.
데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라
많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다.
이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다.
사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말하는 것이다.
협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단말환경에 반응하여 웹페이지를 제공하는 것이라고 정의 할 수 있다.
즉, 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image),
그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 '최적화'된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법이다.
이는 반응형웹는 %단위를 사용하여 각 디자인의 폭에 유동적으로 반응하여 콘텐츠의 크기가 줄거나 커지고 오브젝트 배열이 달라지기도 한다.
반응형 웹의 주요 컨셉은 다음과 같다. (참고)
1. A flexible, grid-based layout : 그리드를 상대적(% 단위 등)으로 지정하여 브라우저 크기에 따라 유동적으로 변환
2. Flexible width media: images, video : 너비가 변경되어도 웹페이지 안의 미디어가 넘치지 않게 하는 기법
3. Media queries : 다양한 브라우저에서 표현양식을 제어할 수 있게 고안된 기능
즉, 반응형 웹은 “유동형 그리드, 가변폭 이미지, 미디어쿼리 개념”을 하나로 묶고 체계화 시킨 용어이다.
그러나 반응형 웹에도 아직 극복해야 할 단점들이 있다. 가장 큰 문제는 IE8 이하에서는 사용이 불가능하다는 점이다. (참고)
1. 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
2. 이미지 리사이징은 단말기의 CPU를 보다 더 많이 사용한다.
3. 실제로 사용하지 않은 자원(이미지, CSS)을 전송 받을 수 있다.
4. 미디어 쿼리를 지원하지 않는 브라우저의 사용자가 많다 : CSS3의 속성으로 IE8 이하의 버전에서는 사용이 불가능
이와 같이 아직까지 미디어 쿼리를 지원하지 않는 브라우저의 사용자가 많기 때문에
기존의 데스크탑 사이트에 HTML5의 미디어 쿼리만 적용한다고 반응형 웹이라고 볼 수 는 없을 것이다.
일부에게는 반응하지 않는 사이트이기 때문이다.
패턴1. Mostly Fluid Type
가장 많이 사용되는 패턴으로 큰 화면에서 많은 여백을 두고 유연한 그리드와 큰화면에서 작은화면으로 이미지 스케일링을 하며
화면이 작아질 수록 세로로 컬럼을 쌓는 형태를 취한다.
패턴2. Column Drop Type
Mostly Fluid 패턴과는 달리 레이아웃에요소들의 전체 사이즈를 유지하려는 일관성이 있다.
멀티 컬럼 레이아웃으로 시장하여 싱글 컬럼 레이아웃과 화면 사이즈가 작아질 수록 컬럼이 아래로 떨어지는 형태로 마무리 된다.
패턴3. Layout Shifer Type
해당 패턴은 다양한 화면 사이즈에 크로스 적용이 어렵다.
왜냐하면 레이아웃이 변화가 상대적으로 커서 많은 공수가 들기 때문이다.
이러한 이유로 위의 두가지 패턴보다는 덜 사용되는 경향이 있다.
패턴4. Tiny Tweaks Type
여러 화면 사이즈에 적용시키는 가장 간단한 형태이지만 이 패턴 역시 가장 인기 없는 패턴이다.
간단한 콘텐츠로 구성된 사이트에서 단지 폰트 사이즈아 이미지 레이아웃만 고려해서 사용하길 권한다.
패턴5. Tiny Tweaks Type
위에서 언급한 것처럼 다양한 패턴의 반응형 디자인 레이아웃은 일반적인 공통점이 있다.
모두 작은 화면에서는 세로로 쌓는 형태를 취하고 있다는 것이다.
아마도 레이아웃을 조정하는데 있어서 노출되는 화면 공간에만 의존하고 있기 때문이다.
그러나 Off Canvas패턴은 보여지지 않는 화면을 고려하여 콘텐츠를 유지하고 네비게이션 할 수 있는 용도로 사용하는데 강점이 있다.
출처
http://blog.daum.net/uxdaum/11
