[PNG image (369.44 KB)] |
| 반응형 웹 디자인(Responsive Web Design)[1] |
2. 탄생 배경 ¶
과거정작 몇년전만 해도 웹사이트들은 대부분 데스크톱에서만 볼 수 있고, 또 데스크톱을 제외하면 웹(인터넷)에 접속 할 수 있는 기기가 거의 존재하지 않았다[2]. 하지만 최근 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 PC, TV 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었다. 하지만 이러한 전자기기들은 모두 다른 크기의 스크린을 가지고 있었고, 이를 최적화 시키기 위해 별도의 모바일 페이지를 제작하고 모바일 사용자일 경우 모바일 페이지로, 아닐 경우 기존 페이지로 이동하는 방식[3]을 사용해왔다. 그러나 이러한 방식은 문제점이 많았는데 대표적으로당연하게도 모바일 페이지를 별도로 구현해야한다는 점이다. 이러한 문제점을 해결하기 위해 반응형 웹이 등장하였다.
3. 의미 ¶
넓은 의미로는 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미가 있는데, 이는 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공한다는 뜻이다. 또한 좁은 의미로는 CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 이용/사용하여 구현한 홈페이지를 뜻한다.[4]
4. 기법 ¶
반응형 웹 디자인을 하기 위해서는 일반 웹 디자인과 다른 특별한 기법들이 사용된다. 이는 웹 디자인에 대한 높은 이해도와 새로운 레이아웃 등의 개념을 필요로한다. 아래에 있는 내용은 전부 반응형 웹 디자인을 할때 필수적인 기법들을 모아놓은 것이다.
4.1. 미디어 쿼리 ¶
미디어 쿼리(Media Query)는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다. 디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수있다.
예를들어서, 1000px 이상의 스크린에서는 오른쪽에 와있던 사이드바가, 1000px 미만의 스크린(태블릿 등)에서는 아래쪽으로 빠지게되는 효과를 줄 수 있다.
4.2. 유동형 그리드 ¶
유동형 그리드(Fluid Grids)는 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법을 말한다. 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.
4.4. 뷰포트 설정 ¶
뷰포트(viewport)란 모니터의 출력에 대한 화면 영역을 설정하는 것을 말한다. 뷰포트를 명시하지 않으면 반응형으로 웹디자인을 하더라도 PC 화면이 떠버리는 결과가 발생하게 된다.
2014년 기준으로 가장 많이 사용되는 뷰포트 명시법은 HTML의 <meta> 태그를 이용하는 방법인데, 이 방식은 사파리에서 처음 사용하여 크롬, 오페라, 파이어폭스 등으로 따라서 적용한 방식이다.
<meta> 태그를 이용한 방식과 다르게, CSS에서 뷰포트를 명시하게 되면 미디어 쿼리와 중첩하여 개발자에게 있어 보다 다양한 기법을 구현해낼 수 있다는 장점이 있다.
5. 특징 ¶
- 하나의 웹 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다.[5]
- 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않는다.
요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있다. 하지만 반응형 웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 된다.
반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 특히 속도에 목숨을 거는 유저들에게 있어서 불편하게 느낄수도있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있다. 이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있다.
----
- [1] 예시 사이트는 웹액츄얼리#
- [2] 없지는 않았다. 피처폰 시절에도 인터넷 접속은 대다수 가능했다.(WAP,i-mode) 그러나 여러가지 문제로 일반적으로 사용하기에는 무리가 많았고, 설상가상으로 통신사에서 데이터 요금을 너무 비싸게 책정하는 바람에 거의 사용되지 않았다. 인터넷 한두시간 사용했는데 요금 고지서에 몇십만원이 찍혀 나올 정도였으니.... 이 데이터 요금이 현실화 된 것은 스마트폰이 대중화 되던 2010년 무렵부터였다.
- [3] m.naver.com과 www.naver.com처럼
- [4] 출처:http://rymuff.com/반응형-웹-디자인/
- [5] 특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않음. (CSS, JS 파일은 여러가지가 존재할 수 있다.)
- [6] 우리나라 최초의 반응형 웹 디자인 사이트로 알려져있다.