Flex 3 Adobe Solution 동부정보기술 목차 I

Зарегистрируйтесь, чтобы просмотреть полный документ!

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

목차 I. 웹 트랜드와 Flex - 웹 트랜드 - web 2. 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 Web 2. 0 사용자 지향 웹 트랜드의 총칭 (사회적 상호작용과 개인의 참여) 사 용 자 니 즈 RSS 1) X-Internet Web SOA ¡ 다이나믹한 웹 페이지 ¡ C/S의 장점을 수용한 웹 ¡ 이기종 디바이스 지원 Flash Web 2. 0 Ajax HTML ¡ 정보의 전달(단순한 하이퍼링크) 저 ¡ 독립적이며 정적인 페이지 User Interface 처 리 표준 인터페이스 제공과 연결 시간의 흐름 1) RSS (Really Simple Syndication): 업데이트가 잦은 웹사이트 정보를 쉽게 확인할 수 있도록 만들어진 기술표준(RSS를 지원하는 블로그나 웹사이트 에 새롭게 올려진 컨텐츠가 있을 경우 다른 곳에서 직접 찾아가 보지 않아도 리더 등을 이용해서 쉽게 업데이트 여부 및 내용을 확인할 수 있음) -2 -

I. 차세대 UI 와 Flex Web 2. 0과 Flex는 국제표준을 준수하며 SOA를 통해 만들어진 비즈니스의 데이터를 사용자에게 표 현하기 위한 다양한 형태의 표준 인터페이스를 제공 Web 2. 0 플래시 플레이어 (전세계 인터넷이용자의 98% 사용) Rich Internet Application (Flash 수준의 화려한 화면 제공) 스크립트 기반의 쉬운 개발언어 Action Script 3 / MXML UTF-8 기반의 웹 개발 API 공개를 통한 범용성 지원 Open Source API 제공 웹 개발 표준기술 준수 CSS, XML 지원 Ajax 기술과의 호환 일반 소프트웨어 같은 유저인터페이스를 웹에서 구현 모든 종류의 웹 브라우저/ 멀티 플랫폼 지원 문자 인코딩 통일 C/S와 같은 풍부한 기능 및 빠른 처리 속도 제공 Flex 풍부한 유저 인터페이스 환경 다이나믹한 웹서비스 구현 기술적 기반 요소 Flex-Ajax Bridge 제공 멀티 OS 환경 지원 SOA를 통해 견고하게 구축된 비즈니스 프레임워크를 사용자에게 표현하기 위한 도구로 X-Internet과 Web 2. 0의 기술이 들어간 UI 솔루션을 도입하 여 사용자와 시스템간의 상호작용과 확장 가능한 사용자 인터페이스 제공을 위해 Flex 3 도입 -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) 및 스크립트 언어(Action. Script)로 플래시 기반의 RIA(Rich Internet Application)을 개발할 수 있는 툴 및 서비스 • W 3 C 표준 플랫폼은 아니나, Flash는 가장 보급화된 미디어, Cross Browsing이 가능 • Visual Resource 내장, 변형, 확장 가능 • UI Component 및 Chart를 응용할 수 있는 완벽한 프리젠테이션 티어 • 비동기 기술의 꽃 - “ E 4 X(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개발/운영 환경(J 2 EE 및. NET)에서 프리젠테이션 계층를 담당하며, LCDS는 데이터서비스를 강화하여 대용량 데이터 처리 및 효과적인 기간계시스템을 연계 MXML은 Flex markup language로서 사용자 인터페이스를 표현하는 마크업언어 임 Browser/ Flash Player MXML Flex Framework Flex Data Services Business tier Integration tier Resource tier Action. Script 프리젠테이션 계층 플렉스에서 제공하는 컴포넌트 라이브러리 Flex Class Library SOAP APP Server Java. Script를 기반으로 하는 객체지향 언어로써 플래시 내의 여러 가지 시각적, 청각적 요소들을 제어하는 명령어를 조합한 코드 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 Flex SDK(Software Development Kit) 2 특징 구성요소 웹어플리케이션 개발툴 ¡ 플렉스 어플리케이션을 WYSWYG 방식으로 개발 ¡ 코드어시스트, 컴파일러, 디버깅 및 소스버전 관리 시스 템 연동 등의 부가기능 제공: Eclipse 기반 ¡ 다양한 차트 및 산업별 특성에 맞는 섬세한 차트 제공 ¡ Visual Layout ¡ Code Hinting ¡ Debugging ¡ Skinning and Styling ¡ Charting 데이터 메시징 서 비스를 담당하는 어플리케이션 서 버 ¡ 바이너리 데이터 전송으로 어플리케이션 성능 향상 ¡ 서비측 데이터 푸시 기능을 통한 실시간 데이터 제공 ¡ 데이터 동기화 기능을 활용한 다른 사용자와의 실시간 데 이터 공유 ¡ Message Services ¡ Data Management Service ¡ RPC (Remote Procedure Call) Services ¡ 플렉스 어플리케이션 개발을 위한 100가지 이상의 Component 제공 ¡ 플렉스 컴파일러를 비롯한 디버깅 툴 제공 ¡ 어도비 홈페이지에서 무료 배포 ¡ FXML and Action. Script 3. 0 ¡ Flex Framework: Components, Containers, Layout Managers, Behaviors, and Effects ¡ Flex Utilities: Compiler, Debugger, Automated Testing 통합개발환경 (IDE) 기반의 소프트웨어 개발 도구 모음 (무료 배포) ※ FLEX 3 : 어도비사(미국)에서 2006년 6월에 2. 0 버전 발표 -8 -

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

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

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

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

II. FLEX 3 특장점(2/5) FLEX 3는 사용자에게는 플래시 기반의 안정적인 운영 환경 제공(전세계 사용자 PC환경 의 98%에 플래시 플레이어 임베디드 됨) 플래시 특성 플래시 플레이어의 구동 • Flex Builder 2 를 이용하여 플래시 기반의 웹어플리케이션 개발 Browser Flash Player Data 플래시 플레이어를 통 해 구동되기 때문에 브 라우저에 관계없이 동 일한 화면 적용 가능( 궁극적으로 플랫폼 독 립성 지향) Web Server XML/ HTTP REST SOAP Web Services Flex Data Services 2 J 2 EE 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. 고객정보 A. 계약 C. 약관 객실정보 확인 결재정보 확인 C. 약관 확인 취소 C. 약관 확인 B. 고객정보 취소 확인 효율적인 업무개선 ¡ Flex를 도입하여 미국의 on- line상 고객 예약 절차를 기 존의 7개 페이지에서, 1개의 UI로 획기적으로 줄인 사례 ¡ Flex 도입 후, 사이트 예약율 100% 이상 증가 - 14 - 취소

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

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

II. FLEX 3 성능 비교 평가 대용량 데이터 처리 결과 Ajax 또는 XML을 이용한 처리보다 10~20배 이상 빠른 것으로 측정되었으며, ECMAScript기반의 Flex의 Action. Script는 Java. Script의 성능을 대폭 개 선 대용량 데이터 처리결과 개발언어 성능 BMT 결과 Java. Script <응답속도> 40000 (단위: 1/1000 초) 구분 (단위: 1/1000 초) Action Script 3 Firefox 1. 5 IE 6 Fire. Fox 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 문자열추출(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 MD 5 Hashing(1000번 반복) 1969 1250 95 함수(Function) 호출 및 리턴 (80000 번 반복) 109 187 2 30000 20000 Flex 10000 0 1, 000건 5, 000건 10, 000건 20, 000건 <데이터 처리건수> Flex는 평균 0. 5초 이내 응답율 보임 ¡ Flex는 대량 데이터 처리에 탁월한 성능을 보임 ※ 상세한 데이터가 필요할 경우 고객사 실제 업무 환경에서 성능 테스트(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 z. Series ¡ Solaris SPARC 9 and 10 ¡ IBM AIX 5. 3 ¡ HP-UX 11 i v 2 개발툴(Flex Builder 2) ¡ MS Windows 2000 Pro & Server XP(SP 2) & XP Professional 2003 Server ¡ MAC ¡ Linux ¡ JRun 4 , Apache Tomcat 5. 5. x ¡ BEA Web. Logic 8. 1 & 9 ¡ IBM Web. Sphere 5. x & 6. x ¡ JBoss 4. 0. 3 SP 1 & 4. 0. 4 ¡ Oracle 10 G AS (10. 1. 3) ¡ SAP WAS 6. 40 ¡ MS Windows 98, Me, 2000, XP, 2003 ¡ Mac OS X v. 10. 1. x, 10. 2. x, 10. 3. x, 10. 4. x ¡ Linux 해당 무 ¡ Memory 1 GB 이상 ¡ Hard Disk 400 MB 이상 사용자 환경 ¡ 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 : 1 GB 이상, HDD : 300 MB 이상 ¡ Intel® Pentium® II 450 MHz ¡ RAM : 128 MB 이상 ※ 어도비 본사에서 현재까지 테스트 완료된 권장 운영 환경 - 18 -

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

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

II. FLEX 3 주요 기능 화면(2/5) ▶ Performance: 일반통신과 Flex 데이터 통신간 답변시간 비교(동일한 데이터 검색 시 20배 차이) [FLEX 3 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 20 21 X-internet Presentation Server 도입 청주대학교 전산장비 및 부 대장치 구축 국립한밭대학 산업대학교 행정정보 시스템 교 구축 사업 동명대학교 항만물류 이러닝 컨텐츠 제 Flex를 사용하여 항만물 작 류 이러닝 컨텐츠 제작 - 35 - FLEX 3. 0 FMS 등

붙임 #1, 표준기술 적용 내용 • Flex는 표준(Standard) 스펙을 준수하는 표준화된 개발 플랫폼임 • 개발자에게 강력한 클라이언트 실행, 프로그램 모델, 개발 환경, 데이터 서비스 제공 구분 FLEX 3. 0 Ajax Asynchronous Java. Script and XML으로 비동기 처리 가능 XML MXML은 XML 기반언어로 W 3 C Xforms와 같은 관련 표준 준수 REST 인터넷 프로토콜을 통해 XML 문서 전송(Representational State Transfer) XML Namespace 속성 xmlns는 XML 문서에서 하나 이상의 XML Tag Library 참조 Event Model W 3 C의 표준인 DOM(Document Object Model) Level 3 하위 세트 ECMAScript Macromedia Action. Script 는 ECMA Profile 262 Edition 4 준수 Web Service SOAP Message로 포맷되고 HTTP를 통해 송수신 되는 웹서비스 지원 JAVA/. NET Platform JAVA 및. NET Platform 지원 JAVA Object MXML Tag는 및 Java. Beans 및 Java를 비롯하여 서버측의 JAVA Object 와 상호 작용 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 Net. Weaver 차기 버전부터 SAP Analytic Tool인 Visual Composer 웹 화면 개발에 FLEX 를 채택 키로 함으로써 SAP은 User Interface의 근본적인 변화를 준비하고 있습니다. - 38 -

감사합니다.

Скачать презентацию Flex 3 Adobe Solution 동부정보기술 목차 I

af887fc6e9197bcb9c495ad98b92ffa0.ppt

Количество слайдов: 40