졸업 프로젝트

[SSOP] 졸업 프로젝트 회고록 | 1020 MZ 세대들의 자기소개를 도와주는 앱 서비스

yyyujinnn 2025. 1. 6. 01:15

2024년 3월 ~ 12월

앱의 기획부터 개발, 배포까지 모두 함께했던 내새끼다.

 

기존 프로젝트에서 나는 프론트엔드 개발자로서 역량을 쌓아왔지만,

이번 프로젝트에서는 백엔드 개발자가 없는 관계로

개발자 4명이서 ERD 설계, 백엔드 개발, 프론트엔드 개발, 배포까지 모두 진행하게 되었다.

 

우리 앱 'SSOP'은 1020 MZ 세대들을 위한 자기소개 도움 플랫폼으로써,

나를 소개하는 프로필 카드를 제작하고 공유할 수 있다.

 

요즘 한 사람임에도 다양한 페르소나를 가지고 있는 경우가 많기 때문에

이러한 서비스를 기획했다.

 

프로젝트 진행 일정

 

3-4月 기획

5-6月 와이어프레임 프론트엔드 개발

7月 백엔드 - 인프런 강의 수강

8月 백엔드 - API 설계

9-10月 GUI 개발 및 API 연결

11月 추가 파트 분배 및 프론트엔드 & 백엔드 개발

12月 QA 진행 및 졸업 전시를 위한 앱 마무리 개발

 

카드 제작


학생 / 직장인 / 팬 페르소나 템플릿을 제공하며, 믹스 템플릿으로 카드를 제작할 수 있다.

 

카드 앞면에는 나를 표현하는 이미지 (아바타⭐/ 사진)을 선택하여 만들 수 있고, 주요 정보가 있다.

카드 뒷면에는 입력한 정보들이 위치해 있다. 

 

우리 앱의 포인트 아바타 커스터마이징⭐

제작한 카드는 다양한 방법으로 다른 사람들에게 공유할 수 있다

 

카드 공유 (1) QR 공유 ⭐developed by me

 

나에게 연락처가 없는 상대일지라도 SSOP 앱 사용자라면,

카드를 공유하고 상대 기기에서 바로 저장할 수 있어요.

※ SSOP 앱 사용자만 사용 가능

 

제작한 카드의 QR 코드를 생성하고, 그 QR코드를 앱 내의 카메라로 스캔하면

마이스페이스 > 내가 받은 카드 폴더에 바로 저장된다.

 

카드 공유 (2) 링크 공유

 

나에게 연락처가 있는 상대에게 내 카드를 공유할 수 있어요.

※ 모두 사용 가능

 

상대가 SSOP 앱 사용자라면 마이스페이스 > 내가 받은 카드 폴더에 바로 저장된다.

SSOP 앱이 없다면 앱을 다운받을 수 있는 링크로 이동한다.

 

카드 공유 (3) 팀스페이스⭐ developed by me

 

다수의 인원이 있는 모임에게 카드를 공유하고 싶다면 팀스페이스를 생성하고 입장해보세요.

※ SSOP 앱 사용자만 사용 가능

 

호스트가 팀스페이스를 생성하면 팀스페이스 초대 코드 숫자 6자리가 만들어지고,

초대코드를 통해 게스트들도 입장할 수 있다.

 

호스트를 포함해 모든 팀스페이스를 입장한 사람들이 프로필 카드를 제출해야만

팀스페이스에 제출된 카드를 확인할 수 있다.

 

팀스페이스에서는 기존 제작했던 카드를 제출할 수도 있고,

호스트가 지정한 템플릿이 있다면, 그 질문에 맞는 카드를 만들어 제출할 수 있다. ⭐ developed by me

그 외에도 추가 기능이 있다.

팀스페이스 내에서 프로필 카드 필터링 ⭐ developed by me

 

템플릿 / MBTI 을 입력한 카드에 한해서 필터링이 가능하다.

학생 템플릿의 경우,  전공 / 역할 ( ex. 개발자, 디자이너, 기획자 etc) 의 필터도 제공한다 

 

프로필 카드 검색 ⭐ developed by me

 

홈 / 마이스페이스 / 팀스페이스 3군데에서 카드 검색 기능을 제공한다.

 

홈에서 검색한다면, 마이스페이스 / 팀스페이스로 개별 탭이 제공되어

마이스페이스에서는 내가 받은 카드 내에서 검색한 결과를 확인할 수 있으며,

팀스페이스에서는 내가 입장한 팀스페이스의 모든 카드 내에서 검색한 결과를 확인할 수 있다. 

 

내 카드 조회

 

내가 만든 카드를 조회하고 공유할 수 있다.

또한, 나의 정보가 변경되었다면 수정할 수도 있다.

내가 다른 사람에게 공유한 카드를 수정한다면 상대도 수정된 내용으로 보인다.

 

받은 카드 그룹화

 

내가 받은 카드 중에서 원하는 주제의 폴더를 만들어 편리하게 관리할 수 있다.

(ex. 수학과 20 동기)

 

마이페이지

내가 계정을 가입할 때 입력했던 정보를 확인 및 수정할 수 있다.

 

지금까지 내가 이 카테고리에 작성했던 블루투스 기능에 대해 덧붙이자면..

 

1) Bluetooth BLE

   npx expo install react-native-ble-plx

  1. npm install expo-device
  2. expo eject
  3. 블루투스 스캔 후 주변 디바이스 연결

→ 스마트폰과 장치 연결에 최적화 ex) 아이폰 & 에어팟 연결

블루투스 탐색 시, 스마트폰 목록이 뜨지 않음.

 

2) Bluetooth Classic

  npm install react-native-bluetooth-classic

  1. npx expo install expo-build-properties
  2. npm install expo-dev-client
  3. 블루투스 스캔 + 연결 + 데이터 전송 성공

→ 안드로이드 & 아이폰 연결 및 데이터 송수신 가능

but, 안드로이드 & 안드로이드 블루투스 연결 시, 와이파이 꺼야 함.

스캔은 되는데 연결이 안됨.

근데 우리 앱은 와이파이가 있어야만 해서 실패

 

결국, 블루투스 기능 대신 QR 코드 공유 기능을 추가하기로 하였고,

단하루가 지나기도 전에.. QR 코드 기능을 구현하였다.

  1. QR 코드 생성
npm install react-native-qrcode-svg

   

   2. QR코드 스캔

expo install expo-barcode-scanner
import QRCode from 'react-native-qrcode-svg';

import { BarCodeScanner } from 'expo-barcode-scanner';

 

고3 때 보다 열심히 살았던 2024 1년..

새롭게 시작하는 2025년도 화이팅!!