Upload
dongsu-jang
View
24
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
하이브리드앱개발����������� ������������������ 전략과����������� ������������������ 이슈
KT����������� ������������������ Hitel����������� ������������������ Corp.����������� ������������������ /����������� ������������������ 장동수����������� ������������������ /����������� ������������������ @iolothebard
1
하이브리드앱을����������� ������������������ 준비하는개발자들을����������� ������������������ 위한����������� ������������������ 안내서
2
개발자의����������� ������������������ 눈으로����������� ������������������ 본����������� ������������������ 하이브리드앱
웹����������� ������������������ 표준����������� ������������������ 기술
플랫폼����������� ������������������ SDK
iOS����������� ������������������ SDK
하이브리드
HTML5 CSS 자바스크립트
비표준����������� ������������������ Device����������� ������������������ APIs
안드로이드����������� ������������������ SDK
윈폰7����������� ������������������ SDK …⋯
웹����������� ������������������ UI����������� ������������������ 툴킷 자바스크립트����������� ������������������ 프레임웍/라이브러리
표준����������� ������������������ Device����������� ������������������ APIs
웹네이티브
웹브라우져����������� ������������������ “앱”
프레임웍
네이티브����������� ������������������ 라이브러리
UI����������� ������������������ 툴킷
개발����������� ������������������ 도구 웹브라우져����������� ������������������ “엔진”
3
우리는����������� ������������������ 왜����������� ������������������ 하이브리드앱을����������� ������������������ 주목하는가?
Open����������� ������������������ Standard?!
Cross����������� ������������������ Platform?!
Low����������� ������������������ Cost����������� ������������������ &����������� ������������������ High����������� ������������������ Quality?!
and����������� ������������������ Make����������� ������������������ Money!!
4
웹����������� ������������������ 브라우져
AppStore
웹앱
HTML CSS
JS ...
5
“Boilerplate”����������� ������������������ 네이티브����������� ������������������ 앱
웹브라우저����������� ������������������ 엔진
AppStore
웹앱
HTML CSS
JS ...
6
웹����������� ������������������ 런타임
Device����������� ������������������ APIs
표준����������� ������������������ Device����������� ������������������ APIs
확장����������� ������������������ Device����������� ������������������ APIs웹브라우저����������� ������������������ 엔진
웹앱
HTML CSS
JS ...
7
W3C����������� ������������������ Device����������� ������������������ APIs(aka.����������� ������������������ DAP)
· 배터리����������� ������������������ 상태����������� ������������������ API
· http://www.w3.org/TR/battery-status/
· HTML����������� ������������������ 미디어����������� ������������������ 캡쳐(카메라,����������� ������������������ 마이크...)
· http://www.w3.org/TR/html-media-capture/
· 파일����������� ������������������ API
· http://www.w3.org/TR/FileAPI/
· 주소록����������� ������������������ API
· http://www.w3.org/TR/contacts-api/
· 캘린더����������� ������������������ API
· http://www.w3.org/TR/calendar-api/
· 메시징����������� ������������������ API(SMS,����������� ������������������ MMS,����������� ������������������ Emails)
· http://www.w3.org/TR/messaging-api/
· 네트웍����������� ������������������ 정보����������� ������������������ API
· http://www.w3.org/TR/netinfo-api/
· 위치����������� ������������������ 정보����������� ������������������ API
· http://www.w3.org/TR/geolocation-API/
· ...
8
· 가속도����������� ������������������ 센서����������� ������������������ API
· deviceapis.accelerometer
· 자이로����������� ������������������ 센서����������� ������������������ API
· deviceapis.orientation
· 단말����������� ������������������ 상태����������� ������������������ API
· deviceapis.devicestatus
· 로컬����������� ������������������ 파일����������� ������������������ 입출력����������� ������������������ API
· deviceapis.filesystem
· 카메라����������� ������������������ API
· deviceapis.camera
· 메시지����������� ������������������ 송수신����������� ������������������ API(SMS,����������� ������������������ MMS,����������� ������������������ 메일)����������� ������������������
· deviceapis.messaging
· PIM����������� ������������������ API(주소록,����������� ������������������ 일정,����������� ������������������ 할일)
· deviceapis.pim
· 기타����������� ������������������ 단말����������� ������������������ 제어����������� ������������������ API(진동,����������� ������������������ 벨,����������� ������������������ 배경화면...)
· deviceapis.deviceinteraction
· ...
WAC����������� ������������������ Apps����������� ������������������ APIs(aka.����������� ������������������ Wakiki����������� ������������������ APIs)
9
개발자들이����������� ������������������ 꿈꾸는����������� ������������������ 하이브리드����������� ������������������ 앱
Development����������� ������������������ Cost
Applica
tion����������� ������������������ Quality
네이티브
웹
BEST
WORST
하이브리드
10
하이브리드앱에����������� ������������������ 대처하는개발자들의����������� ������������������ 자세
11
Hello,����������� ������������������ WebApp!����������� ������������������ 안드로이드편
동영상:����������� ������������������ http://www.youtube.com/watch?v=uVqp1zcMfbE소스코드:����������� ������������������ https://github.com/iolo/hellowebapp-android
12
Hello,����������� ������������������ WebApp!����������� ������������������ iOS편
동영상:����������� ������������������ http://www.youtube.com/watch?v=L28lGkoSQ2c소스코드:����������� ������������������ https://github.com/iolo/hellowebapp-ios
13
네이티브����������� ������������������ 지향����������� ������������������ 하이브리드앱
사실상����������� ������������������ 네이티브,
웹은����������� ������������������ 거들����������� ������������������ 뿐...
·제한적이고����������� ������������������ 직관적인����������� ������������������ 네이티브와����������� ������������������ 웹의����������� ������������������ 결합·웹브라우져����������� ������������������ as-a����������� ������������������ UI����������� ������������������ 컴포넌트·도움말,����������� ������������������ 앱/개발사����������� ������������������ 소개,����������� ������������������ 공지사항/새소식...·웹����������� ������������������ 기반����������� ������������������ 사용자����������� ������������������ 인증(OAuth)...
웹은거들����������� ������������������ 뿐...
14
웹브라우져����������� ������������������ as-a����������� ������������������ UI����������� ������������������ 컴포넌트
15
웹����������� ������������������ 기반����������� ������������������ 사용자����������� ������������������ 인증
16
웹은����������� ������������������ 아니지만����������� ������������������ 네이티브도����������� ������������������ 아닌,
그러나����������� ������������������ 웹스러운...
·광범위하고����������� ������������������ 일관성없는����������� ������������������ 네이티브와����������� ������������������ 웹의����������� ������������������ 결합·웹브라우져를����������� ������������������ 내장한����������� ������������������ 네이티브����������� ������������������ 클라이언트·기존����������� ������������������ 웹����������� ������������������ 서버����������� ������������������ “조금����������� ������������������ 손����������� ������������������ 봐서...”����������� ������������������ 재활용·기존����������� ������������������ 웹����������� ������������������ 컨텐츠����������� ������������������ “조금����������� ������������������ 손����������� ������������������ 봐서...”����������� ������������������ 재활용
“한����������� ������������������ 지붕����������� ������������������ 두����������� ������������������ 가족”����������� ������������������ 하이브리드앱
손����������� ������������������ 봐주마!
17
여기도����������� ������������������ 하이브리드~
18
저기도����������� ������������������ 하이브리드~
19
웹����������� ������������������ 지향����������� ������������������ 하이브리드앱
사실상����������� ������������������ 웹,
네이티브는����������� ������������������ 거들����������� ������������������ 뿐...
·광범위하지만����������� ������������������ 일관성있는����������� ������������������ 네이티브와����������� ������������������ 웹의����������� ������������������ 결합����������� ������������������ ·클라이언트����������� ������������������ 사이드����������� ������������������ “웹앱”·기존����������� ������������������ 웹����������� ������������������ 서버����������� ������������������ +����������� ������������������ RESTful����������� ������������������ API����������� ������������������ 서버·기본적인����������� ������������������ 웹����������� ������������������ 컨텐츠는����������� ������������������ 앱에����������� ������������������ 포함
네이티브는거들����������� ������������������ 뿐...
20
이것도����������� ������������������ 하이브리드!
21
네이티브와����������� ������������������ 웹의����������� ������������������ 결합
WebView
WebViewClient����������� ������������������ &����������� ������������������ WebChromeClient
loadUrl
addJavascriptInterface
UIWebView
UIWebViewDelegate
loadRequest
stringByEvaluatingJavascriptFromString
22
예제����������� ������������������ 코드(안드로이드)
<<웹서버 컨텐츠 불러오기>>
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
예제����������� ������������������ 코드(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]; ...}...@end
<<앱에 포함된 정적 컨텐츠 불러오기>>
@interface HelpViewController : UIViewController { 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
예제����������� ������������������ 코드(안드로이드)
<<링크 클릭 가로채기>>
...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
예제����������� ������������������ 코드(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
예제����������� ������������������ 코드(안드로이드)
<<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; }});...
<<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;}
27
예제����������� ������������������ 코드(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
네이티브와����������� ������������������ 웹의����������� ������������������ 결합
그림 출처: http://petticoatsandpistols.com/2010/05/12/
URL
자바스크립트
쿠키
캐시그래봤자,문자열~
어차피,꼼수
그리고...HTTP!
29
저비용����������� ������������������ 고품질?!하이브리드앱����������� ������������������ 개발����������� ������������������ 전략
30
저비용����������� ������������������ 고품질����������� ������������������ 하이브리드앱����������� ������������������ 개발����������� ������������������ 전략
저비용����������� ������������������ 고품질!
그런����������� ������������������ 게����������� ������������������ 있어요?!����������� ������������������ @..@����������� ������������������ 저도����������� ������������������ 좀����������� ������������������ 알려주세요!
그럼?����������� ������������������ 어떻게����������� ������������������ 해요?
고비용����������� ������������������ 고품질����������� ������������������ but����������� ������������������ 멀티플랫폼����������� ������������������ =~����������� ������������������ 저비용����������� ������������������ 고품질
저비용����������� ������������������ 저품질����������� ������������������ but����������� ������������������ 높은생산성����������� ������������������ =~����������� ������������������ 저비용����������� ������������������ 저품질
무엇을����������� ������������������ 원하느냐에����������� ������������������ 따라����������� ������������������ 다른����������� ������������������ 전략!
적절한����������� ������������������ 하이브리드앱����������� ������������������ 프레임웍����������� ������������������ 선택
적절한����������� ������������������ 자바스크립트����������� ������������������ 프레임웍����������� ������������������ 선택
그리고,����������� ������������������ 적절한����������� ������������������ 아키텍쳐����������� ������������������ 설계와����������� ������������������ 개발...
31
하이브리드앱����������� ������������������ 프레임웍
32
PhoneGap
· 홈페이지
· http://phonegap.com/
· 특징
· 단말별����������� ������������������ Custom����������� ������������������ Device����������� ������������������ APIs,����������� ������������������ 단말별����������� ������������������ 네이티브����������� ������������������ 모듈과����������� ������������������ 연동
· 최근����������� ������������������ 개발자����������� ������������������ 커뮤니티의����������� ������������������ 많은����������� ������������������ 지지를����������� ������������������ 받고����������� ������������������ 있는����������� ������������������ 프레임웍
· 지원����������� ������������������ 단말
· iPhone,����������� ������������������ Android,����������� ������������������ Blackberry
· WM(unofficial),����������� ������������������ Symbian/WRT(unofficial),����������� ������������������ Palm/WebOS(unofficial),����������� ������������������ Maemo(unofficial)
· 라이센스
· OSS(BSD/MIT/APL),����������� ������������������ 클라우드����������� ������������������ 빌드����������� ������������������ 유료,����������� ������������������ 기술����������� ������������������ 지원����������� ������������������ 유료
· 최근����������� ������������������ Adobe에서����������� ������������������ 인수하고����������� ������������������ Apache����������� ������������������ Cordova로����������� ������������������ 부분����������� ������������������ 오픈소스화
· 장점
· 폭넓은����������� ������������������ 플랫폼����������� ������������������ 지원
· 풍부한����������� ������������������ 기술����������� ������������������ 자료����������� ������������������ /����������� ������������������ 활성화된����������� ������������������ 개발자����������� ������������������ 커뮤니티
· 단점
· 단말별����������� ������������������ 네이티브����������� ������������������ SDK를����������� ������������������ 이용한����������� ������������������ 빌드/배포
33
Titanium
· 홈페이지
· http://www.appcelerator.com/
· 특징
· 초기(2008)에는����������� ������������������ 오픈소스����������� ������������������ AIR����������� ������������������ 클론으로����������� ������������������ 데스크탑용으로����������� ������������������ 시작,����������� ������������������ 모바일로����������� ������������������ 확대
· Adobe����������� ������������������ AIR와����������� ������������������ 유사한����������� ������������������ RIA����������� ������������������ 스타일����������� ������������������ 프레임웍
· 지원����������� ������������������ 단말
· Android,����������� ������������������ iPhone
· iPad(BETA),����������� ������������������ Blackberry(BETA),����������� ������������������ WM(unofficial)
· 데스크탑(Windows/Mac/Linux)
· 라이센스
· OSS(APL2),����������� ������������������ SDK����������� ������������������ 무료,����������� ������������������ 일부����������� ������������������ Device����������� ������������������ APIs����������� ������������������ 유료,����������� ������������������ 기술����������� ������������������ 지원����������� ������������������ 유료
· 장점
· 최고����������� ������������������ 수준의����������� ������������������ 개발����������� ������������������ 환경(Aptana)
· 데스크탑����������� ������������������ 플랫폼����������� ������������������ 지원
· 단점
· 프레임웍����������� ������������������ 종속적인����������� ������������������ 기술
34
Appspresso
· 홈페이지
· http://www.appspresso.com/
· 특징
· 국내에서����������� ������������������ 개발된����������� ������������������ 하이브리드앱����������� ������������������ 프레임웍
· 이클립스����������� ������������������ 기반의����������� ������������������ 통합����������� ������������������ 개발����������� ������������������ 환경����������� ������������������ 제공
· 지원����������� ������������������ 단말
· Android,����������� ������������������ iPhone
· 라이센스
· 자체����������� ������������������ 라이센스(무료이지만����������� ������������������ 오픈소스는����������� ������������������ 아님)
· 장점
· 한국����������� ������������������ 사용자����������� ������������������ 커뮤니티/교육
· 이클립스����������� ������������������ 기반의����������� ������������������ 통합����������� ������������������ 개발����������� ������������������ 환경
· WAC����������� ������������������ 2.0����������� ������������������ 호환����������� ������������������ Device����������� ������������������ APIs
· 단점
· 제한적인����������� ������������������ 플랫폼����������� ������������������ 지원
· 라이센스����������� ������������������ 정책
35
(내맘대로)����������� ������������������ 하이브리드앱����������� ������������������ 프레임웍����������� ������������������ 비교
구분 PhoneGap Titanium Appspresso
라이센스 OSS/부분유료 OSS/부분유료 Not-OSS/무료
지원����������� ������������������ 플랫폼 ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★ ★����������� ������������������ ★����������� ������������������ ★ ★����������� ������������������ ★
개발도구(IDE) ★����������� ������������������ ★ ★★★★★����������� ������������������ (Aptana) ★★★����������� ������������������ (Eclipse)
문서/예제(공식/비공식)
★����������� ������������������ ★����������� ������������������ /����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ /����������� ������������������ ★ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ /����������� ������������������ ★
성능 ★ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ (컴파일) ★
내장����������� ������������������ Device����������� ������������������ APIs ★����������� ������������������ ★����������� ������������������ ★ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ (부분유료) ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ (WAC)
확장����������� ������������������ Device����������� ������������������ APIs(플러그인)
★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★ ★ ★����������� ������������������ ★����������� ������������������ ★
개발자����������� ������������������ 커뮤니티 ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������ ★ ★����������� ������������������ ★����������� ������������������ ★����������� ������������������
36
기타����������� ������������������ 하이브리드앱����������� ������������������ ����������� ������������������ 프레임웍
·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����������� ������������������ so����������� ������������������ on...37
자바스크립트����������� ������������������ 프레임웍
38
기타����������� ������������������ 자바스크립트����������� ������������������ 프레임웍/라이브러리
39
jQueryMobile
· http://jquerymobile.com/· jQuery����������� ������������������ 기반· 주요����������� ������������������ 모바일����������� ������������������ 플랫폼����������� ������������������ 호환· 경량(12k,����������� ������������������ 이미지����������� ������������������ 사용����������� ������������������ 최소화)· HTML5����������� ������������������ 마크업����������� ������������������ 기반����������� ������������������ 설정· 점진적����������� ������������������ 개선����������� ������������������ (Progressive����������� ������������������ Enhancement)
· 우아한����������� ������������������ 퇴보(Graceful����������� ������������������ Degradation)· 겸손한����������� ������������������ 자바스크립트(Unobtrusive����������� ������������������ Javascript)
· 접근성(Accessibility)����������� ������������������ 지원· 터치����������� ������������������ 최적화����������� ������������������ 이벤트����������� ������������������ &����������� ������������������ 플러그인· 테마����������� ������������������ 제작����������� ������������������ 도구(Theme����������� ������������������ Roller)
40
Sencha����������� ������������������ Touch
· http://www.sencha.com/· Ext����������� ������������������ JS����������� ������������������ +����������� ������������������ jQTouch����������� ������������������ +����������� ������������������ Raphael·풍부한����������� ������������������ UI����������� ������������������ 컴포넌트·향상된����������� ������������������ 터치����������� ������������������ 이벤트· iOS,����������� ������������������ 안드로이드,����������� ������������������ 블랙베리6����������� ������������������ 등의����������� ������������������ 주요����������� ������������������ 모바일����������� ������������������ 플랫폼����������� ������������������ 지원·MVC����������� ������������������ 프레임웍����������� ������������������ &����������� ������������������ 데이터����������� ������������������ API
41
JQTouch
· http://jqtouch.com·가볍고����������� ������������������ 빠른����������� ������������������ 기본����������� ������������������ 프레임웍·확장����������� ������������������ 플러그인,����������� ������������������ iOS에����������� ������������������ 최적화된����������� ������������������ API·네이티브����������� ������������������ 웹킷����������� ������������������ CSS3����������� ������������������ 애니메이션,����������� ������������������ 간단한����������� ������������������ 테마����������� ������������������ 지원· jQuery����������� ������������������ 호환����������� ������������������ 플러그인(zepto.js����������� ������������������ 호환)
42
(내맘대로)����������� ������������������ 자바스크립트����������� ������������������ 프레임웍����������� ������������������ 비교
jQueryMobile Sencha����������� ������������������ Touch jQTouch
라이센스 MIT GPLv3/상업용 MIT
UI컴포넌트 ★★ ★★★★★ ★
브라우져지원 ★★★ ★★★★ ★★
난이도(개발/디자인)
★★★/★★★ ★/★ ★★★★/★★★★
접근성 ★★★★ ★ ★★
성능(로딩/실행)
★★★/★★ ★/★★★ ★★★/★★★
문서(공식/비공식)
★★/★★★ ★★★/★ ★/★
개발자����������� ������������������ 커뮤니티 ★★★★★ ★★★ ★★
43
기타����������� ������������������ 자바스크립트����������� ������������������ 프레임웍/라이브러리
·Dojo����������� ������������������ Mobile· http://dojotoolkit.org/features/mobile
·WinkToolkit· http://www.winktoolkit.org/
·Jo· http://joapp.com/
·iUI· http://code.google.com/p/iui/����������� ������������������
·DHTMLX����������� ������������������ Touch· http://dhtmlx.com/touch/
·and����������� ������������������ so����������� ������������������ on...44
하이브리드앱����������� ������������������ 베스트프랙티스!
그런����������� ������������������ 게����������� ������������������ 있어요?!����������� ������������������ @..@����������� ������������������ 저도����������� ������������������ 좀����������� ������������������ 알려주세요!
그럼?����������� ������������������ 어떻게����������� ������������������ 해요?
웹앱����������� ������������������ !=����������� ������������������ 웹사이트
웹앱����������� ������������������ =~����������� ������������������ 웹����������� ������������������ 요소����������� ������������������ 기술����������� ������������������ +����������� ������������������ GUI����������� ������������������ 애플리케이션����������� ������������������ 아키텍쳐
하이브리드앱����������� ������������������ =~����������� ������������������ 패키징(웹앱����������� ������������������ +����������� ������������������ Device����������� ������������������ APIs)
Device����������� ������������������ APIs����������� ������������������ !=����������� ������������������ Active-X
Device����������� ������������������ APIs는����������� ������������������ 꼭����������� ������������������ 필요할����������� ������������������ 때만~����������� ������������������ No����������� ������������������ More����������� ������������������ Active-X
그리고,����������� ������������������ Single����������� ������������������ Page����������� ������������������ Interface����������� ������������������ +����������� ������������������ RESTful����������� ������������������ API����������� ������������������ Server...
하이브리드앱����������� ������������������ 아키텍쳐
45
네이티브앱����������� ������������������ vs����������� ������������������ 웹앱����������� ������������������ vs����������� ������������������ 하이브리드앱
구분네이티브앱(안드로이드)
네이티브앱(iOS)
웹앱 하이브리드앱
LanguageJavaC/C++
Objective-CC/C++
JavaScript*CoffeeScriptObjective-J
JavaScript*CoffeeScriptObjective-J
I/O파일네트웍
파일네트웍iCloud
HTTP,����������� ������������������ ����������� ������������������ AJAX,����������� ������������������ 웹소켓,����������� ������������������ 캐시웹스토리지,����������� ������������������ 웹SQL,����������� ������������������ IndexedDBHTTP,����������� ������������������ ����������� ������������������ AJAX,����������� ������������������ 웹소켓,����������� ������������������ 캐시
웹스토리지,����������� ������������������ 웹SQL,����������� ������������������ IndexedDB
런타임����������� ������������������ 라이브러리(API)
android.*java.*dalvik.*
*.frameworklib*.dyliblib*.a
DOM,����������� ������������������ AJAX,����������� ������������������ HTML5����������� ������������������ JS����������� ������������������ API,����������� ������������������ ...+����������� ������������������ 표준����������� ������������������ Device����������� ������������������ APIs+����������� ������������������ 확장����������� ������������������ Device����������� ������������������ APIs
DOM,����������� ������������������ AJAX,����������� ������������������ HTML5����������� ������������������ JS����������� ������������������ API,����������� ������������������ ...+����������� ������������������ 표준����������� ������������������ Device����������� ������������������ APIs+����������� ������������������ 확장����������� ������������������ Device����������� ������������������ APIs
GUIandroid.view.*
...Cocoa����������� ������������������ Touch HTML,CSS,Canvas,SVG,...HTML,CSS,Canvas,SVG,...
OS Linux iOS 웹브라우져 웹런타임
46
웹사이트
웹서버가����������� ������������������ 다����������� ������������������ 한다.
웹브라우저는����������� ������������������ 거들����������� ������������������ 뿐...
· “상태”����������� ������������������ 변화����������� ������������������ ==����������� ������������������ 페이지����������� ������������������ 이동·매번����������� ������������������ “상태”를����������� ������������������ 주고����������� ������������������ 받기����������� ������������������ -����������� ������������������ Cookie!·or����������� ������������������ 서버가����������� ������������������ “상태”를����������� ������������������ 관리����������� ������������������ -����������� ������������������ Session!·서버-사이드����������� ������������������ MVC����������� ������������������ ·Model1/2����������� ������������������ -����������� ������������������ Full-page����������� ������������������ Back����������� ������������������ &����������� ������������������ Forth·Model2����������� ������������������ +����������� ������������������ AJAX����������� ������������������ -����������� ������������������ Partial����������� ������������������ Page����������� ������������������ Update
47
웹앱
웹브라우저가����������� ������������������ 다����������� ������������������ 한다.
웹서버는����������� ������������������ 거들����������� ������������������ 뿐...
· “상태”����������� ������������������ 변화����������� ������������������ ==����������� ������������������ 사용자����������� ������������������ 인터랙션����������� ������������������ “이벤트”·자바스크립트로����������� ������������������ “상태”를����������� ������������������ 관리·로컬����������� ������������������ /����������� ������������������ 캐시����������� ������������������ 웹����������� ������������������ 리소스·클라이언트-사이드����������� ������������������ MVC·Single����������� ������������������ Page����������� ������������������ Interface·RESTful����������� ������������������ API����������� ������������������ Server
48
단일����������� ������������������ 페이지����������� ������������������ 인터페이스
index.html
ActivePage
show/hide
49
클라이언트-사이드����������� ������������������ 템플릿
HTML
TemplateData
API����������� ������������������ 서버
+
웹����������� ������������������ 서버
이름 클래스 레벨
<<foreach>><<foreach>><<foreach>>
★ ♥ ♦<<end>><<end>><<end>>
★ ♥ ♦iolo bard 만렙
장동수 개발자 쪼렙
... ... ...
캐시 앱
Placeholder
자바스크립트
이름 클래스 레벨
iolo bard 만렙
장동수 개발자 쪼렙
... ... ...
캐시 로컬스토리지Static����������� ������������������ HTML����������� ������������������ Fragment
50
클라이언트-사이드����������� ������������������ MVC
·Single����������� ������������������ Page����������� ������������������ Interface· 웹����������� ������������������ 서버도����������� ������������������ 없는����������� ������������������ 데...����������� ������������������ 페이지����������� ������������������ 이동은����������� ������������������ 왜?!
· (GUI)����������� ������������������ 애플리케이션����������� ������������������ 스타일의����������� ������������������ “상태”����������� ������������������ 관리
· 빠른����������� ������������������ 화면����������� ������������������ 전환����������� ������������������ &����������� ������������������ 화면����������� ������������������ 전환����������� ������������������ 효과
· 체감����������� ������������������ 성능����������� ������������������ UP!
· 메모리����������� ������������������ 사용량����������� ������������������ UP!
·클라이언트-사이드����������� ������������������ 템플릿· 웹����������� ������������������ 서버����������� ������������������ 개발에서����������� ������������������ 널리����������� ������������������ 쓰이는����������� ������������������ 템플릿(velocity,����������� ������������������ smarty,����������� ������������������ ...)을����������� ������������������ 웹����������� ������������������ 클라이언트에����������� ������������������ 적용
· 서버����������� ������������������ 부하는����������� ������������������ DOWN!
· 데이터����������� ������������������ 전송량도����������� ������������������ DOWN!
· 캐시����������� ������������������ 히트율은����������� ������������������ UP!����������� ������������������
51
하이브리드앱으로����������� ������������������ 가는마지막����������� ������������������ 비상구
52
to.����������� ������������������ ����������� ������������������ 개발자
[경고]����������� ������������������ This����������� ������������������ Web����������� ������������������ is����������� ������������������ NOT����������� ������������������ The����������� ������������������ Web.
The����������� ������������������ Web����������� ������������������ is����������� ������������������ Dead.
크로스����������� ������������������ 플랫폼?!
이����������� ������������������ 자바스크립트는����������� ������������������ 당신이����������� ������������������ 알았던����������� ������������������
그����������� ������������������ 자바스크립트가����������� ������������������ 아닙니다.
적절한����������� ������������������ 하이브리드앱����������� ������������������ 프레임웍����������� ������������������ 선택
적절한����������� ������������������ 자바스크립트����������� ������������������ 프레임웍����������� ������������������ 선택
웹����������� ������������������ 요소����������� ������������������ 기술����������� ������������������ +����������� ������������������ GUI����������� ������������������ 애플리케이션����������� ������������������ 아키텍쳐
Please,����������� ������������������ No����������� ������������������ More����������� ������������������ Active-X!
...
53
cc.����������� ������������������ 기획자,����������� ������������������ 디자이너,����������� ������������������ ...
[경고]����������� ������������������ This����������� ������������������ Web����������� ������������������ is����������� ������������������ NOT����������� ������������������ The����������� ������������������ Web.
The����������� ������������������ Web����������� ������������������ is����������� ������������������ Dead.
저비용����������� ������������������ 고품질?!
웹의����������� ������������������ 한계,����������� ������������������ 장점,����������� ������������������ 단점을����������� ������������������ 고려한����������� ������������������ 기획����������� ������������������ &����������� ������������������ 디자인과
적절한����������� ������������������ 품질����������� ������������������ 목표����������� ������������������ 설정
고비용����������� ������������������ 고품질����������� ������������������ but����������� ������������������ 멀티플랫폼
저비용����������� ������������������ 저품질����������� ������������������ but����������� ������������������ 개발생산성
무작정����������� ������������������ 네이티브����������� ������������������ 앱의����������� ������������������ UI/UX����������� ������������������ 따라하기����������� ������������������ 금지!
Please,����������� ������������������ No����������� ������������������ More����������� ������������������ Active-X!
...
54
참고자료
· 하이브리드����������� ������������������ 모바일����������� ������������������ 앱����������� ������������������ 프레임웍
· http://slideshare.net/iolo/hybrid-mobile-application-framework
· 단일����������� ������������������ 페이지����������� ������������������ 인터페이스����������� ������������������ 웹/앱����������� ������������������ 개발
· http://slideshare.net/iolo/ss-7719322
· 모바일����������� ������������������ 프레임웍����������� ������������������ 비교����������� ������������������ 차트
· http://www.markus-falk.com/mobile-frameworks-comparison-chart/
· How����������� ������������������ to����������� ������������������ build����������� ������������������ Android����������� ������������������ App����������� ������������������ with����������� ������������������ HTML/CSS/JavaScript
· https://github.com/iolo/hellowebapp-android
· http://youtube.com/watch?v=uVqp1zcMfbE
· How����������� ������������������ to����������� ������������������ build����������� ������������������ iOS����������� ������������������ App����������� ������������������ with����������� ������������������ HTML/CSS/JavaScript
· https://github.com/iolo/hellowebapp-ios
· http://youtube.com/watch?v=L28lGkoSQ2c
· Android����������� ������������������ SDK����������� ������������������ WebView����������� ������������������ 레퍼런스����������� ������������������ http://goo.gl/iqr9H
· iOS����������� ������������������ SDK����������� ������������������ UIWebView����������� ������������������ 레퍼런스����������� ������������������ http://goo.gl/U8XGy
· 앱스프레소����������� ������������������ 홈페이지����������� ������������������ http://appspresso.com/
· 폰갭����������� ������������������ 홈페이지����������� ������������������ http://phonegap.com/
· 티타늄����������� ������������������ 홈페이지����������� ������������������ http://appcelerator.com/
· 자바스크립트����������� ������������������ 대체����������� ������������������ 언어����������� ������������������ http://altjs.org
55
That’s����������� ������������������ all����������� ������������������ Folks...KT����������� ������������������ Hitel����������� ������������������ Corp.����������� ������������������ /����������� ������������������ 장동수����������� ������������������ /����������� ������������������ @iolothebard
56