058 프로젝트

Safers 세이퍼스

멸종위기 동물과 환경 문제를 메타버스로 풀어낸 자율 프로젝트

멸종위기 동물과 환경 문제를 메타버스 안에서 체험하고 학습하도록 만든 SSAFY 5기 자율 프로젝트입니다.

  • SSAFY 5기 자율프로젝트
  • Unity 기반 지구치유 메타버스 서비스
  • Backend, CI/CD, ML 미션 판별 기여
  • 자율프로젝트 수상으로 연결
01

Safers는 멸종되었거나 멸종위기에 처한 동물을 메타버스 안에서 만나고, 환경 문제를 미션으로 해결하며 학습하도록 만든 지구치유 메타버스 프로젝트입니다. 사용자는 캐릭터로 가상세계에 입장하고, 동물 도감과 미션, 커뮤니티, 성격유형검사 기반 동물 매칭을 경험할 수 있습니다.

02

언어

Java

8

OpenJDK Zulu 8.33.0.1 기반

백엔드/API

Spring Boot

2.5.6

JPA, Spring Security, Swagger 기반 API

프론트엔드

Vue

2.6.14

Vuex 3.6.2, Vue Router 3.5.2 기반

HTML/CSS/JavaScript

ES6

Bootstrap 5.1.3 기반 화면 구성

데이터베이스

MySQL

8.0.22

회원, 동물, 미션, 로그, 설문 데이터 관리

인프라

AWS EC2 / AWS S3

서비스 배포와 이미지 저장 연동

Jenkins / nginx

Jenkins 2.303.2 / nginx 1.18.0

Ubuntu 20.04 기반 CI/CD와 웹 서버 구성

플랫폼

Unity / Photon

Unity 2019.4.32f1 / Photon 2.38

WebGL 2.0 기반 메타버스와 실시간 접속 흐름

프레임워크

TensorFlow

3.11.0

Teachable Machine Image 0.8.5, MobileNet 2.1.0 기반 이미지 미션 판별

03
  • Backend, Frontend, Infra, ML 1명 - 당현아, 팀장
  • Frontend 1명 - 웹 프론트엔드 담당
  • Backend, Frontend, Infra, Unity 1명 - 웹/서버/Unity 연동 담당
  • Backend, Infra, Unity 1명 - 서버와 Unity 담당
  • Backend, Unity 1명 - 서버와 Unity 담당
04

SSAFY 5기 자율프로젝트로 6주 동안 진행했습니다. 처음부터 사회기여적인 주제를 해보고 싶은 인원들이 모였고, 그중에서도 팀원들이 관심을 가진 멸종위기 동물과 환경 문제를 주제로 선택했습니다. 코로나19 이후 메타버스와 비대면 콘텐츠가 주목받던 흐름 속에서, 문제를 무겁게만 전달하기보다 직접 체험하고 기억할 수 있는 서비스로 풀어보고자 했습니다. 단순 시연용 주제로 끝내지 않기 위해 국립생태원과 IUCN에 문의·소통하며 실제 운영 가능성도 함께 검토했습니다.

05

Kakao 로그인과 회원 관리, 캐릭터 설정, Unity 기반 공통채널과 개인 가상세계, 게시판과 댓글/좋아요, 동물 도감, 미션 수행 로그, 비회원 성격유형검사, 이미지 기반 미션 판별을 구현했습니다. Unity WebGL을 웹 서비스에 연결하고, AWS EC2와 Jenkins, nginx 기반으로 배포했습니다.

06
  • 팀장으로 전체 일정, 역할 분배, 문서화, 최종 발표를 조율했습니다.
  • 팀원별 상황에 따라 필수 구현 범위를 다시 나누고, 비는 영역은 직접 맡아 일정 리스크를 줄였습니다.
  • 백엔드 엔티티와 공통코드, 회원·동물·맵·미션·로그·설문 데이터 구조를 설계하고 구현했습니다.
  • Unity 메타버스에서 사용할 동물, 맵, 미션 로그 데이터를 API와 DB 구조로 연결했습니다.
  • AWS EC2, Jenkins, nginx 기반 CI/CD와 배포 흐름을 구성했습니다.
  • 로그인 전에도 서비스를 홍보할 수 있도록 비회원 성격유형검사와 동물 매칭 흐름을 추가 설계했습니다.
  • 국립생태원과 IUCN에 문의하며 주제 신뢰도와 서비스 운영 가능성을 검토했습니다.
  • TensorFlow.js와 Teachable Machine을 활용해 이미지 미션 판별 기능을 학습하고 적용했습니다.
  • Photon 세팅과 Unity 에셋 디자인 방향을 팀원들과 함께 맞췄습니다.
07
  • 팀 총괄
  • Backend 엔티티, Repository, Service, Controller 구현
  • 공통코드와 미션/동물/맵/로그 데이터 구조 설계
  • 비회원 성격유형검사와 결과 API 구현
  • 게시판과 마이페이지 일부 화면, 회원 검증 UI 구현
  • 이미지 미션 판별 ML 적용
  • AWS EC2, Jenkins, nginx 기반 배포
  • Photon 세팅과 Unity 에셋 디자인 협업
  • 프로젝트 문서화와 README/Wiki 정리
  • 최종 발표
08
  • Spring Boot와 JPA로 회원, 게시판, 공통코드, 동물, 맵, 미션, 로그, 설문 데이터를 관리했습니다.
  • Vue 기반으로 게시판, 마이페이지, 설문 결과, Unity WebGL 연결 화면을 구성했습니다.
  • Unity 담당자들과 Photon 세팅, 웹/서버 데이터 연동, 에셋 디자인 방향을 함께 맞췄습니다.
  • TensorFlow.js, MobileNet, Teachable Machine으로 업로드 이미지가 미션 조건에 맞는지 판별했습니다.
  • AWS EC2, Jenkins, nginx를 활용해 배포와 CI/CD 흐름을 구성했습니다.
09
  • 웹, 백엔드, Unity, ML, 인프라가 모두 연결되어 서비스 경계가 넓었습니다.
  • 팀원 모두 Unity 경험이 없어 메타버스 상태와 서버 데이터를 연결하는 기준을 함께 학습해야 했습니다.
  • 프로젝트 후반 팀원별 집중도와 일정 차이로 업무 배분과 소통을 다시 조정해야 했습니다.
  • 이미지 미션 판별을 사용자 흐름 안에 자연스럽게 넣고, 짧은 기간 안에 배포 안정성까지 맞춰야 했습니다.
  • 요구사항, ERD, API Docs, 메타데이터, 미션 콘텐츠, 버그 리포트를 문서화해 팀 기준을 맞췄습니다.
10
  • SSAFY 5기 자율프로젝트에서 반 1등을 기록했고, 전국 최상위 8개 프로젝트에 선정되어 입선했습니다.
  • Unity를 처음 다루는 팀이었지만 메타버스 서비스 형태로 끝까지 완성했습니다.
  • 커뮤니티, 미션, 동물 도감, 성격유형검사, 이미지 판별 기능을 하나의 흐름에 섞어볼 수 있었습니다.
  • 로그인 기능의 진입 장벽을 줄이기 위해 추가한 비회원 성격유형검사와 동물 매칭 흐름이 좋은 반응을 얻었습니다.
  • 팀장으로서 기획, 개발, 배포, 발표까지 넓게 조율하며 메타버스와 AI/ML을 서비스에 붙여본 프로젝트로 남았습니다.