차세대 웹(html5) 플랫폼의 동향과...

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

2015.8김욱래 (kimwooglae@gmail.com)

발표자 소개

김욱래

• W3C AC(Advisory Committee) Member

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

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

• HTML5 UI 플랫폼 WebSquare 개발

• kimwooglae@gmail.com

• 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

264271280294

Desktop + Notebook Tablet

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

모바일 웹 트래픽 점유율

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

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

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

XP EOSVista EOS

브라우저 점유율

Worldwide

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

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

One Source, Multi Use

최소 비용 최대 효과

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

HTML5 - The Technology

3D, Graphics, Effects

Connectivity

CSS3 Styling

Device Access

Multimedia

Offline & Storage

Performance & Integration

HTML5 Semantics

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

HTML5 Roadmap

• HTML5.1 Recommendation in Q4, 2016

• Application Foundation

• Modularity

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

What comes next?

Application Foundations

브라우저 별 HTML5 지원 수준

Firefox

Safari

FirefoxM

Android

iOS 8.0

Window

sPhone 8.1

452456493

297336

497501

DESKTOP MOBILE

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

모바일 브라우저 속도

http://peacekeeper.futuremark.com/results?key=stats

Galaxy S2

Galaxy Tab 10.1

iPhone 4S

Galaxy S3

iPhone 5

iPad 4

chrome

0 875 1,750 2,625 3,500

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

Developers actively using HTML5

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

Types of apps built by HTML5

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

기업이 지원해야 할 모바일 OS의 개수

4+ 3 2 1 0

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

멀티 플랫폼 요건 : 50%

(Forrester, July 2009)

평균 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와이즈그리드

순수

SBGrid

vision

웹표준/OSMUActiveX/비표준기술

컴포넌트

플랫폼

웹스퀘어( )는

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

HTML5 UI플랫폼

•웹 표준 기술

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

• Cross Browsing/Cross Platform 지원

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

•반응형/적응형 웹 지원

•웹 접근성 지원

•다국어 지원

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

웹스퀘어로 가능한 것들

웹스퀘어 구성

업무화면

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

UDC, Inherit UI Engine

Promise, SPADataCollection

LoggingDebugging

통신 HTTP/JSON/REST/XML

서버 아키텍처

Presentation

이미지

웹스퀘어 파일

UI 컴포넌트

Adaptor

Back End

Framework

Application

DB I/O

개발도구 WebSquare Studio

Design View

Code Editor

Preview

Client

스마트 기기

모바일 지원

스마트 폰

태블릿 PC

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

차세대 웹(html5) 플랫폼의 동향과...

Software

포티넷 차세대 utm

차세대...

선도 금융사들의 aws...

합리적 의사결정...

2.[d2...

html5 플랫폼 동향과...

html5 관점에서 2015년 웹...

차세대 ux by 김지현

클라우드 환경에서...

대기업ㆍ중소기업...

강의자료 차세대...