반응형 웹(Responsive Web)이란? 반응형 웹의 핵심에 대하여 알아보자.

마케팅 인사이트/APP

by Social Marketing Korea 2012. 10. 27. 11:00

PC, 타블렛PC, 스마트폰 등등 스마트해진 전자기기에 적용되는 반응형 웹(Responsive Web) !

요즘 다양한 모바일 또는 전자기기들이 보급되고 있습니다. 그래서 하나의 사이트를 만들더라도 PC, 타블렛PC, 스마트폰 등 서로 다른 해상도를 가진 디바이스들을 고려하지 않을 수 없게 되었습니다. 모바일에서 PC화면이 보여진다면 가독성은 물론이고 호환되지 않는 파일들이 있는데요. 이 불편함을 극복 하기 위해 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web) 입니다.

반응형 웹이란 HTML5의 "미디어 쿼리"를 이용하여 하나의 소스로 제작된 컨텐츠가 PC에서만 국한되지 않고 타블렛PC, 스마트폰 등 다양한 크기의 디바이스 환경에 맞춰 해상도나 화면이 동적으로 변환되는 기법을 말합니다. 쉽게 말씀드리자면 말 그대로 반응해서 나타나는 웹의 형태라고 할 수 있습니다. 일일히 기기에 맞는 사이트를 만드는 것이 아니라 하나의 소스로 제작된 컨텐츠가 유동적으로 변화하여 모든 전자기기에서 정해진 비례에 따라 화면에 보여지는 방법을 말하는 것 입니다.

반응형 웹의 핵심은 CSS의 설정을 통하여 화면크기 등에 따라 다른 형태로 보여줄 수 있는 미디어 쿼리를 사용한다는 점인데요. 그러나 IE8이하에서는 사용이 불가능하고, IE9부터 지원이 됩니다. 때문에 오페라나 크롬과 같은 브라우저를 이용해야 합니다.,또한 아직까지 미디어 쿼리를 지원하지 않는 브라우저의 사용자가 있기 때문에 기존의 데스크탑 사이트에 HTML5의 미디어 쿼리만 적용한다고 반응형 웹이라고 볼 수는 없습니다. 일부에게는 반응하지 않는 사이트이기 때문이지요.

반응형 웹은 디자인에 많은 자원과 시간이 소요되기 때문에 아직 활성화가 되지 않았습니다. 그리고 다양한 화면에서의 레이아웃을 고려해야 하므로 실행요소를 고려해야 하며, 마우스로 클릭했을 때와 손으로 직접 터치를 하였을 때의 차이를 알아야 되는 등 생각해야 할 부분이 굉장히 많습니다. 하지만 스마트한 전자기기의 수요가 점점 증가하는 만큼 반응형 웹의 필요성 또한 점점 커질 것이라고 생각합니다. 앞으로 반응형 웹이 확장되어 더 많은 페이지를 어떤 크기에서도 편리하고 보기 쉽게 되었으면 합니다.