반응형 웹 1/4

안녕하세요 다룸 입니다. 반응형 웹에 대한 아래 4가지 주제로 공유드리려고 합니다.

1. 반응형 웹 이란?
2. 반응형웹 레이아웃
3. 반응형웹 이슈.
4. CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용

오늘 첫번째 "반응형 웹이란?" 주제로 정리하여 공유드립니다.

반응형 웹이란?

반응형 웹 디자인이란 가변 그리드, 가변 이미지, 미디어 쿼리를 이용해 하나의 소스 (One Code) 로 제작된 콘텐츠가 다양한 크기의 모바일 기기에 맞춰 해상도와 화면이 동적으로 변하는 기술을 말합니다.
이를 통해 사용자는 어떤 크기의 디스플레이에서 사이트를 방문하든 보다 높은 차원의 사용성 경험을 제공 받을 수 있습니다.
-출처 : Ethan Marcotte, Responsive Web Design.

반응형웹 특징

1. 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다.
2. 특정 장치에 최적화된 여러벌의 HTML이 있으면 반응형이라고 부르지 않습니다.
3. 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않습니다.

반응형웹 목적

• 반응형 웹의 기본, 사용자에게 남는 공간 없이 한눈에 많은 정보를 노출하며 더 자세한 컨텐츠를 제공해 줄 수 있습니다.
• 향후 출시 될 어떠한 Screen Device에 유연한 대응이 가능하고 효율적입니다.
• 적용대상
  • 태블릿 PC
  • 고해상도 Mobile 단말기 (해상도 세로 size 640 이상) 의 Landscape mode

반응형웹 기획시 고려사항

• pc화면에 최적화된 PC카페탑(http://top.cafe.daum.net/), Mobile에 최적화된 카페탑(http://m.cafe.daum.net/) 처럼 많은 컨텐츠를 좀더 효율적으로 보여주기 위해선 반응형 웹이 꼭 답은 아닙니다.
  • 처음에 문제 없도록 구성을 했더라도 운영하면서 추가되는 콘텐츠나 기능변화로 인해 반응형 웹이 장점이라고 말하는 모든 해상도에 대응은 물 건너 가는 수도 있습니다.
• 반응형 웹 구성시 복잡한 정보구조의 형태를 어떠한 서비스도 가능하지만, 서비스 목적성과 일관성, 연속성을 가지고 있어야 합니다.
• 이미지 사이즈 규정: 확대/축소, 행/열 조정
• Touch(클릭)에 대한 고려 : 어떤 화면 사이즈에도 터치를 고려해야 합니다.

반응형 웹 적용방법

반응형 웹 적용방법(1) : CSS @media queries (미디어 쿼리)

미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이며 CSS 2.1 부터 추가되었습니다
하지만 실제로 많이 사용되지 않았는데, 미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점이 있었기 때문입니다.
CSS 3에는 미디어 타입을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리(media query)라고 하며, CSS 3에 Media Query 라는 명세가 있고 최신 브라우저들(IE9 이상, Chrome, Safari, Firefox, Opera)과 아이폰용 모바일 사파리 브라우저도 이를 지원하고 있지만, 아직 국내 점유율이 상당한 IE8을 포함하여, 그 이하 버전은 지원이 안되고 있습니다.

• CSS Media queries Module을 사용하면 다양한 조건에 따라 CSS 분기처리 가능합니다.
• 관련문서 : http://www.w3.org/TR/css3-mediaqueries/

미디어쿼리 사용예

• 외부 CSS 파일을 조건에 다라 불러오는 방법

  < link rel="stylesheet" media="screen and (min-width: 640px)" href="example1.css">
  < link rel="stylesheet" media="screen and (min-width: 1024px)" href="example2.css">
  
  <!-- 화면 너비가 640px 이상이면 example1.css 를 로드, 1024px 이상이면 example2.css 도 같이 로드함 -->

• style 태그를 이용하는 방법

  < style type="text/css" media="screen and (min-width: 640px)">
  body { background-color: #000 }
  < /style >
   
  < style type="text/css" media="screen and (min-width: 1024px)">
  body { background-color: #fff }
  < /style >
   
  <!-- 화면 너비가 640px 이상이면 배경색이 검정, 1024px 이상이면 배경색이 흰색으로 캐스캐이딩 됨 -->

• css파일내에서 사용하는 방법

  @charset "utf-8";
   
  /* 1. 공통 (Reset, Common) */
   
  /* 2. 모바일 (뷰포트너비 640px 미만) */
  .sample {background-color:black}
   
  /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640px 이상) */
  @media all and (min-width:640px) {
      .sample {background-color:red}
  }
   
  /* 4. PC (해상도 1024px 이상) */
  @media all and (min-width:1024px) {
      .sample {background-color:green}
  }

  적용사이트 :
  • 다룸 http://darum.daum.net/
  • 모바일 미디어다음 http://m.media.daum.net/m/media/
  • 다음탑 http://m.daum.net/
  • 스토리볼 http://storyball.daum.net/

반응형 웹 적용방법(2) : UA체크를 통한 CSS 분기

• 브라우저의 UA(userAgent)값에 따라 CSS파일을 분기 처리하여 내려줍니다.
  • userAgent 문자열은 홈페이지를 만들때, 접속하는 사용자의 웹 브라우저 종류, 버전, 또는 모바일 장비에서 접속 했는지 등을 알고자 할 때 분석되는 문자열입니다.
• PC브라우져 창크기를 변화해도 화면이 반응하지 않으며 해당기기에 최적화된 화면만 확인 할 수 있다
  • IE 6~8 을 위한 JS라이브러리가 별도로 필요하지 않음
• UA분기를 이용한 모바일과 테블릿 환경에서 미디어쿼리를 다시 사용할 수 있어서 테블릿의 가로와 세로를 다르게 구현하거나 패블릿에서 테블릿의 화면을 보이게 처리할 수 도 있다

반응형 웹 적용방법(3) : 기타 반응형 웹 기법

• 유동형 그리드 (fluid grids)
  • 반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리 EM 등이 제안하는 유동형 그리드는 고정된 PX가 아닌 em이나 %를 사용합니다.
  • Tiny Tweaks 방식으로 예시) 검색결과 화면
• 유동형 이미지 (fluid/flexible images)
  • 유동형 그리드와 마찬가지로, 고정된 PX가 아닌 em과 %를 이용하여 접근하는 방법으로, 특히 이 경우 max-width를 사용하고, 이를 처리하지 못하는 ie6~ie7의 경우 jabascript를 사용합니다.
• javascript를 통한 반응형 레이아웃 (responsive layouts) 대응
  • 스크린 사이즈 단계별 스타일을 하나의 CSS내에 class로 분리 구성하고 javascript를 사용하여 브라우져의 뷰포트 사이즈를 체크하여 최상위 요소에 해당 class명을 변경하여 CSS를 캐스케이딩합니다.

지금까지 "반응형 웹이란?"에 대해 살펴봤습니다.
이후 반응형웹 레이아웃에 대해 공유드리도록 하겠습니다.
기대 많이 해주세요~ 감사합니다.

by. UI개발팀 jude