🌟 flip-it (플리빗): flipit.co.kr

👩‍👩‍👧‍👦 R&R

분야	이름	포지션
기획	박가은	PM, 서비스 기획, 와이어프레임 설계, 세부 기능 기획, 유저 리서치
기획	배승우	서비스 기획, 세부 기능 기획, 비즈니스 모델 설계, 정책 작성
기획	유자인	서비스 기획, 세부 기능 기획, 데스크 리서치, 보고서 작성
디자인	권예인	디자인 리드, 디자인 시스템 구축, GUI
디자인	김승은	로고 제작, GUI
프론트엔드	황주희	프론트엔드 리드, GUI 구현, API 연동
프론트엔드	박준형	GUI 구현, API 연동
백엔드	김예찬	백엔드 리드, ERD 작성, 클라우드 환경 구축, 서버 개발
백엔드	장지효	ERD 작성, 클라우드 환경 구축, 서버 개발

서비스 개요

플리빗은 사용자들이 질문과 답변을 통해 서로의 취향과 관심사를 공유하며 깊이 있는 소통을 가능하게 하는 Q&A 플랫폼이다. 이 서비스는 질문하기, 답변하기, 아이덴티티 카테고라이징, 그리고 특별한 피드백 기능인 '통했당'을 통해 사용자 간의 상호작용을 촉진하고, 개인의 아이덴티티를 표현하는 데 중점을 두고 있다.

[질문하기] 사용자는 다른 사람의 취향이나 관심사에 대해 궁금한 점을 질문할 수 있다. 이를 통해 단순화된 소통 시도와 흥미로운 소통 주제를 발견한다.

[답변하기] 사용자는 사진, 텍스트 설명, 음악 미리듣기, 링크 등을 첨부하여 자신의 답변을 게시할 수 있다. 이를 통해 자신의 아이덴티티를 효과적으로 드러낼 수 있다.

[아이덴티티 카테고라이징] 사용자는 자신의 아이덴티티와 관심사를 직접 분류하여 그룹을 생성할 수 있다. 이는 정보를 가시적으로 제공하고, 질문에 대한 답변을 정리하는 피드를 관리하는 데 도움을 준다.

[피드백 기능 ('통했당')] 일반적인 좋아요 기능에 더해, '통했당' 기능은 계정주와 방문자가 서로에 대한 긍정적인 반응을 직접적으로 표현할 수 돕는다. 이를 통해 양방향 소통의 만족도를 높인다.

💡 서비스 차별성

플리빗(Flipit)은 Q&A를 통해 능동적이고도 상호적인 소통을 돕는다. 동시에 익명성 보장, 링크 기반 접속, 질문을 유도하는 UX 라이팅을 장치로 하여 소통 시도에 있어 부담감이 적고, 소통할 물꼬를 틀어주는 효용적 가치를 제공한다.

• 경쟁 서비스인 인스타그램 스토리, 답장, 좋아요에 비하여 상호 소통 방식을 채택

• 단순 Q&A가 아닌, 서로의 취향에 대해 알아가보자는 취지로 좁은 질문 범위 설정

• 상대방의 카테고라이징된 정보를 볼 수 있게 하여 소통의 용이성 증대: 서로의 취향과 관련된 주제에 더욱 집중할 수 있게 하여, 서로 소통할 수 있는 내용을 쉽게 찾고 교류할 수 있는 경험 제공

• 다양한 활용 범위

  

🧐 목표 사용자

인스타그램을 사용하는 사람 중에서 문제와 니즈에 따라 목표 사용자를 두가지로 분류했다.

1. 상대방을 알아가고자 하는 사람 문제&니즈

• 인스타그램 스토리의 소통 기능의 한계로 소재 탐색의 어려움을 경험함.
• 소통시도에 부담감을 느낌
• 불특정 타인의 피드 접속을 통한 개인 정보 노출에 대해 우려를 표함.

2. 자기 표현을 원하는 사람 문제&니즈

• 자기 취향의 더 자유로운 표현을 원함.
• 피드 공개범위를 선택적으로 설정하고자 함.
• 양방향적 소통을 원함

플리빗은 상대방을 더 잘 알아가고자 하는 사람들에게는 쉽고 편한 소통의 창구를, 자기 표현을 원하는 사람들에게는 자신의 아이덴티티와 취향을 자유롭게 표현하고 공유할 수 있는 공간을 제공.

개발 파트

🔍 System Architecture

📜 ERD 설계도

💻 Technology

🖥️ Frontend

📀 Backend

💻 Infra

🚀 CI/CD

🤝🏻 Co-working Tool

기술 스택 선정 이유

📘 Frontend

React

• 빠른 업데이트, 빠른 렌더링
  • Virtual DOM을 통해 빠른 업데이트, 렌더링을 제공하여 성능 최적화
• 코드 재사용성, 유지보수성 ↑
  • 컴포넌트 기반 아키텍처로 이루어져 있어 재사용, 유지보수에 용이
• 다양한 라이브러리와 활발한 커뮤니티
  • 사용량이 많은 만큼, 다양한 문제에 대한 많은 솔루션이 존재
• 크로스 플랫폼(react-native) 앱으로의 확장 가능성

Vite

• 빠른 로컬 서버 구동
  • esbuild로 미리 번들링한 모듈을 필요할 때 가져와 즉각적으로 서버 구동
  • HMR을 지원하여 수정된 모듈만을 교체
• 빠른 프로덕션 빌드
  • 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합. 중복을 제거하기 때문에 가볍고 빠르게 빌드 가능

TypeScript

• 높은 생산성
  • 작업과 동시에 디버깅이 가능해 에러 사전 방지
  • 객체 안의 필드값을 다 기억할 필요없이 IDE가 자동으로 리스트업 해주어 편리
    

Recoil + Axios

• 상태관리의 편리함
  • atom의 상태를 구독, 업데이트하는 방법을 사용하여 간단한 코드만으로 전역 상태 관리 가능
    

StyledComponents

• 컴포넌트 기반 CSS 작성의 편리함
  • jsx 내에 css를 적용할 때 카멜케이스로 작성해야하는 번거로움 없이 css 문법 그대로 사용 가능
• 직관적인 CSS
  • props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적
  • 태그에 의미를 부여하여 직관적으로, 어떤 용도로 사용하는지 파악 가능

FramerMotion

• 쉽게 구현하는 애니메이션, 제스쳐
  • animate props를 통해 CSS transitions를 자동 생성해주어 자주 사용되는 애니메이션을 쉽게 구현 가능

PWA

• 네이티브 앱 수준의 모바일 친화적 웹 개발 가능

📀 Back-end

Spring Boot

• Java 기반의 애플리케이션을 빠르게 구축할 수 있게 도와주는 프레임워크
• 자동 설정, 스타터 패키지, 내장 서버 등을 통해 개발자가 인프라에 신경 쓰지 않고 비즈니스 로직에 집중가능
• 팀원 기술 스택에 맞는 Java 기반의 서버를 구축하기위해 사용

Spring Security

• 인증과 권한 부여를 위한 포괄적인 보안 프레임워크
• JWT 기반의 인증 및 인가를 구현하기위해 사용
• 추후, 인증 및 인가의 확장의 가능성이 있기 때문에, interceptor 대신 Spring Security 사용

JPA

• Java ORM 기술로, MYSQL을 자바에서 관리하기 위해 사용

Gradle

• 빌드 및 의존성 관리 도구로, Maven과 비교하여 더 유연하고 강력한 기능을 제공

Swagger

• API 문서를 자동으로 생성하고, API 엔드포인트를 테스트할 수 있는 인터페이스

JWT

• 사용자 인증에 사용되는 토큰 기반 기술로, 서버와 클라이언트 간의 안전한 정보 교환을 가능
• 서버 Scale-out시에, Session 방식에 비해 확장성이 좋아 JWT 방식으로 인증 및 인가 구현

OAuth2

• 외부 제공자를 통한 인증을 구현하는 데 사용되는 프레임워크
• 사용자 로그인 편의성 및 높은 접근성을 위해 Kakao를 사용

💻 Infra

Server

• 네이버 클라우드에서 제공하는 클라우드 컴퓨팅 서비스
• 서버를 배포하기 위해 사용
• Private Subnet에 실서버 구축 및 Public Subnet에 Test Server 구축
• Test Server를 통해 테스트 환경 구축 및 Bastion Host 기능 수행

Load Balancer

• HTTP 트래픽을 제어하기 위해 Network 7계층의 Application Load Balancer 사용
• AutoScaling 연결로 인한 확장성 증가
• 트래픽을 분산 시키므로, 시스템 가용성 증가

Certificate Manager

• SSL 인증서 발급 받기 위해 사용
• Load Balancer에 연동하여 HTTPS 프로토콜 적용

Global DNS

• Load Balancer 및 Front 배포 서버에 Domain 이름을 적용시키기 위해 사용
• DNSSEC을 적용하여 보안강화하기 위해 사용

Auto Scaling

• 트래픽의 변화에 서버를 탄력적으로 관리 가능
• 서버 scale-out 및 scale-in 자동화
• Launch Configuration을 서버 환경설정 간소화
• Load Balancer 연동을 통한 효과적인 트래픽 분산

VPC

• 클라우드 환경에서 사설 네트워크망을 구축해 안정성 확보
• ACG 및 Network ACL 이중 방화벽을 통한 보안 강화
• 공인 IP 발급을 줄여, 비용 감소
• 내부에 Subnet을 나눠 효율적인 인프라 공간 분리
• Public Subnet엔 Load Balancer, Private Subnet에 서버 및 DB를 구축함으로써, 외부 침입 방어

Nat GateWay

• VPC 내부 Private Subnet의 서버가 하나의 공인 IP를 활용하여 외부 인터넷과 통신할 수 있도록 하는 Gateway
• 스프링 서버내에서 발생하는 API 호출할 때 필요
• 외부에선 트래픽이 들어올 수 없어 보안 강화

Object Storage

• 사용자 피드의 사진 및 파일이 저장되는 저장소
• AWS S3와 연동되어 높은 호환성
• 고가용성으로 인한 시스템 안정성 확보

FireBase

• 사용자에게 실시간 알림을 보내기 위한 기술
• FCM을 통해 사용자에게 푸시 메세지 전송가능

MySQL

• 서버와 연결되는 메인 DB

🚀 CI/CD

GitHub Action

• Github와 연동해 CI-CD 파이프라인 구축
• main -> 실서버 배포 CI-CD
• develop -> 테스트서버 배포 CI-CD
• 그 외 -> Commit & PR시, 자동 빌드 및 테스트 진행

Object Storage

• CI 진행 후, Jar 파일을 압축시켜 Object Storage에 저장
• 파일을 버전별로 나눌 수 있어, 쉽게 Rollback 가능
• AWS S3 CLI와 연동되어, 간편하게 파일 저장 가능

Source Deploy

• Object Storage의 파일을 기반으로 AutoScaling CD 진행
• 배포 스크립트를 통해 Spring 서버 실행
• Auto Scaling Group별로 블루/그린 무중단 배포
• GitHub Action에서 naver signiture v2 방식으로 API 호출가능

Naver Agent

• Source Deploy를 적용하기 위해 꼭 필요한 프로그램
• Server에 자동 스크립트를 적용하여 자동 설치

🔖 Naming Rules

🖥️ Frontend

• Folder: kebab-case
• File: PascalCase
• Component: PascalCase
• Constant: SNAKE_CASE
• Variable: camelCase
• State(atom, recoil): camelCaseState
• Interface
  • props: PascalCaseProps
  • api response: PascalCaseProps

🖥️ Backend

• Package : lowercase
• Class : PascalCase
• Constant : UPPERCASE
• Method : camelCase
• Variables : camelCase

🗂️ Commit Convention

🖥️ Frontend

"[커밋유형] 작업 내용”
EX) [feat] 카카오 로그인 기능 추가

📌 Type

Tag	뜻
feat	새로운 기능 추가
fix	버그 수정
docs	문서 수정
style	코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
refactor	코드 리팩토링
test	테스트 코드, 리팩토링 테스트 코드 추가
chore	패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
design	CSS 등 사용자 UI 디자인 변경
comment	필요한 주석 추가 및 변경
rename	파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
remove	파일을 삭제하는 작업만 수행한 경우
!HOTFIX	급하게 치명적인 버그를 고쳐야 하는 경우
init	프로젝트 생성 후 첫 커밋

🖥️ Backend

커밋유형:커밋 메세지 #(이슈번호)
EX) Feat: 카카오페이 결제 기능 개발 (#13)

📌 Type

Tag	뜻
Feat	새로운 기능 추가
Fix	버그 수정 및 기능 수정
Docs	문서 추가 및 수정
Test	테스트 코드 추가 및 수정
Refactor	코드 리팩토링
Rename	파일 및 폴더명 수정
Remove	파일 삭제
Chore	그 외 자잘한 수정

🐬 Git Flow

• main : 출시 가능한 프로덕션 코드의 브랜치
• develop : 다음 버전을 개발하는 브랜치
• feat : 이슈 단위로 기능을 개발하는 브랜치
  • 브랜치 네이밍 : feat/#이슈번호
• fix : 이슈 단위로 버그를 수정하는 브랜치
  • 브랜치 네이밍: fix/#이슈번호
    
    

< work flow >

백엔드의 경우 CI-CD를 통해 개발 부터 배포까지 자동화를 진행하였으며, 워크플로우는 다음과 같습니다.

main, develop 브랜치

Github Action으로 구현을 하였으며, 깃허브 상에 코드가 push되거나, merge되었을 때, 빌드 및 테스트가 진행이 됩니다. 이 과정이 성공적으로 종료되면 빌드파일을 Object Storage에 저장을 합니다. 이후, Naver Signiture V2 방식을 통해 api 요청으로 Source Deploy에 트리거를 걸어 자동으로 Autoscaling 블루/그린 무중단 배포를 진행합니다.

그 외 브랜치

기능개발을하는 feature 브랜치나, 오류 해결하는 fix 브랜치의 경우, 배포가 필요하지않습니다. 따라서, 깃허브 상에 코드가 push된 경우, 자동 빌드 및 테스트가 진행이 되며, 이 과정의 성공유무를 통해 코드가 정상적인지 판단합니다.