Safers(세이퍼스) 프로젝트 개발 후기

Hyeona·2023년 1월 30일

SSAFY project 개발 프로젝트 회고 후기

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

목록 보기

6/9

📖 개요

👥 팀 빌딩

삼성청년SW아카데미(이하, SSAFY)에서 진행하는 2학기 마지막 프로젝트를 진행하게 되었습니다.

앞선 Solver나 SSDC 프로젝트는 모두 계획서나 가이드가 있었기에, 마지막 프로젝트만큼 제가 원하는 정말 자유로운 프로젝트를 하고 싶었습니다.
그래서 다양한 선택지에도 불구하고 자유주제를 선택했어요!

또한, 너무 학습적이거나 기술적인 내용만 다뤘기에 마음이 따뜻해지는 그런 주제를 하고 싶었습니다.
이런 목표를 5기 동기들께 공개했고 그렇게 총 5인을 구성하게 되었어요.

그 중에 2명은 Solver를 만들었을 때, 함께 같은 반 우수팀으로 올라갔던 인원이라 믿음직했답니다 ㅎㅎ

📝 목표 설계

도메인에 제한 없이 원하는 것 구현하기
자동 배포 적용해보기
전국 발표 진출하기

여기서 전국 발표가 뭔지 궁금한 분들이 있을 것같아요.

SSAFY에서는 앞선 2가지의 프로젝트에서는 이런 단위가 없지만, 최종 프로젝트에서는 전국 단위로 발표를 할 기회가 한 번 더 있답니다.

여기 나가려면 반 1등은 물론이고, 전국 단위에 우수한 프로젝트 안에 들어가야했어요.
전국에서 1~3등까진 몰라도, 전국 단위에 발표를 나가 큰 공간에서 발표를 해보고 싶었습니다.

📋 서비스 요약

🔧 기술 스택

이슈관리 : Jira
형상관리 : Gitlab
커뮤니케이션 : Mattermost, Notion
디자인 : Adobe Photoshop, Figma
개발 환경
- OS : Windwos 10
- DB : MySQL 8.0.22
- Server : AWS EC2, AWS S3, Ubuntu 20.04, Jenkins 2.303.2, nginx 1.18.0
Frontend
- HTML5, CSS3, JavaScript(ES6)
- Vue 2.6.11, Vuex 3.4.0, Node.js 10.19.0
- Lib : Bootstrap 5.1.3, vue modal 2.0.1, simple alert 1.1.1
Backend
- Java open JDK zulu 8.33.0.1
- SpringBoot Gradle 6.7
- Lombok 1.18.20, JPA, Swagger, https, Security
Unity
- Unity Community 2019.4.32f1
- WebGL 2.0, Photon 2.38
Machine Learning
- Tensorflow 3.11.0
- Tensorflow Mofilenet models 2.1.0
- Tensorflow Teachable Machine Image 0.8.5
- Tensorflow core 3.11.0, Tensorflow backend wasm 3.11.0
IDE&Tool
- intelliJ 21.1.2
- MySQL Workbench
- Visual Studio Code 1.58
- MobaXterm

💬 서비스 요약

함께 지구별에서 같이 살아가는 친구들의 지킴이가 되어주세요.

여러분은 환경과 동물에 대해 얼마나 알고 계신가요?

반 세기(50년) 간 지구의 70%의 동물들이 이미 사라졌거나, 곧 사라질 위기에 처해있습니다.
인간만이 살아갈 수 없는 이 지구를 지키고, 한 번 더 생각할 수 있는 세이퍼스의 가상세계에 초대합니다.

이제는 더 이상 보기 힘든 동물 친구들과 반갑게 인사도 하고, 답답한 일상에서 벗어나보세요.

🏃🏻‍♀️ 진행

프로젝트 기간 : 2021-10-11 ~ 2021-11-30 (총 7주)

기획

브레인스토밍 - 공통적으로 희망하는 주제 찾기
확실히, 따듯한 주제로 진행하길 원해서 그런지 모든 팀원들의 주제 아이디어가 “동물보호”, “환경보호”, “장애 도움” 등의 다양한 주제가 나오게 되었습니다.

보이면 느껴지시는 것처럼, 이전의 브레인스토밍보다 훨씬 체계적으로 진행하게 되었습니다.
확실히 다들 세번째 프로젝트라 그런지 정리하고 전달함에 있어서 엄청난 속도감을 보여주었어요.
이렇게 진행하다보니 확인할 수 있었던 점이 많은 팀원이 메타버스내지는 AR과 같은 신기술을 많이 사용하고 싶어했습니다.

하지만, 그냥 메타버스를 구현하기엔 위험한 것들이 많았습니다.
제일 걱정된 것은 러닝커브 ! 실제로 팀 내에서 Unity를 경험해본 사람은 한 명 뿐이였고, 미션 등의 아이디어를 구현하기 위해서는 게임 기획을 해야하는 점이 가장 걱정되었습니다.

두번째는 프론트엔드 포지션의 업무량! 저희는 아무래도 포트폴리오를 위한 프로젝트를 개발하기에 기술적으로 어필할만한 내용을 하기엔 어렵다는 것이였습니다.

하지만, 페어 프로그래밍과 기술을 메인으로 구현해줄 팀원을 주축으로 러닝커브를 해결하고,
스스로 디자인 시스템과 컴포넌트의 체계화로 클린 코드로 진행하기로 하며 빠르게 해결되었습니다.
그렇게 저희는 메타버스와 멸종(위기)동물을 기반으로 한 환경 미션으로 확정지었습니다.
주제 상세 기획 - 아이디어 상세에 따른 요구명세서
아이디어도 상세하게 가는 단계는 더욱 꼼꼼했습니다.
기술적으로 하고 싶은 내용과 기능적으로 하고 싶은 내용을 모두 기재해 팀 회의를 통해 우선 선택/보류/후순위 등을 잡았습니다.
훨씬 더 꼼꼼하게 선정할 수 있었고, 팀원들과의 소통도 활발했습니다.
이렇게 아이디어를 정한 후에 요구조건을 작성하기 시작했습니다.

특히 신경쓴거는 게임요소가 들어가 있으나, 동물보호/환경보호가 흥미롭거나 재미있는 주제는 아니기에사용자 유입을 위한 콘텐츠도 꼭 필요하다고 생각해서 이러한 기능도 진행하기로 했었습니다.

설계

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

이번 프로젝트는 환상과 비현실이라는 요소를 담아내기 위해서 보라색을 선정했었습니다.
그리고 무려..! 제가 만든 로고가 결정되었다는 것!!! ㅎㅎㅎ

폰트도 여러가지 종류로 진행했어야했는데,
게임 내부에서 진행할 폰트와 웹 상에서 진행할 폰트를 구별하기 위했습니다.
그래도 익숙해져여서인지 빠르게 진행할 수 있었어요 😊
와이어프레임(인데 디자인을 곁드린..) 작성
캬아.. 저희 와이어프레임 엄청나지 않나요?
간단하게만 구상하자했는데 담당하신 팀원분께서 거의 모든걸 다 구현해버리셨답니다. ㅎㅎ 🤞🏻

실제로 웹 부분은 다른 설계처럼 Figma로 쉽게 할 수 있지만,
유니티 부분은 하기 어려워서 직접그리거나 다른 툴을 활용했어요.
이 부분이 가장 시간이 많이 들지 않았나 생각이 듭니다.
1차 동물 선정 및 미션 설계

동물들이 직접 말을 건내면서 진행하는 프로젝트를 위해 멸종 동물을 선정했습니다.

이 기준은 국제자연보전연맹 IUCN(International Union for Conservation of Nature)의 홈페이지를 참고하면서 진행했습니다.
우선적으로 동물을 조사한 이후에 메타버스에 구성할 수 있는 물체가 되는 에셋이 있는지 조사했습니다.
이렇게 진행하며 쉽지만, 재미있고 또 다양하게 수행할 수 있는 미션을 구상했는데요. 이걸 팀원들과 모두 나누어 1차 리스트를 만들었습니다.

어떤 미션을 어떻게 수행하면 좋을지, 그리고 선택형 미션이라면 어떠한 보기가 있는지도 모든 팀원들과 함께 조사했습니다.

최종 동물 선정(에셋 확정) 및 미션(스토리 라인) 설계

기본 후보에서 최대한 가까운 동물들을 모두 설정하면서 수정이 필요하거나 새로 디자인해야하는 동물을을 확인했습니다.
4가지의 종류의 동물이 다시 작업을 해야했고, 이 작업에 앞어 동물의 많은 정보를 제공하기 위해 하나하나 아래처럼 내용을 채워넣었습니다.

혹시라도 수정이 필요할 수 있어서, 정리한 정보의 출처도 링크로 꼭꼭 달아서 팀원들이 모두 작성했습니다.
그리고 수정이 필요한 친구들은 제가 직접 포토샵과 블렌더를 건들이면서 수정했고,
이렇게 구상하였습니다. 정말… ㅠㅠㅠ 너무 힘들었습니다.
3D 모델링에 익숙하지 않아서 직업 어느 위치인지 확인하고 다시 디자인하고, 모양이 다른건 블렌더로 만져가면서 했죠…

이렇게 확정된 어떤 동물이 어떤 미션을 주고 어떤 지역에서 어떤 지역으로 미션을 완성하는지, 그리고 완성하면 어떤 보상이 주어지는지도 설계해야했습니다.
무조건 순서대로 진행하는 미션은 지루함을 유발할 수도 있다고 생각해, 지역마다 병렬적으로 배치해, 총 2가지의 스토리라인으로 진행했습니다.
미션의 상세 데이터
미션은 그냥 하고 마는게 아니고 안에서 상세하게 나누어지죠.

예를 들자면, 10개의 쓰레기를 주어야한다면 쓰레기 각각의 아이디가 필요합니다.
이 아이템은 순서가 있는게 아니라 사용자가 원하는데로 주울 수 있게 해줘야하니까요.
그래서 각 미션마다의 데이터도 상세로 진행했습니다.
이 부분은 Unity 파트를 먼저 개발하기 시작한 팀원 3명이서 나눠서 설계를 했는데,
방금 게임 기획을 처음 본사람이라고 생각하지 못할 정도로 대단했습니다.
팀원들 덕에 자극받아 성장한다는 말도 거짓말은 아니라고 생각합니다.
정말 대단한 사람들이였어요.
미션 대사 설정

무려 30개나 되는 모든 미션의 대사도 퀘스트 시작/진행중/완료의 순서에 따라 모두 직접 작성하였습니다.

대사를 직접짜면서 낯간지러워하던 팀 상황이 아직도 기억에 남네요 ㅋㅋㅋㅋ ㅠㅠㅠㅠ
BGM 설정

가상 공간이니 몰입을 위한 배경음악을 필수였습니다.
심지어 지역마다의 음악을 넘어서 효과음도 설계했는데 우리 팀원들 너무 멋졌어요.
저는 6번의 설계를 혼자 진행한다고 확인하지 못했거든요 ㅠㅠ
비회원 유입용 성격유형검사 설계
회원이 아닌 인원도 즐길 수 있는 콘텐츠가 있었으면 좋겠다는 생각도 했습니다.
동물과 미션 모두 회원의 정보가 있어야만 DB에 저장하면서 진행했기 때문이죠.

또, "환경", "동물보호"같은 무거운 주제로 유입이 적어질 수 있기에,
재미있는 콘텐츠를 사용자가 알아서 홍보하여 서비스 유입의 장벽이 낮아지는 효과를 얻고자 한 것이 바로, 핫한🔥 성격유형 검사 형태로 찾자!!! 였습니다 ㅎㅎ

설정된 스토리에 선택지를 만드는 것도 어렵지만, 그 선택지에 따른 가중치를 두는 것도 어려웠습니다.
또, 결과가 나왔다면 추가로 작업해야하는 것이 바로 결과 화면이겠죠?

저희 동물 리스트가 변동되고, 또 새롭게 디자인됨에 따라 동물 선정도 크게 바뀌게 되었습니다.
1차 동물 선정에 등급 뱃지 보이나요? 작성하다가… 바뀌게 되어서 중단했었습니다 ㅠㅠ

그 다음 진행해야할 사항은 결과 화면에 보여지는 내용들인데, 이는 아래처럼 작성했습니다!

16마리의 모든 동물의 결과를 이렇게 작성해야 했었죠.
그리고 정보 중에 살포시,,, Safers에서 볼 수 있는 친구들을 적어두었습니다 ㅎㅎ
ERD
설계의 양이 엄청난거 보셨죠..? 이 데이터들은 모두 메타데이터로 사전에 이미 있어야했습니다.
따라서 진행하는 ERD를 어떻게 가져갈지, 정보들은 어떻게 확인할지가 중요했었습니다.

하지만 생각보다 단순하죠? 게임의 대사만 Unity에서 관리하고, 나머지는 모두 MySQL에서 관리하기로 했습니다.

공통적인 동물 맵 미션 등의 정보는 모두 공통코드로 묶어서 관리하고, 각각의 해제상태 나 접근 권한 등 역시 Log Table에 존재하는 여부로 확인하기로 했습니다.

이번에 새롭게 도입해본 내용은 DB에 DELETE Method 없이 진행 이였습니다.
그렇기에 User의 상태도 상태코드를 통해 업데이트하는 방향으로 진행했으며,
이렇게 진행했기에 총 누적 사용자를 확인할 수 있었습니다.

물론, 일정 기간이 지나면 파기하는 조건을 달아서 지울 수 있지만, 7주 정도의 짧은 도메인을 받았기에 기획까지만 해두었습니다.
메타데이터
User, Token, Log, Board 외의 모든 Table에 메타데이터가 들어갔습니다.
따라서 확실하고 깔끔한 메타데이터가 정말 중요했죠.
엄청 많은 양은 아니지만, 정리하는데 꽤나 애를 먹었습니다ㅎㅎ
데이터가 언제든 다시 날아가도 복원할 수 있도록, SQL 문으로 작성해두는 방법까지 진행했었습니다.
API 문서 작성
이제는 익숙한 API 문서 역시 후딱 작성했습니다.

사실 실질적인 API의 개수도 많지 않고, 기본적인 User와 Board(게시판)의 api가 끝이였습니다.
다른 프로젝트와의 차이점은 Unity 통신용 api가 별도로 있었다는 점입니다 😊

확인하시면 아시겠지만, 메타버스의 특성 상 사전 설계가 정말 많이 소요되었습니다.
개발이 늦어지니 팀 진도가 괜찮을지 정말 고민도 많이했고,
팀원들과 팀 늦게까지 설계하고 잠들고의 연속이였습니다.

개발

팀장 : 제 의도와는 다르게 SSAFY에서 진행한 모든 프로젝트에서 팀장을 맡아 크게 어렵지는 않았습니다. 다만, 잡다한 일이나 조금 더 큰 규모의 흐름을 정하는 일이 많아졌으며, 설계의 최종을 확인하는 일도 많았습니다. 역시 부족한 파트에 추가적인 개발 역시 저의 몫이였습니다. 큰 불만은 없었지만 조금의 아쉬움을 남았었습니다.
Server - nginx, ssl, mysql 등 : 이전 프로젝트 기간은 서버 배포가 필요없어 해보지 않았는데, 오랜만에 해도 경험이 있다고 정말 뚝딱해버렸습니다. 크게 어려움도 없었고 오류가 발생해도 거뜬히 해결했었습니다. 가장 뿌듯하면서도 경험이 자산이다라는 생각을 많이 한 것같습니다.
CI/CD - Jenkins : 가장 중요한 목표는 Infra 였습니다. 우리 팀의 가장 큰 목표는 Jenkins를 활용해보는 것이고, 팀원과 함께 고민했습니다. Jenkins의 세팅과 설정만 거의 3-4일을 소요한 것같습니다. SSH Key 세팅도 되지 않는 것이 많고, 고장나는 것이 많아 Clean Remove 후 다시 설치하는 날이 반복되었습니다. 거의 1주일 정도 소요해 성공한 그 짜릿함은 아직도 잊지 못하는 것같습니다. 😆 이때의 경험을 잊지 않고 오류를 공유하며 함께 담당했던 팀원이 깔끔히 정리해 공유해주었습니다. 실제로 이 문서는 제가 SSAFY 교육생 이후에도 세팅할 때 참 많은 도움을 받았었습니다.
Unity : 이번 프로젝트에 가장 크게 아쉬운 영역인 것같습니다. 설계와 사전 작업, 데이터까지 모두 참여했지만, 웹쪽 개발에 전력으로 투입되느라 실질적으로 개발하지 못한 것이 정말 아쉬웠습니다. 가장 크게 발생한 오류는 Unity의 한글 지원 문제 였습니다. 한글의 공식적인 지원이 없어 담당한 팀원도 힘들고 그걸 도와주지도 못하는 서로 힘든 상황이 참 많았습니다. 이 외에도 Web과 Unity의 Method Call 같은 내용도 왠만한 구글링은 다해가면서 진행했었습니다. 추가적으로 Unity는 Git이 아닌 Commnity(현재는 Plastic SCM로 불리더라구요)를 활용했었습니다.
Backend : 간단한 API인 만큼 큰 시간이 소요되지 않았습니다. 메타데이터도 크게 잘 정리되었기에, 간단한 확인과 함께 진행할 수 있었죠. 손 쉬운 접근을 위해 Oauth만 적용했었습니다.
Frontend : 이 프로젝트에서 가장 큰 어려움이였습니다. Frontend의 인력이 저를 포함해 2명 뿐이였는데, 팀원과 사전에 정한 컨벤션이 잘 맞춰지지 않아 혼란과 혼돈의 시간이였죠. 결국 밤샘작업을 하거나 혼자 구현한 영역이 많습니다. 하지만, 이 사건을 지나고 다시 한번 컨벤션을 공유하고 확인하며 진행해서 이 이후에는 큰 어려움 없이 진행했습니다. 다만, 초기 사건에 시간을 많이 소요해 복구하는 시간이 길어 더 좋은 퀄리티의 코드를 짜지 못한 것이 아쉬웠습니다.
Machine Learning : 가장 즐거웠던 영역이였습니다. 제가 오로지 혼자 맡아서 진행을 했는데, 이쪽 분야에 관심이 원래 많았던 터라 즐겁게 개발할 수 있었습니다. ML Model을 직접 만드는 사람이 아니기에, 있는 Model을 적재적소에 배치해서 서비스를 구성하는 것을 목표로 삼았던 터라 더 큰 부담 없이 진행했던 것같습니다. 가볍게 분류할 수 있는 모델과 이미지의 Object를 찾아내는 모델까지 미션 수행 확인에 잘 활용했었습니다.

테스트

이번에 조금 달라진 것이 있다면 버그 리포트를 써본 것인데요.
팀원들이 각자 배포버전에서 테스팅을 하면서 오류가 있다면 작성하고, 담당자들이 확인해서 해결했었습니다.

상세하게 확인하면 이렇게 구성했습니다.
위에 설명에도 적었지만, 오류 재현 방법을 필두로 각 담당자들이 원활하게 확인할 수 있도록 진행했습니다.

이 버그 리포트가 분업을 하면서도 빠르게 오류를 해결할 수 있어서 너무 좋았어요.
다음 플젝을 한다면 꼭 다시 할 방법입니다.

배포 및 운영

저희 서비스의 최종 애플리케이션 아키텍쳐입니다.

Jenkins를 통해 배포하고, Unity의 환경을 Web에서 쉽게 이용할 수 있도록 WebGL을 활용해서 진행했습니다.
일부 미션 확인 과정에서 체크하기 위해서 Tensorflow의 다양한 ML 모델을 활용해서 진행했습니다.
메타버스의 개인 공간을 제외한 멀티플레이를 위해서 Photon도 활용하면서, 다양한 구성을 적용해보았습니다.

또, 이 프로젝트를 단순 프로젝트를 넘어서 실제 저희가 참고하고 진행한 단체에게 연락을 드려 사용할 의향이 있는지를 확인했었습니다.

실제 국립생태원에서는 긍정적인 답변을 주셨고, 개발을 한 팀에게는 큰 의미가 있었습니다.
가장 다양한 기술을 사용하면서 경험을 하고 고민을 한 프로젝트 였습니다!

📚 결과

🖥 구동화면

사용자 유입 기능 - 성격유형검사/결과/사진저장/카카오톡 공유
메타버스 멀티플레이 - 1/3/전체인칭, 입퇴장 알림 및 채팅, 리액션 모션
맵 구성 - 초원 인칭별 풍경
미션 수행 - 첫 미션 및 ML 모델 적용 미션

예시로는 초원만 보여드렸지만, 맵은 총 3가지로 숲&초원, 북극&남극, 해안 지역입니다!

바다와 극지방 플레이를 아직 녹화하지 못해서, 차차 하고 있어요 ㅎㅎ (왼쪽 해안, 오른쪽 극지방입니다.)

👩🏻‍💻 회고

목표 달성을 한번 확인해봐야겠죠?

도메인에 제한 없이 원하는 것 구현하기 → 사전 경험이 없던 Unity를 활용해 메타버스를 구현했습니다. 정말 힘들었지만 상상했던 내용을 잘 표현해본 것같아서 즐거웠던 기회였습니다. 능력 좋은 팀원들 덕에 더 넓고 많은 내용을 경험할 수 있어서 정말 감사하다는 이야기를 많이 했었습니다.
자동 배포 적용해보기 → 제 SSAFY 전체에 숙원이였던 Jenkins를 수행할 수 있어서 너무 좋았습니다. 하지만 수동배포를 하고 진행했기 때문에, Jenkins를 더 수월하게 할 수 있었다고 생각합니다. 그 어떤 경험도 불필요한 것이 없더라구요 ㅎㅎ 이 과정에서 같이 고생한 팀원 언니 덕에 포기하지 않고 진행했습니다.
전국 발표 진출하기 → 이는 조금 더 긴 이야기가 될 것같아서 아래로 내리겠습니다.

히히 넵, 반 1등을 넘어 전국 발표로 진출에 입선하게 되었습니다!!!!

정말 가까이에서 심사위원분들과 눈을 마주치며 발표했고, 중간에 장비 오류가 있었는데 속으로는 엄청 당황했지만, 빠르게 대사를 찾아서 쳤던 기억도 납니다 ㅎㅎ

메타버스 쪽으로 나아갈 생각은 지금 당장은 없지만, SSAFY의 지원으로 해볼 수 있는 프로젝트라고 생각합니다.
정말 교보재 비용으로 꽤나 사용하면서 하고싶은 개발을 해보아서 이쪽 주제로는 아쉬움이나 후회는 없네요!
즐겁고 좋은 경험이고, 결과물도 마음에 들었던 그런 프로젝트였습니다!