반응형 웹 디자인 (Responsive Web Design, RWD)

I. 사용자 환경에 변화하는 웹페이지, 반응형 웹 디자인 개요

 -  하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디바이스의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

 -  PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리

 - 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영

---

II. 반응형 웹 디자인의 요소 및 핵심기술

가. 반응형 웹 디자인의 요소

요소	설명
반응형 웹, 적응형 웹	- 반응형 웹은 모든 스크린 크기에 맞춰 유동적으로 작동하는 방식 - 적응형 웹은 특정 크기에서만 반응하는 방식
플로우 (Flow)	- 스크린이 작아 졌을 때 콘텐츠들은 수직 공간을 더 차지하게 되며, 이러한 변화를 통해 아래 요소들이 자동으로 밀려나게 하는 기술
상대적 요소 (Relative Units)	- 상대적인 수치를 기준으로 PC에서 50% 단위로 반응하면 모바일에서도 동일하게 반응하는 요소
분기점 (Breakpoints)	- 분기점을 이용하면 특정 크기에 맞는 코딩으로 변환 - PC에서 3단 레이아웃을 쓰지만 모바일에서는 3단 사용시 가독성에 문제가 생길 수 있는 경우 분기점을 이용해 특정 넓이 이하는 3단이 아닌 1단으로 사용
최대값과 최소값 (Max and Min Value)	- 이미지가 브라우저보다 작은 경우 억지로 사이즈가 늘어나서 화면이 깨지는 경우를 방지하기 위해 최대, 최소값 설정으로 화면 크기가 넓어져도 더이상 이미지가 커지지 않도록 처리
그룹 지은 요소 (Nested objects)	- 요소들이 많아 통제하기 힘들 때 해당 요소들을 그룹으로 만들어 한버에 통제
모바일 또는 데스크톱 우선작업	- 모바일, 데스크톱 프로젝트의 반응형 작업은 기술적으로 큰 차이는 없으나 먼저 시작하는 디바이스에 따른 적절한 콘텐츠 배치 필요
웹폰트와 시스템 폰트	- 웹폰트의 경우 디자인적 요소는 뛰어나지만 접속시 폰트 다운로드, 페이지 속도 등을 고려하여 폰트 사용
비트맵 방식과 벡터 방식	- 비트맵 방식은 디테일하고 화려하게 사용 가능하지만, 벡터 방식은 해상도 높은 기기에서 선명하게 조회

 

나. 반응형 웹 디자인의 핵심기술

핵심기술	설명
가변 그리드(fluid grid)	- 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 숭 ㅣㅆ도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술
뷰포트(Viewpoert)	- 화면에 보이는 영역을 제어하는 기술 - 기기의 화면을 통해 보이는 영역, 웹브라우저에 웹페이지가 사용자에게 보이는 영역
미디어 쿼리(media query)	- 단말기의 종류와 화면 크기등을 알아낼 수 있는 쿼리문