W3C HTML5 컨퍼런스 2015 발표자료

1. 엔터프라이즈 웹 동향 및
적용사례
2015.12
김욱래 / ㈜인스웨이브시스템즈

2. 목차
• About
• TL;DR
• Trends
• Requirements
• +α
• 지원 방안 및 적용 사례

3. About

4. About Inswave
W3C Member
• 2007년 WebSquare
• 2012년 WebSquare Hybrid
• 2014년 WebSquare5
• 한국 특허 : 8건
• 미국 특허 : 1건
• W3C Member
• Global Members: 407
• Korea Members: 17
HTML5 UI 플랫폼 선도 기업

5. About me
김욱래
• W3C AC(Advisory Committee) Member
• ActiveX 대체기술 개발 시범사업 책임자(KISA)
• (주)인스웨이브 시스템즈 연구개발본부 본부장
• HTML5 UI 플랫폼 WebSquare 개발
• kimwooglae@gmail.com

6. TL;DR

7. TL;DR
• HTML5는 기본
– 멀티 플랫폼, 멀티 브라우저, OSMU, 접근성, 반응형 웹
– UI Component(Grid, Chart, ….)
• 기업/공공 분야에서는 +α를 요구
– WYSIWYG 개발도구
– 대량 데이터 처리
– 전용브라우저, 주변기기 연계
– 소스 변환, 문서 생성
– 생산성 및 유지보수성
– …

8. Trends

9. 공공기관 제안요청서
실행환경
• 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

10. Word cloud
* 2015년 기업/공공 사업공고 분석

11. Requirements

12. Web Standard
• HTML5
• CSS3
• JavaScript
• XML
• SVG

13. No Plugin
• no ActiveX
• no NPAPI
• no Flash
• no Applet

14. Multi Browser

15. Multi OS / Multi Platform

16. 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

17. OSMU (One Source Multi Use)
• Responsive Web / Adaptive Web
• Web App / Hybrid App

18. Web accessibility
• 한국형 웹 콘텐츠 접근성 지침 2.1
• 장애인차별금지법

19. WYSIWYG

20. Grid
• 엑셀 연계
• 틀고정
• 정렬, 필터
• 소계, 합계
• 페이징
• 다중 헤더
• 컬럼 이동, 컬럼 숨기기
• 데이터 상태 관리
• Group by
• …

21. Chart

22. UI Component
• MDI, Tree
• Pivot
• Web Editor
• Calendar
• Forms
• 3rd Party
Component
• User Defined
Component
• Component
Inherit
• …

23. Two-Way Data Binding
View
Model
Update
Update

24. 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 초
대량 데이터 처리

25. I18N, L10N

26. Framework, Server
• 전자정부 프레임워크
• Spring, Struts
• ProWorks, NEXCORE, devon, ProFrame,
• Any Web Server
• Any WAS
• Any OS

27. Security
• SSL
• PKI, E2E, Keyboard
• Source Obfuscation
• Source Encryption
• URL Masking
• Watermarking

28. Support
• 외부 모듈 연계
• 커스터마이징
• 공통스크립트 개발
• 교육
• 템플릿 제공
• 공통개발 및 기술지원 인력

29. GS 인증

30. +α 기업이 필요로 하는 추가 기능들

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

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

33. UI 마이그레이션
• 개발 비용을 최소화 하기 위하여 현재 사
용하고 있는 X-Internet 소스 자동 변환

34. 화면 설계 도구
• UI 개발도구로 화면을 설계하여 개발 비용 절감
• 화면 설계서 자동 생성

35. 지원 방안 및 적용 사례

36. WebSquare

37. Features

38. W-Browser

39. W-Gear

40. W-Craft
컨버전
완성도
컨버전
확장성
컨버전
용이성
컨버전
확장성
컨버전
완성도
기반
기술지원
웹 표준
준수
컨버전
용이성
- 변환규칙사전 방식
- 수작업 대비 10~20% 공수 필요
- 다수의 보안 솔루션 연동
- 차트, 레포팅, HTML 편집기
- Multi Browser, Multi Device
- 반응형 웹 지원
MIPlatform, TrustForm 소스 자동 변환

41. W-Docs

42. Case

43. Customers

44. 국세청 차세대 프로젝트

45. 신한은행 오픈뱅킹

46. S전자 GERP 시스템

47. L사 현장체감 품질관제

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

49. S은행 차세대 프로젝트

50. S사 차세대 프로젝트
• X-Internet(MiPlatform)을 웹표준으로 전환
• Fullview, 반응형 웹 도입
• UI 소스 컨버전
• 전용 브라우저
• 주변기기 연동
• 설계문서 자동생성
• 2017년 오픈

51. 감사합니다.
홈페이지 : http://www.inswave.com
웹스퀘어 : http://www.websquare.co.kr
기술지원 : https://www.inswave.com/support