웹
 
 모바일 기술
 전망  2011                                        권정혁 ( @xguru )
소개•권
 정
 혁                  ➡            K
 
 
 
 
 
 
 
 기술전략팀장
                             -                                           SW Architect                            -        ...
 -
 http://xguru.net                  ➡            트위터
 -
 @xguru                  ➡            이메일
 -
 guru
 @
 xguru.net
2010 was           year of      HTML5ReadWriteWeb - “Top Trends of 2010 : HTML5”
HTML5 ?HTML5 ~= HTML +   CSS   + JS APIWeb 에서 Desktop 수준의 App 구현      ➠        Web App
Web App ?•
 웹
 브라우저에서
 실행•
 Reading
 ➠
 
 
 
 
 
 
 Interaction
 with
 Audio/Video/Animation•
 데스크탑
Upcoming SlideShare
Loading in...5
×

2011 Mobile & Web technologies

547

Published on

2011.02.25

WebApps FutureCon 에서 발표한 "2011년 웹 & 모바일 개발자가 주목해야할 기술들" 자료입니다. HTML5,CSS3,Javascript,Responsive Web Design,Device API,Hybrid App,Hybrid Framework 등에 대해서 설명합니다.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
547
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "2011 Mobile & Web technologies"

  1. 1. 웹
  2. 2.  
  3. 3.  모바일 기술
  4. 4.  전망 2011 권정혁 ( @xguru )
  5. 5. 소개•권
  6. 6.  정
  7. 7.  혁 ➡ K
  8. 8.  
  9. 9.  
  10. 10.  
  11. 11.  
  12. 12.  
  13. 13.  
  14. 14.  
  15. 15.  기술전략팀장
  16. 16.   - SW Architect - Developer Evangelist ➡ 블로그
  17. 17.  -
  18. 18.  http://xguru.net ➡ 트위터
  19. 19.  -
  20. 20.  @xguru ➡ 이메일
  21. 21.  -
  22. 22.  guru
  23. 23.  @
  24. 24.  xguru.net
  25. 25. 2010 was year of HTML5ReadWriteWeb - “Top Trends of 2010 : HTML5”
  26. 26. HTML5 ?HTML5 ~= HTML + CSS + JS APIWeb 에서 Desktop 수준의 App 구현 ➠ Web App
  27. 27. Web App ?•
  28. 28.  웹
  29. 29.  브라우저에서
  30. 30.  실행•
  31. 31.  Reading
  32. 32.  ➠
  33. 33.  
  34. 34.  
  35. 35.  
  36. 36.  
  37. 37.  
  38. 38.  
  39. 39.  Interaction
  40. 40.  with
  41. 41.  Audio/Video/Animation•
  42. 42.  데스크탑
  43. 43.  소프트웨어
  44. 44.  수준의
  45. 45.  사용자
  46. 46.  경험
  47. 47.  (UX)•
  48. 48.  서버에서
  49. 49.  제공되므로
  50. 50.  신속한
  51. 51.  업데이트
  52. 52.  *•
  53. 53.  다양한
  54. 54.  디바이스
  55. 55.  동시
  56. 56.  지원
  57. 57.  ➠
  58. 58.  모바일
  59. 59.
  60. 60.  HTML5가
  61. 61.  모바일에
  62. 62.  중요한가
  63. 63.  ? 회사들이
  64. 64.  각
  65. 65.  모바일
  66. 66.  플랫폼용
  67. 67.  네이티브
  68. 68.  앱을
  69. 69.  모두
  70. 70.  만들기는
  71. 71.  어렵다. iOS, Android, WP7, BlackBerry, Symbian, Bada .. “머리
  72. 72.  아프다.
  73. 73.  페이스북에
  74. 74.  새
  75. 75.  기능을
  76. 76.  추가하면
  77. 77.  동시에
  78. 78.  7개의
  79. 79.  플랫폼을
  80. 80.  작업해야한다.
  81. 81.   HTML5가
  82. 82.  미래의
  83. 83.  플랫폼이다.
  84. 84.  ”
  85. 85.  
  86. 86.  
  87. 87.  
  88. 88.  
  89. 89.  
  90. 90.  
  91. 91.  
  92. 92.  
  93. 93.  
  94. 94.  
  95. 95.  
  96. 96.  
  97. 97.  
  98. 98.  
  99. 99.  
  100. 100.  
  101. 101.  
  102. 102.  
  103. 103.  
  104. 104.  
  105. 105.  
  106. 106.  
  107. 107.  
  108. 108.  
  109. 109.  
  110. 110.  
  111. 111.  
  112. 112.  
  113. 113.  
  114. 114.  
  115. 115.  
  116. 116.  
  117. 117.  
  118. 118.  -
  119. 119.  Facebook
  120. 120.  CTO
  121. 121.  Bret
  122. 122.  Taylor “구글조차도
  123. 123.  모든
  124. 124.  플랫폼을
  125. 125.  네이티브로
  126. 126.  지원하기엔
  127. 127.  예산이
  128. 128.  모자르다.”
  129. 129.   -
  130. 130.  Google
  131. 131.  VP
  132. 132.  Vic
  133. 133.  Gundotra
  134. 134. 정부 , 지자체 모바일 앱 현황 기관 App 제작비용 다운로드 방송통신위 방송통신위 3500만원 4670건 법무부 법아
  135. 135.  놀자 8140만원 160000건 행안부 민원
  136. 136.  24시 2억원 미집계 문화부 touch
  137. 137.  korea 1900만원 68건 고용노동부 잡영 2억1600만원 4784건 보건복지부 숙녀다이어리 3000만원 112905건 조달청 나라장터알림 9200만원 7181건 특허청 특허정보검색 2억6600만원 833건 통계청 수명계산기 2310만원 331129건 서울시 I-tour 3억1400만원 184094건 서울시 서울종합방재센터 2500만원 10건 경기도 경기산책로 4천만원 5100건 전라남도 U남도
  138. 138.  여행길잡이 3억원 6600건 연합뉴스 : 정부의 앱 개발비 현황 http://j.mp/korgovapp
  139. 139. Devices 2011 BB PlayBook HP WebOS CR-48 MS WP7 withiOS Android Nokia
  140. 140. Web Tech 2011
  141. 141. HTML5
  142. 142.  ,
  143. 143.  CSS3Javascript
  144. 144.  !!!Responsive
  145. 145.  Web
  146. 146.  DesignWeb
  147. 147.  App
  148. 148.  StoresDevice
  149. 149.  APIHybrid
  150. 150.  App
  151. 151.  
  152. 152.  Cross
  153. 153.  Platform
  154. 154. HTML(5) Offline Device 3D , 2D Performance Semantics Multi Media Connectivity CSS3 Storage Access Graphics Effects Integration
  155. 155. HTML5
  156. 156.  어떻게
  157. 157.  공부하나요
  158. 158.  ?•HTML5
  159. 159.  스펙
  160. 160.  너무
  161. 161.  어려워요!
  162. 162.  게다가
  163. 163.  영어! ✓
  164. 164.  한글
  165. 165.  HTML5
  166. 166.  스펙
  167. 167.  
  168. 168.  ➠
  169. 169.  
  170. 170.  http://j.mp/html5ko by ClearBoth.org•그래도
  171. 171.  내용이
  172. 172.  너무
  173. 173.  많은
  174. 174.  데요
  175. 175.  ? ✓
  176. 176.  웹
  177. 177.  개발자를
  178. 178.  위한
  179. 179.  최소스펙
  180. 180.  ➠
  181. 181.  
  182. 182.  http://j.mp/html5devel•튜토리얼
  183. 183.  
  184. 184.  프리젠테이션
  185. 185.  은
  186. 186.  없나요
  187. 187.  ? ✓
  188. 188.  Google
  189. 189.  의
  190. 190.  선물
  191. 191.  ➠
  192. 192.  
  193. 193.  http://www.html5rocks.com/•그
  194. 194.  외에
  195. 195.  꼭
  196. 196.  추천해주실
  197. 197.  사이트는
  198. 198.  ? ✓ 실전
  199. 199.  HTML5
  200. 200.  가이드
  201. 201.  (
  202. 202.  한글
  203. 203.  PDF
  204. 204.  ) ➠
  205. 205.  
  206. 206.  http://j.mp/html5guide_ko
  207. 207. HTML5 와 웹 브라우저 Android RIM webOS iOS 3+ 2011 3Q 2.0+ OS6+ 1.4+ 6 7 8 9 3+ 6+ 4+ 10+
  208. 208. HTML5 적용 지금부터!• HTML5shiv : HTML5 IE Enabling Script - by Remy Sharp !--[if
  209. 209.  lt
  210. 210.  IE
  211. 211.  9] script
  212. 212.  src=http://html5shiv.googlecode.com/svn/trunk/html5.js/script ![endif]-- ✓ John Resig 의 제안 : http://ejohn.org/blog/html5-shiv/ , IE 6 까지 지원• Mordernizr - http://www.modernizr.com/ ✓ HTML5Shiv 기능을 포함하여 CSS3 (조건분기) 까지 더 폭넓은 지원 ✓ Modernizr 객체를 생성하여 HTML5, CSS3 기능이 지원되는지 검사 if
  213. 213.  (Modernizr.canvas)
  214. 214.  {
  215. 215.   var
  216. 216.  c
  217. 217.  =
  218. 218.  document.createElement(canvas);
  219. 219.   var
  220. 220.  context
  221. 221.  =
  222. 222.  c.getContext(2d);
  223. 223.   //
  224. 224.  캔버스
  225. 225.  사용
  226. 226.   document.getElementById(canvasContainer).appendChild(c); }• HTML5 Boilerplate - http://html5boilerplate.com/ ✓ 즉시 사용 가능한 HTML5 기본양식 ✓ Boilerplate 에서 참고할만한 Snippet 20가지 - http://j.mp/hDExIw
  227. 227. HTML5 Initializer• http://initializr.com/• HTML5 Boilerplate 에 기반• jQuery• Modernizer / HTML5shiv• 서버 설정 파일
  228. 228. HTML5 Video Audio• 20종의 HTML5 Video Player - http://j.mp/dfxNMQ ✓ Video JS , JW Player , Mediaelement.js , Projekktor .. ✓ Flash Fallback 을 이용해서 IE 까지 지원• VideoJS ✓ http://videojs.com/ - Free OpenSource , Skin , Full Screen 지원• Audio.js ✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)
  229. 229. Javascript !!!• 자바스크립트의 재발견• Javascript Library for Mobile• UI Frameworks• Application Frameworks• Server-side JavaScript• Languages that Compiles to JS
  230. 230. Javascript for Mobile• - http://zeptojs.com ✓ Mobile 만을 위한 자바스크립트 라이브러리 ( Mobile WebKit 최적화 ) ✓ jQuery 와 유사한 문법 제공 but jQuery ( 26.7 K ) , Zepto.js ( 2.3K ) ✓ 오픈소스 ( MIT License ) ✓ $(p).html(test).css(color:red); ✓ get,each,index,first,find,closest,next,prev,remove,html,show,hide,offset,heig ht,width,attr,css,addClass.. ✓ AJAX : $.post , $.getJSON ✓ Touch Event -­‐ $(some selector).tap(function(){ ... }); -­‐ $(some selector).doubleTap(function(){ ... }); -­‐ $(some selector).swipe(function(){ ... });
  231. 231. UI Library for Touch Devices Web UI는 Touch 와 친화적이지 않음• jQTouch - http://jqtouch.com• jQueryMobile - http://jquerymobile.com• Sencha Touch - http://sencha.com• DHTMLX Touch - http://dhtmlx.com/touch/• jo - http://joapp.com• wink - http://winktoolkit.org• Cross
  232. 232.  Platform
  233. 233.  지원
  234. 234.  프레임웍들
  235. 235.  증가• GUI
  236. 236.  Designer
  237. 237.  :
  238. 238.  DHTMLX
  239. 239.  (Alpha)
  240. 240.  ,
  241. 241.  Sencha
  242. 242.  (2011
  243. 243.  Q2
  244. 244.  )
  245. 245. Javascript Application Frameworks•데스크탑
  246. 246.  수준의
  247. 247.  Web
  248. 248.  Application
  249. 249.  작성 ✓ Sproutcore
  250. 250.  :
  251. 251.  Cocoa
  252. 252.  for
  253. 253.  Web
  254. 254.  -
  255. 255.  http://sproutcore.com ✓ Cappuccino
  256. 256.  
  257. 257.  (
  258. 258.  Objective-J
  259. 259.  )-
  260. 260.  http://cappuccino.org ✓ Qooxdoo
  261. 261.  -
  262. 262.  http://qooxdoo.org/•Javascript
  263. 263.  기반
  264. 264.  Web
  265. 265.  Framework ✓ JavascriptMVC
  266. 266.  -
  267. 267.  http://www.javascriptmvc.com/ ✓ Rails-Like
  268. 268.  Framework
  269. 269.  for
  270. 270.  Mobile
  271. 271.  App
  272. 272.  -
  273. 273.  37
  274. 274.  Signals
  275. 275.   ✓ JJ
  276. 276.  -
  277. 277.  Javascript
  278. 278.  App
  279. 279.  Framework
  280. 280. Server-side Javascript• Netscape Livewire를 시작으로 다양한 접근 http://j.mp/eNt2Ay• Node.JS : Evented Server-Side Javascript http://nodejs.org/ ✓ Google Chrome 의 Javascript Engine V8 을 단독으로 사용 ✓ 모든 Network I/O 는 NonBlocking , File I/O 는 Asynchronous ✓ Thread 방식에 비해 뛰어난 성능, 다양한 모듈 개발중 (S3,MySQL.. ) ✓ HTTPd , FTPd , IMAP, WebDAV 등 다양한 서버 모듈 개발 완료• CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/ ✓ 브라우저가 아닌 서버/데스크탑 어플을 작성하기 위한 스펙들 ✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. ) ✓ 모듈 시스템 , 파일시스템 , 유닛테스팅 , 콘솔 , Promise .. 등등
  281. 281. Javascript
  282. 282.  로
  283. 283.  컴파일
  284. 284.  되는
  285. 285.  언어들• List of Languages that compile to JS : http://j.mp/hp2pnR• CoffeeScript Kaffeine : Javascript 를 더 간결하게• Optimizer : Google Closure , UglifyJS• Ruby , Python , Lisp Scheme• j2js : Java ByteCode to JS / Script# : C# to JS
  286. 286. CoffeeScript http://coffeescript.com • Javascript 로 컴파일 되는 간단한 언어 : coffee -c hello.coffee ➠ hello.js • ; 과 { 가 없는 영어같은 문법, 들여쓰기 기반 , Inspired by Python Rubynumber = 42 number = 42 ;opposite = true opposite = true ;number = -42 if opposite if (opposite) { number = -42 ; }ignore = yes unless name is ‘xguru’ if ( name !== ‘xguru’ ) { ignore = true ; }square = (x) - x * x square = function(x) { return x * x; };math = math = { root: Math.sqrt root: Math.sqrt, square: square square: square, cube: (x) - x * square x cube: function(x) { return x * square(x); } };cubes = (Math.cube num for num in list ) cubes = (function() { var _i, _len, _results; results = []; for (_i = 0,_len = list.length,_i_len,_i++) { num=list[_i]; _results.push(Math.cube(num)); } return _results; })();
  287. 287. Responsive Web Design • http://www.alistapart.com/articles/responsive-web-design/ • Screen Size / Platform / Orientation 에 반응 • CSS3 Media Query , Flexible Grid Layout • Guideline for R-W-D : http://j.mp/eWEYIJPhone Tablet Netbook / Tablet Desktop
  288. 288. http://MediaQueri.es a collection of responsive web designs
  289. 289. Chrome
  290. 290.  Web
  291. 291.  Store
  292. 292. Mozilla
  293. 293.  Web
  294. 294.  App
  295. 295.  Store
  296. 296. GetJar
  297. 297. iPadification
  298. 298.  of
  299. 299.  the
  300. 300.  Web
  301. 301. Device APIs Camera Filesystem Acclerometer Web Browser Contacts Device Messaging Orientation Device Web App API Calendar Developer Tasks Geolocation Javascript Hybrid Gallery Device Device Status Interaction• WAC (Wholesale Application Community) • 40개 이상의 통신사/제조사 협의체 : BONDI + JIL ~= Waikiki Beta• W3C DAP ( Device API )
  302. 302. WAC Schedule 2011 2010 2011 07 11 02 05 09WAC 법인 WAC API Beta WAC Demo WAC 2.0 WAC 3.0 @MWC Enabled Device Network APIs 12 05 K-WAC K-WAC 재단설립 Enabled Device • WAC Enabled Device 의 증가 ✓ Galaxy S 2 , Bada 2 .. • Device 기능을 활용한 Web App 들 증가
  303. 303. Native Vs. Web Vs.Hybrid
  304. 304. Native App •뛰어난
  305. 305.  성능
  306. 306.  /
  307. 307.  게임 •훌륭한
  308. 308.  UX •디바이스
  309. 309.  모든
  310. 310.  기능
  311. 311.  활용 •수익모델
  312. 312.  (
  313. 313.  판매/광고
  314. 314.  ) •개발이
  315. 315.  어렵다
  316. 316.  /
  317. 317.  비싸다
  318. 318.   •크로스
  319. 319.  플랫폼?
  320. 320. Web App •HTML5
  321. 321.  ,
  322. 322.  CSS
  323. 323.  ,
  324. 324.  JS
  325. 325.   •서버기반
  326. 326.  
  327. 327.  Offline •Multi
  328. 328.  Device •속도?
  329. 329.   •디바이스
  330. 330.  기능
  331. 331.  활용? •판매?
  332. 332. Hybrid App • Native + Web Device OS Native App /Hybrid framework Web Browser Web Server • Multi Device • 서버기반 개발가능Web Application Web css/js/html Application • Device 기능 활용 • 수익모델 • Web 부분의 속도 • 표준화?
  333. 333. Hybrid App 의 범위 Native Hybrid WebNative 내에서 WebView 활용 서버 접속해서 웹앱 실행 Hybrid Frameworks Appspresso / Phonegap Titanium
  334. 334. Hybrid 개발 방법• Native + WebView : Native 로 개발하고 특정 부분만 WebView 를 이용 ★ iPhone ✓ Javascript 에서 Objective-C 호출 : Custom URL Scheme ( gap:// ) ✓ WebView 에 Javascript Injectin : stringByEvaluatingJavascriptFromString() ✓ 모든 Click 을 Hooking : shouldStartLoadWithRequest() ★ Android ✓ WebView 에 자바코드 연결 인터페이스 삽입 : addJavascriptInterface•★ Appspresso / Phonegap Web App 을 Native App 으로 패키징 ★ Device 기능을 Framework 에서 Javascript 로 확장•★ Titanium ( Appcelerator ) Web 기술로 작성후 Native App 으로 변환 ★ Device 기능을 자체적으로 제공 ( 외관상은 Javascript 형태 )
  335. 335. Hybrid Web App Device OS• Native App + Web App Hybrid framework Web Browser 하나의 웹소스로 모든 디바이스 동시지원 Web Application Web 으로는 불가능한 Device 기능 지원 css/js/html 앱 스토어를 통한 앱 판매 가능• Hybrid Frameworks Phonegap Appspresso Titanium Mobile
  336. 336. Appspresso• Mobile App Builder by Hybrid Web App 개발 플랫폼 : iOS , Android .. Device API : WAC API ( Waikiki ) 지원 Powered By 원 클릭으로 iOS Android 앱 빌드 Native Plugin 추가 가능 : Plugin Development Kit• HTML5 Web App Touch UI : Sencha , jQueryMobile , JoApp 연동 JJ - 내장 Javascript MVC Framework ( Ruby On Rails 와 유사 )
  337. 337. Write OnceAppspresso Sell Anywhere Sencha jQueryMobile Jo
  338. 338.  App Sencha Sencha
  339. 339.  Touch
  340. 340.  프레임워크를
  341. 341.  UI
  342. 342.  로
  343. 343.  사용하는
  344. 344.  템플릿
  345. 345.  프로젝트를
  346. 346.  생성합니다. http://sencha.com Win/Mac 에서 개발가능 Touch UI Framework 지원 Android / iOS App 으로 Build
  347. 347. Web Tech 2011• HTML5 관련 기술의 사용이 증대• Device 가 더욱 세분화 ➠ Web App 의 필요성 증가• Javascript 관련 기술이 Hot !• Responsive Web Design• 다양한 Web App Store 의 등장 및 성장• Device API 적용 디바이스의 출현• Hybrid 방식 개발 수요 증가• Hybrid Web App 개발툴의 성장
  348. 348. 고맙습니다!e-mail
  349. 349.  :
  350. 350.  guru
  351. 351.  @
  352. 352.  xguru.net
  353. 353.  twitter:
  354. 354.  @xguru 권정혁
  355. 355.  /
  356. 356.  구루
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×