SlideShare a Scribd company logo
1 of 60
Download to read offline
차세대 웹(HTML5) 플랫
폼의 동향과 구축방안
2013.4
Inswave Systems
김욱래 (wlkim@inswave.com)
목차
• Mobile Trends
• UI Trends
• HTML5
• Solution
• WebSquare
• About Inswave
Mobile Trends
가트너, 2013년 10대 전략 기술 트렌드
• Mobile Device Battles
• Mobile Applications
and HTML5
• Personal Cloud
• Enterprise App Stores
• The Internet of
Things
http://www.gartner.com/it/page.jsp?id=2209615
• Hybrid IT and Cloud
Computing
• Strategic Big Data
• Actionable Analytics
• In Memory
Computing
• Integrated Ecosystems
숫자로 보는 모바일
http://smarterplanet.co.kr/2012/11/06/mobile/
2016년 모바일 시장 전망
http://smarterplanet.co.kr/2012/11/06/mobile/
2015년 사용 예상 기기
Televisions
Connected Cars
Game Consoles
Foldable Screen
Google Glass
83.5%
74.0%
71.2%
68.1%
67.1%
스마트폰 + 태블릿 vs PC
Desktop PCs Notebook PCs Smartphones Tablets
0 M
1,000 M
2,000 M
3,000 M
2009 2010 2011 2012E 2013E 2014E 2015E
Smartphone + Tablet > PC
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
http://www.idc.com/getdoc.jsp?containerId=prUS23771812 , http://www.idc.com/getdoc.jsp?containerId=prUS23772412
2011 3Q 2012 3Q
14%30%
9%
4%
9%
18%
7%
50%
60%
태블릿 시장 점유율
Apple Samsung
Amazon Asus
Others
2011 3Q 2012 3Q
10%29%
75%
58%
15%14%
스마트폰 시장 점유율
iOS Android
Others
모바일 기기별 웹 트래픽 점유율
iPhone
46%
Galaxy
17%
Others
37%
http://venturebeat.com/2012/10/17/android-smartphones-now-have-majority-mobile-web-traffic-share/
브라우저 점유율
0
20
40
60
80
100
2008-072009-072010-072011-072012-07
Worldwide
IE Firefox Chrome Safari Opera Other
http://gs.statcounter.com/#browser-ww-monthly-200807-201211, http://gs.statcounter.com/#browser-KR-monthly-201001-201209
20
40
60
80
100
2010-01 2010-10 2011-07 2012-04 2013-01
Korea
Windows 8/RT
• 두가지 UX (클래식, 메트로)
• 두가지 H/W (X86,ARM)
• 낮은 성능의 태블릿 브라우
저 (FutureMark Score :
348 )
• ActiveX 미지원 (메트로,
ARM)
• 초라한 윈도우 8 성적표, 윈
도 비스타에도 못미친다
http://www.macworld.co.uk/apple-business/news/?newsid=3409089&olo=rss
http://deepers.net/archives/2623
Summary
• 모바일 빅 트랜드는 이제 시작 단계
• 모바일 기기의 중심이 iOS에서 Android로 이
동 (태블릿 포함)
• 윈도우 8/RT는 아직 판단하기 이름
UI Trends
UI 기술의 진화
비표준 웹기술 동향
스티브잡스, '아이폰
서 플래시 거부'
- 2010.5.15 | 연합뉴스
어도비, 모바일용 플래시 포
기... HTML5에 집중
- 2011.11.10 | ITWORLD
실버라이트5 공개 임박… 후속판은 없
다?
- 2010.11.10 | ZDNET
미래부, 웹사이트서 '액티
브X' 걷어낸다
2013.04.18 | 베타뉴스
MS! "HTML5는 옳은 길이다"
IE9는 HTML5 전격 지원
정부 정책 동향
행정안전부고시 제2010-40호
(웹 호환성 준수지침, 액티브X 배제)
방송통신위원회, 행정안전부 에서는 '액티브X(Active X)' 퇴출을 적극적으로 유도하고 있
음 (공공기관 우선 적용)
방통위의 액티브X 대체기술 가이드라인
(웹표준 기술 사용 권고)
한국정보화진흥원의 웹접근성 향상을 위한 국가
표준 기술 가이드 라인 제시
법제처의 장애인차별금지법 제정
(웹 접근성 개선 유도, 금융기관 우선 적용)
OS 업그레이드 리스크
2014년 윈도우 XP 지원 종료
-> IE9이상은 미 지원
-> 전세계 악성코드의 57%가 우
리나라에서 유포
MS 차세대 운영체제 윈도우 8
-> 모바일 환경은 Active-X 배
제
윈도우8
메트로 UI
PC 시대의 종말?
http://www.gartner.com/newsroom/id/2420816
http://review.chosun.com/site/data/html_dir/2013/04/12/2013041200543.html
http://www.asiatoday.co.kr/news/view.asp?seq=794164
2012 1Q 2013 1Q
Worldwide PCVendor Unit Shipment
HP Lenovo Dell
Acer Asus Others
11.2%
감소
• 1분기 세계 PC 출하량
10% 이상 줄어…4분기
연속 감소
- 조선일보 -
• 1분기 PC 출하량, 2009
년 2분기 이후 최저…
′PC 종말′ 오나
- 아시아투데이 -
Multi Platform 지원 요구 증가
다양한 웹브라우저PC OS 모바일 OS
Multi Device 지원 고려
IP/스마트 TV
HTML5 기반 개방형
TV 플랫폼 표준 제정
http://www.dt.co.kr/contents.html?article_no=2013032902010231742002
One Source, Multi Use
최소 비용
최대 효과
HTML 5
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
3D, Graphics,
Effects
Connectivity
CSS3 Styling
Device Access
Multimedia
Offline & Storage
Performance &
Integration
HTML5
Semantics
http://www.w3.org/html/logo/
110 Sessions
- Speakers -
Google, Microsoft, Mozilla,
Yahoo!, Facebook,Twitter,
LinkedIn,Yammer,Adobe,
Intel,YouTube,Airbnb,
Disqus, Github, Enyo,
Disney, PayPal, Pinterest,
EventBrite, ......
From HTML5 DevConf
• HTML5
Application
Platform
• New Mobile OS
• CSS3, SASS, SPA,
BaaS, SVG, Canvas,
WebSocket,
NodeJS, ...
브라우저 별 HTML5 지원 수준
0
100
200
300
400
500
Chrome
Opera
Safari
Firefox
IE10
IE9
IE8
Chrome
Firefox
Mobile
iOS6.0
Windows
Phone8
Android
297
320
386388390
42
138
320
372378389
434
DESKTOP MOBILE
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. Cross-development
capabilities (83.4%)
2. Immediate updates (81.3%)
1. Monetization (83.4%)
2. Security (81.8%)
3. Fragmentation (75.4%)
4. Performance (72.4%)
Galaxy S2
Galaxy Tab 10.1
iPhone 4S
Galaxy S3
iPhone 5
iPad 4
0 250 500 750 1,000
951
907
680
438
356
255
모바일 브라우저 속도
http://peacekeeper.futuremark.com/results?key=stats
IE 6
Galaxy S2
Galaxy Tab 10.1
iPhone 4S
IE 7
Galaxy S3
iPhone 5
iPad 4
IE 9
chrome
0 875 1,750 2,625 3,500
3,398
2,070
951
907
680
541
438
356
255
171
모바일 브라우저 속도
vs PC 브라우저 속도
http://peacekeeper.futuremark.com/results?key=stats
반응형 웹 디자인
• 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
기업이 지원해야 할 모바일 OS의 개수
4+ 3 2 1 0
12%
39%
25%
15%
9%
http://www.nipa.kr/know/periodicalView.it?identifier=02-001-110531-000004&menuNo=28&code=B_ITA_01
멀티 플랫폼 요건 : 50%
(Forrester, July 2009)
네이티브앱 vs 하이브리드앱 vs 웹앱
네이티브앱
- 빠른 속도
- 디바이스 제어
- 플랫폼 별 개발
하이브리드앱
- 개발 용이
- 멀티플랫폼
- 디바이스 제어
웹앱
- 개발 용이
- 멀티플랫폼
- 디바이스 제어
불가
하이브리드앱
• Native App + Web Based UI
• Multi Device
• Device Control
Mobile OS (iOS,Android,Window Phone, …)
Sandbox
Hybrid App Framework
browser ApplicationNative
API
JavaScript
API
하이브리드앱 플랫폼 비교
0
100
200
300
400
500
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
HTML5 is real, it’s now and it’s also
the future
http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/
http://venturebeat.com/2013/02/26/5000-developers-say-html5-is-real-its-now-and-yeah-its-also-the-future/
멀티플랫폼 지원전략 - Facebook
• Android, iOS Native
앱 개발
- Tooling / Developer
APIs
- Scrolling performance
- GPU/CSS3
• 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 Support
iOS Android
Mobile
Web Others
80%30% 100%100%
20%
70%
Web Native
Mobile HTML5 implications on architecture, performance, process. HTML5 DevConf
멀티플랫폼 지원전략 - Netflix
• N-Screen
• Over 400 devices
• WebKit+HTML
• Move from Silverlight
to HTML5
http://techblog.netflix.com/2011/09/netflix-webkit-based-ui-for-tv-devices.html
http://www.theverge.com/2013/4/15/4228248/netflix-plans-its-move-from-microsoft-silverlight-to-html5-video
Solution
기업용 HTML5 개발 플랫폼에 대한 요구사항
• 원소스 멀티유즈 (멀티플랫폼 지원)
• PC, 모바일 동시 지원
• 모바일에 적합한 UI 컴포넌트 지원
• 개발 생산성
• 손쉬운 수정 및 반영
• 네이티브 기능 지원
HTML5 기술 적용 시 문제점
웹표준 준수와
효과적인 개발과
유지보수를 위해서는
솔루션 도입이 필요!
• 보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경
으로 개선
• 다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보
• 스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동
시 지원할 수 있는 기술확보
• 인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비
스가 가능한 웹 표준으로의 빠른 이행 필요
• 국제적인 웹 트렌드 수용과 차세대 웹 표준인 HTML5 활용을 위한 기반
확보
• 높은 확장성을 기반으로 오픈소스 연계 및 HTML5와 같은 차세대 웹표
준 기술을 지원할 수 있어야 함
UI 솔루션 도입시 고려사항
국내 UI제품 현황
구분
Out Of Browser RIAOut Of Browser RIA In Browser RIA (Pure Web)In Browser RIA (Pure Web)
구분
Component Platform Component Platform
특징
- 단순 컴포넌트 라이
브러리 형태로 제공
(DLL 형태)
- 실행환경과 개발툴을 통
합해서 제공
- 지난 10년간 UI시장의 주도
- 단순 컴포넌트 라이브러
리 형태로 제공(JS 형태)
- 웹 표준 실행환경과 개발툴을
통합해서 제공
- 멀티 OS, 멀티 브라우저, 모
바 일 웹 등을 지원
제품
IBsheet,
WiseGrid,Rmate,
Expert Grid 등
GAUSE, MI/
XPlatform(Runtime)
TrustForm, Flash/Flex,
SilverLight 등
IBsheet, WiseGrid 등
WebSquare, eXria,
XPlatform(AJAX)등
장/단점
- 가격 저렴
- 도구 부재로 인한 수작업
개발에 의한 생산성 문제
- Active-X기술을 사용하여 특정 OS
와 웹브라우저에 의존적 (MS
Windows, IE에 국한)
- 다양한 컴포넌트 제공이 가능하고
로컬 자원 접근 등 확장 기능들을 사
용하기 용이하지만 재사용성 및 플
랫폼 호환성이 부족함.
- 가격 저렴
- 플랫폼 제품을 선호하는 국내 특
성상 제한적으로 쓰임
- 도구 부재로 인한 수작업 개발에
의한 생산성 문제
- 모바일에 대한 지원이 미흡
- W3C 표준이 자연스럽게 준수되고 서
로 다른 기기에서 웹 브라우저 설치만
으로도 호환성이 보장됨.
- HTML5 표준화 작업 등이 진행되면서
Out of Browser RIA의 장점을 흡수
하고 있음.
향후 전
망
- 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출
- Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중
심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있
- 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명
(IE10 모바일 버전에서는 Active-X 사용 불가)
- 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여
그 씀임새가 줄어 들것으로 예상됨
- 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출
- Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중
심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있
- 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명
(IE10 모바일 버전에서는 Active-X 사용 불가)
- 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여
그 씀임새가 줄어 들것으로 예상됨
- 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을
주도할 것으로 전망됨
- 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭
발적으로 늘어나면서 웹표준 시장도 확장
- 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있
는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임
- 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어
날 것으로 예상됨
- 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을
주도할 것으로 전망됨
- 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭
발적으로 늘어나면서 웹표준 시장도 확장
- 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있
는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임
- 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어
날 것으로 예상됨
WebSquare
HTML5 개발의 단점을 보완한 웹스퀘어
웹스퀘어 구성
하이브리드
플랫폼
클라우드
빌드 *
모바일
컴포넌트
WYSIWYG
개발 환경
데스트탑
컴포넌트
웹표준
실행환경
웹스퀘어 하이브리드 웹스퀘어
* 클라우드 빌드는 2013년 제공 예정
웹스퀘어( )는
국내 최초로 출시된
WYSIWYG 개발 도구가 포함된
HTML5 플랫폼
One Source, Multi Use
다양한 이기종 H/W 플랫폼 지원관리문서다양한 OS 지원
윈도우즈
MS사윈도우즈계열
OS동작지원
비스타및윈도우7도
지원
Mac OS
iOS
애플사MacOS계열동
작지원
아이폰용OS인iOS에서
동작지원
리눅스
오픈소스Linux계열
OS에서동작지원
태블릿 PC 지원
아이패드 갤럭시 탭
PC 지원
데스크 톱 PC 노트북 PC
스마트 폰 지원
아이폰 계열 갤럭시 계열
스마트 TV
안드로이드
구글사의모바일OS인
안드로이드에서동작
지원
Multi
Device
Multi
Platform
차세대 시스템 구축
Port MIS 구축 차세대 시스템 구축
e-TRM 시스템 구축
품질관리 시스템 구
축
통계 DB 시스템 구축
환경부 국가 온실가
스 종합관리 시스템
구축
u-도시생활 폐기물
통합관리 서비스
차세대 종합정보시스
템
지능형 재난감시 및
상황전달시스템
온실가스정보 시스템통합정보시스템 구축
해운 종합정보시스템
RFID기반 음식물쓰
레기 관리시스템
글로벌통합물류무역
3단계 구축
장기배전설비계획
시스템
웹표준 RIA 인프라
구축
舊한국산재의료원 통
합 정보시스템 구축
국가 온실가스 종합
관리 시스템 고도화
자동차보험 과오납보
험료 환급조회 통합
시스템
공공
웹 청약시스템
코러스 WINAS
한국어능력시험 운영
기반시스템
차세대 시스템 구축 학생정보시스템 구축
자동차보험 진료비
전자청구시스템
차세대 시스템 구축
KT BIT 프로젝트
(차세대 시스템 )
영진대 차세대 시스
템
통신/교육
도요타 DMS시스템
구축
e-catering 시스템 위기관리 시스템 홈페이지 리뉴얼
아시아나항공 차세대
클럽시스템
이지웨어 재구축
기타
차세대 시스템 구축
LIG GA 법인 시스템
구축
차세대 시스템 구축
신한은행 콜센터 어
플리케이션 구축
알프스론 시스템
(온라인 대출 시스
템)
전자투표 시스템 구
축
LIG 모바일 시스템
파일럿 구축
차세대 시스템 구축 대고객 웹서비스 및
정보보호시스템
통합정보시스템
신한은행 글로벌뱅킹
구축
스마트 채널 인프라
(직원용)
프로젝트
테블릿 영업지원 시
스템 1차 구축
테블릿 영업지원 시
스템 2차 구축
인터넷뱅킹
(오픈뱅킹) 리뉴얼
IFRS 시스템 구축
사이버창구 구축
중소기업 보증공제
시스템 구축
LIG손해보험 신사업
구축
한국신용평가 차세대
시스템 구축
금융
홈페이지 및 모바일
시스템 구축
홈페이지 재 구축
마케팅 BI 구축
구축
종합정보 시스
템 구축 모바일 뱅킹 구축
Global Product
Support System
차세대 업무 시스템
구축
기술평가 시스템 구
축
다물 식자재 관리 시
스템
GPSS 고도화
하이닉스 Hy
CRM 구축
태양광 시스템 구축 Klnet 전자물류사업 내부업무시스템 구축
e-planning 프로젝
트
카드마감시스템
하이브리드 앱 구축
(스마트워크)
기간계 시스템 구축
Outbound Mobile
Service
Global ERP EP 시스
템 구축
실적원가시스템 구축
전자지갑시스템 구축
금융 솔루션 구축
제조/유통
포트MIS 구축
광양물류고등학교
•웹 표준 기술
•One source, Mult-use (하이브리드 앱 지원)
•Cross Browsing/Cross Platform 지원
•WYSWYG 통합 개발도구 (데스탑/모바일)
•반응형 웹 지원
•웹 접근성 지원
•다국어 지원
•그리드 등 다양한 UI 컴포넌트
웹스퀘어로 가능한 것들
About Inswave
HTML5 기반의 RIA 플랫폼 선도 기업“ ”
대표자 어 세 룡
설립년도 2002년 4월 16일
홈페이지 www.inswave.com
(정직원 기준)
인원 현황
기술지원
(19명)
SM/SI
(25명)
영업 (4명)
연구소 인력
(20명)
기타 지원
(7명) 75명
주
소
본사 서울시 구로구 구로3동 182-13 대륭포스트타워 2차 414호
소
데이터 센터 서울시 강남구 역삼동 708-6 LG화재 강남빌딩 2층
직원수 75명 (정직원 기준)
연락처 Tel. 02-2082-1400 (대표전화) Fax. 02-2082-1410
Business
Package
소프트웨어
개발/판매
 WebSquare (웹 표준 기반 RIA 플랫폼)
 ProWorks (차세대 ALM기반 통합 프레임워크)
 시스템 통합 프로젝트 수행
 IT Outsourcing, 데이터 센터 운영 및 시스템 관리
 시스템 개발 및 유지보수 운영
시스템 통합
시스템 관리
사업 현황
 Direct* Insurer (보험 기간계 Package)
 Direct* Plus (컨택센터 시스템 Package)
 방카슈랑스/보험중개사 패키지 등
발표자 소개
김욱래
• (주)인스웨이브 시스템즈 SW본부 본부장
• HTML5 UI 플랫폼 WebSquare 개발
• 하나은행 차세대 프로젝트 J2EE 프레임워크
(ProWorks) 구축 PM
• wlkim@inswave.com
Thank you!
http://www.websquare.co.kr
02-2082-1400

More Related Content

What's hot

HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends욱래 김
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향Jonathan Jeon
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망NAVER Engineering
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER Engineering
 
W3C 국제표준화 대응 전략
W3C 국제표준화 대응 전략W3C 국제표준화 대응 전략
W3C 국제표준화 대응 전략Jonathan Jeon
 
W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017Wonsuk Lee
 
모바일 웹플랫폼 기술 동향
모바일 웹플랫폼 기술 동향모바일 웹플랫폼 기술 동향
모바일 웹플랫폼 기술 동향Jong Jin Hong
 
하이브리드 앱_개발_개요
하이브리드 앱_개발_개요하이브리드 앱_개발_개요
하이브리드 앱_개발_개요BongSoo Jang
 
Html5의 현재와 미래
Html5의 현재와 미래Html5의 현재와 미래
Html5의 현재와 미래mosaicnet
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부NAVER D2
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈NAVER D2
 

What's hot (20)

HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
 
HTML5 기업 적용시 고려사항 : 미래웹기술연구소
HTML5 기업 적용시 고려사항 : 미래웹기술연구소 HTML5 기업 적용시 고려사항 : 미래웹기술연구소
HTML5 기업 적용시 고려사항 : 미래웹기술연구소
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향차세대 웹 환경에서의 UI/UX 기술 표준화 동향
차세대 웹 환경에서의 UI/UX 기술 표준화 동향
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
W3C 국제표준화 대응 전략
W3C 국제표준화 대응 전략W3C 국제표준화 대응 전략
W3C 국제표준화 대응 전략
 
W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017W3C HTML5 표준 기술 동향 - 2017
W3C HTML5 표준 기술 동향 - 2017
 
HTML5 와 미래웹기술 part 2
HTML5 와 미래웹기술 part 2HTML5 와 미래웹기술 part 2
HTML5 와 미래웹기술 part 2
 
모바일 웹플랫폼 기술 동향
모바일 웹플랫폼 기술 동향모바일 웹플랫폼 기술 동향
모바일 웹플랫폼 기술 동향
 
하이브리드 앱_개발_개요
하이브리드 앱_개발_개요하이브리드 앱_개발_개요
하이브리드 앱_개발_개요
 
HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3HTML5 와 미래웹기술 part 3
HTML5 와 미래웹기술 part 3
 
Html5의 현재와 미래
Html5의 현재와 미래Html5의 현재와 미래
Html5의 현재와 미래
 
모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부모바일웹Ui개발 저자세미나 0부
모바일웹Ui개발 저자세미나 0부
 
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈[D2 오픈세미나]1.html5 api 옥상훈
[D2 오픈세미나]1.html5 api 옥상훈
 

Viewers also liked

[Did you know] 모바일 전략과 웹앱 20130703
[Did you know] 모바일 전략과 웹앱  20130703[Did you know] 모바일 전략과 웹앱  20130703
[Did you know] 모바일 전략과 웹앱 20130703doo rip choi
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012Daum DNA
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)JeongHeon Lee
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
리워드광고의 특징과 시사점
리워드광고의 특징과 시사점리워드광고의 특징과 시사점
리워드광고의 특징과 시사점Dan Kim
 
Native vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesNative vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesJason Grigsby
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해SeungBeom Ha
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망영아 오
 

Viewers also liked (9)

[Did you know] 모바일 전략과 웹앱 20130703
[Did you know] 모바일 전략과 웹앱  20130703[Did you know] 모바일 전략과 웹앱  20130703
[Did you know] 모바일 전략과 웹앱 20130703
 
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
캠프앱 개발 사례를 통해 본 하이브리드앱 어디까지 | Devon 2012
 
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
HTML5 기반 다매체 연동형 서비스 발전 방향(티비스톰 정운교 이사)
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
리워드광고의 특징과 시사점
리워드광고의 특징과 시사점리워드광고의 특징과 시사점
리워드광고의 특징과 시사점
 
Spring Boot 소개
Spring Boot 소개Spring Boot 소개
Spring Boot 소개
 
Native vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development ChoicesNative vs. Web vs. Hybrid: Mobile Development Choices
Native vs. Web vs. Hybrid: Mobile Development Choices
 
모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해
 
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
[Dmc] 모바일 앱 및 광고 시장의 현황과 전망
 

Similar to 강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안

2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다Jonathan Jeon
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용ChangGyum Kim
 
(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월Sang Jin LEE
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)Changhwan Yi
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화Donghyung Shin
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0KTH
 
W3C와 국제적 웹 기술 협력을 위한 제언 (2005)
W3C와 국제적 웹 기술 협력을 위한 제언 (2005)W3C와 국제적 웹 기술 협력을 위한 제언 (2005)
W3C와 국제적 웹 기술 협력을 위한 제언 (2005)Channy Yun
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
KT Show AppStore
KT Show AppStoreKT Show AppStore
KT Show AppStoreSeo Jinho
 
[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장
[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장
[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장VentureSquare
 
KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라
KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라
KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라Hyeon Cheol Pak
 
스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드Kenu, GwangNam Heo
 
HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향Jonathan Jeon
 
It Trends 2015-2H-totoro4
It Trends 2015-2H-totoro4It Trends 2015-2H-totoro4
It Trends 2015-2H-totoro4SangSu Jeon
 
m-Station Channel Xpander5 020325
m-Station Channel Xpander5 020325m-Station Channel Xpander5 020325
m-Station Channel Xpander5 020325sbroh
 
mobile platform
mobile platformmobile platform
mobile platformash84
 
Mobile Platform
Mobile PlatformMobile Platform
Mobile Platformash84
 

Similar to 강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안 (20)

2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다2012, 대한민국 웹 표준, 그 기로에 서다
2012, 대한민국 웹 표준, 그 기로에 서다
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월(주)엑슨투 회사소개서 2018년 01월
(주)엑슨투 회사소개서 2018년 01월
 
하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)하이브리드 앱(Hybrid App)
하이브리드 앱(Hybrid App)
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화HTML5와 모바일이 가져오는 변화
HTML5와 모바일이 가져오는 변화
 
Webtech
WebtechWebtech
Webtech
 
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
H3 2011 하이브리드 앱의 미래, 앱스프레소 1.0
 
W3C와 국제적 웹 기술 협력을 위한 제언 (2005)
W3C와 국제적 웹 기술 협력을 위한 제언 (2005)W3C와 국제적 웹 기술 협력을 위한 제언 (2005)
W3C와 국제적 웹 기술 협력을 위한 제언 (2005)
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
KT Show AppStore
KT Show AppStoreKT Show AppStore
KT Show AppStore
 
[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장
[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장
[스타트업오픈IR: 슈퍼스타 M] 원더풀소프트 이수룡 팀장
 
KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라
KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라
KDF2010 T1 S3 윈도우폰7으로 당신의 꿈을 창조하라
 
스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드스마트 디바이스 최근 개발 이슈와 트렌드
스마트 디바이스 최근 개발 이슈와 트렌드
 
HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향HTML5 융합 기술 표준화 동향
HTML5 융합 기술 표준화 동향
 
It Trends 2015-2H-totoro4
It Trends 2015-2H-totoro4It Trends 2015-2H-totoro4
It Trends 2015-2H-totoro4
 
m-Station Channel Xpander5 020325
m-Station Channel Xpander5 020325m-Station Channel Xpander5 020325
m-Station Channel Xpander5 020325
 
mobile platform
mobile platformmobile platform
mobile platform
 
Mobile Platform
Mobile PlatformMobile Platform
Mobile Platform
 

강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안

  • 1. 차세대 웹(HTML5) 플랫 폼의 동향과 구축방안 2013.4 Inswave Systems 김욱래 (wlkim@inswave.com)
  • 2. 목차 • Mobile Trends • UI Trends • HTML5 • Solution • WebSquare • About Inswave
  • 4. 가트너, 2013년 10대 전략 기술 트렌드 • Mobile Device Battles • Mobile Applications and HTML5 • Personal Cloud • Enterprise App Stores • The Internet of Things http://www.gartner.com/it/page.jsp?id=2209615 • Hybrid IT and Cloud Computing • Strategic Big Data • Actionable Analytics • In Memory Computing • Integrated Ecosystems
  • 6. 2016년 모바일 시장 전망 http://smarterplanet.co.kr/2012/11/06/mobile/
  • 7. 2015년 사용 예상 기기 Televisions Connected Cars Game Consoles Foldable Screen Google Glass 83.5% 74.0% 71.2% 68.1% 67.1%
  • 8. 스마트폰 + 태블릿 vs PC Desktop PCs Notebook PCs Smartphones Tablets 0 M 1,000 M 2,000 M 3,000 M 2009 2010 2011 2012E 2013E 2014E 2015E Smartphone + Tablet > PC 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 http://www.idc.com/getdoc.jsp?containerId=prUS23771812 , http://www.idc.com/getdoc.jsp?containerId=prUS23772412 2011 3Q 2012 3Q 14%30% 9% 4% 9% 18% 7% 50% 60% 태블릿 시장 점유율 Apple Samsung Amazon Asus Others 2011 3Q 2012 3Q 10%29% 75% 58% 15%14% 스마트폰 시장 점유율 iOS Android Others
  • 11. 모바일 기기별 웹 트래픽 점유율 iPhone 46% Galaxy 17% Others 37% http://venturebeat.com/2012/10/17/android-smartphones-now-have-majority-mobile-web-traffic-share/
  • 12. 브라우저 점유율 0 20 40 60 80 100 2008-072009-072010-072011-072012-07 Worldwide IE Firefox Chrome Safari Opera Other http://gs.statcounter.com/#browser-ww-monthly-200807-201211, http://gs.statcounter.com/#browser-KR-monthly-201001-201209 20 40 60 80 100 2010-01 2010-10 2011-07 2012-04 2013-01 Korea
  • 13. Windows 8/RT • 두가지 UX (클래식, 메트로) • 두가지 H/W (X86,ARM) • 낮은 성능의 태블릿 브라우 저 (FutureMark Score : 348 ) • ActiveX 미지원 (메트로, ARM) • 초라한 윈도우 8 성적표, 윈 도 비스타에도 못미친다 http://www.macworld.co.uk/apple-business/news/?newsid=3409089&olo=rss http://deepers.net/archives/2623
  • 14. Summary • 모바일 빅 트랜드는 이제 시작 단계 • 모바일 기기의 중심이 iOS에서 Android로 이 동 (태블릿 포함) • 윈도우 8/RT는 아직 판단하기 이름
  • 17. 비표준 웹기술 동향 스티브잡스, '아이폰 서 플래시 거부' - 2010.5.15 | 연합뉴스 어도비, 모바일용 플래시 포 기... HTML5에 집중 - 2011.11.10 | ITWORLD 실버라이트5 공개 임박… 후속판은 없 다? - 2010.11.10 | ZDNET 미래부, 웹사이트서 '액티 브X' 걷어낸다 2013.04.18 | 베타뉴스 MS! "HTML5는 옳은 길이다" IE9는 HTML5 전격 지원 정부 정책 동향 행정안전부고시 제2010-40호 (웹 호환성 준수지침, 액티브X 배제) 방송통신위원회, 행정안전부 에서는 '액티브X(Active X)' 퇴출을 적극적으로 유도하고 있 음 (공공기관 우선 적용) 방통위의 액티브X 대체기술 가이드라인 (웹표준 기술 사용 권고) 한국정보화진흥원의 웹접근성 향상을 위한 국가 표준 기술 가이드 라인 제시 법제처의 장애인차별금지법 제정 (웹 접근성 개선 유도, 금융기관 우선 적용)
  • 18. OS 업그레이드 리스크 2014년 윈도우 XP 지원 종료 -> IE9이상은 미 지원 -> 전세계 악성코드의 57%가 우 리나라에서 유포 MS 차세대 운영체제 윈도우 8 -> 모바일 환경은 Active-X 배 제 윈도우8 메트로 UI
  • 19. PC 시대의 종말? http://www.gartner.com/newsroom/id/2420816 http://review.chosun.com/site/data/html_dir/2013/04/12/2013041200543.html http://www.asiatoday.co.kr/news/view.asp?seq=794164 2012 1Q 2013 1Q Worldwide PCVendor Unit Shipment HP Lenovo Dell Acer Asus Others 11.2% 감소 • 1분기 세계 PC 출하량 10% 이상 줄어…4분기 연속 감소 - 조선일보 - • 1분기 PC 출하량, 2009 년 2분기 이후 최저… ′PC 종말′ 오나 - 아시아투데이 -
  • 20. Multi Platform 지원 요구 증가 다양한 웹브라우저PC OS 모바일 OS
  • 21. Multi Device 지원 고려 IP/스마트 TV HTML5 기반 개방형 TV 플랫폼 표준 제정 http://www.dt.co.kr/contents.html?article_no=2013032902010231742002
  • 22. One Source, Multi Use 최소 비용 최대 효과
  • 25. HTML5 로드맵 • HTML5 Recommendation in Q4, 2014 • HTML5.1 Recommendation in Q4, 2016 • Modularity http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  • 26. = HTML + CSS + JS http://en.wikipedia.org/wiki/HTML5
  • 27. HTML5 - The Technology 3D, Graphics, Effects Connectivity CSS3 Styling Device Access Multimedia Offline & Storage Performance & Integration HTML5 Semantics http://www.w3.org/html/logo/
  • 28. 110 Sessions - Speakers - Google, Microsoft, Mozilla, Yahoo!, Facebook,Twitter, LinkedIn,Yammer,Adobe, Intel,YouTube,Airbnb, Disqus, Github, Enyo, Disney, PayPal, Pinterest, EventBrite, ......
  • 29. From HTML5 DevConf • HTML5 Application Platform • New Mobile OS • CSS3, SASS, SPA, BaaS, SVG, Canvas, WebSocket, NodeJS, ...
  • 30. 브라우저 별 HTML5 지원 수준 0 100 200 300 400 500 Chrome Opera Safari Firefox IE10 IE9 IE8 Chrome Firefox Mobile iOS6.0 Windows Phone8 Android 297 320 386388390 42 138 320 372378389 434 DESKTOP MOBILE http://html5test.com/results/desktop.html
  • 31. HTML5 적용 전략 • Lowest common denominator • Vertical slices • Using Polyfills - Modernizr • Using fallbacks strategies http://www.codeproject.com/Articles/249438/HTML5-Adoption-Strategies
  • 32. HTML5에 대한 만족도 1. Cross-development capabilities (83.4%) 2. Immediate updates (81.3%) 1. Monetization (83.4%) 2. Security (81.8%) 3. Fragmentation (75.4%) 4. Performance (72.4%)
  • 33. Galaxy S2 Galaxy Tab 10.1 iPhone 4S Galaxy S3 iPhone 5 iPad 4 0 250 500 750 1,000 951 907 680 438 356 255 모바일 브라우저 속도 http://peacekeeper.futuremark.com/results?key=stats
  • 34. IE 6 Galaxy S2 Galaxy Tab 10.1 iPhone 4S IE 7 Galaxy S3 iPhone 5 iPad 4 IE 9 chrome 0 875 1,750 2,625 3,500 3,398 2,070 951 907 680 541 438 356 255 171 모바일 브라우저 속도 vs PC 브라우저 속도 http://peacekeeper.futuremark.com/results?key=stats
  • 35. 반응형 웹 디자인 • 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
  • 36. 기업이 지원해야 할 모바일 OS의 개수 4+ 3 2 1 0 12% 39% 25% 15% 9% http://www.nipa.kr/know/periodicalView.it?identifier=02-001-110531-000004&menuNo=28&code=B_ITA_01 멀티 플랫폼 요건 : 50% (Forrester, July 2009)
  • 37. 네이티브앱 vs 하이브리드앱 vs 웹앱 네이티브앱 - 빠른 속도 - 디바이스 제어 - 플랫폼 별 개발 하이브리드앱 - 개발 용이 - 멀티플랫폼 - 디바이스 제어 웹앱 - 개발 용이 - 멀티플랫폼 - 디바이스 제어 불가
  • 38. 하이브리드앱 • Native App + Web Based UI • Multi Device • Device Control Mobile OS (iOS,Android,Window Phone, …) Sandbox Hybrid App Framework browser ApplicationNative API JavaScript API
  • 39. 하이브리드앱 플랫폼 비교 0 100 200 300 400 500 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
  • 40. HTML5 is real, it’s now and it’s also the future http://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/ http://venturebeat.com/2013/02/26/5000-developers-say-html5-is-real-its-now-and-yeah-its-also-the-future/
  • 41. 멀티플랫폼 지원전략 - Facebook • Android, iOS Native 앱 개발 - Tooling / Developer APIs - Scrolling performance - GPU/CSS3 • 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
  • 42. 멀티플랫폼 지원전략 - LinkedIn • Hybrid App • 10+ OS Support iOS Android Mobile Web Others 80%30% 100%100% 20% 70% Web Native Mobile HTML5 implications on architecture, performance, process. HTML5 DevConf
  • 43. 멀티플랫폼 지원전략 - Netflix • N-Screen • Over 400 devices • WebKit+HTML • Move from Silverlight to HTML5 http://techblog.netflix.com/2011/09/netflix-webkit-based-ui-for-tv-devices.html http://www.theverge.com/2013/4/15/4228248/netflix-plans-its-move-from-microsoft-silverlight-to-html5-video
  • 45. 기업용 HTML5 개발 플랫폼에 대한 요구사항 • 원소스 멀티유즈 (멀티플랫폼 지원) • PC, 모바일 동시 지원 • 모바일에 적합한 UI 컴포넌트 지원 • 개발 생산성 • 손쉬운 수정 및 반영 • 네이티브 기능 지원
  • 46. HTML5 기술 적용 시 문제점
  • 47. 웹표준 준수와 효과적인 개발과 유지보수를 위해서는 솔루션 도입이 필요!
  • 48. • 보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경 으로 개선 • 다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보 • 스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동 시 지원할 수 있는 기술확보 • 인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비 스가 가능한 웹 표준으로의 빠른 이행 필요 • 국제적인 웹 트렌드 수용과 차세대 웹 표준인 HTML5 활용을 위한 기반 확보 • 높은 확장성을 기반으로 오픈소스 연계 및 HTML5와 같은 차세대 웹표 준 기술을 지원할 수 있어야 함 UI 솔루션 도입시 고려사항
  • 49. 국내 UI제품 현황 구분 Out Of Browser RIAOut Of Browser RIA In Browser RIA (Pure Web)In Browser RIA (Pure Web) 구분 Component Platform Component Platform 특징 - 단순 컴포넌트 라이 브러리 형태로 제공 (DLL 형태) - 실행환경과 개발툴을 통 합해서 제공 - 지난 10년간 UI시장의 주도 - 단순 컴포넌트 라이브러 리 형태로 제공(JS 형태) - 웹 표준 실행환경과 개발툴을 통합해서 제공 - 멀티 OS, 멀티 브라우저, 모 바 일 웹 등을 지원 제품 IBsheet, WiseGrid,Rmate, Expert Grid 등 GAUSE, MI/ XPlatform(Runtime) TrustForm, Flash/Flex, SilverLight 등 IBsheet, WiseGrid 등 WebSquare, eXria, XPlatform(AJAX)등 장/단점 - 가격 저렴 - 도구 부재로 인한 수작업 개발에 의한 생산성 문제 - Active-X기술을 사용하여 특정 OS 와 웹브라우저에 의존적 (MS Windows, IE에 국한) - 다양한 컴포넌트 제공이 가능하고 로컬 자원 접근 등 확장 기능들을 사 용하기 용이하지만 재사용성 및 플 랫폼 호환성이 부족함. - 가격 저렴 - 플랫폼 제품을 선호하는 국내 특 성상 제한적으로 쓰임 - 도구 부재로 인한 수작업 개발에 의한 생산성 문제 - 모바일에 대한 지원이 미흡 - W3C 표준이 자연스럽게 준수되고 서 로 다른 기기에서 웹 브라우저 설치만 으로도 호환성이 보장됨. - HTML5 표준화 작업 등이 진행되면서 Out of Browser RIA의 장점을 흡수 하고 있음. 향후 전 망 - 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출 - Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중 심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있 - 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명 (IE10 모바일 버전에서는 Active-X 사용 불가) - 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여 그 씀임새가 줄어 들것으로 예상됨 - 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출 - Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중 심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있 - 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명 (IE10 모바일 버전에서는 Active-X 사용 불가) - 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여 그 씀임새가 줄어 들것으로 예상됨 - 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을 주도할 것으로 전망됨 - 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭 발적으로 늘어나면서 웹표준 시장도 확장 - 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있 는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임 - 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어 날 것으로 예상됨 - 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을 주도할 것으로 전망됨 - 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭 발적으로 늘어나면서 웹표준 시장도 확장 - 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있 는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임 - 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어 날 것으로 예상됨
  • 51. HTML5 개발의 단점을 보완한 웹스퀘어
  • 52. 웹스퀘어 구성 하이브리드 플랫폼 클라우드 빌드 * 모바일 컴포넌트 WYSIWYG 개발 환경 데스트탑 컴포넌트 웹표준 실행환경 웹스퀘어 하이브리드 웹스퀘어 * 클라우드 빌드는 2013년 제공 예정
  • 53. 웹스퀘어( )는 국내 최초로 출시된 WYSIWYG 개발 도구가 포함된 HTML5 플랫폼
  • 54. One Source, Multi Use 다양한 이기종 H/W 플랫폼 지원관리문서다양한 OS 지원 윈도우즈 MS사윈도우즈계열 OS동작지원 비스타및윈도우7도 지원 Mac OS iOS 애플사MacOS계열동 작지원 아이폰용OS인iOS에서 동작지원 리눅스 오픈소스Linux계열 OS에서동작지원 태블릿 PC 지원 아이패드 갤럭시 탭 PC 지원 데스크 톱 PC 노트북 PC 스마트 폰 지원 아이폰 계열 갤럭시 계열 스마트 TV 안드로이드 구글사의모바일OS인 안드로이드에서동작 지원 Multi Device Multi Platform
  • 55. 차세대 시스템 구축 Port MIS 구축 차세대 시스템 구축 e-TRM 시스템 구축 품질관리 시스템 구 축 통계 DB 시스템 구축 환경부 국가 온실가 스 종합관리 시스템 구축 u-도시생활 폐기물 통합관리 서비스 차세대 종합정보시스 템 지능형 재난감시 및 상황전달시스템 온실가스정보 시스템통합정보시스템 구축 해운 종합정보시스템 RFID기반 음식물쓰 레기 관리시스템 글로벌통합물류무역 3단계 구축 장기배전설비계획 시스템 웹표준 RIA 인프라 구축 舊한국산재의료원 통 합 정보시스템 구축 국가 온실가스 종합 관리 시스템 고도화 자동차보험 과오납보 험료 환급조회 통합 시스템 공공 웹 청약시스템 코러스 WINAS 한국어능력시험 운영 기반시스템 차세대 시스템 구축 학생정보시스템 구축 자동차보험 진료비 전자청구시스템 차세대 시스템 구축 KT BIT 프로젝트 (차세대 시스템 ) 영진대 차세대 시스 템 통신/교육 도요타 DMS시스템 구축 e-catering 시스템 위기관리 시스템 홈페이지 리뉴얼 아시아나항공 차세대 클럽시스템 이지웨어 재구축 기타 차세대 시스템 구축 LIG GA 법인 시스템 구축 차세대 시스템 구축 신한은행 콜센터 어 플리케이션 구축 알프스론 시스템 (온라인 대출 시스 템) 전자투표 시스템 구 축 LIG 모바일 시스템 파일럿 구축 차세대 시스템 구축 대고객 웹서비스 및 정보보호시스템 통합정보시스템 신한은행 글로벌뱅킹 구축 스마트 채널 인프라 (직원용) 프로젝트 테블릿 영업지원 시 스템 1차 구축 테블릿 영업지원 시 스템 2차 구축 인터넷뱅킹 (오픈뱅킹) 리뉴얼 IFRS 시스템 구축 사이버창구 구축 중소기업 보증공제 시스템 구축 LIG손해보험 신사업 구축 한국신용평가 차세대 시스템 구축 금융 홈페이지 및 모바일 시스템 구축 홈페이지 재 구축 마케팅 BI 구축 구축 종합정보 시스 템 구축 모바일 뱅킹 구축 Global Product Support System 차세대 업무 시스템 구축 기술평가 시스템 구 축 다물 식자재 관리 시 스템 GPSS 고도화 하이닉스 Hy CRM 구축 태양광 시스템 구축 Klnet 전자물류사업 내부업무시스템 구축 e-planning 프로젝 트 카드마감시스템 하이브리드 앱 구축 (스마트워크) 기간계 시스템 구축 Outbound Mobile Service Global ERP EP 시스 템 구축 실적원가시스템 구축 전자지갑시스템 구축 금융 솔루션 구축 제조/유통 포트MIS 구축 광양물류고등학교
  • 56. •웹 표준 기술 •One source, Mult-use (하이브리드 앱 지원) •Cross Browsing/Cross Platform 지원 •WYSWYG 통합 개발도구 (데스탑/모바일) •반응형 웹 지원 •웹 접근성 지원 •다국어 지원 •그리드 등 다양한 UI 컴포넌트 웹스퀘어로 가능한 것들
  • 58. HTML5 기반의 RIA 플랫폼 선도 기업“ ” 대표자 어 세 룡 설립년도 2002년 4월 16일 홈페이지 www.inswave.com (정직원 기준) 인원 현황 기술지원 (19명) SM/SI (25명) 영업 (4명) 연구소 인력 (20명) 기타 지원 (7명) 75명 주 소 본사 서울시 구로구 구로3동 182-13 대륭포스트타워 2차 414호 소 데이터 센터 서울시 강남구 역삼동 708-6 LG화재 강남빌딩 2층 직원수 75명 (정직원 기준) 연락처 Tel. 02-2082-1400 (대표전화) Fax. 02-2082-1410 Business Package 소프트웨어 개발/판매  WebSquare (웹 표준 기반 RIA 플랫폼)  ProWorks (차세대 ALM기반 통합 프레임워크)  시스템 통합 프로젝트 수행  IT Outsourcing, 데이터 센터 운영 및 시스템 관리  시스템 개발 및 유지보수 운영 시스템 통합 시스템 관리 사업 현황  Direct* Insurer (보험 기간계 Package)  Direct* Plus (컨택센터 시스템 Package)  방카슈랑스/보험중개사 패키지 등
  • 59. 발표자 소개 김욱래 • (주)인스웨이브 시스템즈 SW본부 본부장 • HTML5 UI 플랫폼 WebSquare 개발 • 하나은행 차세대 프로젝트 J2EE 프레임워크 (ProWorks) 구축 PM • wlkim@inswave.com