본문 바로가기
Visual Report

Responsive Web 이란?

by 웹디자인 2012. 8. 8.

최근 웹의 화두는 모바일이라고 말할 수 있다.

 

다양한 디바이스의 출현으로 웹사이트의 플랫폼 지원이 이제는 사이트를 운영하는 모든 이들에게 고민거리가 되었다고 말할 수 있다. 스마트폰의 대중화로 인해 불어닥친 모바일웹은 이제는 단순한 모바일 플랫폼을 뛰어넘어 사용자들에게 정확한 경험을 제공하기 위해서 고민하기 시작한것이다.

 

현재 대부분의 웹사이트들은 PC와 모바일웹을 별도로 구성하여 사용자의 디바이스에 맞는 최적의 환경을 제공하여 주기 위해서 노력을하고 있다. 하지만 PC따로 모바일따로, 거기다가 모바일의 경우 스마트폰과 태블릿으로 나누어진다. 테블릿은 또 어떤가? 7인치, 10.9인치, 8.9인치 등등.. 제 각각으로 이것만 합해도 벌써 3-4가지의 이상의 디바이스를 지원하기 위한 타입의 사이트를 만들어줘야 한다는 결론이 나온다.

 

이거 참,, 웹에이전시에게는 어찌보면 도움(?)이 될만한 이슈이지만, 사이트를 직접 운영해야하는 클라이언트 입장에서는 3가지를 만들어야 하니 제작비용은 물론, 각각의 디바이스에 맞는 최적의 내용을 구성하기 위한 준비는 예산으로나 시간적으로나 여간 힘겨운 일이 아닐 것이다. 

 

그럼 이렇게 각각의 디바이스와 플랫폼에 맞도록 따로 다 만들어야 하는것인가?

 

자, 반응형(Responsive) 웹은 바로 이 물음에서 출발한다. 

 

하나의 사이트로 모든 디바이스에 맞도록 유연성있게 지원되는 웹사이트를 바로 Responsive Web 디자인이라고 부르는 것이다.

 

 

 

 

말그대로 어떤 디바이스에 상관없이 해당 디바이스의 사이즈에 맞는 레이아웃으로 화면이 반응하는 것이다. 

사실 이러한 방법은 예전에도 있었지만, 작년부터 서서히 이슈가 되었고 올해는 화두로 떠오를 전망이다.

 

이를 증명하듯 지난 6월 정식 출시된 어도비의 새로운 제품군인 CS6의 웹에디터인 Dreamweaver CS6는 반응형 웹사이트를 제작할 수 있도록 지원하고 있다.  이 뿐만 아니라 모바일 어플리케이션 제작에 유용한 라이브러리 및 기능을 제공하고 있어 반응형 웹사이트의 제작은 이제 웹사이트를 개발하는 디자이너나 개발자라면 꼭 알아야할 필수요소인 것이다.

 

반응형 웹사이트의 경우 최신 HTML5 표준코드를 기준으로 CSS와 JQUERY를 기반으로 대부분 동작하기때문에 제작시 브라우져의 호환성 및 크로스브라우져를 고려해야 한다.

 

이로인해 반응형 웹사이트 개발시 디자이너와 개발자의 협업이 중요한 작업이기도 하다.

 

물론 반응형 웹사이트가 정답이 될 수는 없지만, 스마트폰 사이트와 PC, 그리고 기타 태블릿 등에 대응하는 좋은 방법임에는 틀림없다.

 

 

 

 

 

댓글