[Did you know] 모바일 전략과 웹앱 20130703

2,197 views
1,950 views

Published on

모바일 환경이 다가와서 우리의 개발 환경도 우리가 생활 하는 일상을 변화 하고 있습니다.
앞으로 스마트 단말들이 성장하면서 웹앱의 진화도 빠르게 될 것으로 예측 됩니다.
2년내 Pad 기반의 컴퓨팅 환경이 우리의 대중을 사로 잡지 않을까 하는 예측을 해보며
앞으로 필요한 모바일 서비스의 중요한 부분은 Widget이 되지 않을까 합니다.
..
감사합니다.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,197
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
97
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

[Did you know] 모바일 전략과 웹앱 20130703

  1. 1. 모바일전략과 웹앱 WEB APP 기술 개발실 최두립 COUPLEWITH@INTERPARK.COM
  2. 2. I. 모바일 환경으로본 웹앱의 미래 1.모바일 플랫폼 동향 • 모바일 플랫폼 동향 • 플랫폼의 시대 2.웹 환경의 변화와 미래 • 2013 IT 트랜드와 모바일 • Future is Mobile 2
  3. 3. II. 웹앱 개발 기술과 문제 극복 3.모바일과 HTML5 모바일 환경의 HTML5  웹앱기술의 한계   웹앱 성능 개선 기술 4.웹앱개발 프레임웍   웹앱개발툴 Javascript 프레임웍 5.VM을 활용한 안드로이드 웹개발 3
  4. 4. INTRO MOVIE (1) Did You Know 3.0 Show • Social networking is exploding • Knowledge is exploding • Time to market is evaporating • Computing power is exploding http://tech-clarity.com/future-manufacturing-plm/1368 4
  5. 5. I. 모바일 환경으로본 웹앱의 미래 1.모바일 플랫폼 동향 • 모바일 플랫폼 동향 • 플랫폼의 시대 2.웹 환경의 변화와 미래 • 2013 IT 트랜드와 모바일 • Future is Mobile 5
  6. 6. 모바일 환경의 개념 1.모바일 플랫폼 동향  모바일 장치나 정보 기기를 제어하는 운영체제 (Wikipedia)  모바일 OS ≠ 스마트폰OS, 하지만 동일한 개념으로 이용. * MWC 2013을 통해 바라본 차세대 모바일OS 생태계 전망 2013.03.28 6
  7. 7. 모바일 환경 : 대중화 시대 * MWC 2013을 통해 바라본 차세대 모바일OS 생태계 전망 2013.03.28 1.모바일 플랫폼 동향 7
  8. 8. 모바일 환경 : OS 환경 변화 • 폐쇄적, 라이선스 형태, 불안정성, OS제작사-기기 제조사 간 분리 • 개방적 라이선스 , OS, 개발툴, Store 등 Virtical Platform 생태계 8
  9. 9. 모바일 환경 : OS 현황 1.모바일 플랫폼 동향 [영국의 '아이크로싱(iCrossing)] http://connect.icrossing.co.uk/2013-mobile-market-share-infographic_10062 9
  10. 10. 모바일 환경 : 2015 ? 1.모바일 플랫폼 동향 Android, iOS, Windows (80.6%) Market Share Predicted 2011 Predicted 2015 Android 39.5% 45.4% iOS 15.7% 15.3% Windows Phone 5.5% 20.9% BlackBerry 14.9% 13.7% Symbian 20.9% 0.2% Others 3.5% 4.6% 10
  11. 11. 모바일 플랫폼 1.모바일 플랫폼 동향 Platform ! H/W OS (s/w) service 융합 11
  12. 12. 모바일 플랫폼 1.모바일 플랫폼 동향 Android iOS WebOs Windows Phone Tizen 주도기업 Google Apple LGE MicroSoft Samsung 시장 점유율 75.0% 17.3% <0.1% 3.2% 최종버전 4.2.2 6.1.3 2.2.4 8 운영체제 Linux Darwin Linux Window s 8 Linux 라이선스 Open Source Closed Source Open Source Closed Source Open Source WebBrowser Engine WebKit WebKit WebKit Trident WebKit2 패키지관리 APK iTunes App Catalog Zune Software 개발언어 C++,java C, C++, Objective-C C C#, VB.NET, Silverlight, native C/C++, Html5, c,c++ SDK/ IDE Android SDK Eclipse iOS SDK Xcode WP 8 SDK Visual Studio Tizen-SDK Tizen IDE 개발자 수수료 $25 (Google Play ) $99/year http://en.wikipedia.org/wiki/List_of_mobile_software_distribution_platforms (2013.6) $99/year (100 free apps) 12
  13. 13. 2013 새로운 플랫폼의 개막  Ubunto Touch (2013.2) 1.모바일 플랫폼 동향 Tizen (2013.5, v2.1) • Ubuntu TV, Ubuntu for Android • C, C++, QML, HTML5 • Orange, NTT DoCoMo, Samsung, Huawei ,Intel • HTML5 /W3C, Tizen Web APIs WebApp  Firefox OS (2013.2, v1.0) • • • • Chinese ZTE, LGE, Huawei ,TCL Boot to Gecko HTML5 JavaScript ,open web APIs  WebOS(2012.1, v3.0.5) • LGE, HP • HTML5, C, C++ 13
  14. 14. 모바일 플랫폼 1.모바일 플랫폼 동향 Platform 시대 H/W OS (s/w) service 융합 14
  15. 15. IT 산업의 변화 : 융합,결합,연결 1.모바일 플랫폼 동향 15
  16. 16. IT 산업의 변화 :지식(K),가치 (V)1.모바일 플랫폼 동향 플랫폼 지식화 정보화 인프라 16
  17. 17. I. 모바일 환경으로본 웹앱의 미래 1.모바일 플랫폼 동향 • 모바일 플랫폼 동향 • 플랫폼의 시대 2.웹 환경의 변화와 미래 • 2013 IT 트랜드와 모바일 • Future is Mobile 17
  18. 18. 18
  19. 19. 2013 IT 전략 기술 전망 2.웹 환경의 변화와 미래 • Tizen • Web-app in desktop • IoT ( internet of thngs ) M2M : Machine 2 Machine • BODY Bring on your device 스마트폰과 PC를 병행 • 창조경제 • 비용절감 -> 가치창출 지식 사회, 지식 혁신 (노나카이쿠치로 SECI 모델 (Social,Externalization Combiation,Internalization) • CPNT (Content,Platform , Network, Terminal) 19
  20. 20. 2013 IT 4대 메가 트렌드 http://www.microsoft.com/korea/Press/pressroom/2013/01/02.aspx 2.웹 환경의 변화와 미래 20
  21. 21. 모바일이 미래 ! 2.웹 환경의 변화와 미래 Mobile is Eating the World! • http://www.slideshare.net/bge20/2013-05-bea (Mobile is Eating the World by Benedict Evans, Digital at BookExpo America (BEA) • http://www.globalnerdy.com/2013/06/17/mobile-is-eating-the-world/ 21
  22. 22. 웹 환경의 변화 2.웹 환경의 변화와 미래 Web Browsers Chrome Firefox 36.2% Operating Systems Screen Resolutions 17.71% 1 Windows 7 43.10% 1 1366x768 19.15% 2 Chrome 27 8.45% 2 Windows XP 20.99% 2 1024x768 12.17% 3 Firefox 20 7.43% 3 iOS 9.31% 3 1280x800 8.82% Safari 6.1 6.31% 4 Apple OS X 8.40% 4 1920x1080 6.24% 5 Internet Explorer 8 6.18% 5 Windows Vista 4.73% 5 1280x1024 6.16% 6 Internet Explorer 9 5.71% 6 Android 4.52% 6 1440x900 5.35% 7 Firefox 21 5.60% 7 Windows 8 4.26% 7 768x1024 4.68% 8 Internet Explorer 7 4.72% 8 Linux 2.73% 8 1600x900 3.85% 9 IE 7.8.9 16.6% Chrome 26 4 2013.5 1 Internet Explorer10 4.40% 9 BlackBerry 0.59% 9 320x480 3.48% 3.42% 10 Windows 2003 0.25% 10 1680x1050 2.96% 10 Safari 6 Operating Systems Web Browsers Screen Resolutions Internet Explorer 7 32.02% 1 Windows XP 74.32% 1 1024x768 40.15% 2 Internet Explorer 6 27.55% 2 Windows Vista 14.21% 2 1280x800 16.54% Firefox 3 15.11% 3 Apple OS X 5.35% 3 1280x1024 15.10% 4 Firefox 2 14.55% 4 Windows 2000 2.16% 4 1440x900 6.49% 5 Firefox 1.5 1.92% 5 Linux 2.13% 5 800x600 5.18% 6 Safari 3.1 1.18% 6 Windows 2003 0.71% 6 1680x1050 4.61% 7 Safari 3 0.81% 7 Windows 98 0.56% 7 1152x864 3.24% 8 Opera 9.2 0.69% 8 Windows ME 0.23% 8 1920x1200 1.45% 9 Mozilla 1.9 0.58% 9 SymbianOS 0.13% 9 1280x768 1.43% 10 2008.5 1 3 IE 6.7 59.5% Safari 2 0.51% 10 Unknown Mac 0.05% 10 1280x960 1.09% http://www.w3counter.com/globalstats.php (2013.5) 22
  23. 23. 웹 환경의 변화 2.웹 환경의 변화와 미래 HTML5 환경 = 51.5% 2013.5 2008.5 HTML5= 0% http://www.w3counter.com/globalstats.php (2013.5) 23
  24. 24. 웹 VS 모바일 : 시장 동향 2.웹 환경의 변화와 미래 1.86billion phones and 53% of them will be smartphones. in 2013. CCS Insight predicts. http://www.globalnerdy.com/2013/06/17/mobile-is-eating-the-world/#sthash.M6AoyOLp.dpuf 24
  25. 25. 웹 VS 모바일 : 시장 동향 2.웹 환경의 변화와 미래 1 in 3 American adults owns a tablet (2012.12) • • Adults ages 35-44 (49%) /College graduates (49%) 3% of adults said they owned a tablet (2010.5) http://pewinternet.org/Reports/2013/Tablet-Ownership-2013/Findings.aspx 25
  26. 26. 웹 VS 모바일 : 시장 동향 2.웹 환경의 변화와 미래 The Future is Mobile http://pewinternet.org/Reports/2013/Tablet-Ownership-2013/Findings.aspx 26
  27. 27. 모바일의 개념 변화 2.웹 환경의 변화와 미래 The Future is Mobile Mobility Mobile App Tablet PC Smart phone Web Tv Etc. WEB + APP 27
  28. 28. 모바일의 개념 변화 The Future is Mobile APP WEB Widget 28
  29. 29. 2부 29
  30. 30. II. 웹앱 개발 기술과 문제 극복 3.모바일과 HTML5 모바일 환경의 HTML5    웹앱기술의 한계 웹앱 성능 개선 기술 4.웹앱개발 프레임웍  웹앱개발툴  Javascript 프레임웍 5.VM을 활용한 안드로이드 웹개발 30
  31. 31. WHY MOBILE ! Mobile 개발 개발 요소 성능 문제 31
  32. 32. 모바일 환경의 HTML5 32
  33. 33. WEBAPP 알아야 할 것 … 화면사이즈 Touch Mobile Network Device UDID/UUID 모바일 {-.-};; javascript CSS3 HTML5 Webkit Media-query N-Screen Device-API Viewport http://www.w3c.or.kr/~hollobit/MWAC/10/mwac10-5.pdf Cache 33
  34. 34. 모바일 핵심 WEBKIT WebKit WebKit2 Process model Single Process Multi Process API type Blocking API Non-blocking API http://download.tizen.org/misc/media/conference2012/wednesday/ballroom-c/2012-05-09-1100-1140-webkit-efl_and_webkit2-efl.pdf 34
  35. 35. W3C HTML5 요소 ITEMS  XHR, XHR 2.0  Web IDL  HTML5  ( XMLHttpRequest ) Widget 1.0  Requirements, P&C, Digital Sig., APIs & Events, Access Request Policy,  CSS3  Select Level3, Media Query  Web Application API  Web Storage, Web Database, Web Workers, Web Sockets API, Server-Sent Events, Offline Web Applications  Geolocation API  Device APIs and Policy  DOM Level 3 35
  36. 36. HTML5 기술 요소 Desktop Canvas open-GL SVG Frame Work Mobile Device OfflineWeb 브 라 우 저 XHR (Ajax) WebStorage WebSocket WebDatabase Native API GPS Network WAC API Video/Audio http://specs.wacapps.net/ WAC Specifications 2.1 참조 Camera OPEN API Touch. Storage 36
  37. 37. 모바일 개발에 필요한 것? 37
  38. 38. APP개발 환경 이해 Native Hybrid Hybrid Server Part Node,java,php, python Device Part C,java,objectC, html5,javascript 38
  39. 39. WEBAPP의 요구 사항(1)  모바일 브라우저에서 동작  Native 수준의 GUI/UX 지원  Native 수준의 성능  단말 내부 접근 (Hardware Interface API 지원)  개발 소스 재활용  Cross platform (Android, iOS, BlackBerry 등)  Multi Device ( N-screens ) 39
  40. 40. WEBAPP의 요구 사항(2)  Open Source Archtecture 고려 사항  Community 활성화  안정성 , 라이선스  H/W , S/W 지원 범위 개발 용이성 UI Framework Native Api (device) 40
  41. 41. WEBAPP 개발 요구 역량 41
  42. 42. APP 종류와 개발 전략 비용 느림 비종속적 온라인 개발쉬움 단말접근불가 시간 내부 자원 역량 목표시장 기능성 빠름 플랫폼종속적 오프라인 Native API Cost & updates 42
  43. 43. WEBAPP은 문제가 ~~! 43
  44. 44. WEBAPP기술 한계 극복 • Dom Fragment • Offline-Web 기술 • jQuery Overhead 성능 • Cache (manifest) • Local Storage • Canvas & SVG • Touch Handling UX • CSS transition • Rendring • More UI experience !! 44
  45. 45. WEB기술 한계 Web pages are getting bigger, year after year. ( page contains 98 page objects, a 13% increase from last year. In 1995, the average page contained just 2.3 objects.) http://www.strangeloopnetworks.com/blog/free-report-2012-state-of-the-union-on-e-commerce-page-speed-and-websiteperformance/ 45
  46. 46. WEB LOADING TIME(1) 서버 사용자 병목 구간 https://newrelic.com/docs/features/how-does-real-user-monitoringwork 46
  47. 47. WEB LOADING TIME(2) Design for High Latency Rule 1. Avoid landing page redirects 1 Redirect (Round trip)) 2. Minimize server processing time 3. Eliminate render blocking resources 4. Prioritize visible content 2 3 4 http://commondatastorage.googleapis.com/io-2013/presentations/239-%20Instant%20Mobile%20Websites%20Techniques%20and%20Best%20Practices.pdf 47
  48. 48. WEBAPP 성능 개선 기술 DOM Fragment Offline Web 48
  49. 49. DOM FRAGMENT for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item); DOM노드 반복부하 } var fragment = document.createDocumentFragment(); for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); fragment.appendChild(item); DOM노드 영향 감소 } list.appendChild(fragment); http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ 49
  50. 50. OFFLINE-WEB WebSQL Web Storage Cache Offline 성능 MVC http://dev.opera.com/articles/view/taking-your-web-apps-offline-web-storage-appcache-websql/ 50
  51. 51. WEB STORAGE (1) localStorage no expiration date sessionStorage deleted when the browser closed • secure and faster • store large amounts of data(5~10MB) • getItem(key) • setItem(key, value) • removeItem(key) • clear() 목록 페이지 Storage Item list • Performance • stored in key/value pairs Item detail http://www.w3.org/TR/2011/WD-html5-20110525/offline.html http://www.w3schools.com/html/html5_webstorage.asp (기시판,이메일,일정,글쓰기 임시저장등) 51
  52. 52. WEB STORAGE (2) // Store value on browser for duration of the session sessionStorage.setItem('key', 'value'); // Retrieve value (gets deleted when browser is closed and re-opened) sessionStorage.setItem alert(sessionStorage.getItem('key')); localStorage.setItem // Store an object using JSON localStorage.setItem('key', JSON.stringify({name: 'value'})); alert(JSON.parse(localStorage.getItem('key')).name); // value <textarea id="draft" rows="10" cols="30"></textarea> function saveMessage(){ var message = document.getElementById("draft"); localStorage.setItem("message", message.value) } http://dev.opera.com/articles/view/web-storage/ http://en.wikipedia.org/wiki/Web_storage 글쓰기 임시저장 52
  53. 53. WEB STORAGE (3) 주의 사항 설명 Storage per origin origin : scheme/host/port The same origin will share the same storage space ( http://example.org/bb, http://example.org:8080/aa ) Storage limit storage limit at 5 Mb per domain Security considerations and associated best practices DNS spoofing attacks Where not to use it different users are using different pathnames on a single domain Web Storage is not part of the http://www.w3.org/TR/webstorage/ HTML5 spec persistent data storage of key-value pair data in Web clients http://dev.opera.com/articles/view/web-storage/ 53
  54. 54. WEB CACHE (1) • 페이지별 설정 • 웹서버 MIME 설정 AddType text/cache-manifest <!DOCTYPE HTML> <html manifest=“offlache.manifest"> ... </html> CACHE MANIFEST # rev 13.6.12.11 CACHE: /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.htm CACHE MANIFEST .manifest 지시자 # rev N 캐시 버전 > 서버 변경시 웹사용 CACHE: 캐시할 파일 목록 NETWORK: 항상 캐시 하지 않을 파일 FALLBACK: 온라인 연결 불가시 대체 파일 http://www.w3.org/TR/2011/WD-html5-20110525/offline.html 54
  55. 55. WEB CACHE (2) http://grinninggecko.com/developing-cross-platform-html5-offline-app-1/ 55
  56. 56. 기타 WEB STORAGE 기술 lostorage.js localStorage API https://github.com/jscoder/lostorage.js store.js cross browser local storage https://github.com/marcuswe stin/store.js lawnchair simple json storage http://brian.io/lawnchair/ 56
  57. 57. II. 웹앱 개발 기술과 문제 극복 3.모바일과 HTML5 모바일 환경의 HTML5    웹앱기술의 한계 웹앱 성능 개선 기술 4.웹앱개발 프레임웍  웹앱개발툴  Javascript 프레임웍 5.VM을 활용한 안드로이드 웹개발 57
  58. 58. 웹앱 개발 툴 58
  59. 59. HYBRID MOBILE APP FRAMEWORKS  개발툴 Name Cordova / Apache (PhoneGap) Titanium Appcelerator Worklight IBM License Proprietary Proprietary Native Hybrid iOS, Android, blackberry... ADF Mobile FrameProprietary work / Oracle KonyOne Appresso - Open Hybrid App iOS, Android http://en.wikipedia.org/wiki/HTML5_in_mobile_devices#Hybrid_Mobile_Apps (2013.6) http://download.oracle.com/otn_hosted_doc/jdeveloper/11gdemos/ADF112/ADF112.html Website 2.5.0 http://cordova.apac he.org/ 3.0.2 http://www.appcele rator.com/platform/ titanium-sdk 5 http://www-01.ibm. com/software/mobi le-solutions/worklig ht/ Oracle Application Development Fram e-work 5.0 Hybrid & native App Open Latest Version 11.1.1.6 지원 환경 http://www.kony.co m/technology/deve lop/studio http://appspresso.c om/ko/ 59
  60. 60. Cross Platform [각 플랫폼 웹엔진 환경] HTML5, CSS, JS로 앱개발 Web Standards [프레임웍] Apple iOS / Android / Hybrid App WAC API [Waikiki API] WAC의 표준 device API 규격 지원 카메라, 주소록, 중력센서, 단말 상태,파일 시스템 접근 Studio [통합 개발 환경] iOS와 Android 앱을 빌드 "on the fly building" 로 재컴파일 없이 디버깅 Plug - In [ PDK(Plug-inDevelopment Kit) 포함 ] 네이티브 언어로 사용자 정의 함수 작성 JavaScript API로 노출 http://appspresso.com/ko/ 60
  61. 61. PHONEGAP (1) http://coenraets.org/slides/MAX2013_Architecting_Phonegap_Apps.pdf 61
  62. 62. PHONEGAP (2) • 아파치 오픈 소스 프로젝트 편입 http://cordova.apache.org device API 개발 Apache Project Javascrip 만으로 Native Code 없이 Device 접근 참고 : http://docs.phonegap.com 소스 : http://www.phonegapessentials.com/content/chapter-source-code.html https://build.phonegap.com/ 62
  63. 63. PHONEGAP (3) : 호환성 http://phonegap.com/about/feature/ 63
  64. 64. IBM WORKLIGHT  HTML5, 하이브리드 및 네이티브 애플리케이션 개발  애플리케이션 라이프사이클 지원 (백엔드 통합 및 인증을 통해 개발에서부터 사후 배포등 )  IBM Worklight Studio 및 IBM Worklight SDK는 iOS, 안드로이드, 블렉베리 및 윈도우폰등 ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdf http://public.dhe.ibm.com/software/kr/worklight_v5.pdf 64
  65. 65. 구분 기능 세부 내용 App Dev Center Build html & PhoneGap apps in HTML5 the cloud PhoneGap apps Intel® XDK Cross platform development kit Andriod, iOs, kindle, html5 Apps App Framework Library for HTML5 App UI 라이브러리 jQuery 호환 프레임웍 App Game Interfaces HTML5 기반 캔버스,음향,물리 App Starter quick-start wizard generate the App Framework 템플릿,화면 레이아웃 사용자 정의 해더,푸터 http://xdk-software.intel.com/ 65
  66. 66. 게임개발 통합개발환경 웹앱개발환경 https://appcenter.html5tools-software.intel.com 66
  67. 67. JAVASCRIPT FRAMEWORK PATTERNS (UI / MVC / 기타.) 67
  68. 68. W3C DEVICE-API 예시 • Messaging Javascript example sendMessage() onSMS() http://specs.wacapps.net/messaging/index.html#introduction 68
  69. 69. SINGLE PAGE ARCH.(SPA) 장점 • Fast • Works offline • Control over experience 단점 • More Complex • Memory management • Modular Strategy 69
  70. 70. http://net.tutsplus.com/articles/web-roundups/20-javascript-frameworks-worth-checking-out/ 70
  71. 71. ZEPTO.JS  jQuery-compatible API  페이지 경량화 라이브러리 <ul id=items> <li>List item 1 <li>List item 2 <li>List item 3 <li>List item 4 </ul> Jquery 호환 <script> document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js></script>') </script> <span <span <span <span class=delete>DELETE</span></li> class=delete>DELETE</span></li> class=delete>DELETE</span></li> class=delete>DELETE</span></li> <script> $('#items li').swipe(function(){ $('.delete').hide() $('.delete', this).show() }) Touch Event처리 $('.delete').tap(function(){ $(this).parent('li').remove() }) </script> https://github.com/madrobby/zepto/blob/master/examples/touch_events.html http://zeptojs.com/ 71
  72. 72. SOCKET.IO  크로스 브라우저 환경 대안 (CSRF : 보안 문제)  MIT 라이센스를 가진 오픈소스 / Guillermo Rauch  Node.js 모듈 : Socket.io / Web 표준 기술 : Web Socket  WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling등 통합한 API  브라우저와 웹 서버의 종류와 버전에 따라 구동  브라우저에 Flash Plugin v10.0.0 이상(FlashSocket 지원 버전) 설치시 FlashSocket을 사용  Flash Plugin이 없으면 AJAX Long Polling 방식사용 HTTP Node.Js Server io = require('socket.io').listen(3333); https://github.com/learnboost/socket.io/ http://helloworld.naver.com/helloworld/1336 Client Socket socket.ioclient.js app_socket = io.connect('http://host:3333'); 72
  73. 73. MOBILE UI FRAMEWORK 구분 라이선스 jQtouch Open Sencha Touch free commercial GPLv3 특징 지원분야 Easy Setup, Native WebKit Animations Image Preloading, Callback Events · Native UI & Themes, Swipe Detection iPhone, Android, iPod Touch High-performance HTML5 MVC, Chart, Sencha Cmd iOS, Android, BlackBerry, Kindle Fire Smartphone Tablets Desktops M-Project MIT Game , MVC Offline, local storage, positioning, touch optimized UI jQuery Mobile Open Native UI, Touch Optimized Web, ThemeRoller , Codiqa (UI prototype) smartphone tablets Mobilo.js Open Native UI, MVC, Easy-to-use , Mobello Studio : Layout Edit, Debug smartphone tablets JO Open MVC, GUI and light Data layer PhoneGap Mobile, Desktop Browser & App 73
  74. 74.  Sencha Touch • Sencha Architect Build for Mobile and Desktop • Sencha Ext JS JavaScript Framework for Rich Desktop Apps • Sencha GXT Application Framework for Google Web Toolkit • Sencha Architect • Sencha Touch • Eclipse Plugin for Sencha Touch • Sencha Touch Charts • Sencha Mobile Packaging • Sencha Support Package 74
  75. 75.  온라인 UI 개발 / 테스팅 UI Build Testing Source http://codiqa.com/ 75
  76. 76. HTML5 & CSS3  MVC  Content Binding MVC Architecture Multi-device support  Dynamic Value Computing  Event Handling Stable Environment jQuery, jQ mobile Native packaging (ipa/apk) JavaScript date object Espresso - Node based build tool and optimizer http://www.the-m-project.org/ 76
  77. 77. • MVC Class • DOM 조작 & 이벤트 • Client-side storage ( Nitobi, LawnChair) store JSON objects • joDoc easy-to-read and easy-to-write PhoneGap (GUI) MyClass = function(x) { // constructor this.x = x; }; MyClass.prototype = { mymethod: function() { // some method }, myothermethod: function() { // another method } }; var x = new myClass(name); http://joapp.com/docs/ 77
  78. 78. JAVASCRIPT PATTERN  Observer Pattern // inside the Subject, we setup an event observers can subscribe to publisher this.changeEvent = new joSubject(this); // to fire the event inside the Subject this.changeEvent.fire(somedata); Event Driven // simple case, using Function.bind() somesubject.changeEvent.subscribe(this.mymethod.bind()); Subscriber // explicit context (this) somesubject.changeEvent.subscribe(this.mymethod, this); // optional data which gets passed with the event fires somesubject.changeEvent.subscribe(this.mymethod, this, "hello"); http://joapp.com/docs/#joSubject 78
  79. 79. II. 웹앱 개발 기술과 문제 극복 3.모바일과 HTML5 모바일 환경의 HTML5    웹앱기술의 한계 웹앱 성능 개선 기술 4.웹앱개발 프레임웍  웹앱개발툴  Javascript 프레임웍 5.VM을 활용한 안드로이드 웹개발 79
  80. 80. VM을 활용한 안드로이드 웹개발 80
  81. 81. WEBAPP 개발 환경 Appresso Phone-Gap Eclipseplugin Device OTG eclipse Android SDK APIs Platform tools SDK Tools Android platform APIs, document. sample DDMS Dalvik Debug Monitor Server (DDMS) developing and debugging Device-VM Android Virtual Device (AVD) your application debugging and testing 81
  82. 82. 안드로이드 아키텍처 어플리케이션/프레임웍 - 프로그램/개발프레임 웍 Media server - 미디어 플레이 - 레코딩 관련 서비스 IPC ( inter process communication) - 프로세스간 커뮤니케 이션(siginal, file,message,pipe,me mory etc.) System server - 윈도우, 노티 관리 메니저 관련 Hardware abstrace layer(HAL) - 하드웨어 인터페이스 - 드라이버 Linux 2.6 kenel - Low-level device driver 82
  83. 83. VIRTUAL BOX http://source.android.com 가상이미지 다운로드 http://androvm.org/blog/download/ 83
  84. 84. VM-설정 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging https://www.virtualbox.org/ VirtualBox 설치 84
  85. 85. VM-설정 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging Android 가상 시스템 가져오기 85
  86. 86. VM-설정 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging Android 가상 시스템 설정 86
  87. 87. VM-설정 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging 가상 머신 구동 87
  88. 88. VM-설정 1. VirtualBox 2. Android Image 호스트 전용 3. Network NAT 4. adb Coonect 내부네트웍 5. Debuging 일반드라이버 브릿지 가상 네트웍 설정 가상 머신 PC 88
  89. 89. VM-설정 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging Android – 디버거 연결 adb connect 192.168.56.101 adb connect 10.20.4.33 89
  90. 90. SDK에서 DEBUGING(1) 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging  환경 구성 : SDK 프로젝트와 단말간의 디버그 연결 SDK – 프로젝트 디버깅 90
  91. 91. SDK에서 DEBUGING(2) 1. VirtualBox 2. Android Image 3. Network 4. adb Coonect 5. Debuging  환경구성 : 프로젝트 디버깅 설정 SDK – 프로젝트 디버깅 환경 설정 • • Google on the fly 기능 사용 가능 브라우저 로 실시간 테스팅 91
  92. 92. 에스프레소 프로젝트 • 프로젝트 생성 GUI 기반 프로젝트 개발 프레임웍 샘플 92
  93. 93. 에스프레소 : PLUG-IN 설정 • 프로젝트 환경 파일 확장 API Native Device API 93
  94. 94. 에스프레소 : 환경파일 • 프로젝트 컴파일 설정 <?xml version="1.0" encoding="UTF-8"?> <project name="com.couple.with.todo" default="build" basedir="."> <description>Appspresso Build Script</description> <property file="build.properties" /> <import file="${ax.sdk.dir}/build-app.xml" /> </project> • 프로젝트 컴파일 속성 # build properties for app build app.id=com.couple.with.todo app.version=1.0.0 ax.sdk.dir=D:/AppData/Appspresso1.1.2/plugins/com.appspresso.cli_1.0.0.201207271616/axhome 94
  95. 95. 에스프레소 > JO JO 프레임웍 테마 95
  96. 96. 에스프레소 : INDEX.HTML <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=devicewidth"> <meta name="format-detection" content="false"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> JO 프레임웍 샘플 96
  97. 97. 에스프레소 > JQ.TOUCH JQ.Touch 프레임웍 97
  98. 98. SUMMARY Tablet 모바일 미래 플랫폼 동향 Widget JavaScript Html5 성능 프레임웍 앱개발 툴 웹앱 개발 98
  99. 99. AS 감사합니다. 99

×