온라인 칠판 편지 개발과 서비스 오픈까지(1)

 

개발의 시작

멋쟁이사자처럼 11기에서 4호선에 있는 대학들끼리 연합하여 프로젝트를 하는 해커톤인 4호선톤에 참여하게 되었다. 이 해커톤 전에는 교내해커톤과 중앙 해커톤을 했는데 이번에는 다른 학교 사람들과 함께 개발을 진행하는 것이였다! 팀 빌딩은 노션에 각자 아이디어를 작성하고 (기획 담당하시는 분 뿐만이 아니라 디자이너, 개발자 모두 아이디어를 자유롭게 낼 수 있었던 것으로 알고있다!!) 주어진 기간 동안 카카오톡 오픈 채팅으로 팀원을 구성하는 방식으로 이루어졌다. 같은 학교에 친한 언니와 함께 개발자들끼리 포트폴리오를 공유할 수 있는 플랫폼을 만들어보자는 아이디어를 냈다. 하지만 연락이 오지 않았고.. 그래서 다른 팀으로 들어가기로 했다. 주제들을 보던 중, 온라인 칠판 편지가 눈에 들어왔다. 졸업 시즌에 사용하는 서비스로, 칠판을 만들고 해당 칠판에 편지를 작성할 수 있는 서비스였다. 롤링페이퍼 느낌인 것 같았다. 이때까지 교내 해커톤과 중앙 해커톤에서는 커뮤니티 형식의 플랫폼을 개발했는데, 이번 기회에 이벤트성 프로젝트를 해보는 것도 좋을 것 같아서 아이디어를 내신 분께 연락을 드려 팀 매칭에 성공했다!

 

 

 

일정

해커톤까지의 일정은 다음과 같이 세웠다. 

 

 

 

 

개발 전의 걱정

우리 학교 멋사에서는 1학기와 여름방학까지는 Django의 MTV 패턴과 배포를, 2학기부터 Django의 DRF를 배웠다. MTV 패턴으로만 프로젝트를 두 번 했는데, 프론트에서 전달받은 html, css, js를 넣고 템플릿 언어로 수정해야 하고, css가 깨져서 결국 내가 고쳐야 하는게 너무 스트레스였다. 2학기에 DRF를 배우긴 했지만 제대로 이해하고 있다는 생각은 들지 않았고 DRF로 개발을 잘 할 수 있을거라는 자신감도 들지 않았다. 나는 2학년 2학기부터 SpringBoot 공부를 열심히 했고, 3학년 여름방학에 SpringBoot로 첫 프로젝트를 했다. 이후에 프로젝트도 없었고, SpringBoot를 쓸 일이 많지는 않았지만 내가 자신감을 갖고 개발에 임할 수 있을 것 같아서 4호선톤에서는 SpringBoot를 사용해 프로젝트를 진행하기로 했다. 

 

 

디자인

얼마 지나지 않아 디자인이 나왔는데, 웹앱 형식인데다 너무 깔끔해서 마음에 들었다!! 기획, 디자인, 프론트까지 맡으신 우리 팀장님 최고.. ✨

 

 

 

 

DB 설계

회원가입, 로그인 기능은 과감하게 뺐고, 프로젝트 규모가 크진 않았어서 테이블은 4개만 나왔다. 연관관계도 단순했다.

 

 

 

 

API 명세서

놀랍게도 구현해야 하는 API가.. 5개뿐이였다. 지금 보니까 진짜 적다. 

 

 

 

 

배포

멋사에서 네이버 클라우드 플랫폼 크레딧을 제공해줘서 Django MTV 패턴으로 개발한 이전 프로젝트들은 네이버 클라우드 플랫폼을 사용했다. 근데 크레딧을 다 쓴 관계로 AWS로 배포를 하게 되었다. 내 기억이 맞다면 이 프로젝트에서 SpringBoot 프로젝트 배포를 처음 했을 것이다. (배포를 하루종일 했던 기억이 난다...!!) 간단하게 배포 과정을 정리하자면 AWS에서 RDS 생성, 한글 설정, EC2 우분투 서버 생성, 서버 초기 설정, jar 파일 실행 테스트, 인증서 발급 및 HTTPS로 배포였다. RDS 생성과 연결은 생각보다 간단했다. DB 한글 설정은 이 영상을 참고했다. (https://www.youtube.com/watch?v=ljSTXfPEfjo&t=305s) AWS 자체에 익숙하지 않았기 때문에 EC2 우분투 서버 생성과 서버 초기 설정은 구글링을 정말 많이 해봤다. jar 파일을 우분투 서버를 옮길 때는 scp를 사용했다. (지금은 당연히 서버에 깃을 설치해서 쓰지만....!!) 프론트를 netlify로 배포해서 HTTPS만 통신이 된다고 했었나?? 그래서 HTTPS 환경으로 배포하기 위해서(?) 인증서 발급을 받았다. https://shanepark.tistory.com/442 를 참고하였고, 이 과정에서 정말 포기할까 싶었다. 지금 보면 그냥 따라하기만 하면 되는데, 뭐가 그리 힘들었는지!!! 그래도 배포까지 잘 하고 통신도 잘 되는 것을 확인했다.

 

 

 

해커톤 당일

4호선톤에서 받은 굿즈와 빼빼로, 그리고 우리 팀 굿즈까지!

 

 

 

백엔드는 해커톤 전에 배포까지 해서 당일에 할 일이 없었다(?) 인스타에 업로드할 카드뉴스 제작을 도와드리고, swagger로 API 문서화를 하니 정말 끝났다! swagger로 API 문서화 하는 것도 이 때 처음 해봤다..! 그저 신기했지만 지금 보니 좀 허접하다..? ㅎㅎ.. (글 맨 아래 노션에 작성한 API 명세서도 있다.) swagger를 사용해 본 것에 의의를 두었다!

 

졸업을 축하합니다! API.pdf

0.35MB

 

 

 

발표까지 무사히 마치고 결과는!!

 

 

최우수상을 받게 되었다! 다른 학교와 연합하여 참여한 해커톤에서 처음으로 상을 받았는데 너무 뿌듯했다. 서비스 완성도도 높았던 것 같고 추후에 실제 서비스를 내도 좋을 것 같다는 생각을 했다. 개발할 때 코드 최적화, 성능 최적화와 같은 부분은 신경을 쓰지 못했지만 이 프로젝트를 실제 서비스로 출시한다면 그 때 해봐도 좋겠다고 생각했고, 실제로 그렇게 했다! 관련 내용은 다음 편에 이어서 작성하겠다.

 

 

 

 

 

후기

그저 공부하는 것으로는 실력이 절대 늘지 않는다는 것을 많이 깨달았다. JPA를 이용해 DB 구현을 하고, 완벽했다는 생각은 오산이였다. service 계층에서 로직을 구현하는데, 제대로 동작해야 하는 것이 원하는대로 동작하지 않았다. 문제는 DB의 연관관계에 있었고, 이 프로젝트를 하면서 연관관계에 대해 제대로 이해할 수 있었던 것 같다. 배포하는 과정과 swagger를 사용하는 것도, 해보지 않았다면 절대 몰랐을 내용들이다. 무엇이든 만들면서 부딪혀 보는게 실력 향상에 정말 큰 도움이 된다는 것을 느꼈다. 팀원분들도 너무 능력이 뛰어난 분들을 만나 더 열심히 하게 된 것도 있었다! 팀원분들 모두 최고였습니다 👩‍💻👩‍💻

 

 

---

 

 

 

아래는 개발 과정이 기록된 노션이다.

https://gamy-anglerfish-cf1.notion.site/833539d9a8e94b239b3962204b113b08?pvs=74

졸업을 축하합니다! 칠판 편지 | Notion

 

 

 

4호선톤 때 개발한 소스코드는 아래에 있다.

https://github.com/balckBoard-4line/blackBoard-back