Blog

반응형 웹에 대한 단상

 

요즘 한창 뜨고 있는 반응형 웹

반응형 웹을 나름 정의하자면 ‘하나의 마크업 문서를 가지고 다양한 device에 대응 하는 레이아웃을 가진 웹’ 정도로 요약할 수 있겠다.

반응형 웹을 제작하는 방법에는 여러가지가 있을 수 있겠지만 미디어 쿼리가 가장 많이 사용되지 않을까 싶다.

css3의 미디어 쿼리를 사용하여 viewport의 사이즈 별로 css를 분기처리하여 다양한 레이아웃이 적용되도록 하는 것이 일반적이 지않을까 싶다.

이렇게 마크업에서 css를 분기처리하여 로드하면 서버로부터 불필요한 요청을 줄이고 이미지(css 스트라이프나, 백그라운드등)을 분기처리하여 로드하기 때문에 결과적으로 성능 향상에 도움이 된다.

물론 마크업에서만 미디어 쿼리를 사용할 수 있는 것은 아니다. css내부에서도 사용이 가능하다.

단 하위브라우저(IE 6,7,8)에서 미디어 쿼리 지원이 되지 않기 때문에

구글 코드의 미디어 쿼리 지원 CDN을 가져와서 작업하던지, responds.js를 사용하면 해결가능 하다.

modernize를 사용하여 브라우저에서 지원가능한 html5 및 css3 요소를 확인후 분기처리도 가능하다.

다만 작업해보니 구글코드의 미디어 쿼리 CDN은 PNG의 투명도를 처리하는 구글코드와 충돌이 일어나서 작동되지 않았고,

responds.js에 비해 속도가 조금 느린듯했다.

하지만 미디어 쿼리의 orientation:portrait/landscape등의 다양한 속성까지 하위 브라우저에서 사용을 기대하기는 어렵다.

하지반 반응형 웹 제체가 모바일등 비교적 이러한 제약에서 자유로운 os가 탑제된 환경을 위한 것이기 때문에 큰 문제는 되지 않을 것 같다.

그리고 미디어 쿼리를 사용하지 않더라도 %를 사용하여서도 반응형 웹을 제작할 수 있다.

 

반응형 웹은 데스크탑 브라우저와 그 이하의 스크린 사이즈를 가진 장치에서 동일한 마크업을 사용한다는 점을 감안하여

컨텐츠를 기획하고 프로젝트에 따라서 반응형 웹을 적용해야할지 아닌지 기획단에서 미리 검토후 적용하는 것이 좋을 것같다.

 

아직도 공부할게 많다 ㅋ