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

1. HTML5 & Hybrid App
Trends
2012.11
Inswave Systems
김욱래 (wlkim@inswave.com)

2. 목차
• Mobile Trends
• HTML5 & Hybrid App
• Solution
• About Inswave

3. Mobile Trends

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. 숫자로 보는 모바일
http://smarterplanet.co.kr/2012/11/06/mobile/

6. 2016년 모바일 시장 전망
http://smarterplanet.co.kr/2012/11/06/mobile/

7. 2015년 사용 예상 기기
Televisions 83.5%
Connected Cars 74.0%
Game Consoles 71.2%
Foldable Screen 68.1%
Google Glass 67.1%

8. 스마트폰 + 태블릿 vs PC
Desktop PCs Notebook PCs Smartphones Tablets
3,000 M
Smartphone + Tablet > PC
2,000 M
1,000 M
0M
2009 2010 2011 2012E 2013E 2014E 2015E
KPCB, http://techcrunch.com/2012/11/05/mary-meeker-internet-trends/

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. 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. 모바일 기기별 웹 트래픽 점유율
Galaxy
iPhone 17%
46%
Others
37%
http://venturebeat.com/2012/10/17/android-smartphones-now-have-majority-mobile-web-traffic-share/

12. 브라우저 점유율
Worldwide Korea
100 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. 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. Summary
• 모바일 빅 트랜드는 이제 시작 단계
• 모바일 기기의 중심이 iOS에서 Android로 이
동 (태블릿 포함)
• 윈도우 8/RT는 아직 판단하기 이름

15. HTML 5 & Hybrid App

16. HTML5
http://www.w3.org/html/logo/

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. = HTML + CSS + JS
http://en.wikipedia.org/wiki/HTML5

19. HTML5 - The Technology
HTML5
Offline & Storage Device Access Connectivity
Semantics
3D, Graphics, Performance &
Multimedia CSS3 Styling
Effects Integration
http://www.w3.org/html/logo/

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. From HTML5 DevConf
• SPA (Single Page
web Application)
• SASS
• Canvas
• Pointer Event
• JavaScript

22. From HTML5 DevConf
JavaScript
• No more speed issue
• Server Side
• CoffeeScript, Dart,
TypeScript
• Modular
• Yoeman

23. 브라우저 별 HTML5 지원 수준
DESKTOP MOBILE
500
434
400 389 378 390 388 386
372
320 320
297
300
200
138
100
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. HTML5 적용 전략
• Lowest common denominator
• Vertical slices
• Using Polyfills - Modernizr
• Using fallbacks strategies
http://www.codeproject.com/Articles/249438/HTML5-Adoption-Strategies

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. 모바일 브라우저 속도
Galaxy S2 255
Galaxy 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. 모바일 브라우저 속도
vs PC 브라우저 속도
IE 6 171
Galaxy S2 255
Galaxy 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. 반응형 웹 디자인
• One website for every
screen
• 화면크기, 플랫폼 및 방향
에 반응하는 웹 디자인
• 구성요소
- A flexible/fluid grid
- Responsive images
- Media queries
http://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. 기업이 지원해야 할 모바일 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. 웹앱 vs 하이브리드앱 vs 네이티브앱
하이브리드앱
기능성 - 개발용이
- 멀티플랫폼
- 빠른 속도
- 디바이스 제어
네이티브앱
- 빠른 속도
- 디바이스 제어
- 플랫폼 별 개발
웹앱
- 개발 용이
- 멀티플랫폼
- 느린 속도
- 디바이스 제어 불가
멀티 플랫폼

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. Hybrid App vs MEAP
500
400
300
200
100
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. 하이브리드앱 플랫폼 비교
500
400
300
200
100
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. 멀티플랫폼 지원전략 - 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. 멀티플랫폼 지원전략 - LinkedIn
• Hybrid App
• 10+ OS Support
30% 80% 100% 100%
70%
20%
Mobile
iOS Android Web Others
Web Native
Mobile HTML5 implications on architecture, performance, process. HTML5 DevConf

36. 멀티플랫폼 지원전략 - Netflix
• N-Screen
• Over 400 devices
• WebKit+HTML
http://techblog.netflix.com/2011/09/netflix-webkit-based-ui-for-tv-devices.html

37. 기업용 모바일 개발 플랫폼에 대한 요구사항
• 멀티플랫폼 지원
• 모바일에 적합한 UI 컴포넌트 지원
• 개발 생산성
• 손쉬운 앱 수정 및 반영
• 네이티브 기능 지원

38. Solution

39. 웹스퀘어 구성
웹스퀘어 하이브리드 웹스퀘어
하이브리드 모바일 데스트탑
플랫폼 컴포넌트 컴포넌트
클라우드 WYSIWYG 웹표준
빌드 * 개발 환경 실행환경
* 클라우드 빌드는 2013년 제공 예정

40. 웹스퀘어 하이브리드
모바일 특화 기능 • 모바일 전용 컴포넌트
모바일
• 4GL과 유사한 개발환경 컴포넌트
개발 생산성 • WYSIWYG 기반 통합 환경
하이브리드
플랫폼
손쉬운 앱 반영 • 인앱 업데이트 기능
WYSIWYG
통합 개발 환경
멀티 플랫폼 • 웹 표준 기술 적용 및 통합
• 요소 기술 캡슐화
네이티브 기능 • 기본 네이티브 기능 제공
• 추가 네이티브 기능 확장 모듈

41. 웹스퀘어 하이브리드 아키텍처

42. 패키지 탐색기
통합 개발 환경
메뉴 작업 공간 속성
객체 구조
컴포넌트 스타일

43. 모바일 전용 컴포넌트
스크롤뷰 • 모바일 웹 내부 스크롤 지원
• CSS3D 지원
• 애니메이션 및 효과 지원
드래그앤드롭 • PC 및 모바일에서 동작하는 드래그앤드롭 지원
• 드래그와 스크롤 동시 지원 가능
기타 컴포넌트 • 슬라이더, 토글, 스피너, 서치박스, 데이트 피커와 같은 컴
포넌트 지원

44. 인앱업데이트
인앱업데이트(In app update)는 앱스토어나 마켓을 통하지 않고
앱 내에서 직접 업데이트 할 파일을 내려 받아 갱신하는 기능
응용프로그램 유지보수 작업이 빈번
한 엔터프라이즈 환경
에서 더욱 유용한 기능
즉각적인
업데이트 가능
웹스퀘어
엔진 1. 최초 1회 앱스토어에서 다운로드 설치
2. 네이티브 코드가 변경 되었을 경우만 다운로드 업데이트

45. 기대효과
일반적인 하이브리드 앱의 기대효과 웹스퀘어 하이브리드 앱의 기대효과
개발자 부담 감소
WYSIWYG 개발기간 단축
 웹 개발방식으로 웹 개발자가 쉽게 앱을 기반의
개발 환경
안정적인 개발
개발
 플랫폼 호환성을 유지하면서 디바이스 유지보수 용이
제어가 가능함  One Source Multi Use 지원
 모바일 특화 컴포넌트 제공
 대규모 업무화면 구현 가능
 화면UI 및Contents 내용을 Provider의 검수
 성능개선 과정 없이 실시간 업데이트 가능
 웹스퀘어 개발자가 하이브리드 앱 개발
 웹스퀘어 개발자원 재활용 가능함

46. 주요실적
태블릿 영업지원 시스템 태블릿 영업지원 시스템 스마트폰 보상모바일 시 현장영업가족을 위한 태 LIG손해보험 신사업 구
출동모바일시스템
(1차) (2차) 스템 블릿 전자서명시스템 축
KTBIT프로젝트 Outbound Mobile 도요타 DMS시스템 Smart PRISM 홈페이지 및 모바일 시
하이브리드 앱 구축
(차세대시스템구축) Service 구축 서비스 스템 구축
마케팅 BI 구축
모바일 뱅킹 구축
구축

47. About Inswave

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. Thank you!
http://www.inswave.com
02-2082-1400