반응형 웹 디자인 (Responsive Web Design) 이란?
접속하는 방문자의 환경과 특성에 따라 웹이 지능적으로 반응하는 것입니다.
최근 스마트폰, 아이패드, 노트북 등 웹을 활용하는 기기가 무척 다양해지면서 그 중요성과 활용성에 관심이 모아지고 있습니다.
현재 각 분야에서 반응형 웹 디자인의 활용성과 가능성을 활발히 시도하고 있으며, 빠른 시간에 그 존재를 주목받고 자리잡을 것입니다.
여러분의 이해를 돕기 위해 반응형 웹 디자인에 대해 몇 가지 예를 들어 설명합니다.
* 접속하는 사람의 현재 위치에 따라 개별적 웹 서비스를 구현합니다.
* 접속하고 있는 곳의 시각과 날씨 등에 따라 각 각 다르게 반응합니다.
* 접속하는 기기의 환경에 따라 맞추어 다르게 반응합니다.

미디어 쿼리 (Media Query)는 반응형 웹 디자인을 구현하는 방법 중 하나입니다.
CSS3 에서 더욱 확장된 미디어 쿼리를 활용하면 접속하는 다양한 매체의 환경에 따라 웹을 최적화할 수 있습니다.
하나의 홈페이지가 스마트폰, 태블릿PC, 노트북, 일반PC 등 접속하는 기기에 따라 페이지 구성이 달라지고 최적화된 페이지를 보여주는 것입니다.
미디어 쿼리의 이 점은 반응형 웹 디자인 중 현재 가장 필요성을 인정받고 있는 구현 방법입니다.

여러분이 관심을 갖고 있는 홈페이지에서 미디어 쿼리는 아주 매력적이며 강력한 도구입니다.
조금만 생각해보면 그 필요성을 절감하지 않을 수 없습니다.
아주 손쉬운 예를 들어 보겠습니다.
지금처럼 LCD 등 평판 디스플레이가 보급되기 전 브라운관 모니터 시절에는 대부분 크기가 비슷했으며 화면비율도 4 : 3 으로 똑 같았습니다.
때문에 5~6년 전만해도 홈페이지의 가로 폭 크기를 950픽셀 정도에 맞추면 무난했습니다.
그러나 지금은 사용자들의 모니터 환경이 너무도 천차만별입니다.
기술발전과 함께 가격이 무척 저렴해진 요즘, 시장에서 판매되는 모니터는 23인치, 24인치, 27인치, 30인치 등이 대부분입니다.
그러나 아직까지 17인치, 19인치 사용자들도 많으며 심지어 15인치 사용자도 있습니다.
이처럼 다양한 사용자의 모니터를 고려하여 홈페이지를 구성할 때는 어려움이 많습니다.
예전의 작은 모니터를 기준으로 하면 홈페이지의 가로 크기는 950픽셀 정도가 알맞습니다.
그러나 950픽셀 크기의 홈페이지는 요즘의 모니터에서 크기가 너무 작아 좌 우 여백이 휑하니 허전하게 너무 많이 남습니다.
과연 어느 장단에 맞추어 춤을 추어야 할까요?

이 뿐만 아닙니다.
나아가 요즘은 스마트폰과 아이패드 등 태블릿PC가 열풍을 일으키고 있습니다.
이러한 시대의 흐름에 맞추어 자신의 홈페이지가 모바일 환경에서도 작동할 수 있도록 관심을 기울이지 않을 수 없습니다.
때문에 모바일 환경을 위해 현재의 홈페이지와는 별도로 모바일 페이지를 제작하는 경우가 많습니다.
만약 자신의 홈페이가 이처럼 다양한 접속 환경에 따라 최적화되어 작동한다면 얼마나 편리하고 멋질까요?
바로 그 해답을 미디어 쿼리가 제시하고 있습니다.

• 미디어 쿼리는 IE9, Chrome, Firefox 등 최신 브라우저에서 작동합니다. (IE7, IE8은 지원안함)
• 반응형 웹 디자인과 미디어 쿼리에 대하여 인터넷으로 검색하시면 더 많은 정보를 만나실 수 있습니다.