싸피 2학기 공통 프로젝트 전체 회고(프로젝트 끝!)

이번 글은 회고일 수도 있지만.. 추억팔이일수도..?

 

오늘 드디어 첫 2학기 프로젝트가 마무리 되었다. 간단하게 이번 한 주 내용을 먼저 쓰자면, 발표 시연영상 촬영과 UCC를 준비하면서 발견 못한 버그들도 많았다. (그렇게 테스트를 해봤는데도 불구하고...) 또한 빼먹은 기능들도 있어서 보완도 하고... 발표준비를 혜린이가 ppt랑 대본까지 고생을 했고, 나와 승길이는 시연영상 부분에 대해서만 발표를 했다. 

UCC는 개인적으로 너무 재밌게 만들었다. 동욱이의 연기와 기획이 완벽했다고 생각하고.. 사실 여기에 업로드를 하고 싶었지만.. 우리 11반 사람들만 알면 좋겠다라는 말과 동욱이의 수치사를 막기 위해 지켜주기로 했다.

 

요기는 그냥 한 주 내용!

---

어쨌든 잘 마무리가 되었고, 정말 과장 하나 없이 1학기보다 20배는 빨리 지나간 기분이다. 잊고 살았는데 우리 팀빌딩도 너무 다사다난했더라. 프론트 3(비전공) 백엔드 3(비전공) 으로 구했는데 프론트 한 분이 취업퇴소를 하시고.. 다시 비전공 프론트 분을 데려왔더니 사무국에서 비전공 학생이 부족하다며 2명으로 구성하라고 해서 뺏겼다...(이때 수빈이네 팀을 소개해드렸다). 그 때 처음 동욱이랑 태순이랑 같이 멘붕이었지만 장고를 할뻔 했던 승길이가 탈출해서 우리팀으로 오고.. 

이렇게 잘 진행되겠지 했더니 또 다시 프론트 분이 나갔다. 프론트 1 백4....(이전 회고록에도 있지만 이 때 같이 저녁먹다가 통보를 받아서 동욱이, 승길이와 함께 아무말도 안하고 먹은 기억이...)

고맙게도 태순이가 프론트로 넘어가고 승길이가 거의 풀스택처럼 움직여 줬다. 그리고 멘탈이 나가지 않았는지는 모르겠지만 혜린이도 처음부터 마지막날까지 고생해줬다 ㅠㅠㅠ

 

기획부터 erd 설계까지 처음으로 주어진 주제 없이 시작을 해보니 어렵기도 했고, 말도 안되는 기획이었다. (첫 기획 아이디어가 엄청나게 많은 기능이 존재했는데 실습코치님이 줄이는게 나으실거에요... 라고 하신게 정말 큰 도움이었다.) 

프로젝트 초반에 다른 팀들 이야기를 들으면 의견 차이로 다투는 팀이 있다는 소식을 많이 들었고, 그에 비해 우리 팀은 다들 둥글둥글하게 잘 진행이 되어서 다행이었다. (생각해보니 11반 애들이 4명인데 여기서 싸워도 웃기긴 하겠다..)

 

딱 여기까지 추억팔이!

---

간단하게 쓰는 우리 서비스 Coding With Me

우리 프로젝트는 WebRTC를 이용한 화상 코딩 교육 플랫폼이다. 프론트엔드는 Vue3와 전용 Quasar UI 프레임워크를 사용했고, VS Code에서도 사용된 Monaco Editor라는 오픈 소스를 이용해서 플랫폼 내에 IDE를 구현했다. 백엔드는 SpringBoot와 JPA.

 

그리고 모든 기능을 하나의 서버에서 처리하기에는 무겁다고 판단해서, 성능을 위해 세 개의 서버로 분리 하고 각각 다른 기능을 담당하는 MSA 아키텍처를 구성했다. 화상 회의만을 담당하는 OpenVidu 서버와/ 컴파일, 코딩테스트 채점을 위한 Node.js 컴파일러 서버/ 마지막으로 Spring API 서버와 프론트를 담당하는 본 서버 이렇게 총 3개로 서버를 가동했다.

 

우리 서비스의 핵심 기능으로는 화상 교육, 강사의 강의 화면 페이지 내에 함께 있는 웹 IDE, 그리고 그걸 이용한 선생님-학생 간의 코드 전송, 마지막으로 코딩테스트이다.

 

기능을 생각한 계기는 1학기 싸피 수업 때 우리가 놓친 코드가 있으면 교수님께 다시 보여달라고 하면서 강의 흐름이 조금씩 끊긴 것과, 내가 듀얼모니터를 안썼을 때 강의랑 내 IDE랑 화면전환을 계속 하면서 공부했을 때 불편했던 것을 생각해서 진행했다. 여러 화면이 있으면 사용성이 불편할거란 생각도 해서 Golden Layout을 쓰면 정말...정말 다 해결이 되는데 

망할 Vue3 덕분에 못했다.. (기회가 닿아서 자율까지 지금의 팀원들이 있다면 리액트로 바꾸고 좀 더 개선을 해보기로 했다. 리액트는 골든 레이아웃이 되기때문에.... 아니면 더 좋은 아이디어로 프로젝트를 진행해도 되고...) 

 

뭐 부가적인 기능으로는 교수님이 누가 안들어온지 확인하시는 것도 어려웠어서 교수님 채팅창엔 오프라인 학생도 표시하게 했고... 따지고 보면 1학기 때 웹액스 수업에서 많이 아이디어를 생각해 본 거 같다.

 

코딩 테스트를 보는 화면은 교수님이 시험 문제를 업로드를 하고 테스트 케이스도 입력해 줄 수가 있다. 학생 입장에서는 시험페이지로 이동을 하면 부정행위 방지를 위해 화면 공유를 하도록 기능을 띄웠고 코드 입력 후 실행을 하면 정답인지 아닌지를 Your result에 표시를 하게 했고 제출하기를 누르면 서버에서 자동으로 채점을 하도록 하였다. 

이런 느낌!!

 

 

우리 기능은 캡처로는 코드 보내기 기능이나 실시간 소켓 통신을 확인 할 수 없으니, 나중에 강사 입장의 시연 화면과 학생입장의 시연 화면을 녹화해서 유튜브에 올려야겠다. 

 

---

이게 될까...? 했던 기능들을 모두 완성할 수 있어서 신기하면서도 뿌듯했고, 회고록에 정말 매번 쓴 것 같지만 우리 프론트  (혜린이, 태순이, 승길이(?))너무 고생했다. (진짜 너희가 너무 최고야...!!! ) 

 

원래 이 글을 팀원들이 보지는 못하겠지만 이라고 썼겠지만 항상 어떻게 알고 보니까 이것도 알아서 보겠지 ㅋㅋㅋ

 

p.s 

다음주 부터 특화프로젝트를 하고 주제는 빅데이터(분산) 으로 했다. 하둡이랑 스파크 공부를 좀 해야겠고, 이것도 팀빌딩이 쉽지 않았는데 정말....

기존 우리 팀에서 승길이가 SSDC로 빠지고 다은이가 들어오고, 혜린이랑 같이 하자는 말을 못해서 이번엔 같이 못하게 되었다 ㅜㅜ 새로운 두 분과 함께 한다.

그리고 이번엔 동욱이가 프론트엔드! 태순이는 백엔드! => 프론트 2 백엔드 4