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

56
하이브리드앱 개발 전략과 이슈 KT Hitel Corp. / 장동수 / @iolothebard 1

Upload: dongsu-jang

Post on 30-Oct-2014

21 views

Category:

Technology


3 download

DESCRIPTION

 

TRANSCRIPT

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

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

KT����������� ������������������  Hitel����������� ������������������  Corp.����������� ������������������  /����������� ������������������  장동수����������� ������������������  /����������� ������������������  @iolothebard

1

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

하이브리드앱을����������� ������������������  준비하는개발자들을����������� ������������������  위한����������� ������������������  안내서

2

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

개발자의����������� ������������������  눈으로����������� ������������������  본����������� ������������������  하이브리드앱

웹����������� ������������������  표준����������� ������������������  기술

플랫폼����������� ������������������  SDK

iOS����������� ������������������  SDK

하이브리드

HTML5 CSS 자바스크립트

비표준����������� ������������������  Device����������� ������������������  APIs

안드로이드����������� ������������������  SDK

윈폰7����������� ������������������  SDK …⋯

웹����������� ������������������  UI����������� ������������������  툴킷 자바스크립트����������� ������������������  프레임웍/라이브러리

표준����������� ������������������  Device����������� ������������������  APIs

웹네이티브

웹브라우져����������� ������������������  “앱”

프레임웍

네이티브����������� ������������������  라이브러리

UI����������� ������������������  툴킷

개발����������� ������������������  도구 웹브라우져����������� ������������������  “엔진”

3

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

우리는����������� ������������������  왜����������� ������������������  하이브리드앱을����������� ������������������  주목하는가?

Open����������� ������������������  Standard?!

Cross����������� ������������������  Platform?!

Low����������� ������������������  Cost����������� ������������������  &����������� ������������������  High����������� ������������������  Quality?!

and����������� ������������������  Make����������� ������������������  Money!!

4

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

웹����������� ������������������  브라우져

AppStore

웹앱

HTML CSS

JS ...

5

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

“Boilerplate”����������� ������������������  네이티브����������� ������������������  앱

웹브라우저����������� ������������������  엔진

AppStore

웹앱

HTML CSS

JS ...

6

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

웹����������� ������������������  런타임

Device����������� ������������������  APIs

표준����������� ������������������  Device����������� ������������������  APIs

확장����������� ������������������  Device����������� ������������������  APIs웹브라우저����������� ������������������  엔진

웹앱

HTML CSS

JS ...

7

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

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

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

· 가속도����������� ������������������  센서����������� ������������������  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

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

개발자들이����������� ������������������  꿈꾸는����������� ������������������  하이브리드����������� ������������������  앱

Development����������� ������������������  Cost

Applica

tion����������� ������������������  Quality

네이티브

BEST

WORST

하이브리드

10

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

하이브리드앱에����������� ������������������  대처하는개발자들의����������� ������������������  자세

11

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

Hello,����������� ������������������  WebApp!����������� ������������������  안드로이드편

동영상:����������� ������������������  http://www.youtube.com/watch?v=uVqp1zcMfbE소스코드:����������� ������������������  https://github.com/iolo/hellowebapp-android

12

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

Hello,����������� ������������������  WebApp!����������� ������������������  iOS편

동영상:����������� ������������������  http://www.youtube.com/watch?v=L28lGkoSQ2c소스코드:����������� ������������������  https://github.com/iolo/hellowebapp-ios

13

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

네이티브����������� ������������������  지향����������� ������������������  하이브리드앱

사실상����������� ������������������  네이티브,

웹은����������� ������������������  거들����������� ������������������  뿐...

·제한적이고����������� ������������������  직관적인����������� ������������������  네이티브와����������� ������������������  웹의����������� ������������������  결합·웹브라우져����������� ������������������  as-a����������� ������������������  UI����������� ������������������  컴포넌트·도움말,����������� ������������������  앱/개발사����������� ������������������  소개,����������� ������������������  공지사항/새소식...·웹����������� ������������������  기반����������� ������������������  사용자����������� ������������������  인증(OAuth)...

웹은거들����������� ������������������  뿐...

14

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

웹브라우져����������� ������������������  as-a����������� ������������������  UI����������� ������������������  컴포넌트

15

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

웹����������� ������������������  기반����������� ������������������  사용자����������� ������������������  인증

16

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

웹은����������� ������������������  아니지만����������� ������������������  네이티브도����������� ������������������  아닌,

그러나����������� ������������������  웹스러운...

·광범위하고����������� ������������������  일관성없는����������� ������������������  네이티브와����������� ������������������  웹의����������� ������������������  결합·웹브라우져를����������� ������������������  내장한����������� ������������������  네이티브����������� ������������������  클라이언트·기존����������� ������������������  웹����������� ������������������  서버����������� ������������������  “조금����������� ������������������  손����������� ������������������  봐서...”����������� ������������������  재활용·기존����������� ������������������  웹����������� ������������������  컨텐츠����������� ������������������  “조금����������� ������������������  손����������� ������������������  봐서...”����������� ������������������  재활용

“한����������� ������������������  지붕����������� ������������������  두����������� ������������������  가족”����������� ������������������  하이브리드앱

손����������� ������������������  봐주마!

17

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

여기도����������� ������������������  하이브리드~

18

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

저기도����������� ������������������  하이브리드~

19

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

웹����������� ������������������  지향����������� ������������������  하이브리드앱

사실상����������� ������������������  웹,

네이티브는����������� ������������������  거들����������� ������������������  뿐...

·광범위하지만����������� ������������������  일관성있는����������� ������������������  네이티브와����������� ������������������  웹의����������� ������������������  결합����������� ������������������  ·클라이언트����������� ������������������  사이드����������� ������������������  “웹앱”·기존����������� ������������������  웹����������� ������������������  서버����������� ������������������  +����������� ������������������  RESTful����������� ������������������  API����������� ������������������  서버·기본적인����������� ������������������  웹����������� ������������������  컨텐츠는����������� ������������������  앱에����������� ������������������  포함

네이티브는거들����������� ������������������  뿐...

20

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

이것도����������� ������������������  하이브리드!

21

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

네이티브와����������� ������������������  웹의����������� ������������������  결합

WebView

WebViewClient����������� ������������������  &����������� ������������������  WebChromeClient

loadUrl

addJavascriptInterface

UIWebView

UIWebViewDelegate

loadRequest

stringByEvaluatingJavascriptFromString

22

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

예제����������� ������������������  코드(안드로이드)

<<웹서버 컨텐츠 불러오기>>

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

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

예제����������� ������������������  코드(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

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

예제����������� ������������������  코드(안드로이드)

<<링크 클릭 가로채기>>

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

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

예제����������� ������������������  코드(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

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

예제����������� ������������������  코드(안드로이드)

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

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

예제����������� ������������������  코드(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

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

네이티브와����������� ������������������  웹의����������� ������������������  결합

그림 출처: http://petticoatsandpistols.com/2010/05/12/

URL

자바스크립트

쿠키

캐시그래봤자,문자열~

어차피,꼼수

그리고...HTTP!

29

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

저비용����������� ������������������  고품질?!하이브리드앱����������� ������������������  개발����������� ������������������  전략

30

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

저비용����������� ������������������  고품질����������� ������������������  하이브리드앱����������� ������������������  개발����������� ������������������  전략

저비용����������� ������������������  고품질!

그런����������� ������������������  게����������� ������������������  있어요?!����������� ������������������  @..@����������� ������������������  저도����������� ������������������  좀����������� ������������������  알려주세요!

그럼?����������� ������������������  어떻게����������� ������������������  해요?

고비용����������� ������������������  고품질����������� ������������������  but����������� ������������������  멀티플랫폼����������� ������������������  =~����������� ������������������  저비용����������� ������������������  고품질

저비용����������� ������������������  저품질����������� ������������������  but����������� ������������������  높은생산성����������� ������������������  =~����������� ������������������  저비용����������� ������������������  저품질

무엇을����������� ������������������  원하느냐에����������� ������������������  따라����������� ������������������  다른����������� ������������������  전략!

적절한����������� ������������������  하이브리드앱����������� ������������������  프레임웍����������� ������������������  선택

적절한����������� ������������������  자바스크립트����������� ������������������  프레임웍����������� ������������������  선택

그리고,����������� ������������������  적절한����������� ������������������  아키텍쳐����������� ������������������  설계와����������� ������������������  개발...

31

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

하이브리드앱����������� ������������������  프레임웍

32

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

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

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

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

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

Appspresso

· 홈페이지

· http://www.appspresso.com/

· 특징

· 국내에서����������� ������������������  개발된����������� ������������������  하이브리드앱����������� ������������������  프레임웍

· 이클립스����������� ������������������  기반의����������� ������������������  통합����������� ������������������  개발����������� ������������������  환경����������� ������������������  제공

· 지원����������� ������������������  단말

· Android,����������� ������������������  iPhone

· 라이센스

· 자체����������� ������������������  라이센스(무료이지만����������� ������������������  오픈소스는����������� ������������������  아님)

· 장점

· 한국����������� ������������������  사용자����������� ������������������  커뮤니티/교육

· 이클립스����������� ������������������  기반의����������� ������������������  통합����������� ������������������  개발����������� ������������������  환경

· WAC����������� ������������������  2.0����������� ������������������  호환����������� ������������������  Device����������� ������������������  APIs

· 단점

· 제한적인����������� ������������������  플랫폼����������� ������������������  지원

· 라이센스����������� ������������������  정책

35

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

(내맘대로)����������� ������������������  하이브리드앱����������� ������������������  프레임웍����������� ������������������  비교

구분 PhoneGap Titanium Appspresso

라이센스 OSS/부분유료 OSS/부분유료 Not-OSS/무료

지원����������� ������������������  플랫폼 ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★ ★����������� ������������������  ★����������� ������������������  ★ ★����������� ������������������  ★

개발도구(IDE) ★����������� ������������������  ★ ★★★★★����������� ������������������  (Aptana) ★★★����������� ������������������  (Eclipse)

문서/예제(공식/비공식)

★����������� ������������������  ★����������� ������������������  /����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★ ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  /����������� ������������������  ★ ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  /����������� ������������������  ★

성능 ★ ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  (컴파일) ★

내장����������� ������������������  Device����������� ������������������  APIs ★����������� ������������������  ★����������� ������������������  ★ ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  (부분유료) ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  (WAC)

확장����������� ������������������  Device����������� ������������������  APIs(플러그인)

★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★ ★ ★����������� ������������������  ★����������� ������������������  ★

개발자����������� ������������������  커뮤니티 ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★����������� ������������������  ★ ★����������� ������������������  ★����������� ������������������   ★����������� ������������������  

36

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

기타����������� ������������������  하이브리드앱����������� ������������������  ����������� ������������������  프레임웍

·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

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

자바스크립트����������� ������������������  프레임웍

38

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

기타����������� ������������������  자바스크립트����������� ������������������  프레임웍/라이브러리

39

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

jQueryMobile

· http://jquerymobile.com/· jQuery����������� ������������������  기반· 주요����������� ������������������  모바일����������� ������������������  플랫폼����������� ������������������  호환· 경량(12k,����������� ������������������  이미지����������� ������������������  사용����������� ������������������  최소화)· HTML5����������� ������������������  마크업����������� ������������������  기반����������� ������������������  설정· 점진적����������� ������������������  개선����������� ������������������  (Progressive����������� ������������������  Enhancement)

· 우아한����������� ������������������  퇴보(Graceful����������� ������������������  Degradation)· 겸손한����������� ������������������  자바스크립트(Unobtrusive����������� ������������������  Javascript)

· 접근성(Accessibility)����������� ������������������  지원· 터치����������� ������������������  최적화����������� ������������������  이벤트����������� ������������������  &����������� ������������������  플러그인· 테마����������� ������������������  제작����������� ������������������  도구(Theme����������� ������������������  Roller)

40

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

Sencha����������� ������������������  Touch

· http://www.sencha.com/· Ext����������� ������������������  JS����������� ������������������  +����������� ������������������  jQTouch����������� ������������������  +����������� ������������������  Raphael·풍부한����������� ������������������  UI����������� ������������������  컴포넌트·향상된����������� ������������������  터치����������� ������������������  이벤트· iOS,����������� ������������������  안드로이드,����������� ������������������  블랙베리6����������� ������������������  등의����������� ������������������  주요����������� ������������������  모바일����������� ������������������  플랫폼����������� ������������������  지원·MVC����������� ������������������  프레임웍����������� ������������������  &����������� ������������������  데이터����������� ������������������  API

41

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

JQTouch

· http://jqtouch.com·가볍고����������� ������������������  빠른����������� ������������������  기본����������� ������������������  프레임웍·확장����������� ������������������  플러그인,����������� ������������������  iOS에����������� ������������������  최적화된����������� ������������������  API·네이티브����������� ������������������  웹킷����������� ������������������  CSS3����������� ������������������  애니메이션,����������� ������������������  간단한����������� ������������������  테마����������� ������������������  지원· jQuery����������� ������������������  호환����������� ������������������  플러그인(zepto.js����������� ������������������  호환)

42

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

(내맘대로)����������� ������������������  자바스크립트����������� ������������������  프레임웍����������� ������������������  비교

jQueryMobile Sencha����������� ������������������  Touch jQTouch

라이센스 MIT GPLv3/상업용 MIT

UI컴포넌트 ★★ ★★★★★ ★

브라우져지원 ★★★ ★★★★ ★★

난이도(개발/디자인)

★★★/★★★ ★/★ ★★★★/★★★★

접근성 ★★★★ ★ ★★

성능(로딩/실행)

★★★/★★ ★/★★★ ★★★/★★★

문서(공식/비공식)

★★/★★★ ★★★/★ ★/★

개발자����������� ������������������  커뮤니티 ★★★★★ ★★★ ★★

43

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

기타����������� ������������������  자바스크립트����������� ������������������  프레임웍/라이브러리

·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

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

하이브리드앱����������� ������������������  베스트프랙티스!

그런����������� ������������������  게����������� ������������������  있어요?!����������� ������������������  @..@����������� ������������������  저도����������� ������������������  좀����������� ������������������  알려주세요!

그럼?����������� ������������������  어떻게����������� ������������������  해요?

웹앱����������� ������������������  !=����������� ������������������  웹사이트

웹앱����������� ������������������  =~����������� ������������������  웹����������� ������������������  요소����������� ������������������  기술����������� ������������������  +����������� ������������������  GUI����������� ������������������  애플리케이션����������� ������������������  아키텍쳐

하이브리드앱����������� ������������������  =~����������� ������������������  패키징(웹앱����������� ������������������  +����������� ������������������  Device����������� ������������������  APIs)

Device����������� ������������������  APIs����������� ������������������  !=����������� ������������������  Active-X

Device����������� ������������������  APIs는����������� ������������������  꼭����������� ������������������  필요할����������� ������������������  때만~����������� ������������������  No����������� ������������������  More����������� ������������������  Active-X

그리고,����������� ������������������  Single����������� ������������������  Page����������� ������������������  Interface����������� ������������������  +����������� ������������������  RESTful����������� ������������������  API����������� ������������������  Server...

하이브리드앱����������� ������������������  아키텍쳐

45

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

네이티브앱����������� ������������������  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

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

웹사이트

웹서버가����������� ������������������  다����������� ������������������  한다.

웹브라우저는����������� ������������������  거들����������� ������������������  뿐...

· “상태”����������� ������������������  변화����������� ������������������  ==����������� ������������������  페이지����������� ������������������  이동·매번����������� ������������������  “상태”를����������� ������������������  주고����������� ������������������  받기����������� ������������������  -����������� ������������������  Cookie!·or����������� ������������������  서버가����������� ������������������  “상태”를����������� ������������������  관리����������� ������������������  -����������� ������������������  Session!·서버-사이드����������� ������������������  MVC����������� ������������������  ·Model1/2����������� ������������������  -����������� ������������������  Full-page����������� ������������������  Back����������� ������������������  &����������� ������������������  Forth·Model2����������� ������������������  +����������� ������������������  AJAX����������� ������������������  -����������� ������������������  Partial����������� ������������������  Page����������� ������������������  Update

47

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

웹앱

웹브라우저가����������� ������������������  다����������� ������������������  한다.

웹서버는����������� ������������������  거들����������� ������������������  뿐...

· “상태”����������� ������������������  변화����������� ������������������  ==����������� ������������������  사용자����������� ������������������  인터랙션����������� ������������������  “이벤트”·자바스크립트로����������� ������������������  “상태”를����������� ������������������  관리·로컬����������� ������������������  /����������� ������������������  캐시����������� ������������������  웹����������� ������������������  리소스·클라이언트-사이드����������� ������������������  MVC·Single����������� ������������������  Page����������� ������������������  Interface·RESTful����������� ������������������  API����������� ������������������  Server

48

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

단일����������� ������������������  페이지����������� ������������������  인터페이스

index.html

ActivePage

show/hide

49

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

클라이언트-사이드����������� ������������������  템플릿

HTML

TemplateData

API����������� ������������������  서버

+

웹����������� ������������������  서버

이름 클래스 레벨

<<foreach>><<foreach>><<foreach>>

★ ♥ ♦<<end>><<end>><<end>>

★ ♥ ♦iolo bard 만렙

장동수 개발자 쪼렙

... ... ...

캐시 앱

Placeholder

자바스크립트

이름 클래스 레벨

iolo bard 만렙

장동수 개발자 쪼렙

... ... ...

캐시 로컬스토리지Static����������� ������������������  HTML����������� ������������������  Fragment

50

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

클라이언트-사이드����������� ������������������  MVC

·Single����������� ������������������  Page����������� ������������������  Interface· 웹����������� ������������������  서버도����������� ������������������  없는����������� ������������������  데...����������� ������������������  페이지����������� ������������������  이동은����������� ������������������  왜?!

· (GUI)����������� ������������������  애플리케이션����������� ������������������  스타일의����������� ������������������  “상태”����������� ������������������  관리

· 빠른����������� ������������������  화면����������� ������������������  전환����������� ������������������  &����������� ������������������  화면����������� ������������������  전환����������� ������������������  효과

· 체감����������� ������������������  성능����������� ������������������  UP!

· 메모리����������� ������������������  사용량����������� ������������������  UP!

·클라이언트-사이드����������� ������������������  템플릿· 웹����������� ������������������  서버����������� ������������������  개발에서����������� ������������������  널리����������� ������������������  쓰이는����������� ������������������  템플릿(velocity,����������� ������������������  smarty,����������� ������������������  ...)을����������� ������������������  웹����������� ������������������  클라이언트에����������� ������������������  적용

· 서버����������� ������������������  부하는����������� ������������������  DOWN!

· 데이터����������� ������������������  전송량도����������� ������������������  DOWN!

· 캐시����������� ������������������  히트율은����������� ������������������  UP!����������� ������������������  

51

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

하이브리드앱으로����������� ������������������  가는마지막����������� ������������������  비상구

52

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

to.����������� ������������������  ����������� ������������������  개발자

[경고]����������� ������������������  This����������� ������������������  Web����������� ������������������  is����������� ������������������  NOT����������� ������������������  The����������� ������������������  Web.

The����������� ������������������  Web����������� ������������������  is����������� ������������������  Dead.

크로스����������� ������������������  플랫폼?!

이����������� ������������������  자바스크립트는����������� ������������������  당신이����������� ������������������  알았던����������� ������������������  

그����������� ������������������  자바스크립트가����������� ������������������  아닙니다.

적절한����������� ������������������  하이브리드앱����������� ������������������  프레임웍����������� ������������������  선택

적절한����������� ������������������  자바스크립트����������� ������������������  프레임웍����������� ������������������  선택

웹����������� ������������������  요소����������� ������������������  기술����������� ������������������  +����������� ������������������  GUI����������� ������������������  애플리케이션����������� ������������������  아키텍쳐

Please,����������� ������������������  No����������� ������������������  More����������� ������������������  Active-X!

...

53

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

cc.����������� ������������������  기획자,����������� ������������������  디자이너,����������� ������������������  ...

[경고]����������� ������������������  This����������� ������������������  Web����������� ������������������  is����������� ������������������  NOT����������� ������������������  The����������� ������������������  Web.

The����������� ������������������  Web����������� ������������������  is����������� ������������������  Dead.

저비용����������� ������������������  고품질?!

웹의����������� ������������������  한계,����������� ������������������  장점,����������� ������������������  단점을����������� ������������������  고려한����������� ������������������  기획����������� ������������������  &����������� ������������������  디자인과

적절한����������� ������������������  품질����������� ������������������  목표����������� ������������������  설정

고비용����������� ������������������  고품질����������� ������������������  but����������� ������������������  멀티플랫폼

저비용����������� ������������������  저품질����������� ������������������  but����������� ������������������  개발생산성

무작정����������� ������������������  네이티브����������� ������������������  앱의����������� ������������������  UI/UX����������� ������������������  따라하기����������� ������������������  금지!

Please,����������� ������������������  No����������� ������������������  More����������� ������������������  Active-X!

...

54

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

참고자료

· 하이브리드����������� ������������������  모바일����������� ������������������  앱����������� ������������������  프레임웍

· 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

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

That’s����������� ������������������  all����������� ������������������  Folks...KT����������� ������������������  Hitel����������� ������������������  Corp.����������� ������������������  /����������� ������������������  장동수����������� ������������������  /����������� ������������������  @iolothebard

56