Responsive Web, 반응형 웹

반응형 웹

화면 너비에 따라 유동적으로 변하는 유동형 레이아웃, 이미지, 미디어 쿼리를 이용, 사용자 환경에 반응하는 웹 형태

사전 준비

1. CSS 적용 방법

2. 미디어 쿼리 숙지

3. HTML5 태그 사용시

4. 사이트 접속 미디어(머신) 파악

5. 디자이너와 퍼블리셔의 협의

반응형 웹을 적용해야 하나?

최근 반응형 웹이 각광 받는 이유는 모바일 기기의 폭발적인 증가로 인해, 각 기기별 최적의 정보를 제공하기 위해서 이다. 기존 일반 사이트를 접속할 경우, 데스크탑, 스마트폰, 아이패드, 갤럭시탭 등 기기에 관계없이 모두 동일한 데스크탑용 사이트가 보인다. 데스크탑 기준으로 제작된 사이트는 모바일에서 볼 경우, 폰트 사이즈가 너무 작고 화면너비가 너무 커서 모바일에서는 보기 힘들다.

이후로 전체 사이트를 스마트폰 해상도에 맞게 사이트를 추가로 제작한 기업들도 많이 있었다. 그러나, 현재 각 스마트 폰과 패드 등의 해상도의 종류가 점점 증가함에 따라 각 해상도에 따른 최적화된 사이트가 필요하게 된 것이다.

반응형 웹에서 가장 힘든 부분은 디자이너와 퍼블리셔의 임무이다. 디자이너는 특정 미디어의 접속을 대비하여 두, 세가지의 디자인을 준비해야 한다. 그에 따라 퍼블리셔도 디자이너의 정확한 의도를 파악하여 웹으로 표현해야 하고. 검수 작업이 더 힘들어질 것이다.

테스트 페이지는 아이폰과 데스크탑, 두가지 미디어 타입을 고려하여 CSS를 만들었다. 소스 보기와 CSS를 보면 쉽게 이해가 갈 것이다. 테스트 결과, chrom 에서 잘 동작(화면의 너비를 줄이면 정의된 다른 스타일 시트가 적용)된다. 실제 아이폰에서도 깔끔하게 표현된다.