자유게시판

|  놀이터라 생각하고 마음껏 떠들어요! ^^


반응형 디자인

(RWD: Responsive Web Design)

1.jpg

[사진=http://todaymade.com/]

 

반응형웹이란

 "Responsive" + " Web"  으로 "즉각 반응하는 웹" 이란뜻으로 디자이스의 종류(컴퓨터, 스마트폰, 태블릿)에 따라 웹페이지의 사이즈가 자동적으로 재조정된는 것을 말합니다.

  

어떠한 환경에서도 그에 맞게 사이즈가 변형되어 사용자가 보기 편하게끔 만든 웹디자인 

 

모바일의 활성화가 점차 가속화 되면서 웹사이트 운영자들은 데스크탑과 모바일용 두가지 사이트를 만들어 운영하는 경우가 많아졌습니다. 이는 사이트 제작 및 관리 비용을 두배로 증가시키는 요인이 되었습니다.

이러한 비효율적인 웹사이트 운영을 개선하고 2011년  Ethan Marcotte 에 의해 

Responsive Web Design  이 소개 되었습니다.  

 

 

 

<반응형 디자인의 장점>

 

1. 사용자와 친화적기능(다양한 디바이스 대응)

 

데스크탑, 노트북, 태블릿, 스마트폰 등 사용자가 이용하는 모든기기와

브라우저에 친화적인 화면을 제공할 수 있습니다.

 

모바일 검색량이 급증하고  PC  태블릿, 스마트폰 등 화면의 사이즈도 계속해서 다양해 지고 있습니다.

반응형웹은 모든 화면 사이즈를 고민해서 설계했기 때문에

다양한 화면 사이즈에서 최적화된 화면을 보여줄 수 있습니다.

 

2.jpg

[사진=http://bradfrost.com/]

 

 

2. 관리의 편의성

 

반응형 홈페이지는 하나의 페이지에 다양한 디자인을 미리 만들어 놓은 방식으로 제작되기 때문에

다양한 디지털 기기의 이미지를 별도로 제작 하지 않아도 됩니다.

 

3.jpg

[사진=http://inflomarketing.com/]

 

 

3. 검색엔진의 최적화

 

하나의 URL을 사용하기 때문에 검색엔진 최적화는 물론 키워드 광고까지 통합적으로 할 수 있습니다.

만약 반응형이 아니라면 모바일  URL/ PC  2개를 만들어야 합니다.

 

 

 

<반응형 디자인의 단점>

 

1. 홈페이지 만드는 비용 상승

 

기존홈페이지를 만드는 비용보다 반응형 홈페이지를 만드는 비용이 더 높게 측정됩니다.

그 이유는 하나의 반응형 홈페이지를 만들기 위해서는

다양한 화면을 제작해야하기 때문에 작업량 또한 많기 때문입니다.

 

2. 호환성 문제 발생

 

반응형 홈페이지를 만들때에는 미디어쿼리를 사용하여 모바일 PC를 구분합니다.

하지만 모든 PC에서 미디어 쿼리가 작동하지는 않습니다.

브라우저 버전이 높은 버전에만 작동되기 때문에 호환성이 문제가 큽니다.

 

3 복잡한 작업

 

반응형 홈페이지를 구현하기 위해서는 작업 시간이 오래 걸립니다.

HTML  코드 하나로 모바일과 컴퓨터를 모두 지원해야 되기 때문입니다.

 

 

4.jpg