레스폰시브 웹디자인(Responsive Web Design)이란?

 

레스폰시브 웹디자인과 SEO

레스폰시브 웹디자인과 SEO

레스폰시브 웹디자인의 메리트에 대해 설명합니다.

레스폰시브 웹디자인이란?

레스폰시브 웹디자인이란 페이지 레이아웃을 디바이스에 맞게 변화시킴으로써 단일 URL / HTML 페이지에서도 다양한 디바이스에 대응시킬 수 있도록 하는 웹디자인의 방법을 말합니다.  

기존의 웹디자인 기술로 다양한 디바이스에 대응 한 페이지를 만들 경우, 디바이스마다 URL을 가지고 있어야 하며, 각각에 적합한 페이지 레이아웃의 HTML 파일을 준비하지 않으면 안되었습니다.  그러나 이러한 방법은 HTML 파일을 하나 하나 처리해야하기 때문에 관리에 시간이 걸리거고, 한 페이지에 URL이 여러개가 되어버려, Google에서 제대로 색인되지 않는다는 문제점도 있었습니다.

 그래서 기존의 문제를 해결하는 새로운 웹디자인 기법으로 “레스폰시브 웹디자인”이 주목받게 되었습니다. 레스폰시브 웹 디자인을 채용하는 것으로 위와 같은 문제를 해소 할 뿐만 아니라, Google에서 사이트의 평가를 향상시키고 사용성도 향상시킬 수 있었습니다.  

최근에는 웹 페이지를 스마트폰에 대응시킬 필요성이 높아지고 있기 때문에, 웹마스터는 사이트 구축 방법의 하나로서 “레스폰시브 웹디자인”에 대해 검토하는것은 이제 기본저인 체크 항목으로 되어버렸습니다. 

 

레스폰시브 웹디자인을 만드는 방법

 

레스폰시브 웹디자인(레스웹)은 디바이스의 스크린의 폭에 따라 여러가지 CSS (스타일 시트)를 만들어서 사용 할 수 있어 디바이스마다 페이지 레이아웃을 변화시킵니다. 
구체적으로는 CSS3의 기능인 미디어 쿼리를 사용하여 각 CSS가 나타날 조건 (화면의 가로 폭의 범위)를 지정합니다.

예를 들어, 800 px 이상이면 PC용 CSS, 800 px 미만 750 px 이상이면 태블릿 용 CSS, 750 px 미만이면 스마트 폰용 CSS를 표시하는 방식으로 HTML에 기재를 합니다. 
그렇게 해서 장치마다 페이지 레이아웃을 변화시킬 수 있게 합니다. 

하지만 이대로라면 스마트폰이나 태블릿에서 페이지를 표시 할 때 콘텐츠의 크기가 맞지 않는 경우가 발생합니다.

따라서 페이지를 보기 쉽게 하기 위해 meta Viewport를 설정합니다. Viewport는 각기 다른 디바이스의 사이즈에 대응하기 위하여, 스마트폰 브라우저에 컴퓨터의 “창크기”를 조절하는 기능을 넣은 것으로 보면 됩니다.  Viewport를 설정하여 페이지의 가로 폭과 세로 폭, 배율 등을 지정할 수 있습니다. 

<meta name="viewport" content="width=device-width, user-scalable=no">

 이렇게 레스폰시브 웹디자인 만들기위해서는 미디어 쿼리에 의한 CSS를 지정하고, meta Viewport 설정을 하는것이 기본적인 순서입니다.

 

레스폰시브 웹디자인 의 장점

 

기존의 웹디자인 접근 방식과 비교하여 레스폰시브 웹디자인을 채택하면, 검색엔진최적화(SEO) 부분에서 장점은 많습니다.  다음은 검색엔진최적화에 대한 레스폰 시브 웹디자인의 주요한 장점입니다.

1.페이지의 업데이트가 효율적이며, 중복 콘텐츠를 막을수 있다.

레스폰시브 웹디자인 에서 페이지를 업데이트 할 때 HTML 파일 하나만 업데이트하는것으로  PC,모바일의 업데이트에 대응되기 때문에 작업에 걸리는 시간이 적습니다. 기존의 방법에서는 모바일 페이지를 별도로 갱신하는 것을 잊어버리는 실수가 종종 발생하지만, 레스폰시브 웹디자인에서는 그런한 실수가 발생하기 힘들어집니다.
페이지의 URL이 한개이기 때문에, 다른 방식 보다 중복컨텐츠가 생성 리스크가 낮아지고, 관리면에서도 한가지 타입의 URL로 운영되므로, 링크의 리소스가 분산될 위험이 적어집니다.  

2.Google 최신 상태를 인덱스시키기 쉽다

레스폰시브 웹디자인의 경우 URL이 하나이기 때문에 Googlebot이 사이트 내부를 크롤링하기 쉽습니다. 따라서 업데이트 작업등을 한 경우에도 Google에 최신 페이지를 정확하게 가져갈 수 있게 됩니다. 

3.사용자 정보 공유가 쉽고, 사용자 평가하기

레스폰시브 웹디자인으로 만들어진 사이트는 디바이스에 대한 접근성이 높고,  하나의 URL로 정보를 공유 할 수 있기 때문에 사용자 경험이 높아지고 공유및 분석,평가하기가 쉬워집니다.

이러한 다양한 메리트가있으므로, 레스폰시브 웹디자인을 채용하여 사이트의 액세스 업 등을 기대할 수도 있을것 같습니다. 그러나 레스폰시브 웹디자인 에도 단점이 없는 것은 아니므로 리스폰시브웹사이트를 제작시 선택 할 경우에는 주의가 필요합니다.

예를 들어, 레스폰시브 웹디자인 구축에 상대적으로 높은 비용을 부담해야 하고, 디자인의 자유도도 기존 방식에 비해 낮아질 수 있다는 것입니다.   
레스폰시브 웹디자인도 최선의 방법은 아니기 때문에 사이트 구축의 목적 및 활용도 그리고 레스웹을 선택 할 때에 따른 장점과 단점을 잘 감안하여 결정해야 합니다.

 

다른 디자인 방법과 함께하는 것이 중요

 레스폰시브 웹디자인의 검색엔최적화에 대한 메리트에  대해  설명하였습니다만,  레스폰시브 웹디자인은 멀티 디바이스에 대응한 페이지를 구축하는 방법에서 장점이 많으며, 검색엔진최적화 측면에서도 유효합니다.  구글의 공식문서 등을 보면  레스폰시브 웹을 추천하고 있습니다. 하지만, 검색에서의 우선권을 준다는 의미는 아니므로  상황에 맞는 다양한 디자인의 사이트를  채용하는등 유연한 대응이 필요합니다.

스마트폰 대응 사이트의 수요는 해마다 증가하고 있으며, 구글의 모바일친화적 알고리즘이 적용되기 시작하였기 때문에, 레스폰시브 웹디자인을 잘 이용하여 사용자 편의성, 검색엔진최적화를 모두 만족할 수 있는 사이트를 운영을 해나가는 것이 앞으로더욱 중요해질 것입니다. 

Please follow and like us:

Social media & sharing icons powered by UltimatelySocial
RSS
Facebook
Facebook
Google+
Google+
http://www.aun-korea.com/%EB%A0%88%EC%8A%A4%ED%8F%B0%EC%8B%9C%EB%B8%8C-%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8responsive-web-design%EC%9D%B4%EB%9E%80/">
SHARE
YouTube
YouTube
NaverPost
NaverBlog