프로젝트 기획

최종 수정: 2025.08.22

프로젝트 기획

• A. 도메인 기능표
• B. 기획 단계
• C. 프로젝트 구성
  - 기술 스택 & 라이브러리 & 도구
  - 공통 컴포넌트 (컴파운드 패턴)
  - 전역상태 기능

---

 A. 프로젝트의 도메인

도메인	기능	비고
1. 메인화면	간략한 소개 페이지 이동 및 회원가입
2. 가계부	항목별 사용 금액 주간 / 월간 지출 통계 1달 / 3달 / 6개월 / 1년간 통계 비교 지출 항목들에 챌린지 설정 -> 설정하면, 목표 설정이 자동 생성 지출 현황 원형 그래프로 가시화 체크한 항목에 대해서는 매달 그래프로 보여주기
3. 질문 모음	질문에 대한 글쓰기 기능 매주 제공되는 질문 (일정 시간마다 자동 제공) 자신만의 질문 추가 각 질문마다 재알림 기간 설정 이전에 답한 내용도 함께 볼 수 있도록 구현 목표 설정과 연결시키도록 구현 (목표 만들기 버튼) 질문 카드에 설정한 목표 갯수 표기 이웃만 댓글 작성 가능 누구나 댓글, 게시글에 대해서는 좋아요 가능 주인장은 댓글 삭제 가능 댓글 삭제시, 답글도 일괄 삭제 댓글을 삭제한 유저에 대해서는, 삭제할 때 차단 및 이웃 끊기 여부 묻기
3. 개인 페이지	이웃 신청에 대한 승인 / 거절 알림 관리 - 실시간성 알림 - 이웃 신청한 상대방 프로필보기 (질문 리스트, 공개 설정한 리스트) - 이웃이 작성한 것에 대한 일괄 알림 - 이웃 끊기 전 확인 단계 - 일괄 알림 시간 설정
4. 목표 설정 - 시간 - 에너지 - 돈	개인목표 / 계획 데이터 진행률 추적 정기적 알림 설정 달성했는지 체크 (진행중 / 완료 / 포기)
5. 회고 - 감사 - 기억 - 개선할 점	시간순 데이터 키워드 설정 키워드 검색 기능 이웃과 공유 여부 선택 개인 기록 CRUD 몰아보기 기능

---

B. 기획단계

Q. 데이터 흐름을 먼저 작업하는 게 좋은가?

API 설계와 데이터베이스 스키마를 미리 최적화할 수 있어서, 나중에 대규모 리팩토링을 피할 수 있다.

컴포넌트 간 props drilling이나 불필요한 리렌더링 같은 성능 이슈를 사전에 방지

 

Q. 유저 플로우를 먼저 작업하는 게 좋은가?

사용자 경험의 일관성을 보장하고, 중요한 기능이 묻히지 않도록 우선순위를 명확히 할 수 있다.

예외 상황에 대한 처리를 미리 계획할 수 있다.

개발 중에 "이 기능이 왜 필요하지?"라는 의문 없이 목적이 명확한 개발이 가능하다.

 

Q. 전역상태관리를 미리 지정해놓는 게 나은가?

좋다. 상태관리 라이브러리 선택과 아키텍처가 달라지기 때문이다. 나중에 바꾸면 전체 구조를 뜯어고쳐야 해서 비용이 크다.

 

Q. 어떤 기준으로 React.js와 Next.js 중에서 선택해야 할까?

React	Next.js
관리자 대시보드처럼 SEO가 필요 없는 내부 도구 로그인 후에만 사용하는 SPA(Single Page Application) 데이터 시각화나 실시간 업데이트가 중심인 앱 기존 서버나 API가 이미 구축되어 있어서 프론트엔드만 새로 만드는 경우	블로그, 쇼핑몰, 회사 홈페이지처럼 SEO가 중요한 사이트 초기 로딩 속도가 중요한 서비스 (SSR/SSG 필요) 서버 기능이 필요한 풀스택 개발 (API 라우트, 미들웨어) 이미지 최적화 같은 Next.js의 내장 기능을 활용하고 싶은 경우

---

C. 프로젝트 구성

1. 기술 스택 & 라이브러리 & 도구

분류	스택	이유
프레임 워크	Next.js(App Router)	파일 기반 라우팅으로 복잡한 구조 관리 용이 API Routes로 서버 로직 통합 가능 이미지 최적화 코드 스플리팅 자동
언어	TypeScript	런타임 에러 사전 방지 리팩토링 안전성 코드 가독성 향상
스타일링	TailwindCSS	빠른 프로토타이핑 반응형 디자인 간편 번들 크기 최적화
전역 상태관리	Jotai	원자 단위 상태로 컴포넌트별 최적화 Bottom-up 설계로 필요한 상태만 구독 보일러플레이트 최소화 React Suspense와 완벽 호환
서버 상태관리	TanStack Query	자동 캐싱으로 불필요한 API 호출 방지 백그라운드 자동 업데이트 낙관적 업데이트 (UX 향상) 에러 처리 및 재시도 로직 내장
쿼리 상태 디버깅	TanStack Query-devtools	실시간 쿼리 상태 모니터링 캐시 상태 시각화 개발 중 데이터 플로우 추적 용이
백엔드	Supabase	PostgreSQL + REST API 자동 생성 RLS로 권한 관리 간편 실시간 구독 기능 내장 파일 업로드/다운로드 지원
	Supabase/ssr	Next.js Server Components와 호환 쿠키 기반 인증 상태 관리 초기 페이지 로드 성능 향상
UI 관련	recharts	가계부 월간/연간 통계 시각화 목표 달성률 프로그레스 차트 반응형 차트 자동 지원 커스터마이징 용이
	lucide-react	일관된 디자인의 아이콘 세트 Tree-shaking으로 번들 크기 최적화 TypeScript 완벽 지원
Forms & Validation	react-hook-form	최소한의 리렌더링으로 성능 최적화 복잡한 폼 로직 간소화 비제어 컴포넌트 기반으로 빠른 입력 다양한 검증 라이브러리와 호환
	hookform/resolvers	React Hook Form과 Zod 연결 타입 안전한 폼 검증 에러 메시지 자동 바인딩
	zod	TypeScript와 완벽 호환 런타임 타입 검증 클라이언트/서버 검증 로직 공유 명확한 에러 메시지 제공
유틸리티 라이브러리	date-fns	가계부 월간/연간 기간 계산 목표 설정 마감일 관리 회고 시간순 정렬 Tree-shaking 지원으로 번들 최적화
개발 도구	types/node	Next.js API Routes 타입 지원 서버 사이드 코드 타입 안전성 환경변수 타입 정의
	prettier	일관된 코드 스타일 자동 적용 코드 리뷰 시 스타일 논쟁 방지 저장 시 자동 포맷팅
	prettier-plugin-tailwindcss	Tailwind 클래스 자동 정렬 가독성 향상 일관된 클래스 순서 유지

 

1. 컴파운드 패턴으로 사용할 것

컴포넌트	이유
모달
토스트 메시지	UI 기능으로써, 성공/실패 안내
버튼	버튼 통일
카드	질문용

 

2. 전역상태로 사용할 기능

기능	이유
읽지 않은 알림 개수 (헤더나 탭에 뱃지 표시용)
알림 설정 (사용자가 원하는 알림 시간, 알림 타입별 on/off)
마지막 확인 시간	새 알림 여부 판단용
프로필 정보
권한과 관계 데이터

---

Q. 왜 일괄 알림?

이것은 배치 알림으로써, 네트워크 요청을 감소 시켜준다.

 

단, 고려해야 할 점은 23:50 같은 특정 시간에 모든 사용자가 동시 요청하는 건 피해야 한다.

따라서, 사용자별로 시간을 조금씩 분산시키거나 (23:50~23:59 사이 랜덤, 혹은 개인 설정)

사용자가 앱을 열 때 배치된 알림을 가져오도록 고려

 

또한 이웃간 소통 앱이라는 특성상, 실시간보다는 '하루 마무리' 느낌의 배치 알림이 오히려 더 자연스럽고 효율적이라고 생각한다.

• 알림이 없는 사용자에게는 요청 자체를 보내지 않기
• 여러 종류 알림을 하나의 API로 묶어서 처리
• 읽지 않은 알림만 delta 형태로 전송

---