브라우저를 넘어 디바이스로i@hooney.net

5th Korea Web Standards Day

http://hooney.net

취미 : 싸이클링 , 여행 , 불리

최근 관심 사항 : 2~30 대 투표율

수 많은 브라우저들을 맞추는 건 ... 전쟁처럼 치열했습니다 .

그 동안 고생 많았습니다 .

여러분은 진정한 챔피언입니다 .

짝짝짝 !

모바일 웹의 남의 나라 얘기인 줄 알았죠 . 아이폰 출시전까진 ...

모바일 운영체제 (OS) 통계 - 전세계

모바일 웹 브라우저 통계 - 전세계

국내도 아 .. 아이폰이 출시되면서 스마트폰이 쏟아져 나옵니다 .

모바일 운영체제 (OS) 통계 - 한국

모바일 웹 브라우저 통계 - 한국

5 인치부터 10 인치까지 ... 타블렛 사이즈는 제한도 없나 ?!

어쩌면 ... 이렇게 ... 남의 사정 봐주지도 않구 ... 막 나오남 ;;;

웹 접근성 구성요소

웹접근성구성요소

콘텐츠

사용자제작자

• 제작 도구

• 평가 도구

• 브라우저• 미디어플레이

어• 보조 기기

모바일 웹 구성요소

모바일 웹

콘텐츠

사용자제작자

• 웹표준 +최신기술

• 개발 SDK

• 프레임 웍• 평가 도구

• 디바이스• 운영체제• 브라우저• 네트워크• 사용자

입력 / 반응

One Web

• W3C’s One Web– 어떠한 기기에 상관없이 사용자는 동일한 정보와 서비스를 이용할 수

있어야 함 .– 그러나 , 동일한 정보가 모든 기기에서 동일하게 보이지 않을 수도

있음 .

• 모바일 웹의 차이점– 다른 출력 : screen size, device capavilities– 다른 반응 : user behavior, browser behavior, input meth-

ods– 다른 접근 : low notwork, wifi, transcoders

모바일 웹과 멀티 디바이스의 험난 여정을 떠나볼까요 ?

모바일 웹 제작

• 보편적 – 좋은 콘텐츠와 디자인 , 사용성– 웹 표준 (+ 접근성 ) 준수 , 구조 / 표현 / 동작 분리

• 모바일 웹– 유연한 디자인– 점진적 기능 향상 , 최신 기술 적극 활용– 웹 페이지 최적화

(-o-);;

돌발 퀴즈 : 다음의 기호는 CSS 에서 무엇을 의미할까요 ?

상품 : 웹 사이트 최적화 기법 , UI 개발자를 위한 필수 지침서 by 스티브 사우더스

CSS3 와 밴더 확장 속성

• CSS 2.1 의 벤더 전용 확장 속성-ms-, mso-, -moz-, -webkit-, -o-

• CSS 3 와 벤더 전용 확장 속성border-radious, border-imagebox-sizing, box-shadow, text-shadowcolumns, column-count, column-gap, column-rule,

미디어 쿼리

1. linked Style

<link type="text/css" media="screen" href="screen.css">

<link type="text/css" media="handheld" href="mobile.css">

2. import Style(1)

@import url(mobile.css) handheld;

3. import Style(2)

@media handheld {

body { width: 100%; }

}

미디어 쿼리

모바일 기기별 스타일 제공 <link media="only screen and (max-device-width: 480px)"

href="small-device.css" type= "text/css" rel="stylesheet">

<link media="screen and (min-device-width: 481px)"

href="not-small-device.css" type="text/css" rel="stylesheet">

가로 , 세로 모드 스타일 변경 <link rel="stylesheet" media="all and (orientation:portrait)"

href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)"

href="landscape.css">

viewport

Viewportwidth: default(980px)scale: none

Viewportwidth: 320pxscale: 1.0

Viewportwidth: 320pxscale: 1.5

viewport

viewport 의 가로 크기를 디바이스 가로 크기로 설정

<meta name = "viewport" content = "width = device-width">

viewport 의 기본 확대비율을 100% 로 설정

<meta name = "viewport" content = "initial-scale = 1.0">

viewport 의 기본 확대비율을 230% 및 사용자 확대 기능 불가로 설정

<meta name = "viewport" content = "initial-scale = 2.3,

user-scalable = no">

viewport - 아이폰과 옴니아 2

아이폰을 기준으로 옴니아 viewport 설정

<meta name="viewport" content="width=device-width; initial-

scale=0.75;

maximum-scale=0.75; “/>

해상도 :480x800px

해상도 :320x480px

선택자

• CSS 문법선택자 { 속성 : 값 ( 단위 ); } // 주석

• CSS2.1 + CSS3 선택자

– a > b, a + b– a:hover, a:active, a:focus– a[foo=“bar”]– :before, :after– a::nth-child(n), a:empty, a::checked, a:not(s)

다운로드 웹 폰트

• 기본 사용법@font-face {

font-family: "yunache";src: url(http://..../yunache.ttf) format("truetype");

}h1 { font-family: "yunache", sans-serif; }

//font 가져오기 (google 등 )@import url(http://.../fonts.css) all;h1 { font-family: yunache, serif; }

멀티 컬럼

• use Tablet. not (i)phone; .col3 {

column-count: 3; column-gap: 1em; column-rule: 1px solid black;

-moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black;

-webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black;

}

둥근 모서리

• 3x3 이미지는 잊자 .#pref ul {

border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

}#pref li {

border-top: 1px solid #ccc;}#pref li:first-child {

border: 0}

min/max width/heightmin/max-width/height

box-s iz ing

• border/content-box.box {

box-sizing: content-box;-moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;

}

– 내가 원하는 박스 모델– min/max-width/height 와 함께 사용 불가

opaci ty

• 다양한 투명도를 블랜딩하기

#trans {opacity: 0.4;-moz-opacity: 0.4;-webkit-opacity: 0.4;filter:alpha(opacity=40);

}

disp lay

• 격자 그리드 레이아웃은 테이블 레이아웃으로 ~

#grid3 { display: table; }#grid3 ul { display: table-row; }#grid3 li { display: table-cell; }

#grid3 li#col1 { widht: 100px;}#grid3 li#col2 { widht: 600px;}#grid3 li#col3 { widht: 200px;}

웹 페이지 최적화

• HTTP 요청 줄이기

• 콘텐츠 전송 네트워크 사용

• 헤더에 만료기한 추가

• Gzip 컴포넌트

• 스타일시트는 위에 두기

• 스크립트는 아래에 두기

• CSS Expression 피하기

• JS 와 CSS 압축

• 25kb 이하로 줄이기

• JS 와 CSS 는 외부 파일로

• DNS 조회 줄이기

• 자바스크립트 최소화

• 리다이렉트 피하기

• 중복 스크립트 제거

• ETag 설정

• Ajax 캐시 지정

• DOM 접근 줄이기

• 이미지 압축

Yahoo! 최적화 규칙 http://developer.yahoo.com/performance/rules.html

영감 , 참조모방은 창조의 어머니 by 아리스토텔레스

http://www.mobileawesomeness.com/

http://mobify.me/gallery/

http://www.cssiphone.com/

가이드 , 지침 , 테스트

모바일 웹 관련 기관 / 활동 / 가이드

• W3C Mobile Web Initiative– Mobile Web Best Practices– mobileOK Basic– Content Transformation Guidelines– Mobile Web Application Best Practices

• Mobile Web 2.0 Forum– 한국형 모바일 웹 모범사례 확장 1.5 가이드– 한국형 모바일 OK 1.0 표준가이드– 한국형 모바일 OK 기본 테스트 1.0

http://validator.w3.org/mobile/

http://v.mobileok.kr/

http://ready.mobi/launch.jsp

http://itunes.apple.com/app/liveview/id301069270

http://www.phonegap.com/

Adobe DeviceCentral

더 늦지 않게 ... 모바일 웹과 멀티 디바이스 세계로 떠나봅시다 !

감사합니다 .

^_^

문의 : 조훈 (i@hooney.net)