웹그리드컴포넌트

SBGrid

웹UI/UX 개발도구SBUx ver 2.0

(주)소프트보울2016년

UI 개발툴

UI 제품연대기 2

UI/UX 시장의변화

1세대(X-internet)

컴포넌트기반 UI 개발도구다른Framework 유형및Library유형과와혼용이가능하며Library 유형의장점

을갖추고있으면서상대적으로코딩요소가적은점이장점

Angular JS 기반, MVVM 모델기반의최신기술적용SBUx는코딩량을줄이기위해Markup 기반에Tag Library제공

2세대(RIA)

3세대(HTML5)

•2000년대초반부터국내개발사중심으로안착

•Active-X 기반의빠른데이터처리속도지향

•4GL기반의개발환경지원

•쉬프트정보통신가우스, 투비소프트마이플랫폼, 컴스퀘어트러스트폼

•2000년대중,후반대부터어도비의개념도입

•다양한웹화면기능및다양한어플리케이션지원

•다양한브라우저및모바일지원이슈

•투비소프트엑스플랫폼,인스웨이브웹스퀘어, 토마토엑스리아등

•투비의넥사크로,인스웨이브웹스퀘어는2.5세대

•웹표준및웹접근성지원•One SourceMultiDevice/N-Screen지원•비종속성•소프트보울SBUx,센챠,AngularJS

UI/UX유형

Framework 유형UI개발도구-

국내UI 개발도구스타일

모바일에특화된bootstrap및개발도구jQuery등의Library와같은다양한컴포넌트들과연동이불가하고자체제공하는기능만사용가능WYSIWYG을통한화면배치는장점이지만배치하는그시점에고정좌표가되는비표준방식

Library 유형UI개발도구–

외산UI 개발도구스타일

다른Framework 와Library와혼용가능한점과DOM 처리, 반응형웹UI 처리에특화됨은큰장점하지만화면개발을위한코딩요소가너무많은점은국내개발자들에게큰단점으로지적

UI 개발툴의필요성 3

향후10년을내다보는UI솔루션의선정

•순수개발대비확장성,유연성이좋은컴포넌트보유및필요•정책의변화,업무의변화에유연하게대처변경할수있는UI개발솔루션필요•전자정부프레임웍등미래변화에대한대처

공통화를통한표준UI화면개발가능및다양한컴포넌트지원

• UI 화면개발의공통화/표준화작업에유연• 그리드컴포넌트외다양한30여개컴포넌트제공• 빠른데이터처리등의강점보유

뛰어난개발생산성파워풀한성능

•이클립스플러그인형태의통합개발환경지원(웹표준개발을가능케하는핵심)•플러그인을통한자체컴포넌트탑재및빠른개발지원기능•One SourceMulti 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 기능종속성비표준

라이브러리

오픈소스많은코딩낮은개발생산성

새로운UITool

범용개발환경웹표준유연성

/확장성

기능확장그리드

컴포넌트기반저가형개발생산성 (중간)

SBUx와AngularJS 6

1. 작성해야할자바스크립트코딩량을줄일수있다.

Angular JS는자체적으로MVC모델을제공하므로별도의MVC구

조를구현할필요가없습니다.게다가화면에노출되는View Data와

ModelData의양방향바인딩을지원하기때문에따로동기화코드를구

현할필요가없다.DOM을지정하는코드또한구현할필요가없기때

문에,이런여러가지특징덕분에일반Javascript나JQuery에비해더

짧은코드로기능구현이가능하고덕분에개발자는비즈니스로직에

더집중할수있습니다.

2. Angular JS의데이터모델은단순Javascript 객체이다.

AngularJS는다순Javascript객체를데이터모델로사용함으로서복

잡하지않고호환성이높습니다.또한모델의데이터와뷰의데이터가

바인딩되어있어,모델데이터가변경되면실시간으로뷰의데이터가

갱신되는구조로되어있어동기화가간편합니다.

3. 다양한UI컴포넌트를제공한다.

기존Html에서제공하지않는Map이나Graph,정렬기능을가진

Table 등 여러 UI 컴포넌트를 제공 합니다. 이 UI 컴포넌트는

Javascript함수호출형태가아닌태그명과속성을이용하여호출할수

있기때문에UI컴포넌트개발과비즈니스로직개발의업무를효과적

으로분리해줍니다.

4. 의존관계주입을 Javascript코드에서사용할수있다.

Javascript코드에서의존관계주입형태로컴포넌트를개발하기때문

에재사용이용이하고코드를복잡하지않게관리할수있습니다.

5. Html과 Javascript간의역할을명확히구분한다.

기존Html,CSS와Javascript는서로의존적인형태로설계되어있어

서로상대방의코드를파악하여구현해야하고한쪽을잘못수정하면

다른한쪽의기능이동작하지않는문제가발생할수있었습니다.반면

에AngularJS는Html,CSS영역과Javascript영역을명확하게분리하

였기때문에상대방의코드를알필요가없어자신이맡은부분에주력

할수있습니다.

[출처] Angular JS의장점들| 작성자피그마리오

SBUx의Concept 7

웹표준기술사용

HTML5, CSS3, JavaScript, HTTP(s), JSON,AJAX

컴포넌트기반UI 개발

쉬운개발

통합개발환경제공, MarkUp 형태의UI 개발, Template, Code Complete 등의다양한기능제공

세계적추세

AngularJS MVVM 제공, Bootstrap 반응형웹지원, jQueryUI로확장가능

직관적인UI 개발

주요기능객관적지표 8

구분 소프트보울 SBUx2.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 SourceMultiUse실현

•웹 표준을준수하여Bootstrap,jQuery등외부라이브러리와연동가능

•사용자UX 환경개선

•CSS,Theme 등을이용하여쉬운디자인적용

•SBGrid, SBChart등다양한컴포넌트제공

•2Way-Data Binding 을통한Thin Code추구.

•경량화된소스로인한빠른개발/ 쉬운유지보수가능

•간편한Default 속성관리기능으로손쉬운화면공통화가능

•편리한다국어지원

웹표준준수 강력한성능 미려한화면표현

SBUx콤포넌트 10

입력계열 선택계열 버튼계열 확장계열

•Input- Masking, Placeholder,

Format, Icon, 버튼, Mi

n/Max Length등

•Date Picker-Calendarlocale,

Format, Min/M

ax Day등

•TextArea-Placeholder, Min

/MaxLength, Au

to-resize등

•Select- Locale, enable/disa

ble, relate-select,

개별item CSS 적용

등

•Checkbox-사용자정의Check

value,Direction,

개별itemCSS 적용등

•Radio-개별itemCSS 적용등

•Listbox-개별itemCSS 적용,

자동필터링등

•Button- Large, Medium,

Small 버튼제공

•DropDown-Text, Button, Spl

it Button제공

•Popover-HTML, Header, in

put Tag 에적용

•Tabs-아이콘, 배지, 메뉴,

Direction,

Panel제공

•Alert-Case 별Alert

표현등

•Tree-노드에이미지, Che

ckbox 표현등

•Menu-고정형, Float 형메뉴,

Direction등

SBUx 콤포넌트2 11

SBUx예시화면

Input TagInput Multiple Select Input Select

TextArea

Buttons

Dropdown

Accordion

Carousel

Dialog

Pagination Tabs

Progressbar

Time

oltipTo

picker Popover Menu

Tree

SBUx IDE 기능#2 12

통합IDE에는Pre-View기능이있어눈으로확인해가면서하는직관적인개발이가능

Editor에서수정중별도의Browser 호출없이Tab 선택으로개발중인화면을바로확인할수있습니다.

Ctrl+Space 로호출되는 Content Assit에서SBUx Component 의 목록 및 사용 가능한속성의목록및설명을 제공합니다

Attribute 에 Mouse Over 시해당속성에대한설명을확인할수있습니다

SBUx IDE 기능#3 13

통합IDE에는Pre-View기능이있어눈으로확인해가면서하는직관적인개발이가능

Attribute에Mouse Over시해당속성에대한설명을확인할수있습니다.

Ctrl+Space로호출되는Content Assit에서 SBUx Component의목록및사용가능한속성의목록및설명을제공합니다.

SBUx IDE 기능#4 14

통합IDE에는Snippet 기능이있어다양한형태의템플릿생성을편리하게지원합니다.

Ctrl+Space로호출되는Content Assit에서 SBUx Component의목록및사용가능한속성의목록및설명을제공합니다.

미리정의된Template 또는사용자가정의한Template을Drag & Drop으로생성할수있습니다. 공통으로사용되는Layout 등을미리정의하여Export, Import 하여공유및재활용할수있습니다.

SBUx IDE(통합개발환경) 15

SBUxIDE는개발자가쉽고빠르게업무환경을구축할수있도록다양한기능을제공합니다.

•Component리스트화면을제공하여Drag &Drop으로Component생성

•Component Style 설정, 미리보기기능화면제공

UI편의성

•Template 기능제공하여공통화가능

•Tag형태를제공하여쉽게화면개발가능

•화면 Preview 기능을제공하여개발자가변동사항을확인하며개발

생산성 향상

• U I화면을재사용하기위한강력한 PPT, PDF내보내기기능제공

•내보내기Template 제공하여쉽게보고서작성가능

UI 확장기능

•Data Modeling 기능을제공하여화면과Legacy Data 와쉽게연동할수있는기능제공

•Component에서쉽게Data를사용할수있는방법제시

Data

Modeling

SBUx IDE특징 16

범용적인개발환경지원

•SBUx개발을위한마크업및Script Coding을위한소스Editor제공

•Code Assist및작성된소스를미리볼수있는Preview제공

•Data ModelingView,CSSView,Snippets등Drag & Drop으로다양한기능제공

• U I내용을재사용하기위하여보고서형식으로내보내기기능제공

•모델링된데이터를기반으로보고서형식으로내보내기기능제공

•보고서내보내기를위한Template 기능제공

개발생산성향상

보고서내보내기

기능제공(향후)

SBGrid v2.1국내최초의 Pure 웹그리드

웹개발에서의UI와Grid 18

UI의핵심요소인Grid는화면개발에서Multi-Record를처리하는개발도구로특히, 국내환경에서많이사용되고있습니다. 웹

개발에서화면개발의70%라면,화면개발중Grid의비중이대부분을차지할정도로비중이대단히높음.

UI중 Grid영역의비중

전체UI영역

웹UI개발의현실및그대안 19

현행웹화면개발시대부분개발자들은벤더종속비표준코딩을하는것에대한탈피와N-Screen가능을위한플랫폼종속탈피를희망

합니다.또한사용자는ActiveX사용에따른보안및해킹취약점해소요구하는데이는오직웹표준사용만으로해결가능함.

N-스크린은하나의컨텐츠를여러장치에서동일하게보여주는기능을의미One Source MultiUse

X-internet 기반의UI

Vendor종속

Platform종속

Active-X, Plug-in

Only HTML& JavaScript

(Pure-Web,no-plugin)

국내최초웹그리드출시 20

SBGrid는순수HTML 기반제품으로웹표준준수,높은성능,안정성과기술지원,

생산성과특화기능의차별점을보유하고있습니다.

•다양한열유형지원

•다양한데이터포맷및유형지원

•말줄임(Ellipsis) 기능

•툴팁(Tooltip) 뷰기능

•데이터필터링

•피벗테이블구성

1다양한데이터

표현기능

•편리한설정기능

•열단위이동(Move)

•Drag &Drop지원

•틀고정(Fixed)

•CSS지원(테마구성)

•Cell안에HTML 표현

2사용자UX향상

•데이터정렬(Sort)

•Cell병합(Merge)

•부분합계(Subtotal)/누계처리

•트리뷰(Group) 지원

•사용자정의수식

•행간자동순번(Sequence)

3사용하기편한

확장기능

• M S Excel 파일읽기및저장

•XML및JSON데이터연동

•컨텍스트메뉴기능

•타솔루션연동(리포팅툴등)

4편리한외부

인터페이스

국내최초웹그리드출시_2 21

•조건 :약23,000건의데이터 •기본시간 : (약15초)

•방식 : 조회하여그리드로표현하는화면

•23,000건조회요청후Server Side 및네트워크소요시간

•상기경우 jqGrid 크롬브라우저에서는처리불가능[브라우저에서강제종료]

•약 12배차이의성능분석결과

구분 jqGrid SBGrid

Server Side 3분30초 4초

네트워크소요시간 3분45초 15초

빠른데이터처리성능

기존jqGrid를사용하는고객이속도문제로사용에불편을느껴대안을검토하던중특정화면을SBGRID로변환하여테스트한사례입니다.

시점:2014년1월.(환경관리공단폐기물관리스시템적용시BMT자료)

SBGrid특징 22

SBGrid는국내최초로웹표준으로개발된no-plugin제품으로N-Screen이가능하고,

자체기술로개발된국산제품이기에기술지원및국내환경에맞는커스트마이징이가능한제품임.

•HTML,CSS,JavaScript

•No-plugin,N-Screen

• X M L / JSON DATA 표현•One Source Multi Use

•트러스트폼개발노하우기반•자체기술로개발되어기술지원이용이하고커스트마이징지원

•개발가이드사이트운영•데모사이트 :www.sbgrid.co.kr

•경쟁제품대비높은성능제공

•Active X제품에준하는성능제공

•데이터분할표현처리사용

•가장많은그리드기능

•별도의 코딩없이간단한설정으로다양한기능사용

•Excel 연동, 한셀연동, Sort, Merge, 누계, 합계,사용자수식

•3-Party 리포팅툴연계

1

3

2

4

웹표준준수

안정성과기술지원

높은성능

생산성과업무환경에특화

다양한그리드화면구현 23

다양한그리드화면구현

소프트보울다년간의UI개발전문인력중심

소프트보울신인도 25

기술에대한신인도

•소프트보울은2000년설립되어UI시장의선두업체였던㈜컴스퀘어의트러스트폼개발자중심으로창업한회사

•다년간UI개발툴만개발한UI전문인력중심회사이기에업계에서기술력을인정받아빠르게성장중

새로운기술적용

(Active-X기반) (UI개발경험의Know-how로전혀새로운기술기반으로개발)

C A

BE

성장성지수

수익성지수

구분 2013 2014

유형 A

성장성 상위10%

수익성상위

10%~20%상위

10%~20%

재정에대한신인도

• 설립4년차기업이고재무결산기준3년연속영업이익내고있는건실한기업(매출액대비15%이상)

▶매출및수익성분석 ▶재무제표이익분석

구분 2013 2014 2015

매출액 7억 17.5억 18.5억

영업

이익 0.9억 2억 2.8억

상위 상위 상위

수익성 10%~20 10%~20 10%~20% % %

소프트보울신인도_2 26

SBUx에 대한신인도

•향 후10년을바라보는웹표준준수하는UI개발플랫폼.(AngularJS기반,MVVM모델)

•강한종속성을배제한새로운개념의개발방법(이클립스플러그인통합IDE제공)

•벤더사가기능을제공하지않으면구현이불가능한한계극복.(외부라이러리등자유롭게적용)

•경쟁제품처럼개발후Deploy하는것이아닌,개발소스와운영소스가하나인UI솔루션.

•Non 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호

벤쳐기업확인서

중소기업청표창장

대한민국소프트웨어기술대상우수상수상(2014년도)KSVT인증서기업부설연구소인증서

GS인증서(SBUx2.0)

Epilogue

UI/UX전문개발사로써기치를내걸고오직한길을 줄기차게 달려왔습니다.

당사연구소에걸려있는캐치프레이즈처럼제품개발기술력에대한자부심과일에대한열정은

최고를꿈꾸는강소기업입니다.

항상고객의편에서서 더 나은비즈니스를지향하는소프트보울이되겠습니다.

제품문의

김민성과장010-8589-8001 mskim@softbowl.co.kr

코드는내얼굴품질은자존심