반응형 웹디자인(Responsive Web Design)적용시 주의사항

세계적으로 모바일 사용자가 급증하면서 이에 대한 대응으로 웹디자인 도 빠르게 진화하고 있습니다. 그중 현재 가장 주목받는 방식이 바로 반응형 웹 디자인(Responsive Web Design) 이라고 하겠습니다.
전세계에서 모바일 가입자가 무려 15억명에 달하며 성장속도역시 31%라는 놀라운 급성장을 보이고 있는 상황에서 모바일대응에 가장 효과적으로 평가받는 반응형 웹 디자인에 대한 관심은 당연한 것일수도 있어보입니다.

반응형 웹 디자인(Responsive Web Design) 이란?

단순하게 스마트폰에서 볼때는 해당 디스플레이에 맞게 PC에서 볼때는 해당 디스플레이에 맞게 자동으로 사이트가 최적화되어 보여지는 웹디자인.
이렇게 정의한다면 기존의 모바일 전용 사이트와 PC 용 사이트를 멀티사이트로 구축한 경우와 구분하기가 어려워질 것입니다. 사실 보다 쉽게 누군가에게 반응형 웹을 이해시키고자 할때 는 상기 설명을 자주 사용하곤 합니다.

하지만 기술적으로 정의를 내려본다면 반응형 웹디자인은 다음과 같이 정의내릴수 있습니다.
스마트폰,태블릿,PC등 모든 플랫폼에 하나의 HTML 코드를 베이스로 사용하는 웹디자인 즉 어떠한 플랫폼에서 사이트를 접속해도 동일한 URL에서 동일한 코드를 읽어 오는 것입니다.
그렇다면 어떻게 반응형이 구현될까요? 하나의 코드에서 사전에 설정된 분기점을 기준으로 각각 다르게 반응하는 것입니다.

반응형 웹 디자인(Responsive Web Design)의 장점은?

가장 먼저 이야기할 수 있는 것은 하나의 URL을 사용한다는 점입니다. www.ABC.com 이라는 단일 URL을 통해서 플랫폼에 구애받지 않고 사이트를 보여주게 됩니다.
국내의 대표적인 포탈인 네이버(NAVER)는 반응형 웹 디자인이 아닌 별도의 모바일사이트와 PC사이트를 구분하여 운영하고 있습니다.
[pe2-image src=”http://lh4.ggpht.com/-Az1NfovMgoQ/U1306x0zGjI/AAAAAAAAC4s/wwMMkzKRxzs/s144-c-o/naver.com.jpg” href=”https://picasaweb.google.com/102394476629197694908/201405#6007226768626489906″ caption=”” type=”image” alt=”naver.com.jpg” ]
 
위의 이미지는 PC에서 naver.com을 입력했을 경우 접속되는 네이버 사이트입니다. 일반적으로 자주 보는 화면입니다.
[pe2-image src=”http://lh5.ggpht.com/-9zCPkzc47Z8/U1306_0ogrI/AAAAAAAAC4w/vWnKMo4IeaA/s144-c-o/m.naver.com.jpg” href=”https://picasaweb.google.com/102394476629197694908/201405#6007226772383892146″ caption=”” type=”image” alt=”m.naver.com.jpg” ]
 

 하지만 모바일에서 접속하거나 굳이 “m.naver.com”을 입력하여 검색하면 모바일에 최적화된 네이버 모바일 사이트가 나오게 됩니다.

즉 naver.com 과 m.naver.com 2개의 URL이 생성되는 것입니다. 당연하게도 하나의 URL과 2개의 URL은 사용자의 인식이나 기억에서 하나의 URL을 사용하는 것이 훨씬 더 유리합니다.

네이버처럼 강력한 노출파워를 가지고 있지 않은 사이트 나 블로그 라면 1개의 URL를 인지시키는 일도 사실 어렵다고 할수 있습니다.

또한 1개의 URL를 가지는 구조는 검색엔진의 인덱싱과 노출에도 훨씬 유리한 조건을 제시한다고 하겠습니다. 이외에 구글등의 주요 검색엔진은 모바일 접속환경이 우수한 사이트나 블로그등을 모바일 검색 상위노출 에서 보다 가산점을 주는 방향으로 가고 있습니다.

이외에 사용자의 경험측면에서도 반응형 웹 디자인은 유리합니다. 사용자가 가로 또는 세로 화면을 전환할 때 자연스럽게 최적화된 화면을 보여주기 때문입니다.

그리고 로딩속도의 지연을 발생시키는 리디렉션(Redirect)가 발생하지 않아 로딩시간이 줄어들게 되며 더 많은 사용자들이 더 쾌적한 사이트 방문경험을 가지게 되는 것입니다.

반응형 웹 디자인(Responsive Web Design)도 단점은 있다

반응형 웹 디자인에도 단점은 존재합니다. 하나의 단일 HTML 코드로 구현되어야 하므로 기획자가 각각의 플랫폼에 맞는 웹 디자인을 구축하는데 많은 시간이 소요되며 외주작업일 경우는 비용이 더욱 상승한다는 점이 있습니다.
또한 경험이 많지 않은 기획자인 경우는 다양한 실수를 범하기도 하는데 용량이 큰 대형 이미지등을 모바일 플랫폼에서 다운로드 받게 하는등을 예로 들수가 있습니다.
상대적으로 네트워크 속도가 느리고 요금체계가 높은 모바일에서 이러한 대용량 데이터 다운로드는 사용자에게 안좋은 기억이 될것이기 때문입니다.
또한 과도한 CSS 나 Javascript 의 경우는 모바일 플랫폼에 적용되지 않도록 세심한 설계가 필요합니다.
정리해 보면 반응형 웹 디자인(Responsive Web Design)은 비용상승과 개발시간이 더 걸릴수 있다는 점이 단점이 될수 있는것입니다.
그러나 한번 구축된 이후로는 보다 월등한 경쟁력을 갖추게 된다고 하겠습니다.

반응형웹을 위한 최고의 CMS 솔루션은 워드프레스(WordPress)

반응형 웹 디자인을 가장 저렴한 비용으로 구축가능한 것은 워드프레스 플랫폼이라고 하겠습니다. 비용이 저렴할 뿐만 아니라 디자인적인 측면에서도 다양한 솔루션들이 제공되고 있습니다.

[pe2-image src=”http://lh3.ggpht.com/-29dpDjBTGGM/U14F2_gFxiI/AAAAAAAAC5M/9_JUmVpWNVc/s144-c-o/%2525EC%25259B%25258C%2525EB%252593%25259C%2525ED%252594%252584%2525EB%2525A0%252588%2525EC%25258A%2525A4%2525EB%2525B0%252598%2525EC%25259D%252591%2525ED%252598%252595%2525ED%252585%25258C%2525EB%2525A7%252588.jpg” href=”https://picasaweb.google.com/102394476629197694908/201405#6007245395275925026″ caption=”” type=”image” alt=”워드프레스반응형테마.jpg” ]

잘 팔리는 워드프레스 테마의 90%이상은 반응형 웹디자인이 적용 

가장 큰 워드프레스 마켓인 테마포레스트(Themeforest.net)에서 손쉽게 저렴한 비용으로 반응형 웹 테마를 구할수 있기 때문입니다.

물론 테마 설계 기획자의 수준차이별로 반응형 웹 디자인의 수준도 차이가 나지만 대부분의 경우 높은 수준의 반응형 웹디자인을 제공하고 있습니다.