죠셉의 세상이야기

-반응형 웹 디자인이 무엇일까요?

웹 개발을 하다 보면 반응형 웹이 어쩌고 하는 이야기를 듣습니다.

저는 웹개발자이기에, 자세히는 모르지만 디자이너분들이 이야기하는 반응형 웹 디자인이 무엇인지 한번 알아보겠습니다. 앞전에 설명한 부트스트랩의 경우도 반응형 웹 디자인의 일부입니다.

부트스트랩 정의

-반응형 웹 디자인의 정의

반응형웹디자인. 영어로는 Responsive Web Design라고 하는군요.

웹 디자인 기법 중 하나로 웹(Web)에 접속하는 디바이스에 반응하는(Responsive) 디자인(Design)을 말합니다.

과거불과 몇 년전만 해도 웹사이트들은 대부분 데스크톱에서만 볼 수 있고, 또 데스크톱을 제외하면 웹(인터넷)에 접속 할 수 있는 기기가 거의 존재하지 않았습니다.

물론 피처폰 시절에도 인터넷 접속은 대다수 가능했니다만.(WAP,i-mode) 여러가지 문제로 일반적으로 사용하기에는 무리가 많았고, 설상가상으로 통신사에서 데이터 요금을 너무 비싸게 책정하는 바람에 거의 사용되지 않았습니다. 

인터넷 한두시간 사용했는데 요금 고지서에 몇십만원이 찍혀 나올 정도였으니 말이죠. 

이 데이터 요금이 현실화 된 것은 스마트폰이 대중화 되던 2010년 무렵부터였습니다. 

하지만 최근 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 PC, 텔레비전 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었습니다. 

하지만 이러한 전자기기들은 모두 다른 크기의 스크린을 가지고 있었고, 이를 최적화 시키기 위해 m.naver.com처럼 별도의 모바일 페이지를 제작하고 모바일 사용자일 경우 모바일 페이지로, 아닐 경우 www.naver.com처럼 기존 페이지로 이동하는 방식을 사용해왔습니다. 

그러나 이러한 방식은 문제점이 많았는데 대표적으로 당연하게도 모바일 페이지를 별도로 구현해야 한다는 점입니다.  이러한 문제점을 해결하기 위해 반응형 웹이 등장하였습니다.

넓은 의미로는 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미가 있는데, 이는 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공한다는 뜻입니다. 

또한 좁은 의미로는 CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 이용/사용하여 구현한 홈페이지를 뜻합니다.

반응형 웹 디자인의 기법으로는 미디어 쿼리(Media Query), 유동형 그리드(Fluid Grids), 반응형 레이아웃,뷰포트(viewport)가 있다고 합니다.

반응형 웹디자인의 특징으로는 

1. 하나의 웹 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있습니다. 

특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않습니다. (CSS, JS 파일은 여러가지가 존재할 수 있습니다.)

2. 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않습니다.

을 들수 있겠네요.

반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 됩니다. 

그리고 반응형 웹이 일반 웹 디자인과 다른 큰 이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점입니다. 

보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각 디바이스 별로 산출물이 생기기 때문에 초기 제작비용뿐만 아니라 추후 유지보수 인력과 비용까지 추가로 발생하게 됩니다.

요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있습니다. 

하지만 반응형 웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 됩니다.

반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점입니다. 

이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 불편하게 느낄수도 있습니다. 

반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있습니다. 

이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있습니다. 

한국 한정이지만 아직까지도 쓰이고 있는 구버전 인터넷 익스플로러(주로 IE8 이하)에서 와장창 깨져버린다는 단점도 있다고 하네요. 미디어 쿼리로 반응형 웹을 구성하는 경우, 그걸 씹어먹고 적용돼버려서 결국에는 모바일 버전으로 보이게 됩니다. 특히 업그레이드에 제약을 받는 관공서의 컴퓨터가 심각한 편이라고 하네요. 

제가 근무하던 공공기관들은 그냥 모바일은 간단한 공지사항 정도만 볼수 있고, 대부분의 처리는 웹에서 할게 하였는데, 장점만 있는게 아니라서 쉽게 변경을 못하는거 같네요.

현재 보고 계시는 제 블로그도 원래는 반응형 스킨을 사용했는데, 데스크탑용으로 변경하니 속도가 좀 빨라진 거 같기도 하구요.

사람들이 반응형 반응형 그러던데, 무슨뜻인지 몰라서 벙쪄있던 적도 있었는데, 정의는 그렇게 어려운것이 아니네요.  반응형 웹디자인( Responsive Web Design)에 대해서 알아보았습니다.

출처 : 나무위키, 본인생각