Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221

3,380 views

Published on

  • Be the first to comment

[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221

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

×