프로젝트명

모도코(모여서 도란도란 코딩)

프로젝트 요약

모도코는 모여서 각자 코딩할 수 있는 환경을 제공합니다.

사용자들은 다양한 목적에 따라 자유롭게 드나들 수 있으며, 다른 개발자와 교류하고 다양한 기회를 얻을 수 있으며 성장의 발판을 마련할 수 있습니다.

기술 키워드

웹, 소켓 통신, 실시간 통신

ICT연구개발

기술 분류

① 방송·콘텐츠 - ② 디지털콘텐츠

팀 명

FIRE

팀 원

고주형, 윤영기, 이하령

목적 및 필요성

개발자에 대한 수요가 많아지면서 다양한 사람들이 유입되고 있습니다. 이러한 사람들에게 모여서 각자 코딩의 준말인 ‘모각코’는 익숙한 신조어입니다.

최근에 모각코에 대한 수요가 증가하고 있지만 모각코를 할 인원을 모집하는 곳과 진 실제로 하는 곳이 분리되어 있습니다. 실제로 대다수 사람이 커뮤니티에서 인원을 모집하고 화상회의 서비스에서 각자 코딩합니다. 그렇다고 이러한 화상회의 서비스에 개발자를 위한 편리 기능이 있는 것도 아닙니다.
저희는 개발자를 위한 모각코 플랫폼을 개발하고자 합니다.

프로젝트 개요

설문조사 결과 도란도란한 분위기가 모각코를 하는 이유 중의 가장 큰 비율을 차

지했습니다. 모도코(모여서 도란도란 코딩) 프로젝트는 다양한 사람들이 모여서 도란도란 코딩을 할 수 있게 해주는 플랫폼입니다. 개발자 친화적인 요소를 갖춰서 다른 사람과 함께 소통하고 코딩에 몰입하는 것을 도와줍니다.

수행 방법 및

프로젝트 관리

저희 서비스의 개발자 친화적인 기능은 많은 피드백을 통해 만들어가고자 합니다.

실제 고객과 접촉하는 빈도를 높여 잘못된 가정을 빠르게 검증하고 개선할 것입니

다. 저의 아이디어를 검증하며 핵심적인 기능을 계속 보완해가며 개발할 것입니다.

개발 진행현황

실시간 통신을 위한 기반 환경 작업을 80% 정도 완료했습니다. 다수의 사용자를 지원하기 위한 Media Server 구축 작업이 남아있습니다.

전반적인 UI 컨셉을 결정했습니다. 디자이너와 협의하며 계속 발전시켜나가고 있습니다. 결정한 컨셉을 기반으로 실시간 통신 기능 붙여서 프리토타입을 완성했습니다.
소프트웨어 마에스트로 연수생 대상으로 실시간 통신에서 실제 부하가 얼마나 걸리는지 테스트하였습니다.

결과물 형태 및 서비스 방식

실시간 통신, 개발자 친화적인 기능이 갖추어져 있고 네트워킹이 자연스럽게 이루어질 수 있는 SaaS(Service as a Service) 형태의 PC 웹사이트입니다.

기대 효과 및 활용 방안

1. 혼자 공부하는 것을 힘들어하는 사람들이 모도코를 통해 자기주도학습력을 키

울 수 있습니다.

1. 다른 개발자들이 어떠한 공부를 하는지에 대한 호기심을 해결할 수 있습니다.

2. 모도코로 알게 된 인연이 이어질 수 있습니다.

구분

상세내용

S/W

개발환경

OS

개발환경(IDE)

개발도구

개발언어

기타사항

H/W

구성장비

디바이스

센서

통신

언어

기타사항

프로젝트

관리환경

형상관리

의사소통관리

기타사항

화면공유

화면 공유

음성 통화

캠 공유

친구

다이렉트 메시지

친구 추가/삭제/수락/거절

친구 초대

친구가 참여하고 있는 방에 동시 입장

테마

모닥불

바다

캠핑

우주인

여행 

통계

 월/주/일별 모각코 통계량

사용한 언어/프레임워크별 통계량

Wakatime 써드파티 이용

방

방 내보내기

방 생성하기

방 수정하기

라이브 코딩

VS code live share 써드파티 이용

채팅

전체 채팅

1:1 채팅

파일 보내기

기능명

구분

추진 내용

진척도

추진 일정

6월

7월

8월

9월

10월

11월

실시간

통신

계획

Media Stream 제어

실시간 파일 공유 및 채팅

100%

분석

Medis Stream 튜닝

100%

설계

대용량 스트리밍 서버 구축

70%

개발

50%

테스트

10%

종료

00%

인프라

구축

계획

모니터링, CI/CD, AutoScaling, LoadBalancing, CDN, RDS

00%

분석

필요한 기능 분석

95%

설계

70%

개발

40%

테스트

00%

종료

00%

모니터링

계획

00%

예시

분석

00%

설계

00%

개발

00%

테스트

00%

종료

00%

Socket

서버

계획

00%

예시

분석

00%

설계

00%

개발

00%

테스트

00%

종료

00%

담 당

역할 및 상세활동

연수생

멘토

담 당

기술 습득 노력

연수생

고주형

구 분

문제점 및 해결방안

관리 측면

• 프로젝트 진행 중 발생한 문제점 및 해결 경험 작성

개발 측면

• 기술적으로 발생한 문제점 및 해결 경험 작성

12:41:37

12:50:46

Re-Phasion

12:48:46

12:48:11

11:00:48

369

12:11:09

9:49:40

8:55:42

못하는게Ops

12:55:51

7:21:38

6:20:33

MVP

11:6:48

8:37:16

5:37:11

Nice-Guys

5:39:46

4:21:48

3:24:45

Growith

4:53:5

4:49:56

2:43:50

해치웠나

7:23:40

2:44:0

1:03:02

rebase

1:40:49

0:56:53

Cheetah

0:30:32

0:20:32

노래가 너무 좋아서 코딩하는데 집중이 잘 되었다

디자인이 예쁘고 테마도 다양해서 너무 좋다

디스코드보다 화질 및 음질이 좋았다

개선점

카메라랑 마이크가 잘 되는지 확인할 수 있는 방법이 필요할 것 같다

노래나 테마를 바꿀 수 있다면 더 좋을 것 같다

카메라랑 마이크가 잘 되는지 확인할 수 있는 방법이 필요할 것 같다

앱으로 출시했으면 좋겠다 (태블릿용으로도 출시했으면 좋겠다)

채팅 보낼 때 알람 기능이 있으면 좋겠다

코딩 테스트 대결과 같은 게임적 요소가 있으면 좋겠다

부정적 피드백

기획의도를 하나도 모르는 제 입장에서 여타 다른 화상회의 시스템(zoom, webex 등)과의 차별점을 느끼지 못했고 따라서 아직 이 서비스를 찾아와서 쓸만한 이유를 찾지 못했다

마이크 하울링이 심하고 화면 공유가 안될 때도 있다

사용자 측면

비즈니스 측면

개발자 측면

개선 요구사항

반영 결과

 블러 처리 외에도 사용자가 원하지 않는 경우 화면 공유 기능으로 인한 자료 유출을 방지할 수 있도록 기술적 방어막이 필요함

 블러처리 외에도 사용자가 키보드를 입력할 때마다 인터랙션을 보여줌으로써 코딩 화면을 대체할 수 있을 것 같습니다. 화면 공유 뿐만 아니라 실시간 화상(캠)도 지원하여 코딩 화면이 아닌 사용자의 손이 보이도록 할 수 있습니다.

구 분

 문제점 및 해결방안

관리 측면

[문제점]

애자일한 개발론을 채택하며 칸반보드를 활용하기 위해 Jira라는 도구를 사용하였습니다. 하지만 task의 범위를 어떻게 잡아야 할지, 이슈 트래킹을 제대로 못하는 등 어려움을 겪었습니다. 또한 스프린트 단위의 프로젝트 진행이 익숙하지 않았고 이슈 기반의 소통이 잘 되지 않았습니다. 처음에는 무리한 일정을 잡아서 칸반 보드에 진행 중인 스토리가 많았고 팀원들이 어떤 작업을 하고 있는지 알기 어려웠습니다.

[해결방안]

멘토님을 통해서 애자일 및 Jira, Confluence를 활용한 프로젝트 관리법에 대한 피드백을 받았습니다. 서로 번갈아가며 스크럼 마스터를 하며 프로젝트의 전반적인 상황을 관리하였습니다. 각 에픽은 스토리 기반으로 분류하고 하위 태스크로 각자 할 일로 나누었습니다. 현재 진행상황 및 이슈 보고를 적으며 팀원들과 sync를 맞춰갔습니다. 또한 기존에 스프린트 단위를 2주에서 1주로 줄여 Try and Error를 하였습니다. 스프린트가 끝날 때마다 KPT 회고를 진행하며 좋았던 점, 아쉬웠던 점, 노력해야 할 점에 대해 이야기를 나누었습니다.

현재는 스토리 포인트를 기반으로 무리한 일정을 잡지 않으며 실제 진행중인 이슈만을 칸반 보드에 반영하여 효율적으로 프로젝트를 진행하고 있습니다.

[문제점]

전통적인 git flow 방식으로 브랜치 전략을 사용하였습니다. 프로젝트 시작 후 2주 안에 배포를 하여 브랜치 관리에 드는 리소스가 많았습니다.

[해결방안]

트렁크 기반 브랜치 전략으로 변경하였습니다. main을 주 브랜치로 두고 며칠 내로 main에 머지할 dev 브랜치에 새 기능을 작업하였습니다. 머지할 때 발생하는 conflict 비율이 현저히 낮아졌고 코드 리뷰 및 관리에 용이하였습니다. 보다 잦은 배포를 진행하는 데에도 더 적합하였습니다.

개발 측면

[문제점]

Web에서의 실시간 통신 기술인 WebRTC가 처음 써보는 기술이라 처음에 막막했음. 특히, 처음의 시그널링 부분은 표준이 없었기 때문에 어떤 기술을 써야할지 막막했음.

[해결법]

팀원들끼리 실시간 통신 기술 세미나를 진행하며 지식을 쌓아감.

국내 WebRTC 컨퍼런스에 참여해서 안목을 넓힘.

따로 WebRTC 컨퍼런스를 참여하는 등 여러가지 안목을 넓힘.

[문제점]

React 18이 되면서 비동기의 제어가 쉽지 않았음. Strict Mode로 인해 useEffect가 두 번 호출되는 등 React16과 전혀 다른 동작을 하는 문제가 있었음.

[해결법]

따로 React 18의 동시성이 어떻게 이루어지는 팀끼리의 세미나를 통하여 공부를 해서 해결했음.

[문제점]

기본적으로 npm을 사용하게 되어 있는데 yarn을 이용한 빌드 및 배포 자동화에 어려움을 겪음.

[해결법]

yarn을 이용해서 빌드가 되도록 Build 스크립트를 작성 후에 AWS Code Build로 빌드를 진행함. 해당 빌드 결과물을 S3에 업로드를 하고 그것을 이용해 배포가 되도록 자동화 시스템을 구성함.

연수생

고주형

• AWS 강의 및 멘토링을 들으며 플랫폼에 대한 전체적인 인프라 구축 및 CI/CD 구축

  • ec2

  • elastic beanstalk

  • bastion

  • VPC

  • 알아서

  • 채워주세요

• 웹소켓을 통한 Signaling 서버 구현

  • Socket.io 공식 document를 읽으며 공부함

  • Client 측에서 전송하는 SDP 및 ice-candidate 정보 교환을 다른 Client와 맞교환 할 수 있게 Signaling 서버 구축

  • 같은 room에 있는 유저들이 해당 정보를 받을 수 있게 Socket room 구현

  • 같은 room에 있는 유저들이 실시간 채팅 정보를 주고 받을 수 있도록 Socket server 구현

• 실시간 통신을 어떻게 처리해야 할지 모임 주최

  • 어떤 모임?

  • 어떻게 주최?

  • 세미나 어떤걸로 발표?

• NestJS를 이용한 유지보수 및 확장 가능한 백엔드 서버 개발

  • 어떻게?

  • 무얼보고 학습?

윤영기

• WebRTC 학습

  • WebRTC 팀 내에서 세미나 진행

  • 담당 WebRTC 전문가 멘토와 따로 연락하며 의문점 및 해결방안에 대하여 고민 후 해결

  • Client가 서로 SDP 및 ice-candidate 정보를 Signaling 서버에 전달하여 맞교환 후 MediaStream을 계속 교환할 수 있는 p2p 형태를 구성

  • 화면 frame과 quality를 조절해가며 적절한 튜닝을 하여 최적화된 stream을 만드려고 노력함

• SSL에 대한 학습을 진행

  • 보안 및 WebRTC를 활용하기 위해 https 프로토콜을 사용함에 따라 SSL 인증서 발급이 필요하였음

  • SSL에 대한 기본적인 내용을 멘토링을 통해 학습하였으며, AWS에서 도메인에 해당하는 SSL 인증서를 직접 발급받아 적용하는 과정을 겪어봄

• 프론트엔드 스터디를 주 1회 참여하며 유행하는 프론트엔드 프레임워크 습득 및 활용 방안 논의

  • React-Query, Next.js, Zustand 등 최근 급 부상하고 있는 라이브러리 혹은 프레임워크들을 배우며 실제로 진행하는 프로젝트에서 Zustand 및 React-Query등을 사용하며 새로운 기술을 슥듭함

• 디자이너와의 협업을 위해 Figma 학습

  • 인프런 Figma로 시작하는 UI/UX강의를 보며 Figma의 기본 사용법에 대해 익힘

• SEO 학습

  • Search Engine 상단에 노출되기 위하여 어떠한 방법을 사용해야하는지 학습

  • Front-End 멘토님을 기술 멘토로 모셔 플랫폼의 SEO를 어떤식으로 발전시킬 수 있는지에 대한 질의응답 및 발전 방법에 대하여 문의

  • SEO 관련 툴 (LightHouse, Sitechecker) 등을 사용하여 메타태그, 헤더 등을 수정하여 SEO 점수를 향상시켜 Search Engine 상단 노출시킴

이하령

• 웹 접근성 향상법 및 웹 서버 학습

  • 관련 멘토님의 멘토링을 들으며 웹 접근성에 대하여 학습

  • 인지성, 운용성, 이해성, 견고성에 대한 개념을 인지하여 진행하는 플랫폼에 맞춰 적용

  • IR 기법 및 처리, 랜드마크 롤에 대해 학습하며 여러 시나리오에 대해 적합한 방법을 고민함

  • WAS와 비교하여 웹 서버가 무엇인고 어떤 종류가 있는지 학습

  • Apache와 NgingX를 비교하며 어떤 것이 더 적합한지 고민함

• 프로젝트를 진행함에 기본적인 네트워크 및 통신 지식을 습득

  • 관련 멘토님의 멘토링을 들으며 HTTP의 동작 원리를 이해함

  • 팀 내에서 세미나를 진행하여 네트워크에 대한 이해도를 쌓음

  • 프로젝트에서 HTTP의 GET, POST, PUT 등의 메소드를 사용하며 네트워크 통신을 함

  • 소켓 통신 클라이언트 처리를 위한 방안 논의

• 클라이언트측 JWT 인증을 사용하기 위하여 공식 문서를 읽으며 공부해봄

  • JWT가 어떤식으로 구성되는지 알아보며, 실제로 decode 하여 어떤 정보들이 심겨 있는지 알아봄

  • HTTP 요청을 보낼 때, header 에 JWT 인증을 실어 보내며 어떤식으로 동작하는 확인해봄

  • 소켓 통신에서 JWT 토큰을 어떻게 실는지 알아보기 위해 http://socket.io 공식 문서를 읽어보며 학습함

• React 18의 비동기 처리에 대한 학습을 진행함

  • 웹 플랫폼의 특성상 동기적으로 처리해야되는 알고리즘이 몇 있는데, React 18부터 concurrent 모드에서 전부 비동기적으로 실행되어 문제가 생김

  • React 18의 공식문서를 읽어보며 비동기 처리에 대한 학습을 하여 플랫폼에서 동기적으로 잘 처리할 수 있도록 해결함

사용자 측면

•  모각코 모임을 찾고자 하는 사람들이 큰 노력을 들이지 않고 현재 진행 중인 방 혹은 새로운 방을 만들어 모도코 진행 가능

• 많은 화상 서비스들이 유료인 점에 비해, 무료로 좋은 화질과 좋은 음성으로 끊김없이 오래 사용 가능

• SNS상으로 모집하던 것을 전용 플랫폼으로서 통일

• 코딩에 최적화되지 못한 실시간 커뮤니케이션을 해결

• 다수의 사용자를 대상으로 하는 원격 세미나 혹은 강의 개최 가능

비즈니스 측면

• [C2C] 기본 기능과 프리미엄 기능의 차이를 두어 구독 서비스 유도

  • 1. 기본 기능

    • 4인이 최대인 모도코 방 생성 가능

    • 통계 페이지 최근 한달 까지만 확인 가능

    • wakatime은 최근 14일까지만 확인 가능

    • Google Ads 존재

  • 2. 프리미엄 기능

    • 최대 100명까지 접속 가능한 모도코 방 생성 가능

    • 통계 페이지 무제한 이용 가능

    • 광고 비활성화

• 기업 상대로 API 구독 모델을 만들어 제공

• 강의자 혹은 세미나 개최자가 강의 비용을 산정하고 사용자들로부터 수입을 얻을 때 일정 요금 청구

개발자 측면

• WebRTC를 사용한 실시간 스트리밍 구현

• 웹 환경에서 다양한 미디어(화면공유, 웹캠, 음성 등)을 실시간으로 송신 및 수신 할 수 있는 웹 플랫폼 제작 및 학습

• 실제 기업에서 사용하는 기술들을 사용한 인프라 구축 및 설계

• 클라우드 컴퓨팅 서비스 플랫폼

  - [발췌] - AWS EC2를 이용해 클라우드 상의 가상 서버를 구축, Route 53을 이용하여 도메인을 구입 및 Elastic IP를 활용하여 고정 IP를 할당받는 등 클라우드 서비스를 이용하여 웹 서버의 개발/배포 환경 구축을 학습

개선 요구사항

반영 결과

1. 개발자들에게 도움이 되는 요소를 더 고민해 서 기획에 넣었으면 함

2. 타겟이 대학생 개발자인데 이들의 니즈를 면밀히 파악하여 충족시키면 좋을 것 같음

3. 커뮤니티 기능 외에 개발자들이 공동 개발하 거나 개발 팁으로 활용할 수 있을 것으로 보임

4. 블러 처리 외에도 사용자가 원하지 않는 경우 화면 공유 기능으로 인한 자료 유출을 방지 할 수 있도록 기술적 방어막이 필요함

5. 고수를 영입해서 방장을 시키고 일정 시간동안 첨삭지도 해주는 방법을 강력 추천함

6. 화면공유를 하는 리소스 대비, 수익화를 위한 수익 모델이 약해 보임

1. 자체적으로 혹은 기업과 연계하여 해커톤을 개최하는 방안으로도 생각하고 있습니다. 타겟층을 대학생으로 국한하지 않을 수 있으며 공동 개발에 최적화된 상황을 만들 수 있습니다. 또한 하나의 방에 입장하는 최대 인원수도 적기 때문에 서버에 부담도 거의 가지 않습니다. 본인의 포트폴리오로 활용할 수 있으며 기업과 연계가 된다면 많은 개발자에게 도움이 될 것이라 판단됩니다.

2. 블러처리 외에도 사용자가 키보드를 입력할 때마다 인터랙션을 보여줌으로써 코딩 화면을 대체할 수 있을 것 같습니다. 화면 공유 뿐만 아니라 실시간 화상(캠)도 지원하여 코딩하고 있는 화면이 아닌 사용자의 손이 보이도록 할 수 있습니다.

3. 향후 사용자는 모도코 내에서 강의를 개최할 수 있습니다. 최대 100명까지 접속이 가능하게 하여 강의자가 측정한 강의료로 강의를 진행할 수 있습니다. 이때 수수료를 받는 등의 비즈니스 모델을 구축할 예정입니다.