진화하는 웹사이트 : 반응형 웹 (Responsive Web)

 

 

반응형 웹(Responsive Web)의 등장 배경?
최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 데스크탑 / 모바일 폰 / 타블렛 PC 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다.

 

반응형 웹(Responsive Web) 이란?
반응형 웹이란 HTML5의 “미디어 쿼리”를 이용하여 하나의 소스로 제작된 컨텐츠가 데스크탑에만 국한되지 않고 타블렛 PC, 모바일 폰 등 다양한 크기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로 변환되는 기법을 말한다.

 

대표적인 예로 The Boston Globe 사이트를 보면 가로 길이에 따라 다음과 같이 레이아웃이 변화된다. 모바일 웹을 별도로 제작할 필요 없이 하나의 반응형 웹사이트로 사이즈에 맞춰 이미지나, 폰트, 사이즈 및 UI가 자동으로 변환되어 모든 디바이스에서 사이트를 이용할 수 있는 것이다.

 

 

 

반응형 웹의 주요 컨셉은 다음과 같다. (참고)
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의 미디어 쿼리만 적용한다고 반응형 웹이라고 볼 수 는 없을 것이다. 일부에게는 반응하지 않는 사이트이기 때문이다.

 

반응형 웹(Responsive Web) 디자인 적용 사례 (참고)
# 1 Deren Keskin : 상단 메뉴의 변화가 눈에 띄며 사이트 전체의 이미지/텍스트의 변경이 자연스럽게 이루어진다.

 

 

# 2 dConstruct 2011 : 가로 폭에 따라 이미지가 리사이징되며 레이아웃도 변경되는 모습을 볼 수 있다.

 

 

 

#3 Naomi Atkinson : 실제로 브라우저의 가로 폭을 변경해보면 이미지 박스들이 이리저리 옮겨가는 모습을 볼 수 있다. 

 

 

 

#4 Neovada : 사이트 전체가 슬라이딩 방식으로 이루어져 있어 반응형 웹으로 구현하기 좀 더 용이해 보인다.

 

 

반응형 웹(Responsive Web)은 기획? Mobile First!
반응형 웹이 크게 이슈화 된 것도 결국은 모바일 웹 환경 때문이다. 앞서 언급했듯이 모바일 폰과 타블렛 PC를 위해 별도의 사이트를 제작해야 하는 번거로움을 반응형 웹이 대체할 수 있을 것이다. 그렇다면 이렇게 변화하는 사이트를 어떻게 기획해야 효과적인 결과물이 나올까?

 

 

 

“새로운 규칙은 모바일 우선이다 (We understand that the new rule is mobile first)”
 – 구글 CEO 에릭 슈미트(Eric Schmidt)

 

 

 

이번 포스팅을 위해 참고한 대부분의 자료가 “데스크탑용 사이트 + 미디어쿼리 = 반응형 웹”이 아닌 모바일 사이트를 먼저 고려하여 기본적인 사이트를 기획하고 이후 점차적으로 확장해가야 한다고 말하고 있다. 물론 이때 사이트의 사용성과 컨텐츠의 구조는 기본이다.

 

아직까지는 극복해야 할 한계들이 있는 상황(미디어 쿼리를 지원하지 않는 브라우저의 사용자 등)에서 국내에는 반응형 웹 디자인을 적용한 사이트가 많지는 않다(현대자동차 혹은 BLUEWAVE 참조). 하지만 피할 수 없는 N-Screen 시대에 최적화된 웹 환경 제공이 용이하고 기업에서는 노동과 비용을 줄일 수 있다는 장점이 있어 앞으로 반응형 웹의 발전은 필수가 되지 않을까 생각해 본다.