Flex 3 (Adobe Solution) Flex 3 (Adobe Solution) 동부정보기술.

Presentation on theme: "Flex 3 (Adobe Solution) Flex 3 (Adobe Solution) 동부정보기술."— Presentation transcript:

1 Flex 3 (Adobe Solution) Flex 3 (Adobe Solution) 동부정보기술

2 - 1 - I. 웹 트랜드와 Flex - 웹 트랜드 - web2.0과 Flex - Flex 기반의 UI 개발 II. FLEX 3 - FLEX란? - MVC에서 FLEX의 포지셔닝 - 아키텍처 - 소프트웨어 구성 - 특장점 - 운영환경 - 성능 비교 평가 - WAS기반 서비스 - 주요 기능 화면 - 기대효과 - 적용분야 III. 구축사례 목차 뭍임 #1 표준기술 적용 내용 붙임 #2 주요기업 ‘ X-Internet ’ 표준 ‘ Flex ’ 선정 붙임 #3 SAP Flex 전략적 제휴

3 - 2 - 차세대 웹웹의 변화  정보의 전달 ( 단순한 하이퍼링크 )  독립적이며 정적인 페이지 Web 시간의 흐름 Web2.0 X-Internet 사용자 지향 웹 트랜드의 총칭 ( 사회적 상호작용과 개인의 참여 )  다이나믹한 웹 페이지  C/S 의 장점을 수용한 웹  이기종 디바이스 지원 1)RSS (Really Simple Syndication): 업데이트가 잦은 웹사이트 정보를 쉽게 확인할 수 있도록 만들어진 기술표준 (RSS 를 지원하는 블로그나 웹사이트에 새롭게 올려진 컨텐츠가 있을 경우 다른 곳에서 직접 찾아가 보지 않아도 리더 등을 이용해서 쉽게 업데이트 여부 및 내용을 확인할 수 있음 ) 저 고 HTML XML Ajax Flash RSS 1) User Interface 처 리 Web(open) API Web2.0 SOA 표준 인터페이스 제공과 연결 SOA 를 통해 구축된 비즈니스로직과 결합되어 유연하고, 확장 가능한 아키텍처 도입을 위해 X-Internet 과 Web 2.0 을 UI 단에 적용 초기 웹은 단순 하이퍼링크를 통한 정보 전달 및 단순한 커뮤니케이션 수단에서 시작되었으나 다이나믹한 웹으로 발전하면서 사용자 중심 환경을 지향하는 웹으로 발전 웹 트랜드 I. 차세대 UI 와 Flex

4 - 3 - Web 2.0 Flex 문자 인코딩 통일 API 공개를 통한 범용성 지원 모든 종류의 웹 브라우저/ 멀티 플랫폼 지원 풍부한 유저 인터페이스 환경 스크립트 기반의 쉬운 개발언어 웹 개발 표준기술 준수 Ajax 기술과의 호환 UTF-8 기반의 웹 개발 Open Source API 제공 플래시 플레이어 (전세계 인터넷이용자의 98% 사용) Rich Internet Application (Flash 수준의 화려한 화면 제공) Action Script 3 / MXML CSS, XML 지원 Flex-Ajax Bridge 제공 다이나믹한 웹서비스 구현 C/S와 같은 풍부한 기능 및 빠른 처리 속도 제공 일반 소프트웨어 같은 유저인터페이스를 웹에서 구현 멀티 OS 환경 지원 기술적 기반 요소 SOA 를 통해 견고하게 구축된 비즈니스 프레임워크를 사용자에게 표현하기 위한 도구로 X-Internet 과 Web 2.0 의 기술이 들어간 UI 솔루션을 도입하여 사용자와 시스템간의 상호작용과 확장 가능한 사용자 인터페이스 제공을 위해 Flex3 도입 Flex는 국제표준을 준수하며 SOA를 통해 만들어진 비즈니스의 데이터를 사용자에게 표현하기 위한 다양한 형태의 표준 인터페이스를 제공 I. 차세대 UI 와 Flex Web2.0과 Flex

5 - 4 - Flex 기반의 차세대 UI 구현 SOA 기반의 아키텍처 구축으로 표준데이터의 활용성 증대 Flex 기반의 UI 개발 사용자중심의 웹기반 업무 환경 향후 정보계 채널계 … SOA 기반의 프레임워크 EP BPM EAI … 상품 계약 보상 고객 영업 … … 융자 SOA 를 통해 구축된 표준방식의 데이터를 사용자에게 제공 업무 편의성을 고려한 사용자 인터페이스 풍부한 화면 표현 직관적인 UI 통합 UI 인터페이스 재사용 Flex는 SOA(Service Oriented Architecture) 사상이 적용되어 구축되는 다양한 업무시스템의 UI를 효과적으로 구현 할 수 있도록 지원합니다. I. 차세대 UI 와 Flex 3

6 - 5 - 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 통한 직접 동기화 FLEX 란? II. FLEX 3

7 - 6 - Flex 의 데이타서비스와 차팅 기능 제공으로 사용자중심의 인터페이즈 제공 View단에 강점을 갖는 Rich Internet Application을 구현하는 도구 MVC(Model View Control)의 3-tier 모델을 지원하는 구조(뷰와 비즈니스 로직의 분리) View 리치인터넷 Model 표준화된 데이타 Control 공개 API View: RIA 기술 XML 표준 준수 및 UTF-8 코드 지원 HTTP 를 통해 XML 데이터 송수신 Model: 표준기술 및 데이터 사용 Flex 프레임워크 및 SDK FABridge(Flex-Ajax Bridge) Control: 공개 API FLEX 의 포지셔닝 : SOC(Service Oriented Client) 기반의 서비스 제공 MVC에서 FLEX의 포지셔닝 II. FLEX 3

8 - 7 - Flex Data Services MXML Flex Framework Browser/ Flash Player ActionScript Flex Class Library APP Server Data Management, Messaging Business tier EJB, POJO(Plain Old Java Object) Integration tier Connectors to data and legacy System Resource tier DBMSLDAP CRM/ ERP/CM Web Service SOAPHTTP/SAMFRTMP/S 프리젠테이션 계층 데이타서비스 계층 (WAS 기반 ) MXML 은 Flex markup language 로서 사용자 인터페이스를 표현하는 마크업언어 임 JavaScript 를 기반으로 하는 객체지향 언어로써 플래시 내의 여러 가지 시각적, 청각적 요소들을 제어하는 명령어를 조합한 코드 기간계시스템 연계 플렉스에서 제공하는 컴포넌트 라이브러리 II. FLEX 3 아키텍처 FLEX 3는 기존 Web개발/운영 환경(J2EE 및.NET)에서 프리젠테이션 계층를 담당하며, LCDS는 데이터서비스를 강화하여 대용량 데이터 처리 및 효과적인 기간계시스템을 연계

9 - 8 - 구분특징구성요소 Flex Builder 2 통합개발환경 (IDE) 기반의 웹어플리케이션 개발툴  플렉스 어플리케이션을 WYSWYG 방식으로 개발  코드어시스트, 컴파일러, 디버깅 및 소스버전 관리 시스템 연동 등의 부가기능 제공: Eclipse 기반  다양한 차트 및 산업별 특성에 맞는 섬세한 차트 제공  Visual Layout  Code Hinting  Debugging  Skinning and Styling  Charting LCDS 데이터 메시징 서 비스를 담당하는 어플리케이션 서 버  바이너리 데이터 전송으로 어플리케이션 성능 향상  서비측 데이터 푸시 기능을 통한 실시간 데이터 제공  데이터 동기화 기능을 활용한 다른 사용자와의 실시간 데이터 공유  Message Services  Data Management Service  RPC (Remote Procedure Call) Services Flex SDK(Software Development Kit) 2 소프트웨어 개발 도구 모음 (무료 배포)  플렉스 어플리케이션 개발을 위한 100가지 이상의 Component 제공  플렉스 컴파일러를 비롯한 디버깅 툴 제공  어도비 홈페이지에서 무료 배포  FXML and ActionScript 3.0  Flex Framework: Components, Containers, Layout Managers, Behaviors, and Effects  Flex Utilities: Compiler, Debugger, Automated Testing ※ FLEX 3 : 어도비사 ( 미국 ) 에서 2006 년 6 월에 2.0 버전 발표 II. FLEX 3 소프트웨어 구성(1/4) FLEX 3는 Flex Builder 2, LCDS(Live Cycle Data Services) 2, Flex SDK 2로 구성되어 있으며 각각 통합 웹개발툴, 어플리케이션 서버, 소프트웨어 개발 킷으로 사용 됩

10 - 9 -  디자인 : 그림판 위에 개발자가 필요한 기능을 비쥬얼하게 적용  소스 : 디자인 결과를 소스화면 생성  디버그 : 컴파일 중 오류 발생 시 메시지 알림  속성 : 컨테이너와 컨트롤에 대한 속성값 적용  통합 프로젝트 관리 : 프로젝트 별로 화면관리 기능 제공  컨테이너 ; 컨트롤을 담는 역할 (폼, 패널 등)  컨트롤 : 기능 컴포넌트 (버튼, 달력, 그리드 등)  메뉴 : 사용자 메뉴 제공 II. FLEX 3 소프트웨어 구성(2/4) Flex Builder 2는 Eclipse 기반의 웹어플리케이션 개발 도구로서, 개발자나 디자이너에게 플래시 기반의 웹어플리케이션을 손쉽게 구현할 수 있는 사용자 인터페이스 제공

11 - 10 - RPC Services Data Management Web Services Http Service Remote Object Data Sync OCC Paging Collaboration Publish/Subscribe Data Push Messaging Runtime Compilers Service adapters JavaTMJMSHibernateColdFusion® LCDS구성도 Flex Message Service : 메시지 버스를 이용하여 클라이언트와 서버 간 통신 지원 RPC Service : 클라이언트와 원격으로 떨어진 서버의 자바 객체와 통신지원 Data Management Service : 데이터 관리 및 연동 Runtime Compilers : Just-in-time Compile, 컴파일 결과를 캐쉬서버에 저장하여 동일작업을 재컴파일 하지 않음 II. FLEX 3 소프트웨어 구성(3/4) LCDS는 사용자 인터페이스(플래시 플레이어)와 연동하는 기능을 제공하고, 다양한 기간계 시스템에 접속할 수 있는 표준 API(데이터 파일 연계, 웹서비스 연계 등) 지원

12 - 11 - cd flexInstallDir/bin mxmlc --show-actionscript-warnings=true --strict=true -file-specs c:/appDir/hello.mxml Flex Utilities Compiler, Debugger, Automated Testing Flex Languages MXML and ActionScript 3.0 Core Component Components, Containers, Layout Managers, Behaviors, and Effects 콤보박스 컴포넌트 콤보박스 소스파일 커맨드에서 컴파일 예시  개발자는 Flex SDK 2 를 이용하여 SDK 에서 제공하는 컴포넌트를 일반 에디터를 이용하여 소스파일 수준에서 수정할 수 있으며, 수정된 소스파일은 SDK 의 컴파일 기능을 이용하여 커맨드 재컴파일 가능  기본적으로 MXML, ActionScript 언어를 지원하고, FLEX 3 의 핵심컴포넌트와 컴파일러 등 유틸리티를 제공 SDK 2 구성도에디터를 이용한 플렉스 어플리케이션 개발 II. FLEX 3 소프트웨어 구성(4/4) FLEX 3 어플리케이션을 구축하기 위해서 핵심 컴포넌트 라이브러리와 개발언어 컴파일 기능을 지원하는 무료 배포되는 소프트웨어 개발 도구 모음임

13 - 12 - X-Internet 솔루션 FLEX 3는 공개 API, 동적인 유저인터페이스, RTE 실현 기능 및 사용자에 안정적인 서비스 제공을 통해 최적의 X-Internet 서비스를 제공 특장점(1/5) II. FLEX 3 플렉스 프레임워크 및 SDK Ajax 브릿지 (FABridge) RIA 기술 적용 Flex LCDS CO-Browsing RTMS SMART Client AMF  무료로 제공되며 플렉스의 기본적인 컴포넌트들이 포함되어 있어 누구나 플렉스 어플리케이션을 개발하고 확장할 수 있음  Ajax 의 API 를 이용해서 플렉스의 컴포넌트를 생성하거나 속성이나 메쏘드를 컨트롤 할 수 있는 프레임워크 제공. 이것을 이용해서 Ajax 로 되어 있는 화면과 플렉스 화면 쉽게 연동  LCDS 와 Chart 기능은 다른 RIA 솔루션이 제공하지 못하는 동적이고 미려한 유저 인터페이스를 쉽게 개발할 수 있게 해줌  LCDS 를 이용하면 실시간으로 보여주거나 교환할 수 있는 어플리케이션 구현을 용이하게 함  데이터 동기화를 통한 협업 기능 제공  RTMS (Real Time Message Service) 기능을 제공함으로써, 업데이트된 정보만을 실시간으로 클라이언트 측에 데이터 전송  클라이언트 측에 기본적으로 설치된 플래시 플레이어 (Flash Player) 를 통해 제공되므로 다양한 OS 를 지원하며 정적 인터넷에 동적인 개념 부여  AMF (Actionscript Message Format) 기능을 통해 뛰어난 압축기능 제공과 이렇게 압축된 데이터 통해 바이너리 통신을 함으로써 대용량 데이터 처리 성능과 보안성을 강화 공개 API 제공 통한 확장성 제공 동적인 유저 인터페이스 제공 RTE 실현 기능 제공 사용자에 안정적인 서비스 제공

14 - 13 - FLEX 3는 사용자에게는 플래시 기반의 안정적인 운영 환경 제공(전세계 사용자 PC환경의 98%에 플래시 플레이어 임베디드 됨) 특장점(2/5) II. FLEX 3 구분내용 다양한 브라우저 지원  인터넷 익스플로러, 파이어폭스 등 다양한 브 라우저 지원  MAC, Unix 기반 브라우저 지원 일정한 화질 유 지  벡터그래픽(수학적 함수 관계에 의해 이미지 를 표현) 기반의 도구  이미지의 선, 면 등의 정보를 모두 좌표 값으 로 계산하기 때문에 이미지가 커지고 작아지 는 것과 상관없이 일정한 화질 유지 뛰어난 압축률  GIF에 비해 매우 작은 용량  플래시 안에 있는 비트맵 이미지, 사운드 파 일 재 압축 가능 동적 기능  정적 인터넷에 동적인 개념 부여 양방향 커뮤니케 이션  마우스의 움직임에 따라 내용이 다양하게 변 화시키고, 사용자가 원하는 대로 내용 변경 가능 스트리밍 기술 지원  큰 용량의 파일이라도 무리 없이 볼 수 있는 기능 지원 Browser Flash Player Web Server XML/ HTTP REST SOAP Web Services XML/ HTTP REST SOAP Web Services J2EE Application Server J2EE Application Server Existing Application and Infrastructure Flex Data Services 2 Data 플렉스 서버는 MXML 코드를 SWF( 플래시 실행 파일 ) 로 컴파일 해서 사용자 PC 에 전송 Flex Builder 2 를 이용하여 플래시 기반의 웹어플리케이션 개발 플래시 플레이어를 통해 구동되기 때문에 브라우저에 관계없이 동일한 화면 적용 가능 ( 궁극적으로 플랫폼 독립성 지향 ) 플래시 플레이어의 구동 플래시 특성

15 - 14 - A. 계약 B. 고객정보 C. 약관 확인취소 B. 고객정보 A. 계약 C. 약관 확인취소 C. 약관 A. 계약 B. 고객정보 확인취소 뷰스테이트 (View States) 를 이용한 최소 화면 구성 : 동일 화면에서 관련 업무를 처리함으로 업무효율성 향상 ( 화면의 리로드 (Reload) 없이 업무의 연속성 보장 ) 예약일정 확인 객실정보 확인 결재정보 확인 효율적인 업무개선  Flex 를 도입하여 미국의 on- line 상 고객 예약 절차를 기존의 7 개 페이지에서, 1 개의 UI 로 획기적으로 줄인 사례  Flex 도입 후, 사이트 예약율 100% 이상 증가 II. FLEX 3 특장점(3/5) 뷰스테이트(View States)는 Flex만 제공하는 특화된 기능으로 사용자 업무의 연속성을 보장하고 서버단에 네트워크 부하를 줄임으로써 효율적인 업무환경 제공

16 - 15 - FLEX 3 는 데이터의 동기화 뿐만 아니라 “ 비동기식 데이터 처리, 실시간 데이터 푸시, 데이터 압축 전송 ” 등을 통하여 웹어플리케이션 데이터처리 부분에 향상된 기능 지원 특장점(4/5) II. FLEX 3 비동기 데이터 처리 실시간 데이터 푸시(Push) 데이터 압축 전송 사용자가 요구하는 특정부분의 값을 보여주기 위해서 전체 페이지를 리로드 하는 방식이 아니라, 해당 부분만 서버와 브라우저간 데이터통신 (Ajax Bridge) 을 통해서 정보제공 데이터 서비스 데이터 서비스 미들웨어 WAS (Web Application Server) 미들웨어 WAS (Web Application Server) 사용자에게 정보제공 (변경된 정보 실시간 반영) Data 압축 Data AMF (Actionscript Message Format) HTTP, RPC 외에 AMF 를 통해 바이너리 압축 통신을 지원하여 고속 데이터 통신 및 보안성 강화 0101 01001 … 데이터 압축 바이너리 통신 데이터 수정 데이터 모니터링 RTMS (Real Time Message Service) DB

17 - 16 - 1) RPC (Remote Procedure Call ) : 클라이언트와 원격으로 떨어진 서버의 자바 객체와 통신을 지원하는 서비스 2) DataManagement : 클라이언트와 서버간의 데이터 연결에 관련된 기능을 관장하는 서비스 3) LCDS (Flex Data Services) : 클라이언트와 서버간의 데이터 메시징 서비스를 담당하는 어플리케이션 서버 AMF(Action Message Format) 형식으로 압축 전송 바이너리 형태의 압축 ( 통신보안 ) Client / Server 단의 Caching 기능으로 인해서 불필요한 Data 요청을 감소시켜 네트워크 트래픽을 절감 할 수 있음 Flex 서비스의 추가 컴파일 작업없 이 Cache 내의 Data 전송 Flex Data Services 2 DataManagement Service 2) (Cache 내장 ) DataManagement Service 2) (Cache 내장 ) Browser Flash Player 서버 요청없이 Client 내부 Cache 로 동작 Temporary internet files (Cache 기능 ) Temporary internet files (Cache 기능 ) RPC Services 1) 2) 데이터 압축통신 클라이언트의 캐싱 으로, Off-Line 통신 구현 LCDS 의 캐싱으로, 빠른응답 속도 1) 캐싱 통신 Data Flex Data Services 2 Flex Data Services 2 Data Management Data Management User Data Data 가 수신완료 되지 않 아도 어플리케이션 실행됨 Paging 기능을 적용하여 서버단에서 데이터 전송시 네트워크 대역폭을 고려해서, 데이터 분할 전송 클라이언트의 네트워크 대역폭과 어플리케이션 동 작 상황을 고려한 전송으로 네트워크 Traffic 절감 효과 전체 Data 없이도 어플리케이션의 실행이 가능 하며, 빠른 실행속도로 User 의 만족성 증대 클라이언트의 네트워크 대역폭과 어플리케이션 동 작 상황을 고려한 전송으로 네트워크 Traffic 절감 효과 전체 Data 없이도 어플리케이션의 실행이 가능 하며, 빠른 실행속도로 User 의 만족성 증대 3) Flex 의 Paging 전송 방식 Flex는 기본적으로 통신시 데이터를 바이너리 형태로 압축 전송 하기 때문에 네트워크 트래픽을 절감할 수 있으며, 페이징(Paging)기능을 이용한 Off-Line 통신 가능 특장점(5/5) II. FLEX 3

18 - 17 - 성능 비교 평가 0 10000 20000 30000 40000 1,000 건 5,000 건 10,000 건 20,000 건 Ajax XML Flex ( 단위 : 1/1000 초 )  Flex는 대량 데이터 처리에 탁월한 성능을 보임 ※ 상세한 데이터가 필요할 경우 고객사 실제 업무 환경에서 성능 테스트(BMT) 수행하여 자료 제공함 구분 JavaScriptAction Script3 Firefox 1.5IE 6 FireFox 1.5 (Flash Player 9 ) 배열 연결 (Join) ( 배열 size : 1000, 500 번 반복 ) 390172303 배열 정렬 (Sort) ( 배열 size : 1000, 500 번 반복 ) 437687414 짧은 문자열 결합 (Concatenate) (50000 번 반복 ) 390/407391/406159 긴 문자열 결합 (Concatenate) (50000 번 반복 ) 2266/4375985/1032165 문자열추출 (substring) (10000 번 반복 ) 47163 문자열 검색 (indexof) (40000 번 반복 ) 284219103 Math.round(Math.random()*n) (40000 번 반복 ) 170927 empty for loop (10 million times!)2703281325 misc test from a JS site 1453128045 MD5 Hashing(1000 번 반복 )1969125095 함수 (Function) 호출 및 리턴 (80000 번 반복 ) 1091872 ※ 출처 : http://www.oddhammer.com 대용량 데이터 처리결과개발언어 성능 BMT 결과 Flex는 평균 0.5초 이내 응답율 보임 ( 단위 : 1/1000 초 ) 대용량 데이터 처리 결과 Ajax 또는 XML을 이용한 처리보다 10~20배 이상 빠른 것으로 측정되었으며, ECMAScript기반의 Flex의 ActionScript는 JavaScript의 성능을 대폭 개선 II. FLEX 3

19 - 18 - 구 분어플리케이션 서버(LCDS)개발툴(Flex Builder 2)사용자 환경 운영체제  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  MS Windows 2000 Pro & Server XP(SP2) & XP Professional 2003 Server  MAC  Linux  MS Windows 98, Me, 2000, XP, 2003  Mac OS X v.10.1.x, 10.2.x, 10.3.x, 10.4.x  Linux 웹어플리케 이션서버 (WAS)  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 해당 무 브라우저 해당 무  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 추천 H/W  Memory 1GB 이상  Hard Disk 400MB 이상  CPU : Intel ® Pentium ®  RAM : 1GB 이상, HDD : 300MB 이상  Intel ® Pentium ® II 450MHz  RAM : 128MB 이상 ※ 어도비 본사에서 현재까지 테스트 완료된 권장 운영 환경 II. FLEX 3 FLEX 3는 크로스 플랫폼을 지향하는 솔루션으로 대부분의 OS, WAS, Device에 운영 가능 운영환경

20 - 19 - Flex는 WAS(JSP엔진 기능) 위에 설치됨 : MXML코드를 SWF로 컴파일해주는 자바의 서블릿 외에 관련서비스가 구동됨 FlexBuilder2.0에서 컴파일된 SWF를 IIS에서 서비스할 수 있음 [ 사용하는 자바가상머신 (JVM) 버전 ] Sun 1.3.1, Sun 1.4.x 버전의 JVM 웹스피어에 사용되는 IBM 1.3 or 1.4 버전의 JVM 웹로직에 사용되는 BEA JRockit 1.4 버전의 JVM Java 기반.Net 기반.Net 환경에서의 IIS 와 JSP 처리엔진을 연동하고, 그 위에 Flex Data Service2.0 을 추가로 설치하 면.Net 환경에서 플렉스를 사용 가능 J2EE.NET FLEX 런타임서비스 RPC 서비스 (WebService, HttpService) WAS기반 서비스 II. FLEX 3

21 - 20 - 주요 기능 화면(1/5) II. FLEX 3 ▶ Rich media integration: 풍부하고 미려한 화면 적용, 미디어 통합 플래시 기반의 동영상 설명 화면 특징 및 가격 비교

22 - 21 - 주요 기능 화면(2/5) II. FLEX 3 ▶ Performance: 일반통신과 Flex 데이터 통신간 답변시간 비교 ( 동일한 데이터 검색 시 20 배 차이 ) [Ajax 를 이용한 데이터 통신 ] [FLEX3 Remote Object 를 이용한 데이터 통신 ]

23 - 22 - 주요 기능 화면(3/5) II. FLEX 3 ▶ Collaboration: 데이터 동기화 ( 원격으로 떨어진 A, B 사용자가 같은 액션에 동일한 화면 공유 ) [ 사용자 A] [ 사용자 B]

24 - 23 - 주요 기능 화면(4/5) II. FLEX 3 ▶ Data Push: 주가의 실시간 업데이트, 실시간 정렬, 로 (Row) 이동, 특정 기간 리포팅 서버에서 변경된 데이터를 클라이언트에 전송함으로써 실시간 자료 송수신 시스템에 적용 가능

25 - 24 - 주요 기능 화면(5/5) II. FLEX 3 ▶ Data manipulation: 즉각적인 산술 계산 ( 다양한 그래프 및 산술결과의 신속한 출력 )

26 - 25 - 기대효과 II. FLEX 3 Application 개발 측면 기술 측면 비즈니스 측면 Client Side 기능의 확대 서버의 부하 감소 표준화된 프로토타이핑 지원 Application 개발 및 유지보수 비용 절감 Network 부하 최소화 MVC 개발 모델 제공 Ubiquitous 환경 지원 ROI 측면 개발, 배포 및 유지보수 사용자 편리성 Application 개발 / 테스트 용이 Client program 을 PC 에 설치할 필요가 없음 개발 및 유지보수 용이 및 비용 감소 대화식 환경을 통한 편리성 제공 단일 화면 인터페이스로 인한 시간 절약

27 - 26 - 기존의 복잡한 데이터 화면을 효과적으로 표현함으로써 기간계시스템 적용에 용이 플래시를 이용하여 가독성이 높은 사용자 중심의 웹페이지 적용 적용분야 II. FLEX 3 [ 기간계시스템 ] [ 디자인센터 ]

28 - 27 - 동부 그룹 전사정보를 한 눈에 보기 위한 임원용 EIS 시스템을 Flex로 구축 도입효과 - 직관적이고 풍부한 UI 제공 - 브라우저 내에 C/S 환경 구축 - 한 눈에 전반적인 상황 파악 - 전사정보의 실시간 서비스로 빠른 의사 결정 가능 ① 동부그룹 RTE + Dashboard III. 구축사례

29 - 28 - Flex의 LCDS를 이용하여 대량 데이터 처리에 안정적인 조회화면 제공 도입효과 - 데이터 처리 방식에 따라 화면전환 없이 고객이 원하는 정보의 즉각적인 응답 실현 - 고객 중심의 인터페이스 제공(출력화면 및 엑셀파일 저장 등) - 고객별 검색 요건에 따라 원하는 정보를 즉각적으로 필터링(no page refresh, 슬라이드바 등의 직관적인 UI로 필터링 기능 수행) ② 신한은행 인터넷뱅킹(간편조회) III. 구축사례

30 - 29 - Flex를 적용하여 수강신청 등 대량 데이터의 안정적인 처리 도입효과 - 대량 데이터 처리에 안정적인 성능 발휘(수강신청 등 짧은 시간내에 처리하는 업무) - 화면전환을 최소화한 사용자 중심의 인터페이스 - 약 1000본의 C/S 화면의 성공적인 웹전환(WAS: Tmax Jeus 적용) - 단순하고 직관적인 UI 적용 ③ 한밭대학교 종합학적관리시스템 III. 구축사례

31 - 30 - 자바 기반 NMS 시스템을 통합하기 위해 FLEX를 도입 도입효과 - 여러 화면에서 분산되어 있던 작업을 통합 화면에서 관리할 수 있게 되어 작업 효율 증대 - 한 눈에 전반적인 상황 파악으로 효율적인 지원 체제 구축 ④ L그룹 시스템 모니터링 III. 구축사례

32 - 31 - 두산 그룹 인프라 코어 구축 도입효과 - Call center 문의 감소로 인한 비용 절감 - 온라인 교육 및 self-study 가능으로 교육 효과의 혁신적 향상 - 직관적인 UI 제공 ⑤ 두산 인프라코어 III. 구축사례

33 - 32 - ⑥ LG CNS 작업관리시스템 III. 구축사례 LG CNS 작업관리시스템 도입효과 - 기간계 시스템 수준의 대량 데이터 처리 - 뷰스테이트(View State)를 적용하여 사용자 중심의 효율적인 업무 환경 제공 - 직관적인 UI View State 적용

34 - 33 - 국내 금융권 레퍼런스 순번발주처사업명사업개요주사업자 수행 역할 수행기간납품제품 투입 M/M 1 동부화재경영정보시스템 구축 Dashboard 구축동부정보기술개발 04.11~04.12Flex 1.512 M/M 2 신한은행인터넷뱅킹 구축 프로젝트인터넷뱅킹 적용신한은행개발 05.10~06.01Flex 1.520 M/M 3 국민은행 ITSM 구축 프로젝트 ITSM UI 적용 SK C&C 개발 06.06~06.09Flex 1.512 M/M 4 농협중앙회 X-Bank 구축 프로젝트인터넷뱅킹 적용농협개발 06.08~06.12FLEX 3.020 M/M 5 국민카드국민카드 사이트 리뉴얼홈페이지 리뉴얼국민은행개발 06.11~06.12FLEX 3.020 M/M 6 신한은행종합수익관리시스템 (POC) 종합수익관리 ( 진행중 ) 신한은행개발 06.05~FLEX 3.02 M/M 7 신한증권신한 AMS 구축 프로젝트장애관리시스템 구축신한증권개발 --- 주요 금융권 레퍼런스 III. 구축사례 최근 각 금융사별로 Flex를 적용한 웹어플리케이션의 도입이 확대되고 있습니다.

35 - 34 - 국내 비금융권 레퍼런스 (1/2) 순번발주처사업명사업개요주사업자 수행 역할 수행기간납품제품 투입 M/M 1 KT SEM 시스템 구축 SEM UI 구성 KT 개발 05.12~07.04Flex 1.5, 2.040 2 LS 산전 EISDashboardLS 산전 개발 06.03~08.02Flex 1.5, 2.040 3 동국제강 EISDashboard 동국제강 개발 06.10~07.02FLEX 3.013 4 금호타이어 EISDashboard 금호타이어개발 06.11~06.03FLEX 3.0 20 5 삼성전자 온양 제조공정 모니터링공정관리 UI 구성 삼성전자 개발 06.08~06.12FLEX 3.015 6 삼성전자 구미 SymaxUI 구성 삼성전자 개발 06.07~06.11FLEX 3.012 7 삼성전자 구미 MafleUI 구성 삼성전자 개발 06.07~06.11FLEX 3.012 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.09FLEX 3.05 11 삼성전자 삼성전자 구미 EtacUI 구성 삼성전자 개발 06.07~06.11FLEX 3.012 태평양 EISDashboard 태평양 개발 05 08~06.01Flex 1.510 주요 비금융권 레퍼런스 (1/2) III. 구축사례 글로벌 UI 솔루션인 Flex는 다양한 비즈니스모델의 사용자 인터페이스에 적용되고 있습니다.

36 - 35 - 국내 비금융권 레퍼런스 (2/2) 순번발주처사업명사업개요주사업자 수행 역할 수행기간납품제품 투입 M/M 13LG AD 글로벌 광고제작관리시스템 UI 구성 LG C&S 개발 05.04~05.08Flex 1.512 14 인천공항공사 통합관제시스템 UI 구성 SK C&C 개발 06.11~07.01FLEX 3.0 12 15 국방부 통합재정 정보시스템 UI 구성 국방부 개발 06.08~08.12FLEX 3.01200 16 한국전력 정보통합시스템 구축 UI 구성 한국전력 개발 06.10~07.02FLEX 3.010 17 동의과학대학 온. 오프 통합교육 시스템 구축 LMS 구축㈜이메타개발 06.9~06.12FLEX 3.0 18 대진대학교 X-internet Presentation Server 도입 개발 표준 플랫폼 도입㈜이메타기술지원 06.9 FLEX 3.0 19 청주대학교 청주대학교 전산장비 및 부 대장치 구축 LMS 구축 LG CNS 기술지원 06. 6Flex 1.5 20 국립한밭대학 교 산업대학교 행정정보 시스템 구축 사업 FLEX 3.0 기반 학사 행정 시스템 개발 SK C&C 개발 05.12~06.11 FLEX 3.0 21 동명대학교 항만물류 이러닝 컨텐츠 제 작 Flex 를 사용하여 항만물 류 이러닝 컨텐츠 제작 ㈜이메타개발 05.8~06.12 FLEX 3.0 FMS 등 주요 비금융권 레퍼런스 (2/2) III. 구축사례

37 - 36 - 붙임 #1, 표준기술 적용 내용 구분FLEX 3.0 AjaxAsynchronous JavaScript and XML 으로 비동기 처리 가능 XMLMXML 은 XML 기반언어로 W3C Xforms 와 같은 관련 표준 준수 REST 인터넷 프로토콜을 통해 XML 문서 전송 (Representational State Transfer) XML Namespace 속성 xmlns 는 XML 문서에서 하나 이상의 XML Tag Library 참조 Event ModelW3C 의 표준인 DOM(Document Object Model) Level 3 하위 세트 ECMAScriptMacromedia ActionScript 는 ECMA Profile 262 Edition 4 준수 Web ServiceSOAP Message 로 포맷되고 HTTP 를 통해 송수신 되는 웹서비스 지원 JAVA/.NET PlatformJAVA 및.NET Platform 지원 JAVA ObjectMXML Tag 는 및 JavaBeans 및 Java 를 비롯하여 서버측의 JAVA Object 와 상호 작용 SVGSVG(Scalable Vector Graphics) Vector Drawing 을 지원 SWFMacromedia Flash File Format 으로 컴파일 CSSMXML Style 은 CSS(Cascading Style Sheets) 표준을 기반 Flex는 표준(Standard) 스펙을 준수하는 표준화된 개발 플랫폼임 개발자에게 강력한 클라이언트 실행, 프로그램 모델, 개발 환경, 데이터 서비스 제공

38 - 37 - 붙임 #2, 주요 기업 ‘ X-인터넷 ’ 표준 ‘ 플렉스 ’ 선정 삼성전사 ‘X-Internet’ 표준으로 Flex 선정 KT ‘X-Internet’ 표준으로 Flex 선정

39 - 38 - 붙임 #3, SAP Flex 전략적 제휴 Top Application Vendor인 SAP는 Adobe(구, Macromedia)와의 협력하여 SAP NetWeaver 차기 버전부터 SAP Analytic Tool인 Visual Composer 웹 화면 개발에 FLEX 를 채택 키로 함으로써 SAP은 User Interface의 근본적인 변화를 준비하고 있습니다.

40 감사합니다.