HTML5 & Hybrid App     Trends           2012.11      Inswave Systems   김욱래 (wlkim@inswave.com)
목차• Mobile Trends• HTML5 & Hybrid App• Solution• About Inswave
Mobile Trends
가트너, 2013년 10대 전략 기술 트렌드•   Mobile Device Battles   •   Hybrid IT and Cloud                                Computing•   Mo...
숫자로 보는 모바일             http://smarterplanet.co.kr/2012/11/06/mobile/
2016년 모바일 시장 전망              http://smarterplanet.co.kr/2012/11/06/mobile/
2015년 사용 예상 기기        Televisions     83.5%      Connected Cars    74.0%      Game Consoles     71.2%      Foldable Screen...
스마트폰 + 태블릿 vs PC          Desktop PCs          Notebook PCs        Smartphones                          Tablets3,000 M    ...
모바일 웹 트래픽 점유율  http://royal.pingdom.com/2012/05/08/mobile-web-traffic-asia-tripled/ , http://gs.statcounter.com/#mobile_vs_...
iOS vs Android   스마트폰 시장 점유율                                             태블릿 시장 점유율  29%        10%                       ...
모바일 기기별 웹 트래픽 점유율                       Galaxy    iPhone              17%      46%                Others                 3...
브라우저 점유율                Worldwide                                                                      Korea100           ...
Windows 8/RT• 두가지 UX (클래식, 메 트로)• 두가지 H/W (X86, ARM)• 낮은 성능의 태블릿       브 라우저 (FutureMark Score :348 )• ActiveX 미지원 (메트 로, ...
Summary• 모바일 빅 트랜드는 이제 시작 단계• 모바일 기기의 중심이 iOS에서 Android로 이 동 (태블릿 포함)• 윈도우 8/RT는 아직 판단하기 이름
HTML 5 & Hybrid App
HTML5        http://www.w3.org/html/logo/
HTML5 로드맵• HTML5 Recommendation in Q4, 2014• HTML5.1 Recommendation in Q4, 2016• Modularity                             ht...
= HTML + CSS + JS                    http://en.wikipedia.org/wiki/HTML5
HTML5 - The Technology HTML5             Offline & Storage   Device Access   ConnectivitySemantics               3D, Graphi...
97 Sessions- Speakers -Google, Microsoft, Mozilla,Yahoo!, Facebook, Twitter,LinkedIn,Yammer, Adobe,Intel,YouTube, Airbnb, ...
From HTML5 DevConf• SPA (Single Page  web Application)• SASS• Canvas• Pointer Event• JavaScript
From HTML5 DevConfJavaScript• No more speed issue• Server Side• CoffeeScript, Dart,   TypeScript• Modular• Yoeman
브라우저 별 HTML5 지원 수준                       DESKTOP                                              MOBILE500      434400       ...
HTML5 적용 전략• Lowest common denominator• Vertical slices• Using Polyfills - Modernizr• Using fallbacks strategies           ...
HTML5에 대한 만족도1. Monetization (83.4%)    1. Cross-development                              capabilities (83.4%)2. Security ...
모바일 브라우저 속도     Galaxy S2        255Galaxy Tab 10.1              356     iPhone 4S                     438     Galaxy S3  ...
모바일 브라우저 속도                  vs PC 브라우저 속도           IE 6       171     Galaxy S2         255Galaxy Tab 10.1             3...
반응형 웹 디자인    • One website for every               screen    • 화면크기, 플랫폼 및 방향               에 반응하는 웹 디자인    • 구성요소        ...
기업이 지원해야 할 모바일 OS의 개수                                            39% 멀티 플랫폼 요건 : 50%              25%       15%           ...
웹앱 vs 하이브리드앱 vs 네이티브앱                       하이브리드앱기능성                     - 개발용이                        - 멀티플랫폼           ...
하이브리드앱• Native App + Web Based UI• Multi Device Mobile OS (iOS, Android, Window Phone, …)                       Hybrid App...
Hybrid App vs MEAP500400300200100  0 2010-05   2010-09       2011-01             2011-05             2011-09             2...
하이브리드앱 플랫폼 비교500400300200100  0 2008-01     2009-01     2010-01                   2011-01                  2012-01        ...
멀티플랫폼 지원전략 - Facebook• HTML5 포기 (?) -   Tooling / Developer     APIs -   Scrolling performance -   GPU/CSS3• Android, iOS ...
멀티플랫폼 지원전략 - LinkedIn• Hybrid App• 10+ OS Support30%     80%      100%     100%70%        20%                MobileiOS   A...
멀티플랫폼 지원전략 - Netflix• N-Screen• Over 400 devices• WebKit+HTML                     http://techblog.netflix.com/2011/09/netflix...
기업용 모바일 개발 플랫폼에 대한 요구사항 • 멀티플랫폼 지원 • 모바일에 적합한 UI 컴포넌트 지원 • 개발 생산성 • 손쉬운 앱 수정 및 반영 • 네이티브 기능 지원
Solution
웹스퀘어 구성                          웹스퀘어 하이브리드             웹스퀘어                         하이브리드          모바일         데스트탑      ...
웹스퀘어 하이브리드모바일 특화 기능   • 모바일 전용 컴포넌트                                      모바일            • 4GL과 유사한 개발환경          컴포넌트개발 생산...
웹스퀘어 하이브리드 아키텍처
패키지 탐색기               통합 개발 환경          메뉴          작업 공간    속성                              객체 구조  컴포넌트          스타일
모바일 전용 컴포넌트스크롤뷰      • 모바일 웹 내부 스크롤 지원          • CSS3D 지원          • 애니메이션 및 효과 지원드래그앤드롭    • PC 및 모바일에서 동작하는 드래그앤드롭 지원  ...
인앱업데이트인앱업데이트(In app update)는 앱스토어나 마켓을 통하지 않고앱 내에서 직접 업데이트 할 파일을 내려 받아 갱신하는 기능응용프로그램                               유지보수 작업...
기대효과일반적인 하이브리드 앱의 기대효과          웹스퀘어 하이브리드 앱의 기대효과                                               개발자 부담 감소                ...
주요실적태블릿 영업지원 시스템    태블릿 영업지원 시스템                     스마트폰 보상모바일 시   현장영업가족을 위한 태     LIG손해보험 신사업 구                        ...
About Inswave
“                                                                                                 ”웹 표준 기술 기반의 RIA 플랫폼 선도 ...
Thank you!http://www.inswave.com      02-2082-1400
Upcoming SlideShare
Loading in...5
×

HTML5 & Hybrid App Trends

1,636

Published on

HTML5와 Hybrid App의 기술동향에 대한 세미나 자료입니다.

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,636
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 & Hybrid App Trends"

  1. 1. HTML5 & Hybrid App Trends 2012.11 Inswave Systems 김욱래 (wlkim@inswave.com)
  2. 2. 목차• Mobile Trends• HTML5 & Hybrid App• Solution• About Inswave
  3. 3. Mobile Trends
  4. 4. 가트너, 2013년 10대 전략 기술 트렌드• Mobile Device Battles • Hybrid IT and Cloud Computing• Mobile Applications and HTML5 • Strategic Big Data• Personal Cloud • Actionable Analytics• Enterprise App Stores • In Memory Computing• The Internet of Things • Integrated Ecosystems http://www.gartner.com/it/page.jsp?id=2209615
  5. 5. 숫자로 보는 모바일 http://smarterplanet.co.kr/2012/11/06/mobile/
  6. 6. 2016년 모바일 시장 전망 http://smarterplanet.co.kr/2012/11/06/mobile/
  7. 7. 2015년 사용 예상 기기 Televisions 83.5% Connected Cars 74.0% Game Consoles 71.2% Foldable Screen 68.1% Google Glass 67.1%
  8. 8. 스마트폰 + 태블릿 vs PC Desktop PCs Notebook PCs Smartphones Tablets3,000 M Smartphone + Tablet > PC2,000 M1,000 M 0M 2009 2010 2011 2012E 2013E 2014E 2015E KPCB, http://techcrunch.com/2012/11/05/mary-meeker-internet-trends/
  9. 9. 모바일 웹 트래픽 점유율 http://royal.pingdom.com/2012/05/08/mobile-web-traffic-asia-tripled/ , http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200909-201211
  10. 10. iOS vs Android 스마트폰 시장 점유율 태블릿 시장 점유율 29% 10% 30% 14% 75% 9% 9% 58% 4% 7% 18% 60% 50% 14% 15%2011 3Q 2012 3Q 2011 3Q 2012 3Q Apple Samsung iOS Android Amazon Asus Others Others http://www.idc.com/getdoc.jsp?containerId=prUS23771812 , http://www.idc.com/getdoc.jsp?containerId=prUS23772412
  11. 11. 모바일 기기별 웹 트래픽 점유율 Galaxy iPhone 17% 46% Others 37% http://venturebeat.com/2012/10/17/android-smartphones-now-have-majority-mobile-web-traffic-share/
  12. 12. 브라우저 점유율 Worldwide Korea100 100 80 80 60 60 40 40 20 20 0 2008-07 2009-07 2010-07 2011-07 2012-07 2010-01 2010-09 2011-05 2012-01 2012-09 IE Firefox Chrome Safari Opera Other http://gs.statcounter.com/#browser-ww-monthly-200807-201211, http://gs.statcounter.com/#browser-KR-monthly-201001-201209
  13. 13. Windows 8/RT• 두가지 UX (클래식, 메 트로)• 두가지 H/W (X86, ARM)• 낮은 성능의 태블릿 브 라우저 (FutureMark Score :348 )• ActiveX 미지원 (메트 로, ARM) http://www.macworld.co.uk/apple-business/news/?newsid=3409089&olo=rss
  14. 14. Summary• 모바일 빅 트랜드는 이제 시작 단계• 모바일 기기의 중심이 iOS에서 Android로 이 동 (태블릿 포함)• 윈도우 8/RT는 아직 판단하기 이름
  15. 15. HTML 5 & Hybrid App
  16. 16. HTML5 http://www.w3.org/html/logo/
  17. 17. HTML5 로드맵• HTML5 Recommendation in Q4, 2014• HTML5.1 Recommendation in Q4, 2016• Modularity http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  18. 18. = HTML + CSS + JS http://en.wikipedia.org/wiki/HTML5
  19. 19. HTML5 - The Technology HTML5 Offline & Storage Device Access ConnectivitySemantics 3D, Graphics, Performance &Multimedia CSS3 Styling Effects Integration http://www.w3.org/html/logo/
  20. 20. 97 Sessions- Speakers -Google, Microsoft, Mozilla,Yahoo!, Facebook, Twitter,LinkedIn,Yammer, Adobe,Intel,YouTube, Airbnb, Disqus,Groupon, Github, Zendesk,Palm, Enyo, Disney, PayPal,Pinterest, EventBrite, ......
  21. 21. From HTML5 DevConf• SPA (Single Page web Application)• SASS• Canvas• Pointer Event• JavaScript
  22. 22. From HTML5 DevConfJavaScript• No more speed issue• Server Side• CoffeeScript, Dart, TypeScript• Modular• Yoeman
  23. 23. 브라우저 별 HTML5 지원 수준 DESKTOP MOBILE500 434400 389 378 390 388 386 372 320 320 297300200 138100 42 0 Chrome Opera Safari Firefox IE 10 IE 9 IE 8 Chrome Mobile Firefox iOS 6.0 Phone 8 Windows Android http://html5test.com/results/desktop.html
  24. 24. HTML5 적용 전략• Lowest common denominator• Vertical slices• Using Polyfills - Modernizr• Using fallbacks strategies http://www.codeproject.com/Articles/249438/HTML5-Adoption-Strategies
  25. 25. HTML5에 대한 만족도1. Monetization (83.4%) 1. Cross-development capabilities (83.4%)2. Security (81.8%) 2. Immediate updates (81.3%)3. Fragmentation (75.4%)4. Performance (72.4%)
  26. 26. 모바일 브라우저 속도 Galaxy S2 255Galaxy Tab 10.1 356 iPhone 4S 438 Galaxy S3 680 iPhone 5 907 iPad 4 951 0 250 500 750 1,000 http://peacekeeper.futuremark.com/results?key=stats
  27. 27. 모바일 브라우저 속도 vs PC 브라우저 속도 IE 6 171 Galaxy S2 255Galaxy Tab 10.1 356 iPhone 4S 438 IE 7 541 Galaxy S3 680 iPhone 5 907 iPad 4 951 IE 9 2,070 chrome 3,398 0 875 1,750 2,625 3,500 http://peacekeeper.futuremark.com/results?key=stats
  28. 28. 반응형 웹 디자인 • One website for every screen • 화면크기, 플랫폼 및 방향 에 반응하는 웹 디자인 • 구성요소 - A flexible/fluid grid - Responsive images - Media querieshttp://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php, http://www.abookapart.com/products/responsive-web-design , http://opensignal.com/reports/fragmentation.php
  29. 29. 기업이 지원해야 할 모바일 OS의 개수 39% 멀티 플랫폼 요건 : 50% 25% 15% 12% 9% 4+ 3 2 1 0 (Forrester, July 2009) http://www.nipa.kr/know/periodicalView.it?identifier=02-001-110531-000004&menuNo=28&code=B_ITA_01
  30. 30. 웹앱 vs 하이브리드앱 vs 네이티브앱 하이브리드앱기능성 - 개발용이 - 멀티플랫폼 - 빠른 속도 - 디바이스 제어 네이티브앱 - 빠른 속도 - 디바이스 제어 - 플랫폼 별 개발 웹앱 - 개발 용이 - 멀티플랫폼 - 느린 속도 - 디바이스 제어 불가 멀티 플랫폼
  31. 31. 하이브리드앱• Native App + Web Based UI• Multi Device Mobile OS (iOS, Android, Window Phone, …) Hybrid App Framework Sandbox Native browser JavaScript Application API API
  32. 32. Hybrid App vs MEAP500400300200100 0 2010-05 2010-09 2011-01 2011-05 2011-09 2012-01 2012-05 2012-09 Hybrid App MEAP http://www.google.com/trends/explore#cat=0-5&q=hybrid%20app%2C%20mobile%20enterprise%20application%20platform&date=1%2F2008%2059m&cmpt=q
  33. 33. 하이브리드앱 플랫폼 비교500400300200100 0 2008-01 2009-01 2010-01 2011-01 2012-01 Cordova PhoneGap Appcelerator Sencha http://www.google.com/trends/explore#cat=0-5&q=phonegap%2C%20appcelerator%2C%20sencha&date=1%2F2008%2059m&cmpt=q
  34. 34. 멀티플랫폼 지원전략 - Facebook• HTML5 포기 (?) - Tooling / Developer APIs - Scrolling performance - GPU/CSS3• Android, iOS Native 앱 개발• Mobile Web 점유율은 여전히 50%이상 http://www.businessinsider.com/mark-zuckerberg-html5-mobile-2012-9 http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html Keeping the Dream Alive, HTML5 DevConf
  35. 35. 멀티플랫폼 지원전략 - LinkedIn• Hybrid App• 10+ OS Support30% 80% 100% 100%70% 20% MobileiOS Android Web Others Web Native Mobile HTML5 implications on architecture, performance, process. HTML5 DevConf
  36. 36. 멀티플랫폼 지원전략 - Netflix• N-Screen• Over 400 devices• WebKit+HTML http://techblog.netflix.com/2011/09/netflix-webkit-based-ui-for-tv-devices.html
  37. 37. 기업용 모바일 개발 플랫폼에 대한 요구사항 • 멀티플랫폼 지원 • 모바일에 적합한 UI 컴포넌트 지원 • 개발 생산성 • 손쉬운 앱 수정 및 반영 • 네이티브 기능 지원
  38. 38. Solution
  39. 39. 웹스퀘어 구성 웹스퀘어 하이브리드 웹스퀘어 하이브리드 모바일 데스트탑 플랫폼 컴포넌트 컴포넌트 클라우드 WYSIWYG 웹표준 빌드 * 개발 환경 실행환경* 클라우드 빌드는 2013년 제공 예정
  40. 40. 웹스퀘어 하이브리드모바일 특화 기능 • 모바일 전용 컴포넌트 모바일 • 4GL과 유사한 개발환경 컴포넌트개발 생산성 • WYSIWYG 기반 통합 환경 하이브리드 플랫폼손쉬운 앱 반영 • 인앱 업데이트 기능 WYSIWYG 통합 개발 환경멀티 플랫폼 • 웹 표준 기술 적용 및 통합 • 요소 기술 캡슐화네이티브 기능 • 기본 네이티브 기능 제공 • 추가 네이티브 기능 확장 모듈
  41. 41. 웹스퀘어 하이브리드 아키텍처
  42. 42. 패키지 탐색기 통합 개발 환경 메뉴 작업 공간 속성 객체 구조 컴포넌트 스타일
  43. 43. 모바일 전용 컴포넌트스크롤뷰 • 모바일 웹 내부 스크롤 지원 • CSS3D 지원 • 애니메이션 및 효과 지원드래그앤드롭 • PC 및 모바일에서 동작하는 드래그앤드롭 지원 • 드래그와 스크롤 동시 지원 가능기타 컴포넌트 • 슬라이더, 토글, 스피너, 서치박스, 데이트 피커와 같은 컴 포넌트 지원
  44. 44. 인앱업데이트인앱업데이트(In app update)는 앱스토어나 마켓을 통하지 않고앱 내에서 직접 업데이트 할 파일을 내려 받아 갱신하는 기능응용프로그램 유지보수 작업이 빈번 한 엔터프라이즈 환경 에서 더욱 유용한 기능 즉각적인 업데이트 가능 웹스퀘어 엔진 1. 최초 1회 앱스토어에서 다운로드 설치 2. 네이티브 코드가 변경 되었을 경우만 다운로드 업데이트
  45. 45. 기대효과일반적인 하이브리드 앱의 기대효과 웹스퀘어 하이브리드 앱의 기대효과 개발자 부담 감소 WYSIWYG 개발기간 단축 웹 개발방식으로 웹 개발자가 쉽게 앱을 기반의 개발 환경 안정적인 개발개발 플랫폼 호환성을 유지하면서 디바이스 유지보수 용이제어가 가능함  One Source Multi Use 지원  모바일 특화 컴포넌트 제공 대규모 업무화면 구현 가능  화면UI 및Contents 내용을 Provider의 검수 성능개선 과정 없이 실시간 업데이트 가능  웹스퀘어 개발자가 하이브리드 앱 개발  웹스퀘어 개발자원 재활용 가능함
  46. 46. 주요실적태블릿 영업지원 시스템 태블릿 영업지원 시스템 스마트폰 보상모바일 시 현장영업가족을 위한 태 LIG손해보험 신사업 구 출동모바일시스템 (1차) (2차) 스템 블릿 전자서명시스템 축 KTBIT프로젝트 Outbound Mobile 도요타 DMS시스템 Smart PRISM  홈페이지 및 모바일 시 하이브리드 앱 구축 (차세대시스템구축) Service 구축 서비스 스템 구축 마케팅 BI 구축 모바일 뱅킹 구축 구축
  47. 47. About Inswave
  48. 48. “ ”웹 표준 기술 기반의 RIA 플랫폼 선도 기업 대표자 어세룡 본사 서울시 구로구 구로3동 182-13 대륭포스트타워 2차 414호 주 소 데이터 센터 서울시 강남구 역삼동 708-6 LG화재 강남빌딩 2층 설립년도 2002년 4월 16일 직원수 75명 (정직원 기준) 홈페이지 www.inswave.com 연락처 Tel. 02-2082-1400 (대표전화) Fax. 02-2082-1410  WebSquare (웹 표준 기반 RIA 플랫폼) 소프트웨어 인원 현황 개발/판매  ProWorks (차세대 ALM기반 통합 프레임워크) (정직원 기준)  Direct* Insurer (보험 기간계 Package)기타 지원 기술지원 Business  Direct* Plus (컨택센터 시스템 Package) (7명) (19명) 75명 사업 현황 Package  방카슈랑스/보험중개사 패키지 등연구소 인력 SM/SI (20명) (25명)  시스템 통합 프로젝트 수행 영업 (4명) 시스템 통합  IT Outsourcing, 데이터 센터 운영 및 시스템 관리 시스템 관리  시스템 개발 및 유지보수 운영
  49. 49. Thank you!http://www.inswave.com 02-2082-1400

×