2018.
UI 제품연대기 2 UI/UX 시장의변화 UI/UX 유형 1 세대 (X-internet) 2000 년대초반부터국내개발사중심으로안착 Active-X 기반의빠른데이터처리속도지향 4GL 기반의개발환경지원 쉬프트정보통신가우스, 투비소프트마이플랫폼, 컴스퀘어트러스트폼 컴포넌트기반 UI 개발도구다른 Framework 유형및 Library 유형과와혼용이가능하며 Library 유형의장점을갖추고있으면서상대적으로코딩요소가적은점이장점 ECMAScript 6.0 기반, MVVM 모델기반의최신기술적용 SBUx 는코딩량을줄이기위해 Markup 기반에 Library 제공 2000 년대중, 후반대부터어도비의개념도입 2 세대 (RIA) 다양한웹화면기능및다양한어플리케이션지원 다양한브라우저및모바일지원이슈 투비소프트엑스플랫폼, 인스웨이브웹스퀘어등 투비의넥사크로, 인스웨이브웹스퀘어는 2.5 세대 과도기형제품 Framework 유형 UI 개발도구 - 국내 UI 개발도구스타일 모바일에특화된 bootstrap 및개발도구 jquery 등의 Library 와같은다양한컴포넌트들과연동이불가하고자체제공하는기능만사용가능 WYSIWYG 을통한화면배치는장점이지만배치하는그시점에고정좌표가되는비표준방식 Library 유형 UI 개발도구 외산 UI 개발도구스타일 다른 Framework 와 Library 와혼용가능한점과 DOM 처리, 반응형웹 U I 처리에특화됨은큰장점하지만화면개발을위한코딩요소가너무많은점은국내개발자들에게큰단점으로지적 3 세대 (HTML5) 웹표준및웹접근성지원 One SourceMultiDevice/N-Screen 지원 비종속성 소프트보울 SBUx, 센챠,Angular JS
UI 개발툴의필요성 3 향후 10 년을내다보는 UI 솔루션의선정 순수개발대비확장성, 유연성이좋은컴포넌트보유및필요 정책의변화, 업무의변화에유연하게대처변경할수있는 UI 개발솔루션필요 전자정부프레임웍등미래변화에대한대처 공통화를통한표준 UI 화면개발가능및다양한컴포넌트지원 UI 화면개발의공통화 / 표준화작업에유연 그리드컴포넌트외다양한 40 여개컴포넌트제공 빠른데이터처리등의강점보유 뛰어난개발생산성파워풀한성능 웹표준개발을가능케하는핵심컴포넌트지원도구 플러그인을통한자체컴포넌트탑재및빠른개발지원기능 One SourceMulti Use( 하나의소스로멀티디바이스, 멀티브라우저지원 ) 순수개발대비투입되는인력비율낮음 성능및시스템확장및호환성에대한유연한대응 사업자가요구하는다양한기능충족의조건만족 자사개발제품이며핵심엔진의유연한커스터마이징가능 필요성능확보 ( 데이터처리속도등 ) ERP, 그룹웨어등레거시시스템과의연계가능
Unique example for User experience SBUx v2.0 차세대 UI 개발툴 세계적추세인컴포넌트기반으로웹표준성 / 유연성 / 확장성을지향
SBUx 의추구 5 SBUx Ver 2.0 은웹개발을쉽고빠르며획일성있게만들기위한웹표준을준수하는 UI/UX 개발도구입니다. 개발생산성을이유로비표준규격을준수해온국내기존 UI 화면개발툴과차별화하여세계적추세인컴포넌트기반으로 웹표준성 / 유연성 / 확장성을지향합니다. RIA 자체개발환경많은 UI 기능 종속성비표준 라이브러리 오픈소스많은코딩낮은개발생산성 새로운 UI Tool 범용개발환경웹표준성 유연성 / 확장성 기능확장 그리드 컴포넌트기반 저가형
SBUx 의 Concept 6 웹표준기술사용 HTML5, CSS3, JavaScript, HTTP(s), JSON,AJAX 쉬운개발 통합개발환경제공, MarkUp 형태의 UI 개발, Templ ate, Code Complete 등의다양한기능제공 세계적추세 AngularJS MVVM 제공, Bootstrap 반응형웹지원, jqueryui 로확장가능 컴포넌트기반 UI 개발 직관적인 UI 개발
주요기능객관적지표 7 구분소프트보울 SBUx2.0 T 사제품 I 사제품 화면개발스펙 HTML5 T 사만의고유스펙 xforms-html 혼용 화면배포방식 HTML5 배포자체고유스펙을 Javascript 로 Deploy 화면접근시 xforms 를 Javascript 로변환 HTML5 적합도가장높음낮음중간 기반기술 ECMAScript 6.0,MVVM, DOM Javascript 기반 (Unified JS : 컴포넌트통합 ) Javascript 기반 (Ajax) 브라우저기본메모리 78MB 300MB 메모리사용 현저하게낮은메모리사용으로 가벼움 별도자체엔진모듈이브라우져에서실행되어무거움 300MB ( 자체엔진모듈이브라우져에서실행 ) 자체엔진모듈이브라우져에서실행되어무거움 지원스펙 ( 통신등 ) JSON, CSV 등 XML, CSV 등 XML, JSON, CSV 등 소스동일 ( 개발소스, 운영소스 ) 동일별도별도 멀티 OS/ 브라우징지원지원지원 UI 컴포넌트 40 여개 30 여개 ( 통합컴포넌트 ) 70 여개 ( 기본 HTML Tag 까지포함 ) 개발환경이클립스 - 플러그인 Studio ( 자체개발환경 ) Studio ( 이클립스플러그인 ) 대용량데이터압축지원 / Lazy-Load 패킷압축기술압축지원 반응형웹지원방식 Fully 지원 T 사만의 MLM 기능으로지원중일부컴포넌트만제한되게지원 CSS 지원현재표준인 CSS3 지원별도의 CSS 코딩필요 CSS2 까지만지원 모바일별도개발구분없이개발별도의 Hybrid 로개발별도의 Hybrid 로개발 벤더기술지원의존도낮음높음높음
SBUx 의특징 8 SBUx Runtime Engine 은 Web 표준을준수하는 Javascript 기반 UI Framework Library 이며 강력한성능, 미려한표현을지향합니다. 강력한기능의컴포넌트집합체 웹표준준수강력한성능미려한화면표현 One SourceMulti Use 실현 웹표준을준수하여 Bootstrap,jQuery 등외부라이브러리와연동가능 2Way-Data Binding 을통한간결한 Code 추구. 경량화된소스로인한빠른개발 / 쉬운유지보수가능 간편한 Default 속성관리기능으로손쉬운화면공통화가능 편리한다국어지원 사용자 UX 환경개선 CSS,Theme 등을이용하여쉬운디자인적용 SBGrid, SBChart 등다양한컴포넌트제공
SBUx 컴포넌트유형 9 입력계열선택계열버튼계열확장계열 Input - Masking, Placeholder, Select - Locale, enable/disa Button - Large, Medium, Tabs - 아이콘, 배지, 메뉴, Format, Icon, 버튼, Mi ble, relate-select, Small 버튼제공 Direction, n/max Length 등 개별 item CSS 적용 Panel 제공 Date Picker -Calendarlocale, Format, Min/M ax Day 등 TextArea -Placeholder, Min 등 Checkbox - 사용자정의 Check value,direction, 개별 itemcss 적용등 Radio - 개별 itemcss 적용등 DropDown -Text, Button, Spl it Button 제공 Popover -HTML, Header, in put Tag 에적용 Alert -Case 별 Alert 표현등 Tree - 노드에이미지, Che ckbox 표현등 /MaxLength, Au to-resize 등 Listbox - 개별 itemcss 적용, 자동필터링등 Menu - 고정형, Float 형메뉴, Direction 등
SBUx 컴포넌트유형 10 1 Input Text, Password, Search Type - placeholder, min/max length autocomplete & height, mask, next focus, readonly ignore event 4 Select Single, Checkbox Type - auto unselected text, scroll style, selected title count, select all text, change list type 7 Progressbar Bar Type - value max/min, indicator type(normal/stacked/load) open layer popup, change title, close fixed, translucent background 2 Picker (Date) Inline, Popup Type - min/max date, show weeks, date format, unmask format, placement, picker mode(day / month / year), picker title, button bar, button title, starting day 5 Button Normal, Modal Type - button size, button color button in image, image placement, change button text, mouse hover fade & change image, modal popup 8 Dropdown Normal, Button, Split button Type - direction, change text diver/disabled list breadcrumb title, button color 3 Listbox Single Type - list size, filtering, empty data message not found search message 6 Textarea Normal Type - placeholder, min/max length rows,cols, auto size, html contents 9 Tabs Normal, Inbox Type - badge, close button, glyphs icon, dropdown tab, placement, scroll, draggable, iframe in tab, open layer/window, add/remove, remove all/others tabs count/select/enable/disable Component 공통 - init data, CSS style, required, disabled, readonly, setter/getter, group id, clear Data, tooltip, popover before/after creation event, dynamic/render creation, show/hide, change attribute, each event in Json
SBUx 컴포넌트유형 11 10 Radio Static, Flexible Data - text style, left/right padding direction 13 Menu Normal Type - placement, fixed menu, show all/sub menu, target iframe/frame link menu image, logo link 16 Alert Single Type - title, background mode, close fixed, close time placement, switch case attribute translucent background, immuable open/close, event before/after open/close 11 Checkbox Static, Flexible Data - text style, left/right padding direction, true-value / false-value required index 14 Tree Normal, Checkbox Type - node expand, icon or text event, toggle expand, parent node check, add/remove/edit/node status/ node history data 17 Context menu Right Mouse Click - menu item, divider/disabled item, callback event, 12 Label Normal, Output Type - mask, for id, placeholder 15 Accordion Normal Type - glyphs icon placement, expanded / collapse glyphs 18 Datastore Asynchronous data transfer - bind on load time, type, data, content type, cache, loading alert, error alert, Server Data transfer to Component 19 SBGrid 2.5 (Web Grid) Features - multiple column type (input,output, combo, datepicker, ), filtering, single/multi sorting, paging, fixed column/row, cell merge export/import excel data, excel copy & paste, grouping, personalization, context menu, etc
편의성 : 코드자동완성기능제공 (Eclipse Code Complete) 12 Eclipse IDE 를사용하여개발시 SBUx 의컴포넌트들을코드자동완성기능을이용하여쉽게작성하실수있습니다. 코드자동완성기능
그리드 Designer ( 자동생성기 ) 13 손쉬운개발지원 컬럼생성 그리드속성지정
템플릿제공 ( 목록형, 상세형, 혼합형, 탭형 ) 14 28 가지유형구분
확장성 : 외부라이브러리혼용 외부라이브러리를별다른제약없이 SBUx 내에혼용하여사용가능합니다. JQuery UI 라이브러리 15 JQuery UI 라이브러리
활용성 : Tab 기능 (MDI 기능 ) 16 탭을드래그하여윈도우창으로나타낼수있어, 여러탭에있는데이터를한꺼번에볼수있습니다.
활용성 : Modal 기능 (Modal 내복합기능구성 ) 17 Modal 창에내부를간단한코드만으로도복합적으로구성할수있어, 한화면에서많은내용을다룰수있는다양한화면을만들수있습니다.
활용성 : Tree 내컨텍스트메뉴및 checkbox 형콤보박스 18 컨텍스트메뉴기능을이용하여 Tree 의노드추가및변경, 기타기능을개발하실수있으며, 여러개의동시에선택할수있는 checkbox 형콤보박스를쉽게사용하실수있습니다.
표준성 : OSMU(one source multi use) 기능 19 개발한소스를 PC 외에서해상도가다른모바일에서도사용할수있습니다. 제품내부적으로모바일을지원하는부분이내장되어있어, 간단한코딩만으로도모바일적용이가능합니다. iphone 8 화면 일반 PC 화면
SBUx 주요적용프로젝트 20 적용된주요프로젝트예시 적용된주요프로젝트예시 프로젝트명 : 국고보조금통합관리시스템 프로젝트명 : 차세대 KOVIS 구축 발주처 : 기획재정부 발주처 : 한국철도공사 주관개발사 : 아이티센시스템즈 &LIG 시스템외 주관개발사 : 에이폴스 & 대우정보시스템 사업규모 : 예산 350 억, 개발기간 : 19 개월 사업규모 : 예산 150 억, 개발기간 : 20 개월 역할 : 표준 UI 개발툴로적용 역할 : 표준 UI 개발툴로적용
SBUx 주요레퍼런스 21 공공 기초과학지원연구원 통합경영정보시스템 2015 공공 기획재정부 국고보조금통합관리시스템 (e-나라도움) 2016 기업 중국현대정보기술 현대글로비스충칭법인시스템구축 2017 해외 기업 북경오토에버 현대글로비스 SBUx 구매 2016 해외 공공 한국원자력안전기술원 원자력안전규제종합정보시스템 2016 공공 경찰청 SBUx 구매 2016 공공 지역정보개발원 자치단체인터넷원서접수시스템재구축사업 2016 공공 과학기술정책연구원 통합정보시스템고도화및전산장비구축 2016 공공 한국철도공사 차세대 KOVIS 구축 2016 공공 한국정보화진흥원 차세대통합정보시스템 2016 공공 국립암센터 국가암데이터센터구축 2016 공공 교육과정평가원 2017년교과서검정전산시스템재구축 2016 공공 서울특별시 생활복지시스템구축 2016 기업 비알네트콤 자기주도형휴대용생활환경안전진단시스템 2017 공공 서울특별시 승용차마일리지시스템구축사업 2017 금융 금융결제원 CLS 웹인터페이스개선사업 2017 공공 한국해운조합 표준툴선정, 내부업무시스템구축 2017 대학 동국대학교 증강현실콘텐츠 SW 개발 2017 기업 삼아알미늄 MES 재정비사업 2017 공공 하이퍼테크 지역정보개발원공기업경영정보시스템 1차 2017 기업 한국생산성본부 경영정보시스템 2017
SBGrid v2.5 국내최초의 Non ActiveX 기반그리드 Since 2013 그리드컴포넌트는 UI 툴의가장핵심요소로서 SBUx Ver 2.0 내에는국내최초 Non ActiveX 기반, 공공시장점유율 1 위제품인 SBGrid V 2.5 가기본탑재되어있습니다.
웹개발에서의 UI 와 Grid 23 UI 의핵심요소인 Grid 는화면개발에서 Multi-Record 를처리하는개발도구로특히, 국내환경에서많이사용되고있습니다. 웹개발에서 화면개발의 70% 라면, 화면개발중 Grid 의비중이대부분을차지할정도로비중이대단히높음. 전체 UI 영역 UI 중 Grid 영역의비중
웹 UI 개발의현실및그대안 24 현행웹화면개발시대부분개발자들은벤더종속비표준코딩을하는것에대한탈피와 N-Screen 가능을위한플랫폼종속탈피를희망 합니다. 또한사용자는 ActiveX 사용에따른보안및해킹취약점해소요구하는데이는오직웹표준사용만으로해결가능함. X-internet 기반의 UI Active-X, Plug-in Vendor 종속 Platform 종속 Only HTML & Javascript (Pure-Web, no-plugin) N- 스크린은하나의컨텐츠를여러장치에서동일하게보여주는기능을의미 One Source MultiUse
국내최초웹그리드출시 (Since 2013) 25 순수 HTML 기반제품으로웹표준준수, 높은성능, 안정성과기술지원, 생산성과특화기능의차별점을보유하고있습니다. 1 다양한데이터표현기능 2 사용자 UX 향상 3 사용하기편한확장기능 4 편리한외부인터페이스 다양한열유형지원 다양한데이터포맷및유형지원 말줄임 (Ellipsis) 기능 툴팁 (Tooltip) 뷰기능 데이터필터링 피벗테이블구성 편리한설정기능 열단위이동 (Move) Drag &Drop 지원 틀고정 (Fixed) CSS 지원 ( 테마구성 ) Cell 안에 HTML 표현 데이터정렬 (Sort) Cell 병합 (Merge) 부분합계 (Subtotal)/ 누계처리 트리뷰 (Group) 지원 사용자정의수식 행간자동순번 (Sequence) M S Excel 파일읽기및저장 XML 및 JSON 데이터연동 컨텍스트메뉴기능 타솔루션연동 ( 리포팅툴등 )
SBGrid 특징 26 SBGrid 는국내최초로웹표준으로개발된 no-plugin 제품으로 N-Screen 이가능하고, 자체기술로개발된국산제품이기에기술지원및국내환경에맞는커스트마이징이가능한제품임. 웹표준준수 높은성능 1 HTML,CSS,Javascript No-plugin, N-Screen X M L / JSON DATA 표현 2 경쟁제품대비높은성능제공 Active X제품에준하는성능제공 데이터분할표현처리사용 One SourceMulti Use 가장많은그리드기능 안정성과기술지원 생산성과업무환경에특화 3 조달쇼핑몰구매실적 56% 자체기술로개발되어기술지원이용이하고커스트마이징지원 개발가이드사이트운영 데모사이트 :www.sbgrid.co.kr 4 별도의코딩없이간단한설정으로다양한기능사용 Excel 연동, 한셀연동, Sort, Merge, 누계, 합계, 사용자수식 3-Party 리포팅툴연계
다양한그리드화면구현 27 다양한그리드화면구현
쉽게따라하기 : 그리드 API 28 손쉬운개발지원 상세한 API 내역 쉽게따라하기
웹표준준수 29 국방전자조달시스템
시큐어코딩보안약점점검결과 30 SW 보안약점점검보고서 http://trinitysoft.co.kr/
그리드분야 1 위 31 유일한객관적시장점유율평가기준인조달쇼핑몰구매실적기준으로프로젝트건수, 프로젝트금액모두 50% 이상을점유제품 프로젝트건수대비기준, 최근 3 년간 프로젝트금액대비기준, 최근 3 년간 U 사, 13% W 사, 4% W 사 32% I 사, 26% 소프트보울, 57% I 사 13% 소프트보울 52% U 사 3% 2018.01 기준
SBGrid 주요적용프로젝트 32 최초적용후성공적인프로젝트평가속에기관표준혹은기관주요제품으로채택되어다수시스템에적용 기관표준제품으로선정예시 기관주요제품으로선정예시 의료방사선안전관리플랫폼구축결핵통합관리시스템스마트검역시스템구축감염병자동신고체계구축 폐자원에너지종합정보시스템폐기물부담금관리시스템상시모니터링시스템폐기물직매립제로화시스템
소프트보울
소프트보울신인도 34 재무결산기준 5 년연속매출액대비 15% 이상당기순이익을내고있는건실한재무구조기업 재정에대한신인도 매출및수익성분석 재무제표이익분석 성장성지수 C A E B 수익성지수 구분 2014 2015 2016 매출액 17.5 억 18.5 억 18.9 억 당기순이익 2.01억 2.73억 2.33억 상위 상위 상위 수익성 10%~20 % 10%~20% 10%~20%
회사일반사항 35 회사일반현황과주요상훈및인증 SBUX GS 인증 SB Grid GS 인증 W3C 멤버 회사명 대표자 설립일 소프트보울 이태규 2013 년 5 월 15 일 주요사업분야 주요인증 소재지 UI 개발솔루션, UI/UX 컨설팅, SW 유지보수 이노비즈, 벤쳐기업, 서울형강소기업 서울시금천구가산디지털 2 로 108, 뉴티캐슬 901 호 벤쳐기업확인서 기술혁신형 INNO-BIZ 기업부설연구소 대한민국 SW 품질대상 (SBUx2.0) 대한민국소프트웨어기술대상우수상수상 (2014 년도 )
주요레퍼런스 32 해외 해외
주요레퍼런스 33 350 억규모 온나라클라우드시범 Data.go.kr Data.go.kr 인구총조사
주요레퍼런스 34
주요레퍼런스 35
주요레퍼런스 36
주요레퍼런스 37
Epilogue Unique example for User experience UI/UX 전문개발사로써기치를내걸고오직한길을줄기차게달려왔기에제품개발기술력에대한자부심과일에대한열정은최고를꿈꾸는강소기업입니다. 항상고객의편에서서더나은비즈니스를지향하는소프트보울이되겠습니다. 제품문의 : 이태규대표. 02-2038-3320 010-9265-3336 e x p e r t @ s o f t b o w l. c o. k r