프로젝트 Dalmuri 기획 및 설계

사실 이걸 이 카테고리에서 제일 처음 먼저 써야하는거 아닌가? 라고 말한다면

쉿

조용히 해라..

---

개발자로서 회사를 다닌지 겨우 10개월 정도 지났지만 그동안 가장 크게 느낀 것은

"개발도 중요하지만 기획, 설계도 매우매우 중요!!!!!!"

라는 것이다.

상급자에게 기획서를 받아서 그걸 그대로 개발하는 입장에선, 상급자의 기획작성 능력에 따라 개발 인생이 편해지거나 헬게이트가 열리거나 둘 중 하난데, 현재의 상급자가 준 화면정의서는

 

1. 피그마로 그린 화면 보여줌.

2. 끝!

 

이다. ㄹㅇ로 이게 다다. 화면에 보이지 않는 백엔드 설계서는 아예 없다! 내가 다 계획해서 작성해야 한다!!!!!! 이걸 내가 외부 사람들에게 보여줄 수 없는게 통탄하지 그지없다. 

지피티 왈, 일반적인 회사에선 프론트엔드와 백엔드가 따로 노는 것이 아닌 하나의 흐름으로 이어진 기획•설계를 준다고 하는데, 우린 그딴거 없다. 

 

엉망인 화면정의서를 받고 개발을 하는것도 쉽지 않지만, 냅다 개발을 시작해서 개발만 하는것도 생각보다 힘든 일이었다.

일단 개발을 어떻게 진행할 지 계획서가 없으니, 내가 "이 부분은 ~~~이렇게 진행해야지!"라고 다짐해도 다음에 개발하면 까먹거나 내 개발 의도를 이해하지 못해서 아이디어를 날려먹는 일이 비일비재했다. 채팅이야 실무에서 websocket을 할 예정이니 연습 삼아 만들었다고 변명이라도 할 수 있겠지만, 나머지 영역(대시보드, 커뮤니티 등)은 뚜렷한 계획 없으니 그냥 무방비로 방치하고 있다. 처음엔 나름의 아이디어가 있어서 프로젝트를 그렇게 구성했지만 이제와서 보니 원래 계획도 기억이 나질 않는 불상사가 일어났다....

그렇게 여러가지의 사건을 통해 프로젝트의 기획 + 설계의 중요성을 깨닫게 되었다...

---

기획은 “무엇을 만들까”를 정의하는 과정, 설계는 “어떻게 만들까”를 구조화하는 과정이라고 한다.

프로젝트의 기획 단계는 개요→목표 →범위 → 타겟 사용자 → 핵심 기능 정의 → 요구사항 → 아키텍쳐 & 기술 스택 → 성과 지표 → 리스크 및 한계 를 순서로 작성하면 된다고 한다.

그럼 먼저 프로젝트 정의서 양식을 작성한다.

---

개요(Overview)

주제 : 친구 • 지인과의 친목 SNS 시스템

기획 의도

현재의 소셜 네트워킹 서비스는 규모가 크고 복잡해 개인의 작은 모임이나 친밀한 관계를 담아내기 어렵다. 가까운 친구들과의 소통은 단순하고 재미있는 공간이 필요하며, 문제가 발생시 빠르게 조치를 취하는 관리자가 필요할 것이다. 그러나 현재의 플랫폼은 기능이 과도하게 복잡하여 사용자가 기능이 있는지 모른체 지나치거나, 사용 방법이 번거로워 포기하는 경우가 많다. 또한 문제가 발생했을 때 신속한 대응하기 어렵고, 관리자 센터와의 복잡한 컨택을 거쳐야 한다. 

이러한 경험을 통해 단순하고 친근하며, 문제 발생 시 즉각 대응할 수 있는 SNS 시스템의 필요성을 느꼈다. 본 프로젝트는 이를 실현하기 위해 React, Docker, 라즈베리파이와 같은 기술 학습을 겸하여 동시에 가까운 친구 및 지인들과 가볍게 활용할 수 있는 소셜 플랫폼을 구축하는데 목적을 둔다.

클라이언트 요구사항 분석 -> 사용자 정의

: 가상의 사용자 페르소나 1~2명을 만들어서 설명한다. 

ex) 친구 a는 사진 위주의 소통을 하고 싶어한다.

친구 b는 채팅 기능을 주로 사용한다.

유스케이스 설계도 -> 유저 시나리오(User Flow)

: 다이어그램 외에도 텍스트로 "사용자가 어떤 경로로 어떤 경험을 하는지" 서술.

ex) 사용자는 로그인 후 대시보드에서 글을 쓰고, 알림을 통해 댓글 반응을 확인한다.

사용 가능 사이트 : https://app.diagrams.net/?src=about

사이트맵

현재 생각하고 있는 기능들 

[대시보드] : 위젯(환율, 감정 일기 기록) 등

[기록하기] : 감정일기, 미니게임 등

[소통하기] : 오늘의 한마디(랜덤 주제 던지기), 감정일기공유, 타임캡슐게시판

[채팅] : 채팅

[추억하기]: 타임캡슐, 타임라인 회고(오늘로부터 1년전 or 한달 전 게시글 보여주기), 좋아요 아카이브

 

사이트맵은 Canva 등으로 그릴

데이터베이스 설계도 + API 설계 초안

: DB 옆에 간단한 API 엔드포인트 예시를 적어둔다. 혹은 Swagger 이용.

개발 환경 

: ex) React : 컴포넌트 단위로 화며을 관리하기 위해서, 또한 React 공부를 위해 선택

: PostegreSQL : 관계형 데이터베이스로 데이터 구조 관리에 유리, 무료여서 부담 없이 사용

디자인(Figma)

피그마로 그려서 올릴 것 

성과지표, 리스크 및 한계

: ex) 성과 : 친구(사용자) 3명 이상이 실제로 글을 쓰고 댓글을 달며 채팅을 한다. 기존 SNS보다 기능이 많이 

---

기능 구체화 

추후 클라이언트 요구사항 분석에 추가할 것.

대시보드 Dashboard

1. 위젯
환율: 여행가고싶은 나라 환율(ex. 일본, 대만, 홍콩 etc)
감정일기 기록 :  '오늘의 감정을 써봐~'같은거

기록하기 Journal탭

1. 감정 일기 (기록탭)
오늘 하루를 표현해서 친구들 감정 맵을 만들기

(1) 오늘 하루 감정을 슬라이더로 선택 
슬라이더 움직일 때 바로 색/날씨/온도 바뀌는 애니메이션 (슬라이더: 즐거움(Valence) / 에너지(Arousal) <- input value range로) 

스케일
valence(즐거움): -1 ~ +1
arousal(에너지): 0 ~ 1
색(HSL)
Hue: 파랑(220°)↔초록(140°)↔노랑(60°)으로 갈수록 즐거움 증가
hue = 220 - 160 * ((valence + 1) / 2)
Saturation: 에너지 높을수록 채도↑
sat = 35 + 45 * arousal
Lightness: 중간 60% 고정(테마에 맞춰 조정)
날씨 아이콘
(valence≥0.4 & arousal≥0.6) → ☀️맑음/번쩍
(valence≥0.2 & arousal<0.4) → 🌤️구름 조금
(valence<-0.3 & arousal≥0.6) → ⛈️번개(불안/분노)
(valence<-0.3 & arousal<0.4) → 🌧️비(우울)
(|valence|<0.2 & arousal<0.3) → 🌫️안개(멍/피곤)
기본 → ☁️흐림
체감 온도(0~100) : temp = clamp( 50 + 35*valence + 15*(arousal - 0.5), 0, 100 )
예) 즐거움↑이면 따뜻, 우울/저에너지면 서늘.

(2) 감정 스티커 선택 
카테고리: 위로(🤗), 응원(💪), 휴식(☕), 집중(⚡), 축하(🎉), 속상(💔), 비밀(🔒)
스티커는 1개 이상 선택 가능하게 변경 (최대 3개 정도 추천)

(3) 미니 일기(최대 1000자) 작성 후 저장

(4) 달력으로 내가 선택한 이모지를 전체 조회해서 볼 수 있음.
달력에 감정 대표 컬러 & 선택한 스티커 아이콘 표시
각 날짜 클릭 시 감정 일기 미리보기 팝업

(5) 공유 범위 선택 : 전체, 나만보기

 

사용 기술

슬라이더 기반 실시간 변화 애니메이션 : react-spring

감정 스티커 선택 관련 로직 : React 상태관리(useState, useReducer, Context API), 실시간 바응형 로직 구현

달력 감정 조회: FullCalendar React이용, 서버에서 달력용 데이터 필터링(날짜별, 공유 범위별)

공유 범위 설정 : JWT, Role 기반 접근 제어 구현. 클라이언트에서 권한 필터링, 서버에서 데이터 권한 검증

 

2. 미니게임 
(1) 8Ball API : Question을 보내면 랜덤한 답변이 나온다(감스트 책님 느낌)
(2) 로또 번호 추천
(3) 랜덤 뽑기류(사다리 타기, 제비 뽑기, 룰렛 돌리기)

 

사용 기술

api 기반 게임: axios + useEffet, useQuery(React Query)로 API호출. 비동기 처리 + api 통신

랜덤 뽑기, 룰렛 : Canvasl 혹은 SVG + react spring 애니메이션 및 수학적 로직으로 랜덤화 구현

 

3. 나의 게시글

(1) 카테고리 > 게시글 구조로 만들어서 작성

(2) 드래그 & 드롭으로 트리 구조 변경 

 

사용 기술

CRUD구조 : React Query, axios로 서버 통신, 캐시 관리, 풀스택 CRUD

카테고리 구현 : 타입 안정성과 재귀적 데이터 구조 설계, 트리변환, react-beautiful-dnd

소통하기 community 탭
1. 랜덤 주제 던지기 - "오늘의 한마디"
오늘의 하이라이트는? 내 책상 사진 보여주기, 어제 웃긴 일 등의 주제를 가져와서 짧은 댓글 작성하기. 길고 부담스러운 글 대신 짧고 위트 있는 반응을 위주로 참여 유도.
(1) 자정에 새로운 주제가 열림, 같은 날 모든 사용자에게 동일한 주제 노출
(2) 댓글은 최대 100자, 미디어 업로드 x, 작성 후 수정 불가
(3) 피드 정렬 : 친구들의 답변이 랜덤으로 정렬되어 표시됨

 

사용 기술

랜덤 주제 던지기 : 매일 00:00에 새로운 주제 생성&DB저장 : Node.js의node-cron, springboot의 @Scheduled 이용

2. 감정일기(소통 탭)

(1) 오늘의 감정들이 원차트(감정스티커 기준)로 실시간 집계, 공감/응원 스티커로 상호작용, 주간 무드 리와인드
(2) “오늘의 감정 쌍둥이” 자동 매칭(감정 유형(Valence/Arousal 근접도)로 계산.)
(3) 내 친구들이 작성한 감정 일기 보기, 댓글 +  이모티콘. 친구들은 익명으로 보임
(4) 감정 데이터 암호화 저장(특히 일기 텍스트)

 

사용 기술

감정쌍둥이 매칭: 서버에서 Valence/Arousal 기반 유사도 계산(알고리즘)을 통한 추천 알고림즘 구현, 데이터 분석적 접근

3. 익명 질문함(+비밀편지) 
(1) 친구한테 익명으로 질문을 함
(2) 친구로부터 온 답변은 위젯으로 볼 수 있음 
(3) 나에게 온 익명 질문 : 위젯 클릭시 보고 답변 가능

 

사용 기술

익명 질문: 보안/개인정보 보호 처리

4. 친구와의 챌린지
(1) 챌린지 생성하기 : 시작일, 종료일 지정, 주제 선정하기(ex. 운동, 공부, 독서,,,)
(2) 진행 현황 : (챌린지가 있는 경우) 대시보드에 위젯으로 진행률 표시, chart로 조회, 매일 자동 체크인 알림(푸시/앱 내 알림 등)
(3) 기록 방식, 상호작용: 달성 여부에 대해 체크박스, 생성한 챌린지에 댓글, 응원 이모티콘, 격려 메시지 등 가능. 챌린지 종료 시 챌린지 리포트를 자동 생성(달성률 통계)
(4) 내기 : 이길 때 보상, 질 때의 벌칙을 설정(선택) 

 

사용 기술

친구와의 챌린지 : Zustand, Redux등으로 챌린지별 진행상태 관리, Chart.js등으로 통계 시각화

 

채팅하기 Chat탭

1. 실시간 채팅

 

사용기술

실시간 채팅 : WebSocket, 실시간 데이터 처리

 

추억하기 Memories 탭
1. 타임캡슐 게시판
미래의 나와 친구에게 보내는 메시지, 지금은 볼 수 없지만 약속된 날에 자동으로 공개. 공개 순간 친구들과 실시간 반응 나누기 가능
(1) 작성하기 : 사진, 글, 영상, 음성 모두 가능
(2) 개봉 날짜 지정 : 달력에서 날짜 선택, 선택 시 랜덤으로 개봉, 개봉 카운트다운(랜덤 개봉은 카운트다운  x)
(3) 잠금 상태 표시 : 작성자도 미리 못봄
(4) 공개 범위 선택:  나만 보기 / 특정 친구 보기 / 전체 친구 보기
(5) 개봉 알림 : 개봉 하루 전, 개봉 당일에 푸시나 알림으로 알려줌
(6) 개봉 후 반응 : 댓글, 이모지 등
활용 예시 : 기념일 캡슐, 여행가는날(여행 계획 글 등), 깜짝 선물

 

사용 기술

타임캡슐 예약, 자동 개봉 : 서버 스케줄링(CronJob 또는 큐) - 백엔드 스케줄링, 비동기 이벤트 처리

개봉 알림: Push Notification, 서버-클라이언트 등의 예약 이벤트 처리

 

2. 아카이브
“내가 누른 좋아요”와 “내가 받은 좋아요”를 확인하는 메뉴. 나의 게시글 취향 등을 알 수 있음
(1) 좋아요 기록 확인 : “내가 누른 좋아요”를 연도/월/주 단위로 조회,
(2) 북마크: 좋아요 외 북마크 표시, 나중에 빠르게 조회 가능
(3) 좋아요 기반 추천: 내가 ‘좋아요’한 게시물 유형 분석(chart이용), 비슷한 게시물 추천.

사용 기술

아카이브 ‘좋아요’확인 : 데이터 집계, api 최적화
아카이브 ‘북마크’확인: 사용자 맞춤 기능, CRUD 처리
좋아요 기반의 랜덤 게시글 추천 : 추천 알고리즘, 데이터 분석