Pawly

SSAFY 자율 PJT

---

🗓️프로젝트 진행 기간

2024-10-14 ~ 2024-11-19 (약 6주)

---

📑주제

AR기반 롤링페이퍼 서비스

---

📽️  UCC

---

❤️  팀원 소개

---

🎁  프로젝트 기획

🎉  기획 배경

자율 프로젝트는 3번의 프로젝트 중 마지막이면서, 2학기뿐만 아니라 싸피(SSAFY) 1년 과정의 마지막이기도 합니다. 스스로를 돌아보고, 함께 했던 동료들에게도 인사말과 함께 서로를 추억했으면 좋겠다는 생각을 했습니다.

---

👊  주요 기능

---

🖥️  서비스 화면

회원가입	메인화면	친구검색 & 신청
친구	AR우체통	롤링페이퍼 작성
편지쓰기	편지함	마이페이지
도감	도전과제

---

관리자페이지

---

🧱 설계

🧭 ERD

---

🧶 API

회원관리

---

친구, 관리자, 검색

---

우체통, 롤링페이퍼, 포스트잇

---

편지

---

이스터에그, 도감, 알림

---

기술스택

---

🧳 컨벤션

깃랩 커밋 & 이슈 사용

라벨

• ✨ Feat : 새로운 기능의 개발
• 🔧 Fix : bug fix, refactoring
• 📐 Chore : 개발환경 세팅, 문서 작성, 배포 이슈
• 📣 Merge : branch merge, pull request
• 🙏 Request : FE 혹은 BE 팀에게 요청할 내용, 급한 버그 사항 등록

이슈 컨벤션

• 이슈 단위는 너무 크지 않고 적당하게

이슈 제목 작성 규칙

[FE or BE/라벨 종류(이모지 없이)] 알아보기 쉽게 제목 작성

ex) [FE/Feat] 포스트 업로드 버튼 디자인

• label 설정
• assigneess 설정

이슈 템플릿

## 📔 Description

<!-- 왜 이슈를 열었는가 -->

## 🐈 Todo

<!-- 무엇을 할 것인가를 체크박스로 만들고 작업이 끝날 때마다 체크하면서 진행 -->

- [ ] todo1

etc…

• 이슈를 자동으로 닫기 위해서는 close 키워드 추가
• 브랜치 생성은 반드시 이슈를 기반으로 생성

커밋 컨벤션

커밋 메시지 작성 규칙

fe & be/커밋 종류: 작업 요약 (ing) -> 작업이 덜 끝났을 때에만 쓰에요

주요 변경 내용1
 - 주요 변경 내용1 에 대한 세부 사항 // 필수 아님

주요 변경 내용n
 - 주요 변경 내용n 에 대한 세부 사항
 
#이슈번호

# ----- 예시 ------ #
############################
fe/feat: post upload btn design
 
포스트 업로드 버튼 디자인
 - 로직 미완성, 단순 디자인
#3

단, merge request 는 좀 다름

[MR]: #source이슈 번호 -> target 브랜치

ex) [MR]: #10 -> fe 

머지 리퀘스트 컨벤션

머지 리퀘스트 제목 작성 규칙

[FE or BE/관련 이슈 종류(이모지 없이)/#관련이슈번호1, #관련이슈번호2] 제목

ex) [FE/Feat/#10] 포스트 업로드 버튼 디자인

• reviewer 설정
  • reviewer 는 mr 을 작성하는 본인 제외 파트 팀원 전부
  • 모두에게 review 를 받고 수정사항이 필요하다면 수정이 이루어진 후에야 merge 가능
• assigneess 설정
  • mr 을 작성하는 본인 혹은 해당 작업에 투입된 파트원들 전부

mr 내에서 merge 수행 시 커밋 네이밍

[MR]: #source이슈 번호 -> target 브랜치 

ex) [MR]: #51 -> be

머지 리퀘스트 템플릿

• 반드시 상세하게 적어주세요
• 머지 리퀘스트는 본인이 해당 이슈들에서 작업했던 내용들을 기록하는 공간으로 정리가 안되면 파트원들이

## 🥥 Contents

뭐뭐 하도록 수정했습니다.

code block

<!--
코드, 개발 관점에서 어떤걸 고쳤는지 상세하게
사진같은걸 넣어도 된다.
pr 보는 사람이 따로 정보를 안 찾아봐도 되게 적는게 이상적
-->

## 📸 Screenshot

<!-- 움짤을 넣어주는게 가장 좋고, 웬만하면 용량을 작게 만든다. -->

## ⚓ Related Issue

<!-- 이슈 번호를 적어주면 되고, close 같은 자동 닫힘을 등록하여도 된다. -->

## 📚 Reference

<!-- 자신이 참조한 정보의 출처를 적는다. -->

☑️ 브랜치 양식

---

브랜치 컨벤션(GIT FLOW)

- master : 완성되어 배포, 서비스 제공이 가능한 브랜치
- develop : 개발 사항 통합 브랜치, 배포를 위한 테스트 진행 직전
- feature : 각 개발자들이 개발을 위해 develop 으로부터 파생시킨 브랜치
- release : 도메인 단위로 개발이 되면 develop 으로부터 파생되어 테스트 진행, 문제가 발생하면 해결 후 develop 과 master 로 흡수
- hotfix : 테스트가 완료되어 배포된 master 에서 문제가 발생할 시 hotfix 브랜치를 열어 빠르게 수정

• 기본적으로 feature/fe or be:적던대로-적으면됨 으로 시작하는 브랜치에서 개발
• 개발이 마무리되면 develop 브랜치로 merge request
  • develop 으로 올리 때 squash 합시다
• 특정 개발 범위 단위(도메인)로 개발이 완료되면 develop 으로부터 release 브랜치 따와서 테스트 진행
• 수정과 테스트가 완료되면 develop 과 master 로
• master 에서 최신본 배포
• 만약 배포 상황에서 문제가 발생하면 hotfix 브랜치를 열어서 수정

브랜치 이름 작성 규칙

기존 사항 -> 태그 종류(이모지 없이)/이슈 번호-소문자-소문자-소문자...
변경 사항은 아래 예시로

ex) 
feature - feature/frontend or backend/10-post-upload-button-design
release - release
hotfix - hotfix/13-api-url-fix

🧶 개인 회고

김종덕

Pawly 프로젝트를 통해 Spring Boot와 JPA를 이용한 백엔드 시스템을 구현하는 데 많은 경험을 쌓을 수 있었습니다. 특히, 유기적으로 연결되어 있는 포스트잇, 롤링페이퍼, 포스트박스 도메인의 API 설계, 비즈니스 로직 처리, 데이터베이스 연동 등을 구현하면서 효율적인 데이터 처리 방식과 성능 최적화에 대해 배울 수 있었습니다. 예를 들어, 포스트박스 조회 시 쿼리가 나가는 수를 줄이기 위한 조인 방식을 고려하는 등 최적화 작업을 고민하면서 성능 향상에 기여하려 노력했습니다.

이번 경험을 통해 효율적이고 유연한 시스템을 구축하는 방법에 대해 고민하고 배우는 기회가 되었습니다. 또한, 백엔드와 프론트엔드 간의 소통의 중요성을 깨닫게 되었습니다. API 명세서 최신화의 중요성을 인식하며, 소통을 통해 어떤 문제가 어디에서 발생했는지 빠르게 발견할 수 있다는 점을 배웠습니다. 이는 프로젝트 진행 중 발생할 수 있는 문제를 미리 예방하고 해결하는 데 큰 도움이 되었습니다.

---

신혜민

이 프로젝트는 싸피의 마지막 프로젝트로, 지금까지 배운 지식들을 다시 한번 돌아볼 수 있는 소중한 기회였습니다. 약 5주라는 짧은 기간 동안 프로젝트를 진행하며 기획부터 개발까지 빠르게 진행해야 했고, 마지막이라는 생각에 더 좋은 퀄리티의 코드를 작성하고자 최선을 다했습니다. 결과적으로 프로젝트를 성공적으로 마무리했으며, 짧은 기간 안에서도 의미 있는 결과를 만들어낼 수 있다는 자신감을 얻을 수 있었습니다.

특히, Spring Boot와 JPA를 활용하며 백엔드 개발 능력을 한층 더 향상시킬 수 있었습니다. 도전 과제와 알림 기능을 구현하는 과정에서 여러 도메인을 하나의 코드 내에서 관리해야 했고, 이를 효율적으로 처리하기 위해 많은 고민을 했습니다. 이 경험은 도메인 간의 관계를 더욱 명확히 이해하고, 더 나은 코드 작성 방법을 익히는 데 큰 도움이 되었습니다.

또한, 코드 분리에 대해 깊이 고민하며, 메서드가 하나의 기능만 수행하도록 설계하는 데 중점을 두었습니다. 이전부터 중요하게 여겼던 Exception 처리는 이번 프로젝트에서 공통 응답 방식을 적용하여 체계적으로 관리할 수 있었습니다. 예외와 리턴을 구분할 때는 사용자 경험을 고려했으며, 사용자가 로그인을 하지 않은 경우와 같은 주요 상황은 예외로 처리하고, 찾을 수 없는 ID와 같은 세부적인 문제는 리턴으로 처리했습니다. 이러한 과정을 통해 Exception 처리와 에러 관리에 대한 이해도를 한층 더 높일 수 있었습니다.

---

박민준

이번 프로젝트는 처음으로 CI/CD 파이프라인 구축부터 사용자 로그인 기능까지 다양한 기술 스택과 개념을 익히고 이를 실제 서비스에 적용한 소중한 경험이었습니다. 특히, Spring Security와 JWT 기반 인증 시스템 설계, 그리고 소셜 로그인 기능 통합을 통해 편리하고 안전한 사용자 인증 환경을 제공하는 데 집중했습니다. 이 과정에서 인증 및 보안의 원리를 깊이 이해하고, 서비스 운영에 필요한 기술적 감각을 키울 수 있었습니다.

AR 롤링페이퍼 서비스의 핵심 아이디어는 AR 기술을 활용해 사용자 간 정서적 연결을 강화하고, 단순 메시지 교환 이상의 특별한 경험을 제공하는 것이었습니다. 사용자는 AR 기술로 메시지가 떠오르는 독창적인 인터페이스를 통해 롤링페이퍼를 작성하고, 이를 익명으로 전달하거나 친구와 교환할 수 있었습니다. 또한, 메시지를 주고받으며 고유한 캐릭터를 수집할 수 있는 보상 시스템을 설계해 사용자의 지속적인 참여를 유도했습니다. 이러한 기능은 서비스에 대한 몰입감을 높이고, 사용자 경험을 차별화하는 데 기여했습니다.

주요 성과 및 배운 점

1. JWT 및 소셜 로그인 통합

   • Spring Security와 JWT 기반 인증 시스템을 구축해 안전하고 확장 가능한 구조를 구현했습니다.
   • Google, Kakao 등 다양한 소셜 로그인 기능을 추가해 사용자 편의성을 강화했습니다.
   • OAuth2.0 인증 흐름을 학습하고 이를 단일 API로 통합했으며, JWT 토큰 재발급 및 만료 처리로 보안을 강화했습니다.

2. CI/CD 구축 및 무중단 배포

   • Jenkins와 Docker를 활용해 빌드 및 배포 자동화 파이프라인을 구축했습니다.
   • Nginx를 사용한 로드 밸런싱 및 HTTPS 설정을 통해 안정성을 확보했습니다.
   • 무중단 배포를 구현해 서비스 이용 중단 없이 개선 작업을 진행할 수 있었습니다.

3. 효율적인 데이터 설계 및 최적화

   • 익명 메시지와 사용자 데이터를 안전하게 관리하기 위해 비식별화 및 암호화 방식을 적용했습니다.
   • JPA를 활용해 가독성과 유지보수성을 고려한 데이터베이스 설계와 API 최적화를 수행했습니다.
   • 클라이언트 요청에 필요한 데이터만 반환하는 RESTful API를 설계해 통신 효율성을 높였습니다.

4. 기획부터 배포까지의 전체 경험

   • 프로젝트 기획, 서버 설계, API 개발, 배포까지 모든 과정을 직접 경험하며 서비스 개발의 전반적인 흐름을 체감했습니다.
   • 기술적 난관에 직면할 때마다 팀원들과 협업하며 문제를 해결하고, 새로운 기술을 빠르게 학습해 적용했습니다.

회고 및 앞으로의 방향

이번 프로젝트는 기술 선택의 중요성과 백엔드 아키텍처 설계의 복잡성을 이해하는 데 큰 도움을 주었습니다. 특히, 보안, 확장성, 안정성을 고려한 백엔드 시스템 설계와 최적화의 중요성을 깊이 깨달았습니다. 앞으로 이러한 경험을 바탕으로 더욱 효율적이고 안정적인 시스템을 설계하고, 사용자 중심의 서비스를 개발하는 데 기여하고자 합니다.

이번 프로젝트는 기술적으로 성장할 수 있는 발판이자, 협업과 사용자 경험 설계의 중요성을 되새기는 계기가 되었습니다.

---

허세령

싸피에서의 마지막 프로젝트를 재미있는 주제로 즐겁게 개발할 수 있어서 기쁩니다. 이전 공통 및 특화 프로젝트에서도 프론트엔드를 맡아 React를 사용했지만, 이번 프로젝트에서는 롤링페이퍼라는 주제 특성 상 모바일에서 편하게 사용할 수 있도록 PWA 기술을 활용했습니다. PWA를 통해 네이티브 앱 개발보다 간편하게 모바일 앱을 구현할 수 있었습니다.

프론트엔드에서 JWT와 소셜 로그인 연동 작업을 맡아, 로그인 요청 시 백엔드에서 발급된 JWT를 클라이언트에 저장하고, 이후 인증이 필요한 요청마다 해당 토큰을 HTTP 헤더에 포함시켜 서버와 통신하는 구조를 구현했습니다. 또한, 토큰 만료 시 갱신 과정을 설계하며 accessToken과 refreshToken을 활용한 Authorization 흐름을 이해할 수 있었습니다.

다만, 네이티브 앱과 비교해 호환성이 부족한 점은 아쉬움으로 남았습니다. 또, 줄어든 프로젝트 기간에 개인적으로 완성도 있는 코드를 작성하지 못한 것이 아쉬워, 프로젝트 후에도 최적화된 코드를 위해 상태관리, 코드 가독성을 위한 컴포넌트 분리 등의 리팩토링을 진행했습니다. 앞으로도 이를 보완하기 위해 다양한 기술과 코드에 대해서 꾸준하게 탐구하며 더 완성도 높은 프로젝트를 개발하고 싶습니다.

---

남은식

이번 프로젝트를 진행하면서 처음 계획했던 것보다 훨씬 더 귀여운 서비스를 완성할 수 있어 기쁘게 생각합니다. 특히 테스트를 진행할 때 다른 조원들이 보여준 긍정적인 반응은 큰 동기부여가 되었습니다. 우리가 만든 서비스를 사람들이 즐겁게 이용하고 만족하는 모습을 상상하니 보람과 성취감을 느낄 수 있었습니다. 부족한 점도 많았지만 이번 경험은 앞으로의 성장에 큰 자산이 될 것 같습니다.

이번 프로젝트에서는 React, TypeScript, 그리고 PWA기술을 사용했습니다. 제가 이들 기술에 초보자 수준이라 처음에는 조금 막막했지만, 프로젝트를 진행하며 많은 것을 배울 수 있었습니다. React를 통해 컴포넌트를 설계하고 상태 관리를 배우며 사용자 인터페이스를 효율적으로 구성하는 방법을 익혔고, TypeScript를 활용해 코드의 안정성을 높이고 실수를 줄이는 방법을 체감할 수 있었습니다. 또한, PWA를 구현하면서 웹앱을 더 빠르고 유연하게 만들 수 있는 기술적 가능성에 대해 알게 되었고, 이를 통해 사용자 경험을 개선할 수 있음을 배웠습니다.

기술을 익히는 과정에서 시행착오도 있었지만, 이를 통해 새로운 지식과 문제 해결 능력을 기를 수 있었습니다. 이번 프로젝트를 통해 배운 것들을 바탕으로 앞으로 더 나은 서비스를 만들기 위해 노력할 것입니다. 함께 프로젝트를 진행한 조원들과의 협업도 큰 도움이 되었으며, 이를 통해 팀워크의 중요성을 다시 한번 느꼈습니다.

---

최형우

이번 프로젝트는 이전보다 전반적인 구조에 대해 깊이 고민하며 진행한 작업이었습니다. API 호출을 최소화하고, 사용자 경험을 향상시키기 위해 선반영 후전송 방식을 도입했습니다. 또한, 다양한 기기에서 일관되고 만족스러운 사용감을 제공하기 위해 레이아웃과 해상도 최적화에 많은 노력을 기울였습니다.

특히, 야심 차게 AR 기능을 도입하려는 시도를 해봤지만 이 과정에서 PWA의 한계를 실감하게 되었습니다. 네이티브 환경과 달리 PWA는 AR 구현에서 기술적 제약이 있었고, 이러한 어려움은 앞으로의 방향성을 재고하는 계기가 되었습니다.

이번 프로젝트는 기술적 도전뿐 아니라 사용자 경험을 중심에 둔 설계의 중요성을 다시금 깨닫게 해 준 소중한 경험이었습니다.

---