차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안

차세대 웹(HTML5) 플랫폼의 동향과 기업 업무 적용 방안

2015.8김욱래 ([email protected])

mailto:[email protected]

발표자 소개

김욱래

• W3C AC(Advisory Committee) Member

• ActiveX 대체기술 개발 시범사업 책임자(KISA)

• (주)인스웨이브 시스템즈 연구개발본부 본부장

• HTML5 UI 플랫폼 WebSquare 개발

• [email protected]

mailto:[email protected]

목차

• Mobile

• UI, OS, Browser

• HTML5

• Solution

• About

Mobile

가트너, 2015년 10대 전략 기술 트렌드

• Computing Everywhere

• The Internet of Things

• 3D Printing

• Advanced, Pervasive and Invisible Analytics

• Context-Rich Systems

http://www.gartner.com/newsroom/id/2603623

• Smart Machines

• Cloud/Client Computing

• Software-Defined Applications and Infrastructure

• Web-Scale IT

• Risk-Based Security and Self-Protection

숫자로 보는 모바일

http://www-01.ibm.com/software/marketing-solutions/benchmark-reports/black-friday-2014.html

PCs including tablets, Worldwide, forecast of units (millions) by category, 2014 - 2018

http://www.canalys.com/chart/index.html#display-345

2014 2015 2016 2017 2018

353

326

293

253

218

264271280294

309

Desktop + Notebook Tablet

http://www.canalys.com/chart/index.html#display-345

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201211-201412

Worldwide

34.03%

27.93%

24.75%

27.84%

43.77%

45.55%

29.38%

+822%since 2010

모바일 웹 트래픽 점유율

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201211-201311

iOS vs Android

http://www.idc.com/prodserv/smartphone-os-market-share.jsp

2013 3Q 2014 3Q

84%81%

12%13%

iOS Android Microsoft Others

http://www.idc.com/prodserv/smartphone-os-market-share.jsp

UI, Browser, OS

UI 기술의 진화

RIA의 종말

RIA Platforms was removed from Hype Cycle

2008 2009 2010

2011 2012 2013

RIA Platforms was removed

from Hype Cycle

http://koko8829.tistory.com/1399

http://koko8829.tistory.com/1399

Flash vs. HTML5

RIA Platforms was removed from Hype Cycle

http://html5hub.com/web-graphics-trends-in-2013/

actionscript HTML5

OS 리스크

2014년 4월 8일 윈도우 XP 지원

종료

-> 금융기관은 2014년 4월 8일

이전 OS 업그레이드(금감원 권

고사항)

-> 전세계 악성코드의 57%가 우

리나라에서 유포

MS 최신 운영체제 윈도우 8.1

-> IE11만 지원

액티브�� X와�� 같은�� 낡은�� 규제에�� 안주한�� 결과�� 국내소비자의�� 해외직구는�� 폭발적으로�� 느는데�� 해외소비자의�� 국내�� 역�� 직구는�� 걸음마�� 수준입니다.

-�� 박근혜�� 대통령�� 신년�� 기자회견-

2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020

MS 버전업 주기

IE6IE7

IE8

IE9

IE10

IE11

XP

Vista

7

8

8.1

Edge

10

XP EOSVista EOS

7 EOS

브라우저 점유율

Worldwide

0

20

40

60

80

100

2008-12 2010-06 2011-12 2013-06 2014-12

IE Chrome Firefox Safari Opera Othershttp://gs.statcounter.com/#browser-ww-monthly-200807-201311 , http://gs.statcounter.com/#browser-KR-monthly-201001-201311

Korea

20

40

60

80

100

2009-12 2010-12 2011-12 2012-12 2013-12 2014-12

Multi Platform 지원 요구 증가

다양한 웹브라우저PC OS 모바일 OS

Multi Device 지원 고려

IP/스마트 TV

HTML5 기반 개방형

TV 플랫폼 표준 제정

http://www.dt.co.kr/contents.html?article_no=2013032902010231742002

http://www.dt.co.kr/contents.html?article_no=2013032902010231742002

One Source, Multi Use

최소 비용 최대 효과

HTML5

W3C총회에서 HTML5 표준 등록 - 2014.10.28

HTML5 Features

• Video and audio without plugins;

• Support for a bitmap canvas;

• New capabilities for interactive forms;

• Native support for scalable vector graphics (SVG) and math (MathML);

• Support for features used in East Asian typography (Ruby);

• Support for accessibility of rich applications (including WAI-ARIA);

• Ways to include structured data in content;

• Facilities for building advanced applications (e.g. template element);

• Facilities for creating rich user interactions;

• Facilities for managing session history and navigation;

• Standardized parsing, valuable for interoperability.

http://dev.w3.org/html5/decision-policy/html5-2014-plan.html


= HTML + CSS + JS

http://en.wikipedia.org/wiki/HTML5

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/

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

HTML5 Roadmap

• HTML5.1 Recommendation in Q4, 2016

• Application Foundation

• Modularity



What comes next?

Application Foundations

브라우저 별 HTML5 지원 수준

0

120

240

360

480

600

Chrom

e

Opera

Firefox

Safari

IE 11

IE 10

IE 9

IE 8

Chrom

e

FirefoxM

obile

Android

iOS 8.0

Window

sPhone 8.1

346

405

452456493

33

113

297336

396

449

497501

DESKTOP MOBILE

http://html5test.com/results/desktop.html

http://html5test.com/results/desktop.html

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 브라우저 속도



반응형 웹 디자인

• 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

http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php

http://opensignal.com/reports/fragmentation.php

Developers actively using HTML5

http://tipsbuilder.com/how-to-blogg/top-10-developer-statistics-and-trends-on-html5/


Types of apps built by HTML5



기업이 지원해야 할 모바일 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)

http://www.nipa.kr/know/periodicalView.it?identifier=02-001-110531-000004&menuNo=28&code=B_ITA_01

평균 2.5개의 OS를 지원

appcelerator

HTML5 vs. Hybrid vs. Native

http://www.kendoui.com/surveys/html5-native-debate-is-over.aspx

Cost savings by Hybrid approach


When HTML5 enterprise-ready?


Solution

HTML5 개발 플랫폼에 대한 요구사항

• 웹 페이지가 아닌 웹 애플리케이션 개발

• 원소스 롱유즈 (상위호환성)

• 원소스 멀티유즈 (멀티플랫폼 지원)

• PC, 모바일 동시 지원

• 모바일에 적합한 UI 컴포넌트 지원

• 개발 생산성

• 손쉬운 수정 및 반영

• 네이티브 기능 지원

HTML5 기술 적용 시 문제점

오픈소스 HTML5 프레임워크?

웹표준 준수와

효과적인 개발과

유지보수를 위해서는

상용 솔루션 도입이 필요!

• 장애인 차별 금지법에 의한 웹접근성 준수

• 보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경으로 개선

• 다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보

• 스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동시 지원할 수 있는 기술확보

• 인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비스가 가능한 웹 표준으로의 빠른 이행 필요

• 국제적인 웹 트렌드 수용과 HTML5 활용을 위한 기반 확보

• 높은 확장성을 기반으로 오픈소스 연계 및 HTML5 기술을 지원할 수 있어야 함

UI 솔루션을 도입시 고려사항

국내 UI제품 현황

웹스퀘어

넥사크로

엑스플랫폼마이플랫폼

RealGrid

리아모어

가우스

트러스트폼

ibsheet와이즈그리드

xRIA

순수

SBGrid

vision

exec

utio

n

웹표준/OSMUActiveX/비표준기술

컴포넌트

플랫폼

About

웹스퀘어( )는

국내 최초로 출시된 WYSIWYG 개발 도구가 포함된

HTML5 UI플랫폼

•웹 표준 기술

• One source, Multi use (하이브리드 앱 지원)

• Cross Browsing/Cross Platform 지원

• WYSIWYG 통합 개발도구 (데스탑/모바일)

•반응형/적응형 웹 지원

•웹 접근성 지원

•다국어 지원

•그리드 등 다양한 UI 컴포넌트

웹스퀘어로 가능한 것들

웹스퀘어 구성

업무화면

웹스퀘어 클라이언트아키텍처

UDC, Inherit UI Engine

Promise, SPADataCollection

LoggingDebugging

통신 HTTP/JSON/REST/XML

서버 아키텍처

WAS

OS

Presentation

XML

JSP

이미지

HTML

웹스퀘어 파일

UI 컴포넌트

Adaptor

Back End

Framework

Application

DB I/O

Data

JEUS

Jboss

DB DB

개발도구 WebSquare Studio

Design View

Code Editor

Preview

Client

스마트 기기

모바일 지원

스마트 폰

태블릿 PC

PC

OS

HTTPXML

Deploy

노트북

웹스퀘어 아키텍처

WYSIWYG 개발도구

60여종의 UI Components 지원

적응형/반응형 웹 지원

사업개요 관련화면

-국세 서비스 관련 웹사이트 통합-웹표준, 웹호환성, 웹접근성 및 장애인차별금지법 준수

-8개 단위 시스템을 하나로 통합-성능에 민감한 연말정산 등 대다수의 국민이 사용하는 시스템에 적용

-구형 브라우저를 포함한 다양한 브라우저 및 OS 지원

-OS : Windows, Mac, Linux�� -브라우저 : IE, Chrome, Safari, Opera, Firefox

▪ 사업의 목적

▪ 사업의 특징

▪ 플랫폼 지원 범위

구축사례 - 국세청 차세대 프로젝트


-�� 인터넷 뱅킹을 다양한 브라우저와 운영체제에서 가능하도록 웹 접근성을 개선��

-�� 웹접근성�� 및�� 장애인 차별 금지법 대응

-�� 웹접근성을 지원하기 위해 HTML5 UI Platform 도입함��

- 액티브 X를 설치하지 않고도 웹 표준 기술로만 구축하여 사용자 접근성 및 편의성을 획기적으로 향상시킴��

-OS : Windows 7/8/8.1, Windows XP�� -브라우저 : IE, Chrome, Safari, Opera, Firefox, Android Browser, Mobile Safari




구축사례 - 신한은행 홈페이지/오픈뱅킹


-N-Screen 지원 모니터링 솔루션 구축으로 현장대응력 강화��

-스마트워킹을 지원하기 위한 HTML5 기반의 OSMU 모니터링 시스템 구축��

-하나의 소스로 다양한 OS, 브라우저, 디바이스 지원�� -반응형/적응형웹 기술을 적용하여 다양한 디바이스에 빠른 대응��

-OS : Windows, Mac, iOS, Android�� -디바이스 : PC, Tablet, Smart Phone�� -브라우저 : IE, Chrome, Safari, Opera, Firefox, Android Browser, Mobile Safari




OSMU 구축사례 - LG U+ 현장체감 품질관제

구축사례콜 센터 화면 - 개인화 / 권한관리 포함 방송국 편성표

영 - 개인화 / 권한관리 포함 ERP UI - 개인화 / 권한관리 포함

영업관리 시스템 보험사 웹세일즈

금융권 보안 포털시스템전자투표 시스템

구축사례

구축사례

" Over 300 Customers"

주요 고객

WebSquare Patented TechnologiesW3C Member

•2007년 WebSquare •2012년 WebSquare Hybrid •2014년 WebSquare5

•한국 특허 : 8건 •미국 특허: 1건

• W3C 회원사 • Global: 394 회원사 • Korea: 14 회원사

HTML5 기반의 RIA 플랫폼 선도 기업

Thank you!

http://www.websquare.co.krhttp://www.inswave.com

02-2082-1400

http://www.websquare.co.kr

http://www.inswave.com