DEVIEW 2012 반응형 웹 구축기

정찬명

목차

반응형 웹의 필요성

Reason why RWD is needed

이것은 웹이 아님

데스크톱
© http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

웹은 데스크톱에서만 볼 수 있도록 제한되어 있지 않음.

이것이 현재의 웹

데스크톱, 노트북, 테블릿, 스마트폰, 피처폰...
© http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

데스크톱, 노트북, 테블릿, 스마트폰, 피처폰…

이것은 미래의 웹

데스크톱, 노트북, 테블릿, 스마트폰, 피처폰, 자동차, 냉장고...
© http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

상상할 수 있는 거의 모든 장치에 웹이 들어간다.

현재 웹의 구현 수준

if (모바일 사용자) {
   m.never.com 으로 연결한다
} else {
   never.com 으로 연결한다
}

오마이갓
© http://nhncorp.com/

사용자가 기대하는 수준

데스크톱, 노트북, 테블릿, 스마트폰, 피처폰...

특정 해상도에 최적화 되어있는 웹은 이제 그만.

지금 필요한 것은?

웹사이트: 보스톤 글로브

OSMU: One Source Multi Use.

반응형 웹은 무엇인가?

Definition of RWD

반응형 웹(넓은 의미)

여러 장치다양한 특성에 대응하는 하나의 웹 문서 또는 사이트.

* 여러 장치: 휴대폰, 테블릿, 데스크톱…

* 다양한 특성: 해상도, 해상력, 화면비율…

반응형 웹(좁은 의미)

  1. CSS3 Media Queries
  2. Fluid/Hybrid Grid Layout
  3. Flexible Media Content

해상도에 따라 레이아웃과 콘텐츠를 가변폭으로 표시.

특징 1: 하나의 웹

One HTML

하나의 콘텐츠에 오직 하나의 HTML 소스만 있다. 특정 장치에 최적화된 여러벌의 HTML이 있으면 반응형이라고 부르지 않음.

CSS, JS 파일은 여러벌 존재할 수 있다.

특징 2: 하나의 URL

One URL

특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않음.

예) never.com vs m.never.com

국내 반응형 웹 구현 사례 1

국내 반응형 웹 구현 사례 2

@media 규칙을 이용하지 않은것이 특징.

반응형 웹 고려사항

Keynote of RWD

반응형 웹 성능

  1. 데스크톱 환경에서 5초 이내에 로딩이 끝나야 한다.
  2. 모바일 환경에서 6초 이내에 로딩이 끝나야 한다.
  3. 웹 폰트를 사용할 것인가?
  4. 이미지를 얼마나 어떻게 쓸것인가?

반응형 웹 디자인

  1. 여러개의 컬럼을 해상도에 따라 어떻게 배치할 것인가?
  2. 내비게이션을 작은 화면에서 어떻게 처리할 것인가?
  3. 이미지 해상도를 작게 줄여도 괜찮은가?

반응형 웹 하위 호환성

  1. CSS3 미디어쿼리를 사용할 것인가?
  2. HTML5를 사용할 것인가?
  3. 미디어쿼리를 지원하지 않는 모바일 브라우저.
  4. HTML5/CSS3를 지원하지 않는 IE 6~8 브라우저.

반응형 웹 개발 편의

반응형 웹 성능

Performance is most important thing in RWD

데스크톱 5초, 모바일 6초

  1. 웹 폰트 분기: 약 2MB 절약.
  2. 이미지 파일 병합: HTTP 요청 절약.
  3. CSS/JS 파일 병합: HTTP 요청 절약.
  4. JS 파일 지연 로딩: 체감 속도 향상.

웹 폰트 적용

CSS3
@font-face { ... }

웹 폰트 적용 로직

if (사용자 장치에 나눔 글꼴이 있으면) {
    사용자 로컬 글꼴을 적용한다
} else if (나눔 없고 && 해상도 768px 이상) {
    웹 서버에서 받아서 표시한다
} else {
    적용하지 않는다
}

default.css

@media all and (min-width:768px){
  @font-face{
    font-family:NG;
    src:url(NanumGothic.eot);
    src:local(※),url(NanumGothic.woff) format('woff')
  }
  body{
    font-family:나눔고딕,NanumGothic,NG,돋움,Dotum,Arial,Helvetica,sans-serif
  }
}

@media 규칙을 이용 768px 이상의 큰 해상도에서만 웹 폰트를 요청하도록 분기. 선언 순서에 따라 로컬 자원 우선 참조.

웹 폰트 호환성 문제

default.css

@media all and (min-width:768px){
  @font-face{
    font-family:NG;
    src:url(NanumGothic.eot);
    src:local(),url(NanumGothic.woff) format('woff')
  }
  body{
    font-family:나눔고딕,NanumGothic,NG,돋움,Dotum,Arial,Helvetica,sans-serif
  }
}

EOT, WOFF 형식을 모두 참조. IE 6~8 브라우저가 WOFF 글꼴을 내려받지 않도록 방어 코드를 작성하는 것이 핵심.

IE 9 @media @font-face 미지원 문제

@media all and (min-width:768px){
  @font-face{ ... } /* IE 9 does not parse this line */
}

IE 9 브라우저는 @media 규칙 안에 선언한 @font-face 규칙을 해석하지 않는다.

IE 9 @media @font-face 문제 해결

@font-face{
  font-family:NG;
  src:url(NanumGothic.eot);
  src:local(※),url(NanumGothic.woff) format('woff')
}
@media all and (min-width:768px){
  body{
    font-family:나눔고딕,NanumGothic,NG,돋움,Dotum,Arial,Helvetica,sans-serif
  }
}

@font-face 규칙은 @media 규칙 밖에 작성한다.

이미지 파일 병합

Reduce the HTTP image requests

Image Sprites

병합된 이벤트 페이지 이미지 병합된 비주얼 이미지 병합된 아이콘 이미지 병합된 댓글 모듈 이미지

이미지에 대한 HTTP 요청을 줄여서 성능 개선.

CSS 파일 병합

Reduce the HTTP CSS request

CSS 파일 구성의 나쁜 예

HTTP 요청 증가로 최초 로딩 성능이 저하됨.

CSS 파일 구성의 좋은 예

HTTP 요청을 줄여서 성능 개선.

JS 파일 병합

Reduce the HTTP JS request

JS 파일 구성의 나쁜 예

HTTP 요청 증가로 최초 로딩 성능이 저하됨.

JS 파일 구성의 좋은 예

HTTP 요청을 줄여서 성능 개선.

JS 지연 로딩

Delay loading javascript

추천하지 않는 JS 삽입 위치

<html lang="ko">
<head>
  …
  <script src="jquery.js"></script>
  <script src="default.js"></script>
</head>
<body>
  …
</body>
</html>

브라우저가 JS 파일을 해석하는 동안 화면은 백지 상태.

추천하는 JS 삽입 위치

<html lang="ko">
<head>
  …
</head>
<body>
  …
  <script src="jquery.js"></script>
  <script src="default.js"></script>
</body>
</html>

body 영역이 모두 화면에 출력된 이후에 JS 파일을 해석.

모바일 뷰 포트 설정

Viewport meta tag for mobile devices

데스크톱/모바일 뷰포트

데스크톱 뷰 포트: 화면에 보이는 영역이 뷰 포트가 된다 모바일 뷰 포트: 문서의 크기가 뷰 포트 크기가 된다

데스크톱은 화면에 보이는 영역이 뷰 포트가 되지만 모바일은 문서 크기가 뷰 포트가 된다.

뷰 포트 설정 필요성

뷰 포트를 설정하지 않은 모바일 화면: 화면 크기에 맞게 웹 문서를 강제로 축소한다

모바일 뷰 포트를 설정하지 않으면 문서가 자동으로 풀 브라우징된다.

뷰 포트를 설정하면 뷰 포트의 물리적인 해상도를 기준으로 웹 페이지의 확대/축소 여부를 조절할 수 있다.

뷰 포트 설정 방법

<meta
  name="viewport"
  content="
    width=device-width,
    initial-scale=1,
    minimum-scale=1,
    maximum-scale=1,
    user-scalable=no"
/>

webkit 계열 iOS, Android 모바일 브라우저에서 이 코드를 해석한다.

뷰 포트 적용 결과

뷰 포트와 함께 기본 배율을 1로 설정한 모바일 화면: 문서를 화면 크기에 맞게 강제로 축소하지 않는다

뷰 포트의 물리적인 너비가 320px이면 웹 문서의 320px이 뷰 포트에 들어간다.

iPhone4+ 레티나 디스플레이는 640px 너비의 뷰 포트를 지녔지만 웹 문서의 320px만 들어간다.(웹 문서의 1px을 레티나 장치에서는 4px로 표시하기 때문)

미디어쿼리 이해

Understanding Media Queries

쉽게 설명하면…

미디어쿼리란 장치 특성에 따라 브라우저가 해석해야 할 CSS 코드를 분기 처리하는 규칙.

보통 해상도 또는 해상력을 판별하여 분기 처리한다.

어렵게 설명하면…

var = 사용자 장치의 뷰 포트 너비;

if ( >= 768px) {
  테블릿 & 데스크톱 공용 CSS
} else if ( >= 768px && <= 1024px) {
  테블릿 전용 CSS
} else if ( >= 1025px) {
  데스크톱 전용 CSS
}

미디어쿼리 구문 형식

@media only all and (조건문){실행문}
@media all and (조건문){실행문}
@media (조건문){실행문}

위 세 줄의 코드는 같다.

@media 키워드

@media only all and (조건문){실행문}

미디어쿼리 구문의 시작을 선언.

only 키워드

@media only all and (조건문){실행문}

미디어쿼리를 지원하면 이 구문을 해석하라는 조건. 생략 가능하며 생략했을 때 기본값이 only로 처리됨.

not 키워드로 대체할 수 있으며 뒤따르는 (조건문)을 부정한다.

all 키워드

@media all and (조건문){실행문}

미디어쿼리 해석 대상에 제한이 없음을 명시. screen, print 같은 키워드로 대체할 수 있다.

생략 가능하며 생략했을 때 기본값이 all 으로 처리됨.

모든 키워드: all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv

and 키워드

@media only all and (조건문){실행문}

논리적으로 'AND' 연산을 수행한다. 앞 뒤 조건이 모두 참이어야 실행한다.

콤마 ','로 대체할 수 있는데 콤마 ','는 'OR' 연산을 수행한다. 'OR' 연산은 앞 뒤 조건 중 하나만 참이어도 실행한다.

(조건문)

@media all and (조건문){실행문}

브라우저는 (조건문)이 참일 때 {실행문}을 해석한다.

둘 이상의 조건은 괄호 앞 또는 뒤에 'and' 키워드 또는 콤마 ',' 기호를 작성하여 연결할 수 있다.

예) @media all and (A) and (B){실행문}

{실행문}

@media all and (조건문){실행문}

일반적인 CSS 구문이 포함되는 곳.

@media all and (조건문){
  body{color:red}
}

미디어쿼리 활용 범위

Media Query practice

(조건문) 활용 예

@media all and (조건문){실행문}

출력 장치의 특징에 대한 (속성:)을 기술하는 것으로 조건문을 작성할 수 있다.

width / height

뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건.

width / height

@media all and (min-width:768px) and (max-width:1024px){ … } // 뷰포트 너비가 768px 이상 '그리고' 1024px 이하이면 실행
@media all and (width:768px), (width:1024px){ … } // 뷰포트 너비가 768px 이거나 '또는' 1024px 이면 실행
@media not all and (min-width:768px) and (max-width:1024px){ … } // 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행

device-width / device-height

스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.

device-width / device-height

@media all and (device-width:320px) and (device-height:480px){ … } // 스크린 너비가 320px '그리고' 높이가 480px 이면 실행
@media all and (min-device-width:320px) and (min-device-height:480px){ … } // 스크린 너비가 최소 320px 이상 '그리고' 높이가 최소 480px 이상이면 실행

orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.

orientation

@media all and (orientation:portrait){ … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:landscape){ … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

aspect-ratio

뷰포트의 너비와 높이에 대한 비율. '너비/높이' 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.

aspect-ratio

@media all and (aspect-ratio:5/4){ … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행
@media all and (min-aspect-ratio:5/4){ … } // 뷰포트 너비가 5/4 비율 이상이면 실행
@media all and (max-aspect-ratio:5/4){ … } // 뷰포트 너비가 5/4 비율 이하면 실행

device-aspect-ratio

스크린의 너비와 높이에 대한 비율. '너비/높이' 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.

device-aspect-ratio

@media all and (device-aspect-ratio:5/4){ … } // 스크린 너비가 5, 높이가 4 비율이면 실행
@media all and (min-device-aspect-ratio:5/4){ … } // 스크린 너비가 5/4 비율 이상이면 실행
@media all and (max-device-aspect-ratio:5/4){ … } // 스크린 너비가 5/4 비율 이하면 실행

color

출력 장치 색상 비트 수. 출력 장치가 컬러가 아닌 경우 '0'의 값에 대응한다.

color

@media all and (color){ … } // 출력 장치가 컬러를 지원하면 실행
@media all and (color:0){ … } // 출력 장치가 컬러가 아니면 실행
@media all and (color:8){ … } // 출력 장치가 8비트 색상이면 실행
@media all and (min-color:8){ … } // 출력 장치가 8비트 이상 색상이면 실행
@media all and (max-color:8){ … } // 출력 장치가 8비트 이하 색상이면 실행

color-index

출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 '0'의 값에 대응한다.

color-index

@media all and (color-index){ … } // 출력 장치가 색상 색인 테이블을 사용하면 실행
@media all and (color-index:0){ … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행
@media all and (color-index:256){ … } // 출력 장치가 256 색을 지원하면 실행
@media all and (min-color-index:256){ … } // 출력 장치가 256 이상 색을 지원하면 실행
@media all and (max-color-index:256){ … } // 출력 장치가 256 이하 색을 지원하면 실행

monochrome

출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 '0'의 값에 대응한다.

monochrome

@media all and (monochrome){ … } // 출력 장치가 흑백이면 실행
@media all and (monochrome:0){ … } // 출력 장치가 흑백이 아니면 실행
@media all and (min-monochrome:2){ … } // 출력 장치가 흑백이고 2비트 이상이면 실행
@media all and (max-monochrome:2){ … } // 출력 장치가 흑백이고 2비트 이하이면 실행

resolution

출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 점(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpidpcm 단위를 사용할 수 있다.

resolution

@media all and (resolution:96dpi){ … } // 1인치당 96개의 사각형 화소를 제공하면 실행
@media all and (min-resolution:96dpi){ … } // 1인치당 96개 이상의 화소를 제공하면 실행
@media all and (max-resolution:96dpi){ … } // 1인치당 96개 이하의 화소를 제공하면 실행

scan

TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.

scan

@media tv and (scan:progressive){ … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다
@media tv and (scan:interlace){ … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다

grid

출력 장치가 그리드 또는 비트맵 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 '0'과 '1' 뿐이고 '0'의 값은 비트맵 방식에 대응한다.

grid

@media all and (grid){ … } // 출력 장치가 그리드 방식이면 실행
@media all and (grid:0){ … } // 출력 장치가 비트맵 방식이면 실행
@media all and (grid:1){ … } // 출력 장치가 그리드 방식이면 실행

미디어쿼리와 낡은 모바일 브라우저

Media Queries and old mobile browsers

여기 아름다운 웹 사이트

데스크톱에서 잘 표시되는 반응형 웹 사이트: 4개의 컬럼으로 표시됨.

© http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

가변폭 레이아웃

테블릿 화면에서도 잘 표시되는 반응형 웹 사이트: 2개의 컬럼으로 변신.

© http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

좁은 화면에도 대응

좁은 화면에서도 잘 표시되는 반응형 웹 사이트: 1개의 컬럼으로 변신.

© http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

짜잔! 반응형 완성

아이폰에서 잘 표시되는 반응형 웹 사이트.

© http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

최고!
© http://nhncorp.com/

이것들도 모바일인데…

아이폰 아닌 모바일 웹킷 브라우저에서 제대로 표시되지 않는 반응형 웹 사이트.

© http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

허걱!
© http://nhncorp.com/

이것들도…

아이폰 아닌 모바일 오페라 브라우저에서 제대로 표시되지 않는 반응형 웹 사이트.

© http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

허걱!
© http://nhncorp.com/

차라리 몰랐으면 좋았을 사실 하나

모든 모바일 브라우저가 미디어쿼리를 지원하는 것은 아니다.

뷁!
© http://nhncorp.com/

솟아날 구멍

@charset "utf-8";
/* 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않는다 */
@media all and (min-width:768px){
/* 테블릿 해상도 이상의 CSS 코드만 미디어 쿼리 구문 안쪽에 작성한다 */
}

이것이 바로 모바일 퍼스트. 모바일 코드를 미디어쿼리 구문 바깥쪽에 작성하는 것이 핵심.

미디어쿼리와 낡은 데스크톱 브라우저

Media Queries and old desktop browsers

차라리 몰랐으면 좋았을 사실

모든 데스크톱 브라우저가 미디어쿼리를 지원하는 것은 아니다.

뷁!
© http://nhncorp.com/

솟아날 구멍

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

respond.min.js 라이브러리를 사용하면 IE 6~8 브라우저도 미디어쿼리를 해석할 수 있다. 라이선스: MIT.

respond.min.js 유의사항

가변폭 그리드 레이아웃

How to build liquid grid layout

3단 하이브리드 레이아웃

반응형 웹 데스크톱 모드: 3컬럼. 반응형 웹 테블릿 모드: 2컬럼. 반응형 웹 모바일 모드: 1컬럼.

고정폭 컬럼과 가변폭 컬럼을 함께 사용한 반응형 하이브리드 레이아웃.

코드 나누기가 핵심

@charset “utf-8″;
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px){
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px){
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px){
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

공통, 모바일, 테블릿&데스크톱, 테블릿, 데스크톱 순으로 코드를 분리해서 작성.

모바일 내비게이션 패턴

Mobile navigation pattern

Tab to Dropdown

탭 메뉴에서 드롭다운 메뉴로 변하는 형식: 브라우저에 따라 다르게 보인다.

select 요소를 활용한 내비게이션 디자인 패턴. select 요소는 브라우저마다 CSS 지원 범위가 달라서 다르게 보일 수 있다.

Tab to Toggle 1

탭 메뉴에서 토글 드롭다운 메뉴로 변하는 형식.

토글 버튼을 활용한 내비게이션 디자인 패턴. 토글 버튼을 검색창과 함께 나란히 배치.

Tab to Toggle 2

토글 드롭다운 메뉴 닫힌 상태. 검색창 없을 때. 토글 드롭다운 메뉴 열린 상태.

토글 버튼을 로고와 함께 나란히 배치한 경우.

Tab to Toggle 3

토글 드롭다운 메뉴 닫힌 상태. 검색창이 안보임. 토글 드롭다운 메뉴 열린 상태. 검색창이 열린 메뉴의 하단에 표시됨.

검색창을 열린 메뉴 하단에 포함한 경우.

가변폭 이미지와 동영상

Flexible image and multimedia

가변 이미지 예시

가변폭에 대응하는 이미지 예시

우측 하단의 조절점을 마우스로 잡아 끌면 상자 크기에 따라 이미지의 너비와 높이가 조절된다.

가변 동영상 예시

우측 하단의 조절점을 마우스로 잡아 끌면 상자 크기에 따라 동영상의 너비와 높이가 조절된다.

CSS trick for flexibility

img,video,audio,object,embed,iframe{
  max-width:100%;
  height:auto;
}

미디어의 최대 너비는 부모 요소(본문 너비)를 넘지 않도록 제한하고, 높이는 너비의 변화에 따라 같은 비율을 유지하면서 변하도록 설정.

해상도에 따른 이미지 분기

Image replacement by resolution

해상도에 따라 BG 교체

우측 하단의 조절점을 마우스로 잡아 끌면 뷰 포트 크기에 따라 배경 이미지가 바뀐다. 예제를 새 창으로 보기.

CSS trick for image replcement

body{background-image:url(A.SMALL.IMAGE.jpg)}
@media all and (min-width:700px){
body{background-image:url(A.BIG.IMAGE.jpg)}
}

작은 화면에서는 작은 이미지를, 큰 해상도에서는 큰 이미지를 로딩한다. 두 이미지를 동시에 로딩하지 않는다.

해상력에 따른 이미지 분기

Image replacement by limit of resolution

해상력이란?

픽셀을 잘게 쪼개어 더 섬세하게 표시할 수 있는 능력. iPhone4 레티나 디스플레이는 iPhone3에 비해 해상력4배 더 높다.

해상력에 따라 다른 이미지 제공 가능

일반적인 해상력을 지닌 장치에 표시할 이미지 일반적인 해상력에 적합

높은 해상력을 지닌 장치에 표시할 이미지 높은 해상력에 적합

CSS trick for high limit of resolution

.helloworld{background:url(helloWorld.210.gif) no-repeat}
@media all and (-webkit-min-device-pixel-ratio:1.5){
.helloworld{background-image:url(helloWorld.420.gif);background-size:contain}
}

webkit 브라우저만 해석한다.

HTML5 적용

Applying HTML5

HTML5 적용시 장점

form 콘트롤 요소의 새로운 기능을 제공하여 UX를 향상시킬 수 있다.

DTD

<!DOCTYPE html>

DTD만 바꾸면 HTML5 문서가 된다.

HTML/XHTML 문서와 호환성 보장.

HTML5 Semantics

HTML5와 IE 6~8

HTML5 and IE 6~8 compatibility

IE 6~8 HTML5 지원 안 함

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption.

HTML5의 새로운 요소를 화면에 표시하지 않음.

html5shiv.js

<head>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
</head>

html5shiv.js 파일을 문서 head 요소 내부에 삽입하면 IE 6~8 브라우저도 HTML5 요소를 화면에 표시하게 된다. 라이선스: MIT.

여전히 깨지는데요?

html5shiv.js 파일을 추가해도 새로운 요소들 때문에 화면이 깨지는 증상을 발견할 수 있다.

이유는 display:block 으로 표시해야 할 블럭 요소들이 display:inline 으로 렌더링 되기 때문.

HTML5 CSS Reset

header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{
  display:block
}

인라인 형태로 표시되던 새로운 HTML5 요소를 블럭 요소로 변경해 준다. 이제 IE 6~8 브라우저도 HTML5 요소를 화면에 제대로 표시하게 된다.

모바일 먼저? 데스크톱 먼저?

Mobile or Desktop First?

디자이너 입장

  1. 데스크톱
  2. 테블릿
  3. 모바일

공간의 제약 없이 시작해서 점차 줄여나가는 것이 효율적.

UI 개발자 입장

  1. 모바일
  2. 테블릿
  3. 데스크톱

모바일 CSS는 미디어쿼리 밖에 작성하기 때문에 테블릿과 데스크톱 화면에도 영향을 미친다.

따라서 데스크톱 CSS를 작성하면서 모바일 코드를 덮어쓰는 순서로 진행하는 것이 효율적.

결론은?

가위, 바위, 보

데스크톱, 테블릿, 모바일 화면에 대한 모든 디자인이 완료된 이후에 UI 개발을 시작하는 것이 좋다.

그러나 이것은 아마도 현실성 없는 이야기 ㅜㅜ

새로 구현? 리펙토링?

New build or refactoring?

반응형으로 리펙토링 하는 경우

데스크톱 CSS 코드를 그대로 재사용할 수 있다.

1024px 이상 해상도 조건의 미디어쿼리 안쪽으로 모든 코드를 옮기고, 모바일과 테블릿 코드를 작성한 다음, 다시 데스크톱 코드를 디버깅 하면 된다.

반응형 웹 프레임웍

RWD frameworks

반응형 웹 프레임웍

고맙습니다

Thank you

http://naradesign.net/rwd/pr/

Blog: http://naradesign.net/
Twitter: naradesign
Facebook: naradesign
Me2day: naradesign

Jeong Chan Myeong
dece24앳gmail.com

Table of contents