[Sencha 엔터프라이즈 웹애플리케이션 세미나] MVC 아키텍트를 적용한 모니터링 관제시스템 구축 _인젠트

Technology Delivers the Happiness 1

ExtJS MVC 아키텍처를 활용한모니터링 / 관제 시스템 구축

사례 2014.05.16

김연진 부장 / [email protected]

Technology Delivers the Happiness

I. UX 실현기술 HTML5 표준과 Sencha

II. Sencha Ext JS 그리고 MVC 아키텍처

III. ExtJS 4.x 응용 구축사례

IV. 엔터프라이즈 UX 솔루션으로의 확장

Contents

ExtJS MVC 아키텍처를 활용한모니터링 / 관제 시스템 구축

사례


I. UX 실현기술 HTML5 표준과 Sencha

1. UX 의 의미

2. 인간중심의 인터랙션 디자인

3. HTML5 표준기술과 UX

4. 웹어플리케이션 프레임워크

사용자 가치 ? 인간중심 UX?


I. UX 실현기술 HTML5 표준과 Sencha1. UX 의 의미

USEREXPERIENCE

VISUALDESIGN

CONTENTSTRATEGY

HI-FIPrototyping

Concept

INTERATIONDESIGN

INFORMATIONARCHITECTURE

TYPOGRAPHY

UI DESIGN

사용자

Product

UI

인터렉션

서비스(Contents)

Brand Image

AD Image

고객지원 경험

판매점 분위기

제품 포장

UX( 사용자경험 )

사용자 경험 (UX)

- 사용자가 제품 , 시스템 , 서비스 사용 혹은 기대되는 사용 결과에서 오는 인식과 반응 (ISO 9421-210:2010)

- 사용자가 제품 , 서비스와 그것을 제공하는 회사와 상호작용하면서 경험하게 되는 모든 경험의 총합 (Nielsen Norman

Group)

- 지각 , 인지 , 행동 , 감성 등 4 가지 교차영역에 존재하는 사용자의 능력 , 제약사항 , 전후 맥락 등의 상호작용 (Jesse

James Garrett)


I. UX 실현기술 HTML5 표준과 Sencha1. UX 의 의미

사용자 경험 (UX) 가치는 ?

- 특정 상품 / 서비스를 이용하는 사용자들의 경험적

우선순위

- 이해당사자들에게 새로운 상품 / 서비스에 반영되는 가치

공유

- 리서치 결과와 기술적인 설계 자료간의 연결 매개체

- 모델링을 통한 사용자 경험의 개념적 청사진 정리 SIMPLE

EASY

USEFUL EFFICIENTFEASIBLE

ACCURATE

MEANINGFULINTERACTIVE

PERSONALIZEDSUPPORTIVE

CONVENIENT

중요도와 연관성에 따른 UX 키워드- 유용한 , 효율적인 , 쉬운 ,

- 단순한 , 편리한 , 지원되는 , 실현가능한 , 정확한

- 의미있는 , 상호작용의 , 개인화 가능한

UX 가치

리서치 모델링

전략 도출

프로토타입핑


I. UX 실현기술 HTML5 표준과 Sencha2. 인간중심의 인터랙션 디자인

인간중심적인 사용자 가치 기반 UX 패러다임의 변화

정보화( 실용 )

인프라

제 2 세대 제 3 세대 제 4 세대

하드웨어

소프트웨어

서비스

제 1 세대

유선 네트워크 무선 네트워크 유무선 통합 네트워크 사물지능 네트워크

PC 모바일 기기 스마트 기기스마트 바디스마트 월드

문자 기반의 UI 그래픽 기반의 UI 내추럴 기반의 UI 유기적 UI

정보화 지식화 사회화 지능화

지식화( 편의 )

사회화( 감성 )

지능화( 가치 )

사용자 가치 기반의 UX 패러다임의 변화- IT 발달에 따라 사용자의 요구를 수용 / 발전 - 보다 인간중심으로 UX 패러다임 변화

- 실용 - 편의 - 감성 - 가치 기반으로의 진화 - 사용자와의 상호작용을 통한 지능화 , 자동화 ,

심리스한 사용 환경


I. UX 실현기술 HTML5 표준과 Sencha2. 인간중심의 인터랙션 디자인

디자인 사용성- 어떻게 하면 사물을 효율적으로 사용할 수 있는가 ?

- 상호작용에서 경험하는 간결함과 정확도를 추구하는 가치

- 효율성 , 학습 용이성 , 사용 만족성

디자인 심미성- 어떻게 구성하면 좀 더 편안하게 구성할 수 있는가 ?

- 대중의 공감을 얻는 아름다움의 창조

- 객관적 조형미와 브랜드 , 디자이너의 전문지식의 결합된

결과


I. UX 실현기술 HTML5 표준과 Sencha3. HTML5 표준기술과 UX

HTML5 주요기능- Semantics : RDF, Microdata/formats …

- Web Storage : Web DB, Indexed DB

- Geolocation API : 브라우저 기반 위치정보

- Web Socket : TCP for Web

- Canvas / SVG(Scalable Vector Graphic)

- 오디오 / 비디오 : 별도 플러그인 없이 재생 가능

- Web Workers : 쓰레드 , 백그라운드 스크립트

실행

- CSS3 : 다이나믹한 화면 구성 , 반응형 웹디자인

가능

<STOR-

AGE>

<TYPE>

<MO-

TION>

<VIDEO>

<3d>

<AUDIO>

<GAMES

>

HTML5 표준기술과 UX

- 브라우저 기반 동일한 실행환경 : Browser-based Run-

time

- N-Screen 대응 : Multi Use, Multi Platform, Multi De-

vice

- 웹앱 기술의 표준화

사용자 가치 기반의 UX 환경- BYOD(Bring Your Own Device) : Any Platform / De-

vice

- 스마트 디바이스 : Mobile, Semantic, Social, Seamless

- 크로스 브라우징 : One Source Multi Use, Multi Plat-

form


I. UX 실현기술 HTML5 표준과 Sencha4. 웹어플리케이션 프레임워크

종류 주요 특징 아키텍처

Sencha

- HTML5 표준을 준수하는 ExtJS 기반 웹어플리케이션

자바스크립트 프레임워크

-데스크탑에서 모바일까지 지원

-도표 제작 및 엔터프라이즈 지원 강화

- 클라우드 기반 다양한 스크린 사이즈 디바이스 대응

jQuery

-다이나믹 웹 및 모바일 지원 강화로 사용자층 확대

-클라이언트 사이드 자바스크립트 라이브러리

- 애니메이션 , 이벤트 제어 , CSS 지원 등

HybridWeb

- 표준 웹기술 기반 , 네이티브 앱으로 변환하는 형태

-멀티 플랫폼 지원 , 웹앱 한계 극복

- PhoneGap, Appcelerator Titanium

사용자 가치기반 UX 실현 도구 웹어플리케이션

프레임워크- 인터렉티브 웹사이트 -> 웹어플리케이션 프레임워크로 진화


Ⅱ. Sencha Ext JS 그리고 MVC 아키텍처

1. MVC 아키텍처 의미와 장점

2. Sencha ExtJS 4.x 의 MVC 아키텍처

3. UX 실현을 위한 Sencha 프레임워크

Sencha ExtJS4.x 와MVC 아키텍처


Ⅱ. Sencha Ext JS 그리고 MVC 아키텍처1. MVC 아키텍처 의미와 장점

MVC 패턴- 사용자 입력과 화면을 업무로직으로부터 분리

- 모델 : 비지니스로직 , 데이터 등 정보를 저장하는 객체

- 뷰 : 모델 데이터를 UI 에 표현하는 객체

- 컨트롤러 : 뷰와 모델 사이의 데이터 / 로직의 흐름 제어

MVC 아키텍처 적용 장점- 모델 - 뷰간 결합도를 낮춤

- 유연하고 확장이 용이한 구조 설계 가능

- 어플리케이션 코드관리 / 유지보수 용이

- 비즈니스 로직 변경 개발비용 감소

BROWSER FLASH/SIVERLIGHT RSS/ATOM READER WEB SERVICE CALL DESKTOP APP MOBILE APP

PARMAETERS ENTITLES

SEC

UR

ITY

CA

CH

ING

LO

GG

ING

+ A

UD

IT

DB 3rd PartyWEB SERVICE

MODEL

CONTROLLER

VIEW

LAYOUT HELPERS

ANY WEB CLIENTRESPONSE

PRESENTATIONLOGIC

APPLOGIC

BUSINESS RULESLOGIC / WORKFLOWS

DATA

HTMLCSSJAVASCRIPTMEDIA(VID,AUD,IMG)JSONPLAIN TEXTXML


Ⅱ. Sencha Ext JS 그리고 MVC 아키텍처2. Sencha ExtJS4.x 의 MVC 아키텍처

Spring MVC

- JAVA 웹어플리케이션을 위한 MVC 프레임워크

- 디스패처 서블릿 , 모델 , 뷰 , 컨트롤러

CLIENT

DispatcherServlet

Handler Mapping

Controller

View ResolverView

Sencha MVC 아키텍처- 클라이언트 사이드의 JS MVC 아키텍처 제공

- 유지보수와 확장 용이성

- 모델 , 스토어 , 뷰 , 컨트롤러Application

Model

ViewController

Store

Profile

request

response

response Model

Controller

request

request

ModelAndView

View name

View


Ⅱ. Sencha Ext JS 그리고 MVC 아키텍처3. UX 실현을 위한 Sencha 프레임워크

Sencha Ext JS 4.x : Modern HTML5 App Dev for the Desktop

- Modern App Framework

- Plugin-free Charting

- MVC Application Architecture

- Cross Platform Browser Compatibility


Ⅲ. ExtJS 4.x 응용 구축사례

1. 인젠트의 경험가치

2. Sencha ExtJS4.x 기반 솔루션 구현

3. 모니터링 / 관제 솔루션 아키텍처

4. 모니터링 / 관제 솔루션 구축사례

인젠트의 경험치를 최고의 수준으로…


Whatcan we

•국내 다수의 대형 기관의 내부 / 대외 연계 시스템 구축을 통해 검증된 솔루션

• J2EE 표준을 준수하는 SOA 기반 솔루션

•송 · 수신 기관 모든 업무 프로토콜 , 거래유형 및 비즈니스 서비스 수용

• AnyFrame/Java, AnyFrame/C, DevOnJava, DevOnC, BANCS, Proframe 등 다양한 핵심시스템 연계

•확장성 및 유연성을 고려한 고가용성 시스템 아키텍처 구성

Have

we

•국내 금융기관 채널 인터페이스 통합 솔루션 시장 점유율 1 위의 솔루션

• 100% 자체 개발 솔루션으로 신속한 고객응대와 요구사항을 전적으로 수용 , 고객의 요구 사항을 미리 파악하여 충족시킬 수 있는 기술 보유

•내부 / 대외 연계 시스템 프로젝트 수행 노하우를 겸비한 PM 및 전문 개발 인력

•최근 3년간 본 사업 관련 프로젝트 지연율 0% 달성

•다수의 프로젝트를 성공적으로 완수하여 프로젝트 수행사로부터 공로상 수상

•국내 최고 내부 / 대외 연계 시스템의 비즈니스 미들웨어 구성을 위한 기술 및 경험을 보유한 인력 구성

•경험으로 얻어진 타사 사례를 토대로 리딩 (leading) 하며 사업수행

•선행된 개발 경험을 바탕으로 위험요소 사전 파악 / 조치 및 최상의 운영을 보장하는 시스템 구축

•장애 발생 시 신속하게 대응하고 시스템을 효율적으로 운영하기 위한 유지보수 체계

•체계적인 교육훈련방법 제시 및 운영

•시스템의 효과적인 자체운영능력 확보 지원

•정기 / 비정기적 시스템 예방점검

You

for

III. ExtJS 4.x 응용 구축사례1. 인젠트의 경험가치


III. ExtJS 4.x 응용 구축사례2. Sencha ExtJS4.x 기반 솔루션 구현

Sencha ExtJS4.x 기반의 시스템 구축 배경- 솔루션 제공 /납품에 따른 고객의 요구

▷ 채널통합 솔루션 제공에 따른 채널서버 모니터링

요구

▷ 단말통합 솔루션 제공에 따른 단말 모니터링 / 관제

요구

▷ 공과금자동기 등 금융 IT 기기 모니터링 / 관제 요구

- 단말통합 솔루션에 대한 웹앱 구현 필요

▷ 크로스브라우징 , ActiveX-Free, HTML5 표준

적용

Sencha ExtJS4.x 의 선택 이유- 웹앱 구현을 위한 JS 프레임워크

- HTML5 표준 지원 및 완성도 높은 JS 프레임워크

- ExtJS4.x 에서 제공한 MVC 아키텍처

- GPLv2 및 상용 라이선스 정책

- 지속적인 기능 향상

Cross Browsing


III. ExtJS 4.x 응용 구축사례3. 모니터링 / 관제 솔루션 아키텍처

레이어별 적용 프레임워크- Back End Layer : Spring F/W 기반 서비스 구현

- Presentation Layer : Sencha ExtJS 4.x 기반 UI

구현

- Device Layer : 이벤트 수집 및 전송을 위한 에이전트

구현

Back-End Layer

Presentation Layer

Device Layer

모니터링 / 관제 서비스

(Spring F/W 3.2.6)

Sencha ExtJS 4.x( 크로스 브라우징 )

에이전트디바이스 드라이버

모니터링 / 관제 솔루션 아키텍처

디바이스 브라우저 App. 서버 BackEnd

PC 에이전트

디바이스 에이전트

디바이스 드라이버

3rd Party 솔루션

JavaScript 엔진

HTML5 지원 브라우저

AJAX,JSON,XML

Sencha ExtJS 4.x 기반 UI

사용자 / 공지관리

DBMS

Legacy

External System

Spring App. F/W 기반 응용

자산관리 이용관리

모니터링 / 관제

통계 / 현황

릴리즈 관리


III. ExtJS 4.x 응용 구축사례4. 모니터링 / 관제 솔루션 구축 사례

모니터링 / 관제 시스템 개념도

고객사

내부망외부시스템 / 웹서비스

MCI 단말관리서버 관제서버

외부시스템


UI통합단말

단말기사용자

단말기관리자

고객사 내부망 / 공중망 고객사 내부망 / 공중망

HTTP /TCP(LEGACY

서비스 )

SOCKET AGENT AGENTWebSOCKET

HTTP / 웹서비스

사설망 /VPNHTTP

( 관제 서비스 /이벤트 )

HTTP /

웹서비스



모니터링 / 관제 시스템 업무 흐름도

업무 흐름도

단말기 사용자 단말기 관리자 시스템 사용자 시스템 관리자

업무흐름 설명

자산관리 단말기에 대한 자산 등록 / 이관 /폐기

프로세스를 관리를 한다 .

이용신청 /승인

단말기 이용 신청 및 승인을 통해

인증된 사용자가 사용이 가능하도록

한다 .

모니터링 /관제

수령 장비의 지정 범위 / 시간 내에

업 무

수행에 대해 모니터링하고 , 범위를

벗 어

나거나 분실 등 사고 발생 시 단말기

제어 명령을 통해 사용을 통제한다 .

통계 /이력관리

영업점별 / 기기별 사용 현황 등

축적된

데이터를 활용하여 통계 / 이력 관리를

한다 .

단말 이용 신청

단말기 조회 /신청

단말 이용 신청 결과

자산관리

장비 등록 /배정 /폐기

단말 이용신청 승인

사용자 관리사용자 정보 등록 / 수정

단말 수령/ 업무 수행

지정 범위 / 시간 내 업무수행


단말 제어 명령

장비배정 /폐기 승인


통계 / 이력 조회

단말 반납

단말 제어 수신

단말 제어 명령



모니터링 / 관제 시스템 MVC 디렉토리 구조 – Model

정의



모니터링 / 관제 시스템 MVC 디렉토리 구조 – Store 정의



모니터링 / 관제 시스템 MVC 디렉토리 구조 – View 정의



모니터링 / 관제 시스템 MVC 디렉토리 구조 – Controller

정의



모니터링 / 관제 – 자산관리 / 이용관리



모니터링 / 관제 – 자산관리 / 이용관리



모니터링 / 관제 – 모니터링 / 관제









모니터링 / 관제 – 통계 / 현황



모니터링 / 관제 – 통계 / 현황


IV. 엔터프라이즈 UX 솔루션으로의 확장

1. 고객의 요구 수용 및 유연한 대응고객의 요구는

계속 진화한다 .


IV. 엔터프라이즈 UX 솔루션으로의 확장1. 고객의 요구 수용 및 유연한 대응

실질적인 개인화- 사용자가 불필요한 수작업과 프로세스를 경험하지 않도록 솔루션을 진화시키도록 함

실제적인 모니터링 / 관제 구현- 고객이 필요한 기능을 위한 타겟 포인트 설정 및 이벤트 데이터 수집 / 전달

유효한 통계 / 이력 데이터 표현- 수집된 이벤트 데이터를 통한 유효한 통계 이력 데이터의 표현

에이전트 기능 강화 구현 - 데스크탑 웹앱 / 네이티브앱을 구현하기 위한 하이브리드 형식의 에이전트 필요

에이전트 로컬 자원 / 정보 수집 / 전송- 로컬 자원 및 시스템 정보에 대한 이벤트 수집 / 전송을 위한 에이전트 기능 강화

3rd Party 솔루션과의 연계 기능 구현- 에이전트를 통한 웹앱 한계 극복

1) 실제적인 모니터링 / 관제 기능 수용

2) 에이전트 기능강화로 로컬 자원 활용 극대화


정리하면서 …

궁극적인 목표는 진화하는 솔루션을 만들어야 한다 .

그래야 오래가는 솔루션이 될 수 있다 .

I. 이미 사회는 단순 감성 UX 를 넘어서 유기적이고 지능화된 솔루션을 원하고 있다 .

II. 그러기 위해서는 아직도 갈 길이 멀다 .

III. 그러나 , 다행히 완성도가 높은 프레임워크가 존재하며 솔루션 회사의 경험가치를

기반으로 응용을 구현하여 문제를 해결할 수 있다 .


감사합니다 .

Software

[Sencha 엔터프라이즈 웹애플리케이션 세미나] MVC 아키텍트를 적용한 모니터링 관제시스템 구축 _인젠트