[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
TRANSCRIPT
![Page 1: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/1.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
KTH.UXD®NEXT WEBH Lab | Hoon.Jee @yamoo9
다섯번째 이야기
'Next Web'을 이야기하다 Next Web, 미리 알고 준비 하기
![Page 2: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/2.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Responsive Web Design?Preparation NEXT Web!
KTH.UXD®NEXT WEBH Lab | Hoon.Jee @yamoo9
반응형 웹 디자인? 넥스트 웹을 대비하라_
![Page 3: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/3.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
![Page 4: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/4.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Preparation for NEXTRWD : Mobile FirstRetina WebNUI
웹의 {다음: 넥스트 웹}을 준비하라_
![Page 5: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/5.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
RWDResponsive Web Design반응형 웹 디자인으로 대응하라_
![Page 6: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/6.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
PhoneDesktop
Web
Changing Web Environment
2웹 환경의 변화
![Page 7: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/7.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Desktop Phone
Dedicate Web모바일 전용 웹 방법론
![Page 8: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/8.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Desktop Phone
Dedicate Web모바일 전용 웹 방법론
![Page 9: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/9.jpg)
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!
모바일 기기의 식별자 감지
![Page 10: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/10.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Web
DesktopPhone Tablet
Changing Web Environment
3웹 환경의 변화
![Page 11: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/11.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Web
Changing Web Environment
4+Desktop
Phone
Tablet
TV
웹 환경의 변화
![Page 12: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/12.jpg)
변화 무쌍 스크린!
![Page 13: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/13.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Phone Tablet Desktop
One SourceMulti Use!1RWD
TV
Go! Mediaqueri
하나의 웹, One Web
![Page 14: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/14.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
One SourceMulti Use!1RWD
Go! A List apart
Ethan Marcotte
하나의 웹, One Web
![Page 15: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/15.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
2009 2010 2011 2012 2013 2014
RWD vs Dedicate반응형 웹과 전용 웹 사이트 제작 트랜드
![Page 16: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/16.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Phone Tablet Desktop
One SourceMulti Use!1RWD
TV
Pudding.to
하나의 웹, One Web
![Page 17: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/17.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
RWD architectural반응형 웹 디자인 | 구조 설계
![Page 18: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/18.jpg)
-‐Layout1Flexible & Adaptive
레이아웃
![Page 19: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/19.jpg)
-‐Contents2Flexible Type+text
콘텐츠
![Page 20: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/20.jpg)
-‐Contents3Flexible Image &Media
콘텐츠
![Page 21: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/21.jpg)
-‐Condition0CSS3 Media Query& Javascript Class
조건
![Page 22: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/22.jpg)
-‐Screen Optimization0Mobile Friendly
스크린 최적화
![Page 23: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/23.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
RWD Design Patterns반응형 웹 | 디자인 패턴
![Page 24: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/24.jpg)
-‐Pattern
1Most Fluid
![Page 25: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/25.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Most Fluid
![Page 26: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/26.jpg)
-‐Pattern
2Column Drop
![Page 27: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/27.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Column Drop
![Page 28: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/28.jpg)
-‐Pattern
3Layout Shift
![Page 29: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/29.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Layout Shift
![Page 30: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/30.jpg)
-‐Pattern
4Tiny Tweeks
![Page 31: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/31.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Tiny Tweeks
![Page 32: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/32.jpg)
-‐Pattern
5Off Canvas
![Page 33: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/33.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Off Canvas
![Page 34: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/34.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
This is_ Responsive Web Design
Go! This is Responsive
Go! telegraphicsinc
참고 사이트
![Page 35: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/35.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First모바일 퍼스트
![Page 36: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/36.jpg)
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.
구글, 에릭 슈미츠구글의 프로그래머는 모바일 먼저 개발
![Page 37: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/37.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Kate AronowitzDesign Director Facebook
We're just now starting to think about mobile first and desktop second for a lot of our products.
페이스북, 케이트 아로노위즈페이스북 서비는 모바일 우선! 데스크탑 차선!
![Page 38: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/38.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile vs Desktop
2007 2009 2011 2013 2015 2016
![Page 39: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/39.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile vs Desktop
2007 2009 2011 2013 2015 2016
![Page 40: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/40.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Spend Mobile User -‐ 2010집/휴식/대기 시간에 스마트폰 사용률 80% 이상!
![Page 41: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/41.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile Traffic -‐ 2011~2016cisco.com 모바일 트래픽의 예상 증가율은 타 매체와 비교 불가!
![Page 42: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/42.jpg)
-‐
Desktop First
CURRENT
![Page 43: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/43.jpg)
CURRENT
![Page 44: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/44.jpg)
+
Mobile First
NEXT
![Page 45: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/45.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First Desktop Second
![Page 46: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/46.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile Second Desktop First
제거콘텐츠
제거콘텐츠
필수콘텐츠
- -
![Page 47: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/47.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First Desktop Second
필수콘텐츠
추가콘텐츠
추가콘텐츠
+ +
![Page 48: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/48.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First
Go! TNW
![Page 49: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/49.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First
![Page 50: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/50.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Desktop Second
![Page 51: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/51.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First Desktop Second
Go! SMASHING
![Page 52: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/52.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First Desktop Second
![Page 53: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/53.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile First Desktop Second
![Page 54: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/54.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Desktop Contents
![Page 55: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/55.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
FI Lesson Learned
![Page 56: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/56.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Retina WebHigh Density & Resolution
고해상도 웹 시대 개막_
![Page 57: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/57.jpg)
![Page 58: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/58.jpg)
-‐
Retina
-‐
Standard
표준 스크린 레티나 스크린
![Page 59: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/59.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Genesis Problem레티나 웹, 문제가 발생되다_
![Page 60: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/60.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
-‐
BREAKImageFonts
-‐
NOTBREAKText
깨진 이미지 폰트
깨지지 않는 텍스트
![Page 61: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/61.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Device Pixel디바이스 픽셀이란?
![Page 62: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/62.jpg)
![Page 63: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/63.jpg)
Device Pixel(제품의 물리적 픽셀)이란? 제품의 디스플레이를 구성하는 물리적인 작은 단위를 말합니다. 픽셀은 컬러(Color)와 명도(Brightness)로 구성되며, 미세하게 작은 간격을 두고 있지만 어느 정도 거리에서 바라보면 하나의 큰 그림으로 사람에게 보입니다. 일종의 착시라고 볼 수 있겠죠.
![Page 64: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/64.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Screen Density스크린 밀도란?
![Page 65: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/65.jpg)
![Page 66: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/66.jpg)
제품 디스플레이의 해상도는 밀도(Density) 단위로 구분되는데, 밀도는 “물리적인 공간에 얼마만큼의 픽셀이 포함되어 있는가?”를 말합니다. 일반적으로 1인치 안에 포함된 픽셀 개수를 나타내는 PPI(Pixel per Inch)로 이야기 합니다. 예를 들어 72 ppi는 1인치 안에 72개의 픽셀이 포함되어 있다는 이야기이고, 300 ppi는 300개가 포함되어 있다는 말인 거죠.
애플(Apple) 사의 故 스티브잡스(Steve Jobs)는 고 밀도의 디스플레이 패널이 상용화 되자, 이를 iPhone 4에 탑재한 후 시장에 내놓으면서 마케팅
적으로 레티나(Retina, 망막)라는 용어를 사용했습니다. 망막(Retina)이라고 이름 붙인데는 인간이 눈(망막)으로 구분할 수 있는 인치당 픽셀의 개수를 300 ppi로 보는데, 레티나 디스플레이(326 ppi)는 이에 근접하는 고 해상도 스크린 임을 강조하는 수단으로 사용한 것이죠.
![Page 67: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/67.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
CSS PixelCSS 픽셀이란?
![Page 68: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/68.jpg)
![Page 69: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/69.jpg)
![Page 70: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/70.jpg)
웹 브라우저가 웹 페이지 콘텐츠(Page Contents)를 화면에 그릴 때, 사용되는 추상적인(abstract) 단위로 장치에 독립적인 픽셀(DIPs, Device-Independent Pixels)이라고 부르며, 표준 디스플레이 기준에서는 1개의 CSS 픽셀이 1개의 Device 픽셀에 해당합니다.
레티나 디스플레이는 같은 이미지(img)를 CSS 픽셀의 크기(256 x 256)는 동일한 상태에서 내부에 구성된 픽셀의 개수가 4배 증가된 512 x 512 Device 픽셀로 렌더링합니다. 즉, 2배 커지게 됩니다.
물리적인 크기가 아니라, 내부 픽셀의 구성 수가 증가
![Page 71: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/71.jpg)
View Code
![Page 72: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/72.jpg)
View Code
![Page 73: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/73.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Bitmap Pixel비트맵 픽셀이란?
![Page 74: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/74.jpg)
![Page 75: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/75.jpg)
비트맵(Bitmap) 픽셀은 래스터(Raster, 직사각형 격자의 화소, 색상 등을 종이 또는 모니터 매체에 표시하는 그래픽 포멧) 기반의 이미지(JPG, PNG, GIF 등)에 사용되는 가장 작은 단위로 그래픽을 구성하는 각각의 픽셀은 화면에 표시하기 위한 위치(position), 색상(color) 등의 정보(data)를 포함하고 있습니다.
몇몇 이미지 포멧(GIF, PNG 등)은 불투명도(Opacity & Alpha Channel, 알파 채널)를 픽셀 정보에 포함하기도 합니다. 래스터 기반의 이미지
해상도는 웹 상의 CSS 픽셀로 정의될 수 있는데요. 웹 브라우저는 CSS의 height, width 속성에 따라 래스터 기반의 이미지를 화면에 재정의하여 그려 줍니다. 래스터 기반의 이미지가 표준 디스플레이에서 그려질 때, 1개의 Bitmap 픽셀은 결과적으로 1개의 Device 픽셀에 대응 합니다. 하지만 레티나 디스플레이에서는 CSS 픽셀의 공간(물리적으로 같은 크기)에 그림을 채워 표시하여야 하기 때문에 4배 많아진 Device 픽셀에 대응하지 못하고 쭉 늘어나서 퍼지게 됩니다. 이 때문에 깨져보이는 현상이 발생하게 됩니다.
![Page 76: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/76.jpg)
![Page 77: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/77.jpg)
![Page 78: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/78.jpg)
레티나 디스플레이에 대응하여 웹 그래픽을 표시하는 가장 간단한 방법은 표준 디스플레이에서 보여질 이미지의 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)하여 표시하게 됩니다.
이 방법을 사용하면 레티나 디스플레이와 표준 디스플레이 환경에 모두 대응할 수 있습니다. 레티나 디스플레이에서는 원본 이미지가 가지고 있는 고 밀도로 처리되기 때문에 매우 깨끗하게 화면에 표시되겠죠. 반면 표준 디스플레이에서는 다운샘플링되기 때문에 약간 흐릿할 수 있습니다.
![Page 79: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/79.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Rester ImageJPEG & PNG
래스터(비트맵) 이미지 대응
![Page 80: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/80.jpg)
x2
레티나스탠다드
![Page 81: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/81.jpg)
+
Retina First
NEXT
x2짝수 홀수일 경우, 1/2하게 되면
소수점으로 떨어진다.
![Page 82: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/82.jpg)
View Code
![Page 83: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/83.jpg)
View Code
![Page 84: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/84.jpg)
View Code
![Page 85: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/85.jpg)
View Code
![Page 86: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/86.jpg)
View Code
![Page 87: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/87.jpg)
View Code
![Page 88: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/88.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Vector ImageSVG
벡터 이미지 활용
![Page 89: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/89.jpg)
x4 확대해도 래스터와 달리깨지지 않는 것이 벡터의 강점!
![Page 90: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/90.jpg)
HTML: SVG의 지원율! 약 80% 이상
![Page 91: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/91.jpg)
CSS: SVG의 지원율! 약 80%
![Page 93: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/93.jpg)
레티나 스크린에서의 이미지 폰트
![Page 94: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/94.jpg)
SVG는 코드 그래픽 포멧!
![Page 95: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/95.jpg)
Go! Article
![Page 96: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/96.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Icon FontsWebfonts
벡터 아이콘 활용
![Page 97: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/97.jpg)
IcoMoon Web App
![Page 99: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/99.jpg)
Video Tut.
![Page 100: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/100.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
NUINatural User Interface자연스러운 사용자 인터페이스
![Page 101: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/101.jpg)
![Page 102: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/102.jpg)
![Page 103: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/103.jpg)
CLI GUI NUI1970 1980 2013
![Page 104: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/104.jpg)
![Page 105: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/105.jpg)
![Page 106: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/106.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
KeypadQwerty
Touch
![Page 107: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/107.jpg)
![Page 108: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/108.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Dan SafferExperience Design Director
Tab in the New Click !
![Page 109: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/109.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Gesture NUI제스처 기반의 자연스러운 인터페이스
![Page 110: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/110.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Tab Double Tab
![Page 111: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/111.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Hold (Press)
![Page 112: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/112.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Flick (Swipe)
![Page 113: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/113.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Drag
![Page 114: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/114.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Pinch
![Page 115: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/115.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Spread
![Page 116: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/116.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Rotate
![Page 117: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/117.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Javascript Touch Event자바스크립트 터치 이벤트
![Page 118: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/118.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
touchstart터치 시작 시 발생
touchmove
touchend
touchcancel
터치 후, 이동 시 발생
터치 종료 시 발생
터치 취소 시 발생
event.touches이벤트 객체의 touches 배열
![Page 119: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/119.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
gesturestart멀티 터치 시작 시 발생
gesturechange
gestureend멀티 터치 후, 변화 시 발생
멀티 터치 종료 시 발생
event.scale이벤트 객체의 scale 감지
event.lotation이벤트 객체의 lotation 감지
![Page 120: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/120.jpg)
Touch + Mouse
![Page 121: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/121.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Javascript Touch Library자바스크립트 터치 라이브러리
![Page 122: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/122.jpg)
JS Library
![Page 123: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/123.jpg)
JS Library
![Page 124: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/124.jpg)
touch.js
![Page 125: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/125.jpg)
jGesture.js
![Page 126: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/126.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
Mobile BigBang Next Web
![Page 127: [발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560c060d8b42af43b8b539b/html5/thumbnails/127.jpg)
5웹과 플랫폼의 미래를 이야기 하다_
KTH.UXD®NEXT WEBH Lab | Hoon.Jee @yamoo9facebook.com/yamoo9