5웹과 플랫폼의 미래를 이야기 하다_

KTH.UXD®NEXT WEBH Lab | Hoon.Jee @yamoo9

다섯번째 이야기

'Next Web'을 이야기하다 Next Web, 미리 알고 준비 하기

5웹과 플랫폼의 미래를 이야기 하다_

Responsive  Web  Design?Preparation  NEXT  Web!

KTH.UXD®NEXT WEBH Lab | Hoon.Jee @yamoo9

반응형 웹 디자인? 넥스트 웹을 대비하라_

5웹과 플랫폼의 미래를 이야기 하다_

5웹과 플랫폼의 미래를 이야기 하다_

Preparation  for  NEXTRWD  :  Mobile  FirstRetina  WebNUI

웹의 {다음: 넥스트 웹}을 준비하라_

5웹과 플랫폼의 미래를 이야기 하다_

RWDResponsive  Web  Design반응형 웹 디자인으로 대응하라_

5웹과 플랫폼의 미래를 이야기 하다_

PhoneDesktop

Web

Changing  Web  Environment

2웹 환경의 변화

5웹과 플랫폼의 미래를 이야기 하다_

Desktop Phone

Dedicate  Web모바일 전용 웹 방법론

5웹과 플랫폼의 미래를 이야기 하다_

Desktop Phone

Dedicate  Web모바일 전용 웹 방법론

5웹과 플랫폼의 미래를 이야기 하다_

Detecting  :  Device  User  Agent

var checkMobile = (function () {! return function(url, ua_key) {! ! try {! ! ! var ua = window.navigator.userAgent,! ! ! ! ua_key = ua_key || 'iphone|ipod|balckberry|android|sonyericsson|samsung|mot|lg|ce',! ! ! ! reg = new RegExp(ua_key, 'i');! ! ! mobile = reg.test(ua);! ! ! if(mobile) { location.href = url; };! ! } catch(e) {! ! ! console.error(e.message);! ! }! }})();

Oh...

shit!

모바일 기기의 식별자 감지

5웹과 플랫폼의 미래를 이야기 하다_

Web

DesktopPhone Tablet

Changing  Web  Environment

3웹 환경의 변화

5웹과 플랫폼의 미래를 이야기 하다_

Web

Changing  Web  Environment

4+Desktop

Phone

Tablet

TV

웹 환경의 변화

변화 무쌍 스크린!

5웹과 플랫폼의 미래를 이야기 하다_

Phone Tablet Desktop

One  SourceMulti  Use!1RWD

TV

Go! Mediaqueri

하나의 웹, One Web

5웹과 플랫폼의 미래를 이야기 하다_

One  SourceMulti  Use!1RWD

Go! A List apart

Ethan Marcotte

하나의 웹, One Web

5웹과 플랫폼의 미래를 이야기 하다_

2009 2010 2011 2012 2013 2014

RWD  vs  Dedicate반응형 웹과 전용 웹 사이트 제작 트랜드

5웹과 플랫폼의 미래를 이야기 하다_

Phone Tablet Desktop

One  SourceMulti  Use!1RWD

TV

Pudding.to

하나의 웹, One Web

5웹과 플랫폼의 미래를 이야기 하다_

RWD  architectural반응형 웹 디자인 | 구조 설계

-‐Layout1Flexible  &  Adaptive

레이아웃

-‐Contents2Flexible  Type+text

콘텐츠

-‐Contents3Flexible  Image  &Media

콘텐츠

-‐Condition0CSS3  Media  Query&  Javascript  Class

조건

-‐Screen  Optimization0Mobile  Friendly

스크린 최적화

5웹과 플랫폼의 미래를 이야기 하다_

RWD  Design  Patterns반응형 웹 | 디자인 패턴

-‐Pattern

1Most  Fluid

5웹과 플랫폼의 미래를 이야기 하다_

Most  Fluid

-‐Pattern

2Column  Drop

5웹과 플랫폼의 미래를 이야기 하다_

Column  Drop

-‐Pattern

3Layout  Shift

5웹과 플랫폼의 미래를 이야기 하다_

Layout  Shift

-‐Pattern

4Tiny  Tweeks

5웹과 플랫폼의 미래를 이야기 하다_

Tiny  Tweeks

-‐Pattern

5Off  Canvas

5웹과 플랫폼의 미래를 이야기 하다_

Off  Canvas

5웹과 플랫폼의 미래를 이야기 하다_

This  is_  Responsive  Web  Design

Go! This is Responsive

Go! telegraphicsinc

참고 사이트

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First모바일 퍼스트

5웹과 플랫폼의 미래를 이야기 하다_

Eric  Schmidt,  Google  Chairman

Google  programmers  are  doing  work  on  mobile  

applications  first,  because  they  are  better  apps  and  

that's  what  top  programmers  want  to  develop.

구글, 에릭 슈미츠구글의 프로그래머는 모바일 먼저 개발

5웹과 플랫폼의 미래를 이야기 하다_

Kate  AronowitzDesign  Director  Facebook

We're  just  now  starting  to  think  about  mobile  first  and  desktop  second  for  a  lot  of  our  products.

페이스북, 케이트 아로노위즈페이스북 서비는 모바일 우선! 데스크탑 차선!

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  vs  Desktop

2007 2009 2011 2013 2015 2016

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  vs  Desktop

2007 2009 2011 2013 2015 2016

5웹과 플랫폼의 미래를 이야기 하다_

Spend  Mobile  User  -‐  2010집/휴식/대기 시간에 스마트폰 사용률 80% 이상!

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  Traffic  -‐  2011~2016cisco.com 모바일 트래픽의 예상 증가율은 타 매체와 비교 불가!

-‐

Desktop  First

CURRENT

CURRENT

+

Mobile  First

NEXT

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First Desktop  Second

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  Second Desktop  First

제거콘텐츠

제거콘텐츠

필수콘텐츠

- -

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First Desktop  Second

필수콘텐츠

추가콘텐츠

추가콘텐츠

+ +

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First

Go! TNW

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First

5웹과 플랫폼의 미래를 이야기 하다_

Desktop  Second

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First Desktop  Second

Go! SMASHING

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First Desktop  Second

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  First Desktop  Second

5웹과 플랫폼의 미래를 이야기 하다_

Desktop  Contents

5웹과 플랫폼의 미래를 이야기 하다_

FI  Lesson  Learned

5웹과 플랫폼의 미래를 이야기 하다_

Retina  WebHigh  Density  &  Resolution

고해상도 웹 시대 개막_

-‐

Retina

-‐

Standard

표준 스크린 레티나 스크린

5웹과 플랫폼의 미래를 이야기 하다_

Genesis  Problem레티나 웹, 문제가 발생되다_

5웹과 플랫폼의 미래를 이야기 하다_

-‐

BREAKImageFonts

-‐

NOTBREAKText

깨진 이미지 폰트

깨지지 않는 텍스트

5웹과 플랫폼의 미래를 이야기 하다_

Device  Pixel디바이스 픽셀이란?

Device Pixel(제품의 물리적 픽셀)이란? 제품의 디스플레이를 구성하는 물리적인 작은 단위를 말합니다. 픽셀은 컬러(Color)와 명도(Brightness)로 구성되며, 미세하게 작은 간격을 두고 있지만 어느 정도 거리에서 바라보면 하나의 큰 그림으로 사람에게 보입니다. 일종의 착시라고 볼 수 있겠죠.

5웹과 플랫폼의 미래를 이야기 하다_

Screen  Density스크린 밀도란?

제품 디스플레이의 해상도는 밀도(Density) 단위로 구분되는데, 밀도는 “물리적인 공간에 얼마만큼의 픽셀이 포함되어 있는가?”를 말합니다. 일반적으로 1인치 안에 포함된 픽셀 개수를 나타내는 PPI(Pixel per Inch)로 이야기 합니다. 예를 들어 72 ppi는 1인치 안에 72개의 픽셀이 포함되어 있다는 이야기이고, 300 ppi는 300개가 포함되어 있다는 말인 거죠.

애플(Apple) 사의 故 스티브잡스(Steve Jobs)는 고 밀도의 디스플레이 패널이 상용화 되자, 이를 iPhone 4에 탑재한 후 시장에 내놓으면서 마케팅

적으로 레티나(Retina, 망막)라는 용어를 사용했습니다. 망막(Retina)이라고 이름 붙인데는 인간이 눈(망막)으로 구분할 수 있는 인치당 픽셀의 개수를 300 ppi로 보는데, 레티나 디스플레이(326 ppi)는 이에 근접하는 고 해상도 스크린 임을 강조하는 수단으로 사용한 것이죠.

5웹과 플랫폼의 미래를 이야기 하다_

CSS  PixelCSS 픽셀이란?

웹 브라우저가 웹 페이지 콘텐츠(Page Contents)를 화면에 그릴 때, 사용되는 추상적인(abstract) 단위로 장치에 독립적인 픽셀(DIPs, Device-Independent Pixels)이라고 부르며, 표준 디스플레이 기준에서는 1개의 CSS 픽셀이 1개의 Device 픽셀에 해당합니다.

레티나 디스플레이는 같은 이미지(img)를 CSS 픽셀의 크기(256 x 256)는 동일한 상태에서 내부에 구성된 픽셀의 개수가 4배 증가된 512 x 512 Device 픽셀로 렌더링합니다. 즉, 2배 커지게 됩니다.

물리적인 크기가 아니라, 내부 픽셀의 구성 수가 증가

View Code

View Code

5웹과 플랫폼의 미래를 이야기 하다_

Bitmap  Pixel비트맵 픽셀이란?

비트맵(Bitmap) 픽셀은 래스터(Raster, 직사각형 격자의 화소, 색상 등을 종이 또는 모니터 매체에 표시하는 그래픽 포멧) 기반의 이미지(JPG, PNG, GIF 등)에 사용되는 가장 작은 단위로 그래픽을 구성하는 각각의 픽셀은 화면에 표시하기 위한 위치(position), 색상(color) 등의 정보(data)를 포함하고 있습니다.

몇몇 이미지 포멧(GIF, PNG 등)은 불투명도(Opacity & Alpha Channel, 알파 채널)를 픽셀 정보에 포함하기도 합니다. 래스터 기반의 이미지

해상도는 웹 상의 CSS 픽셀로 정의될 수 있는데요. 웹 브라우저는 CSS의 height, width 속성에 따라 래스터 기반의 이미지를 화면에 재정의하여 그려 줍니다. 래스터 기반의 이미지가 표준 디스플레이에서 그려질 때, 1개의 Bitmap 픽셀은 결과적으로 1개의 Device 픽셀에 대응 합니다. 하지만 레티나 디스플레이에서는 CSS 픽셀의 공간(물리적으로 같은 크기)에 그림을 채워 표시하여야 하기 때문에 4배 많아진 Device 픽셀에 대응하지 못하고 쭉 늘어나서 퍼지게 됩니다. 이 때문에 깨져보이는 현상이 발생하게 됩니다.

레티나 디스플레이에 대응하여 웹 그래픽을 표시하는 가장 간단한 방법은 표준 디스플레이에서 보여질 이미지의 2배 큰 래스터 이미지를 만들어 서버(Server)에 올린 후 HTML, CSS, JS 등을 사용하여 이미지의 크기를 정확히 절반으로 줄이는 것입니다. 예를 들어 200 x 300 공간에(CSS 픽셀) 이미지를 표시하기 위하여 공간보다 2배 큰 400 x 600 픽셀의 래스터 이미지를 만들어 서버로 업로드 한 후, CSS를 사용하거나 HTML 속성을 사용하여 정확하게 반으로 줄여주는 거죠. 이 방법을 사용하면 레티나 디스플레이에서는 400 x 600의 고

밀도로 처리되어 200 x 300 공간에 자리잡게 되며, 표준 디스플레이에서는 4배 적은 저 밀도 픽셀로 래스터 이미지를 다운 샘플링(Down Sam pling)하여 표시하게 됩니다.

이 방법을 사용하면 레티나 디스플레이와 표준 디스플레이 환경에 모두 대응할 수 있습니다. 레티나 디스플레이에서는 원본 이미지가 가지고 있는 고 밀도로 처리되기 때문에 매우 깨끗하게 화면에 표시되겠죠. 반면 표준 디스플레이에서는 다운샘플링되기 때문에 약간 흐릿할 수 있습니다.

5웹과 플랫폼의 미래를 이야기 하다_

Rester  ImageJPEG  &  PNG

래스터(비트맵) 이미지 대응

x2

레티나스탠다드

+

Retina  First

NEXT

x2짝수 홀수일 경우, 1/2하게 되면

소수점으로 떨어진다.

View Code

View Code

View Code

View Code

View Code

View Code

5웹과 플랫폼의 미래를 이야기 하다_

Vector  ImageSVG

벡터 이미지 활용

x4 확대해도 래스터와 달리깨지지 않는 것이 벡터의 강점!

HTML: SVG의 지원율! 약 80% 이상

CSS: SVG의 지원율! 약 80%

Apple.com

SVG가 적용된 애플 사이트

레티나 스크린에서의 이미지 폰트

SVG는 코드 그래픽 포멧!

Go! Article

5웹과 플랫폼의 미래를 이야기 하다_

Icon  FontsWebfonts

벡터 아이콘 활용

IcoMoon Web App

IcoMoon

Video Tut.

5웹과 플랫폼의 미래를 이야기 하다_

NUINatural  User  Interface자연스러운 사용자 인터페이스

CLI GUI NUI1970 1980 2013

5웹과 플랫폼의 미래를 이야기 하다_

KeypadQwerty

Touch

5웹과 플랫폼의 미래를 이야기 하다_

Dan  SafferExperience  Design  Director

Tab  in  the  New  Click  !

5웹과 플랫폼의 미래를 이야기 하다_

Gesture  NUI제스처 기반의 자연스러운 인터페이스

5웹과 플랫폼의 미래를 이야기 하다_

Tab Double  Tab

5웹과 플랫폼의 미래를 이야기 하다_

Hold  (Press)

5웹과 플랫폼의 미래를 이야기 하다_

Flick  (Swipe)

5웹과 플랫폼의 미래를 이야기 하다_

Drag

5웹과 플랫폼의 미래를 이야기 하다_

Pinch

5웹과 플랫폼의 미래를 이야기 하다_

Spread

5웹과 플랫폼의 미래를 이야기 하다_

Rotate

5웹과 플랫폼의 미래를 이야기 하다_

Javascript  Touch  Event자바스크립트 터치 이벤트

5웹과 플랫폼의 미래를 이야기 하다_

touchstart터치 시작 시 발생

touchmove

touchend

touchcancel

터치 후, 이동 시 발생

터치 종료 시 발생

터치 취소 시 발생

event.touches이벤트 객체의 touches 배열

5웹과 플랫폼의 미래를 이야기 하다_

gesturestart멀티 터치 시작 시 발생

gesturechange

gestureend멀티 터치 후, 변화 시 발생

멀티 터치 종료 시 발생

event.scale이벤트 객체의 scale 감지

event.lotation이벤트 객체의 lotation 감지

Touch + Mouse

5웹과 플랫폼의 미래를 이야기 하다_

Javascript  Touch  Library자바스크립트 터치 라이브러리

JS Library

JS Library

touch.js

jGesture.js

5웹과 플랫폼의 미래를 이야기 하다_

Mobile  BigBang  Next  Web

5웹과 플랫폼의 미래를 이야기 하다_

KTH.UXD®NEXT WEBH Lab | Hoon.Jee @yamoo9facebook.com/yamoo9