반응형 웹이란?
PC, TV, 네비게이션, 스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것.
반응형 웹으로 만들면 좋은점
1. 유지보수가 간편하다.
이전에는 모바일 버전과 데스크톱 버전 두 개의 웹사이트를 만들어 사용하였다. 이렇게 되면 웹사이트에 새로운 내용을 추가하거나 수정시 개별적으로 수정해야 하므로 이는 번거로운 문제였다.
하지만 반응형의 경우 모든 디자인을 하나의 파일에서 작업하므로 유지보수가 가네편하다.
2. 모바일 점유율의 증가
대한민국은 스마트 기기 인터넷 보급률 및 사용률이 90%가 넘는 인터넷 강국이다. 따라서 사용자는 모바일에서 데스트탑 화면을 마주하게 된다면 이용하지 않을 것이다. 이처럼 모바일로 인터넷을 사용하는 것은 당연한 일이 되었다.
3. 마케팅에 유리하다.
환경이나 기기에 맞게 최적화된 구조로 웹사이트를 변경하여 보여주므로 전달하고자 하는 내용을 확실하게 전달할 수 있다. 또한 여러가지 웹사이트를 만들지 않아도 되므로 기업은 비용 측면에서도 상당한 효과를 볼 수 있다.
4. 검색 엔진 최적화(SEO)가 가능하다.
Search Engine Optimize 라고 하며, 이는 사용자가 검색 사이트에서 특정 키워드로 검색시 나오는 결과에서 상위권에 나타나도록 관리하는 작업을 말한다. 만약 반응형 웹과 데스크톱 웹사이트 두 개가 있다면 주소 또한 두 개를 갖게 된다. 동일한 웹사이트에 한해서 주소가 두 가지로 나눠진다면, 검색 엔진은 이를 정확하지 않은 정보로 판단하여 검색 결과에서 제외시킨다. 따라서 상위권에 노출시키는 것이 상대적으로 불리해지는 셈이다. 이러한 문제는 반응형을 만들면 해결할 수 있다.
반응형 웹 제작을 위한 핵심 기술
1.가변 그리드
가변 그리드는 웹사이트 제작시 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 px(픽셀) 대신 %(퍼센트)로 제작하는 기술이다.
2. 미디어 쿼리
미디어 쿼리란 컴퓨터나 기기에게 (즉, 미디어에게) 질문하고 감지하여 웹사이트를 변경하는 기술이다.
컴퓨터나 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작할 때 반드시 필요한 기술이다.
3. 뷰포트
뷰포트는 화면에 보이는 영역을 제어하는 기술이다. 즉, 스마트 기기의 보이는 영역을 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해서 뷰포트라는 기술을 이용하는 것이다.
