[프로젝트 한줄 소개]
ConCoder는 WebRTC API와 WebSocket 프로토콜을 이용한 실시간 화상 코딩 교육 웹 플랫폼이다.


[개발 동기 및 개발 목적]
최근 COVID19의 영향으로 다양한 분야에서 화상 통화가 활용되고 있다. 또한 프로그래밍 지식에 대한 관심도가 증가하면서 IT 교육의 수요가 증가하 는 추세이다.
하지만 기존 개발된 화상 통화와 온라인 프로그래밍 교육 관련 서비스들은 각각 화상 통화 서비스나 프로그래밍 서비스 중 하나에 초점을 두었다.
따라서 본 프로젝트에서는 화상 통화와 동시 프로그래밍 편집기를 결합하여 편리하게 하나의 웹사이트 페이지에서 화상 통화와 실시간 동시 프로그래밍이 가능하도록 하는 서비스를 제안한다. 높은 품질과 안정성을 보장하는 알고리즘 화상 교육 웹 플랫폼 서비스를 설계하기 위해 WebRTC, WebSocket 통신, Multi-Thread 처리 등의 다양한 기법을 사용하여 설계하고 구현하였다.


[개발 환경 및 사용 기술]
- FrontEnd : React.js, Recoil, WebRTC, Yorkie opensource, Tailwind CSS, DaisyUI, Route53, CloudFront
- BackEnd : Spring, MySQL, Redis, RabbitMQ, Docker, Route53, EC2, ALB
- 공통 : WebSocket, Git
- 협업 및 기타 툴 : Nothion, GoogleMeet, Slack, Figma, GitHub, PostMan


[사용 방법]
1. 웹 초기 화면에서 새로운 워크스페이스를 생성하거나, 초대링크를 입력한다.
2. 워크스페이스로 이동되면, 화상통화와 함께 실시간 동시 작업이 가능한 코드 에디터를 사용하여 프로그래밍 교육을 수행할 수 있다. (제공되는 기능은 다음 챕터 참고)


[제공 기능]
- 실시간 화상 회의
WebRTC를 사용하여 실시간 화상 회의를 진행한다. 캠과 마이크는 On / Off 가능하며, 소규모 알고리즘 과외 및 스터디를 위한 서비스이므로 최대 4명의 동시 접속에 대해 안정성을 보장한다.

- 실시간 동시 코딩
Yorkie 오픈소스를 활용하여 공동 작업이 가능한 Code Editor를 구현한다. 기본적으로 모든 참여자가 실시간 공동 작업을 할 수 있지만, 호스트가 이 권한을 제어할 수 있다. 언어는 기본적으로 C를 제공하고, 추후 지원 가능성을 검토하여 다른 언어도 지원할 예정이다.

- 실시간 채팅
WebSocket을 활용하여 실시간 채팅을 구현한다. 호스트와 일반 참여자 모두 채팅을 이용할 수 있다.

- 알고리즘 문제 추천
백준 혹은 solved.ac 사이트에 등록된 문제들을 기반으로 문제를 검색/필터링해서 해당 문제에 대한 정보를 열람할 수 있다. 필터링 기능으로는 난이도, 유형 선택 기능이 있다.

- 컴파일 실행 및 컴파일 정보 확인
컴파일 버튼은 호스트에게만 활성화된다. 컴파일 버튼을 눌렀을 때 시점의 코드를 컴파일하고, 컴파일 정보(컴파일 시간, 메모리 사용정보)를 보여준다. 컴파일 작업 및 결과 반환은 API 를 통해 서버에서 처리한다.

- 테스트 케이스
컴파일 버튼을 누르면 자동으로 테스트 케이스들이 모두 실행된다. 모든 참여자가 테스트 케이스를 등록 및 삭제할 수 있다.

- 스냅샷
추가 유틸리티 기능으로, 코드의 어떤 시점을 저장해 놓고 추후 백업할 수 있게 한다. 모든 참여자가 스냅샷 저장을 할 수 있지만, 호스트만 스냅샷 불러오기를 할 수 있다.

- 타이머
코딩 테스트 대비를 위해 타이머를 설정하고 알람을 받는 기능이다. 호스트만 타이머 설정이 가능하다.


[기대 효과]
- 공간 제약 없이 인터넷이 연결된 환경이라면 어느 곳에서나 소수의 인원이 모여 편리하게 알고리즘 과외 및 스터디를 진행할 수 있다.
- WebRTC 기술을 사용하기 때문에 서버에 큰 부하 없이 높은 품질의 화상 회의 서비스를 제공할 수 있다. 또한, 브라우저 보안 및 외부 공격에 대한 안정성이 높을 것으로 기대된다.
- 화상 회의 서비스와 실시간 동시 프로그래밍 서비스를 함께 사용할 수 있기 때문에, 온라인 코딩 교육에 특화된 웹 서비스를 제공할 수 있다.
- 사용자는 하나의 웹 페이지만으로 화상 통화와 동시 프로그래밍 서비스 모두를 이용할 수 있게 된다.
- 최근 공간 제약이 없는 화상 회의의 사용도 및 코딩 교육에 대한 관심 증가 등의 사회 현상에 따라, 본 프로젝트의 사용성 또한 증대될 것으로 기대된다.


[향후 계획]
- 사용자 베타 테스트를 통해 피드백을 받아 업데이트할 예정이다.
- 더 많은 문제 제공 및 다양한 필터링 기능을 추가함으로써, 알고리즘 문제 추천 기능을 업데이트할 예정이다.
- UX를 고려하여 전체적인 화면 레이아웃 및 UI를 업데이트할 예정이다.
- Light / Dark 모드를 추가할 예정이다.


[YouTube]
링크 : https://youtu.be/shTvM5yQmVU