2013년 12월 12일 KTDS에서 강의한 자료입니다.

1. 차세대 웹(HTML5) 플랫폼의
동향과 기업 업무 적용 방안
2013.12
Inswave Systems
김욱래 (wlkim@inswave.com)

2. 발표자 소개
김욱래
•
•
•
(주)인스웨이브 시스템즈 SW본부 본부장
•
•
•
W3C HTML5 KIG 참여
HTML5 UI 플랫폼 WebSquare 개발
HTML5기반 Instant Web App Development Platform 개발
(산업융합원천 기술 개발사업)
HTML5 융합기술포럼 참여
wlkim@inswave.com

3. 목차
•Mobile Trends
•UI Trends
•HTML5
•Solution
•About WebSquare and Inswave

4. Mobile Trends

5. 가트너, 2014년 10대 전략 기술 트렌드
•
•
Mobile Device Diversity
and Management
Mobile Apps and
Applications
•
•
The Internet of Everything
•
•
•
•
•
•
The Era of Personal Cloud
Software Defined Anything
Web-Scale IT
Cloud/Client Architecture
Hybrid Cloud and IT as
Service Broker
Smart Machines
3-D Printing
http://www.gartner.com/newsroom/id/2603623

6. 숫자로 보는 모바일
http://smarterplanet.co.kr/2012/11/06/mobile/

7. 숫자로 보는 모바일
http://smarterplanet.co.kr/2012/11/06/mobile/

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

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

10. Tablet > Desktop, Notebook
http://www.slideshare.net/kleinerperkins/kpcb-internet-trends-2013

11. PCs including tablets, Worldwide, unit
forecasts by category, 2014
http://www.canalys.com/chart/index.html#display-85

12. 모바일 웹 트래픽 점유율
+354%
since 2010
10.21%
15.54%
32.82%
38.27%
16.66%
9.16%
Worldwide
20.04%
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201211-201311

13. S. Korea – Mobile Search Queries
Surpassed PC, Q4:12
http://www.slideshare.net/kleinerperkins/kpcb-internet-trends-2013

14. Three Keys to the Age of Mobile
appcelerator

15. iOS vs Android
Smartphone Market Share
11%
2%
2%
4%
Tablet Market Share
1%
52%
73%
1%
3%
61%
82%
46%
35%
14%
12%
2012 3Q
2013 3Q
2012
iOS
Microsoft
Android
Others
iOS
Windows
2013
Android
Others
http://www.gartner.com/newsroom/id/2623415, http://www.idc.com/getdoc.jsp?containerId=prUS24461613

16. 브라우저 점유율
Worldwide
Korea
100
100
80
80
60
60
40
40
20
20
0
2008-07 009-07 010-07 011-07 012-07 012-07
2
2
2
2
2
2010-01 2010-12 2011-11 2012-10 2013-09
IE
Firefox
Chrome
Safari
Opera
Other
http://gs.statcounter.com/#browser-ww-monthly-200807-201311 , http://gs.statcounter.com/#browser-KR-monthly-201001-201311

17. Summary
• 모바일 빅 트랜드는 이제 시작 단계
• 모바일 기기의 중심이 iOS에서 Android로 이동 (태블릿 포함)
• 윈도우 8/RT는 아직 판단하기 이름

18. UI Trends

19. UI 기술의 진화

20. RIA의 종말
2008
2009
2010
RIA Platforms
was removed
from Hype Cycle
2011
2012
2013
http://koko8829.tistory.com/1399

21. Flash vs. HTML5
actionscript
HTML5
http://html5hub.com/web-graphics-trends-in-2013/

22. 비표준 웹기술 동향
스티브잡스, '아이폰
서 플래시 거부'
- 2010.5.15 | 연합뉴스
어도비, 모바일용 플래시 포
기... HTML5에 집중
- 2011.11.10 | ITWORLD
MS! "HTML5는 옳은 길이다"
IE9는 HTML5 전격 지원
실버라이트5 공개 임박… 후속판은 없
다?
- 2010.11.10 | ZDNET
미래부, 웹사이트서 '액티
브X' 걷어낸다
!
2013.04.18 | 베타뉴스
정부 정책 동향
방송통신위원회, 행정안전부 에서는 '액티브X(Active X)' 퇴출을 적극적으로 유도하고 있
음 (공공기관 우선 적용)
행정안전부고시 제2010-40호
(웹 호환성 준수지침, 액티브X 배제)
방통위의 액티브X 대체기술 가이드라인
(웹표준 기술 사용 권고)
한국정보화진흥원의 웹접근성 향상을 위한 국가
표준 기술 가이드 라인 제시
법제처의 장애인차별금지법 제정
(웹 접근성 개선 유도, 금융기관 우선 적용)

23. OS 리스크
2014년 4월 8일 윈도우 XP 지원
종료
-> 금융기관은 2014년 4월 8일
이전 OS 업그레이드 예정(금감
원 권고사항)
-> 전세계 악성코드의 57%가 우
리나라에서 유포
MS 최신 운영체제 윈도우 8.1
-> IE11만 지원

24. PC 시대의 종말?
Worldwide PC Vendor Unit Shipment
•
3분기 PC 출하량 8.6%
↓…2008년 이래 최저
- 아이뉴스24 -
•
8.6%
감소
삼성, 내년 PC 판매목
표 절반 줄인다
- 한국경제 -
2012 3Q
Lenovo
Acer
2013 3Q
HP
Asus
Dell
Others
http://www.gartner.com/newsroom/id/2604616
http://news.inews24.com/php/news_view.php?g_serial=776877&g_menu=020600
http://news.naver.com/main/tool/print.nhn?oid=015&aid=0002985880

25. Multi Platform 지원 요구 증가
PC OS
다양한 웹브라우저
모바일 OS

26. Multi Device 지원 고려
IP/스마트 TV
HTML5 기반 개방형
TV 플랫폼 표준 제정
http://www.dt.co.kr/contents.html?article_no=2013032902010231742002

27. One Source, Multi Use
최소 비용
최대 효과

28. HTML 5

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

30. HTML5 로드맵
• HTML5 Recommendation in Q4, 2014
• HTML5.1 Recommendation in Q4, 2016
• Modularity
http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

31. = HTML + CSS + JS
http://en.wikipedia.org/wiki/HTML5

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

33. HTML5 Developer Conference
!
2011년에 시작되어 작년부터
1년에 두번씩 열리고 있는
세계적인 HTML5 컨퍼런스
!
- 186개 세션/ 89개 업체 -

34. Keywords
2012 Oct
2013 Apr
2013 Oct

35. Speakers
2012 Oct
2013 Apr
2013 Oct

36. From HTML5DevConf
• 구형 브라우저 지원을 고려하지 않는
프레임워크/라이브러리 등장
• Web Components 부상
• Client-side MV* Framework 성숙
• CSS Frameworks 의 분화
• 브라우저의 GPU 지원과 SVG와
Canvas의 약진
• Hybrid App is ready - PhoneGap
de-facto standard

37. 브라우저 별 HTML5 지원 수준
DESKTOP
MOBILE
600
503
480
494
484
446
397
360
462
424
412
363
335
332
240
128
120
43
Android
Windows
Phone 8
iOS 7.0
Firefox
Mobile
Chrome
IE 8
IE 9
IE 10
IE 11
Safari
Firefox
Opera
Chrome
0
http://html5test.com/results/desktop.html

38. 모바일 브라우저 속도
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

39. 모바일 브라우저 속도
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

40. 반응형 웹 디자인
• 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

41. Developers actively using HTML5
http://tipsbuilder.com/how-to-blogg/top-10-developer-statistics-and-trends-on-html5/

42. Types of apps built by HTML5
http://tipsbuilder.com/how-to-blogg/top-10-developer-statistics-and-trends-on-html5/

43. 기업이 지원해야 할 모바일 OS의 개수
멀티 플랫폼 요건 : 50%
39%
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

44. 평균 2.5개의 OS를 지원
appcelerator

45. HTML5 vs. Hybrid vs. Native
http://www.kendoui.com/surveys/html5-native-debate-is-over.aspx

46. Cost savings by Hybrid approach
http://www.kendoui.com/surveys/html5-native-debate-is-over.aspx

47. When HTML5 enterprise-ready?
http://www.kendoui.com/surveys/html5-native-debate-is-over.aspx

48. HTML5 적용 전략
• Lowest common denominator
• Vertical slices
• Using Polyfills - Modernizr
• Using fallbacks strategies
http://www.codeproject.com/Articles/249438/HTML5-Adoption-Strategies

49. Solution

50. 기업용 HTML5 개발 플랫폼에 대한 요구사항
• 원소스 멀티유즈 (멀티플랫폼 지원)
• PC, 모바일 동시 지원
• 모바일에 적합한 UI 컴포넌트 지원
• 개발 생산성
• 손쉬운 수정 및 반영
• 네이티브 기능 지원

51. HTML5 기술 적용 시 문제점

52. 웹표준 준수와
효과적인 개발과
유지보수를 위해서는
솔루션 도입이 필요!

53. UI 솔루션 도입시 고려사항
•
보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경
으로 개선
•
•
다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보
•
인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비
스가 가능한 웹 표준으로의 빠른 이행 필요
•
국제적인 웹 트렌드 수용과 차세대 웹 표준인 HTML5 활용을 위한 기반
확보
•
높은 확장성을 기반으로 오픈소스 연계 및 HTML5와 같은 차세대 웹표
준 기술을 지원할 수 있어야 함
스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동
시 지원할 수 있는 기술확보

54. 국내 UI제품 현황
구분
Out Of Browser RIA
Component
Platform
In Browser RIA (Pure Web)
Component
Platform
특징
- 웹 표준 실행환경과 개발툴을
- 단순 컴포넌트 라이 - 실행환경과 개발툴을 통
- 단순 컴포넌트 라이브러 통합해서 제공
브러리 형태로 제공
합해서 제공
리 형태로 제공(JS 형태) - 멀티 OS, 멀티 브라우저, 모
(DLL 형태)
- 지난 10년간 UI시장의 주도
바 일 웹 등을 지원
제품
IBsheet,
WiseGrid,Rmate,
Expert Grid 등
- 가격 저렴
장/단점
- 도구 부재로 인한 수작업
개발에 의한 생산성 문제
GAUSE, MI/
XPlatform(Runtime)
TrustForm, Flash/Flex,
SilverLight 등
- Active-X기술을 사용하여 특정 OS
와 웹브라우저에 의존적 (MS
Windows, IE에 국한)
WebSquare, eXria,
XPlatform(AJAX)등
- 가격 저렴
- W3C 표준이 자연스럽게 준수되고 서
- 플랫폼 제품을 선호하는 국내 특 로 다른 기기에서 웹 브라우저 설치만
성상 제한적으로 쓰임
으로도 호환성이 보장됨.
- 다양한 컴포넌트 제공이 가능하고
- 도구 부재로 인한 수작업 개발에 - HTML5 표준화 작업 등이 진행되면서
로컬 자원 접근 등 확장 기능들을 사
의한 생산성 문제
Out of Browser RIA의 장점을 흡수
용하기 용이하지만 재사용성 및 플
하고 있음.
- 모바일에 대한 지원이 미흡
랫폼 호환성이 부족함.
- 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출
향후 전
망
IBsheet, WiseGrid 등
- Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중
심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있
- 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명
(IE10 모바일 버전에서는 Active-X 사용 불가)
- 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여
그 씀임새가 줄어 들것으로 예상됨
- 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을
주도할 것으로 전망됨
- 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭
발적으로 늘어나면서 웹표준 시장도 확장
- 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있
는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임
- 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어
날 것으로 예상됨

55. About WebSquare and
Inswave

56. 웹스퀘어(
)는
!
국내 최초로 출시된
WYSIWYG 개발 도구가 포함된
HTML5 플랫폼으로
!
kt BIT 프로젝트의 표준 UI 플랫폼

57. 웹스퀘어로 가능한 것들
• 웹 표준 기술
• One source, Mult-use (하이브리드 앱 지원)
• Cross Browsing/Cross Platform 지원
• WYSIWYG 통합 개발도구 (데스탑/모바일)
• 반응형 웹 지원
• 웹 접근성 지원
• 다국어 지원
• 그리드 등 다양한 UI 컴포넌트

58. “
”
HTML5 기반의 RIA 플랫폼 선도 기업
대표자
설립년도
홈페이지
어세룡
주
소
2002년 4월 16일
www.inswave.com
서울시 구로구 구로3동 182-13 대륭포스트타워 2차 414호
본사
데이터 센터
서울시 강남구 역삼동 708-6 LG화재 강남빌딩 2층
직원수
85명 (정직원 기준)
연락처
Tel. 02-2082-1400 (대표전화) Fax. 02-2082-1410
소프트웨어
개발/판매
인원 현황
WebSquare (웹 표준 기반 RIA 플랫폼)
ProWorks (차세대 ALM기반 통합 프레임워크)
(정직원 기준)
Direct* Insurer (보험 기간계 Package)
기타 지원
(7명)
75명
기술지원
(19명)
사업 현황
Business
Package
SM/SI
(25명)
연구소 인력
(30명)
영업 (4명)
Direct* Plus (컨택센터 시스템 Package)
방카슈랑스/보험중개사 패키지 등
시스템 통합 프로젝트 수행
시스템 통합
시스템 관리
IT Outsourcing, 데이터 센터 운영 및 시스템 관리
시스템 개발 및 유지보수 운영

59. Thank you!
!
http://www.websquare.co.kr
02-2082-1400