반응형 웹 (1)

 

얼마 전 디자인업체와 이야기를 하다가 재미있는 소식을 들었습니다.

 

기존의 웹 브라우저들은 대부분 고정된 사이즈를 가지고 있었습니다.

브라우저 창을 크기를 줄이거나 늘려도 보이는 화면은 항상 같은 모습이었다는거였죠.

 

1~2년 전부터 스마트폰이 활성화 되면서 작은 해상도에서도 볼수 있는 화면이 필요했습니다.

사용자의 조건을 맞추기 위해서 별도의 모바일 페이지들을 만들어야 했습니다.

 

최근들어 다양한 크기의 화면과 각기 다른 해상도를 가진 태블릿 제품들이 쏟아지면서

PC에서 보는 화면과 모바일에서 보여줄 수 있는 화면에 한계에 다다르게 되었습니다.

 

예를 들어 아이폰4s 640x960 해상도에 맞춰진 모바일 페이지를 갤럭시S3 해상도인 720x1280 에서 본다고 할 때,

화면에 가득차지 않고 주변 공간이 남아서 보입니다. 지금 당장은 화면들을 보는데 불편함은 없지만, 계속해서 쏟아져 나오는 다양한 기기의 해상도를 맞추기엔 부족해보입니다. 사용자의 요구사항을 맞추기 위해서 다양한 해상도의 페이지를 만들기에도 한계가 있을겁니다.

 

이러한 요구사항을 충족해주기 위해서 '반응형 웹' 에 대한 준비를 하고 있다고 합니다.

 

 

1. 반응형 웹 디자인이란?

 

반응형 웹 디자인(Responsive Web Design)이란, 앞서 이야기한 대로 하나의 웹 사이트로 PC, 스마트폰, 태플릿 등 다양한 기기에 맞는 해상도따라 디자인이 변화하는 기술을 뜻합니다.

 

 

 

[참고 그림] 반응형 웹 디자인 샘플 (http://www.metabrain.com/responsive-web-designrwd)

 

 

2. 반응형 웹 디자인 준비 과정

 

- HTML, CSS3

반응형 웹 디자인을 하기 위해서는 html5 기술과 CSS3 요소를 최대한 활용해야합니다.

 

- 레이아웃

PC에서는 가로로 배치 되는 화면이 스마트폰에서는 가로 해상도가 작아서 세로로 보여줘야합니다.

이런식으로 각각 다른 해상도에 맞게 이미지를 몇 개 배치할 것인지, 몇 % 만큼 보여줘야 할지 고려해야 합니다.

 

-브라우저 테스트

HTML5 이 아직까지는 완벽하게 정착되지 않아서 익스플로어나 크롬, 사파리, 파이어폭스 등에서 보여지는 화면들이 각각 다를 수 있습니다. CSS3 디자인 요소를 활용해서 동일한 화면을 보여줄 수 있도록 해야합니다.

 

 

3. 반응형 웹 디자인 단점

 

반응형 웹 디자인의 핵심은 CSS에서 각각 해상도에 맞게 CSS 디자인을 다르게 보여주는 것에 있습니다.

예전에 하나의 화면을 표시하는데 한가지 CSS가 필요했다고 가정합니다.

반응형 웹을 위해서 모바일 화면 해상도 3가지, 태블릿 화면 3가지, PC에서 보여질 화면 1가지라고 친다면 7가지의 CSS가 필요하게 됩니다.

이런 환경에서는 하나의 기기에서 화면에서 볼때, 기존에는 하나의 CSS만 필요로 하는데 지금은 나머지 6가지 CSS 용량까지 불러오게 되어 퍼포먼스가 떨어진다고 볼 수도 있습니다.

요즘엔 인터넷 환경이 빨라지고 웹 브라우저에서 html 해석 속도가 빨라져서 큰 문제가 되지 않을 수도 있습니다.

 

 

^ㅇ^!!!

 

다음 강좌에서는 직접 소스 코드를 작성해서 테스트 해보도록 하겠습니다.