🐮 So Be it : 공유형 지출 관리 웹 서비스

2023.05.02 ~ 2023.05.31

Result

• KB 국민은행 IT 아카데미 IT’s Your Life 3 기 최우수 프로젝트상
• 시연 영상

Members

이름	김원우	길민지	박상희	박예린	박찬욱
역할	팀장, 풀 스택	풀 스택	서기, 풀 스택	풀 스택	풀 스택
세부 역할 (Backend)	· DB 설계 · SMS · 알림 · 무한 스크롤 페이지네이션	· 게시글 · 통계	· DB 설계 · 사용자 인증 및 인가 · 댓글	· 프로필 · 팔로잉/팔로워 · 도전 과제 · 인기 게시글	· 검색 · 도전 과제
세부 역할 (Frontend)	· 피드 글 작성 폼 · 피드 무한 스크롤 · 게시글 검색	· 게시글 · 상세 게시글 · 통계 · 도전 과제	· 사용자 인증 및 인가 · 알림 · 팔로잉/팔로워 · 사용자 검색	· 메뉴 바 · 사이드 바	· 프로필 · 도전 과제

Stack

Environment

Back-End

Front-End

Collaboration Tool

Introduction

MZ 세대가 갖고 있는 잘못된 소비 습관, 카카오톡 오픈 채팅방에서 익명으로 지출을 줄이고자 소비 생활을 공유하는 ‘거지방’ 유행 상황에서 MZ 세대의 올바른 소비 습관 형성을 돕는 공유형 지출 관리 웹 서비스 ‘So Be it’ 을 기획하게 되었다.

프로젝트 개발을 진행하기 전, 서비스 기획 전반에 대한 설문을 진행했다.
설문 응답자는 모두 20 대와 30 대로 MZ 세대에 해당했으며, ‘귀찮음’ 과 ‘꾸준히 작성하기 어려움’ 순으로 지출을 정기적으로 기록하지 않는다고 응답한 이유를 꼽았다.
거지방 사용 경험이 있는 설문 응답자는 ‘지출 내역 관리 어려움’, ‘거지방 인원 수의 제한’ 순으로 거지방의 단점을 꼽았다.

이러한 설문 조사 결과를 바탕으로 사용하기 간단하면서도 흥미를 유발하여 자주 이용할 수 있고, 지출을 기록하거나 지출을 허락받음으로써 소비 습관을 개선하고 소통할 수 있는 SNS 기반 지출 관리 서비스를 MZ 세대를 타겟으로 개발했다.

‘So Be it’ 서비스의 특장점은 위와 같으며 해당 서비스를 사용함으로써 다음과 같은 효과를 기대할 수 있다.

1. 사람들의 피드백을 통해 지출을 방지함으로써 절약
2. 꾸준한 지출 기록
3. 올바른 소비 습관 형성

Development Process

Structure

ERD

Site Map

Key Functions

회원 가입 및 전화번호 인증

• 회원 가입 시, 아이디 중복을 확인한다.
• 그 후, 사용자의 나머지 정보를 입력하고, Naver Cloud Platform을 이용한 전화번호 인증을 통해 전달받은 인증 번호를 입력하고 회원 가입한다.

로그인

• 아이디와 비밀번호를 입력하여 로그인한다.
• 로그인 시 Spring Security와 JWT를 이용하여 Access Token을 발급받아 세션 스토리지에 저장한다.
• 서버에서 토큰의 유효성을 검사하여 ‘So Be it’ 서비스에 대한 접근을 결정한다.
• 로그아웃 시, 로그인 페이지로 이동한다.

게시글 작성

• 지출을 기록하는 ‘지출 입력’ 과 다른 사용자들에게 지출을 허락받는 ‘결재 받기’ 로 작성할 게시글 타입이 나뉘어져 있다.
• ‘지출 입력’ 타입의 게시글 작성 시, ‘식비’, ‘취미생활’, ‘기타’ 등과 같은 지출 카테고리를 설정할 수 있다.
• ‘지출 입력’ 타입과 ‘결재 받기’ 타입 모두 게시글 작성 시 이미지를 업로드할 수 있다.
  • Amazon S3 Service를 이용하여 이미지 업로드 기능을 구현했다.
• 게시글을 게시할 때, 공개 범위를 ‘전체공개’, ‘맞팔공개’, ‘비공개’ 로 설정할 수 있다.

무한 스크롤을 이용한 조회

• ‘Home’ 페이지의 피드에 무한 스크롤을 적용하여 스크롤을 내릴 때마다 조회하지 않은 게시글이 있을 경우, 최신순으로 계속해서 게시글을 보여 준다.
• 무한 스크롤은 피드뿐만 아니라 프로필에서 해당 사용자가 작성한 게시글을 확인할 때도 작동한다.
• 프론트엔드에서는 React Intersection Observer API를 사용했고, 백엔드에서는 Cursor 기반 JPA Pagination을 구현해서 페이징 처리를 했다.

팔로우와 알림 및 소통

• 사용자들의 원활한 소통을 위해 기본적인 SNS 서비스인 팔로우, 언팔로우, 알림 기능도 제공한다.
• 사용자의 프로필에서 해당 사용자의 팔로잉과 팔로워 수를 확인할 수 있으며 팔로우와 언팔로우가 가능하다.
• 알림의 종류에는 게시글 좋아요 알림, 댓글 알림, 댓글 좋아요 알림, 팔로우 알림이 있다.

통계

• 지출 내역 탭 메뉴에서 사용자가 작성한 지출 내역을 월별로 확인할 수 있다.
• Nivo를 이용하여 사용자가 입력한 지출을 카테고리별로 볼 수 있도록 차트를 구현했다.
• React Calendar를 이용하여 캘린더를 구현했으며, 캘린더에서 일자별로 사용자가 돈을 얼마나 소비했는지 볼 수 있다.