제품소개서 Business UX Platform Based on Unified JavaScript Framework 2017.01
Agenda 1. nexacro platform for UX changed Business 2. Business UX Suite 3. TOBESOFT BUX & Support
1. nexacro platform for UX changed Business 1) Front-End 개발방식의진화 2) nexacro platform 개요 3) nexacro platform 시스템개념도 4) nexacro platform Unified Framework 5) nexacro platform 시스템아키텍처 6) Changed Value of nexacro platform : 고객에게가치를제공하는주요기능및성능
1) Front-End 개발방식의진화과정 이제는 JavaScript Framework! JavaScript MVC 기반의 Framework가 Front-End 영역의개발기술로도빠르게급부상하고있음. Google의 Angular.js와투비소프트의 nexacro unified.js는대표적인 JavaScript MVC 기반의 Framework! X-internet RIA MiPlatform XPLATFORM 높은개발생산성편리한기능빠른성능 Rich UI/UX like Flex 높은개발생산성편리한기능빠른성능 HTML4 HTML 컴포넌트 HTML 빌더 JavaScript library JavaScript Framework pure web 단순하고쉬운개발환경사용자접근성향상배포 / 설치용이 IB Sheet WiseGrid SB Grid WebSquare5 exbuilder5 HTML5 N-Screen No Download Made in 서버 jquery ExtJs Backbore.js HTML 혼용확장성 Angular.js Ember.js nexacro unified.js Client side Framework MVC Framework 구조코딩량의감소양방향바인딩 OSMU (One Source Multi Use) Mobile 대응 4
2) nexacro platform 개요 (1) nexacro platform (structured by Unified Framework) JavaScript Framework 기반의유연한운영환경 Selectable Download, One Source Multi Use 지원 반응형, 적응형웹의장점만을모아서 N-Screen 대응 4GL 급의개발툴로 WYSIWYG 기반의편리한개발환경제공 풍부한비즈니스컴포넌트를제공하여높은개발생산성보장 5
2) nexacro platform 개요 (2) 하나의개발툴로, 개발에서운영까지다양한업무를지원 One Tool, Multi Use 통합개발환경 공공서비스 해외서비스 nexacro unified.js No Install Browser MES 개발자 운영자 퍼블리셔 6
3) nexacro platform 시스템개념도 고성능의 UI 엔진과 V8 JavaScript 엔진탑재 Multi Channel Network Tier Presentation Tier Biz Logic & Data Tier Data (XML,SSV,CSV) Compaction UI Resource HTTP,HTTPS HTTP,HTTPS Web Server 프로젝트소스 (html, js, css, json 등 ) nexacro platform Server Library (nexacro-api) nexacro Browser(option) HTTP,HTTPS nexacro platform nexacro Browser JavaScript Engine Struts Spring IBATIS Any WAS(WEB) Servlet/ JSP Multi Browser Multi OS Developer IDE 개발환경 (nexacro studio) Source Generator Any DBMS 7
4) nexacro platform Unified Framework 8
5) nexacro platform 시스템아키텍처 9
6) Changed Value of nexacro platform : 고객에게가치를제공하는주요기능및성능
6-1) 통합개발환경제공으로기업의경쟁적우위요소실현 1 통합개발툴 nexacro studio WYSIWYG 기반의 RAD 개발툴인 nexacro studio 제공. 많은컴포넌트와손쉬운화면배치로화면개발이쉽고편리. 사용자의취향에따라감성적, 심미적인 Theme 기능을구현하여 UX 실현. 11
6-1) 통합개발환경제공으로기업의경쟁적우위요소실현 2 다양한에디터를통해컴포넌트에다양한효과제공 Style Property Editor Pseudo Editor Property Editor 가장많이사용하는 Visual Effect 기능을보다편리하게활용가능하도록별도편집창제공 대표적인기능을아이콘화하여 개발자들의편의성높임 Pseudo 기능의손쉬운적용 Component 의상태변화값을손쉽게한 Set 으로적용 Component 별 disabled, focused, pushed, selected, mouse over 등의효과를일일이코딩하지않고툴에서바로적용가능 컴포넌트자체 각컴포넌트의속성을표시하고수치및선택으로수정 Style Property/Property/Pseudo/CSS 등각종디자인에디터및직관적디자인기능을제공하여개발자도파워포인트처럼기업용 Application에디자인을손쉽게적용할수있도록지원, 간단한조작만으로유려한디자인이가능해짐으로써개발자와디자이너의협업기능을높이고동시에개발자또는디자이너의상대방영역까지상호보완가능. 12
6-1) 통합개발환경제공으로기업의경쟁적우위요소실현 3 다양한디바이스이벤트통합지원 Finger Touch Mouse click </> one source 스마트폰과데스크탑의액션이벤트를확장하여스마트폰 (touch) 이벤트에따른처리와데스크톱 (mouse) 이벤트처리를별도로하지않고하나의소스코드로처리가능. 다양한디바이스의지원이가능해지면서각각디바이스에맞는액션이벤트처리를해주어야하나, nexacro platform 에서는하나의이벤트처리로가능하여개발편의성제공. 13
6-1) 통합개발환경제공으로기업의경쟁적우위요소실현 4 다양한프레임워크와의연계 기존비즈니스로직의재사용 제품기능의유연성을통해 TCO 절감효과동반 Presentation Layer Business Layer Resource Query.xml nexacro Xfdl.js HTTP Request HTTP Request nexacro platform Dataset servlet.xml Dispatcher Servlet nexacro platform Dataset Controller A nexacro Controller 공통 Controller Application Context nexacro platform Service Service A Service B Query Service DAO 공통 DAO Query DAO A Query DAO B Database 적용사례 건강보험심사평가원이전자정부표준프레임워크를도입하여표준화한 HIRA 표준프레임워크 구성도 Anyframe, 전자정부표준프레임워크, 기타오픈소스기반의프레임워크와연계가능 14
6-2) 멀티 IT 환경지원을통해사용자접근성확대 1 Multi Platform & Browser 지원 크롬, 인터넷익스플로러, 파이어폭스, 사파리, 오페라등표준웹규격을지원하는멀티브라우저에서구동가능. 15
6-2) 멀티 IT 환경지원을통해사용자접근성확대 2 디바이스별다양한화면크기에대한최적화지원 (1/3) 최적의화면을찾아내어배치하는 MLM(Multi Layout Manager) MLM 미리작성해놓은다양한크기의 Layout 을화면생성시자동또는선택적으로추가할수있는기능. 개발된소스만으로테스트가능. Layout 별배치정보등다른구성의내역만기술 nexacro platform 엔진은변경된 Layout 에해당하는화면정보자동적용 16
6-2) 멀티 IT 환경지원을통해사용자접근성확대 2 디바이스별다양한화면크기에대한최적화지원 (2/3) 최적의화면을지원해주는 Step 기능 : Step 이많은화면을손쉽게개발 Layout Step 구성실행화면 1 2 3 Portrait Landscape 1 2 3 제공기능 화면영역분할확장기능. 스마트폰에서많은정보를보여주고자할때화면전환과달리화면내에서화면분할보기기능을제공. 페이지단위로나누어화면배치가능. 17
6-2) 멀티 IT 환경지원을통해사용자접근성확대 2 디바이스별다양한화면크기에대한최적화지원 (3/3) 화면크기에적절하게레이아웃을유지해주는 Position 기능 실행화면 Left : 00% Right : 00% 기기별화면크기에배치된컴포넌트의레이아웃을적절하게유지해주는기능을제공. 이때컴포넌트의크기를비율단위 (%) 로구성하여다양한화면크기에적당한컴포넌트크기가유지되도록지원. 18
6-2) 멀티 IT 환경지원을통해사용자접근성확대 3 다국어정보처리방안 로그인시해당다국어정보요청 한글사용자 다국어 DataSet 에서는 Data Binding 을통하여각해당컴포넌트와 Text Binding 처리 다국어메타정보요청 다국어메타정보요청 DB nexacro platform 다국어정보로변경 다국어메타정보추출 일본사용자 메타정보관리 (admin) 다국어정보 DataSet Load & Binding nexacro platform 은기본적으로 Unicode 환경이며바인딩객체를통한효율적인다국어처리지원과 validation 의일괄적용및변경기능으로최소공수로구현가능. 19
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 1 nexacro studio 를통해미려한 40 여가지의통합컴포넌트를제공 Grid Tab Tree View Mask Edit CheckBox 소트, 필터, Tree 등기능데이터값의입력 / 수정셀에이미지및색상삽입기능 Tab Page 구성 Contents 또는 URL 로연결 트리형태의데이터표시구성및이미지변경기능 특정형식의 Mask 사용입력 String 형과 Number 형표현기능 체크를통한상태수정및값설정 Spin ListBox Edit TextArea Radio Edit 와 Up/Down 버튼을이용해숫자입력, 변화량지정시이용 항목선택기능 한줄로구성된문장입력 여러줄로구성된문장입력 Inner Dataset 내용열거, 값선택기능 Button Static Combo Image Calendar 이벤트처리및사용자입력이미지사용가능 텍스트및그룹표기문자열, 컴포넌트를묶는사각형구성이미지및색상삽입기능 입력값선택, 내용구성및 Search 기능리스트 GIF/JPG/ICO/PNG 이미지사용가능 상태수정및날짜설정 20
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 2 Cross Browsing 자동화 JavaScript Generator Cross Browsing 처리자동화 Mobile Browser Desktop Browser 21
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 3 컴포넌트간 Drag & Drop 인터페이스지원 동적인화면구성 사용자가원하는형태를동적구성 컴포넌트에포함된데이터의편집 컴포넌트자체도 Drag & Drop 을통한 Rich experience 제공 Spread sheet 와 Grid 의 Cell Multi block 간의 Copy& Paste 가능 레이아웃변경가능, 포틀릿기능 Drag & Drop 으로화면구성 사용자가원하는형태의화면을동적으로구성가능 Grid, Tree view 등컴포넌트에포함된데이터의이동, 삽입, 삭제등편집가능 22
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 4 효율적 Line Debugging 기능 Call Stack, Variables, Watch 창 디버깅툴바 Break Point 설정 Break Point 지정예제 디버깅결과 오류발견시간의단축을통해개발자의업무생산성을향상 nexacro studio 에서전체프로젝트단위또는개별화면단위실행가능 Line Debugging 시 Step into, Step over, Step out 등의기능제공 Watch/View 의 Expression 기능강화 Break point 의컨디션지정및 enable/disable 특정함수나서브루틴실행시상위호출함수관계확인가능한보다상세해진 Call Stack 기능 Break Point 의 Toggle 설정및글로벌북마크기능 Object 의하위멤버내역표시 Expression Editor 제공 23
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 5 효율적 CSS Auto Setting 기능 nexacro platform 타사플랫폼 Composite CSS 컴포넌트단위관리 Simple CSS HTML 오브젝트단위관리 Object1 Object1 Object2 Object3 : Object1 Object2 Object1 Object2 Object3 : Object1 Object2 Object3 : Object1 Component Component Radio 클래스지정예시 <input type = "radio" class= rd_class" name="rd" value=" 선택 1"> 선택 1 <input type = "radio" class= rd_class" name= rd" value=" 선택 2"> 선택 2 <input type = "radio" class="rd_class" name= rd" value=" 선택 3"> 선택 3 타사의경우 HTML Objects 단위로설정하는단순한 CSS 로되어있어수정및유지보수시에컴포넌트제어에어려움발생. Open Source 의경우에서도 script 에서직접디자인값을지정해야하는번거로움발생. nexacro platform 은 Composite CSS( 컴포넌트단위 ) 로컴포넌트를직접수정및유지보수가가능하여쉽게컴포넌트별로세팅이가능. 24
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 6 서버세팅없이자체적인미리보기가능 미리보기실행 미리보기 ( 시뮬레이션 ) 개발 ( 디자인 ) 작업창 nexacro platform 은단순화면미리보기기능외에분석 / 설계단계에서의디자인및기능검증그리고테스트를지원할수있도록설계 서버연동없이실환경과유사한 Prototype 진행과사전기능검증을통하여개발기간단축효과제공 25
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 7 Intelligent inspector 기능 Tool Navigation 지원 UI Logic Code Complete 기능 UI Logic Code Complete 기능 개발자가화면에서사용하는컴포넌트및사용자생성함수, 변수등에대한 Tool Navigation 을지원 26
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 8 데이터셋과컴포넌트간바인딩기능제공 Client 번호이름직급전화 Binding DB 1 홍길동 부장 00 2 이순신 차장 00 3 김철수 과장 00 Server 4 이영희대리 00 Grid Component Dataset Component Binding Drag&Drop Binding Property Binding Edit Component Combo Component 이름 : 홍길동이름 : 홍길동 Drop Binding Grid Component 번호 이름 직급 전화 1 홍길동 부장 00 Drag Grid Component 번호 이름 직급 전화 1 홍길동 부장 00 2 이순신 차장 00 Background Color 변경 2 이순신 차장 00 3 김철수 과장 00 4 이영희 대리 00 3 김철수 과장 00 4 이영희 대리 00 Grid Component 해당컴포넌트의속성값을데이터셋을통하여설정 다양한컴포넌트에데이터셋바인딩이가능하여편리한개발환경지원 데이터셋컴포넌트를타컴포넌트로 Drag & Drop만으로손쉽게바인딩가능 연동된칼럼변경시동적으로자동변경되어개발공수를감소시킴 소스코드의최소화및개발생산성을향상시켜운영적자원을감소시킴 27
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 9 데이터상태변화관리기능 원본 Grid 원본 Dataset DataBase 번호 이름 직급 전화 1 홍길동 부장 00 2 이순신 차장 00 Binding Value 번호 이름 직급 전화 NORMAL 1 홍길동 부장 00 NORMAL 2 이순신 차장 00 NORMAL 3 김철수 과장 00 NORMAL 4 이영희 대리 00 번호 이름 직급 전화 1 홍길동 부장 00 2 이순신 차장 00 3 김철수 과장 00 4 이영희 대리 00 3 김철수 과장 00 4 이영희 대리 00 Dataset Server 수정된 Grid 수정된 Dataset 2 이순신차장 00 번호이름직급전화 Value 번호이름직급전화 박문수 1 3 1 홍길동 부장 00 3 2 박문수 과장 00 4 이영희 대리 00 5 손오공 사원 00 1 2 3 NORMAL 1 홍길동 부장 00 DELETE 2 이순신 차장 00 UPDATE 3 박문수 과장 00 NORMAL 4 이영희 대리 00 INSERT 5 손오공 사원 00 수정된내용만 Server 에업로드 5 손오공사원 00 Client 1 삭제 2 수정 3 삽입 데이터상태변화관리기능 _ 추가, 수정, 삭제상태자체관리가능 데이터수정및편집후 Server 에반영하기전까지기존상태를유지하고있어관리가용이 Server 에는최종수정된내용만업로드되어속도는빠르게, Server 의부하는낮춰줌 28
6-3) Intelligent UI/UX 기능제공으로개발생산성향상 10 웹표준준수 Standard 준수 XML W3C XML(extensible Markup Language) 1.0(4 th Edition) Specification 준수 DOM W3C DOM (Document Object Model) API Level 3 준수 Java Script ECMA-262, 3rd CSS W3C CSS Level 3 Spec 표준지원 Business UX 구현을위한세부요소기술을활용함에있어 XML 1.0, DOM Level3, CSS Level3 및 JavaScript 의 ECMA-262 spec 을준수함으로써국제표준, 범용기술을통해개발및유지보수를보다용이하게지원한다. 이로써개발자는벤더종속적이아닌다양한개발표준을습득할수있으며기존개발리소스의재활용용이. 29
6-4) 풍부한기능속성을통해 UX 만족도증대 11 Grid component : 주요기능 Multi Row Tree Grid Cell Merge Grid component 의주요기능 Cell Marge 두개이상의셀을병합하는기능. Summary 셀의합계를나타내는기능. Multi Row 두개이상의 Row를하나의 Row처럼설정가능. Cell Fix 화면에서셀이동시고정부분을설정할수있는기능. Tree View 그리드의형태를트리형태로표현가능. 30
6-4) 풍부한기능속성을통해 UX 만족도증대 12 다양한사용자조합키 (function key 등 ) 제어기능 Alt+s Alt+F 키보드기반의업무처리 ( 예 ) Alt+s F9 F2 도움말팝업 ctrl+m F8 F9 Alt+O Alt+F 고객상담내역현재상담고객특이사항 Quick Menu Open 검색창바로가기 F6 Alt+S SMS 리스트확인 Alt+O ctrl+m 고객 SMS 보내기 F7 Alt+F1-4 ctrl+y 작업화면별링크 Alt+F1 Alt+F2 Alt+F3 Alt+F4 사용자지정바로가기 1 사용자지정바로가기 2 사용자지정바로가기 3 사용자지정바로가기 4 Web 기반어플리케이션의한계를뛰어넘어기능키및핫키지원 ( 단정의된브라우저기능키사용제한 ) 31
6-4) 풍부한기능속성을통해 UX 만족도증대 13 다양한형식의파일업 / 다운로드기능및 Excel Export 기능지원 업무용모든파일업로드 / 다운로드 Excel Export 기능 Legacy.xls(.xlsx) HTML5 Server Module Export 다양한형식의파일 다양한형식의파일업로드및다운로드가가능하여편리한사용자환경을제공 EXCEL Export 기능을통하여데이터의재활용이가능하도록사용자편의성제공 32
6-4) 풍부한기능속성을통해 UX 만족도증대 14 형상관리툴연계기능 연동설정창 Toolbar Log on, Log out, Check in, Check Out, Undo Check Out, Show History, Rollback 등형상관리툴에서갖고있는기능을 nexacro studio 와연동처리가능 프로그램소스를자동백업하여소스의이력관리가능 ex) SVN, CVS, Source Safe, Harvest 연동지원. 33
6-5) 스마트한성능실현으로기업의업무효율성강화 통합자바스크립트프레임워크 (Unified JavaScript framework) 를적용, 아키텍처의근본적인변화를통해기존자사제품대비 3배이상의비약적인성능향상실현 nexacro platform 의향상된성능 DOM, Render Tree의효율적인객체관리를통한기업용 UI/UX 구현의최적화를실현 투비소프트만의독자적 Element 구현을통한성능의효율성제고 - Element를 Component의최소단위객체로사용하고, Component는고유기능만을처리하도록하여화면처리코드를최적화 - Element의화면배치, 색상변경등의화면구성요소를적시에일괄처리하도록하여, 화면처리성능저하의주원인인 Reflow, Repaint 발생횟수최소화 Reflow : HTML Element 를 Layout, position 의변화로재계산하는과정 Repaint : 색상변경또는 Reflow 과정으로인해웹페이지전체또는일부영역을새로또는다시그리는과정 대용량데이터처리성능제고 빠른컴포넌트브라우징 Open API 연동시처리속도향상 34
2. Business UX Suite 1) TOBESOFT Business UX Suite 2) TOBESOFT Business UX Suite for SAP
1) TOBESOFT Business UX Suit Business UX Suite 구성도 Back End Application Server Web Server Client Legacy Application (option) Web Browser Environment DBMS Mobile HTML JavaScript CSS Web Service/ SOA nexacro Browser Environment ERP X-API(JSP/Servlet) Android Windows ios Developer JavaScript Generate 36
2) TOBESOFT Business UX Suite for SAP Business UX Suite 구성도 Back End Application Server Client BW SAP ERP Custom built Platform Web Browser Environment 37
3. TOBESOFT BUX & Support 1) BUX (Business User experience) : 스마트기업실현의솔루션 2) Service Life Cycle : Support
1) BUX : 스마트기업실현의솔루션 (1) 최근의기업들은다양한업무환경이슈에대응하면서 ROI( 투자자본수익률 ) 을높일수있는 RTE(Real Time Enterprise) 로서의 스마트기업 (Smart Enterprise) 을지향 스마트기업 실현의솔루션이자 nexacro platform 의비전으로서 BUX(Business User experience) 제시 BUX(Business User experience) 의실현은 nexacro platform 이꿈꾸는미래 39
1) BUX : 스마트기업실현의솔루션 (2) BUX (Business User experience) 기업의비즈니스환경에최적화된 UI UX 구현을통해기업에가치있는비즈니스관점 (VIEW) 을제공. 플랫폼의통합 (Unified Platform) Multi Browser/Device/Screen size 를하나의소스로최적화 / 구동되는 One Source Multi Use 로통합된비즈니스환경구현 데이터중심의통합 (Unified Data Frame) OLTP / OLAP 성업무를모두지원하여 데이터지향적 인기업시스템의 UI UX 를효율적이고생산성있게향상 개발환경의통합 (Unified Development Process) 다양한프로젝트환경 ( 인하우스개발및패키지 UI 고도화등 ) 에서도동일한개발환경제공함으로써개발생산성을극대화 기업용 UI UX 개선을통해최소비용으로최대혁신효과창출. 모바일, 클라우드, 빅데이터등최신기술을적극수용하고기업용 UI UX 를통합지원. [ 투비소프트 BUX 개념도 ] 40
2) Service Life Cycle : Support 투비소프트는품질관리, 교육, 컨설팅으로시작하는사전서비스조직에서부터기술지원에이르는 사후서비스조직까지모두갖춤으로써제품서비스라이프사이클을완벽히구축하고있습니다. 이를통해글로벌 SW 기업과견주어도손색없는신속하고안정적인서비스를제공하고있습니다. 41
사람이컴퓨터시스템을컨트롤하기위해서는 'UI', 즉사용자인터페이스가꼭필요합니다. 또한보다원활하고효율적으로시스템을운용하여사용자의만족을이끌어내기위해서는 'UX, 즉 ' 사용자경험 ' 에대한고려가반드시수반되어야합니다. 투비소프트는 2000년창립이래지금까지단한번도한눈팔지않고사람과시스템의소통에꼭필요한 UI 및 UX, 특히 ' 기업고객 ' 이필요로하는시스템의 UI와 UX만을생각해온, 기업용 UI UX 시장점유율 1위기업입니다. 자료관련문의 : 마케팅팀 marketing@tobesoft.co.kr