기술세미나 Web2 0 Flex 20090403 윤재원

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

Web 2.0 FLEX 개발환경의 방향신기술 도입에 따른 소개 및 방향성에 따른 세미나

일시_2009 년 4 월 3 일 금요일 오전 11 시 / 장소_지앤비빌딩 5 층 회의실

1. 개요.프로젝트 진행에 있어 신기술 도입의 목적, 배경 및 진행 방향 그리고 향후 과제에 대한 내용을 제시하여, 세미나를 개최하고 모든 팀원이 신기술 도입에 대한 내용을 이해하여, 실제 업무에 적용할 수 있도록 하기 위함.

2. 세미나 진행 순서.1) WEB 2.0 의 정의.2) RIA 의 정의.3) RIA 기반의 프레임워크.4) RIA 기반 프레임워크 비교.5) RIA 기반의 프레임워크(FLEX) 도입 이유 및 방향.6) 예제 사이트 및 온라인 교육.7) 참고자료.

3. 내용.1) WEB 2.0 정의.

2004 년 10 월 오라일리 미디어사(O`reilly Media, Inc.,)의 대표인 팀 오라일리(Tim O`reilly)에 의해 “새로운 플랫폼”으로 정의를 내리며 도입된 개념.

새로운 기술 환경이며, 새로운 기술과 새로운 Web 환경을 뜻하는 것.혹은 위의 환경을 향한 방향성을 가진 흐름.

User 가 만들어가는 Data 이며, 정보의 공유를 통하여 기존 공급자와 소비자의 경계를 허물고 모두가 정보, Data 를 소비하고 생산해 내는 환경을 말함.

※ 웹 3.0 맛보기.- 웹을 데이터베이스 형태로 바꾼 것.- 인공 지능을 향한 진화의 경로.- 시맨틱 웹 및 SOA 의 실현.

Ü 시맨틱 웹 : 컴퓨터가 정보자원의 뜻을 이해하고, 논리적 추론까지 할 수 있는 차세대 지능형 웹.

Ü SOA : Service Oriented Architecture, 서비스 지향 아키텍처.

- 3D 를 향한 진화.- “실행 가능한” 웹 추상 계층으로서의 웹 3.0

페이지 | 1

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

2) RIA 의 정의.RIA(Rich Internet Application or Rich Interactive Application)이란 전통적인 데스크톱 응용 프로그램의 특징과 기능을 가지는 웹 응용프로그램 이다.

웹 응용 프로그램의 많은 장점에도 불구하고 웹 초창기부터 서버/클라이언트 환경의 윈도우 프로그램에 비해 사용자 인터페이스가 부족하다고 지적되었고, 이런 단점을 극복하기 위해 Macromedia(현 Adobe)는 2002 년 RIA 의 개념을 처음 소개 했다.

3) RIA 기반의 프레임워크.① Ajax(Asynchronous Javascript and XML).

Ü 대화식 웹 애플리케이션 제작을 위해 다음과 같은 조합을 이용하는 웹 개발 기법.- 표현 정보를 위한 Html(또는 XHTML) 과 CSS.- 동적인 화면 출력 및 표시정보와의 상호작용을 위한 DOM, Javascript.- 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT,

XMLHttpRequest(Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC 를 이용할 수 있다)

Ü 비 동기 요청이 가능.Ü 브라우저가 기반(제한적).Ü prototype, jquery 등 라이브러리 사용.

페이지 | 2

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

- http://maps.google.co.kr - http://www.google.com/calendar

② Silverlight.Ü MS 에서 내 놓은 RIA 에 대한 지원을 제공하는 웹 브라우저 플러그 인.Ü XAML 로 작성.Ü 기존 .NET, VC++ 등 개발자의 손쉬운 영입.Ü Silverlight Player 기반.

- http://silverlight.net - http://cafe.naver.com/mssilverlight/716

③ JavaFX.Ü 차세대 웹 개발의 핵심인 RIA(Rich Internet Application) 시장 공략을 위해

개발된 언어.

페이지 | 3

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

Ü 데스크탑, 모바일을 대상으로 시각적으로 풍부한 애플리케이션을 빠른 시간에 개발 할 수 있다.

Ü 기존 JAVA 개발자의 손쉬운 영입.Ü jdk1.6 update release 10 이상 또는 jdk1.7 에 탑재되어 있음.Ü 현재는 Adobe Flex, Microsoft Silverlight 에 비해 4 배에서 14 배 까지 느리다.Ü JVM 기반.

- http://www.javafx.com

④ Adobe Flex.Ü Adobe 사에서 RIA 를 구축하기 위해 제작한 솔루션.Ü Flash 를 기본으로 한 Flash 컴포넌트들을 XML 태그로 표현할 수 있도록 컴포넌트 화.Ü MXML 로 코딩.Ü FlexBuilder 로 개발.Ü Flash Player 기반.

4) RIA 기반 프레임워크 별 비교.① RIA 기술 비교.

페이지 | 4

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

② 가트너 그룹의 Ajax 기술 및 플랫폼 보고서.

③ Adobe 및 MS 의 비교.

④ C/S, WEB, RIA 비교.

페이지 | 5

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

⑤ 코드적 특성.

5) RIA 기반의 프레임워크(FLEX) 도입 이유 및 방향.① 도입 목적.

- 검증된 RIA 프레임워크.

페이지 | 6

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

- 빠른 개발 속도(생산성 향상).- 코드 재 사용(모듈화)의 필요성.- Dynamic 한 환경 구성.- Multimedia 전달의 자유로움.

② Flex 와 RIA 의 로드맵.

③ Flash 와 Flex 의 차이점.

④ Flex 의 구동 원리.

페이지 | 7

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

⑤ 개발(IDE) 환경.- Flex 개발 환경

- FLEX Builder 3.0 on Eclipse.

※ AIR 의 개념.어도비 AIR 는 RIA(리치 인터넷 어플리케이션)을 구축 및 배포하기 위하여, 기존의 웹 개발 기술(플래시, 플렉스, html, 자바 스크립트, Ajax)을 활용할 수 있는 크로스-오퍼레이팅 런타임입니다. AIR 는 쉽게 작업할 수 있고, 편하게 툴과 접근을 활용할 수 있고, 플래시, 플렉스, html, 자바 스크립트, Ajax 를 지원하여, 최상의 결과를 만들 수 있습니다. 예를 들어, 다음 기술과 조합하여 어플리케이션을 개발할 수 있습니다:플래시 / 플렉스 / 액션스크립트 html / 자바 스크립트 / CSS / Ajax어플리케이션에 pdf 를 활용할 수 있습니다. 결과적으로, AIR 어플리케이션은 기본은 다음과 같습니다:

페이지 | 8

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

플래시 또는 플렉스 : 루트 콘텐츠가 플래시/플렉스 (swf)인 어플리케이션 플래시 또는 html 이나 pdf 을 포함한 플렉스 : 루트 콘텐츠가 플래시 / html (html, js, CSS) 또는 pdf 콘텐츠를 포함한 어플리케이션 Html : 루트 콘텐츠가 html, js, CSS 인 어플리케이션 플래시 / 플렉스 또는 pdf 이 포함된 html : 루트 콘텐츠가 html 과 플래시 / 플렉스 (swf) 또는 pdf 콘텐츠를 포함한 어플리케이션  기본 데스크톱 어플리케이션과 상호 작용하는 것과 같이 사용자도 AIR 어플리케이션과 상호 작용합니다. 런타임을 사용자 컴퓨터에 설치한 후에, AIR 어플리케이션이 설치하고, 다른 데스크톱 어플리케이션과 같이 실행합니다. 런타임은 일관된 크로스-오퍼레이팅 시스템 플랫폼과 프레임 워크를 제공합니다.그러므로 데스크탑 사이에 일관된 기능과 활용을 확인하기 위한 크로스-브라우저 테스트를 고려할 필요가 없습니다.특수 운영 체제를 개발을 고려할 필요가 없습니다. 그래서 장점이 다음과 같습니다.AIR 로 개발된 어플리케이션은 다른 작업 없이 다중 운영 체제에서 작동합니다. AIR 가 지원하는 모든 운영 체제에서 일관성과 프레젠테이션 및 상호 작용을 보증합니다.기존의 웹 기술과 디자인 패턴 또는 전통적인 데스크톱 개발 기술 또는 원시 코드의 복잡성을 활용하고 확장하지 않고 어플리케이션을 빠르게 구축할 수 있습니다. c 와 c++과 같은 언어를 사용하는 것 보다 쉽게, AIR 어플리케이션 개발은 각각의 운영 체제에서의 복잡하고, 낮은 수준의 API 를 배울 필요가 없습니다. AIR 어플리케이션을 개발할 때, 풍부한 일련의 프레임 워크와 API 를 활용할 수 있습니다.

런타임에서 제공하는 AIR 의 API 및 AIR 프레임 워크 액션스크립트 API 를 사용하는 swf 파일 및 플렉스 프레임 워크 (뿐만 아니라 액션스크립트 기반 라이브러리 및 프레임 워크) AIR 는 애플리케이션을 만들고, 배포하고, 실행할 수 있는 환상적인 새로운 패러다임입니다.독창적인 컨트롤을 얻을 수 있고, 플래시, 플렉스, html, Ajax 기반 어플리케이션을 기존 데스크톱을 개발 기술을 공부하지 않고, 확장할 수 있습니다. 

③ 팀 업무 적용 방안.- GnB Carrot Account 개발.- GnB Website Renewal(인터렉티브한 각 메인 페이지)- 학원업무관리 프로그램 및 물류 주문 프로그램.- GnB Voca-Race 2.0- 외 기타.

6) 예제 사이트 및 온라인 교육.① Flex / AIR

- FLEX ORG : http://flex.org/- ADOBE DEVELOPER CONNECTION : http://www.adobe.com/devnet/flex/- Adobe RIA 공식사이트 : http://www.adobeflex.co.kr/- Flex de tour : http://www.adobe.com/devnet/flex/tourdeflex/web/- Flex AIR 한글화 문서 : http://flexdocs.kr/- Adobe Flex 3 한글매뉴얼 : http://www.adobeflex.co.kr/adoberia_help.html

② Flex / AIR 실제 적용 예. 국내- http://www.cgv.co.kr/ - http://www.wizwid.com/ - http://www.gseshop.co.kr/ - http://moneybook.naver.com/ - http://opencast.naver.com/ - 국외- http://coenraets.org/apps/livehelp/customer.html .- http://visudemos.ilog.com/blogsamples/olympics/olympics.html - http://examples.adobe.com/flex2/inproduct/sdk/photoviewer/

PhotoViewer.html

페이지 | 9

2023 년 4 월 10 일 月요일 IT 사업팀 윤 재 원

③ 기타 참고 사이트.- Adobe HD Video(H.264) : http://www.adobe.com/products/hdvideo/

- RIA 개발자 블로그 : http://www.uxkorea.net- RIA 개발자 블로그 : http://koko8829.tistory.com- RIA 개발사이트 : http://gongdosoft.com

④ Flex 온라인 교육.- CodeWay : http://www.codeway.co.kr/board/bbs/board.php?

bo_table=FLEX_Lecture- CDISM : http://www.cdism.com/flexedu.html- 엄진영의 기술 나눔터 : http://www.jinyoung-eom.kr/tc/

페이지 | 10