반응형 웹, 정체를 밝혀라

반응형 웹 이란, 이름 그대로 HTML5의 “미디어 쿼리”를 이용하여 브라우저의 가로 사이즈에 따라 마치 웹이 살아있는 것 처럼 레이아웃을 최적화하여 모든 디바이스에서 최적의 상태로 컨텐츠를 제공 할 수 있는 기법이다.
대부분 그리드 기반의 레이아웃을 사용하는데, 그 이유는 브라우저 크기가 변했을 때 어색함이 없도록 디자인 하기 위해서이다. 적은 비용으로 다양한 디바이스에 모두 대응할 수 있는 페이지를 만들 수 있으며 수정 및 관리가 쉬운 것이 장점이다.
반응형 웹에는 2013년 디자인 트랜드 중 컨텐츠 중심의 미니멀 디자인이 사용되어지는 추세이다. 그리드 기반의 레이아웃과 잘 어울리고, 화려한 이미지를 사용했을때 보다 모바일에서의 로딩이 빠르기 때문이다.

반응형 웹을 제작할 때 주의할 점은 컨텐츠의 중요도에 따라 각 해상도의 레이아웃마다 어떤 컨텐츠를 강조해야하는가, 모바일로 보여졌을 때에는 사용자의 동작이나 편의성에 맞게 버튼 및 컨텐츠를 어디로 배치할 것인가에 대한 컨텐츠의 구조화가 탄탄하게 이루어져야 한다는 점이다.
복잡한 정보 구조의 형태를 서비스 목적성과 일관성, 연속성을 가지고 있어야 한다.

반응형 웹의 단점을 말하자면, 반응형 웹디자인을 구현하기 위해 필요한 미디어 쿼리(Media Query)는, CSS3 속성으로서 Internet Exeplorer 8 이하의 버전에서는 사용이 불가능 하기 때문에 IE9 이상의 브라우저나 크롬이나 파이어폭스 등의 브라우저를 이용해야 한다.
그러나 현재 모바일 디바이스들은 전부 미디어 쿼리를 지원하고 있기 때문에 모바일에서는 큰 문제가 없다.

또, PC버전에서의 큰 이미지를 모바일에서는 보이지 않게 하는 기법을 사용하기 때문에 필요보다 더 큰 이미지를 불러와서 불필요한 데이터가 로드될수도 있으며 이미지가 자동으로 리사이징 되는 것은 CPU의 사용량을 증가시켜 부담을 줄 수도 있다.