반응형 웹 디자인

  상위 문서: 디자인

  관련 문서: 디자이너

반응형 웹 디자인이 적용된 웹 액츄얼리

Responsive Web Design

1. 개요
2. 탄생 배경
3. 의미
4. 기법
4.1. 미디어 쿼리
4.2. 유동형 그리드
4.3. 반응형 레이아웃
4.4. 뷰포트 설정
5. 특징
6. 반응형 웹 디자인이 적용된 사이트
6.1. 데스크톱 페이지만 반응형으로 운영하는 사이트

1. 개요

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

2. 탄생 배경

과거 웹사이트들은 대부분 데스크톱에서만 볼 수 있고, 피처폰 시절에도 WAP을 통한 인터넷 접속은 가능했으나, 여러가지 문제로 일반적으로 사용하기에는 무리가 많았고, 통신회사에서 데이터 요금제를 홍보하지 않고 사용료를 비싸게 책정하는 바람에 사용률이 매우 낮았다. WAP이 쓰이던 당시 패킷(0.5KB)당 텍스트는 4.55원, 게임을 포함한 소용량 멀티미디어는 1.75원, 동영상과 원음 벨소리 등 대용량 멀티미디어는 0.9원, 인터넷 직접접속은 0.25원으로 상당히 비쌌다. 심지어는 요금폭탄을 맞은 학생이 자살하는 사건까지 발생하면서 범국민 데이터 요금제프리존 등의 전용 요금제가 등장하기도 했다.

나중에는 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 컴퓨터[1], 텔레비전 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었지만, 전자기기들의 화면의 크기가 다른 탓에 여러가지 버전의 웹페이지를 만들어야 했다. 이러한 불편함을 해결하기 위해 반응형 웹페이지가 탄생했다.

3. 의미

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

4. 기법

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

4.1. 미디어 쿼리

CSS Media Queries

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

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

4.2. 유동형 그리드

유동형 그리드(Fluid Grids)는 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법을 말한다. 즉 웹브라우저 창 크기를 늘이거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변한다는 뜻이다. 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.

4.3. 반응형 레이아웃

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

4.4. 뷰포트 설정

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

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

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

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

5. 특징

  • 하나의 코드 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다. 특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않음. (CSS, JS 파일은 여러가지가 존재할 수 있다.)
  • 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL(대부분 m.domain.com 같은 식이다)이 있으면 반응형이라고 부르지 않는다.

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

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

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

인터넷 익스플로러(주로 IE8 이하)에서 깨져버린다는 단점도 있다. 미디어 쿼리로 반응형 웹을 구성하는 경우, 그걸 씹어먹고 적용돼버려서 결국에는 모바일 버전으로 보이게 된다. 이 경우 respond.js 등의 미디어쿼리를 강제적으로 인식, 적용시키게 해주는 스크립트 플러그인을 사용하면 구버전에서도 어느정도 반응형이 구현되기는 한다. 또는 CSS 명세시에 pc-first로 명세함으로서 구버전은 PC화면만 보이게 하는 방법도 있다.

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

나무위키에 해당 문서가 있는 경우만 등재해주세요. 단, 부트스트랩이 적용된 사이트는 해당 문서에 등재해주세요.

6.1. 데스크톱 페이지만 반응형으로 운영하는 사이트


  1. [1] 사실상 태블릿 컴퓨터 때문에 반응형 웹 디자인이 나왔다고 봐도 무방하다.
  2. [2] PHP, ASP, ASP.NET, JSP, Node.js, Ruby on Rails, Python 등.
  3. [3] 대한민국 최초의 반응형 웹 디자인 사이트로 알려져있다.
  4. [4] 광고로 인해 모바일에서 가로모드에서 세로모드로 변경할시 여백이 많이 남는다
  5. [5] 기본 템플릿이 반응형 웹 디자인이며, 어지간한 서드파티 템플릿들도 다 반응형 웹 디자인을 지원한다.
  6. [6] 위키메이슨Bootstrap 기반의 템플릿을 이용하므로 이 목록에서는 적지 않는다.

최종 확인 버전:

cc by-nc-sa 2.0 kr

Contents from Namu Wiki

Contact - 미러 (Namu)는 나무 위키의 표가 깨지는게 안타까워 만들어진 사이트입니다. (49.68ms)