나무모에 미러 (일반/밝은 화면)
최근 수정 시각 : 2024-10-29 14:42:28

반응형 웹

파일:반응형 웹 디자인.png
반응형 웹 디자인을 적용한 웹 액츄얼리
Responsive Web

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

[clearfix]

1. 개요

웹 디자인 기법 중 하나. 디바이스 디스플레이 종류에 반응하여 그에 맞도록 적절하게 UI 요소를 유기적으로 배치하도록 설계한 웹을 말한다.

2. 탄생 배경

과거 웹사이트들은 대부분 PC에서만 볼 수 있고, 피처폰 시절에도 WAP을 통한 인터넷 접속은 가능했으나, 기술상의 제약과 기기 성능의 한계, 좋지 않은 사용 편의성 등의 이유로 일반적인 인터넷처럼 사용하기에는 무리가 많았고, 통신 회사에서 데이터 요금제를 홍보하지 않고 사용료를 비싸게 책정하는 바람에 사용률이 매우 낮았다.[1]

기술이 발전하여 PC뿐만 아니라 스마트폰, 태블릿 컴퓨터[2], 텔레비전 등 전자 기기 대부분이 웹에 접속할 수 있지만, 화면 크기가 서로 다른 탓에 같은 웹 페이지를 여러 종류 만들어야 하는 불편함을 해결하기 위해 반응형 웹 페이지가 탄생했다.

3. 의미

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

4. 기법

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

4.1. 미디어 쿼리

CSS Media Queries

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

예문

#!syntax css @media 미디어 타입 (너비 및 높이) {
    (CSS 입력)
}

미디어 타입은 all, print, screen, speech 등등으로 나뉜다.

너비 및 높이는 min-이나 max-으로 최대인지, 아니면 최소인지를 정한다.

그리고 CSS 입력은 말 그대로 CSS를 입력하는 것이다.

4.2. 유동형 그리드

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

4.3. 반응형 레이아웃

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

4.4. 뷰포트 설정

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

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

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

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

5. 특징


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

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

모바일 사이트에 비해서 무겁다는 단점이 있다. 이는 사이트 속도와 이어지는 문제로, 사용자 입장에서는 불편하게 느낄 수도 있다. 반응형 웹 디자인은 모바일 사이트보다 읽어 들이는 소스가 많아서 불필요하게 많은 데이터를 소비할 수도 있고, 데스크톱 사이트와 모바일 사이트의 용도가 다르면 반응형 웹 디자인이 오히려 나쁠 수 있다. 이 때문에 서버 사이드 스크립트[3]를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있다.

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

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

나무위키에 문서가 있는 웹사이트만 등재해 주세요. 부트스트랩 프레임워크를 적용한 웹사이트는 해당 문서에 등재해 주세요.

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

7. 관련 문서

[1] WAP이 쓰이던 당시 CDMA2000의 패킷(0.5KB)당 텍스트는 4.55원, 게임을 포함한 소용량 멀티미디어는 1.75원, 동영상과 원음 벨소리 등 대용량 멀티미디어는 0.9원, 인터넷 직접 접속은 0.25원으로 상당히 비쌌다. 심지어는 요금 폭탄을 맞은 학생이 자살하는 사건까지 발생하면서 범국민 데이터 요금제나 프리존 등의 전용 요금제가 등장하기도 했다.[2] 사실상 태블릿 컴퓨터 때문에 반응형 웹 디자인이 나왔다고 봐도 무방하다. 이후에는 스마트폰과 태블릿 컴퓨터의 특징을 합친 폴더블 스마트폰이 등장하기도 하였다.[3] PHP, ASP, ASP.NET, JSP, Node.js, Ruby on Rails, Python 등.[4] 한국 지부에서 처음 만들어서 본사를 포함한 다른 지부에 적용하였다.[5] 광고로 인해 모바일에서 가로 모드에서 세로 모드로 변경할 시 여백이 많이 남는 현상이 있는데, 이는 광고 차단 프로그램을 사용하여 광고를 제거하면 해결할 수 있다.[6] 대한민국 최초의 반응형 웹 디자인 사이트로 알려져 있다.[7] 기본 템플릿이 반응형 웹 디자인이며, 어지간한 서드 파티 템플릿들도 다 반응형 웹 디자인을 지원한다.[8] 위키메이슨은 Bootstrap 기반의 템플릿을 이용하므로 이 목록에서는 적지 않는다.

분류