09:30~10:30

>전략적 위치: The Web as Platform >사용자 위치: 자신의 데이터를 직접 제어 할 수 있다. >핵심 가치

•소프트웨어가 아니라 서비스 •능동적인 참여를 기초로 하는 기술 구조 •비용 대비 효과적인 확장성 •데이터 소스와 변환이 함께 제공 가능 •단일 디바이스를 넘어서는 소프트웨어 서비스 •공동 저작, 집합 지능

제공자로서 사용자: PageRank, eBay Reputation,

Amazon Review

분류가 아닌 태깅: Flickr, del.icio.us

출판이 아닌 참여: Blogs

극단적인 분산화 BitTorrent

풍부한 사용자 경험: Gmail, Google Maps, Ajax

롱테일에 기반한 사용자 셀프 서비스:

Google AdSense

극단적인 믿음: Wikipedia

기술이 아닌 “접근 태도”

롱테일

Intel Inside로서 데이터

지속적인 베타 서비스

분석가능성 (Hackablility)

사람들이 사용함에 따라 유용성이 증대

통제하지 말고 협력하라

입소문 마케팅

조합 권한 제공: 임의의 저작권

예측되지 않는 사용자 행태

컨텐츠 주소와 위치의 단순성

유연하게 연결된 작은 컴포넌트로서 웹

사용자에 대한 신뢰

JVM Platform Web site

Java API Interface Web Services

Java Application Software Data

Developer Participators User, Small Biz.

API Lock-in Key Factor Data Lock-in

Conditions of Disruptions – Rapid paradigm shift

– Changes from edge

– Convergence between concepts

– Growth of IT infrastructure

Examples of Disruptions – IBM/Apple Personal Computing (1980, 1985)

– Microsoft Software Platform (1990, 1995)

– Google Web Platform (2000, 2005)

Machine Readable Concept Human Readable

Xml/Rdf Syndication Rss

Soap Protocol Rest/Http

Applications Objects Users

Transaction Action Trackback/Ping

– 누구나 쉽게 개발에 참여할 수 있는 다양한 프레임웍 제공

– 데이터를 다룰 수 있는 각종 오픈 소스 및 라이브러리의 무료 제공

– 참여 문화 구조의 원동력

– 서비스와 데이터를 다룰 수 있는 각종 오픈 API용 포맷

– 개발 플랫폼과 독립적인 서비스 포맷

가벼운 개발 방법론 – 프로토 타입을 기반한 서비스 구현 및 테스트

– 성능 및 구조를 고려하지 않는 가벼운 개발 플랫폼 선택

– 기획/개발/디자인이 모두 참여하는 프로젝트 구조

지속적인 베타의 덕목 – 오피니언 리더들과의 원활한 의사소통

– 참여자가 원하는 핵심 기능의 개선에 중점

– API 오픈을 통한 능동적인 참여 유도 및 혁신성 유지

– 참여자들의 디지털감성을 만족

Changed to web as service-enabled software Open Source is not our competitor but environment for lightweight development Open Standard used by ‘raw’ internet as their platform

Concept Machine / Human Readable

Semantic Web (XML)

Open APIs = Reuse of Service

Google, Amazon, Ebay

Open Standards XML/XHTML/CSS/XLST

RDF/FOAF

RSS/ATOM/OPML

Platform

Publishing

Delivery

참여적 (블로그) 문화 블로깅, 위키, 오픈 소스

트랙백, 공동 저작, 공동 개발

저작 방식의 변화 XML을 통한 메터 데이터 유통은 UGC를

새로운 파워로 키워줌.

개발 방식의 변화 오피니언 리더를 기반한 사용자 중심으로

서비스 개선

Platform

Publishing

Delivery

Portal Mistakes User!=Money (Page View Maker)

User를 이해하고 이용 하라

User-centric Delivery Old: Napster, Bit-torrent

New: Blogging, Podcasting

C.F Portal Based Delivery

Long Tail

소수의 생산자, 다수의 소비자

Delivery를 쉽게 만들어 주어라

Platform

Publishing

Delivery

웹의 세가지 요소

©Doug Bowman

실례: www.mofe.go.kr

① 디자인 요소가 풍부한 웹 페이지

② 표현과 구조가 분리된 소스코드

③ 접근성이 확보된 컨텐츠 구조

웹 브라우저 지원과 웹2.0과의 관계

브라우저 지원은 친환경 경영과 같은 것 – 브라우저 호환을 통해서도 훌륭한 서비스 구현 가능

– Google Gmail, Google Maps

데스크톱 플랫폼에 대한 공격 – 웹과 데스크톱 소프트웨어 사이의 간극을 줄임

다양한 사용자의 지원 – 리눅스 및 맥킨토시 사용자는 인터넷 오피니언 리더이다.

<EUC-KR로 된 사이트를 영문 OS에서 볼 경우> <UTF-8으로 된 사이트를 영문 OS에서 볼 경우>

Problems – Japanese, Chinese, Korean (아햏햏, 붹)

– Foreign O/S and Browser

– Development Platform (Java, MySQL)

– UTF-8 based XML protocol (Open API)

– Ajax Transaction

– Globalization

과감하게 UTF-8으로 바꾸어라 – 유니 코드 기반 개발 환경 세팅

– 기존 데이터 및 서비스 페이지 변환

– L10N 기반 서비스를 기본으로 제공

URL이 Semantic 해야 하는 이유 – URL은 정보를 표현하는 기본 단위로서 Permanent 해야 한다.

– URL은 User readable, reliable, hackable 해야 한다.

Open API의 기본 철학 – 자신의 데이터 제어 (Editing, Viewing, Mixing, Matching)

– Open Data Format(호환 가능한 오픈 포맷 이용)

Open API의 기본 원칙 – 웹 페이지가 아닌 데이터를 디자인 하라

– 가려운 곳을 긁어라 (잘 안 되는 한가지 문제 풀기)

– 가능한 간단히 만들어라 (점진적 진화, 향상 시켜라)

– 사람이 먼저, 기계는 나중 • 보기 좋고 읽기 좋게 하여 프로그래밍에 동참 시키기

– 광범위한 표준을 재사용 (표준을 준수하면 재창조 가능)

– 모듈화/임베딩 가능하게 만들어라.

– 개발, 컨텐츠, 서비스를 분산 시켜라

Open API 디렉토리 – WSFinder: http://wsfinder.jot.com/WikiHome

– Programmable Web: http://www.programmableweb.com/apis

API 플랫폼 채택 방법 – 포맷: XML, RDF – 통신 표준: REST > XML-RPC > SOAP – 언어: Javascript > PHP/Python/ASP > Java > C – 기존 Open Format 재 활용

• c.f iCal, RSS/Atom, Microformats.org

API를 만들어야 하는 열 가지 이유 – 1. 오피니언 리더 그룹에게 브랜드 전파할 수 있다 – 2. 사용자가 데이터를 소유할 수 있다. – 3. 개발자 그룹과의 관계를 지속적으로 유지할 수 있다. – 4. 커뮤니티를 통해 정보가 흘러 넘치게 한다. – 5. API를 통한 문제 해결은 품질을 높여 준다. – 6. 내부 데이터 재 사용 방법을 단순화 할 수 있다 – 7. 다른 사람이 서비스의 기능을 확장해 준다 – 8. 대체 자료 수집 방법 만들 수 있다. – 9. 예상 못한 서비스가 나온다. – 10. 서비스를 플랫폼으로 바꿀 수 있다.

Tag n:n

Comment

Bookmark

User

class Tag < ActiveRecord::Base has_and_belongs_to_many :tags, :foreign_key => "tid_from", :association_foreign_key => "tid_to", :join_table => "tag_relations" has_one :tag_relation, :class_name => "TagRelation", :foreign_key => "tid_to" has_and_belongs_to_many :bookmarks, :join_table => "bt_relations" end

class Bookmark < ActiveRecord::Base has_and_belongs_to_many :tags, :join_table => "bt_relations" end

Examples: Accessory

Amazon Diamond Search Anyterm.org

다음 검색에서 “Amazon Diamond Search”를 입력하세요!

Examples: Rich Application 일정 관리 – Kiko, http://www.kiko.com

– TimeTracker, http://www.formassembly.com/time-tracker/

문서 편집기 – Writely, http://www.writely.com

– HTMLEdit, http://www.squarefree.com/htmledit

메신저 – Ajax IM, http://www.unwieldy.net/ajaxim

Examples: Personalization

Google – http://www.google.com/ig

– 채널 Drag & Drop 기능

– RSS채널, 뉴스, 날씨, 메일, 검색 결과 등을 한눈에 볼 수 있음

MSN Start.com – http://www.start.com

– MSN Sandbox 서비스로 베타 서비스 중.

– 현재 Version3 까지 나와 있으며 Google 개인화 홈과 비슷한 서비스를 제공하고 있음.

Protopage – http://www.protopage.com

Blinklist – http://www.blinklist.com

RIA: Macromedia Flex® (1)

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" > <!-- data model --> <mx:Array id="coffeeArray"> <mx:Object> <label>Red Sea</label> <data>Smooth and fragrant</data> </mx:Object> <mx:Object> <label>Andes</label> <data>Rich and pungent</data> </mx:Object> <mx:Object> <label>Blue Mountain</label> <data>Delicate and refined</data> </mx:Object> </mx:Array> <mx:Script> <![CDATA[ function addToCart():Void { cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data); } ]]> </mx:Script> <!-- view --> <mx:Panel title="My First Flex App"> <mx:Label text="Coffee Blends"/> <mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/> <mx:Text text="Description: {coffeeCombo.selectedItem.data}"/> <mx:Button label="Add to Cart" click="addToCart()"/> <mx:List id="cart"/> </mx:Panel> </mx:Application>

- XML(MXML)+ ECMAScript (ActionScript) + Class Library= SWF

RIA: Macromedia Flex® (2)

웹 브라우저 확장 기능 – Windows Live Gadget

– Firefox Extensions

– Safari Widget

– Yahoo! Widget

– Google Desktop Widget

Weblication: 대세 기술 – 웹을 더욱 다이나믹 하게 만든다.

풍부한 UI를 선보일 수 있다.

– 데스크탑과 경계가 모호해 진다.

– 고급 UI개발자 및 웹 개발자의 기본 소양이 될 것이다.

– 다양한 RIA 기술 습득이 필수적.

<Flock 브라우저를 통한 블로그 출판>

<Google Desktop Widget>

RIA: XAML on Windows Vista® (1)

<Canvas xmlns="http://schemas.microsoft.com/2003/xaml" Background="LightCyan" Width="100%" Height="100%"> <Image Source="lh.bmp" Canvas.Left="5" Canvas.Top="5" /> <Text Canvas.Left="90" Canvas.Top="20" FontSize="36">Hello, Longhorn! </Text>

</Canvas> <FlowPanel> <Button Background=“Green“ Click=“EventY“>Yes</Button> <Button Background=“Red“ Click=“EventN“>No</Button> </FlowPanel>

XAML

void EventN(…) { MessageBox.Show(“Disagree"); }

C# Code void EventY(…) { MessageBox.Show(“Agree"); }

.net Code

- Windows Vista 아발론 엔진 사용 - XAML과 간단한 C#코드로 RIA 개발 가능

RIA: Gadget on Windows Live

RIA: AFLAX (Asynchronous Flash® + XAML)

http://www.xamlon.com/

- XAML과 Flash 클라이언트의 결합 - Windows/Mac/Linux/PDA에 모두 적용 가능

RIA: Extensions for Firefox(1)

- XUL + CSS + JavaScript (XPCOM) - 수 백 개의 Firefox Extensions 개발 중

RIA: Extensions for Firefox(2)

Mozilla Amazon Browser: http://www.faser.net/mab/

RIA: (aka.Konfabulator)

- Graphic + JavaScript (Mozilla) Engine - Widget: Javascript + HTML + CSS - Windows/Mac 버전 제공 중 - 2005년 6월 Yahoo!에 인수

RIA - Tiger 에서 처음 제공 - 코코아 그래픽 엔진 사용 - 사파리의 자바 스크립트엔진 사용 - HTML+ CSS+ Javascript로 작성 가능

•http://www.apple.com/downloads/dashboard/

Trend 1: Ajax 기반 비즈니스 응용

Ajax Platform Business – Ruby on Rails (http://www.rubyonrails.org)

– Bindows (http://www.bindows.net)

– Backbase (http://www.backbase.com)

– Dojo (http://dojotoolkit.org)

– Sajax (http://www.modernmethod.com/sajax/)

– DWR (http://getahead.ltd.uk/dwr/)

Trend 2: 개발자 중심 생태계 시스템

개발자 생태계 시스템?

– http://developer.yahoo.net

– 자사 API를 기반한 개발자 육성

– 자사 API를 기반한 Mash-up 서비스 육성

대표적인 활동 – API 어플리케이션 및 Mash-up 서비스 공개

– 오픈 소스 코드 제공 (http://code.google.com)

– 오픈 소스 공헌 (이용 프로젝트 개발자 채용)

– 개발자 블로그 운영을 통한 홍보 • http://sandbox.msn.com

• http://labs.google.com

•Mash-up 사례: http://programmableweb.com/mashups

Trend 3: Mashup, 플랫폼 협업

Trend 4: 사용자 중심 Identity2.0

웹 사이트 중심에서 사용자 중심으로 아이덴티티 관리 변화

– 원리 : URL을 사람에 대한 identifier로 사용하자

Think Changes ! – SXIP: Dick Hardt(CEO, founder), John Merrells

sxore, identity and reputation system

– LID : Johannes Ernst(CEO, founder), Joaquin Miller mylid, identity and spam filtering

– OpenID : Brad Fitzpatrick myOpenID, livejournal, OpenID comment for MT,WP

– YADI: OpenID, LID

– I-names :Drummond Reed 2idi(I-name), universal private address for personal

User-Open URL based Identity with Strong Authentification

Trend 5: Mobile Web 2.0

WML is gone! – 표준 기반 모바일 웹 브라우저

• 해외: Opera, Minimo

• 국내: 인프라웨어, 지오텔

– VoIP : Skype

– SMS: http://textpayme.com

모바일 2.0 서비스 – Google Mobile

– Yubnub

Tracking Mobile 2.0 – MobileCrunch http://mobilecrunch.com/

<모바일웹2.0 사례>

Trend 6: 소프트웨어 서비스

웹과 데스크탑의 파괴(Disruption) – Ajax 기반 Office

– Java 기반 Thinkfree

– Windows Live

소프트웨어 수요/공급을 통해 본 웹 2.0 S/W 서비스 모델

웹 2.0 기술 모델

is new play-ground!

Thanks for your attention!

Bookmarks Linkto: http://channy.creation.net/web2con mailto: channy@creation.net