반응형웹제작 배경

 

과거에는 대부분 컴퓨터를 활용하여 인터넷 웹사이트에 접속 했습니다. 하지만 요즘은 다양한 스마트 기기(스마트폰, 패드, 탭)들이 등장하면서 사람들과 웹 페이지를 연결해 주는 장치도 다양해 졌습니다.

하지만 이런 과정에서 한 가지 문제가 생겼습니다. '화면의 크기와 구성'이 문제된 것이지요. 컴퓨터 모니터는 스마트폰에 비하여 비교할 수 없을 만큼 크기가 큽니다. 여기에 담겨진 내용을 스마트폰에 넣으려고 하니 문제가 생긴 것이지요. 모든 내용을 담기 위해서는 글자가 너무 작아져 사람들이 읽을 수 없는 수준에 이르게 되기 때문입니다.

따라서 같은 페이지라고 할지라도 어떤 장치로 접속하느냐에 따라 다른 종류의 화면을 보여줘야 할 필요성이 생기기 시작했습니다. 하지만, 여러 개의 페이지를 만드는 것 또한 불편한 일이었습니다. 스마트폰용 페이지를 따로 만들고, 컴퓨터 접속용 페이지를 따로 만든다면 제작자가 많이 불편하겠죠?

이런 가운데 등장한 것이 바로 반응형웹입니다. 반응형웹을 이용하면, 페이지 소스는 하나이지만 접속한 기기에 맞게 페이지의 해상도와 레이아웃이 유동적으로 변합니다. 수많은 종류의 스마트폰이 각각 다른 크기의 화면을 가지고 있습니다. 이럼에도 불구하고 모든 기기에서 무리 없이 웹 페이지에 접속하여 볼 수 있는 것은 반응형웹의 역할 때문이랍니다.

이처럼 반응형 웹은 어떤 기기로 접속하더라도 최적의 웹 페이지를 볼 수 있도록 환경을 제공해주고 있습니다. 컴퓨터뿐만 아니라 수많은 종류의 스마트기기가 만연한 시대에 없어서는 안 될 중요한 도구인 것입니다.

반응형 웹

 

[ Responsive Web , 反應型- ]

요약 단말의 종류와 화면 크기에 실시간 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹.

스마트폰 같은 모바일 단말의 이용량이 늘면서 데스크톱 위주의 기존 웹 사이트가 작은 화면에는 적당하지 않아 웹 페이지를 사용자의 화면 크기에 자동으로 맞춰 보여주는 기술이 필요하게 되었다.

반응형 웹 구현에 사용되는 대표적인 기술은 종속 스타일 시트 3 버전(CSS3: Cascading Style Sheets version 3)이다. 웹 문서 내 미디어 스타일 설정에 사용하는 미디어 쿼리(media query)를 이용하면 단말 화면의 폭이나 높이에 따라 레이아웃이 자동으로 구성된다. 글자 크기를 자동으로 조정하기 위해서는 폰트의 고정 크기 단위인 px(픽셀)이 아닌 상대 단위인 em(엠)을 사용하면 된다. 또 이미지 크기는 상대 비율 단위인 %를 이용하면 반응형 웹 화면을 구현할 수 있다.

화면 크기에 대응하여 웹 페이지의 레이아웃이 바뀌는 반응형 웹과 달리 웹 페이지를 다양한 화면 크기별로 미리 제작하여 보여주는 ‘적응형 웹(Adaptive web)' 방식도 있다.

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)이다. 반대말은 디바이스별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.