Rich Internet Application - 기획자 & 개발자가 함께 하는 RIA -

Rich Internet Application- 기획자 & 개발자가 함께 하는 RIA -

March. 2006SK Communications

* 본 자료의 무단 배포를 적극 권장합니다 .

2

Contents

Part 1. RIA Strategy Presentation

1) Rich Internet Application 이란 무엇인가 ?

2) RIA 의 탄생 배경

3) RIA 가 갖춰야 필수 요소

4) 해외 RIA 개발 사례

5) 국내 RIA 개발 사례

6) RIA 의 GOOD/BAD CASE

7) RIA 개발 방법 비교

8) 새로운 비즈니스로의 RIA

9) 미래의 RIA

Part 2. Question & Answer

3

PART 1. RIA Strategy PresentationI. Rich Internet Application 이란 무엇인가 ?

II. RIA 의 탄생 배경

III. RIA 가 갖춰야 할 필수 요소

IV. 해외 RIA 개발 사례

V. 국내 RIA 개발 사례

VI. RIA 의 GOOD/BAD CASE

VII. RIA 개발 방법 비교

VIII. 새로운 비즈니스로의 RIA

IX. 미래의 RIA

4

I. Rich Internet Application 이란 무엇인가 ?

5


Comment

• 현재 많은 사람들은 RIA 에 대해서 멋있는 플래시로 축소하여 생각하는 사람들이 많다 . 그렇지만 RIA 는 꽤 오래전부터 연구되어 왔던 X-Internet 의 하나의 종류로 자리잡았다 .

• 그러나 RIA 이전에 Rich Application 이라는 단어로 많은 아이디어들이 나왔지만 tool 과 viewer 의 한계로 성공하지 못하였다 .

새로운 웹의 패러다임

+

새로운 애플리케이션 UI 패러다임

새로운 웹의 패러다임

+

새로운 애플리케이션 UI 패러다임

2002 년 말 부터 매크로미디어가 자사의 MX 제품군을 출시하면서 주창해 온 웹의 새로운 패러다임

보다 편리한 애플리케이션을 개발하기 위한 하나의 아이디어

플래시만이 RIA 가 아니다 .

웹 페이지 중심에서 별도의 애플리케이션을 웹에 결합한 형태

그러나 웹 = RIA 이라는 공식은 올바르지 않다

RIA 는 웹을 한 차원 수준을 높힐 수는 있다 . 하지만 현시점에서 웹을 100% 로 대체할 수는 없다 .

6


복잡한 Interface 로 고객 이탈 웹 상에서의 결제 , 상품 조회등의 프로세스 중 페이지 Depth 가 깊어지고

프로세스가 길어 고객이 지루함을 느껴 이탈하는 경우가 발생함 .

불필요한 정보호출로 체류시간 저하 클릭시 마다 발생하는 페이지의 리로딩은 원하는 정보 외의 모든 정보가 다시

호출되어 로딩시간이 길어져 고객이 오래 잔류하지 못함 .

컨텐츠의 재활용성 부족많은 비용을 들여 개발한 웹 서비스를 모바일에 서비스하기 위해서 모바일

인터페이스를 전면 개발해야 함 .

간편하고 다이나믹한 Interface 로 고객이탈을 방지하고 즐거운 경험을 제공 .

고객이 필요한 정보만을 DB 에서 호출해 퍼포먼스를 향상시키고 고객 잔류시간을 연장 .

기 개발된 RIA 인터페이스와 어플리케이션을 모바일에서 그대로 사용해 비용절감 .

새롭고 획기적인 고객 경험을 제공해 비즈니스 경쟁 우위 역량 확보가 가능함 .

Benefit

RIA

7

II.RIA 의 탄생 배경

8


Source: Forrester Research, Inc.

5

15

25

35

-25-30-50 -20 -15 -10 -5 0 5 10 15 20 25 50

각 점수 범위에해당하는사이트개수

최고 점수 : 23

25 가지의 테스트 항목으로 사이트를 평가했으며각각의 테스트 항목은 -2( 낙제점 ) 에서 2( 합격점 )범위의 점수를 주었습니다 .

1999 년 12 월에서 2001 년 5 월까지 Forrester 에서 실시한 158 개 웹 사이트 검토에 대한 점수 분포 사이트의 점수 범위는 -50( 최저 ) 에서 50( 최고 ) 까지 입니다 .

합격 점수 :

전체 평균 점수 :

B2C 분야의 평균 점수 :

B2B 분야의 평균 점수 :

25 점 이상

-3.5

-2.2

-5.5

테스트에서 발견된 일반적인 오류조합 검색

전체 검색 및 완전 일치 검색적극적인 개인화 기능사전 대처적인 고객 서비스

액세스 가능성효과적인 페이지 레이아웃특정 작업과 관련된 상호 작용 기능

사이트 신뢰성필수적이면서도 사용 가능한 컨텐츠일관성 있는 탐색

오류 발생률87%84%80%75%70%66%59%55%54%48%

9


User Interface

Deployment Low cost High cost High cost Low cost

10


Percentage of Internet users

Source: Forrester Research, Inc 2001 and Macromedia

100%

0%1970 1980 1990 2000

File transfer

Remote terminals(telnet) Emai

lWeb

Rich Internet applications

11


Market pricing Premium pricing

UndifferentiatedCompetitive

Position

UniqueCompetitive

Position

Relevant to CustomerNeeds

Irrelevant to CustomerNeeds

Presence(Flat HTML)

Presence(Flat HTML)

Function(Perl Script)

Function(Perl Script)

Features(Web Apps)

Features(Web Apps)

Experiences(RIAs)

Experiences(RIAs)

12


13

III.RIA 가 갖춰야 할 필수 요소

14

Comment

• 위의 조건들을 모두 충족하는 애플리케이션을 만들기란 정말 어려운 작업이다 . 그러나 만들려고 하는 애플리케이션이 어느 부분에 포커스가 맞춰져 있는지를 파악해 본 후 요소에 따라서 경중을 두어 생각한다면 그리 어려운 일만을 아닐 것이다 .

• “RIA” 라는 용어 자체가 매크로미디어로 부터 출생되었지만 , 그렇다고 해서 무조건 매크로미디어 제품들로만 만들어야지 RIA 가 아니다 . 다른 방법 비교로 만들었다고 하더라도 그것은 위의 요소를 충족한다면 그것 또한 RIA 라고 부를 수 있다 .


이용자이용자

개발자개발자

제작사제작사

고객사고객사

1. 사용이 쉬워야 한다 .

2. 별도의 프로그램 설치 없이 사용이 가능하여야 한다 .

3. 원하는 작업을 빠르게 할 수 있어야 한다 .

1. 만들기 쉬어야 한다 .

2. 협업 작업이 용이하여야 한다 .

3. 빨리 만들어야 한다 .

4. 재활용성이 좋아야 한다 .

5. 유지보수가 쉬어야 한다 . 1. 유지보수가 쉬어야 한다 .

2. 개발비용이 저렴해야 한다 .

3. 개발기간이 짧아야 한다 .

4. 시스템의 안정성이 좋아야 한다 .

5. 고객 pattern 분석이 가능하여야 한다 .

6. 타 시스템과 연동이 가능하여야 한다 .

1. 유지보수가 쉬어야 한다 .

2. 고객들에게 흥미를 유발시킬 수 있어야 한다 .

3. 고객들에게 불편이 없이 해야 한다 .

4. 높은 매출을 기록해야 한다 .

15

Comment

• 프로젝트에서 필요한 요소들을 열거한 후 우선순위를 정한다 .

• 이러한 프로세스는 실제로 프로젝트에서 RIA 로 제작되지 않아도 되는 상황이 나오기도 한다 .

• 정확한 RIA 구축 필요성을 인식시킨 후 향후 도입에써 어떤 부분을 강조할 것이냐는 RIA 도입에 중요한 부분중의 하나이다 .





































1 2 3 4 5

Sample


16

IV.해외 RIA 개발 사례

17

Comment

• 현재 해외 RIA 구현 사례는 대체적으로 이용자에게 정보를 효과적으로 제공하여 이용자들이 작업을 단시간내에 마무리 지을 수 있는데 초점을 맞추고 있다 .

• 산업 전반에 걸쳐서 다양한 형태로 확산되어가고 있다 .

• 그러나 해외에서도 RIA 개념이 큰 이슈로 자리잡아 가기에는 갈 길이 멀다 . – 플래시가 가지고 있는 한계들 . 그리고 작업적 효율성을 중시하기 때문 . 이로 인해 AJAX 가 급부상을 하고 있다 .

IV.해외 RIA 개발 사례

ReservationReservation

News & StockNews & Stock

IndustryIndustry

Shopping mallShopping mall

GameGame

Infra ApplicationInfra Application

• Broadmoor Hotel - iHotelier

• All Nippon Airways

• New York Stock

• E*TRADE

• CAR – BMW, MINI, HAMMER

• Funiture – IKEA / BIKE – Trekbikes / Mobile phone - Vodafone

• Yankee Candle

• Clyde

• lilys / MLB

• Pure Honey

• Graph

• Intranet / Email / CMS

정보제공

흥미위주

빠른 작업

18

V.국내 RIA 도입 현황

19

Comment

• 아직 국내에서는 예약 중심의 애플리케이션에 많이 적용되고 있다 . 하지만 국내에서는 공인인증서 결제 / 카드 결제의 안심클릭 /3D VISA 등의 방식 도입에 따라 RIA 의 핵심 요소들을 100% 표현하지 못하고 있다 .

• 국내 웹의 특성에 따라 현재까지는 작업의 효율성 보다는 흥미 위주의 측면이 많이 존재한다 .

V. 국내 RIA 개발 사례

HotelHotel

TheaterTheater

TrafficsTraffics

Shopping mallShopping mall

Infra applicationInfra application

• Korea Hotel

• Ambatel

• Megabox / CGV / Interpark, Ticketlink

• Maxmovie – 대한극장 , 무등극장 , 판타지움

• Asiana / 대한항공

• GM Daewoo / KTX

• GSeshop / 교보문고 /

• A1S2 / 종가집

• 조계사

• 원격 회의 시스템

EducationEducation• YBMSISA

• 한솔교육 재미나라

20

VI.RIA 의 GOOD/BAD Case

21

Comment

• 무조건 RIA 방식이 좋다고 도입하는 것은 RIA 도입에 있어서 가장 위험한 생각이다 . RIA 도입의 타당성을 면밀히 검토 후 도입해야 그 효과를 100% 발휘할 수 있다 .

• 이용자들에게 별도의 애플리케이션을 설치하는 것은 상당히 큰 부담을 주며 , 이것은 결과적으로 매출과 직결되기도 한다 .

• 한글 폰트의 특성상 깨끗한 폰트 처리가 힘들다 .

VI. GOOD / BAD CASE

22

Comment

• 국내에서는 결제 시스템이 RIA 도입의 가장 큰 걸림돌이 되고 있다 .

VI. GOOD / BAD CASE

23

Comment

• 국내에서는 결제 시스템이 RIA 도입의 가장 큰 걸림돌이 되고 있다 .

VI. GOOD / BAD CASE

24

Comment

• GSESHOP 은 ‘나만의 LG 이숍’이라는 메뉴를 자바 기반의 플래시 기반으로 제작하였다가 다시 웹 페이지 방식으로 변경하였다 . 그 이유가 뭘까 ?

VI. GOOD / BAD CASE

25

VII.RIA 개발 방법 비교

26


FlashFlash AJAXAJAX X-Media SolutionX-Media Solution

멀티미디어 컨텐츠에 강하다

풍부한 개발자 환경

Javascript 를 이용해 사용자 컴퓨터의 사양이 높지 않아도 된다 .

개발 비용이 가장 저렴하다 . (인건비 제외 )

개발 스펙이 표준화에 가깝다 .

별도의 Active X 와 같은 추가 애플리케이션을 설치하지 않아도 됨 .

멀티미디어 컨텐츠에 강하다

풍부한 개발자 환경

컴퓨터의 부하를 많이 준다 (CPU)

하나의 시스템에서 다국어 지원이 어렵다 . ( 다국어 데이터 처리의 한계 )

Open Source 가 많이 없다 .

아직까지 모든 브라우저에서 호환되지 않는다 .

비용이 비싸다 .

별도의 브라우저 환경이 필요한 경우가 많다 .

솔루션에 따른 별도의 개발 언어 또는 규칙을 이용해야 함 .

27

Comment

• Flash 기반의 애플리케이션이 가장 좋은 것이 아니다 .

• Adobe 의 SVG 는 플래시보다 성능이 좋지만 확산되지 않은 SVG VIEWER 와 개발 단계에서의 어려움이 한계점으로 인식된다 .

Adobe 의 SVG 로 개발한 예매 Demo Flash 로 개발한 예매 Demo


28

Comment

• 기존의 웹 기획과 항목별로 판단하였을 경우에는 비슷한 부분이 있다 . 그러나 실제로 개발 관련 / 아이디어 네비게이션 관련된 항목들은 이전의 웹기획과는 전혀 다른 방식으로 접근해야 한다 .

이전의 웹 기획 방식을 머리 속에서 지워라 !“

”

Good RIA

시간시간

흥미흥미

예산예산 개발팀 구성개발팀 구성 유지보수유지보수

개발방법 비교개발방법 비교

아이디어아이디어


29

Comment

• 기존 웹 기획에서 가장 중요했던 항목은 메인 페이지와 네비게이션 구조였으나 RIA 는 전체적인 관점에서 사용의 편리함을 담고 있어야 한다는 점에서 기존의 기획보다 상당히 어려운 부분이 많다 .

• 특히 화면 UI 구성에서 에니메이션과 관련된 항목과 각 부분별 화면 변화에 대한 설계는 차후 개발자들이 애플리케이션을 개발하는데 초석이 된다 .

TOP : 로고 및 1st Depth & Spot menu & Search

LEFT Wing

•1st Depth

•2nd Depth

•부가 컨텐트 1 ( 관련 컨텐트 GW)

Ring wing

•body content 에 대한 각종 사용자 정의 옵션이 있는 경우

Body Content

Sub page

<Spot 2>

로그아웃

정보수정

서비스안내

FAQ

Biz Directory

( 상세검색 )

<Spot> 1

로그인 창

(ID, PW 입력창 )

서비스가입

서비스안내

FAQ

Biz Directory

( 상세검색 )

검색 전체 ▽ 찾기

영화

인물

제작사 (배급사 )

TOP

•Biz nkino 로고

•nkino.com 로고 및 GW

•오늘 날짜 및 시간 표기

기존의 웹 기획 방식의 UI 설계서

Sample


30

Comment

• 기존 웹 기획에서 가장 중요했던 항목은 메인 페이지와 네비게이션 구조였으나 RIA 는 전체적인 관점에서 사용의 편리함을 담고 있어야 한다는 점에서 기존의 기획보다 상당히 어려운 부분이 많다 .

• 특히 화면 UI 구성에서 에니메이션과 관련된 항목과 각 부분별 화면 변화에 대한 설계는 차후 개발자들이 애플리케이션을 개발하는데 초석이 된다 .

1

2

3

4

5

6

7

8

9

1 영화리스트

2 예약일자선택

3 관람시간선택

4 관람인원선택

5 결제카드선택

6 카드입력선택

7 내가선택한영화( 쇼핑카트 )

8 결제금액확인

9 결제

Sample


31


32

Comment

• 그러나 현실적으로 실제 개발에 투여되는 사람이 많을 수록 불편함을 초래한다 . 즉 , 적은 멤버의 효과적인 팀워크로만이 작업이 완료될 수 있다 .

• 플래시는 협업 과정을 지원하는 인터페이스가 되어 있지 않다 .

기획자

디자이너

플래셔

서버 개발자

M odel – Server Dev

V iew – Designer

C ontrol - Flash

플래시의 협업 작업 필수플래시의 협업 작업 필수

서버 개발자들과 플래셔들의 협업 관계 형성

서버 개발자들과 플래셔들의 협업 관계 형성

기획자의 의도를 완벽하게 디자인으로 표현

기획자의 의도를 완벽하게 디자인으로 표현

RIA 도입의 의도를 정확하게분석 & 팀 구성을 면밀히 검토RIA 도입의 의도를 정확하게

분석 & 팀 구성을 면밀히 검토

서버 개발에 있어서의 가장 중요한 부분을 분석 후 협업서버 개발에 있어서의 가장 중요한 부분을 분석 후 협업

2D 디자인의 완벽한 에니메이션화

2D 디자인의 완벽한 에니메이션화


33

VIII. 새로운 비즈니스로의 RIA

34

Comment

• RIA 는 단순히 PC 상에서 구현되는 흥미 위주의 사이트를 만들기 위함이 아니다 . 새로운 비즈니스의 도구로써 100% 활용될 때 RIA 의 진면목을 볼 수 있다 .

• 특히 최근에 RIA 는 기존에 없었던 새로운 아이디어를 구현해 내기 위한 새로운 도구로 부상하고 있다 .

EducationIntranet

Solution

Mobile & PDA

Other Device

Web

VIII.새로운 비즈니스로의 RIA

35

Comment

• 최근 쇼핑몰을 중심으로 RIA 도입의 많은 시도가 보이지만 , 실제적으로 도입화하여 안정하기 위해서는 많은 시간과 노력이 필요하다 .

베너 형태를 이용한 퀵 카트 방식 애플리케이션


36

Comment

• 기존에 진행하고 있던 사업들을 조화롭게 결합시켜서 새로운 비즈니스 영역을 만들어 낼 수 있다 .

동영상 Viewer 와 쇼핑 결합


37

Comment

• 새로운 아이디어는 새로운 비즈니스 시작의 첫걸음이다 .

새로운 게시판 형태


38

Comment

• PDA 의 애플리케이션에서 아직까지 RIA 도입에 대한 모습은 찾기 힘들다 . 하지만 POCKET PC 버전의 플래시 버전을 이용한 애플리케이션이 하나씩 만들어져 가고 있다 .

• PC 환경에서 만든 애플리케이션을 그대로 포팅할 수 있다는 점에서 큰 장점을 가지고 있으나 다른 PDA 버전 (Parm, Linux)의 PDA 단말은 기본적으로 지원하지 않고 있다 .

모바일 장비를 이용한 주차 단속 시스템


39

Comment

• 핸드폰 단말기에서의 Flash Player 도입은 무선 애플리케이션의 새로운 시장을 개척할 것이다 .

• 그러나 현재 핸드폰 단말기에 들어가 있는 Flash Player Lite 버전은 PC 버전과는 달리 네트웤 기능이 포함되지 않았다 .

• 국내 주요 핸드폰 단말기 회사와 매크로미디어가 Flash Player 탑재 계약을 맺은 상태

Flash Player 가 기본적으로 탑재된 단말기들


40

IX. 미래의 RIA

41

Comment

• 웹의 시장을 100% 점유하지는 못하지만 웹이 아닌 다른 시장을 비롯한 각종 분야에서 RIA 는 발전할 것이다 .

?

IX. 미래의 RIA

42

Appendix

43

1 쇼핑몰 메인 – 모든 요소가 한 화면에 구성 2 제품카테고리 – Dynamic Interface 에서 카테고리 선택

3 제품보기 – 단일 Interface 서 제품 선택 4 결제 – 결제 프로세스를 단일 Interface 에서 제공

Appendix

44

Appendix

45

Appendix

46

Appendix

47

PART 2. Question & Answer

Documents

Rich Internet Application - 기획자 & 개발자가 함께 하는 RIA -