72
네이버 소셜앱스 어떻게 만들어야 하나? 실사례 중심으로 Hello World부터 활용 팁까지 딱! 정해드립니다.

D3 네이버소셜앱스 어떻게 만들어야 하나

Embed Size (px)

Citation preview

Page 1: D3 네이버소셜앱스 어떻게 만들어야 하나

네이버����������� ������������������  소셜앱스����������� ������������������  어떻게����������� ������������������  만들어야����������� ������������������  하나?

실사례����������� ������������������  중심으로����������� ������������������  Hello����������� ������������������  World부터����������� ������������������  활용����������� ������������������  팁까지����������� ������������������  딱!����������� ������������������  정해드립니다.

Page 2: D3 네이버소셜앱스 어떻게 만들어야 하나

시작해����������� ������������������  볼까요!

Page 3: D3 네이버소셜앱스 어떻게 만들어야 하나

OPEN����������� ������������������  2010,����������� ������������������  09,����������� ������������������  30

Page 4: D3 네이버소셜앱스 어떻게 만들어야 하나
Page 5: D3 네이버소셜앱스 어떻게 만들어야 하나
Page 6: D3 네이버소셜앱스 어떻게 만들어야 하나

DAU����������� ������������������  66,0002010

Page 7: D3 네이버소셜앱스 어떻게 만들어야 하나

DAU����������� ������������������  130,0002011

Page 8: D3 네이버소셜앱스 어떻게 만들어야 하나

MAU����������� ������������������  660,0002010

Page 9: D3 네이버소셜앱스 어떻게 만들어야 하나

MAU����������� ������������������  1,270,0002011

Page 10: D3 네이버소셜앱스 어떻게 만들어야 하나

ARPU����������� ������������������  1852010/����������� ������������������  month

Page 11: D3 네이버소셜앱스 어떻게 만들어야 하나

ARPU����������� ������������������  2252011/����������� ������������������  month

Page 12: D3 네이버소셜앱스 어떻게 만들어야 하나

Paying����������� ������������������  Rate����������� ������������������  1%2010 /����������� ������������������  day

Page 13: D3 네이버소셜앱스 어떻게 만들어야 하나

Paying����������� ������������������  Rate����������� ������������������  2.4%2011 /����������� ������������������  day

Page 14: D3 네이버소셜앱스 어떻게 만들어야 하나

ARPPU����������� ������������������  12,000 won

Page 15: D3 네이버소셜앱스 어떻게 만들어야 하나

기회를 나타내는 이미지

Page 16: D3 네이버소셜앱스 어떻게 만들어야 하나

8,520,300Installation����������� ������������������  Count

Page 17: D3 네이버소셜앱스 어떻게 만들어야 하나

2,000,000SocialApps����������� ������������������  User

Page 18: D3 네이버소셜앱스 어떻게 만들어야 하나

520,000

0

150,000

300,000

450,000

600,000

2010/10 2011/10

앱����������� ������������������  이용자가����������� ������������������  하루����������� ������������������  평균����������� ������������������  머무르는����������� ������������������  시간의����������� ������������������  합

min

Page 19: D3 네이버소셜앱스 어떻게 만들어야 하나

어떤����������� ������������������  생각이드십니까?

http://www.flickr.com/photos/jakecaptive/3205277810/sizes/l/in/photostream/

Page 20: D3 네이버소셜앱스 어떻게 만들어야 하나

58,000,000소셜앱스를����������� ������������������  경험해보지����������� ������������������  못한����������� ������������������  사용자들...

Page 21: D3 네이버소셜앱스 어떻게 만들어야 하나

Comming����������� ������������������  soon...

Page 22: D3 네이버소셜앱스 어떻게 만들어야 하나

Hello����������� ������������������  Socialapps!!Let’s����������� ������������������  start

Page 23: D3 네이버소셜앱스 어떻게 만들어야 하나

<?xml����������� ������������������  version="1.0"����������� ������������������  encoding="utf-8"?><Module>����������� ������������������   <ModulePrefs����������� ������������������  title="Hello����������� ������������������  World">����������� ������������������   ����������� ������������������   <Require����������� ������������������  feature="opensocial-0.9"/>����������� ������������������   </ModulePrefs>

����������� ������������������   <Content����������� ������������������  type="html"����������� ������������������  view="canvas">����������� ������������������   ����������� ������������������   <![CDATA[����������� ������������������   ����������� ������������������   ����������� ������������������   Hello����������� ������������������  SocialApps!����������� ������������������  ����������� ������������������   ����������� ������������������   ]]>����������� ������������������   </Content></Module>

Page 24: D3 네이버소셜앱스 어떻게 만들어야 하나

<?xml����������� ������������������  version="1.0"����������� ������������������  encoding="utf-8"?><Module>����������� ������������������   <ModulePrefs����������� ������������������  title="Hello����������� ������������������  World">����������� ������������������   ����������� ������������������   <Require����������� ������������������  feature="opensocial-0.9"/>����������� ������������������   </ModulePrefs>

����������� ������������������   <Content����������� ������������������  type="html"����������� ������������������  view="canvas">����������� ������������������   ����������� ������������������   <![CDATA[����������� ������������������   ����������� ������������������   ����������� ������������������   Hello����������� ������������������  SocialApps!����������� ������������������  ����������� ������������������   ����������� ������������������   ]]>����������� ������������������   </Content></Module>

Page 25: D3 네이버소셜앱스 어떻게 만들어야 하나

<?xml����������� ������������������  version="1.0"����������� ������������������  encoding="utf-8"?><Module>����������� ������������������   <ModulePrefs����������� ������������������  title="Hello����������� ������������������  World">����������� ������������������   ����������� ������������������   <Require����������� ������������������  feature="opensocial-0.9"/>����������� ������������������   </ModulePrefs>

����������� ������������������   <Content����������� ������������������  type="html"����������� ������������������  view="canvas">����������� ������������������   ����������� ������������������   <![CDATA[����������� ������������������   ����������� ������������������   ����������� ������������������   Hello����������� ������������������  SocialApps!����������� ������������������  ����������� ������������������   ����������� ������������������   ]]>����������� ������������������   </Content></Module>

Page 26: D3 네이버소셜앱스 어떻게 만들어야 하나

<?xml����������� ������������������  version="1.0"����������� ������������������  encoding="utf-8"?><Module>����������� ������������������   <ModulePrefs����������� ������������������  title="Hello����������� ������������������  World">����������� ������������������   ����������� ������������������   <Require����������� ������������������  feature="opensocial-0.9"/>����������� ������������������   </ModulePrefs>

����������� ������������������   <Content����������� ������������������  type="html"����������� ������������������  view="canvas">����������� ������������������   ����������� ������������������   <![CDATA[����������� ������������������   ����������� ������������������   ����������� ������������������   Hello����������� ������������������  SocialApps!����������� ������������������  ����������� ������������������   ����������� ������������������   ]]>����������� ������������������   </Content></Module>

Page 27: D3 네이버소셜앱스 어떻게 만들어야 하나

<?xml����������� ������������������  version="1.0"����������� ������������������  encoding="utf-8"?><Module>����������� ������������������   <ModulePrefs����������� ������������������  title="Hello����������� ������������������  World">����������� ������������������   ����������� ������������������   <Require����������� ������������������  feature="opensocial-0.9"/>����������� ������������������   </ModulePrefs>

����������� ������������������   <Content����������� ������������������  type="html"����������� ������������������  view="canvas">����������� ������������������   ����������� ������������������   <![CDATA[

<style����������� ������������������  type=����������� ������������������  "text/css">p{font-size:18px}

</style><p>Hello����������� ������������������  SocialApps!</p>

����������� ������������������   ����������� ������������������   ]]>����������� ������������������   </Content></Module>

Page 28: D3 네이버소셜앱스 어떻게 만들어야 하나

OpenSocial����������� ������������������  APIs이것만����������� ������������������  알면����������� ������������������  된다!

Page 29: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자����������� ������������������  친구����������� ������������������  정보����������� ������������������  접근

사용자에게����������� ������������������  메시지����������� ������������������  전달하기

활동����������� ������������������  메시지����������� ������������������  남기기

앱데이터����������� ������������������  저장소����������� ������������������  활용하기

유틸리티����������� ������������������  API����������� ������������������  사용하기

People����������� ������������������  Layer

Message����������� ������������������  Layer

Persistant����������� ������������������  Layer

사용자����������� ������������������  프로필����������� ������������������  정보����������� ������������������  접근

Page 30: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자����������� ������������������  프로필����������� ������������������  정보����������� ������������������  접근

osapi.people.get({userId:'@me',����������� ������������������  groupId:'@self'}).execute(function(person){alert(person.id);alert(person.thumbnail);alert(person.hasApp);alert(person.isOwner);alert(person.isViewer);alert(person.displayName);});

(앱을����������� ������������������  실행하고����������� ������������������  있는����������� ������������������  사람)

Page 31: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자����������� ������������������  프로필����������� ������������������  정보����������� ������������������  접근

osapi.people.get({userId:'@owner',����������� ������������������  groupId:'@self'}).execute(function(person){alert(person.id);alert(person.thumbnail);alert(person.hasApp);alert(person.isOwner);alert(person.isViewer);alert(person.displayName);});

(앱설치자)

Page 32: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자����������� ������������������  프로필����������� ������������������  정보����������� ������������������  접근

osapi.people.get({userId:'1000000000000001000',����������� ������������������  groupId:'@self'}).execute(function(person){alert(person.id);alert(person.thumbnail);alert(person.hasApp);alert(person.isOwner);alert(person.isViewer);alert(person.displayName);});

(제3자)

Page 33: D3 네이버소셜앱스 어떻게 만들어야 하나

오너와����������� ������������������  뷰어와����������� ������������������  그리고����������� ������������������  방문자...

앱을����������� ������������������  실행하는����������� ������������������  사람����������� ������������������  ����������� ������������������  -����������� ������������������  앱을����������� ������������������  설치한����������� ������������������  사람����������� ������������������  ����������� ������������������  -����������� ������������������  앱을����������� ������������������  설치하지����������� ������������������  않은����������� ������������������  사람����������� ������������������  

앱을����������� ������������������  설치한����������� ������������������  사람

비로그인����������� ������������������  사용자

Page 34: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자����������� ������������������  친구����������� ������������������  정보����������� ������������������  접근

osapi.people.get({userId:'@me',����������� ������������������  groupId:'@friends'startIndex����������� ������������������  :����������� ������������������  0,count����������� ������������������  :����������� ������������������  20}).execute(function(people){alert(people.list[0].displayName);});

Page 35: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자에게����������� ������������������  앱����������� ������������������  추천����������� ������������������  메시지����������� ������������������  보내기

opensocial.requestShareApp(["1000000000000001000"]);

Page 36: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자에게����������� ������������������  요청����������� ������������������  메시지����������� ������������������  보내기

var����������� ������������������  message����������� ������������������  =����������� ������������������  opensocial.newMessage(����������� ������������������  "메시지제목",����������� ������������������  {����������� ������������������   ����������� ������������������   ����������� ������������������   type����������� ������������������  :����������� ������������������  "request",����������� ������������������   ����������� ������������������   ����������� ������������������   recipients����������� ������������������  :����������� ������������������  ["1000000000000002000"],����������� ������������������   ����������� ������������������   ����������� ������������������   naver_viewparams����������� ������������������  :����������� ������������������  {����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������   myItemNo����������� ������������������  :����������� ������������������  "A011202",����������� ������������������   ����������� ������������������   ����������� ������������������   ����������� ������������������  ����������� ������������������   sender:����������� ������������������  "1000000000000001000"����������� ������������������   ����������� ������������������   ����������� ������������������   }});

opensocial.requestSendMessage(null,����������� ������������������  message,����������� ������������������  function(response){����������� ������������������   if(response.error){����������� ������������������   ����������� ������������������   alert("메시송지����������� ������������������  전송����������� ������������������  실패");����������� ������������������   }else{����������� ������������������   ����������� ������������������   alert("메시지����������� ������������������  전송����������� ������������������  완료")����������� ������������������   }});

Page 37: D3 네이버소셜앱스 어떻게 만들어야 하나

사용자에게����������� ������������������  요청����������� ������������������  메시지����������� ������������������  보내기

Page 38: D3 네이버소셜앱스 어떻게 만들어야 하나

var����������� ������������������  imageUrl����������� ������������������  =����������� ������������������  'http://socialapp.com/yyy/zzz.jpg';var����������� ������������������  imageItem����������� ������������������  =����������� ������������������  opensocial.newMediaItem('image/jpeg',����������� ������������������  imageUrl);var����������� ������������������  mediaObj����������� ������������������  =����������� ������������������  [����������� ������������������  imageItem����������� ������������������  ];

var����������� ������������������  activityParams����������� ������������������  =����������� ������������������  {};activityParams[opensocial.Activity.Field.TITLE]����������� ������������������  =����������� ������������������  "게시글����������� ������������������  제목의����������� ������������������  내용";activityParams[opensocial.Activity.Field.BODY]����������� ������������������  =����������� ������������������  "게시글����������� ������������������  본문의����������� ������������������  내용";

activityparams[opensocial.Activity.Field.MEDIA_ITEMS]����������� ������������������  =����������� ������������������  mediaObj;var����������� ������������������  activityObj����������� ������������������  =����������� ������������������  opensocial.newActivity(activityParams);

opensocial.requestCreateActivity(activityObj,����������� ������������������  opensocial.CreateActivityPriority.HIGH,����������� ������������������  onCompleteActivityHandler����������� ������������������  );

활동����������� ������������������  내역����������� ������������������  생성과����������� ������������������  게시

Page 39: D3 네이버소셜앱스 어떻게 만들어야 하나

활동����������� ������������������  내역����������� ������������������  생성과����������� ������������������  게시

Page 40: D3 네이버소셜앱스 어떻게 만들어야 하나

앱포스팅����������� ������������������  API

Page 41: D3 네이버소셜앱스 어떻게 만들어야 하나

앱데이터����������� ������������������  API

var����������� ������������������  request����������� ������������������  =����������� ������������������  opensocial.newDataRequest();request.add(request.newUpdatePersonAppDataRequest(key,����������� ������������������  value),����������� ������������������  "appdata");request.send(saveAppDataCompleteHandler);

function����������� ������������������  saveAppDataCompleteHandler(res){var����������� ������������������  appdata����������� ������������������  =����������� ������������������  res.get("appdata");

if����������� ������������������  (����������� ������������������  appdata.hadError()����������� ������������������  )����������� ������������������  {if����������� ������������������  (����������� ������������������  appdata.getErrorCode()����������� ������������������  ==����������� ������������������  

opensocial.ResponseItem.Error.LIMIT_EXCEEDED)����������� ������������������  {����������� ������������������   ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������   alert("데이터����������� ������������������  사이즈����������� ������������������  오류")

}����������� ������������������   ����������� ������������������  alert(appdata.getErrorMessage());����������� ������������������   ����������� ������������������  return;}alert("저장되었습니다.");

}

Page 42: D3 네이버소셜앱스 어떻게 만들어야 하나

네이버����������� ������������������  소셜앱스����������� ������������������  결제이것만����������� ������������������  알면����������� ������������������  된다!

Page 43: D3 네이버소셜앱스 어떻게 만들어야 하나

Q����������� ������������������  :����������� ������������������  결제키����������� ������������������  발급해����������� ������������������  주세요~

Page 44: D3 네이버소셜앱스 어떻게 만들어야 하나

결제����������� ������������������  프로세스

Page 45: D3 네이버소셜앱스 어떻게 만들어야 하나

Q����������� ������������������  :����������� ������������������  결제가����������� ������������������  이뤄지지����������� ������������������  않는데,����������� ������������������  ����������� ������������������  어떤����������� ������������������  문제인가요?

Page 46: D3 네이버소셜앱스 어떻게 만들어야 하나

결제����������� ������������������  프로세스����������� ������������������  확인용����������� ������������������  소셜앱����������� ������������������  제공앱소스����������� ������������������  :����������� ������������������  http://cafe.naver.com/appfactory/2005

Page 47: D3 네이버소셜앱스 어떻게 만들어야 하나

그리고����������� ������������������  아낌없는����������� ������������������  지원든든하게����������� ������������������  아낌없이����������� ������������������  적극적으로!!

Page 48: D3 네이버소셜앱스 어떻게 만들어야 하나

기본����������� ������������������  API����������� ������������������  예제부터����������� ������������������  실행����������� ������������������  코드까지����������� ������������������  총망라!!

Page 49: D3 네이버소셜앱스 어떻게 만들어야 하나

JS����������� ������������������  SDK����������� ������������������  기본����������� ������������������  플러그인

Page 50: D3 네이버소셜앱스 어떻게 만들어야 하나

소셜앱스����������� ������������������  액션스크립트����������� ������������������  SDK����������� ������������������  제공

Page 51: D3 네이버소셜앱스 어떻게 만들어야 하나

플래시에서����������� ������������������  친구����������� ������������������  정보����������� ������������������  요청����������� ������������������  JS의����������� ������������������  메소드����������� ������������������  실행

자바스크립트로����������� ������������������  친구����������� ������������������  정보����������� ������������������  요청

지정된����������� ������������������  메소드로����������� ������������������  친구����������� ������������������  정보����������� ������������������  결과����������� ������������������  전달

플래시의����������� ������������������  지정된����������� ������������������  메소드로����������� ������������������  친구����������� ������������������  정보����������� ������������������  전달

플래시에����������� ������������������  친구����������� ������������������  정보����������� ������������������  요청����������� ������������������  결과를����������� ������������������  받을����������� ������������������  메소드����������� ������������������  등록

자바스크립트에����������� ������������������  친구����������� ������������������  정보����������� ������������������  결과가����������� ������������������  반환될����������� ������������������  메소드����������� ������������������  등록

일반적으로����������� ������������������  액션스크립트����������� ������������������  로직과����������� ������������������  자바스크립트����������� ������������������  로직이����������� ������������������  혼재됨.

Page 52: D3 네이버소셜앱스 어떻게 만들어야 하나

플래시에서����������� ������������������  친구����������� ������������������  정보����������� ������������������  요청

플래시의����������� ������������������  지정된����������� ������������������  메소드로����������� ������������������  친구����������� ������������������  정보����������� ������������������  전달

플래시에����������� ������������������  친구����������� ������������������  정보����������� ������������������  요청����������� ������������������  결과를����������� ������������������  받을����������� ������������������  메소드����������� ������������������  등록

//오너의����������� ������������������  정보를����������� ������������������  요청하는����������� ������������������  객체����������� ������������������  생성var����������� ������������������  person:PersonRequest����������� ������������������  =����������� ������������������  new����������� ������������������  PersonRequest(IdSpec.OWNER);

//정보����������� ������������������  요청����������� ������������������  결과를����������� ������������������  받을����������� ������������������  핸들러����������� ������������������  지정person.addEventListener(OSDKEvent.ON_COMPLETE,����������� ������������������  onCompleteHandler);����������� ������������������  ����������� ������������������  //정보����������� ������������������  요청����������� ������������������  person.send();����������� ������������������  ����������� ������������������  function����������� ������������������  onCompleteHandler(e:OSDKEvent):void����������� ������������������  {����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  var����������� ������������������  person:Person����������� ������������������  =����������� ������������������  Person(e.response);����������� ������������������  }����������� ������������������  

Page 53: D3 네이버소셜앱스 어떻게 만들어야 하나

소셜앱스����������� ������������������  액션스크립트����������� ������������������  SDK의����������� ������������������  API����������� ������������������  검증과����������� ������������������  호환성

http://dev.naver.com/projects/nopensocial-sdk

Page 54: D3 네이버소셜앱스 어떻게 만들어야 하나

Communication����������� ������������������  with����������� ������������������  developers

http://cafe.naver.com/appfactory

Page 55: D3 네이버소셜앱스 어떻게 만들어야 하나

서버����������� ������������������  무상����������� ������������������  지원

L4����������� ������������������  지원

CDN����������� ������������������  지원

상시����������� ������������������  모니터링

시스템����������� ������������������  보안검수

Page 56: D3 네이버소셜앱스 어떻게 만들어야 하나

개발자����������� ������������������  등록 앱����������� ������������������  등록 내부����������� ������������������  심의

앱팩토리����������� ������������������  소셜앱����������� ������������������  등록����������� ������������������  절차•유료 계약•서버 지원 계약•게임등금위원회 심의

Page 57: D3 네이버소셜앱스 어떻게 만들어야 하나

소셜앱스����������� ������������������  앱플레이어블로그,����������� ������������������  미투데이,����������� ������������������  카페����������� ������������������  친구들과����������� ������������������  함께����������� ������������������  즐겨요!����������� ������������������  

Page 58: D3 네이버소셜앱스 어떻게 만들어야 하나

AS-IS

Page 59: D3 네이버소셜앱스 어떻게 만들어야 하나

앱설치하기 컨테이너����������� ������������������  선택 약관����������� ������������������  동의

설치����������� ������������������  완료 설치한����������� ������������������  컨테이너에서����������� ������������������  앱����������� ������������������  실행

AS-IS

앱실행����������� ������������������  프로세스

huk~

Page 60: D3 네이버소셜앱스 어떻게 만들어야 하나
Page 61: D3 네이버소셜앱스 어떻게 만들어야 하나

To-Be

Page 62: D3 네이버소셜앱스 어떻게 만들어야 하나

바이럴 개선 부분 소개

Page 63: D3 네이버소셜앱스 어떻게 만들어야 하나

블로그 카페 미투데이

AS-IS

Page 64: D3 네이버소셜앱스 어떻게 만들어야 하나

블로그 카페 미투데이

TO-BE

앱별친구

Page 65: D3 네이버소셜앱스 어떻게 만들어야 하나

서이추����������� ������������������  받아요~~

AS-IS

Page 66: D3 네이버소셜앱스 어떻게 만들어야 하나
Page 67: D3 네이버소셜앱스 어떻게 만들어야 하나
Page 68: D3 네이버소셜앱스 어떻게 만들어야 하나

모바일����������� ������������������  지원

언제����������� ������������������  어디서나����������� ������������������  소셜앱을����������� ������������������  즐길����������� ������������������  수����������� ������������������  있도록����������� ������������������  !!

Page 69: D3 네이버소셜앱스 어떻게 만들어야 하나

QNA질문����������� ������������������  받습니다!

Page 70: D3 네이버소셜앱스 어떻게 만들어야 하나

네이버����������� ������������������  소셜앱스는����������� ������������������  여러분의����������� ������������������  참여를����������� ������������������  기다립니다.

http://cafe.naver.com/appfactory

[email protected]

Page 71: D3 네이버소셜앱스 어떻게 만들어야 하나

End

Page 72: D3 네이버소셜앱스 어떻게 만들어야 하나

감사합니다!기다리겠습니다...