반응형 웹

반응형 웹이란

반응형 웹의 개념

반응형 웹 디자인은 홈페이지 제작, 웹 제작과 관련된 기술로 pc, 모바일, 태블릿 등 각각의 기기별로 홈페이지의 페이지가 최적화되어 보여지는 기능입니다. 화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때는 웹사이트의 구조를 작은 화면에 최적화된 구조로 변경하여 보여주고, 큰 화면을 가진 기기에서는 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여줍니다. 이처럼 사용자가 기기의 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹입니다.

반응형 웹기술이 필요한 이유

반응형 웹이 등장하면서 웹 사이트를 이용하는 사람들에게 모든 기기에서 최적화된 웹 사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹 사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간 그리고 인력을 줄일 수 있게 되었습니다. 이러한 이유로 반응형 웹은 인기를 얻고 있습니다.

반응형 웹의 장점

간편한 유지보수
모바일 버전과 데스크톱 버전 같이 두 개의 웹 사이트를 만들게 되면 웹 사이트에 새로운 내용이 추가되거나 수정이 필요할 때, 개별적으로 추가 및 수정이 필요합니다. 그렇게 되면 손도 많이 갈 뿐만 아니라 비용과 시간이 추가됩니다. 하지만 반응형 웹은 모바일, 태블릿, 데스크톱 등 모든 디자인을 하나의 HTML 파일과 CSS 파일에서 작업하기 때문에 유지보수가 훨씬 쉽고 간편합니다.

유리한 마케팅
마케팅은 회사의 제품이나 서비스를 많은 사람들에게 알리기 위한 활동입니다. 쉽게 접근할 수 있는 점과 다양한 활동을 자유롭게 펼칠 수 있기 때문에 마케팅 활동 중 최적의 활동은 '웹'입니다. 하지만 웹 사이트를 데스크톱 버전으로만 만들면 작은 화면의 스마트 기기에서는 화면이 작게 보이게 되어 전달하고자 하는 정보들이 제대로 전달되지 않습니다. 이 때 반응형 웹이라는 기술을 이용하면 환경이나 기기에 따라 언제, 어디서든 최적화된 구조로 웹 사이트를 변경하여 보여줄 수 있기 때문입니다.

미래 지향적 기술
휘어지는 화면을 탑재한 스마트 기기, TV, 냉장고와 같이 웹 사이트를 이용할 수 있는 새로운 기기들이 계속 나타나고 있습니다. 만약 반응형 웹을 사용하지 않는다면, 이 모든 기기들에 대한 웹 사이트를 새로 제작하고 관리해야 할 것입니다. 하지만 반응형 웹으로 개발한다면 하나의 웹 사이트로 환경에 따라 최적화되도록 바꾸어 보여줄 수 있습니다.

반응형 웹 설계하기

가변 폭 설정하기
웹 문서의 너비를 가변 폭으로 설정하는 것입니다. 웹 문서의 폭을 가변 폭으로 설정하면 모든 해상도에 대응할 수 있습니다.

최솟값 / 최댓값 설정하기
모든 단말기(모바일, 태블릿, 데스크톱)의 해상도를 커버해야 한다면 문서 너비의 최솟값과 최댓값을 설정합니다.

컬럼 나누기
모바일 화면에서는 컬럼을 나누지 않습니다. 네비게이션 영역을 가변폭으로 처리하게 되면, 좁은 화면에서 모든 문자열을 표시하지 못 하고 줄바꿈 될 것이기 때문입니다.

하이브리드 레이아웃
모든 컬럼의 너비를 가변 폭으로 설정하는 것은 일반적으로 적절하지 않습니다. 그래서 고정 폭 컬럼과 가변 폭 컬럼을 혼용하여 구현하는 하이브리드 레이아웃을 사용합니다.

미디어 쿼리 설정
CSS3 미디어 쿼리는 화면 크기에 따라서 각기 다른 CSS를 적용할 수 있는 분기점을 제공합니다.

모바일 뷰 포트 설정
스마트 기기는 태블릿이나 데스크톱과는 달리 독자적인 뷰 포트 처리 방식을 가지고 있습니다. 태블릿과 데스크톱의 뷰 포트는 웹 문서의 너비와 무관하게 화면에 보이는 영역이 뷰 포트가 되고, 데스크톱은 웹 브라우저의 창 크기를 조절함으로써 사용자가 뷰 포트의 크기를 제어할 수 있습니다. 하지만 스마트폰의 경우 단말의 스크린 사이즈와는 무관하게 웹 문서의 너비와 높이가 뷰 포트가 되고 스마트폰 스크린에 웹 문서를 모두 출력하기 위해 스크린 사이즈가 너무 큰 경우 자동으로 줌 아웃 처리를 합니다. 이 문제를 해결하기 위해 뷰 포트를 재설정 하는 head 영역에 code를 삽입합니다.

<meat name=”viewport” content=”width=device-width”>

글꼴 크기를 반응형으로 제어
반응형 글꼴 크기의 비밀은 rem(root em)이라 부르는 단위에 있습니다. rem이라는 단위를 적용하면 html 요소와 글꼴 크기로부터 body부터 div, span의 글꼴 크기를 상대적으로 계산합니다.