실시간 웹 협업도구 만들기

홍영택

Sunday, October 13, 13
실시간 웹 협업도구 만들기

홍영택

Sunday, October 13, 13
실시간 웹 협업도구 만들기

홍영택

Sunday, October 13, 13
About Me

Sunday, October 13, 13
About Me
Javascript

Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
https://github.com/HackerWins/summernote

Sunday, October 13, 13
https://github.com/HackerWins/summernote

Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
실시간 웹 협업도구 만들기

Sunday, October 13, 13
Collaboration
is everything

Sunday, October 13, 13
Sunday, October 13, 13
팀원 B: “아인슈타인은 내친구”
조장A: “제길 내가 조장 ㅠ”

팀원 C: “대학은 술먹는 곳”

Sunday, October 13, 13
Email based Collaboration

Sunday, October 13, 13
조장A: 템플릿 받으셈

Sunday, October 13, 13
팀원 B: “E=mc^2”

조장A:나도 내부분
작성

팀원 C: “지식인에서 C & P”

Sunday, October 13, 13
팀원 C: “난 한글 없어서 HWP 파일 편
집 못해”

Sunday, October 13, 13
조장 A: “다했으면 보내주셈”

Sunday, October 13, 13
조장A: 취합 취합

Sunday, October 13, 13
조장 A: “이거 다시보내 주셈”

Sunday, October 13, 13
팀원 C: “지식인에서 C & P”

Sunday, October 13, 13
조장 A: “제대로 고쳤나?”

Sunday, October 13, 13
조장A: “취합 취합 (파일이
많아졌어...)”

Sunday, October 13, 13
조장A: “취합 취합
(죽겠네...)”

Sunday, October 13, 13
첨부파일을 이용한 이메일 기반 협업
로컬 컴퓨터에 편집기가 설치되어 있어야함
리비전 관리가 어려움

Sunday, October 13, 13
조장A: “문서 링크
받으셈”

http://wiki.ooo.com

Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
http://wiki.ooo.com

Sunday, October 13, 13
Lock, Save

Sunday, October 13, 13
Lock & Save

Sunday, October 13, 13
사용자 C: “Blah Blah”

Sunday, October 13, 13
사용자 B: “문서에 락걸렸네”

Sunday, October 13, 13
사용자 C: “저장!”

Sunday, October 13, 13
사용자 B: “이제 편집된다.”

Sunday, October 13, 13
사용자 B: “몽창 날라갔다.ㅠ”

Sunday, October 13, 13
Lock & Save 협업 도구
페이지 락을 기다리는 불편함이 있음
네트워크가 끊어질 경우 데이터 손실의 위험이 있음

Sunday, October 13, 13
real-time collaboration

Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
Sunday, October 13, 13
사용자 B: “Blah Blah”

조장A: “취합이 필요없군”

사용자 C: “Blah Blah”

Sunday, October 13, 13
웹 협업
첨부파일을 이용한 이메일 기반 협업
Lock & Save 협업 도구
실시간 협업 도구

Sunday, October 13, 13
웹 협업
첨부파일을 이용한 이메일 기반 협업
Lock & Save 협업 도구
실시간 협업 도구

Sunday, October 13, 13
편집기 만들기

Sunday, October 13, 13
입력

출력

Sunday, October 13, 13
이벤트 핸들러

Sunday, October 13, 13
이벤트 핸들러

Sunday, October 13, 13
이벤트 핸들러

도큐먼트 모델

Sunday, October 13, 13
이벤트 핸들러

도큐먼트 모델

렌더러

Sunday, October 13, 13
이벤트 핸들러

도큐먼트 모델

렌더러

Sunday, October 13, 13

코드가 많아
‘가’
이벤트 핸들러

도큐먼트 모델

렌더러

Sunday, October 13, 13
‘가’

doc.addText(‘가’)
이벤트 핸들러

도큐먼트 모델

렌더러

Sunday, October 13, 13
‘가’

doc.addText(‘가’)
이벤트 핸들러

도큐먼트 모델

렌더러

Sunday, October 13, 13

renderer.paint(para)
‘가’

doc.addText(‘가’)
이벤트 핸들러

도큐먼트 모델

<P>가</P>
{HTML}

렌더러

Sunday, October 13, 13

renderer.paint(para)
학기말 과제 작성중...

‘node cookbook’
번역중...

난 그냥 들어와 봤어...

Sunday, October 13, 13
‘node cookbook’
번역중...

나도 껴줘~!!!

Sunday, October 13, 13
Sunday, October 13, 13
‘가’

Sunday, October 13, 13
‘가’

Sunday, October 13, 13

doc.addText(‘가’)
‘가’

doc.addText(‘가’)

update(doc)

Sunday, October 13, 13
‘가’

doc.addText(‘가’)

update(doc)

change(doc)

Sunday, October 13, 13
‘가’

doc.addText(‘가’)

update(doc)

renderer.paint(para)

change(doc)

renderer.paint(doc)

Sunday, October 13, 13
‘가’

doc.addText(‘가’)

update(doc)

<P>가</P>

renderer.paint(para)

{HTML}

change(doc)

<P>가</P>
{HTML}

Sunday, October ...
‘가’

doc.addText(‘가’)

update(doc)

<P>가</P>

renderer.paint(para)

{HTML}

동일한 결과~!!!
<P>가</P>
{HTML}

Sunday, October 13...
‘가’

doc.addText(‘가’)

update(doc)

<P>가</P>

renderer.paint(para)

{HTML}

하지만 문서를 전송해서
느리다~!!!

change(doc)

<P>가</P>
{H...
‘가’

‘나’

Sunday, October 13, 13
‘가’

‘나’

Sunday, October 13, 13

doc.addText(‘가’)

doc.addText(‘나’)
‘가’

doc.addText(‘가’)

update(doc)

‘나’

doc.addText(‘나’)

update(doc)

Sunday, October 13, 13
‘가’

doc.addText(‘가’)

update(doc)

‘나’

doc.addText(‘나’)

update(doc)

Conflict!
동시편집은 무리
Sunday, October 13, 13
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생

Sunday, October 13, 13
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생

Sunday, October 13, 13
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생

Sunday, October 13, 13
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생

Sunday, October 13, 13
실시간 협업 에디터 만들기
문서 전체 전송으로 Network 사용량이 많음
동시 편집시 충돌 발생
스타크래프트 마린부대는
이동중 모든 좌표를 전송할까?

Sunday, October 13, 13
OT

(Operational
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
실시간 웹 협업도구 만들기 V0.3
Upcoming SlideShare
Loading in …5
×

실시간 웹 협업도구 만들기 V0.3

7,449 views
7,394 views

Published on

0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,449
On SlideShare
0
From Embeds
0
Number of Embeds
4,306
Actions
Shares
0
Downloads
97
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

실시간 웹 협업도구 만들기 V0.3

  1. 1. 실시간 웹 협업도구 만들기 홍영택 Sunday, October 13, 13
  2. 2. 실시간 웹 협업도구 만들기 홍영택 Sunday, October 13, 13
  3. 3. 실시간 웹 협업도구 만들기 홍영택 Sunday, October 13, 13
  4. 4. About Me Sunday, October 13, 13
  5. 5. About Me Javascript Sunday, October 13, 13
  6. 6. Sunday, October 13, 13
  7. 7. Sunday, October 13, 13
  8. 8. Sunday, October 13, 13
  9. 9. Sunday, October 13, 13
  10. 10. Sunday, October 13, 13
  11. 11. Sunday, October 13, 13
  12. 12. https://github.com/HackerWins/summernote Sunday, October 13, 13
  13. 13. https://github.com/HackerWins/summernote Sunday, October 13, 13
  14. 14. Sunday, October 13, 13
  15. 15. Sunday, October 13, 13
  16. 16. 실시간 웹 협업도구 만들기 Sunday, October 13, 13
  17. 17. Collaboration is everything Sunday, October 13, 13
  18. 18. Sunday, October 13, 13
  19. 19. 팀원 B: “아인슈타인은 내친구” 조장A: “제길 내가 조장 ㅠ” 팀원 C: “대학은 술먹는 곳” Sunday, October 13, 13
  20. 20. Email based Collaboration Sunday, October 13, 13
  21. 21. 조장A: 템플릿 받으셈 Sunday, October 13, 13
  22. 22. 팀원 B: “E=mc^2” 조장A:나도 내부분 작성 팀원 C: “지식인에서 C & P” Sunday, October 13, 13
  23. 23. 팀원 C: “난 한글 없어서 HWP 파일 편 집 못해” Sunday, October 13, 13
  24. 24. 조장 A: “다했으면 보내주셈” Sunday, October 13, 13
  25. 25. 조장A: 취합 취합 Sunday, October 13, 13
  26. 26. 조장 A: “이거 다시보내 주셈” Sunday, October 13, 13
  27. 27. 팀원 C: “지식인에서 C & P” Sunday, October 13, 13
  28. 28. 조장 A: “제대로 고쳤나?” Sunday, October 13, 13
  29. 29. 조장A: “취합 취합 (파일이 많아졌어...)” Sunday, October 13, 13
  30. 30. 조장A: “취합 취합 (죽겠네...)” Sunday, October 13, 13
  31. 31. 첨부파일을 이용한 이메일 기반 협업 로컬 컴퓨터에 편집기가 설치되어 있어야함 리비전 관리가 어려움 Sunday, October 13, 13
  32. 32. 조장A: “문서 링크 받으셈” http://wiki.ooo.com Sunday, October 13, 13
  33. 33. Sunday, October 13, 13
  34. 34. Sunday, October 13, 13
  35. 35. http://wiki.ooo.com Sunday, October 13, 13
  36. 36. Lock, Save Sunday, October 13, 13
  37. 37. Lock & Save Sunday, October 13, 13
  38. 38. 사용자 C: “Blah Blah” Sunday, October 13, 13
  39. 39. 사용자 B: “문서에 락걸렸네” Sunday, October 13, 13
  40. 40. 사용자 C: “저장!” Sunday, October 13, 13
  41. 41. 사용자 B: “이제 편집된다.” Sunday, October 13, 13
  42. 42. 사용자 B: “몽창 날라갔다.ㅠ” Sunday, October 13, 13
  43. 43. Lock & Save 협업 도구 페이지 락을 기다리는 불편함이 있음 네트워크가 끊어질 경우 데이터 손실의 위험이 있음 Sunday, October 13, 13
  44. 44. real-time collaboration Sunday, October 13, 13
  45. 45. Sunday, October 13, 13
  46. 46. Sunday, October 13, 13
  47. 47. Sunday, October 13, 13
  48. 48. 사용자 B: “Blah Blah” 조장A: “취합이 필요없군” 사용자 C: “Blah Blah” Sunday, October 13, 13
  49. 49. 웹 협업 첨부파일을 이용한 이메일 기반 협업 Lock & Save 협업 도구 실시간 협업 도구 Sunday, October 13, 13
  50. 50. 웹 협업 첨부파일을 이용한 이메일 기반 협업 Lock & Save 협업 도구 실시간 협업 도구 Sunday, October 13, 13
  51. 51. 편집기 만들기 Sunday, October 13, 13
  52. 52. 입력 출력 Sunday, October 13, 13
  53. 53. 이벤트 핸들러 Sunday, October 13, 13
  54. 54. 이벤트 핸들러 Sunday, October 13, 13
  55. 55. 이벤트 핸들러 도큐먼트 모델 Sunday, October 13, 13
  56. 56. 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13
  57. 57. 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13 코드가 많아
  58. 58. ‘가’ 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13
  59. 59. ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13
  60. 60. ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 렌더러 Sunday, October 13, 13 renderer.paint(para)
  61. 61. ‘가’ doc.addText(‘가’) 이벤트 핸들러 도큐먼트 모델 <P>가</P> {HTML} 렌더러 Sunday, October 13, 13 renderer.paint(para)
  62. 62. 학기말 과제 작성중... ‘node cookbook’ 번역중... 난 그냥 들어와 봤어... Sunday, October 13, 13
  63. 63. ‘node cookbook’ 번역중... 나도 껴줘~!!! Sunday, October 13, 13
  64. 64. Sunday, October 13, 13
  65. 65. ‘가’ Sunday, October 13, 13
  66. 66. ‘가’ Sunday, October 13, 13 doc.addText(‘가’)
  67. 67. ‘가’ doc.addText(‘가’) update(doc) Sunday, October 13, 13
  68. 68. ‘가’ doc.addText(‘가’) update(doc) change(doc) Sunday, October 13, 13
  69. 69. ‘가’ doc.addText(‘가’) update(doc) renderer.paint(para) change(doc) renderer.paint(doc) Sunday, October 13, 13
  70. 70. ‘가’ doc.addText(‘가’) update(doc) <P>가</P> renderer.paint(para) {HTML} change(doc) <P>가</P> {HTML} Sunday, October 13, 13 renderer.paint(doc)
  71. 71. ‘가’ doc.addText(‘가’) update(doc) <P>가</P> renderer.paint(para) {HTML} 동일한 결과~!!! <P>가</P> {HTML} Sunday, October 13, 13 renderer.paint(doc) change(doc)
  72. 72. ‘가’ doc.addText(‘가’) update(doc) <P>가</P> renderer.paint(para) {HTML} 하지만 문서를 전송해서 느리다~!!! change(doc) <P>가</P> {HTML} Sunday, October 13, 13 renderer.paint(doc)
  73. 73. ‘가’ ‘나’ Sunday, October 13, 13
  74. 74. ‘가’ ‘나’ Sunday, October 13, 13 doc.addText(‘가’) doc.addText(‘나’)
  75. 75. ‘가’ doc.addText(‘가’) update(doc) ‘나’ doc.addText(‘나’) update(doc) Sunday, October 13, 13
  76. 76. ‘가’ doc.addText(‘가’) update(doc) ‘나’ doc.addText(‘나’) update(doc) Conflict! 동시편집은 무리 Sunday, October 13, 13
  77. 77. 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  78. 78. 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  79. 79. 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  80. 80. 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 Sunday, October 13, 13
  81. 81. 실시간 협업 에디터 만들기 문서 전체 전송으로 Network 사용량이 많음 동시 편집시 충돌 발생 스타크래프트 마린부대는 이동중 모든 좌표를 전송할까? Sunday, October 13, 13
  82. 82. OT (Operational

×