• 목차 / Contents

💻 회의와 기록을 한번에 📝

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8957748b-5622-4515-809c-8c831a7e079e/favicon.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8957748b-5622-4515-809c-8c831a7e079e/favicon.png" width="40px" /> Wabinar

🤷 하나의 플랫폼에서 말하고 또 기록할 수 있으면 오가는 논의들이 더 잘 기록될 수 있지 않을까?

비대면 화상 회의를 여러 차례 진행하면서 팀원들이 공통으로 느낀 문제점들이 있었어요.

회의와 기록이 서로 다른 플랫폼에서 이루어지다보니 기록되지 못하고 휘발되는 이야기들이 많았어요.

회의가 끝나도 생각은 남아있을 수 있게

Wabinar는 비대면 회의에 기록이라는 요소를 추가했어요.

</aside>

⭐️ 주요 기능 / Key Features

🧑‍🤝‍🧑 워크스페이스

팀 워크스페이스를 만들어 회의하고 회의 기록을 관리

🎥 화상 회의

워크스페이스 멤버들과 화상 회의 진행

✍️ 실시간 공유 회의록

여러가지 블럭을 사용해 회의록 실시간 공동 편집

🎯 기술 스택 / Tech Stack

Socket.io

실시간으로 이루어지는 주요 기능을 구현하기 위해 소켓 사용이 필요했습니다. 워크스페이스 단위의 화상 회의 및 부가 기능과 회의록 단위의 실시간 편집을 Namespace, Room 등의 기능으로 편리하게 관리하기 위해 사용했습니다.

WebRTC

무거운 미디어 데이터를 실시간으로 제공해야하는 화상 회의 기능을 적은 서버 부하로 구현하기 위해 사용했습니다.

• WebRTC 연결이 생성되면 P2P로 미디어 스트림을 주고받을 수 있습니다.
• Peer 간의 연결을 생성해주는 시그널링 소켓 서버를 구축했습니다.
• 클라이언트의 복잡한 연결 로직을 모듈화해 React 컴포넌트에서 은닉했습니다.

CRDT

실시간 공동 편집 기능을 위해서 모든 사용자들이 같은 문서 내용을 볼 수 있게 하는 알고리즘이 필요했습니다. 중앙 서버가 원본을 가지고 동기화를 담당하는 OT 알고리즘 대신, 클라이언트 간의 연산 교환만으로 복제본 동기화를 보장하는 CRDT 알고리즘을 사용했습니다.

TypeScript

협업과 생산성 관점에서 정적 타이핑이 제공하는 장점을 활용하기 위해 사용했습니다.

• 정의된 인터페이스는 코드를 이해하는데 도움을 줍니다.
• 컴파일 타임에 에러를 잡아낼 수 있습니다.