1. 09:30~10:30

8. >전략적 위치: 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)
사람들이 사용함에 따라
유용성이 증대
통제하지 말고
협력하라
입소문 마케팅
조합 권한 제공:
임의의 저작권
예측되지 않는
사용자 행태
컨텐츠
주소와 위치의 단순성
유연하게 연결된
작은 컴포넌트로서 웹
사용자에 대한 신뢰

9. 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

20. 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)

23. Machine Readable Concept Human Readable
Xml/Rdf Syndication Rss
Soap Protocol Rest/Http
Applications Objects Users
Transaction Action Trackback/Ping

24. – 누구나 쉽게 개발에 참여할 수 있는 다양한 프레임웍 제공
– 데이터를 다룰 수 있는 각종 오픈 소스 및 라이브러리의 무료 제공
– 참여 문화 구조의 원동력

25. – 서비스와 데이터를 다룰 수 있는 각종 오픈 API용 포맷
– 개발 플랫폼과 독립적인 서비스 포맷

27. 가벼운 개발 방법론
– 프로토 타입을 기반한 서비스 구현 및 테스트
– 성능 및 구조를 고려하지 않는 가벼운 개발 플랫폼 선택
– 기획/개발/디자인이 모두 참여하는 프로젝트 구조
지속적인 베타의 덕목
– 오피니언 리더들과의 원활한 의사소통
– 참여자가 원하는 핵심 기능의 개선에 중점
– API 오픈을 통한 능동적인 참여 유도 및 혁신성 유지
– 참여자들의 디지털감성을 만족

28. 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

29. 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

30. 참여적 (블로그) 문화
블로깅, 위키, 오픈 소스
트랙백, 공동 저작, 공동 개발
저작 방식의 변화
XML을 통한 메터 데이터 유통은 UGC를
새로운 파워로 키워줌.
개발 방식의 변화
오피니언 리더를 기반한 사용자 중심으로
서비스 개선
Platform
Publishing
Delivery

31. 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

34. 웹의 세가지 요소
©Doug Bowman

36. 실례: www.mofe.go.kr
① 디자인 요소가 풍부한 웹 페이지
② 표현과 구조가 분리된 소스코드
③ 접근성이 확보된 컨텐츠 구조

38. 웹 브라우저 지원과 웹2.0과의 관계
브라우저 지원은 친환경 경영과 같은 것
– 브라우저 호환을 통해서도 훌륭한 서비스 구현 가능
– Google Gmail, Google Maps
데스크톱 플랫폼에 대한 공격
– 웹과 데스크톱 소프트웨어 사이의 간극을 줄임
다양한 사용자의 지원
– 리눅스 및 맥킨토시 사용자는 인터넷 오피니언 리더이다.

40. <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 기반 서비스를 기본으로 제공

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

45. 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

47. 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. 서비스를 플랫폼으로 바꿀 수 있다.

50. 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

56. Examples: Accessory
Amazon Diamond SearchAnyterm.org
다음 검색에서 “Amazon Diamond
Search”를 입력하세요!

57. 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

58. 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

59. 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

60. RIA: Macromedia Flex® (2)

62. 웹 브라우저 확장 기능
– Windows Live Gadget
– Firefox Extensions
– Safari Widget
– Yahoo! Widget
– Google Desktop Widget
Weblication: 대세 기술
– 웹을 더욱 다이나믹 하게 만든다.
풍부한 UI를 선보일 수 있다.
– 데스크탑과 경계가 모호해 진다.
– 고급 UI개발자 및 웹 개발자의 기
본 소양이 될 것이다.
– 다양한 RIA 기술 습득이 필수적.
<Flock 브라우저를 통한 블로그 출판>
<Google Desktop Widget>

63. 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 개발 가능

64. RIA: Gadget on Windows Live

65. RIA: AFLAX (Asynchronous Flash® + XAML)
http://www.xamlon.com/
- XAML과 Flash 클라이언트의 결합
- Windows/Mac/Linux/PDA에 모두 적용 가능

66. RIA: Extensions for Firefox(1)
- XUL + CSS + JavaScript (XPCOM)
- 수 백 개의 Firefox Extensions 개발 중

67. RIA: Extensions for Firefox(2)
Mozilla Amazon Browser: http://www.faser.net/mab/

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

69. RIA
- Tiger 에서 처음 제공
- 코코아 그래픽 엔진 사용
- 사파리의 자바 스크립트엔진 사용
- HTML+ CSS+ Javascript로 작성 가능
•http://www.apple.com/downloads/dashboard/

73. 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/)

74. 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

76. •Mash-up 사례: http://programmableweb.com/mashups
Trend 3: Mashup, 플랫폼 협업

80. 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

81. 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 사례>

82. Trend 6: 소프트웨어 서비스
웹과 데스크탑의 파괴(Disruption)
– Ajax 기반 Office
– Java 기반 Thinkfree
– Windows Live
소프트웨어 수요/공급을 통해 본 웹 2.0 S/W 서비스 모델

84. 웹 2.0 기술 모델

86. is new play-ground!

88. Thanks for your
attention!
Bookmarks
Linkto: http://channy.creation.net/web2con
mailto: channy@creation.net