Architect! Your Role, Our Future 2012 한국소프트웨어아키텍트대회 - 소프트웨어글로벌경쟁력을위한아키텍처 Vision & Role Track 2, Session 9 모바일하이브리드앱아키텍처및패턴 전자정부표준프레임워크 Device API 아키텍처사례 발표자 : 임철홍 회 사 : SK C&C 부서 / 직위 : Architect/QA 그룹 / 차장 정보처리기술사 / KCSA 인증시니어아키텍트
목차 1. 하이브리드프레임워크개요 2. 하이브리드프레임워크아키텍처 3. 하이브리드프레임워크패턴 4. 맺음말 -2-
1. 모바일서비스환경분석 Ⅰ. 하이브리드프레임워크개요 모바일서비스제공시카메라제어, 주소록접근등의단말고유기능제공을위해서는 Device API 를기반으로하는모바일하이브리드앱활용이필요합니다. 모바일하이브리드앱개발분석배경 공공서비스하이브리드필요요소 모바일 서비스현황 해외 하이브리드앱현황 국내 하이브리드앱현황 모바일서비스제공시모바일웹방식으로는디바이스의네이티브 API 접근이어려워일부모바일기술요소구현제한 하이브리드앱의 Device API 를활용하여디바이스내의네이티브 API 접근가능 W3C DAP Device API : Calendar, Contact, Media Capture, Messaging, System Information, Gallery, Powerbox, Application Launcher, Tasks API, Application Configuration, User Interaction, Communication Log W3C 외에도다수의통신사, 제조사들로구성된협의체등에의해 Device API 를활용한및표준이제시되고있음 W3C DAP, WAC Waikiki, OMTP BONDI, JIL Platform 대기업 (SK C&C, KT, 삼성 SDS), 외국기업 ( 오라클, 어도비 ) 및국내연구기관 (ETRI) 등을위주로하이브리드앱플랫폼도입중 하이브리드앱개발을위한대표적인하이브리드프레임워크는 ( 해외 -PhoneGap, Titanium) ( 국내 -appspresso) 등이있음 서비스 민원서비스 공공정보민간활용 웹전화서비스 행정협업 위치정보 (LBS) 사물인식 하이브리드필요요소 자기전화번호가져오기 발급문서진위확인 모바일결재 ( 수수료 ) 공인인증 발급 ( 출력 ) Tag 검색 자동차번호판, 주민증, 통장, 등 지문인식 Semantic 검색 공인인증 (GPKI) i-pin 인증 실명인증 / 로그인기술 증강현실 위치기반기술 카메라연동을통한화상회의 모바일사용자단말기인증 모바일단말기분실 / 도난시보안방안 모바일보안위협모니터링 현장행정 Push 기술문자인식기술 -3-
2. 하이브리드앱구성도 Ⅰ. 하이브리드프레임워크개요 하이브리드어플리케이션은네이티브플랫폼종속적인디바이스 API 와플랫폼비종속적인어플리케이션으로나누어지며웹뷰클라이언트를이용해어플리케이션을구동시킵니다. 웹리소스 HTML5 자바스크립트 CSS 하이브리드어플리케이션 하이브리드어플리케이션영역은플랫폼에비종속적인언어인 HTML5, 자바스크립트, CSS 로구현되며앱빌드시컴파일되지않는다. 어플리케이션이동작하면디바이스 API 의웹뷰에의해인터프리팅방식으로랜더링된다. 웹뷰클라이언트 웹뷰클라이언트 하이브리드어플리케이션의디바이스 API 호출을위한브릿지역할을해준다. Phonegap.jar Plugin.xml PP Android Phonegap. framework PP Phonegap. plist ios 디바이스 API 하이브리드어플리케이션동작하기위한기반구성요소로네이티브플랫폼에종속적인언어로구성된다. HTML5 와자바스크립트표준코드이외의디바이스종속기능을사용하기위한기능을구현하며사용자의커스텀라이브러리가포함된다. -4-
3. 모바일플랫폼분석 Ⅰ. 하이브리드프레임워크개요 하이브리드앱은모바일웹환경으로제공하기힘든디바이스고유기능을사용하여, 사용자편의성및업무효율성을강화하는것이목적입니다. 구분모바일웹모바일웹앱하이브리드앱네이티브앱 개요 일반적인웹기술로개발되고모바일브라우저에의해실행 모바일웹의한형태 웹기술만사용하여모바일환경에서네이티브애플리케이션과유사한실행환경, 사용자경험을제공하는형태의애플리케이션 일반적인웹기술을사용하여모바일기기의고유정보와상호작용 플랫폼에따른프로그래밍언어및 SDK 로개발 그래픽 하 하 상 상 앱스토어판매 불가능 가능 가능 가능 앱서비스매쉬업 가능 가능 가능 불가능 멀티플랫폼지원 용이 용이 용이 어려움 스토리지 서버, 클라우드 서버, 클라우드 Local, 서버, 클라우드 LOCAL 디바이스제어 불가능 불가능 용이 용이 다중사용자작업 ( 유지보수 ) 가능 가능 가능 불가능 -5-
4. 하이브리드프레임워크사례 Ⅰ. 하이브리드프레임워크개요 PhoneGap 은현재세계적으로가장대표적으로사용되고있는오픈소스라이선스기반프레임워크이며, 가장많은 OS 를지원하고있습니다. PhoneGap 적용사례 개발사현황 특징 장단점 -Nitobi 개발 - 어도비 (Adobe) 사가 Nitobi 를인수하기로하면서 PhoneGap 을아파치소프트웨어재단 (Apache Software Foundation) 에기증할계획발표 - 웹뷰를이용하여웹이앱에서동작 - 각종 Device API 를자바스크립트로핸들링 - 유료기술지원운영 - 오픈소스 (Customizing 이자유로움 ) - 컴파읷시 HTML, 자바스크립트, CSS를그대로사용 (Run-Time Hybrid App) - 장점 2009 년에공개된최초의하이브리드프레임워크 단지 4.5MB 의용량 최다모바일플랫폼지원 국제표준을지향하여개발하고있다. (W3C) - 단점 플렛폼의개발환경에약간의지식이있어야개발이가능 포스트캡슐 - 아이폰용유료 Hybrid 앱 - 원하는상대에게날짜를예약해메시지를보낼 - 폰갭과 jquery 를사용하여구현함 RNAO 간호우수사례지침 - 온타리오의등록간호사 ' 협회 (RNAO) 에의해발행하는간호우수사례지침의적응내용을포함 -6-
4. 하이브리드프레임워크사례 Ⅰ. 하이브리드프레임워크개요 Titanium 는네이티브형태로빌드되어실행되기때문에성능이매우뛰어나지만, 솔루션종속성이강해유지보수및확장에제약성이있습니다. Titanium 적용사례 개발사현황 특징 장단점 - Accelerator 에서개발한 Hybrid 플랫폼 www.appcelerator.com - Mobile 디바이스와 Desktop을별도로지원 - JavaScript Code 를 Native Code 로변환 (Native Code 이므로완벽한 native UI 와 Performance를제공 ) - Aptana를인수하여개발도구를강화 - 컴파일단계에서 HTML, 자바스크립트, CSS를 Binary Code로변환 (Build-Time Hybrid App) - 모바일뿐만아니라데스크톱플랫폼도지원 - 장점 Eclipse 기반의개발환경제공 근본적으로네이티브자원을활용해네이티브와동일한성능 - 단점 Native Code 변환을위하여약속된 API 만을사용하여야함 ( 실제로 Titanium 언어를새로배워야함 ) Wunderlist - ToDo 리스트관리애플리케이션 - 아이폰, 아이패드, 안드로이드, 맥os, windows 전용앱을제공하며 Web 버전도제공 - cloud 연결을통해언제어디서나똑같은 Task가보여지도록동기화되며지원하는플랫폼은앞으로계속확대예정 레잇나잇위드지미펄론 (LNJF) - 미국방송사 NBC 심야토크쇼 ' 레잇나잇위드지미펄론 (LNJF) 과동명의하이브리드앱 - 앱안에서방송영상과사진을보고블로그포스팅을제공 -7-
1. 정적아키텍처 모듈 View II. 하이브리드프레임워크아키텍처 하이브리드프레임워크는웹어플리케이션인 Presentation Layer 와단말기능을제공하는 Device API, 웹과단말기능을연결하는 Web View 로구성됩니다. 주요특징 Presentation Layer 개발환경 HTML5 CSS3 JavaScript Web View WebKit DOM HTML/XHTML Parser Webkit API JavaScript Framework Interface APIs jquery Implementation Tool Test Tool 하이브리드 IDE Virtual Device Emulator Deployment Tool 1. Layer 아키텍처를채택 Loolsely Coupling 하여유연성과확장성제공 2. UX 라이브러리를활용해개발생산성을높임 JQueryMobile, Sencha Touch 등다양한라이브러리지원가능 JavaScript Engine REST SOAP APK Deploy Tool IPA Deploy Tool 3. Prebulit 된 Device API 를제공하여쉽게활용가능 Device APIs Calendar Contact Media Notificati on Conf & Change Mgt. Tool SVN 4. 하이브리드패턴에알맞은개발환경제공 (Eclipse, Xcode) File Media Geo location Storage -8-
1. 정적아키텍처 모듈 View II. 하이브리드프레임워크아키텍처 하이브리드프레임워크는 Camera, File, Geolocation, Media 등단말고유기능을웹어플리케이션에서접근이가능도록다양한 Device API 를제공합니다. Device API API 기능정의활용어플리케이션사례 Accelerometer 디바이스모션센서접근 ( 현재가속도정보등등 ) Camera Capture Compass 디바이스의기본카메라어플리케이션에접근장치의오디오, 이미지및비디오캡처기능에대한액세스를제공디바이스포인팅방향정보처리 Connection 디바이스의 cellular, wifi 정보접근 ( 호스트네임등등 ) Contacts 디바이스의연락처데이터베이스에접근 ( 연락처만들기, 검색등등 ) Device 디바이스 H/W S/W 정보에접근 ( 디바이스명, 플랫폼버전등등 ) Events File 폰갭이모두로드되었을때, 딱한번 deviceready 메소드를 수행한다. ( 엔트리포인트..) 파일시스템계층의읽기, 쓰기, 탐색등의기능제공 Geolocation 디바이스 GPS 센서에접근 ( 현재위치등등 ) Media Notification Storage 디바이스의오디오파일을저장하고기록할수있는기능을 제공 영상음성, 진동등을통한알림제공. (alert, confirm, beep, vibrate 등등을발생시키는..) 디바이스스토리지에대한접근을제공 -9-
2. 동적아키텍처 Component & Connector View II. 하이브리드프레임워크아키텍처 PhoneGap 은동기적방식과비동기적방식으로서비스를제공하며, phonegap.js 안의자바스크립트를실행시켜서안드로이드나 ios 플랫폼의단말기능을실행하게됩니다. Phonegap.js Phonegap. framework Phonegap. plist Phonegap.jar Plugin.xml -10-
2. 동적아키텍처 Component & Connector View II. 하이브리드프레임워크아키텍처 동기적방식은 WebView 에서실행요청되면 GapClient 가단말기능실행을요청하고응답이올때까지대기하였다가응답을받으면다시 WebView 에결과를전달합니다. 1 2 3 4 Javascript에서플러그인의함수를호출하게되면내부적으로 PhoneGap.exec() 호출한다. Javascript 호출구문이 gap:xxx 형태의문자열인경우 DroidGap@GapClient에서 PluginManager.exe() 메소드를실행하여그결과를 JSON 스트링으로리턴한다. DroidGap@GapClient PluginManager로부터리턴받은플러그인실행결과스트링을 jspromptresult.confirm( 실행결과 ) 메서드를호출해리턴한다. 웹영역에서는결과리턴값을해석하여 Success 또는 Failure 콜백함수를호출한다. -11-
2. 동적아키텍처 Component & Connector View II. 하이브리드프레임워크아키텍처 비동기적방식은 HTTP 서버인 CallBack Server 가단말기능실행을요청하고, 응답을기다리지않고다른처리를실행하다가 CallBack 을받으면 WebView 에결과를전달합니다. 1 2 3 4 5 폰갭어플리케이션은비동기식응답에요청하기위해내부적으로 Callback Server를이용하여 XMLHttpRequest 요청에응답하는로컬웹서버를구동한다. PhoneGap.JSCallback 함수에서로컬웹서버와 ajax통신하기위한연결을맺는다. 동기식과같은방식으로플러그인의기능을호출한다. PluginManager는별도의스레드에서플러그인을실행시키고 CallbackServer에그결과를적재시킨다. CallbackServer에서는새로운플러그인실행결과가공급되면기존에연결된 XHttpRequest에대한응답으로결과를반환한다. -12-
2. 동적아키텍처 Component & Connector View II. 하이브리드프레임워크아키텍처 < 동기적실행 > Index.html $(function(){ rns.js jactionsheet('', ' 공지수락확인 ', 'b', btmitem, function(r) { fn_serversentevent(); fn_showmsg() 호출 1. fn_showmsg() 실행 function fn_showmsg(srcdata) { if (data.length == 3 && notistatus == "Y" && data[0] > maxsn) { navigator.notification.vibrate(1000); jactionsheet(alertmessage, ' 메시지확인 ', 'b', btmitem, function(r) { phonegap.js 2. vibrate() 실행 PhoneGap.JSCallback = function() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readystate === 4){ xmlhttp.open("get", "http://127.0.0.1:"+phonegap.jscallbackport+"/"+phonegap.jscallbacktoken, true); xmlhttp.send(); Notification.prototype.vibrate = function(mills) { PhoneGap.exec(null, null, "Notification", "vibrate", [mills]); }; 3. PhoneGap.exec실행 PhoneGap.exec = function(success, fail, service, action, args) { try { var callbackid = service + PhoneGap.callbackId++; var r = prompt(json.stringify(args), "gap:"+json.stringify([service, action, callbackid, true])); DroidGap$GapClient.onJsPrompt() 메소드에서는 prompt 의 default value 가 "gap:xxx" 형태의문자열인경우 PluginManager.exec(...) 메소드를실행 GapClient 4. 동기적방식 Device API 실행 PluginResult cr = plugin.execute(xxx); return cr.getjsonstring(); -13-
2. 동적아키텍처 Component & Connector View II. 하이브리드프레임워크아키텍처 < 비동기적실행 > com.phonegap.callbackserver 는 ServerSocket 을이용하여간단한폰내부로컬웹서버를띄웁니다. 이웹서버는웹영역의 XMLHttpRequest(XHR) 요청에응답합니다. phonegap.js 의 PhoneGap.JSCallback 함수에서로컬웹서버와 ajax 통신하기위한연결을맺습니다. xmlhttp.open("get", "http://127.0.0.1:xxx/xxx", true); xmlhttp.send(); 비동기플러그인의경우별도의쓰레드를만들어서플러그인을실행하고그결과를 CallbackServer 에적재합니다. new Thread(new Runnable() { public void run() { PluginResult cr = plugin.execute(xxx);... ctx.sendjavascript(xxx); } }); thread.start(); return ""; // 플러그인실행이끝날때까지기다리지않고즉시리턴 CallbackServer 는새로운플러그인실행결과 (javascript 문자열 ) 가공급되면그것을기존에연결된 XHR 에응답으로씁니다. response = "HTTP/1.1 200 OK\r\n\r\n"; String js = this.getjavascript(); response += URLEncoder.encode(js, "UTF-8"); output.writebytes(response); -14-
3. 정적아키텍처 배포 View ( 안드로이드 ) II. 하이브리드프레임워크아키텍처 안드로이드 PhoneGap 프로젝트는 Android SDK 프로젝트내에하이브리드앱구현을위한 PhoneGap 라이브러리, 웹리소스 (HTML 및자바스크립트 ) 가추가된구조입니다. 1 안드로이드어플형태의 JAVA 소스위치 폰갭어플의경우 phonegap.jar 에있는 DroidGap 클래스로부터상속그리고이 DroidGap 클래스에정의된 loaduri 메서드를통해 html 과같은웹리소스를바인딩 2 index.html 파일과 css, js 파일등의웹리소스위치 컴파일되지않는큰리소스를담는용도 폰갭프로그램의사용자화면에해당하는 html 파일과 Device 기능호출을위한 js 파일등웹리소스위치 3 4 com.phonegap 패키지로묶여있는많은클래스가정의폰갭프로그램구성을위한각종클래스와 Device 고유기능을이용하기위한랩퍼클래스정의 안드로이드의그림, 멀티미디어, 레이아웃, 문자열리소스관리 플러그인을사용하기위해서플러그인의정보를담고있는 XML 리소스를추가 -15-
3. 정적아키텍처 배포 View (ios) II. 하이브리드프레임워크아키텍처 ios PhoneGap 프로젝트는 ios Application 프로젝트내에내에하이브리드앱구현을위한 PhoneGap 라이브러리, 웹리소스 (HTML 및자바스크립트 ) 가추가된구조입니다. 2 1 폰갭프로젝트에서 index.html 파일과 css, js 파일등웹리소스위치 HTML5 와자바스크립트를이용하며해당자원들은런타임시에웹뷰에의해랜더링 사용자화면에해당하는 html 파일과 Device 기능호출을위한 js 파일등웹리소스위치 3 phonegap.framework 라이브러리가포함되며, 프로그램구성을위한각종클래스와 Device 고유기능을이용하기위한인터페이스정의 4 폰갭어플을 ios 어플형태로구성하였을때사용되는아이콘이미지와인트로이미지가위치 5 폰갭플러그인기능을구현할때추가되는클래스들이위치하는곳으로 Pgplugin 클래스를상속받아구현 폰갭어플리케이션의환경설정파일과 main 함수가위치. 프로젝트명 -info.plist : ios 어플리케이션의설정파일에해당 PhoneGap.plist : 폰갭어플리케이션의환경설정을위한파일 -16-
1. Rich Client 패턴 Ⅲ. 하이브리드프레임워크패턴 Rich Client 방식구현의경우에는어플리케이션구현을위한웹리소스가어플리케이션과함께패킹, 빌드되어모바일기기내에존재합니다. Android - assets/www 폴더에웹리소스가존재하며 Activity 클래스에서 loadurl() 메서드는어플리케이션내의리소스를로드하한다. ios Android OS 와마찬가지로 www 폴더아래모든리소스가존재하며 phonegap-x.x.js 파일이외에리소스는 Android OS 용리소스와같은리소스를사용한다. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl("file:///android_asset/www/index.html"); } Android 앱코드이며, loadurl 에파일위치와파일명이기록됨 <Android Client> <ios Client> -17-
2. Thin Client 패턴 Ⅲ. 하이브리드프레임워크패턴 Thin Client 방식구현의경우에는어플리케이션구현을위한웹리소스가리모트서버에위치하게되어클라이언트는단순랩핑역할을수행합니다. Android - assets/www 폴더에웹리소스가존재하지않으며 Activity 클래스에서 loadurl() 메서드를통해서버의리소스를호출한다. ios - www 폴더아래리소스가 index.html 이외에존재하지않으며별도의 URL 을로딩하는메서드가존재하지않으므로 index.html 에서서버페이지를로딩하는역할을수행한다. Android 앱코드이며, loadurl에 public void oncreate(bundle savedinstancestate) { 외부리소스 URL이호출됨 super.oncreate(savedinstancestate); super.loadurl("http://192.168.0.6:8080/realtimenotice_web/mbl/com/rns/gorealtimenoticemsg.mdo");; } <Android Client> <ios Client> -18-
3. 패턴비교 Ⅲ. 하이브리드프레임워크패턴 Rich Client 의경우에는웹리소스의로딩이필요없으므로성능이우수하나, 작은리소스변경에도어플리케이션업데이트가필요하여유연성이떨어집니다. Thin Client Rich Client 공통컴포넌트재사용성 - URL 로드방식을통해기존모바일웹공통컴포넌트에대한별도수정없이하이브리드앱으로의전환이가능 - 기존모바일웹공통컴포넌트에서 JAVA, JSP 기술로구현된부분은순수 HTML5 + Javascript + CSS 로변환이필요함 리소스위치 - HTML, JS, CSS 등의웹리소스자원이서버에위치하며앱실행시에다운받아랜더링처리함 - 모든웹리소스가클라이언트에위치하며 JSON 을이용하여서버와데이터를주고받음 성능 - 웹리소스로딩에시간이소요 - 내장된웹리소스를바로실행가능 유연성 - 서버에위치한리소스변경으로별도의업데이트가필요하지않음 - 작은리소스변경에도어플리케이션에대한업데이트가발생 추가설정사항 - 외부리소스가존재하는외부호스트에대한등록필요 - ios, Android 플랫폼별 phonegap.js 구분필요 - 추가기능구현을위한설정만이요구됨 Apple Appstore 승인가능 X O -19-
4. 구현결과 Ⅲ. 하이브리드프레임워크패턴 안드로이드는실시간공지서비스를 Rich Client 및 Thin Client 방식으로구현하여성능을비교했고, ios 의경우네트워크정보서비스를 Rich Client 형태로구현하였습니다. < 안드로이드 실시간공지서비스 > Rich Client, Thin Client 방식모두구현 <ios 네트워크정보 > Rich Client 방식구현 * 실시간공지서비스의 Rich Client와 Thin Client 성능비료 ( 단위 : 초 ) 방식 #1 #2 #3 #4 #5 #6 #7 Avg. Rich 0.608 0.534 0.634 0.567 0.64 0.505 0.722 0.601 Thin 3.162 2.242 2.316 1.612 2.147 2.159 2.134 2.253-20-
IV. 맺음말 모바일서비스를구현하는방식은네이티브앱, 모바일웹등다양한방법이활용되어왔으며, 두가지방법의장점을활용하는하이브리드앱에대한관심이높아지고있습니다. 하이브리드앱방식은기존웹개발에서활용하는 HTML 및 Javascript 를활용하여 UI/UX 및단말고유기능까지쉽게활용가능하도록지원합니다. PhoneGap 은가장많이활용되고있는하이브리드프레임워크이며, 동기식과비동기식의두가지형태로서비스를제공합니다. 내부적인 API 의호출및활용도웹기반기술인 AJAX 를활용합니다. 하이브리드앱은 Rich Client 와 Thin Client 방식으로구현이가능하며, Rich Client 의경우에는성능이우수하고, Thin Client 의경우에는유연성이우수합니다. < 전자정부표준프레임워크 모바일프레임워크 > 모바일웹기반 UX 실행환경 (2011 년완료 ) 상호작용 UX 인터페이스 UX 디자인 UX 개발환경 모바일웹지원 모바일 Device API 실행환경 (2012 년구축중 ) AJAX 기반 UX 인터페이스 전화기능 스토리지 디바이스기능 유틸리티 단말 SDK 지원 단말 SDK / 단말 OS -21-