SOLVER(솔버) 프로젝트 개발 후기

Hyeona·2023년 1월 30일

🤓 삼성SW청년아카데미(SSAFY)

목록 보기

3/9

📖 개요

👥 팀 빌딩

삼성청년SW아카데미(이하, SSAFY)에서 진행하는 2학기 첫 프로젝트였습니다.
1학기 성적에 아쉬움이 많아, 2학기는 좋은 성적을 얻고 싶은 것이 1순위였습니다.
하지만, 성적은 단기적인 것이니 이를 제외하고 정말 저에게 남는 것으로 생각한다면,
이전에 배운 SprintBoot를 활용해보고, 도메인을 통해 접속할 수 있도록 배포를 성공하는 것이 목표였습니다.
이런 기준으로 팀원을 모으게 되었고, 정말 다행스럽게 같은 목표를 갖고 있는 사람들을 많이 모을 수 있었습니다.

📝 목표 설계

SprintBoot에 익숙해지며, JPA 활용하기
Jenkins를 이용해 AWS에 배포하기
Backend 및 Server에 익숙해지기
프로젝트 1등하기

📋 서비스 요약

🔧 기술 스택

SCM : Gitlab
Issue : Jira
Communication : Mattermost
Design/UI/UX : Adobe Photoshop, Figma
OS : Windows 10
DB : MySQL 8.0.22
Cloude : AWS EC2, Ubuntu 20.04.2 LTS, Docker 20.10.7

Back-End

Java : Open-JDK zulu 8.33.0.1
SpringBoot Gradle: 7.1.1
Spring Tool Suite : 3.9.14
Jar : lombok 1.18.20
Library : Kurento 2.0

Front-End

html5, CSS3, JavaScript (ES6)
Vue : 2.6.11
vuex : 3.4.0
Node.js : 14.17.3
Visual Studio Code 1.58
Library : chartjs, ckeditor5

💬 서비스 요약

당신은 특별하다. 당신의 질문과 답변도 특별하다.

사소하지만 나에겐 어려운 문제를 해결하지 못해 답답했던 적 있으신가요? 혹은 하나 때문에 막혀서 진도가 안가는 경우는 있으셨나요?

언제든 내 질문을 해결하고, 실시간으로 맞춤형 답변을 얻어보세요!
그렇게 성장한 여러분은 다른 이의 고민을 해결해주며 경력 쌓기를 시작할 수 있습니다.

누구든 해결사를 찾고, 해결사가 되어보세요.

🏃🏻‍♀️ 진행

프로젝트 기간 : 2021-07-12 ~ 2021-08-20 (총 6주)

기획

공통된 희망주제 찾기 - 브레인스토밍
팀원들과 가장 오랜 시간을 활용한 시간이었던 것같습니다. 브레인스토밍이 하루 왠종일해서 3~4일을 하니 너무 진이 빠지더라구요 😭
그러던 중 생각난 것이 공통적으로 내놓은 아이디어의 공통 키워드를 보기로 했습니다.
바로 학습 플랫폼이 그 핵심이였고, 여기서 더 상세하게 서비스를 기획하게 되었어요 ㅎㅎ

위는 실제로 아이디어 브레인스토밍할 때 정리한 페이지입니다.
같은 서비스를 생각하기 - 요구사항 정의서 작성
주제를 정했다고 해서 모두 한 서비스를 생각하진 않습니다.
그럼 발생할 수 있는게, “어? 난 그렇게 생각안했는데?” 이런 흐름이겠죠..

6주의 짧은 프로젝트 기간 중에 이런 상황은 굉장히 많은 제약을 걸것이라 생각해서
시간이 조금 더 걸릴 수 있지만, 한 번 정리하고 갔습니다.

각 뎁스도 나눠서 진행하니, 화면 단위 별 기능 구현하는 담당자를 나누거나 확인하기도 좋았어요.
다만 시간이 많이 들어서, 우선 각각 작성하면서 논의가 필요한 기능과 후순위로 구현해야하는 기능을 체크했습니다.

빠르게 작성하고, 이 항목을 기준으로 회의를 한두차례만 가지면서 빠른 진행을 노렸습니다.

설계

컬러팔렛트, 슬로건, 로고, 폰트 정하기

SSAFY에서 진행하는 과정에서 가장 힘든 점은, 디자이너가 없다는 것…
그렇기에 디자인을 정하거나 선택하기에 너무 어려웠습니다. 그렇기에 좋은 색감을 정해 우선순위로 빠른 디자인을 정하기가 중요했습니다.

이 모든 내용은 Frontend 작업 시 디자인 시스템으로 활용할 수도 있었어요.
메인 컬러가 파란색이 되자, 로고는 블루베리를 차용해 만들게 되었습니다. 서비스명 Solver의 S를 표현했어요.(로고는 저희팀의 프론트 능력자 팀원이 해주셨습니다 ㅎㅎ)
와이어프레임 작성

최대한 단색만 사용해서, 전체적인 서비스의 흐름을 작성했습니다.
각자 2~3개를 맡아 그리고 추가로 논의하거나 UX를 고려하면서 의견을 나눴죠.
메인 디자인, 스토리보드 작성

회의를 나눠 서비스가 어느정도 시각화되어, 컬러를 입히는 디테일을 진행했습니다.
작성하면서, 이벤트로 보여지는 부분이나 반응해야하는 곳은 스토리보드처럼 바로 왼쪽에 작성을 했습니다.

이런 느낌으로요! ㅋㅋ 이 메인 디자인과 스토리보드 덕에 모든 인원이 Frontend를 개발해도 나눠서 잘 진행할 수 있었던 것같습니다.
컨벤션 정하기 - 코딩/커밋/브랜치

Git을 활용한 형상관리가 처음이거나 다양한 Branch를 다루는 것이 처음인 인원도 많았기에 모든 인원이 걱정이 많았던 것같습니다.
참고했던 링크도 넣어보니, 필요하신 분들은 참고하시면 좋을 것같아요 🙂
- Git - 커밋 메시지 컨벤션
- Conventional Commits
Database ERD 설계 - 코드시스템 및 로그테이블
지식을 공유하는 서비스의 특성상 카테고리를 다루거나, 사용자의 등급 등의 데이터를 보관하는 것이 중요했습니다.
그래서 코드시스템을 적용해 공통코드들을 구성했습니다. 정말 머리아파서 죽는줄 알았습니다…
Join해서 활용할 수 있고, 다양한 정보를 활용할 수 있어서 좋았지만, 처음부터 설계하기엔 너무 어렵더라구요 🤣
그래서 ERD 기록을 이렇게 남아있습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

제발 최종 너무 웃기지 않나요 ㅠㅠ
프로젝트 메인 캐릭터 만들기 - 베리
서비스 자체가 공부라는 주제를 갖고 있어서, 사용자 유입에 큰 어려움이 있을 것이라고 생각했습니다.
그래서 보상체계로 캐릭터를 주기로 했어요.
캐릭터는 프론트 팀원이, 옷과 악세사리 디자인은 제가 만들었습니다…ㅋㅋㅋㅋㅋ

저희 팀의 작고 소듕한 베리들 ㅎㅎ

개발

팀장 : 6주라는 기간 동안 스케쥴을 조절하고 (제 경험 중) 큰 규모의 프로젝트를 하는 것이 처음이였습니다. 따라서 이 팀을 어떻게 운행하는가가 엄청난 부담이였죠. 하지만, 팀장을 하면서 진도를 파악하며 완성하는 경험을 하고 싶었습니다.
Infra : 배포라는걸 경험해본적이 없는 저로썬 가장 어려운 공간이였습니다. 리눅스 커맨드까지 너무 어려웠습니다😭
이렇게 하나하나 작성하면서 공부하고 팀원들에게 공유하면서 진행했습니다. 제 밤샘의 주범인이였고, https의 필요성 역시 왜 필요한지 몰랐습니다. Jenkins 세팅은 둘째치고… 기본적인 환경 세팅에 몇 날 며칠을 보냈네요..ㅎㅎ 결국 인간 젠킨스가 되었었습니다 ㅠㅠ 각 단계가 끝나거나 매일 저녁 단위로 빌드를 하면 제가 배포를 하는 식으로 진행했습니다.
Database : Admin 계정과 별개로 서비스 개발용 계정을 따로 만들어야한다는 것을 배웠던 좋은 기회였습니다. AWS의 계정을 지원받는 것이 아닌 CLI 환경으로 해야해서, 이 과정에서의 모든 구성을 커맨드로 하는 것이 너무 어려웠던 것같습니다. 다행스럽게도 우리 팀에서는 DB가 해킹되는 불상사는 없었습니다! 계정 외의 모든 테이블과 컬럼은 JPA로 구현했었습니다. 가적으로 메타데이터도 만들면서, 언제든지 복원할 수 있도록 준비도 했었습니다!!
Backend : Sprint Security가 처음이라 이게 무슨 소리인지 너무 힘들었는데, 좋은 팀원 덕에 이쪽 부분은 쉽게 넘어갈 수 있었던 것같습니다. JWT나 Oauth 역시 이론을 이해하고 구현하는 것에 어려움이 컸는데 능력 좋은 팀원에게 많이 배울 수 있어서 좋았습니다. 이런 내용은 서포트하면서 API를 빠르게 구현했었습니다. 크고 작게 해서 프로젝트 내에서 약 50여개의 API를 만들었습니다ㅎㅎ
Frontend : 팀원 4명 중 프론트 인원은 1명 뿐이라, 메인 프론트 개발자 외에는 모두 함께 진행했습니다. 저 역시 함께 구현했습니다. 라이프 사이클을 이해하고 데이터를 받아 뿌리는 것이 생각보다 재미있으면서도, 하나하나에 예민하게 구현이 달라져서 너무 힘들었었습니다. 막바지엔 제가 구현한 API의 모든 프론트를 직접 구현하는 속도전을 벌이기도 했습니다.

테스트

테스트의 단위는 2가지로 이루어졌습니다.

첫번째, API 단위입니다.

API Docs를 만들면서 이렇게 Methods, uri, param, success/fail을 모두 기재했었습니다. 개발이 완료되면, 팀원들과 함께 체크하면서 테스팅을 했었습니다. 문서의 중요성을 또 느꼈던 것같네요.

두번째, 배포하면 팀원과 컨설턴트/실습코치님과 함께 테스팅을 했습니다. 오류가 발생하면 해결하는 식으로 했습니다. 이 방법이 정말 다양한 오류를 찾아냈던 것같아요. 실제 사용자가 되어봤다고 생각해서 더 그런거 같습니다.

그리고 어쩔 수 없이 서비스에 익숙해져 있다보니 성공되는 테스트만 반복하게 되었습니다. 제3자가 사용하는게 제일 좋았던 것같더라구요 ㅎㅎ

배포 및 운영

이러한 내용을 활용해 서버를 구상해 진행했습니다.
사실 생략된 부분들이 더 많긴하지만, 가장 핵심된 부분들만 작성하면 이런 모습이라고 할 수 있겠습니다.

Nginx를 통해 각 파트로 교통정리를 해주고, 미디어 관련한 저장은 MySQL이 아닌 S3를 활용했습니다.
EC2 자체에 Nginx와 MySQL, Https 등을 세팅하고, S3 버킷은 프리티어 계정으로 진행했습니다.
각 배포는 Vue.js를 disc 1개와 backend, webrtc jar 각 1개씩 해 총 3개의 빌드 파일을 수동배포했습니다.

java --jar <jar-file-name.jar>만 알고 있어서 백그라운드 실행을 할 줄 몰랐습니다..ㅋㅋ
최종 발표 평가 끝나고, MobaXterm을 끄지 않았다는 후문 😅 (물론 나중에 알고 지역발표 전에 바꿨지만요 ㅎㅎ
운영이라고 해봤자 정말 짧게 7일 정도 한거지만 그래도 몇십명이 동시에 들어와서 확인하면서, 언제 터지지 않을지 엄청 쫄렸습니다ㅎㅎ

사용자를 받기 전, 더미데이터를 넣으면서도 그 데이터가 너무 가짜티가 나지않도록 노력했던 것같습니다 ㅎㅎ
시간이 많이 들면서도 디테일한 면에서도 신경쓰는게 완성도를 더 높이는 거라고 생각하니까요!

📚 결과

🖥 구동화면

지식 교류 사이트의 기본적인 기능 - 질문/답변/알림/검색/채택/스크랩/좋아요
화상 미팅 - 신청/수락/녹화/평가자동 등록
개인 프로필 - 정보 검색/수정/등록/차트/캐릭터/팔로우/팔로잉
포인트 관련 - 내역/결제/홍보

👩🏻‍💻 회고

목표에 달성했는가?를 보면 다음과 같습니다.

SprintBoot에 익숙해지며, JPA 활용하기 → API를 반복해 구성하며, 자가복제를 정말 많이 했죠...ㅜㅜ 익숙해진지는 의문이지만, 필요한 API는 필요한 만큼 빠르게 구현할 수 있었던 것은 스스로 뿌듯했던 것같습니다.
Jenkins를 이용해 AWS에 배포하기 → 서버의 구조와 배포하는 구조를 이해하는 것부터 큰 문제가 있었습니다. Nginx를 처음 활용했었는데, 어떤 구조로 배포되는 것인지 이해를 하는데 큰 시간이 들었기에 수동배포로 만족해야했었습니다. 하지만, Jenkins가 해야하는 일을 단계별로 수동으로 해본 것이기에 오히려 다음은 더 자신있었다고 생각합니다.
Backend 및 Server에 익숙해지기 → 굉장히 모호했던 목표라고 생각합니다. 익숙해지긴 했지만 능숙해졌다고는 생각하지 않습니다. 정말 무수한 오류를 만났었으며, 빠른 구현을 위해 주먹구구식으로 구현했습니다. 다음부터 목표를 세운다면 더 디테일한 목표를 세울 것같습니다.
프로젝트 1등하기 → 단어 그대로 성공했습니다. 정말 1등🏆을 했으며, 다른 팀은 5인 1팀이었음에도 불구 4인 1팀의 인원으로 당당히 1등 했습니다. 같이 1등 결정전에 올라간 팀이 너무 잘해서 걱정하며 심장이 벌벌 떨렸던 것이 기억나네요. 적은 인원으로도 UI/UX가 정말 좋았다는 평가를 받아서 행복했습니다.

기술적으로 생각한다면, 사실 엄청난 기술을 쓰거나 재활용성이 높은 클린 코드를 짠건 아닙니다.
하지만, 이론적으로 배운 내용을 실제로 구동되게 만들고 테스트 기간으로 잠시 배포한 것이지만 사용자도 약 30여명을 받아서 너무 즐거웠습니다.
첫 프로젝트였던 만큼 파란만장했고 가장 많이 투자하며 긴장했던 기간이였다고 자부합니다 ㅎㅎ

경험적으로 생각한다면, 프로젝트 팀장도 처음이고 AWS 서버도 처음이었습니다.
또, 처음에 Frontend인원이 한 명 빠지게 되면서 4인 1팀으로 운영되며 팀원 그 누구도 불만 없이 풀스택으로 개발했습니다.
팀장, Infra, Database, Backend, Frontend, UI/UX를 모두 경험하다니…
힘들면서도 전체적인 서비스의 흐름을 이해할 수 있어서 너무 좋았습니다.

평가에서 가장 기억에 남는 건, 개개인의 분업을 위해 개인이 맡은 API는 직접 모두 response를 다 별도로 만들어 진행을 했습니다.
이게 담당 컨설턴트님께서 이야기해주지 않으시고 테스팅하셔서 심장이 터지는 줄 알았습니다.

하지만, 정말 행복하게도 모두 🟢 SUCESS 🟢 했습니다 ㅋㅋ
딱, 테스팅하기 직전 배포에서 해결했던 업데이트였고 이런 테스트가 있다고도 생각하지 못했는데 아직도 그때만 생각하면 너무 짜릿하고 즐거웠네요.