웹그리드컴포넌트 SBGrid 웹 UI/UX 개발도구 SBUx ver 2.0 ( 주 ) 소프트보울 2016 년
UI 개발툴
UI 제품연대기 2 UI/UX 시장의변화 UI/UX 유형 1 세대 (X-internet) 2000 년대초반부터국내개발사중심으로안착 Active-X 기반의빠른데이터처리속도지향 4 GL 기반의개발환경지원 쉬프트정보통신가우스, 투비소프트마이플랫폼, 컴스퀘어트러스트폼 컴포넌트기반 UI 개발도구다른 Framework 유형및 Library 유형과와혼용이가능하며 Library 유형의장점을갖추고있으면서상대적으로코딩요소가적은점이장점 Angular JS 기반, MVVM 모델기반의최신기술적용 SBUx 는코딩량을줄이기위해 Markup 기반에 Tag 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, 센챠,AngularJS
UI 개발툴의필요성 3 향후 10 년을내다보는 UI 솔루션의선정 순수개발대비확장성, 유연성이좋은컴포넌트보유및필요 정책의변화, 업무의변화에유연하게대처변경할수있는 UI 개발솔루션필요 전자정부프레임웍등미래변화에대한대처 공통화를통한표준 UI 화면개발가능및다양한컴포넌트지원 UI 화면개발의공통화 / 표준화작업에유연 그리드컴포넌트외다양한 30 여개컴포넌트제공 빠른데이터처리등의강점보유 뛰어난개발생산성파워풀한성능 이클립스플러그인형태의통합개발환경지원 ( 웹표준개발을가능케하는핵심 ) 플러그인을통한자체컴포넌트탑재및빠른개발지원기능 One Source Multi Use( 하나의소스로멀티디바이스, 멀티브라우저지원 ) 순수개발대비투입되는인력비율낮음 성능및시스템확장및호환성에대한유연한대응 사업자가요구하는다양한기능충족의조건만족 자사개발제품이며핵심엔진의유연한커스터마이징가능 필요성능확보 ( 데이터처리속도등 ) ERP, 그룹웨어등레거시시스템과의연계가능
SBUx v2.0 차세대 UI 개발툴 국내최초 AngularJS 기반의 Two-way Binding 을지원하는 MVVM 패턴채택
SBUx 의추구 5 SBUxVer 2.0 은웹개발을쉽고빠르며획일성있게만들기위한웹표준을준수하는 UI/UX 개발도구입니다. 구글에서개발한 An gularjsframework 을기반으로하여 Two-way Binding [MVVM(Model-View-ViewModel) 패턴 ] 사용이가능합니다. RIA 자체개발환경많은 UI 기능종속성비표준 라이브러리 오픈소스많은코딩낮은개발생산성 새로운 UI Tool 범용개발환경웹표준유연성 / 확장성 기능확장 그리드 컴포넌트기반저가형개발생산성 ( 중간 )
SBUx 와 AngularJS 6 1. 작성해야할자바스크립트코딩량을줄일수있다. Angular JS 는자체적으로 MVC 모델을제공하므로별도의 MVC 구 조를구현할필요가없습니다. 게다가화면에노출되는 View Data 와 ModelData 의양방향바인딩을지원하기때문에따로동기화코드를구 현할필요가없다.DOM 을지정하는코드또한구현할필요가없기때 문에, 이런여러가지특징덕분에일반 Javascript 나 JQuery 에비해더 짧은코드로기능구현이가능하고덕분에개발자는비즈니스로직에 더집중할수있습니다. 2. Angular JS 의데이터모델은단순 Javascript 객체이다. AngularJS 는다순 Javascript 객체를데이터모델로사용함으로서복 잡하지않고호환성이높습니다. 또한모델의데이터와뷰의데이터가 바인딩되어있어, 모델데이터가변경되면실시간으로뷰의데이터가 갱신되는구조로되어있어동기화가간편합니다. 4. 의존관계주입을 Javascript 코드에서사용할수있다. Javascript 코드에서의존관계주입형태로컴포넌트를개발하기때문 에재사용이용이하고코드를복잡하지않게관리할수있습니다. 5. Html 과 Javascript 간의역할을명확히구분한다. 기존 Html,CSS 와 Javascript 는서로의존적인형태로설계되어있어 서로상대방의코드를파악하여구현해야하고한쪽을잘못수정하면 다른한쪽의기능이동작하지않는문제가발생할수있었습니다. 반면 에 AngularJS 는 Html,CSS 영역과 Javascript 영역을명확하게분리하였기때문에상대방의코드를알필요가없어자신이맡은부분에주력 할수있습니다. [ 출처 ] Angular JS 의장점들 작성자피그마리오 3. 다양한 UI 컴포넌트를제공한다. 기존 Html 에서제공하지않는 Map 이나 Graph, 정렬기능을가진 Table 등여러 UI 컴포넌트를제공합니다. 이 UI 컴포넌트는 Javascript 함수호출형태가아닌태그명과속성을이용하여호출할수 있기때문에 UI 컴포넌트개발과비즈니스로직개발의업무를효과적 으로분리해줍니다.
SBUx 의 Concept 7 웹표준기술사용 HTML5, CSS3, JavaScript, HTTP(s), JSON,AJAX 쉬운개발 통합개발환경제공, MarkUp 형태의 UI 개발, Templ ate, Code Complete 등의다양한기능제공 세계적추세 AngularJS MVVM 제공, Bootstrap 반응형웹지원, jqueryui 로확장가능 컴포넌트기반 UI 개발 직관적인 UI 개발
주요기능객관적지표 8 구분소프트보울 SBUx 2.0 A 사제품 B 사제품 화면개발스펙 HTML5 T 사만의고유스펙 xforms-html 혼용 화면배포방식 HTML5 배포 T 사만의고유스펙을 JavaScript 로 Deploy 화면접근시 xforms 를 JavaScript 로변환 기반기술 Angular JS,MVVM 기반 (DOM) JavaScript 기반 (Unified JS : 컴포넌트통합 ) JavaScript 기반 (Ajax) 지원스펙 ( 통신등 ) XML, JSON, CSV 등 XML, CSV 등 XML, JSON, CSV 등 소스동일 ( 개발소스, 운영소스 ) 동일별도별도 멀티 브라우징지원지원지원 멀티 OS 지원지원지원 UI 컴포넌트 30 여개 30 여개 ( 통합컴포넌트 ) 70 여개 ( 기본 HTML Tag 까지컴포넌트화 ) 개발환경 이클립스 - 플러그인 ( 자체기술 ) Studio ( 자체개발환경 ) Studio ( 이클립스플러그인 ) 대용량데이터 압축지원 / Lazy-Load 패킷압축기술 압축지원 보안 ( 소스난독화 ) 지원 지원 지원 반응형웹지원방식 Fully 지원 T사만의 MLM 기능으로지원중 일부컴포넌트만제한되게지원 CSS 지원 현재표준인 CSS3 지원 별도의 CSS 코딩필요 CSS2 까지만지원 모바일 별도개발구분없이개발 별도의 Hybrid로개발 별도의 Hybrid로개발 벤더기술지원의존도 낮음 높음 높음
SBUx 의특징 9 SBUxRuntime Engine 은 Web 표준을준수하는 JavaScript 기반 UI Framework Library 이며 강력한성능, 미려한표현을지향합니다. 강력한기능의콤포넌트집합체 웹표준준수강력한성능미려한화면표현 One SourceMulti Use 실현 웹표준을준수하여 Bootstrap,jQuery 등외부라이브러리와연동가능 2Way-Data Binding 을통한 Thin Code 추구. 경량화된소스로인한빠른개발 / 쉬운유지보수가능 간편한 Default 속성관리기능으로손쉬운화면공통화가능 편리한다국어지원 사용자 UX 환경개선 CSS,Theme 등을이용하여쉬운디자인적용 SBGrid, SBChart 등다양한컴포넌트제공
SBUx 콤포넌트 10 입력계열선택계열버튼계열확장계열 Input - Masking, Placeholder, Format, Icon, 버튼, Mi Select - Locale, enable/disa ble, relate-select, Button - Large, Medium, Small 버튼제공 Tabs - 아이콘, 배지, 메뉴, 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 콤포넌트 2 11 SBUx 예시화면 Input Tag Input Multiple Select Input Select Pagination Buttons Tabs Tooltip TextArea Dropdown Time picker Popover M enu Carousel Dialog Progressbar Accordion Tree
SBUx IDE 기능 #2 12 통합 IDE 에는 Pre-View 기능이있어눈으로확인해가면서하는직관적인개발이가능 Editor 에서수정중별도의 Browser 호출없이 Tab 선택으로개발중인화면을바로확인할수있습니다.
SBUx IDE 기능 #3 13 통합 IDE 에는 Pre-View 기능이있어눈으로확인해가면서하는직관적인개발이가능 Attribute 에에Mouse Mouse Over 시해당속성에대한설명을 Over 시확인할수있습니다대한설명을. 확인할수있습니다 Ctrl+Space 로호출되는 Content Assit 에서 SBUx Compon Ctrl+Space 로호출되는 Content Assit 에서 ent의목록및사용가능한속성의목록및설명을제공합니 SBUx Component 의목록및사용가다. 능한속성의목록및설명을제공합니다
SBUx IDE 기능 #4 14 통합 IDE 에는 Snippet 기능이있어다양한형태의템플릿생성을편리하게지원합니다. 미리정의된 Template 또는사용자가정의한Template 을 Drag & Drop으로생성 Ctrl+Space 로호출되는 Content Assit 에서 SBUx Compo 할수있습니다. 공통으로사용되는Layout 등을미리정의하여Export, Import 하여 nent의목록및사용가능한속성의목록및설명을제공합니공유및재활용할수있습니다. 다.
SBUx IDE( 통합개발환경 ) 15 SBUxIDE 는개발자가쉽고빠르게업무환경을구축할수있도록다양한기능을제공합니다. UI 편의성 생산성향상 UI 확장기능 Data Modeling Component 리스트화면을제공하여 Drag &Drop 으로 Component 생성 Component Style 설정, 미리보기기능화면제공 Template 기능제공하여공통화가능 Tag 형태를제공하여쉽게화면개발가능 화면 Preview 기능을제공하여개발자가변동사항을확인하며개발 UI 화면을재사용하기위한강력한 PPT, PDF 내보내기기능제공 내보내기 Template 제공하여쉽게보고서작성가능 Data Modeling 기능을제공하여화면과 Legacy Data 와쉽게연동할수있는기능제공 Component 에서쉽게 Data 를사용할수있는방법제시
SBUx IDE 특징 16 범용적인개발환경지원 개발생산성향상 SBUx 개발을위한마크업및 Script Coding 을위한소스 Editor 제공 Code Assist 및작성된소스를미리볼수있는 P review 제공 Data ModelingView,CSSView,Snippets 등 Drag & Drop 으로다양한기능제공 보고서내보내기기능제공 ( 향후 ) UI 내용을재사용하기위하여보고서형식으로내보내기기능제공 모델링된데이터를기반으로보고서형식으로내보내기기능제공 보고서내보내기를위한 Template 기능제공
SBGrid v2.1 국내최초의 Pure 웹그리드
웹개발에서의 UI 와 Grid 18 UI 의핵심요소인 Grid 는화면개발에서 Multi-Record 를처리하는개발도구로특히, 국내환경에서많이사용되고있습니다. 웹 개발에서화면개발의 70% 라면, 화면개발중 Grid 의비중이대부분을차지할정도로비중이대단히높음. 전체 UI 영역 UI 중 Grid 영역의비중
웹 UI 개발의현실및그대안 19 현행웹화면개발시대부분개발자들은벤더종속비표준코딩을하는것에대한탈피와 N-Screen 가능을위한플랫폼종속탈피를희망 합니다. 또한사용자는 ActiveX 사용에따른보안및해킹취약점해소요구하는데이는오직웹표준사용만으로해결가능함. X-internet 기반의 UI Active-X, Plug-in Vendor 종속 Platform 종속 Only HTML & JavaScript (Pure-Web, no-plugin) N- 스크린은하나의컨텐츠를여러장치에서동일하게보여주는기능을의미 One Source MultiUse
국내최초웹그리드출시 20 SBGrid 는순수 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 데이터연동 컨텍스트메뉴기능 타솔루션연동 ( 리포팅툴등 )
국내최초웹그리드출시 _2 21 빠른데이터처리성능 기존 jqgrid 를사용하는고객이속도문제로사용에불편을느껴대안을검토하던중특정화면을 SBGRID 로변환하여테스트한사례입니다. 시점 :2014 년 1 월.( 환경관리공단폐기물관리스시템적용시 BMT 자료 ) 조건 : 약 23,000 건의데이터 기본시간 : ( 약 15 초 ) 방식 : 조회하여그리드로표현하는화면 23,000 건조회요청후 Server Side 및네트워크소요시간 구분 jqgrid SBGrid Server Side 3 분 30 초 4 초 네트워크소요시간 3 분 45 초 15 초 상기경우 jqgrid 크롬브라우저에서는처리불가능 [ 브라우저에서강제종료 ] 약 12 배차이의성능분석결과
SBGrid 특징 22 SBGrid 는국내최초로웹표준으로개발된 no-plugin 제품으로 N-Screen 이가능하고, 자체기술로개발된국산제품이기에기술지원및국내환경에맞는커스트마이징이가능한제품임. 웹표준준수 높은성능 1 HTML,CSS,JavaScript No-plugin, N-Screen X M L / JSON DATA 표현 One Source Multi Use 2 경쟁제품대비높은성능제공 Active X제품에준하는성능제공 데이터분할표현처리사용 가장많은그리드기능 안정성과기술지원 생산성과업무환경에특화 3 트러스트폼개발노하우기반 자체기술로개발되어기술지원이용이하고커스트마이징지원 개발가이드사이트운영 데모사이트 :www.sbgrid.co.kr 4 별도의코딩없이간단한설정으로다양한기능사용 Excel 연동, 한셀연동, Sort, Merge, 누계, 합계, 사용자수식 3-Party 리포팅툴연계
다양한그리드화면구현 23 다양한그리드화면구현
소프트보울 다년간의 UI 개발전문인력중심
소프트보울신인도 25 기술에대한신인도 소프트보울은 2000 년설립되어 UI 시장의선두업체였던 컴스퀘어의트러스트폼개발자중심으로창업한회사 다년간 UI 개발툴만개발한 UI 전문인력중심회사이기에업계에서기술력을인정받아빠르게성장중 새로운기술적용 (Active-X 기반 ) (UI 개발경험의 Know-how 로전혀새로운기술기반으로개발 ) 재정에대한신인도 설립 4 년차기업이고재무결산기준 3 년연속영업이익내고있는건실한기업 ( 매출액대비 15% 이상 ) 매출및수익성분석 재무제표이익분석 구분 2013 2014 구분 2013 2014 2015 성장성지수 C A 유형 성장성상위 10% A 매출액 7 억 17.5 억 18.5 억 영업 이익 0.9 억 2 억 2.8 억 E 수익성지수 B 수익성 상위 10%~20% 상위 10%~20% 상위 상위 상위 수익성 10%~20 10%~20 10%~20 % % %
소프트보울신인도 _2 26 SBUx 에대한신인도 향후 10년을바라보는웹표준준수하는 UI 개발플랫폼.(AngularJS 기반,MVVM 모델 ) 강한종속성을배제한새로운개념의개발방법 ( 이클립스플러그인통합IDE 제공 ) 벤더사가기능을제공하지않으면구현이불가능한한계극복.( 외부라이러리등자유롭게적용 ) 경쟁제품처럼개발후Deploy 하는것이아닌, 개발소스와운영소스가하나인UI 솔루션. N o n ActiveX 기반임에도넥사크로와비슷한약 30여개의UI 컴포넌트 (Control) 제공. 레퍼런스신인도 주요레퍼런스 (Total 100 여개의레퍼런스보유 ) 표준 UI 제품선정 핵심그리드컴포넌트인 SBGrid 를포함해서약 100 여개가 넘는레퍼런스확보 (2013~ 2016 년 ) 2013년정부공공데이터포털구축도입 2015년통계청인구주택총조사구축도입 2015년 ING 생명신영업시스템구축도입 2015년SBI 저축은행리뉴얼구축도입 2016년기재부국고보조금통합구축도입(350 억사업 ) 2016년한국철도공사KOVIS 구축도입 (150억사업) 2016년한국씨티은행인터넷뱅킹전면도입 2015 년표준 UI 제품선정 ( 투비소프트, 인스웨이브경쟁 ) 2015 년표준 UI 제품선정
회사일반사항 27 회사일반현황과주요상훈및인증 중소기업청표창장 회사명 대표자 설립일 소프트보울 이태규 2013 년 5 월 15 일 주요사업분야 소재지 UI 개발솔루션, UI/UX 컨설팅, SW 유지보수 서울시금천구가산디지털 1 로 149 신한이노플렉스 2 차 1005 호 벤쳐기업확인서 KSVT 인증서 기업부설연구소인증서 GS 인증서 (SBUx2.0) 대한민국소프트웨어기술대상우수상수상 (2014 년도 )
Epilogue 코드는내얼굴품질은자존심 UI/UX 전문개발사로써기치를내걸고오직한길을줄기차게달려왔습니다. 당사연구소에걸려있는캐치프레이즈처럼제품개발기술력에대한자부심과일에대한열정은최고를꿈꾸는강소기업입니다. 항상고객의편에서서더나은비즈니스를지향하는소프트보울이되겠습니다. 제품문의김민성과장 010-8589-8001 mskim@softbowl.co.kr