하이브리드앱 개발 전략과 이슈

14,772 views

Published on

Published in: Technology
3 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
14,772
On SlideShare
0
From Embeds
0
Number of Embeds
271
Actions
Shares
0
Downloads
238
Comments
3
Likes
22
Embeds 0
No embeds

No notes for slide

하이브리드앱 개발 전략과 이슈

  1. 1. 하이브리드앱개발
  2. 2.  전략과
  3. 3.  이슈KT
  4. 4.  Hitel
  5. 5.  Corp.
  6. 6.  /
  7. 7.  장동수
  8. 8.  /
  9. 9.  @iolothebard 1
  10. 10. 하이브리드앱을
  11. 11.  준비하는개발자들을
  12. 12.  위한
  13. 13.  안내서 2
  14. 14. 개발자의
  15. 15.  눈으로
  16. 16.  본
  17. 17.  하이브리드앱 네이티브 하이브리드 웹 UI
  18. 18.  툴킷 웹
  19. 19.  UI
  20. 20.  툴킷 자바스크립트
  21. 21.  프레임웍/라이브러리 웹
  22. 22.  표준
  23. 23.  기술 프레임웍 HTML5 CSS 자바스크립트네이티브
  24. 24.  라이브러리 비표준
  25. 25.  Device
  26. 26.  APIs 표준
  27. 27.  Device
  28. 28.  APIs 개발
  29. 29.  도구 웹브라우져
  30. 30.  “엔진” 웹브라우져
  31. 31.  “앱” 플랫폼
  32. 32.  SDK 안드로이드
  33. 33.   iOS
  34. 34.  SDK 윈폰7
  35. 35.  SDK …⋯ SDK 3
  36. 36. 우리는
  37. 37.  왜
  38. 38.  하이브리드앱을
  39. 39.  주목하는가? Open
  40. 40.  Standard?! Cross
  41. 41.  Platform?!Low
  42. 42.  Cost
  43. 43.  
  44. 44.  High
  45. 45.  Quality?! and
  46. 46.  Make
  47. 47.  Money!! 4
  48. 48. AppStore HTML CSS JS ... 웹앱웹
  49. 49.  브라우져 5
  50. 50. AppStore HTML CSS JS ... 웹앱 웹브라우저
  51. 51.  엔진“Boilerplate”
  52. 52.  네이티브
  53. 53.  앱 6
  54. 54. Device
  55. 55.  APIs 표준
  56. 56.   HTML CSS Device
  57. 57.   APIs JS ... 웹앱 확장
  58. 58.   Device
  59. 59.  웹브라우저
  60. 60.  엔진 APIs 웹
  61. 61.  런타임 7
  62. 62. W3C
  63. 63.  Device
  64. 64.  APIs(aka.
  65. 65.  DAP)· 배터리
  66. 66.  상태
  67. 67.  API · http://www.w3.org/TR/battery-status/· HTML
  68. 68.  미디어
  69. 69.  캡쳐(카메라,
  70. 70.  마이크...) · http://www.w3.org/TR/html-media-capture/· 파일
  71. 71.  API · http://www.w3.org/TR/FileAPI/· 주소록
  72. 72.  API · http://www.w3.org/TR/contacts-api/· 캘린더
  73. 73.  API · http://www.w3.org/TR/calendar-api/· 메시징
  74. 74.  API(SMS,
  75. 75.  MMS,
  76. 76.  Emails) · http://www.w3.org/TR/messaging-api/· 네트웍
  77. 77.  정보
  78. 78.  API · http://www.w3.org/TR/netinfo-api/· 위치
  79. 79.  정보
  80. 80.  API · http://www.w3.org/TR/geolocation-API/· ... 8
  81. 81. WAC
  82. 82.  Apps
  83. 83.  APIs(aka.
  84. 84.  Wakiki
  85. 85.  APIs)· 가속도
  86. 86.  센서
  87. 87.  API · deviceapis.accelerometer· 자이로
  88. 88.  센서
  89. 89.  API · deviceapis.orientation· 단말
  90. 90.  상태
  91. 91.  API · deviceapis.devicestatus· 로컬
  92. 92.  파일
  93. 93.  입출력
  94. 94.  API · deviceapis.filesystem· 카메라
  95. 95.  API · deviceapis.camera· 메시지
  96. 96.  송수신
  97. 97.  API(SMS,
  98. 98.  MMS,
  99. 99.  메일)
  100. 100.   · deviceapis.messaging· PIM
  101. 101.  API(주소록,
  102. 102.  일정,
  103. 103.  할일) · deviceapis.pim· 기타
  104. 104.  단말
  105. 105.  제어
  106. 106.  API(진동,
  107. 107.  벨,
  108. 108.  배경화면...) · deviceapis.deviceinteraction· ... 9
  109. 109. 개발자들이
  110. 110.  꿈꾸는
  111. 111.  하이브리드
  112. 112.  앱Application
  113. 113.  Quality BEST 네이티브 하이브리드 웹 WORST Development
  114. 114.  Cost 10
  115. 115. 하이브리드앱에
  116. 116.  대처하는 개발자들의
  117. 117.  자세 11
  118. 118. Hello,
  119. 119.  WebApp!
  120. 120.  안드로이드편동영상:
  121. 121.  http://www.youtube.com/watch?v=uVqp1zcMfbE 소스코드:
  122. 122.  https://github.com/iolo/hellowebapp-android 12
  123. 123. Hello,
  124. 124.  WebApp!
  125. 125.  iOS편동영상:
  126. 126.  http://www.youtube.com/watch?v=L28lGkoSQ2c 소스코드:
  127. 127.  https://github.com/iolo/hellowebapp-ios 13
  128. 128. 네이티브
  129. 129.  지향
  130. 130.  하이브리드앱 사실상
  131. 131.  네이티브, 웹은
  132. 132.  거들
  133. 133.  뿐...· 제한적이고
  134. 134.  직관적인
  135. 135.  네이티브와
  136. 136.  웹의
  137. 137.  결합· 웹브라우져
  138. 138.  as-a
  139. 139.  UI
  140. 140.  컴포넌트· 도움말,
  141. 141.  앱/개발사
  142. 142.  소개,
  143. 143.  공지사항/새소식... 웹은 거들
  144. 144.  뿐...· 웹
  145. 145.  기반
  146. 146.  사용자
  147. 147.  인증(OAuth)... 14
  148. 148. 웹브라우져
  149. 149.  as-a
  150. 150.  UI
  151. 151.  컴포넌트 15
  152. 152.
  153. 153.  기반
  154. 154.  사용자
  155. 155.  인증 16
  156. 156. “한
  157. 157.  지붕
  158. 158.  두
  159. 159.  가족”
  160. 160.  하이브리드앱웹은
  161. 161.  아니지만
  162. 162.  네이티브도
  163. 163.  아닌, 그러나
  164. 164.  웹스러운... · 광범위하고
  165. 165.  일관성없는
  166. 166.  네이티브와
  167. 167.  웹의
  168. 168.  결합 · 웹브라우져를
  169. 169.  내장한
  170. 170.  네이티브
  171. 171.  클라이언트 · 기존
  172. 172.  웹
  173. 173.  서버
  174. 174.  “조금
  175. 175.  손
  176. 176.  봐서...”
  177. 177.  재활용 손
  178. 178.  봐주마! · 기존
  179. 179.  웹
  180. 180.  컨텐츠
  181. 181.  “조금
  182. 182.  손
  183. 183.  봐서...”
  184. 184.  재활용 17
  185. 185. 여기도
  186. 186.  하이브리드~ 18
  187. 187. 저기도
  188. 188.  하이브리드~ 19
  189. 189.
  190. 190.  지향
  191. 191.  하이브리드앱 사실상
  192. 192.  웹, 네이티브는
  193. 193.  거들
  194. 194.  뿐...· 광범위하지만
  195. 195.  일관성있는
  196. 196.  네이티브와
  197. 197.  웹의
  198. 198.  결합
  199. 199.  · 클라이언트
  200. 200.  사이드
  201. 201.  “웹앱”· 기존
  202. 202.  웹
  203. 203.  서버
  204. 204.  +
  205. 205.  RESTful
  206. 206.  API
  207. 207.  서버 네이티브는 거들
  208. 208.  뿐...· 기본적인
  209. 209.  웹
  210. 210.  컨텐츠는
  211. 211.  앱에
  212. 212.  포함 20
  213. 213. 이것도
  214. 214.  하이브리드! 21
  215. 215. 네이티브와
  216. 216.  웹의
  217. 217.  결합 WebViewWebViewClient
  218. 218.  
  219. 219.  WebChromeClient loadUrl addJavascriptInterface UIWebView UIWebViewDelegate loadRequest stringByEvaluatingJavascriptFromString 22
  220. 220. 예제
  221. 221.  코드(안드로이드)웹서버 컨텐츠 불러오기public class NoticeActivity extends Activity { ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); WebView webView = (WebView)findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); webView.setWebChromeClient(new WebChromeClient()); ... webView.loadUrl(http://m.pudding.kr/pud/mNotice.kth); ... } ...} 앱에 포함된 정적 컨텐츠 불러오기 public class HelpActivity extends Activity { ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); WebView webView = (WebView)findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); webView.setWebChromeClient(new WebChromeClient()); ... webView.loadUrl(file:///android_asset/www/help.html); ... } ... } 23
  222. 222. 예제
  223. 223.  코드(iOS)웹 서버 컨텐츠 불러오기@interface NoticeViewController : UIViewController { IBOutlet UIWebView *webView;...@end@implementation HelpViewController...- (void)viewDidLoad { ... NSURL *url = [NSURL URLWithString:@http://m.pudding.kr/pud/mNotice.kth]; NSURLRequest *requestObj = [NSURLRequest requestWithURL:url]; [webView loadRequest:requestObj]; ...} 앱에 포함된 정적 컨텐츠 불러오기... @interface HelpViewController : UIViewController {@end IBOutlet UIWebView *webView; ... @end @implementation HelpViewController ... - (void)viewDidLoad { ... NSString *bundlePath = [[NSBundle mainBundle] bundlePath]; NSString *path = [bundlePath stringByAppendingPathComponent:@/www/help.html]; NSURL *url = [NSURL fileURLWithPath:path]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; [webView loadRequest:request]; ... } ... @end 24
  224. 224. 예제
  225. 225.  코드(안드로이드)링크 클릭 가로채기...WebView webView = (WebView)findViewById(R.id.webView);webView.getSettings().setJavaScriptEnabled(true);webView.setWebChromeClient(new WebChromeClient());webView.setWebViewClient(new WebViewClient() { public boolean shouldOverrideUrlLoading(WebView webView, String url) { if(!url.startsWith(http://m.pudding.kr/pud/”) { new AndroidDialog.Builder(NoticeActivity.this) .setMessage(“딴데로 갈라구?? -_-+”) .setPositiveButton(아니... 여기 있을께 ㅠㅠ”, new DialogInterface.OnClickListener() { dialog.dismiss(); }) .setNegativeButton(갈꼬얌!, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int witch) { dialog.dismiss(); Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); NoticeActivity.this.startActivity(intent); } }).show(); return false; } else if ... ...이러쿵 저러쿵... } else if ... ...어쩌구 저쩌구... } else if ... ...구시렁 구시렁... } view.loadUrl(url); return true; }});webView.loadUrl(http://m.pudding.kr/pud/mNotice.kth);... 25
  226. 226. 예제
  227. 227.  코드(iOS)링크 클릭 가로채기@interface NoticeViewController : UIViewControllerUIWebViewDelegate, UIAlertViewDelegate { IBOutlet UIWebView *webView; NSString *externalUrl;...@implementation HelpViewController...- (void)viewDidLoad { NSURL *requestUrl = [NSURL URLWithString:@http://m.pudding.kr/pud/mNotice.kth]; [webView loadRequest:[NSURLRequest requestWithURL:requestUrl]]; [webView setDelegate:self]}- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *url = [[request URL] absoluteString]; if(![url hasPrefix:@http://m.pudding.kr/pud/mNotice.kth]) { self.externalUrl = url; UIAlertView *alertView = [UIAlertView alloc] initWithTitle:nil message:@딴데로 갈라구?? -_-+ delegate:self cancelButtonTitle:@아니... 여기 있을께 ㅠㅠ otherButtonTitles:@갈꼬얌!, nil]; [alertView show]; [alertView release]; return NO; } else if ... ...구시렁 구시렁... } return YES;}- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex { if(buttonIndex == YES self.externalUrl) { [[UIApplication sharedApplication] openURL:[NSURL URLWithString:self.externalUrl]; }}... 26
  228. 228. 예제
  229. 229.  코드(안드로이드)URL을 이용한 네이티브와 웹의 통신::자바스크립트function getFieldValue(fieldId) { var fieldValue = document.getElementById(fieldId).value; location.href = ‘custom://getFieldValue?fieldId=’ + fieldId + ‘fieldValue=’ + fieldValue;}function setFieldValue(fieldId, fieldValue) { document.getElementById(fieldId).value = fieldValue;}URL을 이용한 네이티브와 웹의 통신webView.loadUrl(“javascript:getFieldValue(‘userName’)”); // 결과는 나중에... 비동기!! -_-;...webView.loadUrl(“javascript:setFieldValue(‘userName’, ‘“ + userName + “‘“);...webView.setWebViewClient(new WebViewClient() { public boolean shouldOverrideUrlLoading(WebView webView, String url) { if(!url.startsWith(custom://getFieldValue”) { Uri uri = Uri.parse(url); String fieldId = uri.getQueryParameter(“fieldId”); String fieldValue = uri.getQueryParameter(“fieldValue”); if(fieldId.equals(“userName”)) { userName = fieldValue; // 결과가 도착했다! 이제 어떡하지? 비동기!! OTL } else if ... } else if ... // 나는 엘시프가 씨러요! ㅠㅠ } return false; } else if ... } else if ... // 나는 엘시프가 씨러요! ㅠㅠ } view.loadUrl(url); return true; }});... 27
  230. 230. 예제
  231. 231.  코드(iOS)URL을 이용한 네이티브와 웹의 통신NSString *script = [NSString stringWithFormat:@“getFieldValue(‘%@’)”, fieldId];[webView stringByEvaluatingJavaScriptString:script];...NSString *script = [NSString stringWithFormat:@“setFieldValue(‘%@’, ‘%@‘)“, fieldId, fieldValue];[webView stringByEvaluatingJavaScriptString:script];...- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *url = [[request URL] absoluteString]; if(![url hasPrefix:@custom://getFieldName]) { NSDictionary *params = [HttUtils decodeQueryString:[[request URL] query]]; NSString *fieldId = [params objectForKey:@”fieldId”]; NSString *fieldValue = [params objectForKey:@”fieldValue”]; if(fieldId isEqualToString:@”userName”) { self.userName = fieldValue; } else if ... } else if ... } else if ... // 나는 엘시프가 씨러요! ㅠㅠ } [paramArray release]; return NO; } else if ... } else if ... } else if ... // 나는 엘시프가 씨러요! ㅠㅠ } return YES;}... 28
  232. 232. 네이티브와
  233. 233.  웹의
  234. 234.  결합 자바스크립트 캐시 그래봤자, 문자열~ URL 쿠키어차피,꼼수 그리고... HTTP! 그림 출처: http://petticoatsandpistols.com/2010/05/12/ 29
  235. 235. 저비용
  236. 236.  고품질?!하이브리드앱
  237. 237.  개발
  238. 238.  전략 30
  239. 239. 저비용
  240. 240.  고품질
  241. 241.  하이브리드앱
  242. 242.  개발
  243. 243.  전략 저비용
  244. 244.  고품질! 그런
  245. 245.  게
  246. 246.  있어요?!
  247. 247.  @..@
  248. 248.  저도
  249. 249.  좀
  250. 250.  알려주세요! 그럼?
  251. 251.  어떻게
  252. 252.  해요?고비용
  253. 253.  고품질
  254. 254.  but
  255. 255.  멀티플랫폼
  256. 256.  =~
  257. 257.  저비용
  258. 258.  고품질저비용
  259. 259.  저품질
  260. 260.  but
  261. 261.  높은생산성
  262. 262.  =~
  263. 263.  저비용
  264. 264.  저품질 무엇을
  265. 265.  원하느냐에
  266. 266.  따라
  267. 267.  다른
  268. 268.  전략! 적절한
  269. 269.  하이브리드앱
  270. 270.  프레임웍
  271. 271.  선택 적절한
  272. 272.  자바스크립트
  273. 273.  프레임웍
  274. 274.  선택 그리고,
  275. 275.  적절한
  276. 276.  아키텍쳐
  277. 277.  설계와
  278. 278.  개발... 31
  279. 279. 하이브리드앱
  280. 280.  프레임웍 32
  281. 281. PhoneGap· 홈페이지 · http://phonegap.com/· 특징 · 단말별
  282. 282.  Custom
  283. 283.  Device
  284. 284.  APIs,
  285. 285.  단말별
  286. 286.  네이티브
  287. 287.  모듈과
  288. 288.  연동 · 최근
  289. 289.  개발자
  290. 290.  커뮤니티의
  291. 291.  많은
  292. 292.  지지를
  293. 293.  받고
  294. 294.  있는
  295. 295.  프레임웍· 지원
  296. 296.  단말 · iPhone,
  297. 297.  Android,
  298. 298.  Blackberry · WM(unofficial),
  299. 299.  Symbian/WRT(unofficial),
  300. 300.  Palm/WebOS(unofficial),
  301. 301.  Maemo(unofficial)· 라이센스 · OSS(BSD/MIT/APL),
  302. 302.  클라우드
  303. 303.  빌드
  304. 304.  유료,
  305. 305.  기술
  306. 306.  지원
  307. 307.  유료 · 최근
  308. 308.  Adobe에서
  309. 309.  인수하고
  310. 310.  Apache
  311. 311.  Cordova로
  312. 312.  부분
  313. 313.  오픈소스화· 장점 · 폭넓은
  314. 314.  플랫폼
  315. 315.  지원 · 풍부한
  316. 316.  기술
  317. 317.  자료
  318. 318.  /
  319. 319.  활성화된
  320. 320.  개발자
  321. 321.  커뮤니티· 단점 · 단말별
  322. 322.  네이티브
  323. 323.  SDK를
  324. 324.  이용한
  325. 325.  빌드/배포 33
  326. 326. Titanium· 홈페이지 · http://www.appcelerator.com/· 특징 · 초기(2008)에는
  327. 327.  오픈소스
  328. 328.  AIR
  329. 329.  클론으로
  330. 330.  데스크탑용으로
  331. 331.  시작,
  332. 332.  모바일로
  333. 333.  확대 · Adobe
  334. 334.  AIR와
  335. 335.  유사한
  336. 336.  RIA
  337. 337.  스타일
  338. 338.  프레임웍· 지원
  339. 339.  단말 · Android,
  340. 340.  iPhone · iPad(BETA),
  341. 341.  Blackberry(BETA),
  342. 342.  WM(unofficial) · 데스크탑(Windows/Mac/Linux)· 라이센스 · OSS(APL2),
  343. 343.  SDK
  344. 344.  무료,
  345. 345.  일부
  346. 346.  Device
  347. 347.  APIs
  348. 348.  유료,
  349. 349.  기술
  350. 350.  지원
  351. 351.  유료· 장점 · 최고
  352. 352.  수준의
  353. 353.  개발
  354. 354.  환경(Aptana) · 데스크탑
  355. 355.  플랫폼
  356. 356.  지원· 단점 · 프레임웍
  357. 357.  종속적인
  358. 358.  기술 34
  359. 359. Appspresso· 홈페이지 · http://www.appspresso.com/· 특징 · 국내에서
  360. 360.  개발된
  361. 361.  하이브리드앱
  362. 362.  프레임웍 · 이클립스
  363. 363.  기반의
  364. 364.  통합
  365. 365.  개발
  366. 366.  환경
  367. 367.  제공· 지원
  368. 368.  단말 · Android,
  369. 369.  iPhone· 라이센스 · 자체
  370. 370.  라이센스(무료이지만
  371. 371.  오픈소스는
  372. 372.  아님)· 장점 · 한국
  373. 373.  사용자
  374. 374.  커뮤니티/교육 · 이클립스
  375. 375.  기반의
  376. 376.  통합
  377. 377.  개발
  378. 378.  환경 · WAC
  379. 379.  2.0
  380. 380.  호환
  381. 381.  Device
  382. 382.  APIs· 단점 · 제한적인
  383. 383.  플랫폼
  384. 384.  지원 · 라이센스
  385. 385.  정책 35
  386. 386. (내맘대로)
  387. 387.  하이브리드앱
  388. 388.  프레임웍
  389. 389.  비교 구분 PhoneGap Titanium Appspresso 라이센스 OSS/부분유료 OSS/부분유료 Not-OSS/무료 지원
  390. 390.  플랫폼 ★
  391. 391.  ★
  392. 392.  ★
  393. 393.  ★
  394. 394.  ★ ★
  395. 395.  ★
  396. 396.  ★ ★
  397. 397.  ★ 개발도구(IDE) ★
  398. 398.  ★ ★★★★★
  399. 399.  (Aptana) ★★★
  400. 400.  (Eclipse) 문서/예제 ★
  401. 401.  ★
  402. 402.  /
  403. 403.  ★
  404. 404.  ★
  405. 405.  ★
  406. 406.  ★ ★
  407. 407.  ★
  408. 408.  ★
  409. 409.  ★
  410. 410.  /
  411. 411.  ★ ★
  412. 412.  ★
  413. 413.  ★
  414. 414.  /
  415. 415.  ★ (공식/비공식) 성능 ★ ★
  416. 416.  ★
  417. 417.  ★
  418. 418.  (컴파일) ★내장
  419. 419.  Device
  420. 420.  APIs ★
  421. 421.  ★
  422. 422.  ★ ★
  423. 423.  ★
  424. 424.  ★
  425. 425.  ★
  426. 426.  (부분유료) ★
  427. 427.  ★
  428. 428.  ★
  429. 429.  ★
  430. 430.  (WAC)확장
  431. 431.  Device
  432. 432.  APIs ★
  433. 433.  ★
  434. 434.  ★
  435. 435.  ★
  436. 436.  ★ ★ ★
  437. 437.  ★
  438. 438.  ★ (플러그인) 개발자
  439. 439.  커뮤니티 ★
  440. 440.  ★
  441. 441.  ★
  442. 442.  ★
  443. 443.  ★ ★
  444. 444.  ★
  445. 445.   ★
  446. 446.   36
  447. 447. 기타
  448. 448.  하이브리드앱
  449. 449.  
  450. 450.  프레임웍·AppMobi · http://www.appmobi.com/·RhoMobile · http://www.rhomobile.com/·QuickConnect · http://www.quickconnectfamily.org/·WorkLight(IBM) · http://www.worklight.com/·HyWAI(ETRI) · http://www.w3c.or.kr/hywai/·and
  451. 451.  so
  452. 452.  on... 37
  453. 453. 자바스크립트
  454. 454.  프레임웍 38
  455. 455. 기타
  456. 456.  자바스크립트
  457. 457.  프레임웍/라이브러리 39
  458. 458. jQueryMobile· http://jquerymobile.com/· jQuery
  459. 459.  기반· 주요
  460. 460.  모바일
  461. 461.  플랫폼
  462. 462.  호환· 경량(12k,
  463. 463.  이미지
  464. 464.  사용
  465. 465.  최소화)· HTML5
  466. 466.  마크업
  467. 467.  기반
  468. 468.  설정· 점진적
  469. 469.  개선
  470. 470.  (Progressive
  471. 471.   Enhancement)· 우아한
  472. 472.  퇴보(Graceful
  473. 473.  Degradation)· 겸손한
  474. 474.  자바스크립트(Unobtrusive
  475. 475.   Javascript)· 접근성(Accessibility)
  476. 476.  지원· 터치
  477. 477.  최적화
  478. 478.  이벤트
  479. 479.  
  480. 480.  플러그인· 테마
  481. 481.  제작
  482. 482.  도구(Theme
  483. 483.  Roller) 40
  484. 484. Sencha
  485. 485.  Touch· http://www.sencha.com/· Ext
  486. 486.  JS
  487. 487.  +
  488. 488.  jQTouch
  489. 489.  +
  490. 490.  Raphael· 풍부한
  491. 491.  UI
  492. 492.  컴포넌트· 향상된
  493. 493.  터치
  494. 494.  이벤트· iOS,
  495. 495.  안드로이드,
  496. 496.  블랙베리6
  497. 497.  등의
  498. 498.  주요
  499. 499.  모바일
  500. 500.  플랫폼
  501. 501.  지원· MVC
  502. 502.  프레임웍
  503. 503.  
  504. 504.  데이터
  505. 505.  API 41
  506. 506. JQTouch· http://jqtouch.com· 가볍고
  507. 507.  빠른
  508. 508.  기본
  509. 509.  프레임웍· 확장
  510. 510.  플러그인,
  511. 511.  iOS에
  512. 512.  최적화된
  513. 513.  API· 네이티브
  514. 514.  웹킷
  515. 515.  CSS3
  516. 516.  애니메이션,
  517. 517.  간단한
  518. 518.  테마
  519. 519.  지원· jQuery
  520. 520.  호환
  521. 521.  플러그인(zepto.js
  522. 522.  호환) 42
  523. 523. (내맘대로)
  524. 524.  자바스크립트
  525. 525.  프레임웍
  526. 526.  비교 jQueryMobile Sencha
  527. 527.  Touch jQTouch 라이센스 MIT GPLv3/상업용 MIT UI컴포넌트 ★★ ★★★★★ ★ 브라우져지원 ★★★ ★★★★ ★★ 난이도 ★★★/★★★ ★/★ ★★★★/★★★★ (개발/디자인) 접근성 ★★★★ ★ ★★ 성능 ★★★/★★ ★/★★★ ★★★/★★★ (로딩/실행) 문서 ★★/★★★ ★★★/★ ★/★ (공식/비공식)개발자
  528. 528.  커뮤니티 ★★★★★ ★★★ ★★ 43
  529. 529. 기타
  530. 530.  자바스크립트
  531. 531.  프레임웍/라이브러리·Dojo
  532. 532.  Mobile · http://dojotoolkit.org/features/mobile·WinkToolkit · http://www.winktoolkit.org/·Jo · http://joapp.com/·iUI · http://code.google.com/p/iui/
  533. 533.  ·DHTMLX
  534. 534.  Touch · http://dhtmlx.com/touch/·and
  535. 535.  so
  536. 536.  on... 44
  537. 537. 하이브리드앱
  538. 538.  아키텍쳐 하이브리드앱
  539. 539.  베스트프랙티스! 그런
  540. 540.  게
  541. 541.  있어요?!
  542. 542.  @..@
  543. 543.  저도
  544. 544.  좀
  545. 545.  알려주세요! 그럼?
  546. 546.  어떻게
  547. 547.  해요? 웹앱
  548. 548.  !=
  549. 549.  웹사이트 웹앱
  550. 550.  =~
  551. 551.  웹
  552. 552.  요소
  553. 553.  기술
  554. 554.  +
  555. 555.  GUI
  556. 556.  애플리케이션
  557. 557.  아키텍쳐 하이브리드앱
  558. 558.  =~
  559. 559.  패키징(웹앱
  560. 560.  +
  561. 561.  Device
  562. 562.  APIs) Device
  563. 563.  APIs
  564. 564.  !=
  565. 565.  Active-X Device
  566. 566.  APIs는
  567. 567.  꼭
  568. 568.  필요할
  569. 569.  때만~
  570. 570.  No
  571. 571.  More
  572. 572.  Active-X그리고,
  573. 573.  Single
  574. 574.  Page
  575. 575.  Interface
  576. 576.  +
  577. 577.  RESTful
  578. 578.  API
  579. 579.  Server... 45
  580. 580. 네이티브앱
  581. 581.  vs
  582. 582.  웹앱
  583. 583.  vs
  584. 584.  하이브리드앱 네이티브앱 네이티브앱 구분 웹앱 하이브리드앱 (안드로이드) (iOS) JavaScript* Java Objective-C Language CoffeeScript C/C++ C/C++ Objective-J 파일 파일 HTTP,
  585. 585.  
  586. 586.  AJAX,
  587. 587.  웹소켓,
  588. 588.  캐시 I/O 네트웍 네트웍 웹스토리지,
  589. 589.  웹SQL,
  590. 590.  IndexedDB iCloud android.* *.framework DOM,
  591. 591.  AJAX,
  592. 592.  HTML5
  593. 593.  JS
  594. 594.  API,
  595. 595.  ...런타임
  596. 596.  라이브러 java.* lib*.dylib +
  597. 597.  표준
  598. 598.  Device
  599. 599.  APIs 리(API) dalvik.* lib*.a +
  600. 600.  확장
  601. 601.  Device
  602. 602.  APIs android.view.* GUI Cocoa
  603. 603.  Touch HTML,CSS,Canvas,SVG,... ... OS Linux iOS 웹브라우져 웹런타임 46
  604. 604. 웹사이트 웹서버가
  605. 605.  다
  606. 606.  한다. 웹브라우저는
  607. 607.  거들
  608. 608.  뿐...· “상태”
  609. 609.  변화
  610. 610.  ==
  611. 611.  페이지
  612. 612.  이동· 매번
  613. 613.  “상태”를
  614. 614.  주고
  615. 615.  받기
  616. 616.  -
  617. 617.  Cookie!· or
  618. 618.  서버가
  619. 619.  “상태”를
  620. 620.  관리
  621. 621.  -
  622. 622.  Session!· 서버-사이드
  623. 623.  MVC
  624. 624.  · Model1/2
  625. 625.  -
  626. 626.  Full-page
  627. 627.  Back
  628. 628.  
  629. 629.  Forth· Model2
  630. 630.  +
  631. 631.  AJAX
  632. 632.  -
  633. 633.  Partial
  634. 634.  Page
  635. 635.  Update 47
  636. 636. 웹앱 웹브라우저가
  637. 637.  다
  638. 638.  한다. 웹서버는
  639. 639.  거들
  640. 640.  뿐...· “상태”
  641. 641.  변화
  642. 642.  ==
  643. 643.  사용자
  644. 644.  인터랙션
  645. 645.  “이벤트”· 자바스크립트로
  646. 646.  “상태”를
  647. 647.  관리· 로컬
  648. 648.  /
  649. 649.  캐시
  650. 650.  웹
  651. 651.  리소스· 클라이언트-사이드
  652. 652.  MVC· Single
  653. 653.  Page
  654. 654.  Interface· RESTful
  655. 655.  API
  656. 656.  Server 48
  657. 657. 단일
  658. 658.  페이지
  659. 659.  인터페이스 index.html Active Pageshow/hide 49
  660. 660. 클라이언트-사이드
  661. 661.  템플릿 자바스크립트 API
  662. 662.  서버 웹
  663. 663.  서버 HTML 로컬 캐시 스토리지 캐시 앱Static
  664. 664.  HTML
  665. 665.  Fragment Placeholder Data Template + 이름 클래스 레벨 ★ ♥ ♦ 이름 클래스 레벨 iolo bard 만렙 iolo bard 만렙 foreach 장동수 개발자 쪼렙 장동수 개발자 쪼렙 ★ ♥ ♦ ... ... ... ... ... ... end 50
  666. 666. 클라이언트-사이드
  667. 667.  MVC· Single
  668. 668.  Page
  669. 669.  Interface · 웹
  670. 670.  서버도
  671. 671.  없는
  672. 672.  데...
  673. 673.  페이지
  674. 674.  이동은
  675. 675.  왜?! · (GUI)
  676. 676.  애플리케이션
  677. 677.  스타일의
  678. 678.  “상태”
  679. 679.  관리 · 빠른
  680. 680.  화면
  681. 681.  전환
  682. 682.  
  683. 683.  화면
  684. 684.  전환
  685. 685.  효과 · 체감
  686. 686.  성능
  687. 687.  UP! · 메모리
  688. 688.  사용량
  689. 689.  UP!· 클라이언트-사이드
  690. 690.  템플릿 · 웹
  691. 691.  서버
  692. 692.  개발에서
  693. 693.  널리
  694. 694.  쓰이는
  695. 695.  템플릿(velocity,
  696. 696.  smarty,
  697. 697.  ...)을
  698. 698.  웹
  699. 699.  클라이언트에
  700. 700.  적 용 · 서버
  701. 701.  부하는
  702. 702.  DOWN! · 데이터
  703. 703.  전송량도
  704. 704.  DOWN! · 캐시
  705. 705.  히트율은
  706. 706.  UP!
  707. 707.   51
  708. 708. 하이브리드앱으로
  709. 709.  가는 마지막
  710. 710.  비상구 52
  711. 711. to.
  712. 712.  
  713. 713.  개발자 [경고]
  714. 714.  This
  715. 715.  Web
  716. 716.  is
  717. 717.  NOT
  718. 718.  The
  719. 719.  Web. The
  720. 720.  Web
  721. 721.  is
  722. 722.  Dead. 크로스
  723. 723.  플랫폼?! 이
  724. 724.  자바스크립트는
  725. 725.  당신이
  726. 726.  알았던
  727. 727.   그
  728. 728.  자바스크립트가
  729. 729.  아닙니다. 적절한
  730. 730.  하이브리드앱
  731. 731.  프레임웍
  732. 732.  선택 적절한
  733. 733.  자바스크립트
  734. 734.  프레임웍
  735. 735.  선택웹
  736. 736.  요소
  737. 737.  기술
  738. 738.  +
  739. 739.  GUI
  740. 740.  애플리케이션
  741. 741.  아키텍쳐 Please,
  742. 742.  No
  743. 743.  More

×