Adobe Flex, AIR 를 이용한 커머스 사이트 개발

사례 발표자 : 오창
r훈
econ510@naver.c
om
Agend
a

•Commerce Site 에서 Flex3 개발 접

근법
•Flex2 보다 좋아진점
•RSL
•Flashplayer Cache
•동적 CSS
•Flex test,debug 및 프로파일링
•AIR
 Commerce Site 에서 Flex3 개발접
근법

What’s the Flex?

Wikipedia : Adobe 사의 리치인터넷어플리케이션을 개발하기 위한 기
술
Flex 는 Adobe 의 RIA 개발을 위한 컴포넌트 기반의 Framework
입니다 .
Commerce Site 에서 Flex3 개발접
근법

Flex 도입시 고려사항에 대하여

…
E-Commerce Site 와 Flex 의
첫만남
Commerce Site 에서 Flex3 개발접
근법

고민 하나 .

어떻게 해야 고객들에게 어렵지 않게 재미있게

정확하게 많은정보를 전달 할 수 있을까 ?
Commerce Site 에서 Flex3 개발접
근법

고민 둘 .

어떻게 해야 사이트를 좀 더 돋보이게 할 수 있

을까 ? 고정된 UI 를 탈피 할 수 없을까 ?
Flex 와 Flash 적용사례
Commerce Site 에서 Flex3 개발접
근법
 Commerce Site 에서 Flex3 개발접
근법

Flex 나 Flash 를 E-Commerce 같은 Cash 를 취급하

는 서비스에 도입 해야할때는 고민을 많이 해야 합니다 .

1. 고객들의 컴퓨터 사양을 반드시 고려해야 합니다 .

2. prototyping 을 반드시 하고 개발에 착수해야 합니

다.

3. 최적화는 항상 지속적으로 이루어져야 합니다 .

( 롤링 시 이미지 수 줄이기 등 ,embed 폰트 )
Flex3 무엇이 달라졌
나?

FLEX3 에서 달라진 점
은?
• Design 요소 강화 (CSS,Skinning,Constraint)
• AdvancedDatagrid 제공
• Charting 기능 향상
• Webservice 를 분석 후 Source generate
• AIR sdk
• RSL
 Flex3 무엇이 달라졌
나?
FLEX2 의 문제점 예
시

간단한
FlvPlayer
구현 사례

NetStream 간단하게 Drag 로 구

을 현
이용하여 개발
개발기간 : 1 시간 개발기간 : 10
초
용량 : 용량
2Kbyte
FLEX3 전환 후 용량 : 74Kbyte(RSL
:152Kbyte
사용시 )
Flex3 무엇이 달라졌
나?

FLEX3 에서 개선된
점
•Flex2 의 가장큰 문제였던 framework 의 무게가 어느정도 해
결.

•Component 의 Design 변경이 용이해 졌고 많이 명확해짐 .

•FLEX 만의 색깔을 가지게 되었음 .

R
SLs

RSLs
?
Runtime Shared
Libraries

참고 URL
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:Flex_3_RSLs
R
SLs
R
SLs
FlashPlayer
Cache

Flash Player 의 새로운 영역

Cache
FlashPlayer
Cache

Flash
Player
CACHE (swz)

SWF
FLEX
CSS

동적 CSS 의 지
원
FLEX
CSS

CS CS
S S
RUNTIM RUNTIM
E E

SW
F
(MAIN
CONTENTS)
FLEX
SKINNING

Flex Skin Design

Extensions
Commerce Site 에서 Flex3 개발접
근법

FLEX DEBUGGING &

PROFILING
 FLEX Debugging &
Profiling

FLEXUNI http://code.google.com/p/as3flexunit
lib/
T
FLEX Debugging &
Profiling
PROFILIN
G
 FLEX Debugging &
Profiling
Flair(LogWatcher
http://graysky.sourceforge.n
et/
)

Debug 모드로 하지 않아도 trace 로 보낸 message 나 error log 가 쌓인

Log file 을 읽어서 log 를 보여줍니다 .
AI
R

AI (Adobe Integration
Runtime)

R
AI
R

AI 응용 가이드

R Native Application Display

HTML SWF
PDF PDF

Renderer
Renderer Overlays
Scripting Scripting
DOM DOM
SWF HTML

AIR
APIs
AI
R

D
EMO
변화의 시기에는 배우려고 하는 이들이 세상을 차지합니다…
언제나 행복하시길 바라겠습니다 … .. 감사합니
다.