Transcript FLEX

Flex 3
(Adobe Solution)
동부정보기술
목차
I. 웹 트랜드와 Flex
- 웹 트랜드
- web2.0과 Flex
- Flex 기반의 UI 개발
II. FLEX 3
- FLEX란?
- MVC에서 FLEX의 포지셔닝
- 아키텍처
- 소프트웨어 구성
- 특장점
- 운영환경
- 성능 비교 평가
- WAS기반 서비스
- 주요 기능 화면
- 기대효과
- 적용분야
III. 구축사례
뭍임 #1 표준기술 적용 내용
붙임 #2 주요기업 ‘X-Internet’ 표준 ‘Flex’ 선정
붙임 #3 SAP Flex 전략적 제휴
-1-
I. 차세대 UI 와 Flex
웹 트랜드
초기 웹은 단순 하이퍼링크를 통한 정보 전달 및 단순한 커뮤니케이션 수단에서
시작되었으나 다이나믹한 웹으로 발전하면서 사용자 중심 환경을 지향하는 웹으로 발전
웹의 변화
고
차세대 웹
SOA를 통해 구축된 비즈니스로직과 결합되어 유연하고, 확장 가능한
아키텍처 도입을 위해 X-Internet과 Web 2.0을 UI단에 적용
Web(open) API
XML
Web2.0
사용자 지향 웹 트랜드의 총칭
(사회적 상호작용과 개인의 참여)
사
용
자
니
즈
RSS1)
X-Internet
Web
SOA
 다이나믹한 웹 페이지
 C/S의 장점을 수용한 웹
 이기종 디바이스 지원
Flash
Web2.0
Ajax
HTML
 정보의 전달(단순한 하이퍼링크)
저  독립적이며 정적인 페이지
User Interface 처
리
표준 인터페이스
제공과 연결
시간의 흐름
1) RSS (Really Simple Syndication): 업데이트가 잦은 웹사이트 정보를 쉽게 확인할 수 있도록 만들어진 기술표준(RSS를 지원하는 블로그나
웹사이트에 새롭게 올려진 컨텐츠가 있을 경우 다른 곳에서 직접 찾아가 보지 않아도 리더 등을 이용해서 쉽게 업데이트 여부 및 내용을 확인할 수 있음)
-2-
I. 차세대 UI 와 Flex
Web2.0과 Flex
Flex는 국제표준을 준수하며 SOA를 통해 만들어진 비즈니스의 데이터를 사용자에게
표현하기 위한 다양한 형태의 표준 인터페이스를 제공
Web 2.0
다이나믹한 웹서비스 구현
C/S와 같은 풍부한 기능 및
빠른 처리 속도 제공
일반 소프트웨어 같은
유저인터페이스를 웹에서 구현
기술적 기반 요소
Flex
모든 종류의 웹 브라우저/
멀티 플랫폼 지원
플래시 플레이어
(전세계 인터넷이용자의 98% 사용)
풍부한 유저 인터페이스 환경
Rich Internet Application
(Flash 수준의 화려한 화면 제공)
스크립트 기반의 쉬운 개발언어
Action Script 3 / MXML
문자 인코딩 통일
UTF-8 기반의 웹 개발
API 공개를 통한 범용성 지원
Open Source API 제공
웹 개발 표준기술 준수
CSS, XML 지원
Ajax 기술과의 호환
Flex-Ajax Bridge 제공
멀티 OS 환경 지원
SOA를 통해 견고하게 구축된 비즈니스 프레임워크를 사용자에게 표현하기 위한 도구로 X-Internet과 Web 2.0의 기술이 들어간 UI 솔루션을
도입하여 사용자와 시스템간의 상호작용과 확장 가능한 사용자 인터페이스 제공을 위해 Flex3 도입
-3-
I. 차세대 UI 와 Flex 3
Flex 기반의 UI 개발
Flex는 SOA(Service Oriented Architecture) 사상이 적용되어 구축되는 다양한
업무시스템의 UI를 효과적으로 구현 할 수 있도록 지원합니다.
SOA 기반의
프레임워크
Flex 기반의 차세대 UI 구현
사용자중심의
웹기반 업무 환경
EP
• 업무 편의성을 고려한
사용자 인터페이스
• 풍부한 화면 표현
• 직관적인 UI
정보계
…
EAI
SOA 기반의
아키텍처
구축으로
표준데이터의
활용성 증대
향후
채널계
BPM
…
SOA를
통해 구축된
표준방식의
데이터를
사용자에게
제공
통합 UI
인터페이스
재사용
계약
상품
보상
영업
-4-
고객
…
융자
II. FLEX 3
FLEX 란?
XML(MXML) 및 스크립트 언어(ActionScript)로 플래시 기반의 RIA(Rich Internet
Application)을 개발할 수 있는 툴 및 서비스
• W3C 표준 플랫폼은 아니나, Flash는 가장
보급화된 미디어, Cross Browsing이 가능
• Visual Resource 내장, 변형, 확장 가능
• UI Component 및 Chart를 응용할 수 있는
완벽한 프리젠테이션 티어
• 비동기 기술의 꽃 - “ E4X(ECMAScript for
XML) ” (XML 전용 쿼리 엔진)
• LCDS (formerly Live Cycle Data Service)
- Adopter 통한 직접 동기화
-5-
II. FLEX 3
MVC에서 FLEX의 포지셔닝
• View단에 강점을 갖는 Rich Internet Application을 구현하는 도구
• MVC(Model View Control)의 3-tier 모델을 지원하는 구조(뷰와 비즈니스 로직의 분리)
FLEX의 포지셔닝 :
SOC(Service Oriented Client)
기반의 서비스 제공
View: RIA 기술
• Flex의 데이타서비스와 차팅 기능
제공으로 사용자중심의 인터페이즈
제공
View
리치인터넷
Model
Control
표준화된
데이타
공개 API
Model: 표준기술 및 데이터 사용
Control: 공개 API
• XML 표준 준수 및 UTF-8 코드 지원
• HTTP를 통해 XML 데이터 송수신
• Flex 프레임워크 및 SDK
• FABridge(Flex-Ajax Bridge)
-6-
II. FLEX 3
아키텍처
FLEX 3는 기존 Web개발/운영 환경(J2EE 및 .NET)에서 프리젠테이션 계층를 담당하며,
LCDS는 데이터서비스를 강화하여 대용량 데이터 처리 및 효과적인 기간계시스템을 연계
MXML은 Flex markup language로서
사용자 인터페이스를 표현하는 마크업언어 임
Browser/
Flash Player
MXML
Flex
Framework
Flex Data Services
Business tier
Integration tier
Resource tier
ActionScript
프리젠테이션 계층
플렉스에서 제공하는
컴포넌트 라이브러리
Flex Class Library
SOAP
APP
Server
JavaScript를 기반으로 하는 객체지향 언어로써 플래시 내의
여러 가지 시각적, 청각적 요소들을 제어하는 명령어를 조합한 코드
HTTP/S
AMF
RTMP/S
Data Management, Messaging
데이타서비스 계층
(WAS 기반)
EJB, POJO(Plain Old Java Object)
Connectors to data and legacy System
DBMS
LDAP
-7-
CRM/
ERP/CM
Web
Service
기간계시스템
연계
II. FLEX 3
소프트웨어 구성(1/4)
FLEX 3는 Flex Builder 2, LCDS(Live Cycle Data Services) 2, Flex SDK 2로 구성되어
있으며 각각 통합 웹개발툴, 어플리케이션 서버, 소프트웨어 개발 킷으로 사용 됩
구분
Flex Builder 2
LCDS
특징
통합개발환경
(IDE) 기반의
웹어플리케이션
개발툴
데이터 메시징 서
비스를 담당하는
어플리케이션 서
버
구성요소
플렉스 어플리케이션을 WYSWYG 방식으로 개발
코드어시스트, 컴파일러, 디버깅 및 소스버전 관리
시스템 연동 등의 부가기능 제공: Eclipse 기반
다양한 차트 및 산업별 특성에 맞는 섬세한 차트 제공
Visual Layout
Code Hinting
Debugging
Skinning and Styling
Charting
바이너리 데이터 전송으로 어플리케이션 성능 향상
Message Services
서비측 데이터 푸시 기능을 통한 실시간 데이터 제공
Data Management Service
데이터 동기화 기능을 활용한 다른 사용자와의 실시간
데이터 공유
RPC (Remote Procedure Call)
Services
FXML and ActionScript 3.0
Flex
SDK(Software
Development
Kit) 2
소프트웨어
개발 도구 모음
(무료 배포)
플렉스 어플리케이션 개발을 위한 100가지 이상의
Component 제공
플렉스 컴파일러를 비롯한 디버깅 툴 제공
어도비 홈페이지에서 무료 배포
-8-
Flex Framework: Components,
Containers, Layout Managers,
※ FLEX 3 : 어도비사(미국)에서
2006년
6월에 2.0 버전 발표
Behaviors, and
Effects
Flex Utilities: Compiler,
Debugger, Automated Testing
II. FLEX 3
소프트웨어 구성(2/4)
Flex Builder 2는 Eclipse 기반의 웹어플리케이션 개발 도구로서, 개발자나 디자이너에게
플래시 기반의 웹어플리케이션을 손쉽게 구현할 수 있는 사용자 인터페이스 제공
 메뉴
: 사용자 메뉴 제공
 통합 프로젝트 관리
: 프로젝트 별로 화면관리
기능 제공
 컨테이너
; 컨트롤을 담는 역할
(폼, 패널 등)
 컨트롤
: 기능 컴포넌트
(버튼, 달력, 그리드 등)
 디버그
: 컴파일 중 오류 발생 시
메시지 알림
 디자인
: 그림판 위에 개발자가 필요한
기능을 비쥬얼하게 적용
 소스
: 디자인 결과를 소스화면 생성
-9-
 속성
: 컨테이너와 컨트롤에 대한
속성값 적용
II. FLEX 3
소프트웨어 구성(3/4)
LCDS는 사용자 인터페이스(플래시 플레이어)와 연동하는 기능을 제공하고, 다양한 기간계
시스템에 접속할 수 있는 표준 API(데이터 파일 연계, 웹서비스 연계 등) 지원
LCDS구성도
RPC
Services
Data
Management
Messaging
Web Services
Data Sync
Collaboration
Http Service
OCC
Publish/Subscribe
Remote Object
Paging
Data Push
Service adapters
JavaTM
JMS
Hibernate
ColdFusion®
- 10 -
Runtime
Compilers
Flex Message
Service : 메시지 버스를
이용하여 클라이언트와 서버
간 통신 지원
RPC Service :
클라이언트와 원격으로
떨어진 서버의 자바 객체와
통신지원
Data Management
Service : 데이터 관리 및
연동
Runtime Compilers :
Just-in-time Compile,
컴파일 결과를 캐쉬서버에
저장하여 동일작업을
재컴파일 하지 않음
II. FLEX 3
소프트웨어 구성(4/4)
FLEX 3 어플리케이션을 구축하기 위해서 핵심 컴포넌트 라이브러리와 개발언어 컴파일
기능을 지원하는 무료 배포되는 소프트웨어 개발 도구 모음임
SDK 2 구성도
Flex Languages
MXML and ActionScript 3.0
Core Component
Components, Containers, Layout Managers,
Behaviors, and Effects
Flex Utilities
Compiler, Debugger, Automated Testing
기본적으로 MXML, ActionScript 언어를
지원하고, FLEX 3의 핵심컴포넌트와 컴파일러
등 유틸리티를 제공
에디터를 이용한 플렉스 어플리케이션 개발
콤보박스 컴포넌트
콤보박스 소스파일
개발자는 Flex SDK 2를 이용하여 SDK에서
제공하는 컴포넌트를 일반 에디터를 이용하여
소스파일 수준에서 수정할 수 있으며, 수정된
소스파일은 SDK의 컴파일 기능을 이용하여
커맨드 재컴파일 가능
커맨드에서 컴파일 예시
cd flexInstallDir/bin mxmlc --show-actionscript-warnings=true --strict=true -file-specs c:/appDir/hello.mxml
- 11 -
II. FLEX 3
특장점(1/5)
X-Internet 솔루션 FLEX 3는 공개 API , 동적인 유저인터페이스, RTE 실현 기능 및
사용자에 안정적인 서비스 제공을 통해 최적의 X-Internet 서비스를 제공
공개 API 제공 통한
확장성 제공
플렉스 프레임워크
및 SDK
Ajax 브릿지
(FABridge)
 Ajax의 API를 이용해서 플렉스의 컴포넌트를 생성하거나 속성이나 메쏘드를 컨트롤 할 수
있는 프레임워크 제공. 이것을 이용해서 Ajax로 되어 있는 화면과 플렉스 화면 쉽게 연동
RIA 기술 적용
 LCDS와 Chart 기능은 다른 RIA 솔루션이 제공하지 못하는 동적이고 미려한 유저
인터페이스를 쉽게 개발할 수 있게 해줌
동적인 유저
인터페이스 제공
Flex LCDS
CO-Browsing
RTE 실현
기능 제공
 무료로 제공되며 플렉스의 기본적인 컴포넌트들이 포함되어 있어 누구나 플렉스
어플리케이션을 개발하고 확장할 수 있음
 LCDS를 이용하면 실시간으로 보여주거나 교환할 수 있는 어플리케이션 구현을
용이하게 함
 데이터 동기화를 통한 협업 기능 제공
RTMS
 RTMS (Real Time Message Service) 기능을 제공함으로써, 업데이트된 정보만을
실시간으로 클라이언트 측에 데이터 전송
SMART Client
 클라이언트 측에 기본적으로 설치된 플래시 플레이어(Flash Player)를 통해 제공되므로
다양한 OS를 지원하며 정적 인터넷에 동적인 개념 부여
AMF
 AMF (Actionscript Message Format) 기능을 통해 뛰어난 압축기능 제공과 이렇게
압축된 데이터 통해 바이너리 통신을 함으로써 대용량 데이터 처리 성능과 보안성을 강화
사용자에 안정적인
서비스 제공
- 12 -
II. FLEX 3
특장점(2/5)
FLEX 3는 사용자에게는 플래시 기반의 안정적인 운영 환경 제공(전세계 사용자 PC환경의
98%에 플래시 플레이어 임베디드 됨)
플래시 특성
플래시 플레이어의 구동
• Flex Builder 2 를 이용하여 플래시 기반의 웹어플리케이션 개발
Browser
Flash Player
Data
Data
플래시 플레이어를
통해 구동되기 때문에
브라우저에 관계없이
동일한 화면 적용
가능(궁극적으로
플랫폼 독립성 지향)
Web Server
XML/ HTTP
REST
SOAP Web Services
Flex Data Services 2
J2EE Application
Server
플렉스 서버는
MXML코드를
SWF(플래시 실행
파일)로 컴파일 해서
사용자PC에 전송
Existing Application and Infrastructure
- 13 -
구분
내용
다양한 브라우저
지원
인터넷 익스플로러, 파이어폭스 등 다양한 브
라우저 지원
MAC, Unix 기반 브라우저 지원
일정한 화질 유
지
벡터그래픽(수학적 함수 관계에 의해 이미지
를 표현) 기반의 도구
이미지의 선, 면 등의 정보를 모두 좌표 값으
로 계산하기 때문에 이미지가 커지고 작아지
는 것과 상관없이 일정한 화질 유지
GIF에 비해 매우 작은 용량
뛰어난 압축률 플래시 안에 있는 비트맵 이미지, 사운드 파
일 재 압축 가능
동적 기능
정적 인터넷에 동적인 개념 부여
마우스의 움직임에 따라 내용이 다양하게 변
양방향 커뮤니케
화시키고, 사용자가 원하는 대로 내용 변경
이션
가능
스트리밍
큰 용량의 파일이라도 무리 없이 볼 수 있는
기능 지원
기술 지원
II. FLEX 3
특장점(3/5)
뷰스테이트(View States)는 Flex만 제공하는 특화된 기능으로 사용자 업무의 연속성을
보장하고 서버단에 네트워크 부하를 줄임으로써 효율적인 업무환경 제공
뷰스테이트(View States)를 이용한 최소 화면 구성: 동일 화면에서 관련 업무를 처리함으로 업무효율성 향상
(화면의 리로드(Reload)없이 업무의 연속성 보장)
예약일정 확인
A. 계약
B.고객정보
B. 고객정보
A.계약
A.계약
C. 약관
객실정보 확인
결재정보 확인
C.약관
확인
취소
C.약관
확인
B.고객정보
취소
확인
효율적인 업무개선
 Flex를 도입하여 미국의 on-
line상 고객 예약 절차를
기존의 7개 페이지에서,
1개의 UI로 획기적으로 줄인
사례
 Flex 도입 후, 사이트 예약율
100% 이상 증가
- 14 -
취소
II. FLEX 3
특장점(4/5)
FLEX 3 는 데이터의 동기화 뿐만 아니라 “비동기식 데이터 처리, 실시간 데이터 푸시,
데이터 압축 전송” 등을 통하여 웹어플리케이션 데이터처리 부분에 향상된 기능 지원
비동기 데이터 처리
사용자가 요구하는 특정부분의
값을 보여주기 위해서 전체
페이지를 리로드 하는 방식이
아니라, 해당 부분만 서버와
브라우저간 데이터통신(Ajax
Bridge)을 통해서 정보제공
실시간 데이터 푸시(Push)
데이터 압축 전송
사용자에게 정보제공
(변경된 정보 실시간 반영)
HTTP, RPC 외에 AMF를
통해 바이너리 압축 통신을
지원하여 고속 데이터 통신 및
보안성 강화
RTMS
(Real Time
Message Service)
데이터
서비스
AMF
(Actionscript Message Format)
데이터 모니터링
미들웨어
WAS
(Web Application Server)
데이터 수정
DB
- 15 -
Data
Data
Data
압축
Data
데이터
압축
0101
01001
…
바이너리
통신
II. FLEX 3
특장점(5/5)
Flex는 기본적으로 통신시 데이터를 바이너리 형태로 압축 전송 하기 때문에 네트워크
트래픽을 절감할 수 있으며, 페이징(Paging)기능을 이용한 Off-Line 통신 가능
Client / Server 단의 Caching 기능으로 인해서 불필요한 Data
요청을 감소시켜 네트워크 트래픽을 절감 할 수 있음
1) 캐싱 통신
• LCDS의 캐싱으로,
빠른응답 속도
3) Flex 의 Paging 전송 방식
Browser
• 클라이언트의 캐싱
으로, Off-Line통신
구현
Flash Player
서버 요청없이
Client
내부
Cache
동작
Temporary internet 로
files
(Cache 기능)
(
압
축
전
송
1
10
압
축
• 바이너리 형태의 압축
(통신보안)
)
• AMF(Action
Message Format)
형식으로 압축 전송
/
2) 데이터 압축통신
Flex 서비스의 추가 컴파일 작업없
이 Cache 내의 Data 전송
Flex Data Services 2
RPC Services 1)
Paging 기능을 적용하여 서버단에서 데이터 전송시
네트워크 대역폭을 고려해서, 데이터 분할 전송
DataManagement
Service 2)(Cache 내장)
1) RPC (Remote Procedure Call ) : 클라이언트와 원격으로 떨어진 서버의 자바 객체와 통신을 지원하는 서비스
2) DataManagement : 클라이언트와 서버간의 데이터 연결에 관련된 기능을 관장하는 서비스
3) LCDS (Flex Data Services) : 클라이언트와 서버간의 데이터 메시징 서비스를 담당하는 어플리케이션 서버
- 16 -
Data
Management
Flex Data
Services 2
Data
Data
Data
Data 가 수신완료 되지 않
아도
어플리케이션 실행됨
User
•클라이언트의 네트워크 대역폭과 어플리케이션 동
작 상황을 고려한 전송으로 네트워크 Traffic
절감 효과
•전체 Data 없이도 어플리케이션의 실행이 가능
하며, 빠른 실행속도로 User 의 만족성 증대
II. FLEX 3
성능 비교 평가
대용량 데이터 처리 결과 Ajax 또는 XML을 이용한 처리보다 10~20배 이상 빠른 것으로
측정되었으며, ECMAScript기반의 Flex의 ActionScript는 JavaScript의 성능을 대폭 개선
대용량 데이터 처리결과
개발언어 성능 BMT 결과
JavaScript
<응답속도>
40000
구분
(단위: 1/1000 초)
IE 6
FireFox 1.5
(Flash Player 9 )
배열 연결(Join)
(배열 size : 1000, 500 번 반복)
390
172
303
배열 정렬(Sort)
(배열 size : 1000, 500 번 반복)
437
687
414
Ajax
짧은 문자열 결합(Concatenate)
(50000번 반복)
390/407
391/406
159
XML
긴 문자열 결합(Concatenate)
(50000번 반복)
2266/4375
985/1032
165
Flex
문자열추출(substring)
(10000번 반복)
47
16
3
문자열 검색(indexof)
(40000번 반복)
284
219
103
Math.round(Math.random()*n)
(40000번 반복)
170
92
7
empty for loop (10 million times!)
2703
2813
25
misc test from a JS site 1
453
1280
45
MD5 Hashing(1000번 반복)
1969
1250
95
함수(Function) 호출 및 리턴
(80000 번 반복)
109
187
2
10000
0
1,000건
5,000건
10,000건 20,000건
<데이터 처리건수>
Flex는 평균 0.5초
이내 응답율 보임
 Flex는 대량 데이터 처리에 탁월한 성능을 보임
Action Script3
Firefox 1.5
30000
20000
(단위: 1/1000 초)
※ 상세한 데이터가 필요할 경우 고객사 실제 업무 환경에서 성능 테스트(BMT)
수행하여 자료 제공함
※ 출처 : http://www.oddhammer.com
- 17 -
II. FLEX 3
운영환경
FLEX 3는 크로스 플랫폼을 지향하는 솔루션으로 대부분의 OS, WAS, Device에 운영 가능
구
분
운영체제
웹어플리케
이션서버
(WAS)
브라우저
추천 H/W
어플리케이션 서버(LCDS)
 MS Windows 2000 Server, XP
Professional, 2003 Server(32- and
64-bit)
 Red Hat Server 3.x and 4.x
 SUSE Linux Enterprise Server 9,
on zSeries
 Solaris SPARC 9 and 10
 IBM AIX 5.3
 HP-UX 11i v2
개발툴(Flex Builder 2)
 MS Windows 2000 Pro & Server
XP(SP2) & XP Professional
2003 Server
 MAC
 Linux
 JRun 4 , Apache Tomcat 5.5.x
 BEA WebLogic 8.1 & 9
 IBM WebSphere 5.x & 6.x
 JBoss 4.0.3 SP1 & 4.0.4
 Oracle 10G AS (10.1.3)
 SAP WAS 6.40
해당 무
 Memory 1GB 이상
 Hard Disk 400MB 이상
사용자 환경
 MS Windows 98, Me, 2000, XP,
2003
 Mac OS X v.10.1.x, 10.2.x, 10.3.x,
10.4.x
 Linux
해당 무
해당 무
해당 무
 MS IE 5.5, 6.0 later Firefox 1.x,
 Mozilla 1.x, Netscape 7.x or later,
 AOL 9, Opera 7.11 or later
 Safari 1.x or later
 CPU : Intel® Pentium®
 RAM : 1GB 이상, HDD : 300MB 이상
 Intel® Pentium® II 450MHz
 RAM : 128MB 이상
※ 어도비 본사에서 현재까지 테스트 완료된 권장 운영 환경
- 18 -
II. FLEX 3
WAS기반 서비스
• Flex는 WAS(JSP엔진 기능) 위에 설치됨
: MXML코드를 SWF로 컴파일해주는 자바의 서블릿 외에 관련서비스가 구동됨
• FlexBuilder2.0에서 컴파일된 SWF를 IIS에서 서비스할 수 있음
Java 기반
.Net 기반
[사용하는 자바가상머신(JVM) 버전]
.Net환경에서의 IIS와 JSP처리엔진을 연동하고,
Sun 1.3.1, Sun 1.4.x 버전의 JVM
그 위에 Flex Data Service2.0을 추가로 설치하
웹스피어에 사용되는 IBM 1.3 or 1.4 버전의 JVM
면 .Net환경에서 플렉스를 사용 가능
웹로직에 사용되는 BEA JRockit 1.4 버전의 JVM
FLEX 런타임서비스
RPC서비스(WebService, HttpService)
J2EE
.NET
- 19 -
II. FLEX 3
주요 기능 화면(1/5)
▶ Rich media integration: 풍부하고 미려한 화면 적용, 미디어 통합
플래시 기반의
동영상 설명 화면
특징 및 가격 비교
- 20 -
II. FLEX 3
주요 기능 화면(2/5)
▶ Performance: 일반통신과 Flex 데이터 통신간 답변시간 비교(동일한 데이터 검색 시 20배 차이)
[FLEX3 Remote Object를 이용한 데이터 통신]
[Ajax를 이용한 데이터 통신]
- 21 -
II. FLEX 3
주요 기능 화면(3/5)
▶ Collaboration: 데이터 동기화(원격으로 떨어진 A, B 사용자가 같은 액션에 동일한 화면 공유)
[사용자 A]
[사용자 B]
- 22 -
II. FLEX 3
주요 기능 화면(4/5)
▶ Data Push: 주가의 실시간 업데이트, 실시간 정렬, 로(Row) 이동, 특정 기간 리포팅
서버에서 변경된 데이터를 클라이언트에 전송함으로써
실시간 자료 송수신 시스템에 적용 가능
- 23 -
II. FLEX 3
주요 기능 화면(5/5)
▶ Data manipulation: 즉각적인 산술 계산(다양한 그래프 및 산술결과의 신속한 출력)
- 24 -
II. FLEX 3
기대효과
Application 개발 측면
기술 측면
비즈니스 측면
• Client Side 기능의 확대
• Application 개발 및 유지보수 비용 절감
• 서버의 부하 감소
• Network 부하 최소화
• 표준화된 프로토타이핑 지원
• MVC 개발 모델 제공
• Ubiquitous 환경 지원
ROI 측면
개발, 배포 및 유지보수
사용자 편리성
• Application 개발/테스트 용이
• 대화식 환경을 통한 편리성 제공
• Client program을 PC에 설치할 필요가 없음
• 단일 화면 인터페이스로 인한 시간 절약
• 개발 및 유지보수 용이 및 비용 감소
- 25 -
II. FLEX 3
적용분야
• 기존의 복잡한 데이터 화면을 효과적으로 표현함으로써 기간계시스템 적용에 용이
• 플래시를 이용하여 가독성이 높은 사용자 중심의 웹페이지 적용
[기간계시스템]
[디자인센터]
- 26 -
① 동부그룹
RTE+
Dashboard
• 동부 그룹 전사정보를 한 눈에 보기 위한 임원용 EIS 시스템을 Flex로 구축
• 도입효과
- 직관적이고 풍부한 UI 제공
- 브라우저 내에 C/S 환경 구축
- 한 눈에 전반적인 상황 파악
- 전사정보의 실시간 서비스로 빠른 의사 결정 가능
- 27 -
III. 구축사례
② 신한은행 인터넷뱅킹(간편조회)
III. 구축사례
• Flex의 LCDS를 이용하여 대량 데이터 처리에 안정적인 조회화면 제공
• 도입효과
- 데이터 처리 방식에 따라 화면전환 없이 고객이 원하는 정보의 즉각적인 응답 실현
- 고객 중심의 인터페이스 제공(출력화면 및 엑셀파일 저장 등)
- 고객별 검색 요건에 따라 원하는 정보를 즉각적으로 필터링(no page refresh,
슬라이드바 등의 직관적인 UI로 필터링 기능 수행)
- 28 -
③ 한밭대학교 종합학적관리시스템
III. 구축사례
• Flex를 적용하여 수강신청 등 대량 데이터의 안정적인 처리
• 도입효과
- 대량 데이터 처리에 안정적인 성능 발휘(수강신청 등 짧은 시간내에 처리하는 업무)
- 화면전환을 최소화한 사용자 중심의 인터페이스
- 약 1000본의 C/S 화면의 성공적인 웹전환(WAS: Tmax Jeus 적용)
- 단순하고 직관적인 UI 적용
- 29 -
④ L그룹 시스템 모니터링
• 자바 기반 NMS 시스템을 통합하기 위해 FLEX를 도입
• 도입효과
- 여러 화면에서 분산되어 있던 작업을 통합 화면에서 관리할 수 있게 되어
작업 효율 증대
- 한 눈에 전반적인 상황 파악으로 효율적인 지원 체제 구축
- 30 -
III. 구축사례
III. 구축사례
⑤ 두산 인프라코어
• 두산 그룹 인프라 코어 구축
• 도입효과
- Call center 문의 감소로 인한 비용 절감
- 온라인 교육 및 self-study 가능으로 교육 효과의 혁신적 향상
- 직관적인 UI 제공
- 31 -
⑥ LG CNS 작업관리시스템
III. 구축사례
• LG CNS 작업관리시스템
• 도입효과
- 기간계 시스템 수준의 대량 데이터 처리
- 뷰스테이트(View State)를 적용하여 사용자 중심의 효율적인 업무 환경 제공
- 직관적인 UI
View State 적용
- 32 -
III. 구축사례
국내 금융권 레퍼런스
최근 각 금융사별로 Flex를 적용한 웹어플리케이션의 도입이 확대되고 있습니다.
주요 금융권 레퍼런스
순번
발주처
사업명
사업개요
주사업자
수행
역할
수행기간
납품제품
투입
M/M
1
동부화재
경영정보시스템 구축
Dashboard 구축
동부정보기술
개발
04.11~04.12
Flex 1.5
12 M/M
2
신한은행
인터넷뱅킹 구축 프로젝트
인터넷뱅킹 적용
신한은행
개발
05.10~06.01
Flex 1.5
20 M/M
3
국민은행
ITSM 구축 프로젝트
ITSM UI 적용
SK C&C
개발
06.06~06.09
Flex 1.5
12 M/M
4
농협중앙회
X-Bank 구축 프로젝트
인터넷뱅킹 적용
농협
개발
06.08~06.12
FLEX 3.0
20 M/M
5
국민카드
국민카드 사이트 리뉴얼
홈페이지 리뉴얼
국민은행
개발
06.11~06.12
FLEX 3.0
20 M/M
6
신한은행
종합수익관리시스템(POC)
종합수익관리(진행중)
신한은행
개발
06.05~
FLEX 3.0
2 M/M
7
신한증권
신한 AMS 구축 프로젝트
장애관리시스템 구축
신한증권
개발
-
-
-
- 33 -
III. 구축사례
국내 비금융권 레퍼런스 (1/2)
글로벌 UI 솔루션인 Flex는 다양한 비즈니스모델의 사용자 인터페이스에 적용되고 있습니다.
주요 비금융권 레퍼런스 (1/2)
순번
발주처
사업명
사업개요
주사업자
수행
역할
1
KT
SEM 시스템 구축
SEM UI 구성
KT
개발
05.12~07.04 Flex 1.5, 2.0
40
2
LS산전
EIS
Dashboard
LS산전
개발
06.03~08.02 Flex 1.5, 2.0
40
3
동국제강
EIS
Dashboard
동국제강
개발
06.10~07.02
FLEX 3.0
13
4
금호타이어
EIS
Dashboard
금호타이어
개발
06.11~06.03
FLEX 3.0
20
5
삼성전자
온양 제조공정 모니터링
공정관리 UI 구성
삼성전자
개발
06.08~06.12
FLEX 3.0
15
6
삼성전자
구미 Symax
UI 구성
삼성전자
개발
06.07~06.11
FLEX 3.0
12
7
삼성전자
구미 Mafle
UI 구성
삼성전자
개발
06.07~06.11
FLEX 3.0
12
8
현대자동차
모젠 상담원 시스템
CTI UI 구성
현대자동차
개발
06.09~06.10
FLEX 3.0
4
9
현대자동차
품질 관리 시스템
품질관리 UI 구성
현대자동차
개발
06.09~06.10
FLEX 3.0
4
10
삼성반도체
온양 내부 정보시스템
Dashboard
삼성전자
개발
06.07~06.09
FLEX 3.0
5
11
삼성전자
삼성전자 구미 Etac
UI 구성
삼성전자
개발
06.07~06.11
FLEX 3.0
12
12
태평양
EIS
Dashboard
태평양
개발
05 08~06.01
Flex 1.5
10
- 34 -
수행기간
납품제품
투입
M/M
III. 구축사례
국내 비금융권 레퍼런스 (2/2)
주요 비금융권 레퍼런스 (2/2)
순번
발주처
사업명
사업개요
주사업자
수행
역할
수행기간
납품제품
투입
M/M
13
LG AD
글로벌 광고제작관리시스템
UI 구성
LG C&S
개발
05.04~05.08
Flex 1.5
12
14
인천공항공사
통합관제시스템
UI 구성
SK C&C
개발
06.11~07.01
FLEX 3.0
12
15
국방부
통합재정 정보시스템
UI 구성
국방부
개발
06.08~08.12
FLEX 3.0
1200
16
한국전력
정보통합시스템 구축
UI 구성
한국전력
개발
06.10~07.02
FLEX 3.0
10
17
동의과학대학
온.오프 통합교육
시스템 구축
LMS 구축
㈜이메타
개발
06.9~06.12
FLEX 3.0
18
대진대학교
개발 표준 플랫폼 도입
㈜이메타
기술지원
06.9
FLEX 3.0
19
청주대학교
LMS 구축
LG CNS
기술지원
06. 6
Flex 1.5
FLEX 3.0 기반 학사
행정 시스템 개발
SK C&C
개발
05.12~06.11
FLEX 3.0
㈜이메타
개발
05.8~06.12
FLEX 3.0
FMS 등
20
21
X-internet Presentation
Server 도입
청주대학교 전산장비 및 부
대장치 구축
국립한밭대학 산업대학교 행정정보 시스템
교
구축 사업
동명대학교
항만물류 이러닝 컨텐츠 제 Flex를 사용하여 항만물
작
류 이러닝 컨텐츠 제작
- 35 -
붙임 #1, 표준기술 적용 내용
• Flex는 표준(Standard) 스펙을 준수하는 표준화된 개발 플랫폼임
• 개발자에게 강력한 클라이언트 실행, 프로그램 모델, 개발 환경, 데이터 서비스 제공
구분
FLEX 3.0
Ajax
Asynchronous JavaScript and XML으로 비동기 처리 가능
XML
MXML은 XML 기반언어로 W3C Xforms와 같은 관련 표준 준수
REST
인터넷 프로토콜을 통해 XML 문서 전송(Representational State Transfer)
XML Namespace
속성 xmlns는 XML 문서에서 하나 이상의 XML Tag Library 참조
Event Model
W3C의 표준인 DOM(Document Object Model) Level 3 하위 세트
ECMAScript
Macromedia ActionScript 는 ECMA Profile 262 Edition 4 준수
Web Service
SOAP Message로 포맷되고 HTTP를 통해 송수신 되는 웹서비스 지원
JAVA/.NET Platform
JAVA 및 .NET Platform 지원
JAVA Object
MXML Tag는 및 JavaBeans 및 Java를 비롯하여 서버측의 JAVA Object 와 상호 작용
SVG
SVG(Scalable Vector Graphics) Vector Drawing을 지원
SWF
Macromedia Flash File Format 으로 컴파일
CSS
MXML Style은 CSS(Cascading Style Sheets) 표준을 기반
- 36 -
붙임 #2, 주요 기업 ‘X-인터넷’ 표준 ‘플렉스’
선정
삼성전사 ‘X-Internet’
표준으로 Flex 선정
KT ‘X-Internet’
표준으로 Flex 선정
- 37 -
붙임 #3, SAP Flex 전략적 제휴
Top Application Vendor인 SAP는 Adobe(구, Macromedia)와의 협력하여 SAP
NetWeaver 차기 버전부터 SAP Analytic Tool인 Visual Composer 웹 화면 개발에 FLEX
를 채택 키로 함으로써 SAP은 User Interface의 근본적인 변화를 준비하고 있습니다.
- 38 -
감사합니다.