Rich Internet Application -기획자 & 개발자가 함께 하는 RIA - March. 2006 SK Communications * 본 자료의 무단 배포를 적극 권장합니다.

Contents Part 1. RIA Strategy Presentation Part 2. Question & Answer 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

PART 1. RIA Strategy Presentation Rich Internet Application 이란 무엇인가? RIA의 탄생 배경 RIA가 갖춰야 할 필수 요소 해외 RIA 개발 사례 국내 RIA 개발 사례 RIA의 GOOD/BAD CASE RIA 개발 방법 비교 새로운 비즈니스로의 RIA 미래의 RIA

Rich Internet Application 이란 무엇인가?

Rich Internet Application 이란 무엇인가? 새로운 웹의 패러다임 + 새로운 애플리케이션 UI 패러다임 2002년 말 부터 매크로미디어가 자사의 MX 제품군을 출시하면서 주창해 온 웹의 새로운 패러다임 보다 편리한 애플리케이션을 개발하기 위한 하나의 아이디어 플래시만이 RIA가 아니다. 웹 페이지 중심에서 별도의 애플리케이션을 웹에 결합한 형태 그러나 웹 = RIA이라는 공식은 올바르지 않다 RIA는 웹을 한 차원 수준을 높힐 수는 있다. 하지만 현시점에서 웹을 100%로 대체할 수는 없다. Comment 현재 많은 사람들은 RIA에 대해서 멋있는 플래시로 축소하여 생각하는 사람들이 많다. 그렇지만 RIA는 꽤 오래전부터 연구되어 왔던 X-Internet의 하나의 종류로 자리잡았다. 그러나 RIA 이전에 Rich Application 이라는 단어로 많은 아이디어들이 나왔지만 tool과 viewer의 한계로 성공하지 못하였다.

Rich Internet Application 이란 무엇인가? 복잡한 Interface로 고객 이탈 웹 상에서의 결제,상품 조회등의 프로세스 중 페이지 Depth가 깊어지고 프로세스가 길어 고객이 지루함을 느껴 이탈하는 경우가 발생함. 불필요한 정보호출로 체류시간 저하 클릭시 마다 발생하는 페이지의 리로딩은 원하는 정보 외의 모든 정보가 다시 호출되어 로딩시간이 길어져 고객이 오래 잔류하지 못함. 컨텐츠의 재활용성 부족 많은 비용을 들여 개발한 웹 서비스를 모바일에 서비스하기 위해서 모바일 인터페이스를 전면 개발해야 함. RIA 간편하고 다이나믹한 Interface로 고객이탈을 방지하고 즐거운 경험을 제공. 고객이 필요한 정보만을 DB에서 호출해 퍼포먼스를 향상시키고 고객 잔류시간을 연장. Benefit 기 개발된 RIA 인터페이스와 어플리케이션을 모바일에서 그대로 사용해 비용절감. 새롭고 획기적인 고객 경험을 제공해 비즈니스 경쟁 우위 역량 확보가 가능함.

RIA의 탄생 배경

RIA의 탄생 배경 1999년 12월에서 2001년 5월까지 Forrester에서 실시한 158개 웹 사이트 검토에 대한 점수 분포 사이트의 점수 범위는 -50(최저)에서 50(최고)까지 입니다. 35 각 점수 25 범위에 최고 점수: 23 해당하는 15 사이트 개수 5 -50 -30 -25 -20 -15 -10 -5 5 10 15 20 25 50 테스트에서 발견된 일반적인 오류 오류 발생률 조합 검색 87% 전체 검색 및 완전 일치 검색 84% 합격 점수: 25점 이상 적극적인 개인화 기능 80% 전체 평균 점수: -3.5 사전 대처적인 고객 서비스 75% 액세스 가능성 70% B2C 분야의 평균 점수: -2.2 효과적인 페이지 레이아웃 66% 특정 작업과 관련된 상호 작용 기능 59% B2B 분야의 평균 점수: -5.5 사이트 신뢰성 55% 25가지의 테스트 항목으로 사이트를 평가했으며 필수적이면서도 사용 가능한 컨텐츠 54% 각각의 테스트 항목은 -2(낙제점)에서 2(합격점) 일관성 있는 탐색 48% 범위의 점수를 주었습니다. Source: Forrester Research, Inc.

User Interface Deployment RIA의 탄생 배경 User Interface Deployment Low cost High cost High cost Low cost

RIA의 탄생 배경 Percentage of Internet users 1970 1980 1990 2000 Remote terminals (telnet) Rich Internet applications File transfer Email Web 100% 0% 1970 1980 1990 2000 Source: Forrester Research, Inc 2001 and Macromedia

RIA의 탄생 배경 Unique Relevant Competitive to Customer Needs Position Experiences (RIAs) Features (Web Apps) Function (Perl Script) Undifferentiated Competitive Position Irrelevant to Customer Needs Presence (Flat HTML) Market pricing Premium pricing

RIA의 탄생 배경

RIA가 갖춰야 할 필수 요소

RIA가 갖춰야 할 필수 요소 이용자 고객사 개발자 제작사 1. 사용이 쉬워야 한다. 2. 별도의 프로그램 설치 없이 사용이 가능하여야 한다. 3.원하는 작업을 빠르게 할 수 있어야 한다. 이용자 고객사 1. 유지보수가 쉬어야 한다. 2. 고객들에게 흥미를 유발시킬 수 있어야 한다. 3. 고객들에게 불편이 없이 해야 한다. 4. 높은 매출을 기록해야 한다. 1. 만들기 쉬어야 한다. 2. 협업 작업이 용이하여야 한다. 3. 빨리 만들어야 한다. 4. 재활용성이 좋아야 한다. 5. 유지보수가 쉬어야 한다. 1. 유지보수가 쉬어야 한다. 2. 개발비용이 저렴해야 한다. 3. 개발기간이 짧아야 한다. 4. 시스템의 안정성이 좋아야 한다. 5. 고객 pattern 분석이 가능하여야 한다. 6. 타 시스템과 연동이 가능하여야 한다. 개발자 제작사 Comment 위의 조건들을 모두 충족하는 애플리케이션을 만들기란 정말 어려운 작업이다. 그러나 만들려고 하는 애플리케이션이 어느 부분에 포커스가 맞춰져 있는지를 파악해 본 후 요소에 따라서 경중을 두어 생각한다면 그리 어려운 일만을 아닐 것이다. “RIA”라는 용어 자체가 매크로미디어로 부터 출생되었지만, 그렇다고 해서 무조건 매크로미디어 제품들로만 만들어야지 RIA가 아니다. 다른 방법 비교로 만들었다고 하더라도 그것은 위의 요소를 충족한다면 그것 또한 RIA라고 부를 수 있다.

RIA가 갖춰야 할 필수 요소 Sample 1 2 3 4 5 프로젝트에서 필요한 요소들을 열거한 후 우선순위를 정한다. 1. 사용이 쉬워야 한다. 2. 별도의 프로그램 설치 없이 사용이 가능하여야 한다. 3.원하는 작업을 빠르게 할 수 있어야 한다. Sample 1. 만들기 쉬어야 한다. 2. 협업 작업이 용이하여야 한다. 3. 빨리 만들어야 한다. 4. 재활용성이 좋아야 한다. 5. 유지보수가 쉬어야 한다. 1. 유지보수가 쉬어야 한다. 2. 고객들에게 흥미를 유발시킬 수 있어야 한다. 3. 고객들에게 불편이 없이 해야 한다. 4. 높은 매출을 기록해야 한다. 1. 유지보수가 쉬어야 한다. 2. 개발비용이 저렴해야 한다. 3. 개발기간이 짧아야 한다. 4. 시스템의 안정성이 좋아야 한다. 5. 고객 pattern 분석이 가능하여야 한다. 6. 타 시스템과 연동이 가능하여야 한다. 1 2 3 4 5 Comment 프로젝트에서 필요한 요소들을 열거한 후 우선순위를 정한다. 이러한 프로세스는 실제로 프로젝트에서 RIA로 제작되지 않아도 되는 상황이 나오기도 한다. 정확한 RIA 구축 필요성을 인식시킨 후 향후 도입에써 어떤 부분을 강조할 것이냐는 RIA 도입에 중요한 부분중의 하나이다.

해외 RIA 개발 사례

해외 RIA 개발 사례 Reservation News & Stock Industry Shopping mall Game Broadmoor Hotel - iHotelier All Nippon Airways New York Stock E*TRADE News & Stock 정보제공 Industry CAR – BMW, MINI, HAMMER Funiture – IKEA / BIKE – Trekbikes / Mobile phone - Vodafone 흥미위주 Shopping mall Yankee Candle Clyde 빠른 작업 Game lilys / MLB Pure Honey Infra Application Graph Intranet / Email / CMS Comment 현재 해외 RIA 구현 사례는 대체적으로 이용자에게 정보를 효과적으로 제공하여 이용자들이 작업을 단시간내에 마무리 지을 수 있는데 초점을 맞추고 있다. 산업 전반에 걸쳐서 다양한 형태로 확산되어가고 있다. 그러나 해외에서도 RIA 개념이 큰 이슈로 자리잡아 가기에는 갈 길이 멀다. – 플래시가 가지고 있는 한계들. 그리고 작업적 효율성을 중시하기 때문. 이로 인해 AJAX 가 급부상을 하고 있다.

국내 RIA 도입 현황

국내 RIA 개발 사례 Korea Hotel Hotel Ambatel Theater Megabox / CGV / Interpark, Ticketlink Maxmovie – 대한극장, 무등극장, 판타지움 Traffics Asiana / 대한항공 GM Daewoo / KTX Shopping mall GSeshop / 교보문고 / A1S2 / 종가집 Infra application 조계사 원격 회의 시스템 Education YBMSISA 한솔교육 재미나라 Comment 아직 국내에서는 예약 중심의 애플리케이션에 많이 적용되고 있다. 하지만 국내에서는 공인인증서 결제/카드 결제의 안심클릭/3D VISA 등의 방식 도입에 따라 RIA 의 핵심 요소들을 100% 표현하지 못하고 있다. 국내 웹의 특성에 따라 현재까지는 작업의 효율성 보다는 흥미 위주의 측면이 많이 존재한다.

RIA의 GOOD/BAD Case

GOOD / BAD CASE Comment 무조건 RIA 방식이 좋다고 도입하는 것은 RIA 도입에 있어서 가장 위험한 생각이다. RIA 도입의 타당성을 면밀히 검토 후 도입해야 그 효과를 100% 발휘할 수 있다. 이용자들에게 별도의 애플리케이션을 설치하는 것은 상당히 큰 부담을 주며, 이것은 결과적으로 매출과 직결되기도 한다. 한글 폰트의 특성상 깨끗한 폰트 처리가 힘들다.

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

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

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

RIA 개발 방법 비교

RIA 개발 방법 비교 Flash AJAX X-Media Solution 멀티미디어 컨텐츠에 강하다 풍부한 개발자 환경 Javascript를 이용해 사용자 컴퓨터의 사양이 높지 않아도 된다. 개발 비용이 가장 저렴하다. (인건비 제외) 개발 스펙이 표준화에 가깝다. 별도의 Active X 와 같은 추가 애플리케이션을 설치하지 않아도 됨. 멀티미디어 컨텐츠에 강하다 풍부한 개발자 환경 컴퓨터의 부하를 많이 준다(CPU) 하나의 시스템에서 다국어 지원이 어렵다. (다국어 데이터 처리의 한계) Open Source 가 많이 없다. 아직까지 모든 브라우저에서 호환되지 않는다. 비용이 비싸다. 별도의 브라우저 환경이 필요한 경우가 많다. 솔루션에 따른 별도의 개발 언어 또는 규칙을 이용해야 함.

RIA 개발 방법 비교 Adobe의 SVG로 개발한 예매 Demo Flash로 개발한 예매 Demo Comment Flash 기반의 애플리케이션이 가장 좋은 것이 아니다. Adobe의 SVG는 플래시보다 성능이 좋지만 확산되지 않은 SVG VIEWER와 개발 단계에서의 어려움이 한계점으로 인식된다.

“ ” RIA 개발 방법 비교 이전의 웹 기획 방식을 머리 속에서 지워라! Good RIA 시간 아이디어 개발방법 비교 흥미 예산 개발팀 구성 유지보수 Comment 기존의 웹 기획과 항목별로 판단하였을 경우에는 비슷한 부분이 있다. 그러나 실제로 개발 관련 / 아이디어 네비게이션 관련된 항목들은 이전의 웹기획과는 전혀 다른 방식으로 접근해야 한다.

TOP : 로고 및 1st Depth & Spot menu & Search RIA 개발 방법 비교 Sub page TOP Sample TOP : 로고 및 1st Depth & Spot menu & Search <Spot> 1 로그인 창 (ID, PW 입력창) 서비스가입 서비스안내 FAQ Biz Directory (상세검색) <Spot 2> 로그아웃 정보수정 서비스안내 FAQ Biz Directory (상세검색) LEFT Wing 1st Depth 2nd Depth 부가 컨텐트 1 (관련 컨텐트 GW) Body Content Ring wing body content 에 대한 각종 사용자 정의 옵션이 있는 경우 검색 전체 ▽ 찾기 영화 인물 제작사(배급사) Biz nkino 로고 nkino.com 로고 및 GW 오늘 날짜 및 시간 표기 기존의 웹 기획 방식의 UI 설계서 Comment 기존 웹 기획에서 가장 중요했던 항목은 메인 페이지와 네비게이션 구조였으나 RIA는 전체적인 관점에서 사용의 편리함을 담고 있어야 한다는 점에서 기존의 기획보다 상당히 어려운 부분이 많다. 특히 화면 UI 구성에서 에니메이션과 관련된 항목과 각 부분별 화면 변화에 대한 설계는 차후 개발자들이 애플리케이션을 개발하는데 초석이 된다.

RIA 개발 방법 비교 1 Sample 5 7 1 영화리스트 2 예약일자선택 2 3 관람시간선택 4 관람인원선택 5 결제카드선택 8 3 6 카드입력선택 6 7 내가선택한영화 (쇼핑카트) 4 8 결제금액확인 9 9 결제 Comment 기존 웹 기획에서 가장 중요했던 항목은 메인 페이지와 네비게이션 구조였으나 RIA는 전체적인 관점에서 사용의 편리함을 담고 있어야 한다는 점에서 기존의 기획보다 상당히 어려운 부분이 많다. 특히 화면 UI 구성에서 에니메이션과 관련된 항목과 각 부분별 화면 변화에 대한 설계는 차후 개발자들이 애플리케이션을 개발하는데 초석이 된다.

RIA 개발 방법 비교

RIA 도입의 의도를 정확하게 분석 & 팀 구성을 면밀히 검토 서버 개발에 있어서의 가장 중요한 부분을 분석 후 협업 M odel – Server Dev V iew – Designer C ontrol - Flash 기획자의 의도를 완벽하게 디자인으로 표현 2D디자인의 완벽한 에니메이션화 RIA 도입의 의도를 정확하게 분석 & 팀 구성을 면밀히 검토 기획자 디자이너 서버 개발자 플래셔 플래시의 협업 작업 필수 서버 개발에 있어서의 가장 중요한 부분을 분석 후 협업 서버 개발자들과 플래셔들의 협업 관계 형성 Comment 그러나 현실적으로 실제 개발에 투여되는 사람이 많을 수록 불편함을 초래한다. 즉, 적은 멤버의 효과적인 팀워크로만이 작업이 완료될 수 있다. 플래시는 협업 과정을 지원하는 인터페이스가 되어 있지 않다.

새로운 비즈니스로의 RIA

RIA 새로운 비즈니스로의 RIA Solution Web Intranet Other Device Mobile & PDA Education Mobile & PDA Comment RIA는 단순히 PC상에서 구현되는 흥미 위주의 사이트를 만들기 위함이 아니다. 새로운 비즈니스의 도구로써 100% 활용될 때 RIA의 진면목을 볼 수 있다. 특히 최근에 RIA는 기존에 없었던 새로운 아이디어를 구현해 내기 위한 새로운 도구로 부상하고 있다.

새로운 비즈니스로의 RIA 베너 형태를 이용한 퀵 카트 방식 애플리케이션 Comment 최근 쇼핑몰을 중심으로 RIA 도입의 많은 시도가 보이지만, 실제적으로 도입화하여 안정하기 위해서는 많은 시간과 노력이 필요하다.

새로운 비즈니스로의 RIA 동영상 Viewer 와 쇼핑 결합 Comment 기존에 진행하고 있던 사업들을 조화롭게 결합시켜서 새로운 비즈니스 영역을 만들어 낼 수 있다.

새로운 비즈니스로의 RIA 새로운 게시판 형태 Comment 새로운 아이디어는 새로운 비즈니스 시작의 첫걸음이다.

새로운 비즈니스로의 RIA 모바일 장비를 이용한 주차 단속 시스템 Comment PDA의 애플리케이션에서 아직까지 RIA 도입에 대한 모습은 찾기 힘들다. 하지만 POCKET PC 버전의 플래시 버전을 이용한 애플리케이션이 하나씩 만들어져 가고 있다. PC 환경에서 만든 애플리케이션을 그대로 포팅할 수 있다는 점에서 큰 장점을 가지고 있으나 다른 PDA 버전(Parm, Linux)의 PDA 단말은 기본적으로 지원하지 않고 있다.

Flash Player가 기본적으로 탑재된 단말기들 새로운 비즈니스로의 RIA Flash Player가 기본적으로 탑재된 단말기들 Comment 핸드폰 단말기에서의 Flash Player 도입은 무선 애플리케이션의 새로운 시장을 개척할 것이다. 그러나 현재 핸드폰 단말기에 들어가 있는 Flash Player Lite 버전은 PC 버전과는 달리 네트웤 기능이 포함되지 않았다. 국내 주요 핸드폰 단말기 회사와 매크로미디어가 Flash Player 탑재 계약을 맺은 상태

미래의 RIA

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

Appendix

Appendix 1 쇼핑몰 메인 – 모든 요소가 한 화면에 구성 2 제품카테고리 – Dynamic Interface에서 카테고리 선택 3 제품보기 – 단일 Interface서 제품 선택 4 결제 – 결제 프로세스를 단일 Interface에서 제공

Appendix

Appendix

Appendix

PART 2. Question & Answer