오늘은 3학년 졸업작품으로 진행했던 나의 첫 프로젝트를 회고를 해볼까 한다. 비록 프로젝트가 끝난지 7개월이 지났지만, 그 당시에는 블로그를 진행하지 않았을 뿐더러 최근 리팩토링을 계획하며 그때의 회고를 더 잊기 전에 작성해 보면 좋을 것 같다고 생각한다.

COMMA-Github

첫 프로젝트 ( 2022.03 )

1학년을 마치고 군대를 다녀온 뒤에 뭐든 할 수 있다는 열정을 가지고 2학년으로 복학했고, 컴퓨터공학부에서 근로학생으로 근무하게 되었다. (근로학생은 컴퓨터공학부에 속한 컴퓨터 소프트웨어과, 컴퓨터정보학과, 인공지능학과에서 사용하는 모든 강의실과 수업 준비물을 관리하는 역할을 수행한다.) 학교생활을 하며 추상적으로 개발자가 되고 싶다는 마음은 있었지만 특별히 공부하는 기술이나 사용할 줄 아는 기술도 없었다. 그렇게 3학년이 되고 하나의 프로젝트를 진행해야 하는 졸업작품을 만들게 되었다. 프로젝트를 구현하는 기술적인 문제도 있었지만, 아이디어 선정에서 어려움을 겪던 중 같이 근로를 진행하던 같은 반 근로학생의 제안으로 컴퓨터공학부 커뮤니티를 만드는 프로젝트를 진행하게 되었다. 한 친구는 자바를 사용하는 백엔드를, 또 다른 한 친구는 파이썬을 사용해 크롤링과 인공지능을 담당하게 됐고 자연스럽게 프론트엔드가 남게 되었다. 어떻게든 되겠지 하는 심정으로 프론트엔드를 담당하게 되었고 그렇게 험난한 프로젝트의 서막이 열리게 된다.

프로젝트 동기

컴퓨터공학부에서 진행하는 수업 중 아두이노를 사용하는 IOT라는 과목이 있는데, IOT 수업을 신청한 학생들에게는 아두이노 기본 키트를 나눠줬다. 기본 제공되는 부품 외에 개인이 학습하거나 기말고사 프로젝트에 사용할 경우 컴퓨터공학부 측 사무실에 실습재료 지원서를 제출하고 승인되면 근로학생이 상주하는 실습재료 준비실에서 부품을 찾아 학생에게 제공해 줬다. 근로학생으로 근무하며 수업이 끝난 강의실을 정리하거나 다른 기타 작업이 많은 상황에서 학생들이 부품 신청을 위해 실습 준비실로 몰리면 업무가 지연되는 경우도 많았고 부품의 종류가 100가지가 넘기 때문에 찾는 시간이 오래 걸리거나 부품이 없는 경우같이 난처한 상황도 많이 발생해 불편함을 겪고 있었다. 같이 근로를 진행하던 근로학생이 이러한 신청 과정을 웹사이트에서 처리하면 좋을 것 같다는 의견을 제시했고 곧바로 졸업작품 프로젝트로 선정하게 됐다. 기존에 아두이노 부품 신청을 위해서는 컴퓨터공학부 사무실에서 수기로 신청서를 작성하고 이 신청서를 실습재료 준비실에 제출하면 근로학생이 신청서를 받음과 동시에 부품을 찾아야 했지만, 웹사이트를 만들어 부품 신청 방식을 온라인에서 마치 쇼핑몰처럼 신청자인 학생이 원하는 부품을 장바구니에 담으면서 수량과 부품 존재의 유무를 확인하고 신청서를 작성하면 근로학생이 신청서를 확인하고 승인하여 부품을 제공받을 날짜를 이메일로 발송하는 방식으로 전환하고자 했다. 여기에 더해 학식과 공지사항의 경우 학교 홈페이지에서 확인이 가능하긴 하지만 학식의 경우 찾기가 번거로웠고 공지사항의 경우에도 학부별 공지사항과 대학 공지사항을 손쉽게 확인하기가 어려웠던 부분이 있었다. 그래서 공지사항을 간편하게 한 공간에 모아서 확인할 수 있도록 했고 커뮤니티 게시판, 취업 게시판 등 다양한 편의성을 갖춘 컴퓨터공학부만의 커뮤니티를 만들게 되었다.

기술 선정

프론트엔드를 담당하게 됐지만 JS를 거의 모르는 상태일뿐더러 웹에 대한 이해도도 없었다. 2학년 때 배웠던 Vue.js를 사용하기로 결심하고 프로젝트를 만들었지만 학교에서 배웠던 내용만으로는 프로젝트를 진행할 수 없었다. 강의를 참고하자니 React에 비해 참고할 수 있는 강의도 적었다. 때문에 팀원들에게

"Vue는 커뮤니티가 작아서~ 모르는 걸 검색해도 잘 안 나오더라 React 해볼게"

라고 아는체 하며 React를 사용해서 개발을 시작하게 되었다. 지금 생각해 보면 위와 같은 말을 하게 된 이유는 React에 대한 정보를 주워들었을 때 커뮤니티가 크다, 자유도는 높지만 그 자유도를 자유에 따른 구현 난이도가 높다와 같은 말을 많이 들었기 때문에 부족한 저의 Vue 개발 실력을 핑계 댔던 것 같다. React를 공부하기 전, JS를 기반으로 사용하는 라이브러리인 만큼 JS에 대한 공부가 필요한 것은 당연한 사실이었지만 지금 당장 JS를 공부하고 React를 사용하기엔 많은 시간이 필요했고 당장에 결과물이 필요했던 상황에서 일단 React로 개발을 하면서 그때마다 필요한 JS 코드를 찾아보며 공부하자는 결론을 내리게 되었다. React를 학교 수업에서 배워본 적도 없고, 사용하는 지인들도 없어서 학습 커리큘럼을 정하기가 정말 힘들었다. 결국 무료 강의 위주로 공부를 시작했다. 하지만 강의를 봐도 이해되지 않는 내용 투성이었고, 보고싶은 강의들은 대부분 유료로 결제가 필요했다. 학생 신분으로 유료강의들을 구매하는 것도 많은 부담이 되어서 울며 겨자 먹기로 무료강의란 무료강의는 다 보며 공부를 시작하게 되었다.

개발을 진행하며

React를 이해하며 코드를 작성하는 것은 불가능하다고 생각했고 일단 클론 코딩을 진행하며 코드를 외워서라도 그 상황에 알맞게 사용하려는 전략을 사용했다. (당시에 비동기 관련 코드인 async, await을 무슨 의미인 줄도 모르고 그냥 모든 함수에 사용했던 기억이,, 😅) 어느 정도 강의를 봤다고 생각한 시점에서 로그인, 회원가입 화면을 만들게 되었는데, CSS에 대한 지식도 거의 없는 상태였기에 다른 CSS 작성 코드를 보며 %, px, flex 등을 조정하며 많은 시간을 소모했던 것 같다. CSS 외에도 모든 코드들을 이해하며 작성했던 코드가 없었지만 의외로 개발을 진행하며 포기하고 싶다는 마음은 들지 않았다. 물론 완성하지 못하면 졸업할 수 없다는 것도 있지만, 매일 암기하고 간단한 실습 용도로만 코딩을 했던 것이 아닌 VS Code로 개발자처럼 코드를 작성하고 결과를 확인하는 과정에서 나도 개발자가 되었다는 것에 심취했던 것 같다. 팀원들과의 회의를 하던 도중, 이번 기회에 피그마라는 디자인 툴을 사용해서 체계적으로 프로젝트를 진행해 보자는 의견이 나왔고 피그마를 사용해 본 경험도 없었기 때문에 결국 또 피그마 사용법을 배워야 하는 상황이 오게 된다. 유튜브에서 제공하는 무료 강의 23강을 2배속 + skip을 사용해 시청한 뒤에 엉성하지만 사용은 할 수 있게 되었다고 스스로 생각하고 프로젝트 메인 페이지의 UI를 처음으로 만들어봤다. (매우 엉성하지만 당시에는 매우 뿌듯했던 기억이.. 😂) 회의 때 위 사진을 보여주고 디자인이 별로라는 지적과 함께 피그마는 역사 속으로 사라지게 된다...

COMMA 프로젝트의 1차 겨울

로그인, 회원가입 페이지를 어찌어찌 만들고 서버와 통신해 테스트를 진행해 보려고 관련 내용들을 찾아보던 중 많은 문제들이 발생하게 된다. ( 당시에 API라는 개념도 잘 몰랐고, 구글 검색에 100% 의존해서 서버와 통신하는 방법을 보고 시도했다. ) 어찌어찌 스프링 부트로 구성한 서버에 요청을 보냈으나 CORS 에러가 발생하며 콘솔 창이 오류로 가득 차게 되었고 아무리 검색을 해봐도 문제를 해결할 수 없었다. 하나를 수정하면 또 다른 CORS 에러가 발생했고 CORS 지옥에서 헤매이며 하루 종일 해결하지 못했던 기억이 아직도 생생하다. ( 당시 하루 종일 디스코드로 대화하며 CORS를 해결해 보려는 하던 모습,, 박진국은 나의 디스코드 닉네임이다. ) 알고 보니 서버를 담당한 친구가 설정 오류가 있어서 발생됐던 문제였었고 처음으로 로그인이 진행되고 내가 입력한 정보가 서버에 저장되는 모습을 보며 모든 것이 끝난 듯 기뻤지만 로그인과 회원가입은 시작일 뿐, Redux, 이미지 등등 매번 많은 관문들에서 좌절하게 했다. 그때마다 가장 힘들었던 부분이 끝까지 해결해 보고 싶은 마음으로 10시간, 13시간 의자에 앉았지만 문제를 해결하지 못했을 때 느낀 무력감에 허탈했던 기억이 난다... 요즘도 오랜시간 문제 해결을 위해 의자에 앉지만 도저히 해결할 수 없다는 생각이 들면 정말 힘들다. 하염없이 앉아있을 때가 정말 힘든 것 같다. 중간발표를 해야 하는 날이 다가왔고, 결국 서버와의 통신을 원활하게 해결하지 못해서 아두이노 부품을 더미 데이터로 작성하게 된다. 부품을 장바구니에 담고 신청 버튼을 눌렀을 때 신청이 되도록 데모를 계획했는데, 새벽까지 Redux 관련 코드들을 피눈물을 흘리며 결국 작성하고 1시간을 잔 뒤에 등교해 어찌어찌 나름 성공적으로 발표하며 큰 고비를 넘기게 된다.

당시 가장 나를 힘들게 했던 Redux를 사용한 장바구니 (Redux Toolkit의 존재를 일찍 알았다면..)

COMMA 프로젝트의 2차 겨울

중간발표가 끝나자마자 방학이 되었고 평소처럼 근로하던 중 조교 선생님들께서 우리 프로젝트가 중간발표에서 최우수상을 수상하게 됐다고 말씀해 주셨었고 당시에는 별로 실감이 안 났지만 며칠 뒤에 홈페이지에 우리 팀의 명단이 올라왔을 때 그동안의 고생을 보상받는 기분이 들어 매우 기뻤다. 상금과 상장을 받은 뒤에 좋은 일만 남았을 줄 알았지만 팀원 한 명이 조기졸업으로 프로젝트에서 하차하고 그 여파로 팀이 흐지부지되는 분위기 속에서 남은 백엔드 친구와의 갈등이 발생한다. 당시 나의 심정은 백엔드를 담당한 친구가 프로젝트에 임하는 태도가 적극적이지도 않고 책임감도 부족하다고 생각하고 있었고 오해가 쌓이며 팀이 해체될 뻔했지만 30~40분간에 대화를 통해 서로 간의 오해를 풀고 조기졸업한 팀원의 자리를 모두 대체하기로 계획하고 개발을 다시 시작하게 된다. ( 상금은 달콤했다.. )

개발을 마무리하며 ( 2022.09 ~ 2022.11 )

어느 정도 프로젝트가 완성 단계에 이르면서 처음보다는 여유도 좀 생기고 졸업작품 외에도 다른 과목에서 프로젝트를 진행하거나 학습이 필요했기 때문에 예전만큼 많은 시간을 투자할 수는 없었지만 방학 때부터 미리 제작을 해둔 덕에 널찍하게 시간관리를 할 수 있었다. 어느덧 최종 발표날이 다가오고 간단한 PPT와 데모를 준비해 발표를 준비했는데, 갑자기 확인하지 못했던 에러가 발생해 식은땀을 흘리며 코드를 수정해서 몇 번이나 배포했던 아찔한 상황도 있었고 앞서 발표한 팀들도 퀄리티가 높다고 생각했기 때문에 긴장이 많이 됐었다. 발표 당시에 학부장님과 아두이노 수업을 진행하시는 교수님께서 심사를 봐주셨는데, 휴대폰 거치대에 반응형으로 제작된 사이트를 조작하며, 웹사이트 기능 데모를 진행했고 계획한 대로 발표를 잘 마쳤다. 발표가 끝나고 교수님들께서 실제로 계속 사용했으면 좋겠다는 말씀과 몇 가지 질문을 해 주셨고 자신감 있게 가능하다는 대답을 드리며 질의응답까지 모두 끝났다. 약 8개월간의 여정이 끝나게 된 것이다. 기술적인 부분에서 가장 아쉬웠던 부분은 나를 괴롭히던 장바구니를 장바구니 페이지로 따로 만들게 되면서 더 이상 사용하지 않고 포기하게 되었는데, 다음 프로젝트 때 클라이언트 컴포넌트의 상태관리가 필요한 경우가 생긴다면 꼭 프로젝트에 Redux를 적용해 보도록 하겠는 다짐을 했었다.

End가 아닌 And

프로젝트 발표가 끝난 뒤에 잠깐 프로젝트를 배포해서 서비스를 진행해 봤지만, 이미 종강 후 방학이 된 상태에서 서비스를 이용할 사용자도 거의 없었고, 서버를 담당하던 친구는 서버를 따로 배포한 상태가 아닌 로컬에서 돌리는 상황이었기 때문에 당시 상황과 비용의 문제로 프로젝트 서비스는 중단이 된다. 지금 생각해 보면 그때 서비스를 잘 운영해 봤으면 그 과정 속에서 많은 경험을 얻었을 것 같은데 너무 빨리 포기하지 않았나 하는 아쉬움이 들지만 당시에는 최선의 선택이었다고 생각하기 때문에 첫 프로젝트를 끝냈다는 부분에 의의를 두기로 마음을 먹었다. 최종 발표가 끝나고 며칠 뒤에 지도 교수님께서 연락을 주셨고 최우수상을 받을 것 같다는 말씀을 해주셨다. 그때 술을 마시고 있었는데, 참 묘한 기분이 들었다.. 그동안의 고생한 것들에 대한 회상과 더 잘하고 싶었던 아쉬움이었던 것 같다. 지금 와서 가끔 COMMA 프로젝트 때 작성했던 코드를 보면 **"내가 왜 이렇게,,"**라는 말밖에 안 나올 정도로 형편없는 코드를 작성했다고 생각한다. 하지만 팀원들과 밤새도록 고민하고 찾아보며 만들어간 과정이 현재의 발판이 되어 지금 다른 프로젝트를 진행하거나 학습할 때 나아갈 수 있는 원동력이 되었다고 생각한다. 비록 지금은 서버가 없는 상태로 온전히 사이트가 작동될 수는 없지만, 최근에 COMMA 프로젝트를 다시 구동하려는 계획을 세우게 됐고, TS와 새로운 라이브러리를 추가해 리팩토링을 준비하고 있다. 앞으로 얼마나 많은 프로젝트를 진행하게 될지는 모르겠지만, COMMA는 나에게 가장 기억에 남을 프로젝트가 될 것 같다.

나름 2관왕을 달성했다 🏆🏆 (이때 상금은 더 달콤했다.)