반응형 웹 디자인

width=100%
반응형 웹 디자인이 적용된 웹 액츄얼리

Responsive Web Design

1 개요

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

2 탄생 배경

과거불과 몇 년전만 해도 웹사이트들은 대부분 데스크톱에서만 볼 수 있고, 또 데스크톱을 제외하면 웹(인터넷)에 접속 할 수 있는 기기가 거의 존재하지 않았다[1]. 하지만 최근 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 PC, TV 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었다. 하지만 이러한 전자기기들은 모두 다른 크기의 스크린을 가지고 있었고, 이를 최적화 시키기 위해 별도의 모바일 페이지를 제작하고 모바일 사용자일 경우 모바일 페이지로, 아닐 경우 기존 페이지로 이동하는 방식[2]을 사용해왔다. 그러나 이러한 방식은 문제점이 많았는데 대표적으로당연하게도 모바일 페이지를 별도로 구현해야한다는 점이다. 이러한 문제점을 해결하기 위해 반응형 웹이 등장하였다.

3 의미

넓은 의미로는 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미가 있는데, 이는 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공한다는 뜻이다. 또한 좁은 의미로는 CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 이용/사용하여 구현한 홈페이지를 뜻한다.[3]

4 기법

반응형 웹 디자인을 하기 위해서는 일반 웹 디자인과 다른 특별한 기법들이 사용된다. 이는 웹 디자인에 대한 높은 이해도와 새로운 레이아웃 등의 개념을 필요로 한다. 아래에 있는 내용은 전부 반응형 웹 디자인을 할 때 필수적인 기법들을 모아놓은 것이다.

4.1 미디어 쿼리

미디어 쿼리(Media Query)는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다. 디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수있다.

예를들어서, 1000px 이상의 스크린에서는 오른쪽에 와있던 사이드바가, 1000px 미만의 스크린(태블릿 등)에서는 아래쪽으로 빠지게되는 효과를 줄 수 있다.

4.2 유동형 그리드

유동형 그리드(Fluid Grids)는 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법을 말한다.[4] 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.

4.3 반응형 레이아웃

반응형 웹 디자인의 결과물로 볼 수 있다. 여러가지 패턴이 있으며, 일부는 HTML, CSS만으로 구현이 불가능한 것들도 있다. 참조

4.4 뷰포트 설정

뷰포트(viewport)란 모니터의 출력에 대한 화면 영역을 설정하는 것을 말한다. 뷰포트를 명시하지 않으면 반응형으로 웹디자인을 하더라도 PC 화면이 떠버리는 결과가 발생하게 된다.

2014년 기준으로 가장 많이 사용되는 뷰포트 명시법은 HTML의 <meta> 태그를 이용하는 방법인데, 이 방식은 사파리에서 처음 사용하여 크롬, 오페라, 파이어폭스 등으로 따라서 적용한 방식이다.

그러나 W3C에서 권장하는 방식은 CSS에서 직접 뷰포트를 명시하는 방식으로, 표준화가 완전히 되지 않아 IE10 이상과 오페라에서만 지원하고있다.

<meta> 태그를 이용한 방식과 다르게, CSS에서 뷰포트를 명시하게 되면 미디어 쿼리와 중첩하여 개발자에게 있어 보다 다양한 기법을 구현해낼 수 있다는 장점이 있다.

5 특징

  • 하나의 웹 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다.[5]
  • 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않는다.

반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 된다. 그리고 반응형 웹이 일반 웹 디자인과 다른 큰 이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점이다. 보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각 디바이스 별로 산출물이 생기기 때문에 초기 제작비용뿐만 아니라 추후 유지보수 인력과 비용까지 추가로 발생하게 된다.

요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있다. 하지만 반응형 웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 된다.

반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 특히 속도에 목숨을 거는 유저들에게 있어서 불편하게 느낄수도있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있다. 이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있다.

한국 한정이지만 아직까지도 쓰이고 있는 구버전 인터넷 익스플로러(주로 IE8 이하)에서 와장창 깨져버린다는 단점도 있다(...).[6] 특히 업그레이드에 제약을 받는 관공서의 컴퓨터가 심각한 편. ActiveX는 만악의 근원이다

6 반응형 웹 디자인이 적용된 사이트

나무위키에 항목이 있는 경우만 등재해주세요. 부트스트랩이 적용된 사이트는 해당 항목에 등재해주세요.

6.1 모바일 페이지만 반응형으로 운영하는 사이트

  1. ↑ 없지는 않았다. 피처폰 시절에도 인터넷 접속은 대다수 가능했다.(WAP,i-mode) 그러나 여러가지 문제로 일반적으로 사용하기에는 무리가 많았고, 설상가상으로 통신사에서 데이터 요금을 너무 비싸게 책정하는 바람에 거의 사용되지 않았다. 인터넷 한두시간 사용했는데 요금 고지서에 몇십만원이 찍혀 나올 정도였으니.... 이 데이터 요금이 현실화 된 것은 스마트폰이 대중화 되던 2010년 무렵부터였다.
  2. ↑ m.naver.com과 www.naver.com처럼
  3. ↑ 출처:http://rymuff.com/반응형-웹-디자인/
  4. ↑ 즉 웹브라우저 창 크기를 늘이거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변한다는 뜻이다.
  5. ↑ 특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않음. (CSS, JS 파일은 여러가지가 존재할 수 있다.)
  6. ↑ 미디어 쿼리로 반응형 웹을 구성하는 경우, 그걸 씹어먹고 적용돼버려서 결국에는 모바일 버전으로 보이게 된다(...).
  7. ↑ 우리나라 최초의 반응형 웹 디자인 사이트로 알려져있다.
  8. ↑ 최근 한국어 위키의 운영진에게 배워가서 적용했다.
  9. ↑ 기본 템플릿이 반응형 웹 디자인이며, 어지간한 서드파티 템플릿들도 다 반응형 웹 디자인을 지원한다.
  10. ↑ 위키메이슨은 Bootstrap 기반의 템플릿을 이용하므로 제외