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

Technology Delivers the Happiness 1
ExtJS MVC 아키텍처를 활용한
모니터링/관제 시스템 구축 사례
2014.05.16
김연진 부장 / yjinkim@inzent.com

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의 의미
USER
EXPERIENCE
VISUAL
DESIGN
CONTENT
STRATEGY
HI-FI
Prototyping
Concept
INTERATION
DESIGN
INFORMATION
ARCHITECTURE
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
EFFICIENT
FEASIBLE
ACCURATE
MEANINGFUL
INTERACTIVE
PERSONALIZED
SUPPORTIVE
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 : 다이나믹한 화면 구성, 반응형 웹디자인 가능
<STORAGE>
<TYPE>
<MOTION>
<VIDEO>
<3d>
<AUDIO>
<GAMES>
HTML5 표준기술과 UX
- 브라우저 기반 동일한 실행환경 : Browser-based Runtime
- N-Screen 대응 : Multi Use, Multi Platform, Multi Device
- 웹앱 기술의 표준화
사용자 가치 기반의 UX 환경
- BYOD(Bring Your Own Device) : Any Platform / Device
- 스마트 디바이스 : Mobile, Semantic, Social, Seamless
- 크로스 브라우징 : One Source Multi Use, Multi Platform

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
SECURITY
CACHING
LOGGING+AUDIT
DB 3rd Party
WEB SERVICE
MODEL
CONTROLLER
VIEW
LAYOUT HELPERS
ANY WEB CLIENT
RESPONSE
PRESENTATION
LOGIC
APP
LOGIC
BUSINESS RULES
LOGIC / WORKFLOWS
DATA
HTML
CSS
JAVASCRIPT
MEDIA(VID,AUD,IMG)
JSON
PLAIN TEXT
XML

Ⅱ. Sencha Ext JS 그리고 MVC 아키텍처2. Sencha ExtJS4.x의 MVC 아키텍처
Spring MVC
- JAVA 웹어플리케이션을 위한 MVC 프레임워크
- 디스패처 서블릿, 모델, 뷰, 컨트롤러
CLIENT
Dispatcher
Servlet
Handler Mapping
Controller
View Resolver
View
Sencha MVC 아키텍처
- 클라이언트 사이드의 JS MVC 아키텍처 제공
- 유지보수와 확장 용이성
- 모델, 스토어, 뷰, 컨트롤러
Application
Model
View
Controller
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. 모니터링/관제 솔루션 구축사례
인젠트의 경험치를
최고의 수준으로…

What
can 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 AGENTWeb
SOCKET
HTTP/ 웹서비스사설망/VPN
HTTP
(관제서비스/이벤트)
HTTP/
웹서비스

모니터링/관제 시스템 업무 흐름도
업무 흐름도
단말기 사용자 단말기 관리자 시스템 사용자 시스템 관리자
업무흐름 설명
자산관리
단말기에 대한 자산 등록/이관/폐기 프로
세스를 관리를 한다.
이용신청/
승인
단말기 이용 신청 및 승인을 통해 인증된
사용자가 사용이 가능하도록 한다.
모니터링/
관제
수령 장비의 지정 범위/시간 내에 업무
수행에 대해 모니터링하고, 범위를 벗어
나거나 분실 등 사고 발생 시 단말기 제어
명령을 통해 사용을 통제한다.
통계/
이력관리
영업점별 / 기기별 사용 현황 등 축적된
데이터를 활용하여 통계/이력 관리를 한다.
단말 이용 신청
단말기 조회/신청
단말 이용 신청 결과
자산관리
장비 등록/배정/폐기
단말 이용신청 승인
사용자 관리
사용자 정보
등록/수정
단말 수령
/업무 수행
지정 범위/시간 내
업무수행
모니터링/관제
단말 제어 명령
장비배정/폐기 승인
모니터링/관제
통계/이력 조회단말 반납
단말 제어 수신
단말 제어 명령

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

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

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

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

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

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

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

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

IV. 엔터프라이즈 UX 솔루션으로의 확장1. 고객의 요구 수용 및 유연한 대응
실질적인 개인화
- 사용자가 불필요한 수작업과 프로세스를 경험하지 않도록 솔루션을 진화시키도록 함
실제적인 모니터링/관제 구현
- 고객이 필요한 기능을 위한 타겟 포인트 설정 및 이벤트 데이터 수집/전달
유효한 통계/이력 데이터 표현
- 수집된 이벤트 데이터를 통한 유효한 통계 이력 데이터의 표현
에이전트 기능 강화 구현
- 데스크탑 웹앱/네이티브앱을 구현하기 위한 하이브리드 형식의 에이전트 필요
에이전트 로컬 자원/정보 수집/전송
- 로컬 자원 및 시스템 정보에 대한 이벤트 수집/전송을 위한 에이전트 기능 강화
3rd Party 솔루션과의 연계 기능 구현
- 에이전트를 통한 웹앱 한계 극복
1) 실제적인 모니터링/관제 기능 수용
2) 에이전트 기능강화로 로컬 자원 활용 극대화

정리하면서 …
궁극적인 목표는 진화하는 솔루션을 만들어야 한다.
그래야 오래가는 솔루션이 될 수 있다.
I. 이미 사회는 단순 감성 UX를 넘어서 유기적이고 지능화된 솔루션을 원하고 있다.
II. 그러기 위해서는 아직도 갈 길이 멀다.
III. 그러나 , 다행히 완성도가 높은 프레임워크가 존재하며 솔루션 회사의 경험가치를 기반으로 응용을
구현하여 문제를 해결할 수 있다.

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

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

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

Mehr von 미래웹기술연구소 (MIRAE WEB)

Mehr von 미래웹기술연구소 (MIRAE WEB) (17)

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