하이브리드앱 개발 전략과 이슈
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 10,461 views

 

Statistics

Views

Total Views
10,461
Views on SlideShare
10,347
Embed Views
114

Actions

Likes
14
Downloads
112
Comments
3

3 Embeds 114

http://jaesu.tistory.com 108
http://webapplist.info 5
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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