전문가 토크릴레이 "웹과 플랫폼의 미래를 이야기 하다" 5탄 반응형, 적응형 웹, 그 다음은? : 지훈 UX PD (KTH)

1. 5
웹과 플랫폼의 미래를
이야기 하다_
반응형 웹 디자인? 넥스트 웹을 대비하라_
Responsive Web Design?
Preparation NEXT Web!
KTH.UXD ®NEXT WEB
H Lab | Hoon.Jee @yamoo9

2. 5
웹과 플랫폼의 미래를
이야기 하다_
웹의 {다음: 넥스트 웹}을 준비하라_
Preparation for NEXT
RWD : Mobile First
Retina Web
NUI

3. 5
웹과 플랫폼의 미래를
이야기 하다_
RWD
Responsive Web Design
반응형 웹 디자인으로 대응하라_

4. 52 웹과 플랫폼의 미래를
이야기 하다_
Changing Web
Environment
웹 환경의 변화
Desktop
Web
Phone

5. 5 웹과 플랫폼의 미래를
이야기 하다_
Dedicate Web
모바일 전용 웹 방법론
Desktop Phone

6. 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);
! ! }
! }
})();

7. 53 웹과 플랫폼의 미래를
이야기 하다_
Changing Web
Environment
웹 환경의 변화
Phone
Web
Tablet Desktop

8. 5 웹과 플랫폼의 미래를
이야기 하다_
Changing Web
Environment
웹 환경의 변화
4 +
Phone
Web
TV
Tablet Desktop

9. 변화 무쌍 스크린!

10. 5 웹과 플랫폼의 미래를
이야기 하다_
One Source
Multi Use!
하나의 웹, One Web
Phone
1
Tablet
RWD
Desktop TV
Go! Mediaqueri

11. 5 웹과 플랫폼의 미래를
이야기 하다_
One Source
Multi Use!
하나의 웹, One Web 1
Ethan
RWD
Marcotte
Go! A List apart

12. 5 웹과 플랫폼의 미래를
이야기 하다_
RWD vs Dedicate
반응형 웹과 전용 웹 사이트 제작 트랜드
2009 2010 2011 2012 2013 2014

13. 5
웹과 플랫폼의 미래를
이야기 하다_
RWD architectural
반응형 웹 디자인 | 구조 설계

14. 1
-‐
Layout
Flexible & Adaptive

15. 2
-‐
Contents
Flexible Type+text

16. 3
-‐
Contents
Flexible Image &
Media

17. 0
-‐
Condition
CSS3 Media Query
& Javascript Class

18. 0
-‐
Screen Optimization
Mobile Friendly

19. 5
웹과 플랫폼의 미래를
이야기 하다_
RWD Design Patterns
반응형 웹 | 디자인 패턴

20. -‐
Pattern
1
Most Fluid

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

22. -‐
Pattern
2
Column Drop

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

24. -‐
Pattern
3
Layout Shift

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

26. -‐
Pattern
4
Tiny Tweeks

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

28. -‐
Pattern
5
Off Canvas

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

30. 5웹과 플랫폼의 미래를
이야기 하다_
This is_ Responsive Web Design
Go! This is Responsive
Go! telegraphicsinc

31. 5
웹과 플랫폼의 미래를
이야기 하다_
Mobile First
모바일 퍼스트

32. 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.

33. 5 웹과 플랫폼의 미래를
이야기 하다_
Kate Aronowitz
Design Director Facebook
We're just now starting to think about
mobile first and desktop second for
a lot of our products.

34. 5 웹과 플랫폼의 미래를
이야기 하다_
Mobile vs Desktop
2007 2009 2011 2013 2015

35. 5 웹과 플랫폼의 미래를
이야기 하다_
Mobile vs Desktop
2007 2009 2011 2013 2015

36. 5웹과 플랫폼의 미래를
이야기 하다_
Spend Mobile User -‐ 2010

37. 5 웹과 플랫폼의 미래를
이야기 하다_
Mobile Traffic -‐ 2011~2016
cisco.com

38. CURRENT -‐
Desktop First

39. + NEXT
Mobile First

40. 5
웹과 플랫폼의 미래를
이야기 하다_
Mobile First Desktop Second

41. 5
웹과 플랫폼의 미래를
이야기 하다_
Retina Web
High Density & Resolution
고해상도 웹 시대 개막_

43. -‐ -‐
표준 스크린 레티나 스크린
Standard Retina

44. 5
웹과 플랫폼의 미래를
이야기 하다_
Genesis Problum
레티나 웹, 문제가 발생되다_

45. 5
웹과 플랫폼의 미래를
이야기 하다_
-‐
깨진 이미지 폰트
BREAK
Image
Fonts
-‐
깨지지 않는 텍스트
NOT
BREAK
Text

46. 5
웹과 플랫폼의 미래를
이야기 하다_
Device Pixel
디바이스 픽셀이란?

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

49. 5
웹과 플랫폼의 미래를
이야기 하다_
Screen Density
스크린 밀도란?

51. 제품 디스플레이의 해상도는 밀도(Density) 단위 적으로 레티나(Retina, 망막)라는 용어를 사용했습
로 구분되는데, 밀도는 “물리적인 공간에 얼마만큼 니다. 망막(Retina)이라고 이름 붙인데는 인간이
의 픽셀이 포함되어 있는가?”를 말합니다. 일반적 눈(망막)으로 구분할 수 있는 인치당 픽셀의 개수를
으로 1인치 안에 포함된 픽셀 개수를 나타내는 300 ppi로 보는데, 레티나 디스플레이(326 ppi)
PPI(Pixel per Inch)로 이야기 합니다. 예를 들어 는 이에 근접하는 고 해상도 스크린 임을 강조하는
72 ppi는 1인치 안에 72개의 픽셀이 포함되어 있 수단으로 사용한 것이죠.
다는 이야기이고, 300 ppi는 300개가 포함되어 있
다는 말인 거죠.
애플(Apple) 사의 故 스티브잡스(Steve Jobs)는
고 밀도의 디스플레이 패널이 상용화 되자, 이를
iPhone 4에 탑재한 후 시장에 내놓으면서 마케팅

52. 5
웹과 플랫폼의 미래를
이야기 하다_
CSS Pixel
CSS 픽셀이란?

55. 웹 브라우저가 웹 페이지 콘텐츠(Page Contents) 물리적인 크기가 아니라,
를 화면에 그릴 때, 사용되는 추상적인(abstract) 내부 픽셀의 구성 수가 증가
단위로 장치에 독립적인 픽셀(DIPs, Device-
Independent Pixels)이라고 부르며, 표준 디스플
레이 기준에서는 1개의 CSS 픽셀이 1개의 Device
픽셀에 해당합니다.
레티나 디스플레이는 같은 이미지(img)를 CSS 픽
셀의 크기(256 x 256)는 동일한 상태에서 내부에
구성된 픽셀의 개수가 4배 증가된 512 x 512
Device 픽셀로 렌더링합니다. 즉, 2배 커지게 됩니
다.

56. View Code

57. View Code

58. 5
웹과 플랫폼의 미래를
이야기 하다_
Bitmap Pixel
비트맵 픽셀이란?

60. 비트맵(Bitmap) 픽셀은 래스터(Raster, 직사각형 해상도는 웹 상의 CSS 픽셀로 정의될 수 있는데요.
격자의 화소, 색상 등을 종이 또는 모니터 매체에 표 웹 브라우저는 CSS의 height, width 속성에 따라
시하는 그래픽 포멧) 기반의 이미지(JPG, PNG, 래스터 기반의 이미지를 화면에 재정의하여 그려
GIF 등)에 사용되는 가장 작은 단위로 그래픽을 구 줍니다. 래스터 기반의 이미지가 표준 디스플레이
성하는 각각의 픽셀은 화면에 표시하기 위한 위치 에서 그려질 때, 1개의 Bitmap 픽셀은 결과적으로
(position), 색상(color) 등의 정보(data)를 포함 1개의 Device 픽셀에 대응 합니다. 하지만 레티나
하고 있습니다. 디스플레이에서는 CSS 픽셀의 공간(물리적으로
같은 크기)에 그림을 채워 표시하여야 하기 때문에
몇몇 이미지 포멧(GIF, PNG 등)은 불투명도 4배 많아진 Device 픽셀에 대응하지 못하고 쭉 늘
(Opacity & Alpha Channel, 알파 채널)를 픽셀 어나서 퍼지게 됩니다. 이 때문에 깨져보이는 현상
정보에 포함하기도 합니다. 래스터 기반의 이미지 이 발생하게 됩니다.

63. 레티나 디스플레이에 대응하여 웹 그래픽을 표시하 밀도로 처리되어 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의 고 되기 때문에 약간 흐릿할 수 있습니다.

64. 5
웹과 플랫폼의 미래를
이야기 하다_
Rester Image
JPEG & PNG
래스터(비트맵) 이미지 대응

65. 스탠다드 레티나
x2

66. + NEXT
Retina First
x2
짝수 홀수일 경우, 1/2하게 되면
소수점으로 떨어진다.

67. View Code

68. View Code

69. View Code

70. View Code

71. View Code

72. View Code

73. 5
웹과 플랫폼의 미래를
이야기 하다_
Vector Image
SVG
벡터 이미지 활용

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

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

76. CSS: SVG의 지원율! 약 80%

77. SVG가 적용된 애플 사이트
Apple.com

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

79. SVG는 코드 그래픽 포멧!

80. Go! Article

81. 5
웹과 플랫폼의 미래를
이야기 하다_
Icon Fonts
Webfonts
벡터 아이콘 활용

82. IcoMoon Web App

83. IcoMoon

84. Video Tut.

85. 5
웹과 플랫폼의 미래를
이야기 하다_
NUI
Natural User Interface
자연스러운 사용자 인터페이스

88. 1970 1980 2013
CLI GUI NUI

91. 5
웹과 플랫폼의 미래를
이야기 하다_
Keypad
Qwerty
Touch

93. 5 웹과 플랫폼의 미래를
이야기 하다_
Dan Saffer
Experience Design Director
Tab in the New Click !

94. 5
웹과 플랫폼의 미래를
이야기 하다_
Gesture NUI
제스처 기반의 자연스러운 인터페이스

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

96. 5
웹과 플랫폼의 미래를
이야기 하다_
Hold (Press)

97. 5
웹과 플랫폼의 미래를
이야기 하다_
Flick (Swipe)

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

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

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

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

102. 5
웹과 플랫폼의 미래를
이야기 하다_
Javascript Touch Event
자바스크립트 터치 이벤트

103. 5
웹과 플랫폼의 미래를
이야기 하다_
touchstart
터치 시작 시 발생
touchmove
터치 후, 이동 시 발생
touchend
터치 종료 시 발생
touchcancel
터치 취소 시 발생
event.touches
이벤트 객체의 touches 배열

104. 5
웹과 플랫폼의 미래를
이야기 하다_
gesturestart
멀티 터치 시작 시 발생
gesturechange
멀티 터치 후, 변화 시 발생
gestureend
멀티 터치 종료 시 발생
event.scale
이벤트 객체의 scale 감지
event.lotation
이벤트 객체의 lotation 감지

105. Touch + Mouse

106. 5
웹과 플랫폼의 미래를
이야기 하다_
Javascript Touch Library
자바스크립트 터치 라이브러리

107. JS Library

108. JS Library

109. touch.js

110. jGesture.js

111. 5
웹과 플랫폼의 미래를
이야기 하다_
Mobile BigBang Next Web

112. 5
웹과 플랫폼의 미래를
이야기 하다_
KTH.UXD ®NEXT WEB
H Lab | Hoon.Jee @yamoo9
facebook.com/yamoo9