• Save
HTML5 & Hybrid App Trends
Upcoming SlideShare
Loading in...5
×
 

HTML5 & Hybrid App Trends

on

  • 2,005 views

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

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

Statistics

Views

Total Views
2,005
Views on SlideShare
1,953
Embed Views
52

Actions

Likes
2
Downloads
0
Comments
2

5 Embeds 52

http://www.elounge.co.kr 42
http://www.linkedin.com 5
http://www.pinterest.com 3
http://pinterest.com 1
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 & Hybrid App Trends HTML5 & Hybrid App Trends Presentation Transcript

  • 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• 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
  • 숫자로 보는 모바일 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 68.1% Google Glass 67.1%
  • 스마트폰 + 태블릿 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/
  • 모바일 웹 트래픽 점유율 http://royal.pingdom.com/2012/05/08/mobile-web-traffic-asia-tripled/ , http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200909-201211
  • 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
  • 모바일 기기별 웹 트래픽 점유율 Galaxy iPhone 17% 46% Others 37% http://venturebeat.com/2012/10/17/android-smartphones-now-have-majority-mobile-web-traffic-share/
  • 브라우저 점유율 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
  • 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
  • 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 http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  • = HTML + CSS + JS http://en.wikipedia.org/wiki/HTML5
  • HTML5 - The Technology HTML5 Offline & Storage Device Access ConnectivitySemantics 3D, Graphics, Performance &Multimedia CSS3 Styling Effects Integration http://www.w3.org/html/logo/
  • 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, ......
  • 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 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
  • HTML5 적용 전략• Lowest common denominator• Vertical slices• Using Polyfills - Modernizr• Using fallbacks strategies http://www.codeproject.com/Articles/249438/HTML5-Adoption-Strategies
  • 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%)
  • 모바일 브라우저 속도 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
  • 모바일 브라우저 속도 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
  • 반응형 웹 디자인 • 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
  • 기업이 지원해야 할 모바일 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
  • 웹앱 vs 하이브리드앱 vs 네이티브앱 하이브리드앱기능성 - 개발용이 - 멀티플랫폼 - 빠른 속도 - 디바이스 제어 네이티브앱 - 빠른 속도 - 디바이스 제어 - 플랫폼 별 개발 웹앱 - 개발 용이 - 멀티플랫폼 - 느린 속도 - 디바이스 제어 불가 멀티 플랫폼
  • 하이브리드앱• Native App + Web Based UI• Multi Device Mobile OS (iOS, Android, Window Phone, …) Hybrid App Framework Sandbox Native browser JavaScript Application API API
  • 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
  • 하이브리드앱 플랫폼 비교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
  • 멀티플랫폼 지원전략 - 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
  • 멀티플랫폼 지원전략 - 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
  • 멀티플랫폼 지원전략 - Netflix• N-Screen• Over 400 devices• WebKit+HTML http://techblog.netflix.com/2011/09/netflix-webkit-based-ui-for-tv-devices.html
  • 기업용 모바일 개발 플랫폼에 대한 요구사항 • 멀티플랫폼 지원 • 모바일에 적합한 UI 컴포넌트 지원 • 개발 생산성 • 손쉬운 앱 수정 및 반영 • 네이티브 기능 지원
  • Solution
  • 웹스퀘어 구성 웹스퀘어 하이브리드 웹스퀘어 하이브리드 모바일 데스트탑 플랫폼 컴포넌트 컴포넌트 클라우드 WYSIWYG 웹표준 빌드 * 개발 환경 실행환경* 클라우드 빌드는 2013년 제공 예정
  • 웹스퀘어 하이브리드모바일 특화 기능 • 모바일 전용 컴포넌트 모바일 • 4GL과 유사한 개발환경 컴포넌트개발 생산성 • WYSIWYG 기반 통합 환경 하이브리드 플랫폼손쉬운 앱 반영 • 인앱 업데이트 기능 WYSIWYG 통합 개발 환경멀티 플랫폼 • 웹 표준 기술 적용 및 통합 • 요소 기술 캡슐화네이티브 기능 • 기본 네이티브 기능 제공 • 추가 네이티브 기능 확장 모듈
  • 웹스퀘어 하이브리드 아키텍처
  • 패키지 탐색기 통합 개발 환경 메뉴 작업 공간 속성 객체 구조 컴포넌트 스타일
  • 모바일 전용 컴포넌트스크롤뷰 • 모바일 웹 내부 스크롤 지원 • CSS3D 지원 • 애니메이션 및 효과 지원드래그앤드롭 • PC 및 모바일에서 동작하는 드래그앤드롭 지원 • 드래그와 스크롤 동시 지원 가능기타 컴포넌트 • 슬라이더, 토글, 스피너, 서치박스, 데이트 피커와 같은 컴 포넌트 지원
  • 인앱업데이트인앱업데이트(In app update)는 앱스토어나 마켓을 통하지 않고앱 내에서 직접 업데이트 할 파일을 내려 받아 갱신하는 기능응용프로그램 유지보수 작업이 빈번 한 엔터프라이즈 환경 에서 더욱 유용한 기능 즉각적인 업데이트 가능 웹스퀘어 엔진 1. 최초 1회 앱스토어에서 다운로드 설치 2. 네이티브 코드가 변경 되었을 경우만 다운로드 업데이트
  • 기대효과일반적인 하이브리드 앱의 기대효과 웹스퀘어 하이브리드 앱의 기대효과 개발자 부담 감소 WYSIWYG 개발기간 단축 웹 개발방식으로 웹 개발자가 쉽게 앱을 기반의 개발 환경 안정적인 개발개발 플랫폼 호환성을 유지하면서 디바이스 유지보수 용이제어가 가능함  One Source Multi Use 지원  모바일 특화 컴포넌트 제공 대규모 업무화면 구현 가능  화면UI 및Contents 내용을 Provider의 검수 성능개선 과정 없이 실시간 업데이트 가능  웹스퀘어 개발자가 하이브리드 앱 개발  웹스퀘어 개발자원 재활용 가능함
  • 주요실적태블릿 영업지원 시스템 태블릿 영업지원 시스템 스마트폰 보상모바일 시 현장영업가족을 위한 태 LIG손해보험 신사업 구 출동모바일시스템 (1차) (2차) 스템 블릿 전자서명시스템 축 KTBIT프로젝트 Outbound Mobile 도요타 DMS시스템 Smart PRISM  홈페이지 및 모바일 시 하이브리드 앱 구축 (차세대시스템구축) Service 구축 서비스 스템 구축 마케팅 BI 구축 모바일 뱅킹 구축 구축
  • About Inswave
  • “ ”웹 표준 기술 기반의 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, 데이터 센터 운영 및 시스템 관리 시스템 관리  시스템 개발 및 유지보수 운영
  • Thank you!http://www.inswave.com 02-2082-1400