# LiveMD 최종발표 대본

# 첫인사
안녕하세요 뽀짝팀의 LiveMD 발표를 맡은 조성원입니다.
LiveMD 발표 시작하겠습니다.

# 목차
발표는 서비스 개요, 적용기술 및 아키텍처, 기대효과 및 활용가능성으로 진행될 예정입니다.

# 주제소개
우선 LiveMD가 어떤 의미를 갖고 있는지 말씀드리겠습니다.
LiveMD는 실시간을 뜻하는 Live와 마크다운의 줄임말인 MD를 합친 단어입니다. LiveMD는 온라인 회의를 하는 사람들을 위한 마크다운 에디터인 실시간 소통 협업 에디터입니다.

# 기획배경
그렇다면 LiveMD가 어떠한 배경에서 만들어졌는지 한번 살펴보겠습니다.

우선 LiveMD의 프로젝트기획 당시 상황을 따로 영상으로 준비해봤습니다. 함께 보실까요?

# 영상 이후
방금 보신 영상에서 한번의 회의를 하기 위해 몇 가지 도구를 썼는지 확인하셨나요?
**줌, 구글 독스, 타이포라**
실시간 의사소통 도구, 문서 공동 편집 도구, 마크다운 에디터
'이 모든 기능'을
LiveMD에 담았습니다.
협업의 즐거움을 일깨우는 LiveMD를 소개합니다.

# 시장조사
먼저 온라인 협업 도구에 대한 시장조사를 해보았습니다.
최근 코로나19로 인해 재택근무가 확산되었고
화상회의 횟수가 증가했습니다.
때문에 온라인 협업 도구에 대한 수요 또한 증가하는 것을 확인하실 수 있습니다.
그래서 저희는 기존에 존재하는 온라인 협업 도구를 비교분석 해보았습니다.

# 서비스 비교
우선 마크다운 에디터인 타이포라,
워드 등을 공동 편집할 수 있는 구글독스,
마크다운 문서를 공동 편집할 수 있는 핵엠디,
화상회의 서비스인 줌.
이 중에서 마크다운 작성, 공동 편집, 실시간 의사소통 기능을 모두 갖고 있는 서비스는 없습니다.
LiveMD는 모든 기능을 하나의 서비스에 담아“온라인 회의를 하는 마크다운 공동 작성자”를 타겟으로 삼고자 했습니다.

보시는 바와 같이 LiveMD는 타 서비스들의 장점을 모아 하나의 서비스로 제공합니다.

# 기술 및 기능 소개
다음은 LiveMD가 가지고 있는 주요 기능과 각 기능을 구현하기 위해 사용했던 기술에 대해 발표하겠습니다.

각 기능과 기술에 대한 이해도를 높이기 위하여 시연을 진행한 뒤에 말씀드리도록 하겠습니다. 지금부터 LiveMD 시연 시작하겠습니다.

# 시연

# 시연 끝나고
시연은 여기까지 하도록 하겠습니다.
지금부터 시연에서 보여드렸던 LiveMD의 핵심 기능인 로그인, 화상및채팅, 공동편집 기능에 대해 설명드리겠습니다.

# 로그인 기능
첫째로 LiveMD의 구글 로그인 기능입니다. 요청의 흐름에 따라 설명하겠습니다.

사용자가 로그인을 시도하면 클라이언트가 Google Client ID와 Client Secret을 통해 인증서버에 요청하여 사용자에게 동의화면이 보여집니다.

사용자가 로그인에 성공하면 LiveMD클라이언트는 nginx reverse proxy에 구글 인증서버로부터 받은 profile data와 함께 요청을 보냅니다. Nginx에서 해당 요청을 확인 후 Auth 서비스에 전달하면

Auth 서비스는 구글 프로필 이미지를 AWS s3 버킷에 저장한 뒤 해당 이미지의 s3 url을 전달받습니다. 전달받은 url과 이미지를 제외한 프로필 데이터를 사용자정보에 저장합니다.

이후 Auth service에서 jwt으로 access token을 발급하여 사용자 정보와 함께 json 형태로 클라이언트에게 전달합니다. 또한 refresh token을 발급하여 refreshToken 컬렉션에 저장해놓고, access token이 만료될 때 새로운 access token을 발급할 수 있도록 refreshtoken을 쿠키로 보냅니다. 따라서 사용자는 로그인 후 LiveMD의 모든 서비스에 접근할 수 있게 됩니다.

# 실시간 의사소통 기능1
다음은 실시간 의사소통 기능 중 화상채팅에 대해서 말씀드리겠습니다.
화상채팅을 구현하기 위해서 총 3가지가 필요했습니다. SSL 인증서, Socket.io 모듈, WebRTC API.
SSL 인증서는 웹 서버와 브라우저 사이의 인증을 위한 프로토콜입니다. HTTPS를 구현하기 위해서 필요한 인증서라고 할 수 있습니다.
Socket.io 모듈은 WebSocket을 기반으로 Client와 Server의 양방향 통신을 가능하게 해주는 모듈입니다.
WebRTC는 웹 브라우저 간에 통신을 할 때 별도의 플러그인 없이도 통신할 수 있도록 설계된 API입니다.
이제 이것들을 어떤 방식으로 활용했는지 다음 페이지에서 설명 드리겠습니다.

# 실시간 의사소통 기능 2
사용자는 Editor page에 입장했을 때, WebRTC API를 통해서 MediaStream data인 비디오, 오디오 데이터를 가져옵니다. 이 때 크롬 웹브라우저의 경우 47버전 이상부터는 https와 localhost에서만 mediastream data를 요청할 수있습니다. 따라서 저희는 nginx에 ssl을 적용해 https 웹서버를 구성했습니다. 사용자가 webRTC api를 요청하면 ssl이 적용된 nginx에서 요청을 받고 reverse proxy 기능을 이용해 내부 서버로 요청을 전달하여 미디어스트림 데이터를 가져올 수 있게 처리했습니다. 그래서 저희는 로컬 호스트가 아닌 https가 적용된 도메인에서도 화상기능을 제공할 수 있습니다.

# yjs1
마지막으로 문서 공동 편집 기능에 대해 소개해드리겠습니다.

문서 공동 편집 기능은 사용자들이 동시에 문서를 편집할 수 있는 기능이며 yjs 라는 오픈소스를 이용하여 구현했습니다. yjs는 협업 어플리케이션 구축을 위한 CRDT 프레임워크입니다. 여기서 CRDT란 실시간으로 분산되어 있는 문서 데이터들의 정합성을 유지시킬 수 있는 자료구조를 의미합니다. Yjs가 제공하는 기능으로는 크게 3가지가 있습니다.

실시간으로 데이터를 동기화해주는 Automatic syncing 기능, codemirror나 quill과 같은 여러 에디터와의 바인딩 기능, 사용자별 개인 커서 기능이 있습니다. LiveMD는 yjs 오픈소스를 이용하여 문서공동편집기능을 구현하엿습니다

# yjs2
다음은 LiveMD의 문서 공동편집기능을 흐름에 따라 설명하겠습니다.먼저 하나의 문서에 대해 3명이 문서를 공동편집한다고 생각해봅시다.

우선 첫 번째 사용자가 문서에 접근하게 되면

mongoDB에서 기존에 존재하는 해당 문서 데이터를 서버로 불러옵니다.

그리고 문서에 대한 복제본을 클라이언트에 전송합니다.

사용자가 문서를 편집하게 되면 사용자의 로컬 복제본에 먼저 반영이 되고

편집에 대한 operation을 websocket을 이용해 같은 문서를 편집중인 사용자들에게 broadcast 합니다.

나머지 2명의 사용자들은 broadcast된 operation을 자신의 로컬 복제본에 적용시켜 문서 데이터의 정합성을 유지합니다.

그리고 문서 편집을 하는 마지막 사용자가 퇴장하게 되면 서버에 있는 문서 데이터를 mongoDB로 저장하게 됩니다. 이러한 방식을 통해 하나의 문서를 동시적으로 편집할 수 있습니다.

# 아키텍처
다음은 LiveMD의 아키텍처에 대해 소개해드리겠습니다.

LiveMD는 PaaS-ta의 nginx app을 활용하여 배포중입니다. LiveMD는 서비스를 chat, video, editor, team, auth, document 총 6개로 분리하여 컨테이너화 하였고, 데이터베이스도 분리하여 운영중입니다.

우선 클라이언트가 nginx 웹서버에서 웹 페이지를 받아옵니다.
그리고 클라이언트의 모든 요청은 nginx를 거쳐 내부 서버로 전달됩니다.
저희는 nginx의 reverse proxy를 이용하여 내부 서버의 정보를 외부로부터 숨겨 보안을 강화하였습니다.

# 기대효과 및 활용가능성
마지막으로 LiveMD의 기대효과와 활용가능성을 말씀드리겠습니다.

# 기대효과
먼저 기대효과 입니다.

사용자는 LiveMD사용을 통해 적극적인 온라인 협업이 가능하게 되고 그 결과 시간적/경제적 절약을 할 수 있습니다.

또한 여러 도구의 사용법에 대한 이해가 필요하지 않기 때문에 실질적인 업무에 집중하여 업무 효율을 높일 수 있습니다.

더불어 LiveMD의 실시간 소통기능을 통해 공동 문서 작성시 작성자를 더욱 확실히 식별할 수 있어 작성자에 대한 신뢰도를 높일 수 있습니다.

마지막으로 모든 기능을 하나의 서비스에서 사용하기 때문에 사용자 편의성이 증대됩니다.

# 활용가능성
다음은 LiveMD 서비스의 활용가능성에 대해 말씀드리겠습니다.

현재 마크다운 문법만을 지원하고 있지만 다양한 언어와 파일을 지원하여 더 많은 타겟층을 확보할 예정입니다.

또한 LiveMD에서 작성된 문서를 Github wiki나 마크다운으로 글을 작성하는 블로그에 바로 푸시할 수 있도록 하여 사용자의 편의성을 높일 것입니다.

그리고 LiveMD에서 작성한 문서를 외부 클라우드 등으로 export할 수 있는 기능을 넣어 문서 공유를 쉽도록 만들 계획입니다.

마지막으로 문서에 대한 버전관리가 가능할 수 있도록 하여 수정이력을 저장하고 불러오는 기능을 추가할 것입니다.

# 질의응답
여기까지가 LiveMD 발표였습니다. Q&A 받도록하겠습니다.