반응형
반응형웹은 데스크탑, 노트북, 넷북, 태블릿, 스마트폰, 스마트TV 등 N-Screen의 Multi Device에 어떠한 사용자도 제약없이 접근할 수 있도록 제공하는 웹을 말한다.
반응형웹에서 가장 중시되어야 할 것은 모바일을 우선순위로 해야한다.
최적화된 반응형웹 접근방식으로서 모바일을 우선에 두고 CSS를 작성하는 방법으로 가장 단순한 기기, 최소성능의 Device에 우선을 두고 작업을 하며, 이렇게 작업을 하면 기준치 이하의 Device에 과도한 짐을 지우지 않으면서, 최신 브라우저를 사용하는 사용자에게 풍부한 경험을 제공한다.
또한 웹의 창시자 팀 버너스 리 경(Tim Berners - Lee , W3C Director and inventor of the World Wide Web)은 이렇게 이야기 했다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

반응형웹의 등장배경

현재 다양한 IT Device 등장함에 따라 N-Screen 욕구가 생겨나게 되고, 이에따라 Multi Device환경에 최적화된 디자인과 기능을 보여주어야 한다. 기존에는 이를 위해 사용자 브라우저 UA(User Agent) 정보를 감지하여 사용자 접속시 모바일 전용페이지로 이동할지 데스크탑 전용 페이지에 머무르게 해야 할지 판단했기에 새로운 Device가 등장할 때마다 개발자는 고민해야 햇다.
그리고 새로운 모바일 브라우저가 등장하면 개발자가 새로운 코드를 추가했다. 데스크톱과 모바일 이외에도 그 중간 정도 크기의 해상도인 태블릿 PC를 많이 사용하는 요즘과 같은 상황에는 유연하게 대응하지 못하는 방식이다. 만약 기존의 방식대로 대응한다면 태블릿 PC 전용 페이지를 추가로 개발하고 UA 정보를 추가한 다음 태블릿 PC 사용자 접속 시 태블릿 PC 전용 페이지로 이동하는 코드를 추가해야 한다.

이와 달리 반응형 웹은 사용자의 해상도와 같은 장치 특성을 해석해서 단 하나의 HTML 페이지가 여러 패턴의 CSS 뷰를 갖도록 만들어 준다. 특정 해상도에 최적화된 페이지를 만드는 것이 아니라 모든 해상도에 대응하는 페이지를 만들기 때문에 현존하는 모든 장치의 해상도를 일일이 파악할 필요가 없다. CSS3 미디어쿼리 규칙이 등장하면서 서버 측 개발자가 해야만 했던 일을 이제는 클라이언트 개발자가 할 수 있게 된 것이다. 이렇듯 웹은 데스크탑의 차원을 넘어서야 했다.

반응형웹 마크업 가이드 제작 전 고민사항

  • 1. 미디어쿼리 해상도 분기문제
  • 2. IE8 브라우저의 하위 호환성
  • 3. 모바일 환경에서의 성능문제
  • 4. 가변적 그리드 기반의 레이아웃
  • 5. 웹폰트를 기본글꼴로 사용시 브라우저 호환성 및 모바일 성능저하 문제

고민사항1 : 미디어쿼리 해상도 분기문제 해결방법

다양한 Device를 어떻게 미디어쿼리로 분기 할 것인가에 대한 고민은 반응형웹 프로젝트를 진행하는 개발자라면 누구나 고민할 것이다.
모바일 페이지를 기본CSS로 작성하고 미디어쿼리를 사용하여 데스크탑 페이지, 테블릿페이지로 개발하면 된다.

  • 1. 데스크탑 페이지
    최근 고해상도 사용자가 많아짐에 따라 1280px 이상(데스크탑 페이지 가운데 정렬 디자인이 대부분이므로 CSS는 컨텐츠 영역을 PX로 고정한다.)으로 미디어쿼리 작성한다.
  • 2. 노트북 및 태블릿 페이지
    태블릿과 노트북은 가로사이즈가 1024px로 동일하다. 태블릿에서는 틸팅(화면회전)이 되므로 가로사이즈를 width="auto"로 CSS를 작성한다.
    미디어쿼리의 해상도는 768px 이상 ~ 1025px 이하로 작성한다.
  • 3. 모바일 페이지
    미디어쿼리를 적용하지 않고 기본 CSS로 작성한다.
    태블릿과 같이 틸팅(화면회전)이 되므로 가로사이즈를 width="auto"로 CSS를 작성한다.
@media all and (min-width:768px) and (max-width:1024px){
/* 태블릿 및 노트북 CSS 작성 */
}

@media all and (min-width:1025px){
/* 데스크탑 CSS 작성 */
}

고민사항2 : IE8 브라우저의 하위 호환성 해결방법

반응형웹이란 IT Device에 반응하는 것이지 화면을 Resize해서 반응하는 것이 아니며, 그것이 본질이다. 그렇기에 데스크탑 페이지에서 Resize 해도 반응하지 않아도 무방하다.
그러나 클라이언트는 반응형웹의 본질에 대해서 모르는 경우가 대부분이다. 무조건 Resize되어야 반응형이라고 생각한다. 그렇기 때문에 논리적으로 설득하는것이 가장 좋은 방법이나, 안될 경우에는 Internet Exploer 6~8 버전 브라우저에서도 미디어쿼리를 해석할 수 있도록 만들어 주는 JavaScript 라이브러리가 있다.
respond.min.js라고 부르는 이 파일은 약 4KB 정도의 용량이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다.

respond.min.js 내려받기 : https://github.com/scottjehl/Respond

respond.min.js 파일을 HTML 문서의 <head> 태그 부분에 다음과 같은 방식으로 삽입하면 Internet Exploer 6~8 버전 브라우저가 미디어쿼리를 해석할 수 있게 된다. 로컬(local)에서는 확인이 불가능 하며, 서버에 올린 후 적용된 것을 확인할 수 있다.

<!--[if lt IE 9]>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

Internet Explorer 브라우저만 해석할 수 있는 조건부 주석을 사용했기 때문에 다른 표준 브라우저들은 이 코드를 무시하고 JS 파일을 요청하지 않으며 IE9 미만인 IE6 ~ IE8 에서만 사용된다.

고민사항3 : 모바일 환경에서의 성능문제 해결방법

데스크탑은 성능이 좋아 속도에 문제가 없지만, 모바일 Device 경우 낮은성능으로 인하여 최적화를 고려해야 한다.

  • 1. 모바일 CSS
    모바일 CSS를 기본으로 작성하고, 태블릿과 데스크탑 페이지를 미디어쿼리로 작성하여 모바일에 불필요한 CSS는 요청하지 않게 한다. 미디어쿼리의 경우 해당 해상도가 아닐경우 CSS를 요청하지 않아 성능을 최적화 할 수 있다.
  • 2. Sprite 기법 사용
    여러개의 잘개 쪼개진 이미지는 서버에 많은 요청을 유발하므로 의미가 비슷한 이미지의 경우 병합하여 사용함으로서 서버측에 이미지 요청 횟수를 줄여 성능을 최적화 한다.
  • 3. 들여쓰기 및 띄워쓰기 최소화
    CSS 및 마크업 들여쓰기 및 띄워쓰기를 최소화하여 성능을 높여준다.

    NHN Markup Coding Convention : http://html.nhncorp.com/

  • 4. 웹폰트 요청분기
    웹폰트사용 시 기본 CSS로 작성하지 않고 해당 데스크탑 미디어쿼리부분에 작성하여 모바일 Device의 성능을 올려준다.

고민사항4 : 가변적 그리드 기반의 레이아웃 해결방법

  • 1. 컨텓츠 레이아웃 시 rem, %를 사용하여 개발할 경우 아직 출시되지 않은 device에 대비한다.
  • 2. 이미지와 미디어들도 감싸 있는 그리드에 맞게 max-width:100% 넣어준다.

고민사항5 : 웹폰트를 기본글꼴로 사용시 브라우저 호환성 및 모바일 성능저하 문제 해결방법

IE9은 @media 규칙 내부에 @font-face 허용 안하기 때문에 @media 구문 안쪽에 @font-face 규칙을 선언하는 경우 IE9 브라우저는 외부 글꼴을 요청하지 않기 때문에 표시하지 못합니다.
그렇기 때문에 웹폰트 사용 시 IE9 조건부 주석을 사용하여 IE9에서만 해석할 수 있도록 개발해야 한다.

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iefont9.css">
<![endif]-->

반응형웹 기본가이드 다운로드

맑은커뮤니케이션에서 만든 반응형웹 기본가이드는 미디어쿼리 및 자바스크립트로 분기하는 방법 2가지 자료를 첨부하였습니다.
사용 시 작성자 주석부분 지우지 말고 사용해 주세요.

반응형웹_1_미디어쿼리.zip
다운로드
반응형웹_2_자바스크립트.zip
다운로드

참고블로그 : http://helloworld.naver.com/helloworld/81480

반응형

+ Recent posts