최근 스마트폰과 태블릿 PC가 늘어나면서 그에 대한 활용도도 높아지고 있다. 그러나 기기 마다 다른 화면 비율 때문에 웹사이트 접속 시 페이지가 잘리거나 인터넷 창이 제대로 열리지 않는 불편함을 겪는 사람도 증가하고 있다. 이는 기기마다 다른 OS, 브라우저의 해상도 때문이다. 그렇다면 해상도에 맞게 유동적으로 사이트가 변할 수는 없을까? 이런 문제점을 해결하고자 나온 것이 ‘반응형 웹디자인’이다. 이것은 사용자의 환경에 따라 하나의 웹이 PC와 모바일 환경에 따라 변화하는 것을 말한다.

글 | 이은정 객원기자( eunjungb1115@naver.com)

요즘 우리는 아침에 일어나 잠드는 순간까지 스마트폰과 테블릿 PC를 이용해 뉴스와 정보 검색, 메일 확인 등 일상 생활의 많은 부분을 함께 한다. 이렇게 모바일 기기의 형태는 진화하고 있지만 웹사이트의 경우 그에 맞는 개발이 잘 이뤄지지 않고 있다.

반응형 웹디자인?

반응형 웹디자인이 나오기 전에는 기기에 맞는 모바일 버전을 따로 만들었기 때문에 개발에 드는 시간과 비용 문제 등이 있었다. 그러나 하나의 웹페이지가 모든 기기의 장소값에 따라 유동적인 레이아웃으로 최적화 돼 구성되는 반응형 웹디자인의 등장은 그런 불편함을 줄여줄 대안으로 자리 잡고 있다.



반응형 웹디자인의 핵심은 CSS의 설정을 통해서 화면크기 등에 따라 다른 형태로 보여줄 수 있는 미디어쿼리를 사용한다는 점이다. 인터넷 익스플로러는 IE9부터 미디어쿼리를 지원하기 때문에 오페라나 크롬과 같은 브라우저를 사용해야 한다.

반응형 웹디자인이 적용된 사이트의 사례를 보면 훨씬 이해하기가 쉬울 것이다.

반응형 웹사이트

(1)현대 자동차 기업 문화 홍보 홈페이지 (http://pr.hyundai.com/#/pages/main.aspx )

지난 2월 20일 현대자동차의 기업 문화 홍보 사이트가 오픈했다. 이 사이트는 하나의 소스로 여러 해상도를 대응(one source multi use)할 수 있는 ‘플렉시블 유저 인터페이스’를 국내 최초로 적응한 것이 특징이다. 단계적 형식의 그리드 레이아웃으로 메뉴를 간단하게 보여줌으로써, 사용자가 편리하게 원하는 탭을 선택할 수 있도록 구성되었다. 또한, 현대의 H와 자동차를 형상화한 비주얼 이미지를 클릭하하면 메뉴를 선택할 수 있는 점도 인상적이다.

(2) 라이코스 홈페이지(http://www.lycos.com/ )

포털사이트 라이코스는 하늘색 배경에 검정 로고와 강아지 이미지를 심플하게 배치했다. 간단한 픽토그램과 함께 메일과 뉴스/ 날씨/ 연예 등으로 탭을 나누어 사용자가 원하는 정보로 쉽게 클릭 할 수 있도록 분류되어 있다. 디자인이 간결하기 때문에 어느 화면을 통해서 봐도 조잡하거나 깨지지 않고 웹에 있는 콘텐츠를 그대로 즐길 수 있도록 한다. 해상도를 낮추면 상단에 4개씩 배치됐던 메뉴가 3개로 바뀌는 것을 알 수 있다.

(3) 소니 홈페이지(http://www.sony.com/index.php )

소니의 홈페이지 역시 반응형 웹디자인이 적용된 사이트이다. 사이트 상단을 블랙으로 표현한 다음, 가로형식으로 구성해 메인 상품을 돋보이게 만들었다. 해상도가 다른 기기에서 보면 상단에 있던 메뉴들은 사라지고 검색 창이 중심이 된다. 이는 웹 사이트의 깔끔함을 살리면서 검색에 비중을 두었다는 것을 알 수 있다.

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

그밖에 다양한 반응형 웹디자인을 살펴보고 싶다면 http://mediaqueri.es/에서 확인해 볼 수 있다.