[Q&A] 반응형 웹 디자인이란?

반응형 웹 디자인이란 하나의 웹사이트가 PC, 태블릿, 스마트폰 등 다양한 디바이스의 해상도에 따라 적절한 레이아웃을 제공하는 기술입니다.  CSS를 통해 디바이스 해상도에 맞는 레이아웃을 구현하기 때문에 CSS를 사용하지 않는 디바이스의 경우 이 기술을 적용할 수 없습니다. (적용불가 예 - 네이티브 앱)

[그림.1] 반응형 웹 디자인 적용 샘플 (출처 : http://www.metabrain.com/responsive-web-designrwd

[바로가기] 반응형 웹 디자인 사이트 모음

반응형 웹디자인 구현에 필요한 지식 및 기술

 

기획.. 모든 기기에 최적화 될 수 있도록 심플하게 기획해야 하고 페이지 내의 요소별로 퍼센트를 고려하여 리사이즈 할것인지, 사진의 갯수을 줄이는 것과 같이 배치를 바꿀것인지, 모바일 버전에서 요소를 없앨것인지, 그 때 구현은 어떤 기술을 사용할 것인지 구체적인 플랜을 기획해야 함.

 

퍼블리싱.. 기본적으로 웹 표준에 대한 스킬을 보유하고 HTML5, 미디어쿼리 대한 기술을 습득해야 함.

 

 

디자인.. 그 동안 넓은 화면에 맘껏 표현하는 자유를 누려왔지만, 이제는 최소한의 내용으로 최대한의 내용을 전달해야 하는 고통과 더불어, 모든 디바이스에서 하나의 웹페이지로 반응하도록 디자인 해야함.

테스트.. 반응형 웹은 아직까지 표준화되지 않은 기술로 구현하는 만큼, 단순히 몇 개의 해상도를 고려하기 때문에 몇 개의 기기만을 테스트하는 것이 아니라, 기기마다 브라우저의 버전이 다르므로.. 현 시점 기준으로 가장 많이 풀린 모바일 기기의 브라우저를 체크하여 많은 테스트를 거쳐야 함...  예를 들어 데스크탑 웹페이지의 표준코딩과 함께 RWD의 테스트까지 디바이스 3개, 브라우저 7개를 고려한다면 21개의 테스트를 거쳐서 퍼블리싱 필요.

반응형 웹 디자인의 단점

 

반응형 웹 디자인은  인터넷을 사용할 수 없는 환경에서는 서비스가 불가능하며 인터넷 속도의 영향을 많이 받습니다.  또한 디바이스에 내장되어 있는 기능을 100퍼센트 활용하기가 어려워 서비스 퍼포먼스를 제대로 발휘할 수 없습니다.  페이스북의 경우 iOS용 앱으로 HTML5 적용 앱을 배포했다가 네이티브 앱으로 변경을 했는데, 수 많은 전문가들이 HTML5로 앱을 만든 것이 가장 큰 실수였다고 이야기를 하고 있습니다..  다시 말하면 모바일 환경에서는 네티이브 앱에 비해 하이브리드앱(반응형 웹 디자인)의 퍼포먼스가 많이 떨어집니다.

 

요약

 

반응형 웹 디자인의 경우 적은 비용으로 다양한 디바이스에 모두 대응할 수 있다는 장점이 있지만... 네이티브 앱에 비해  퍼포먼스가 떨어진다는 단점이 있습니다..  하지만 디바이스별 해상도가 점점 다양해지고 인터넷환경이 빠르게 발전하고 있어 반응형웹 디자인의 중요성이 점점 대두되고 있으며 가까운 시일내에 반응형 웹 디자인 기술이 대중화되지 않을까? 생각해봅니다. 
 

 

영수이야기. 여행에 푹~ 빠진 7년차 웹기획자. 현재는 하나투어의 대표 자회사 '투어스'에서 서비스 기획을 담당하고 있으며, 고객이 미소짓고 감동받는 서비스를 만들기 위해 여행객들의 니즈발견과 패턴분석에 집중하고있다. 과거 웹에이전시, 이러닝(크레듀, 웅진패스원), 벤처(와우플랜), 프리랜서 업계에 종사했으며, 그 동안의 경험을 토대로 사업계획, 시장분석, IA/UI/UX설계, 로그분석, 검색엔진 최적화, 마케팅 업무에 참여하고 있다. 그리고 2014년... 10년지기 연인과 결혼해버림.