멀티디바이스 최적화를 위한 반응형웹과 미디어쿼리

멀티디바이스 최적화를 위한 반응형웹과 미디어쿼리

​

​

최근 웹사이트와 관련된 환경이나 기능들이 매일매일 변화하고 있는데요, 반응형 홈페이지는 새로운 홈페이지에 대한 요구를 반영하여 계속 증가되고 있는 추세입니다.

​

​ 

왜 반응형 홈페이지인가?

현재 웹사이트는 여러 디바이스(멀티디바이스)에서 이용 가능한 방식을 선호하고 있습니다.

멀티디바이스란 PC, 테블릿, 모바일, TV, 게임기와 같이 브라우저(Browser)를 탑재한 다양한 기기들을 말합니다.

근래에 스마트폰과 같은 모바일 기기등을 통해 서비스를 검색하거나 사용하는 유저들이 급증하고 있기 때문에 모바일 사용자에게도 웹사이트 사용자와 동일한 컨텐츠와 서비스를 제공하는 방식의 사이트를 제작하는 것이 필요하게 되었습니다. 그러한 필요성으로 반응형을 이용한 웹사이트가 꾸준히 증가하고 있으며 가장 중요한 웹 기술로 각광받고 있습니다.

2007년 모바일 기기가 처음 선보일 당시에는 웹 화면이 모바일에서 축소되는 부분을 사용자에게 제대로 보여줄 수 없었습니다. 이러한 문제는 PC환경과는 별도로 모바일에서 사용가능한 모바일웹을 제작하면서 일부 해결되었지만 PC와 모바일을 각각 제작하는 비용적 부담과 테블릿 PC의 등장으로 모바일웹이 모바일만 지원되는 문제가 또다시 발생되었습니다. 2010년 중반에 가서는 드디어 그러한 문제를 한번에 해결할 수 있는 반응형웹이 등장하여 특정 해상도의 기기에 상관없이 어떠한 디바이스에서 제한 없이 사용가능하게 되었습니다.

반응형웹이란?

간단히 말하면 큰 화면에서는  큰 화면의 구조에 맞게 웹사이트가 유동적으로 변형되어 보여주고, 반대로 스마트폰과 같은 작은 화면에서는 작은 화면의 구조에 맞게 최적화된 구조로 변경하여 보여주는 것이 반응형웹입니다. 이처럼 어떠한 디바이스에서도 최적화된 환경에 맞게 자유자재로 변화할 수 있는 것이 반응형웹의 장점입니다.

최근에는 급속도로 스마트폰과 태블릿이 보급되면서 쏟아져나오는 수많은 기기들에 탑재된 스크린 환경에 대응할 웹사이트의 필요성이 가속화 되었고, PC환경의 사이트를 모바일 처럼 작은 환경에서 사용할때 방생되는 여러가지 문제점을 해결하는 동시에 모바일환경에 최적회된 시각적 구성을 보여줄 필요성이 요구되고 있습니다.

기존의 PC와 모바일웹을 별도로 분리하여 제작할 경우 디바이스가 증가함에 따라 그만큼 페이지도 늘어나게 됩니다.

페이지의 양이 증가되면 제작에 따르는 시간과 비용도 증가하게 되어 각각의 디바이스별로 최적화된 사이트를 제공하려면 막대한 작업량이 소요됩니다. 또한 각각의 디바이스별로 URL을 갖게 되어 검색 엔진에서 하나의 URL을 사용할 때 보다 사이트 정보 수집과 분석에서 효율성이 떨어질 가능성이 높습니다.

RWD(Responsive Web Design)

반응형웹은 각 디바이스에 최적화된 페이지를 1개의 HTML 소스로 구성하며 회면의 크기에 따라 페이지의 크기가 전환되는 특징이 있습니다. 화면의 크기에 따라 사이트가 변환되는 것은 미디어쿼리(Media Queries)라른 기술로 가능합니다.

미디어쿼리는 윈도우나 브라우저의 폭, 해상도, 디바이스의 화면 조건에 따라 HTML의 스타일을 적절히 전환할 수 있게 하는 CSS3의 신기술 입니다. 반응형웹은 미디어쿼리를 이용해 각 화면마다 크기를 최적화시켜 보여줄 수 있습니다.

반응형웹은 하나의 HTML을 가지고 제작되기 때문에 디바이스마다 새로운 페이지를 별도로 제작할 필요가 없으며, HTML을 추가할 필요도 없습니다. 또한 하나의 사이트에 1개의 URL을 가지고 있어 검색엔진이나 분석도구에서 하나의 사이트로 인식되어 검색엔진최적화(SEO)에도 유리합니다. 유지보수와 관련해서 모바일과 PC버전, 테블릿 등 각종 기기들을 한번에 수정작업 할 수 있으며 HTML과 CSS를 기반으로 제작되기 때문에 소스 수정이 간편합니다.

반응형웹은 기본적으로 CSS를 이용하므로 HTML과 CSS만을 이용하여 어떠한 CMS(콘텐츠관리시스템)에서도 사용에 제한이 없습니다.

반응형웹은 디자인 측면에서는 PC만으로 구축된 사이트 처럼 디테일한 효과를 볼수 없는 경우도 있습니다. 모바일이나 테블릿 까지 고려하여 제작할 경우 콘텐츠의 양이 많거나 복잡한 구조를 단순화 시키려면 그 만큼 디자인이나 기능적으로 제약이 따를 수 있습니다. 하나의 사이트로 모든 디바이스에 최적화 시키기 위해서는 디자인과 기능적인 측면에서 고려해야 할 부분들이 더 많이 발생하게 됩니다. 이를 위해서는 컨텐츠를 효율적으로 구성하고 디자인할 수 있는 새로운 아이디어가 필요합니다.

https://www.bostonglobe.com/  반응형으로 제작된 <보스턴글로브>의 경우 뉴스라는 사이트의 특성상 많은 데이터와 복잡한 구조임에도 불구하고 뉴스사이트에 맞는 디자인 설계로 모바일이나 테블릿에서도 복잡한 화면구성과 기사정보가 잘 반영되고 있습니다.

쇼핑몰처럼 결제 시스템이 복잡한 구조에서도 반응형 홈페이지로 제작이 가능합니다. http://shop.netfu.co.kr/

반응형 웹사이트의 장점