엔터프라이즈 웹 동향 및 적용사례

2015.12 김욱래 / ㈜인스웨이브시스템즈

목차

• About

• TL;DR

• Trends

• Requirements

• +α

• 지원 방안 및 적용 사례

About

About Inswave

W3C Member

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

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

• W3C Member • Global Members: 407 • Korea Members: 17

HTML5 UI 플랫폼 선도 기업

About me

김욱래

• W3C AC(Advisory Committee) Member

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

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

• HTML5 UI 플랫폼 WebSquare 개발

• kimwooglae@gmail.com

TL;DR

TL;DR

• HTML5는 기본

– 멀티 플랫폼, 멀티 브라우저, OSMU, 접근성, 반응형 웹

– UI Component(Grid, Chart, ….)

• 기업/공공 분야에서는 +α를 요구

– WYSIWYG 개발도구

– 대량 데이터 처리

– 전용브라우저, 주변기기 연계

– 소스 변환, 문서 생성

– 생산성 및 유지보수성

– …

Trends

공공기관 제안요청서 실행환경

• W3C HTML5, ECMA Script, CSS3등 웹표준 기술 지원

• 특정 OS에 비종속적이고, 특정 브라우저에 종속적이지 않도록 Cross Browsing을 지원

• 모바일 웹을 지원해야 하며, 2개 이상의 모바일 플랫폼 지원

• 별도의 비표준 플러그인 또는 로컬 실행파일 설치가 없어야 함

• 웹 화면의 성능 향상을 위한 기능 및 아키텍처 제공

• Grid,Tree,Menu,Calendar,Chart 등 다양한 UI 컴포넌트와 사용자 정의 컴포넌트 기능 제공

• 별도 하드 코딩없이 성능 및 UI 테스트 도구를 사용하여 테스트 수행 가능

개발환경

• WYSIWYG 기반의 통합 개발툴 제공

• UI 컴포넌트와 데이터 객체간 2 Way 바인딩 지원

• 개발생산성을 위해 세분화되고 재활용 가능한 최소 단위 템플릿 기능 제공

• 다양한 디바이스의 해상도를 지원할 수 있는 반응형/적응형 웹 개발 및 테스트 기능 제공

• 화면캡처, 설명을 포함한 화면설계서 생성 기능 제공

* 나라장터 : http://www.g2b.go.kr:8081/ep/invitation/publish/bidInfoDtl.do?bidno=20151111289&bidseq=00&releaseYn=Y&taskClCd=5

Word cloud

* 2015년 기업/공공 사업공고 분석

Requirements

Web Standard

• HTML5

• CSS3

• JavaScript

• XML

• SVG

No Plugin

• no ActiveX

• no NPAPI

• no Flash

• no Applet

Multi Browser

Multi OS / Multi Platform

Forward compatibility

• One Source Long Use

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

마이크로소프트 윈도우 및 브라우저 버전업 주기와 EOS(End of Support) 시점

IE6 IE7 IE8 IE9 IE10 IE11

XP Vista 7 8 8.1

엣지

10

XP EOS

7 EOS

Vista EOS

OSMU (One Source Multi Use)

• Responsive Web / Adaptive Web

• Web App / Hybrid App

Web accessibility

• 한국형 웹 콘텐츠 접근성 지침 2.1

• 장애인차별금지법

WYSIWYG

Grid

• 엑셀 연계

• 틀고정

• 정렬, 필터

• 소계, 합계

• 페이징

• 다중 헤더

• 컬럼 이동, 컬럼 숨기기

• 데이터 상태 관리

• Group by

• …

Chart

UI Component

• MDI, Tree

• Pivot

• Web Editor

• Calendar

• Forms

• 3rd Party Component

• User Defined Component

• Component Inherit

• …

Two-Way Data Binding

View

Model

Update

Update

Performance

SPA (Single Page WebApplication)

0

1

2

3

Chrome Safari Opera Firefox IE11

SPA No SPA

※ 측정기준 : 컴포넌트 2,000개 측정단위 : sec Cell 수 Time (초)

3,000 Cell 0.031 초

30,000 Cell 0.038 초

150,000 Cell 0.064 초

300,000 Cell 0.114 초

600,000 Cell 0.287 초

900,000 Cell 0.412 초

대량 데이터 처리

I18N, L10N

Framework, Server

• 전자정부 프레임워크

• Spring, Struts

• ProWorks, NEXCORE, devon, ProFrame,

• Any Web Server

• Any WAS

• Any OS

Security

• SSL

• PKI, E2E, Keyboard

• Source Obfuscation

• Source Encryption

• URL Masking

• Watermarking

Support

• 외부 모듈 연계

• 커스터마이징

• 공통스크립트 개발

• 교육

• 템플릿 제공

• 공통개발 및 기술지원 인력

GS 인증

+α

기업이 필요로 하는 추가 기능들

전용 브라우저

• 웹표준(HTML5)을 준수하지만 직접 통제가 가능한 기업용 브라우저

주변기기 연계

• 기업에서 사용되는 다양한 주변기기 연계 기술(exe, dll, ocx 등) 지원

• CTI, Scanner, Card Reader 등 연계

UI 마이그레이션

• 개발 비용을 최소화 하기 위하여 현재 사용하고 있는 X-Internet 소스 자동 변환

화면 설계 도구

• UI 개발도구로 화면을 설계하여 개발 비용 절감

• 화면 설계서 자동 생성

지원 방안 및 적용 사례

WebSquare

Features

W-Browser

W-Gear

W-Craft

컨버전 완성도

컨버전 확장성

컨버전 용이성

컨버전 확장성

컨버전 완성도

기반 기술지원

웹 표준 준수

컨버전 용이성

- 변환규칙사전 방식 - 수작업 대비 10~20% 공수 필요

- 다수의 보안 솔루션 연동 - 차트, 레포팅, HTML 편집기

- Multi Browser, Multi Device - 반응형 웹 지원

MIPlatform, TrustForm 소스 자동 변환

W-Docs

Case

Customers

국세청 차세대 프로젝트

신한은행 오픈뱅킹

S전자 GERP 시스템

L사 현장체감 품질관제

신한은행 글로벌뱅킹 프로젝트

S은행 차세대 프로젝트

S사 차세대 프로젝트

• X-Internet(MiPlatform)을 웹표준으로 전환

• Fullview, 반응형 웹 도입

• UI 소스 컨버전

• 전용 브라우저

• 주변기기 연동

• 설계문서 자동생성

• 2017년 오픈

감사합니다.

홈페이지 : http://www.inswave.com

웹스퀘어 : http://www.websquare.co.kr

기술지원 : https://www.inswave.com/support