HTML5 Canvas 기반의차세대 UI 플랫폼 better software, better Life!
INDEX 1. HTML5와웹표준, 그리고 Enterprise UI 2. RIA 기반의 Enterprise UI 기술의한계점 3. HTML5 Canvas 기반의 UI 개발툴 exbuilder5 4. 적용사례 5. 회사소개
INDEX 1. HTML5와웹표준, 그리고 Enterprise UI 기술의변화, UI툴의변화 HTML5 탄생배경 HTML5의주요특징 HTML5의가치 HTML5의호환성 : WebForm HTML5 Canvas 개요
기술의변화, UI 툴의변화 웹기술은변화하고있다. 지금은 RIA 와 HTML5 기술의과도기 ' 전통웹 ( ~ 2000 ) X-Internet ( 2001 ~2007 ) START! Gause, TrustForm, exbuilder, MiPlatform, Xplatform RIA Now! ( 2007 ~ ) Flax, Silverlight, exria, WebSquare, Nexacro platform HTML5 ( 2014 ~ ) 2000 년 Forest Research CEO 가 2006 년 ActiveX 문제대두와 플러그인으로가능했던동영 장점 개념제시 ActiveX나 Applet기반의설치형전용실행환경에서운영 Web2.0 트랜드로 Ajax 형태의 RIA모델이급부상 Cross Browser, Multi OS 상재생, 그림그리기, 게임등의서비스가웹에서간단하게구현가능 컴포넌트기반 다양한컴포넌트제공 컴포넌트의성능보장 C/S 의풍부한 UI 를웹으로구현 모바일지원강화 다양한브라우저 /OS 지원한계 과도한동적 DOM 의사용으로 이전 Browser 지원의한계 단점 보안관련이슈발생 브라우저의기술지원중단 ( 보안과 인한성능문제대두 ( Ajax UI ) 외부 ( OS, Browser ) 정책변경 안정성의문제등 ) 으로인한제공컴포넌트의한계 발생
HTML5 탄생배경 웹은더이상문서표현만을위한것이아닌하나의응용프로그램으로진화 웹을둘러싼비표준을지양하고지능적이고실행 가능한웹구현을위해탄생한웹표준기술 웹이더이상문서공유나문서표현만을위한것 이아닌하나의응용프로그램으로진화 W3C 를주축으로애플, 모질라, 구글, 오페라, MS 등의웹브라우저벤더참여
HTML5 주요특징 사용자입력양식개선및추가 Range, color, datetime 과같은입력양식이추가되어스크립트없이표현가능 WebForm Canvas 웹에서 2 차원그래픽을그리기위한 API 와 Canvas 내각종객체를회전, 변환하고그레디언트, 이미지생성등각종효과를주는기능에대한 API 제공. WebSocket 웹상에서양방향통신이가능한 API 제공 XML 기반의 2 차원벡터그래픽표현하는외부마크업을 HTML 안에삽입가능 SVG Web Worker 웹응용을위한쓰레드 (Thread) 기능에대한 API 제공 HTML5 비디오 ( 영화 ) 또는사운드 ( 오디오 ) 를표현하기위한미디어엘리먼트 Video / Audio Web Storage 웹사이트의정보를사용자의 PC 에저장하는매커니즘을제공, 용량제한및트래픽부담해소 Offline Web Application 인터넷연결이지원되지않는경우에도웹응용이정상적으로수행될수있도록지원하는기능으로응용에대한캐싱과데이터에대한캐싱으로구성 Web SQL Database Local Storage 기존쿠키의기능을개선하기위한목적으로개발된기능, 웹클라이언트에서키와값이쌍으로구성된데이터를영구적으로저장하는기능 다양한표준 SQL 을사용해질의할수있는데이터베이스기능에대한 API 제공
HTML5 호환성 - WebForm 하위버전브라우저에서 HTML5 UI 가화면에보인다면 HTML5 가아님 Supported Not Supported Partial Support Support unknown IE Firefox Chrome Safari Opera ios Safari Opera Mini Android Browser Chrome for Android 7 29 34 5.1 21 5.1 4 10 8 30 35 6.1 22 6.1 4.1 11.5 9 31 36 7 23 7.1 4.3 12 10 32 37 7.1 24 8 4.4 12.1 11 33 38 8 25 8,1 8 4.4.4 24 34 39 26 37 35 40 27 36 41
HTML5 Canvas 개요 HTML5 Canvas HTML5 Canvas 적용분야 Adobe 의 Flash, Microsoft 의 Silverlight 를대체할수있는표준기술 Canvas 는강력한 UI, 그래픽, 차트, 이미지및애니메이션을동적으로생성하고렌더링할수있는 HTML5 의새로운요소 Canvas 는비트맵렌더링엔진 RICH UI Game 웹페이지내에서 <Canvas> 태그를사용하여 Canvas 요소를추가 Canvas 는 DOM 을사용하지않고즉시브라우저에 drawing 하렌더링속도가현저히빠름 이미지편집 그래프
INDEX 2. RIA기반의 Enterprise UI기술의한계점 DOM생성으로인한성능문제 DOM방식 vs Canvas방식 CSS 호환성문제 실제기술지원사례
DOM 생성으로인한성능문제 자바스크립트를사용한 DOM 의조작에는성능상의문제가있다 " 브라우저의성능과규칙에따라화면을나타내는방법이다르며, DOM 을빠르게갱신하는경우심각한성능저하를발생시킵니다. DOM HTML head body meta title h1 P DOM (Document Object Model): a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content.
DOM 방식 VS Canvas 방식 DOM 의요소를이용하여컨트롤을만들경우 DOM 객체의생성과삭제를반복하여 exbuilder5 의 Canvas 방식보다컨트롤의 rendering 성능이현저히낮습니다. 국내표준웹기반제품의컨트롤생성구조 DOM 방식 스크립트파싱 DOM Element 생성 Element Event 설정 Element CSS 설정 DOM 삭제 DOM 추가 Event exbuilder5 컨트롤생성구조 Canvas 방식 스크립트파싱 Canvas Element 생성 Child Object 연산 Child Object Drawining Event
CSS 호환성문제 표준 CSS 스펙이웹브라우저에서각각다른결과물을보여왔으며이로인해디자인적유지보수문제가많았습니다 exbuilder5 는 Canvas 객체만을사용하고렌더링엔진은토마토시스템에것을사용하기에어떤브라우저나어떤기기에서라도같은결과물을보실수있습니다 Chrome & Safari Firefox 브라우저별 CSS 렌더링차이 문제점 표준 CSS 로도동일한결과물을볼수없음 Opera IE 9 & 10 브라우저패치전까지제품내에서해결하지못함. 브라우저별화면테스트를개발자가모두진행하여 야함. IE 8 렌더링에차이점으로생기는유지보수사항이많음 IE 7 고객에요구사항에빠르게대처할수없음 IE 6
실제기술지원사례 Script 관련이슈사항 브라우저버전및모드관련이슈 HTML DOM 관련이슈 Chrome 버전 upgrade 이후 Modal 관련 script 지원포기이슈 브라우저버전에및모드에따른오류발생 브라우저마이너 update 시 DOM 지원인터페이스오류발생 ( 수정기간 1 주에서 1 개월후패치 ) 및성능이슈발생 사례
INDEX 3. HTML5 Canvas 기반의 UI개발툴 exbuilder5 exbuilder5 개요 exbuilder5 표준웹에서가능한장점 exbuilder5 구성및기능설명 exbuilder5 통합 IDE 개발환경 개발자를위한다양한뷰제공 풍부한 UI 컨트롤 테마기능지원 exbuilder5 주요개선기능 Hybrid Smart Viewer 표준웹한계를넘는 Hybrid Smart Viewer One Source Multi Device & Usable Cross Platform Flexibility exbuilder5 System Architecture
exbuilder5 개요 exbuilder5 는사용자에게는풍부한화면과빠른응답속도를, 개발자에게는빠른개발생산성을제공하는 HTML5 Canvas 기반의최적의 UI/UX 솔루션으로웹표준, 크로스브라우저, 모바일, 확장성, 멀티미디어등 HTML5 에대한고객요구를완벽하게수용한차세대 Enterprise UI 플랫폼입니다. 웹표준 : 차기웹표준으로채택된 HTML5 의스펙을준수 HTML5 지원 빠른렌더링 렌더링 : 윈도우어플리케이션에버금가는렌더링속도를제공하여 DOM 객체에서나타난화면깜박임현상이없어야함 크로스브라우저 : IE, Safari, Firefox, Chrome 에서모두동일한환경제공 크로스브라우저지원 exbuilder5 멀티미디어 API 멀티미디어 API : 텍스트위주의 API 뿐만아니라동영상, 사운드와같은멀티미디어 API 도지원 모바일 : PC 화면뿐만아니라모바일환경에서도동일한환경을제공, 스마트폰시대를지원 모바일지원 풍부한확장성 확장성 : 서드파티업체들의제품과잘연동되어야함
exbuilder5 표준웹에서가능한장점 HTML5 와의통합성 Mobile 지원 HTML5 Canvas 외에 HTML5 에서제공하는여러특징들을조합하여사용할수있습니다. HTML5 Canvas 를지원하는모바일브라우저라면 PC 화면과동일한화면을보장합니다. 빠른 UI 랜더링 Flex 수준의 UX 제공 DOM 을엑세스하지않는방식으로대량의자료를표현하는그리드에서도화면에깜박임이없는환경을제공합니다. 에니메이션효과를지원하여과거 Flash 에서보던동적인화면에 UX 를 Plugin 을사용하지않고보실수있습니다.
exbuilder5 구성및기능설명 최적의시스템 업무효율증가 운용효율증가 TmtDesigner ( 개발자용 ) TmtViewer ( 사용자용 ) TmtFramework ( 서버응용프레임웍 ) WYSIWYG/RAD 방식의통합개발환경 XForms/XML/(X)HTML/CSS/JavaScript 표준에의한문서제작 디자인 / 로직파일분리로협업개발지원 입 / 출력화면통합개발 스크립트자동화및인텔리센스, 컨트롤위치자동보정기능제공 30 여종이상의다양한컨트롤제공 XML Editor, SQL 편집기, FTP Client 등개발편의도구내장 각종뷰기능으로폼문서의다각적인작성및보기지원 스크립트디버거, 서브밋트레이스툴을통한디버깅지원 쉽고편리한도움말, 튜토리얼, API, 샘플제공 작고빠르며 HTML5 가호환되는 Hybrid SmartViewer 크로스브라우저지원 손쉬운다국어지원 데이터전송분리로네트웍트래픽감소 HTTP/XML/SOAP/(A)Sync/Zip/FTP 등다양한통신방식지원 압축 / 스트림방식에의한대용량데이터송수신 내장된로컬데이터베이스을통한자료가공및서버트랜잭션감소 다양한외부컴포넌트 / 리소스연동및확장 스플릿, 틀고정, 소트, 필터, 그룹소계, 총계등다양한기능의리피트컴포넌트제공 Text, csv, tab, 엑셀, 넥셀등다양한포맷의 export 기능 웹구간데이터및소스암호화 J2EE, ASP, ASP.NET 응용프로그램개발 MVC 프레임워크 레거시시스템프레임워크최소화하기위한연동플러그인제공 협업기능을위한형상관리툴지원 프로세스기반프레임워크로단순하고중복된작업을감소 브로커 (Receive, Send) 모듈, 비즈니스구현모듈, 데이터베이스연동모듈, Generate XML Parsing 모듈, Custom XML Parsing 모듈등의자동생성기능제공 OOP 기반 3-Tier 구조의클라이언트개발방법론제공
exbuilder5 서비스개념도 Client Server STUDIO Multi Device WEB Server exbuilder5.js exbuilder5.ocx *.js Browser Protocol *.html,*.xtm *.css Deploy XTM 배포 HTTP HTTPS ZIP Multipart Encript Any Framework TmtFramework XTM 개발 OS WAS
exbuilder5 통합 IDE 개발환경 exbuilder5 의 TmtDesigner 는 WYSIWYG 기반통합 IDE 환경을제공하고, 폼문서작성시각종뷰들과유기적으로결합하여개발자에게많은정보를나타내어개발의생산성향상및편의성을제공합니다 강력한통합 IDE 환경
exbuilder5 통합 IDE 개발환경 Event Driven 개발방식
exbuilder5 통합 IDE 개발환경 프로젝트기반파일관리 입체적인 data 구조지원
exbuilder5 통합 IDE 개발환경 편리한 DB 관리기능
exbuilder5 통합 IDE 개발환경 Client SQL 관리
exbuilder5 통합 IDE 개발환경 SOAP 및 FTP 배포기능탬플릿관리기능다양한마법사생성기능편리한코드완성기능
강력한 Grid(Repeat) Control 통합 IDE 개발환경인 TmtDesigner 에서입력 / 출력화면을동일한화면으로제작하며, 기존그리드디자인의고정관념을완전히탈피한다양한 Format 을지원하는강력한 Repeat 컨트롤제작기능제공으로입력화면을그대로출력이가능하여개발본수를획기적으로줄이는환경을제공합니다 Repeat 컨트롤을이용한기존 Grid 디자인의고정관념을완전히탈피한디자인개념 디자인화면 실행화면 출력미리보기 디자인화면실행화면출력미리보기 Tabular, Grid Freeform Multi Header, Multi Line Group
개발자를위한다양한뷰제공 exbuilder5 는총 19 개의뷰를제공하며확장가능한구조의디자이너를통해개발자들의요구사항을반영시킨뷰를지속적으로제공하여드립니다 또한통합된디자이너를통해개발의편의성을높이고개발시간을단축시킬수있습니다 도구상자인스터스뷰속성뷰이벤트뷰 기본컨트롤, 확장컨트롤, exbuilder5 전용컨트롤이분리되어제공 각폼 (PC, 모바일, 웹 ) 성격에따라컨트롤을자유롭게배치하여개발가능 컨트롤과연결되는자료를구조적으로표시 개발에필요한스키마의추가, 수정, 삭제제공 속성, 스타일, 이벤트를한곳에서처리 통합된환경에서각컨트롤제어가능 송 / 수신프로토콜의정의및데이터바인딩에대한정보를제공 설정에따라디버깅에필요한송 / 수신로그를제공
테마기능지원 테마기능으로컨트롤의다양한연출가능 기본테마 모던테마 버튼버튼버튼 라디오버튼 라디오버튼 체크박스체크박스 A B C 콤보박스 콤보박스 트리컨트롤 트리컨트롤
One Source Multi Device & Usable Develop Only one Source 하나의소스로 HTML5 Canvas 기반의멀티 OS( 윈도우, 리눅스, 맥 ) 지원 크로스 & 클린브라우저 ( 익스플로러, 파이어폭스, 오페라, 사파리등 ) 지원 웹표준기반의다양한환경지원및서비스 (PC, 모바일, 타블릿 ) Browser Internet explorer Firefox Safari Opera Chrome Device Smart phone Tablet PC
Cross Platform Flexibility Cross Platform & 브라우저지원 builder5 <Cross Platform>
exbuilder5 주요개선기능 HTML5 Canvas 기반의높은호환성및풍부한 UI/UX 제공 주요특징 exbuilder5 NonPlugin(HTML5 Canvas) 기존 extremebuilder 응용프로그램소스를그대로사용할수있는호환성제공 ActiveX가필요없는 HTML5 기반의 Non-Plugin 방식 Any OS, Any Browser에서동일한인터페이스를제공하는크로스브라우징지원 Android, IOS, TIZEN등모바일 OS 기반의스마트폰, 태블릿을포함한각종디바이스지원 Adobe Flash에서제공하는것과유사한수준의멀티미디어 API 지원 빠르고다양한 UI 제공으로풍부한사용자경험제공 주언어로표준자바스크립트사용
Hybrid Smart Viewer Plugin <-> NonPlugin 전환기능 기존 exbuilder 고객별도작업없이 HTML5 기반으로전환 " 하나의소스로 HTML5 Canvas 기반의표준웹과강력한기능을제공하는 ActiveX 버전을전환하며사용가능 업무의성격에따라 Plugin<->NonPlugin 을선택할수있어업무효율성을획기적으로향상 비용절감및개발기간단축 SmartViewer(NonPlugin) 일반사용자화면 CrossBrowser 지원 PC화면과동일한모바일화면지원 HTML5 Canvas 기반의빠른랜더링 풍부한멀티미디어처리 API Web Server 각종시스템정보 대용량데이터처리 OCX 컨트롤연동 DBMS 처리 보안프로토콜 IE 전용화면 SmartViewer(Plugin) 관리자 사용자
뷰어선택적적용 ( ActiveX, HTML5 Canvas ) 단인소스로 2 개의뷰어 ( ActiveX, HTML5 Canvas ) 를사용가능한환경을제공한다. Viewer Server STUDIO 선택적 Viewer 사용기능 WEB Server HTML5 Viewer 뛰어난접근성뛰어난 UI 에니메이션효과 불특정다수제공 exbuilder5.js exbuilder5.ocx *.js *.html *.css Deploy XTM 배포 ActiveX Viewer 소스코드 ( XForms XML ) XTM 개발 OS 리소스제어뛰어난보안성안정적성능 내부업무용적합
표준웹한계를넘는 Hybrid Smart Viewer 과거 Plugin X-Internet 기반에서가능했던기술들이 HTML5 를포함한표준 WEB 기술로는불가능한기술들이많이있으나 Plugin and NonPlugin 방식을조건별로처리가능하게하여표준웹에한계에서벗어날수있습니다 System Resource 제어 Import/Export File 시스템리소스를제어할수있어 H/W 리소스접근이나기능호출등을직접사용할수있었으나표준웹에서는불가능함 각종주변기기제어,Function key, 네트워크정보, 암호화등. 엑셀, 한글, 워드등각종파일의 Data 를로컬 PC 에서바로웹응용프로그램으로 Import 하거나혹은반대로웹응용프로그램상의 Data 를로컬 PC 파일로바로 Export 하는기능은표준웹에서는불가능함 excel, nexcel export Local DBMS 확장 Data 통신 웹응용프로그램의가용성을위하여 Local DB 를연결하여활용하는경우가많이있으나표준웹에서는불가능함. 대량 Data 통신시네트워크의부하를줄이기위한압축통신과데이터보호를위한암호화통신은 ActiveX 기반에서는가능하였으나표준웹에서는기능상한계가있음. 암호화, 다중파일업로드등.
INDEX 4. 적용사례 우정사업본부 차세대우편물류시스템 흥국화재 영업지원시스템 광고진흥공사 지상파영업시스템 CJ 식품 BU 의 SIS
( 구축사례 ) 우정사업본부 차세대우편물류시스템 국내 / 국제우편물접수화면으로일일트랜젝션발생건수 2,300 만건이발생하는대규모자료를처리하는화면으로기존 A 사제품으로개발되었으나느린속도문제로당사의 exbuilder 로교체함 우편물접수화면로딩시간측정은우체국현장과최대한비슷한환경에서 수행하기위해실운영환경의부분웹환경에서테스트를수행함 A 사 ( 개선전 ) A 사 ( 개선후 ) exbuilder 최초로딩 15.69 13.28 4.43 반복로딩 12.55 9.22 3.06 결과분석 < 최초로딩속도분석 > -A 사제품을이용한개선후약 16% 정도로딩시간단축됨 -exbuilder 를이용한개선후약 72% 정도로딩시간단축됨 [ 테스트단말 PC 사양 ] - Operating System : Windows 98 - Memory : 128 Mb - CPU : Intel Pentium 1.7GHz - IE Version : V6.0 < 반복로딩속도분석 > -A 사제품을이용한개선후약 27% 정도로딩시간단축됨 -exbuilder 를이용한개선후약 76% 정도로딩시간단축됨 < 메모리사용량 > - 약 88M 에서 32M 로감소
( 구축사례 ) 흥국화재 흥국화재영업지원시스템 6 개제품 (X 인터넷솔루션 5 개사 RIA 솔루션 1 개사 ) 와 BMT 를통해선정됨. 구축내역 성능측정결과 타사제품비교우수한성능테스트통과 사용자부하량테스트 ( 동시접속자사용자수테스트 ) 네트워크, CPU사용율 대용량처리테스트 (1,000건, 10,000건,100,000만건조회테스트및엑셀다운로드테스트 )
( 구축사례 ) 광고진흥공사 광고진흥공사지상파영업시스템 지상파 DMB 판매대행업무를효율적으로수행할수있는시스템으로써기존지상파영업시스템과사용자환경및데이터를통합하여구축함
( 구축사례 ) CJ 신선 BU CJ 식품 BU 의 SIS(Supply Information System) 제품공급에관한정보를각종그래프및도표로 Data 를보여주고다양한자료를활용하여제품공급이나판매예측에활용할수있는시스템 구축내역 MIS정보 (Management Information System) 를보여주는메인포탈화면 (Push방식, Timer기능 ), 의사결정에도움을주는리포트성화면 (3D/2D 차트지원 ) 빠른데이터입력을위한상호응답형데이터입력화면개발에적용
회사소개 토마토시스템은? 주요사업분야 조직도및인원현황 매출실적및홍보 인증및수상경력
토마토시스템은? 일반현황 회사명 토마토시스템 회사설립일 2000년 10월 27일 업 종 소프트웨어개발및판매 대표자 이상돈 업종 SW 개발및판매 주소 서울강남구논현동 207-3 장뻘빌딩 5,6,8층 종업원수 230명 ( 2015. 3 현재 ) 2007~ 현재 2003~2006 2000~2002 도약기 exportal, exerd, exsignon, 출시 IT 이노베이션대상특별상 ( 정보통신진흥원 ) 신소프트웨어상품대상일반 SW 부문대상 경영혁신형중소기업 (MainBiz) 선정 중소기업기술인재대전노동부장관표창 동경정보통신기술박람회참가 수출중소기업육성 500-500 선정 확장형 RIA 솔루션 'exria 출시 제 7 회 SW 기업경쟁력대상 ' 최우수상수상 일본시장진출 ( 은행, 대학 ) 병역특례업체선정 성장기 extremebuilder 성능인증획득 ( 중소기업청 ) 기술혁신형중소기업 (INNOBIZ) 선정 extremebuilder 행자부행정업무용 S/W 선정 벤처기업인증 중소기업은행신기술개발시범기업지정 기업부설연구소설립 구축및기반형성기 한국 SW 산업협회 SW 사업자등록 2000. 10. 27 토마토시스템설립
주요사업분야 주요사업분야 시스템 Integration 대학및교육사업 공공 금융 제조 시스템관리, 운영및유지보수 Business 대학맞춤형패키지 광고맞춤형패키지 전자도서관통합시스템 기타 교회용 SNS 시스템 Paultok 전자출결시스템 exets Development HTML5 UI 개발툴 DB 모델링툴 Mobile 모바일웹앱개발 강의지원시스템 그룹형 SNS시스템 물품관리시스템 / 모바일수강신청 SSO/EP 통합인증솔루션 엔터프라이즈포털
조직도및인원현황 조직도 기술인력구성 대표이사 (CEO) 고급기술자 특급기술자 영업본부 경영지원 중급기술자 10% 10% 17% 전략사업본부 교육사업본부 공공사업본부 63% 기술연구소 대학 1 사업부 광고사업부 초급기술자 솔루션사업부 컨설팅사업부 ICS 사업부 대학 2 사업부 교육사업부 공공사업부 금융사업부 개발인력의 40% 이상이 10 년이상의경험을가진베테랑전문기술자
매출실적및홍보 매출실적 ( 단위 : 백만원 ) 20,000 14,500 13,342 17,000 10,150 9,100 7,314 11,300 2008 2009 2010 2011 2012 2013 2014 2015
인증및수상경력 한국정보통신기술협회 (TTA) exria 소프트웨어품질인증 ( 인증번호 : 10-0105) 한국소프트웨어산업협회행정업무용소프트웨어인증 (2006.7.13-2006-01-0037) 중소기업청성능인증 ( 인증번호 : 제 11-052 호 ) 한국정보통신기술협회 (TTA) extremebuilder 소프트웨어품질인증 ( 인증번호 : 06-0003) 경영혁신형중소기업 ( 제 100102-00045 호 ) 한국소프트웨어산업협회대한민국소프트웨어기업경쟁력대상 (2008.2.22 - 개발 / 운영 SW 최우수상 ) 대한민국신성장경영대상 (2007.12.21- 정보통신분야우수상 ) 신 SW 상품대상 ( 일반 SW 대상 / 지경부장관 ) 행정자치부장관표창전자정부기여 - 박성준 노동부장관상표창기술인재육성
감사합니다