[CSS] 반응형 웹 만들기(Responsive Web)

반응형 웹 정의

1. 개요

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

2. 탄생 배경

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

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

3. 의미

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

4. 기법

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

4.1. 미디어 쿼리

미디어 쿼리(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이 있으면 반응형이라고 부르지 않는다.

태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(url)을 만들 수 없습니다. 그에 대한 대응 방안으로 반응형 웹이 뜨고있습니다.

반응형 웹(Responsive Web)

그렇다면 반응형 웹이란 무엇일까요? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이죠. 오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공합니다.

반응형 웹에 있어서 빼놓을 수 없는 개념이 모바일 퍼스트입니다. 모바일 퍼스트는 웹 디자인을 할때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법입니다. 이 개념은 앞서 말했 듯 태블릿 PC, 스마트 폰등 모바일 기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 됐습니다. 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것에 있습니다. 모바일의 제약은 크게 세가지로 나눌 수있습니다.

모바일 기기의 스크린 크기
네트워크 속도 및 품질
사용하는 모드

위 세가지 제약을 통해 일반 웹은 모바일 웹에 있어서 불필요한 요소(기능/형식/꾸미기/이동)들을 가지고 있다고 판단합니다. 불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타냅니다. 그리고 사용자들에게 사용하기 편하고 작업을 빠르게 처리할수 있는 웹을 제공 합니다. 그 중 가장 대표적인 것으로 일반 웹 메뉴를 한 버튼으로 축소 시켜놓고 첫 화면부터 컨텐츠를 보여주는 것입니다.

반응형 웹은 고 사양(고 해상도)웹이 저 사양(저 해상도) 모바일 기기에서도 불편함이 없이 구현이 되는데 초점이 맞춰져 있습니다. 주로 레이아웃과 스타일 변화에 초점을 맞추어서 진행이 됩니다. 하지만, 레이아웃과 스타일 보다는 웹 컨텐츠를 모바일 퍼스트 관점으로 재구성하는 반응형 웹도 있습니다. 이는 사용자가 사용하는 기능에 대해 연구하고 사용자가 필요로하는 기능을 중심으로 우선순위를 둬서 제공합니다. 반응형 웹의 최종형은 위 두가지를 섞어놓아 모든 기기에서 사용사자 원하는 컨텐츠를 보기좋게 제공하는 것 이라고 생각합니다.

미디어 쿼리(Media Query)

CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용 시키는게 가능했습니다. 하지만 미디어 타입만으로는 해당 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지 않았습니다. CSS3은 위 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다.

미디어 쿼리를 적용하는 방법은 다음과 같습니다.

미디어 쿼리 적용법

1) <link>

<link>태그는 <head>태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 CSS파일을 불러옵니다.

<link href="cssfile.css" media="screen and (min-width: 512px) and (max-width: 1024px)" rel="stylesheet">

2) <style>

<style>태그는 <head>태그 안에 위치하여 media 속성 안 조건에 만족 할 때 스타일을 적용 시킵니다.

<style type="text/css" media="screen and (min-width: 512px) and (max-width:1024px)">   /* style */ </style>

3) <style> - @import

<style>태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 CSS파일을 불러옵니다.

<style>       @import url(cssfile.css) screen and (min-width: 152px) and (max-width: 1024px); </style>

4) CSS파일

불러온 CSS파일 안 혹은 <style>태그 안에서 직접 미디어 쿼리를 작성하여 만족할 때 해당 스타일을 적용 시킵니다.

@media screen and (min-width:512px) and (max-width:1024px)

media속성이 뭔지, 또는 미디어 쿼리의 문법이 무엇인지 궁금하셨을텐데요. 미디어 쿼리의 문법은 다음과 같습니다.

미디어 쿼리 문법

only | not의 위치에는 말 그대로 only키워드 또는 not키워드가 들어가게 되는데 only키워드는 뒤의 조건 만, not키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할경우 적어주는 것이 좋습니다.

미디어 타입의 종류는 다음과 같습니다.

all : 모든 미디어 타입
aural : 음성 합성장치
braille : 점자 표시 장치
handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
print : 인쇄 용도
projection : 프로젝터
screen : 컴퓨터 스크린
tty : 디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치등 고정 된 글자를 사용하는 미디어
tv : 음성과 영상이 동시 출력 되는 장치
embrossed : 페이지에 인쇄된 점자 표지 장치

위 타입에서 실제로 많이 쓰이는 미디어 타입은 all과 screen, print 입니다 . screen의 경우 대부분의 컴퓨터와 모바일 기기를 뜻합니다. handheld를 모바일 기기로 생각하시는 분들도 계시겠지만 모바일 기기는 handheld가 아닌 screen이라는 것을 꼭 확인 하셔야합니다. 위 문법에서 미디어 타입은 한 가지만 들어올 수 있는 것이 아닙니다. 쉼표(,)를 통해서 미디어 타입을 나열하면 나열한 모든 미디어 타입을 뜻합니다.

미디어 쿼리문의 속성과 속성 값은 다음과 같습니다.

width : 웹페이지의 가로 길이를 판단합니다.
height : 웹페이지의 세로 길이를 판단합니다.
device-width : 단말기의 물리적인 가로길이를 판단합니다. 즉, 기기의 실제 가로 길이를 판단합니다.
device-height : 단말기의 물리적인 세로길이를 판단합니다. 즉, 기기의 실제 세로 길이를 판단합니다.
orientation : width와 height을 구하여 width 값이 길면 landscape로, height 값이 길면 portrait로 판단합니다.
aspect-ratio : width/height 비율을 판단합니다.
device-aspect-ratio : 단말기의 물리적인 화면 비율을 판단합니다.
color-index : 단말기에서 사용하는 최대 색상수를 판단합니다.
monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계를 판단합니다.
resolution : 지원하는 해상도를 판단합니다. 값으로 dip(인치당 도트 수)나 dpcm(cm당 도트 수)를 사용합니다.
color : 단말기에서 사용하는 최대 색상 수의 비트 수를 판단합니다. 자연수를 쓰지만 2의 지수를 뜻합니다.예: 1 은 2 , 2는 4 , 3은 8...

미디어 쿼리 속성은 프로그래밍 언어와같이 =, >, < 등의 연산자를 사용하지 않으며 속성 명 앞에 min- 또는 max- 를 붙여서 최솟 값 , 최댓 값을 판단합니다. 속성은 and (속성 : 속성 값) and (속성 : 속성 값)으로 나열 할 수 있으며 min- max-를 이용 할 경우 범위로도 설정이 가능합니다. resolution 같은 기능이 필요한 이유는 아이폰3 와 아이폰 4같이 화면의 크기는 같지만 지원하는 해상도가 다른 기기의 경우를 판단할 때 쓰면 좋습니다.

<html>       <head>         <style>             div{                 width: 100%;                 height: 100%;             }             @media screen and (max-width:100px){                 div{background-color: blue;}              }             @media screen and (min-width: 100px) and (max-width:200px){                 div{background-color: red;}              }             @media screen and (min-width: 200px){                 div{background-color: green;}              }         </style>     <body>         <div></div>     </body> </html>

[예제1] 간단한 미디어 쿼리

위 예제는 간단한 미디어 쿼리에 대한 예제입니다. 웹에 접근한 기기가 screen일 때 가로 길이가 100px 미만(max-width:100px) 이면 배경을 파란색으로, 200 px이상 이면 초록색으로, 그 사잇 값이면 빨간색으로 지정됩니다. 이처럼 min-, max- 값으로 이상, 이하를 조절할 수 있으며 조건 문을 이용하여서 다양한 스타일을 줄 수 있습니다. 위에 나온 속성과 속성 값들을 적절히 이용하면 더 많은 기기에서 다양한 스타일을 느낄 수 있습니다.

/* 스마트폰 가로+세로 */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ }   /* 스마트폰 가로 */ @media only screen and (min-width : 321px) { }   /* 스마트폰 세로 */ @media only screen and (max-width : 320px) { }  /* 데스크탑 브라우저 가로 */ @media only screen and (min-width : 1224px) { }  /* 큰 모니터 */ @media only screen and (min-width : 1824px) { }

Andy Clarke의 기기별 미디어 쿼리

위 코드는 Andy Clarke라는 사람이 작성한 기기별 미디어 쿼리입니다. 분류는 크게 데스크탑 브라우저, iPhone, iPad, 스마트 폰(저 해상도와 고 해상도)로 구분되어 있습니다. 참고해서 보시면 좋습니다.

유동형 그리드(Fluid Grid)

유동형 그리드를 설명 드리기 전에 간단하게 그리드에 대해서 설명 드리겠습니다. 그리드는 웹 화면의 폭을 몇개의 컬럼으로 나누는 것입니다. 상황에 따라서 몇개의 컬럼들을 묶어서 사용하며(이를 class라 합니다), 컬럼들의 폭과 다른 컬럼과의 간격도 일정하게 유지합니다. 대표적으로 960 Grid System이 있습니다.

위 그림은 960 Grid System중 12컬럼 그리드입니다. 화면을 12개의 컬럼으로 나누어 12가지의 클래스의 모양으로 다양한 레이아웃을 만듭니다. 위 그림처럼 고정 값을 가질 수도 있으며 다른 값을 가질 때에는 아래 그림처럼 컬럼의 갯수의 형태로 표현을 합니다. 960 Grid System의 자세한 사항은 위 출처를 통해 보시면 됩니다.
유동형 그리드는 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하는 것을 말합니다. 즉, 가로 폭길이의 변화에 따라서 컬럼의 크기가 상대적으로 변하게 하는 방법입니다.

<html>       <head>         <style>             div{                 height: 100%;                 float:left;             }             #grid_1{                 width: 30%;                 background-color: green;             }             #grid_2{                 margin-left: 5%;                 width: 45%;                 background-color: blue;             }             #grid_3{                 margin-left: 5%;                 width: 15%;                 background-color: red;             }         </style>     <body>         <div id="grid_1"></div>         <div id="grid_2"></div>         <div id="grid_3"></div>     </body> </html>

[예제2] 유동형 그리드

위 예제는 간단한 유동형 그리드예제 입니다. 위 결과와 같이 레이아웃은 유지된 상태로 웹의 가로 길이에 따라 div의 width 값이 바뀝니다. 이는 div의 width값을 고정 값이 아닌 %값으로 줌으로써 유동적으로 전체 가로길이에 따라 div의 width 값이 변합니다.유동형 그리드는 이처럼 반응형 웹을 구현하는데 간단하게 쓸 수 있는 기법입니다. 하지만 가로 폭에 반응을 하면서 레이아웃에는 변화가 없어 폭이 많이 좁은 모바일에서는 큰 효과를 볼 수 없습니다. 유동형 그리드 외에 위의 미디어 쿼리를 써서 반응적으로 그리드의 고정 값을 변화시키는 반응형 그리드도 있습니다. 반응형 그리드는 아래 링크를 참조하시면 됩니다.
http://simplegrid.info/

유동형 레이아웃(Liquid Layouts)

유동형 레이아웃은 유동형 그리드와 같이 반응형 웹 기법 중 하나입니다. 레이아웃 크기를 유동형 그리드와 같이 상대적 단위로 지정하여 웹의 크기에 따라 유동적으로 변화를 줍니다. 또, 반응형 그리드와 같이 미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 바꾸어 주는 방법입니다. 특정 부분이 사라질 수 도 있고, 합쳐 지기도 하면서 유동적으로 레이아웃 구조가 바뀌며 사용자에게 제공됩니다.

<html>       <head>         <style>             div{                 height: 50px;                 float:left;             }             @media screen and (min-width:100px){                  div{                     height: 100px;                 }                 #layout_1{                     width: 30%;                     background-color: green;                 }                 #layout_2{                     margin-left: 5%;                     width: 45%;                     background-color: blue;                 }                 #layout_3{                     margin-left: 5%;                     width: 15%;                     background-color: red;                 }             }             @media screen and (max-width:100px){                  #layout_1{                     width: 30%;                     background-color: green;                 }                 #layout_2{                     margin-left: 5%;                     width: 65%;                     background-color: blue;                 }                 #layout_3{                     margin-top: 5%;                     width: 100%;                     background-color: red;                 }             }         </style>     <body>         <div id="layout_1"></div>         <div id="layout_2"></div>         <div id="layout_3"></div>     </body> </html>

[예제3] 유동형 레이아웃

위 예제는 간단한 유동형 레이아웃 예제입니다. 앞서 말씀드린 것과 같이 특정 크기에서 레이아웃 구조가 바뀌며 그 외 크기 변화에서는 변화에 따라 레이아웃의 크기만 변합니다. 미디어 쿼리로 인해 반응을 하며 레이아웃 구조에 변화를 주고 유동형 그리드와 같이 %단위를 써서 유동적인 레이아웃이 됩니다. 유동형 레이아웃은 반응형 웹 구현 개념중 하나로 특정한 레이아웃의 구조가 있는 것은 아니지만 여러 패턴이 존재합니다. 이 글에서는 LukeW 5가지 패턴에 대해서 소개합니다. 이미지와 글은 원글을 인용 하겠습니다. 출처는 링크로 걸어 놓았습니다.

Mostly Fluid

가장 작은 화면을 제외한 대부분 다른 작은화면에서는 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 그대로 유지합니다. 하지만, 가장 작은 화면에서는 수직으로 컬럼을 세우는 구조를 가지며 가장 많이 쓰이는 패턴입니다. Mostly Fluid 적용 예시링크 - Five Simple Steps

Column Drop

또 다른 인기있는 패턴중의 하나입니다. 화면이 작아짐에 따라 부차적인 컬럼을 아래로 떨어뜨리는 방법을 쓰는 패턴입니다. 대부분의 컬럼 폭은 화면 크기가 달라져도 변함이 별로 없다는 특징이 있습니다. Column Drop 적용 예시 링크 - Festival de Saintes

Layout Shifter

다양한 기기에 따라 각기 다른 레이아웃을 보여주는 패턴입니다. 복잡하고 많은 작업이 필요하지만 혁신적인 디자인을 담을 수 있다는 장점이 있습니다. Layout Shifter 적용 예시 링크 - Food Sense

Tiny Tweaks

하나의 컬럼을 사용하는 패턴입니다. 변화의 폭이 크지 않다는 특징이 있으며, 주로 글 내용을 중시하는 웹에서 많이 쓰이는 패턴입니다. Tiny Tweaks 적용 예시 링크- Future Friendly

Off Canvas

큰 화면에서는 모든 컬럼들을 보여주고 작은 화면에서는 하나의 메인 컬럼을 보여주며 다른 부가적인 컬럼들을 화면 밖에 숨겨놓는 패턴입니다. 숨겨져 있는 다른 컬럼은 필요할 때만 접근 하도록 합니다. 대표적으로 페이스북이 있습니다. Off Canvas 적용 예시 링크 - 페이스북 모바일

유연한 이미지(Flexible Images)

모든 화면에서 볼 수 있게 화면 폭보다 큰 이미지를 다운 받고 이미지의 스타일 값 max-width를 100%로, height를 auto로 설정하는 방법입니다. 단순히 이미지를 화면 폭에 맞게 가로/세로 길이를 줄였다 늘였다하는 방법으로 유연한 이미지가 완성 됩니다. 이미지 뿐 아니라 대부분의 비디오에도 적용이 가능합니다. IE구버전에서는 지원하지 않아 max-width가 아닌 width를 100%로 주는 방법으로 사용 됩니다.

<html>       <head>         <style>             img{                 max-width: 100%;                 height: auto;             }          </style>     <body>         <img alt="이미지" src="jsseo-140329-CSS-01.png">     </body> </html>

[예제 4] 유연한 이미지1

위 예제는 유연한 이미지에 대한 간단한 예제입니다. 앞서 말했 듯 max-width값과 height 값을 설정해주면 화면 크기에 따라 이미지 크기도 유연하게 변합니다. 하지만, 이와 같은 유연한 이미지는 모바일에서 봤을 때 작은 이미지면 충분한 작업을 해상도가 높은 이미지를 가져와 단순히 크기만 줄여 자원 낭비를 한다는 단점이 있습니다. 이러한 단점을 없애기 위해 모바일 퍼스트를 쓰는 방법이 있습니다. 모바일 기기에 쓰일 이미지를 먼저 다운받고 데스크탑과 같은 큰 화면의 이미지는 미디어 쿼리문을 써서 한번 더 다운 받는 방법입니다. 하지만, 이와 같은 방법도 데스크탑에서의 자원 낭비로 이루어 집니다.

이드's All about Coding