실시간성을 극대화한 댓글 플러그인 개발 사례

1. 댓글 플러그인 개발 사례
실시간성을 극대화한
SK플래닛 Platform Software개발1팀
김군우 (a.k.a. 겨미겨미)
헛!

2. 오늘 다룰 이야기
• 댓글 플러그인의 개발 배경 및 기능 소개
• 서비스 개발 과정에서 겪었던 기술적인 고민
• 고민의 결과 얻게된 기술적인 인사이트
• 프로젝트의 Best Practice

3. 김군우
프론트엔드 개발자
• 엔씨소프트 오픈마루 스튜디오
레몬펜, 아이온 SNS 아바타북
• NHN
웹 표준/접근성 연구 개발
• SK플래닛
“AFFOGATO” 개발 중...

4. 왜 댓글인가?
• 웹 초창기부터 있어 왔지만, 큰 혁신은 없었던 댓글
…
• 댓글의 변화 – 소셜미디어 공유하기
• 가장 일상적인 것을 평범하지 않게 만들어
널리 쓰이게 하자.

5. 아포가토
(Affogato)

6. 댓글의 재발견!
댓글이 더 많이 달리
게!
더욱 많이 공유되
게!

7. 아이디어 : 실시간성을 극대화하자!
훨씬귀기울이게되는효과!

8. Affogato의 가치
• 사용자에게 주는 가치
• “현재” 가장 “인기”있는 댓글로 주의를 집중 / 분산
• 다른 유저들과 실시간으로 대화하는 즐거움
• 내 댓글에 대한 다른 유저의 반응을 실시간으로 확인
• 서비스 사이트에게 주는 가치
• 댓글을 통한 상호작용의 증가  유저 몰입도 증가
• SNS 동시 포스팅을 통해 컨텐츠 공유 및 확산

9. 댓글 플러그인 Affogato를 소개합니다.

12. 지금접속해서써보실수있어요!
readme.skplanet.co.kr/?p=3161

13. 3rd Party 사이트 계정 로그인
+
1) 다양한 소셜 로그인 지원

14. 2) SNS 동시 포스팅, 공유하기

15. 3) 링크, 동영상, 이미지 댓글로 풍성한 대화거리

16. 그리고,유저들을 Lock-in할수있는Edge기능들…

17. 4) 실시간 새 댓글 업데이트

18. 5) 작성중 알림

19. 6) 내 댓글에 대한 반응 알림

20. 그리고,아포가토만의고유한…

21. 7) 사이드바 인디케이터

22. 7) 사이드바 인디케이터

23. <script>
SKP.commentsPlugin({
app_id: ‘MY_APP_ID’,
page_id: ‘page3162’
});
</script>
설치 방법
YourSite.com

24. 아포가토 개발사례 7선
1. 대용량 데이터의 고속 처리를 위한 DB MW (DB
Proxy)
2. 다른 사이트의 프레임과 통신하기
3. Socket.IO를 이용한 댓글 작성중 표시
4. Socket.IO 클러스터링
5. 모바일 웹 1 Page Application
6. node.js 테스트 프레임워크 mocha
7. 저비용 고효율 CSS3 Transition

25. 1. 대용량 데이터의 고속 처리를 위한 DB MW
(DB Proxy)

26. • DB를 HTTP(Tomcat) API로 추상화 제공
• Master/Master 이중화로 Read/Write 모두 분산처리
• Backup, 복구 및 Dynamic Scale Out 지원
1. 대용량 데이터의 고속 처리를 위한 DB MW
(DB Proxy)

27. YourSite.com
2. 다른 사이트의 프레임과 통신하기

28. 2. 다른 사이트의 프레임과 통신하기
• 다른 도메인간에는 페이지 간 document에 접근 불
가
• HTML5 postMessage API로 극복
• 지원않는 IE6/IE7은 작은 flash 파일로 통신 가능
• 두가지를 단일 API로 감싼 easyXDM

29. 2. 다른 사이트의 프레임과 통신하기
프레임 로드 (easyXDM)
YourSite.com
프레임 높이 변경 요청
실시간 이벤트 전송

30. 2. 다른 사이트의 프레임과 통신하기
YourSite.com
// host site
new easyXDM.Rpc({
remote: ‘http://remote.com/frame’,
swf: ‘/path/to/easyxdm.swf’
}, {
local: {
setFrameHeight: function() {
// ...
}
}
});

31. 2. 다른 사이트의 프레임과 통신하기
YourSite.com
// host site
new easyXDM.Rpc({
remote: ‘http://remote.com/frame’,
swf: ‘/path/to/easyxdm.swf’
}, {
local: {
setFrameHeight: function() {
// ...
}
}
});
// affogato frame
var rpc = new easyXDM.Rpc({
swf: ‘/path/to/easyxdm.swf’,
onReady: function () {
rpc.setFrameHeight();
}
}, {
remote: {
setFrameHeight: {}
}
});

32. 3. Socket.IO를 이용한 댓글 작성중 표시

33. 3. Socket.IO를 이용한 댓글 작성중 표시
컴2
H e l l o
어떻게 사용자의댓글 작성 시작/끝을표시할
까?
마지막이벤트발생3초후작성중표시
Off

34. 3. Socket.IO를 이용한 댓글 작성중 표시
컴2
H e l l o (마지막 입력 3초
후)

35. 3. Socket.IO를 이용한 댓글 작성중 표시
컴2
H e l l o (마지막 입력 3초
후)
//client side
var socket = io.connect(‘http://server.url’);
var isWriting = false;
var endTimeoutId =null;
$(‘textarea’).on(‘keyup’, function () {
if (!isWriting) {
socket.emit(‘writing_start’, {});
isWriting = true;
}
endTimeoutId = setTimeout(function () {
socket.emit(‘writing_end’, {});
isWriting = false;
}, 3000);
});

36. 4. Socket.IO 클러스터링

37. 4. Socket.IO 클러스터링
• 단일 프로세스 node 서버로는 대용량 실시간 처리
에
어려움을 겪음 (성능 미흡)
• 다중 프로세스의 node 서버 클러스터링으로 해결
함
• 프로세스(또는 서버)간 통신은 udp multicast를 이
컴2 컴2 컴2 컴2 컴2 컴2 컴2 컴2 컴2
AA AB C

38. 5. 모바일 웹 1 Page Application

39. 5. 모바일 웹 1 Page Application
• 원글 페이지에 아포가토의 모든 기능을 넣기는 무겁
다.
• 원글에는 인기댓글 몇개만 표시, 나머지는 별도 페이
지로
• HTML5 pushState API를 통한 1 Page Application으로
• Express.js같은 인터페이스를 제공하는 Davis.js 사용

40. 5. 모바일 웹 1 Page Application

41. 6. node.js 테스트 프레임워크 mocha

42. 6. node.js 테스트 프레임워크 mocha
describe('test', function() {
it('runs', function(done) {
true.should.be(false);
done();
});
});

43. 6. node.js 테스트 프레임워크 mocha
require('mocha');
varshould=require('should');
varrequest=require('request');
varexpress=require('express');
varapp=express();
varmiddleware=require('../maruta').middleware;
app.use(middleware);
app.listen(8088);//orusesomeports
describe('maruta',function(){
it('workswell',function(done){
request.get('http://localhost:8088’,
function(err,res,body){
res.statusCode.should.eql(200);
body.should.eql("DONE");
done();
});
});
});

44. 6. node.js 테스트 프레임워크 mocha
mocha 테스트 기본 timeout은 2초
SNS login 후 테스트를 위해 timeout을 10초 이상으로 조정

45. 7. 저비용 고효율 CSS3 Transition

46. 7. 저비용 고효율 CSS3 Transition
CSS Transition를 넣자는 결정은 누구의 몫?

47. 7. 저비용 고효율 CSS3 Transition
거의다 IE를 쓰니 하나마나 아닌가?

48. 7. 저비용 고효율 CSS3 Transition
작은 투자, 큰 차별!
.uninteresting_ui{
opacity:0;
margin-top:-20px;
}
.uninteresting_ui.make_fun{
transition:200mslinear;
opacity:1;
margin-top:0;
}

49. 지금까지 살펴본 아포가토 개발사례 7선
1. 대용량 데이터의 고속 처리를 위한 DB MW (DB
Proxy)
2. 다른 사이트의 프레임과 통신하기
3. Socket.IO를 이용한 댓글 작성중 표시
4. Socket.IO 클러스터링
5. 모바일 웹 1 Page Application
6. node.js 테스트 프레임워크 mocha
7. 저비용 고효율 CSS3 Transition

50. 아포가토 팀
은...

51. 감사합니다 