# 젤리의 적자탈출 개선 계획 PRD ## 프로젝트 개요 젤리의 적자탈출(Zellyy Finance) 프로젝트의 기술적 개선을 위한 종합적인 계획 ## 1단계: 즉시 개선 (1주일) ### 1.1 TypeScript 설정 강화 - tsconfig.json의 strict 모드 점진적 활성화 - noImplicitAny, strictNullChecks 활성화 - 기존 any 타입 사용 제거 - 타입 안전성 확보 ### 1.2 코드 품질 개선 - console.log 81개 제거 - 빌드 오류 수정 (SupabaseToAppwriteMigration import 오류) - ESLint 규칙 강화 - Prettier 설정 추가 ### 1.3 환경 변수 보안 강화 - API 키 클라이언트 노출 문제 해결 - 환경 변수 관리 개선 - .env 파일 구조 정리 ### 1.4 CI/CD 파이프라인 구축 - GitHub Actions 워크플로우 설정 - 자동 빌드 및 테스트 - ESLint 자동 검사 ## 2단계: 핵심 개선 (2-3주) ### 2.1 상태 관리 마이그레이션 - Context API에서 Zustand로 전환 - 보일러플레이트 코드 80% 감소 - 타입 안전성 향상 - 자동 메모이제이션 적용 ### 2.2 데이터 페칭 개선 - TanStack Query 도입 - 자동 캐싱 및 동기화 - 오프라인 지원 강화 - 낙관적 업데이트 구현 ### 2.3 테스트 코드 작성 - Vitest + React Testing Library 설정 - 핵심 비즈니스 로직 단위 테스트 - 주요 사용자 플로우 통합 테스트 - 테스트 커버리지 목표: 80% ### 2.4 React 성능 최적화 - React.memo, useMemo, useCallback 적용 - 불필요한 리렌더링 방지 - 세션 체크 주기 최적화 (5초 → 30초) - 컴포넌트 레이지 로딩 ### 2.5 자동 배포 설정 - Vercel 자동 배포 설정 - 환경별 배포 (스테이징/프로덕션) - PR 미리보기 배포 ## 3단계: 고급 기능 (1개월) ### 3.1 인증 시스템 개선 - Clerk 인증 시스템 도입 - 카카오/네이버 소셜 로그인 추가 - 2FA 및 생체인증 지원 - 사용자 경험 향상 ### 3.2 백엔드 마이그레이션 - Appwrite에서 Supabase로 전환 고려 - 실시간 동기화 개선 - 오프라인 지원 강화 - 데이터 마이그레이션 스크립트 ### 3.3 차트 라이브러리 최적화 - Recharts에서 Chart.js로 전환 - 번들 크기 300KB → 100KB 감소 - 모바일 성능 향상 - 커스텀 차트 컴포넌트 구현 ### 3.4 PWA 기능 추가 - 서비스 워커 구현 - 오프라인 캐시 전략 - 푸시 알림 지원 - 앱 설치 프롬프트 ## 4단계: 최적화 및 모니터링 (2개월) ### 4.1 번들 크기 최적화 - Webpack Bundle Analyzer 사용 - 74개 dependencies 정리 - 코드 스플리팅 적용 - Tree shaking 최적화 ### 4.2 모바일 빌드 자동화 - Android/iOS 자동 빌드 - App Store/Play Store 자동 배포 - 버전 관리 자동화 - 릴리즈 노트 자동 생성 ### 4.3 모니터링 시스템 구축 - Sentry 에러 모니터링 - 성능 지표 추적 - 사용자 행동 분석 - 알림 시스템 구축 ### 4.4 접근성 및 UX 개선 - ARIA 라벨 추가 - 키보드 네비게이션 지원 - 색상 대비 개선 - 스크린 리더 지원 ## 성공 지표 ### 기술적 지표 - 빌드 시간 50% 단축 - 앱 로딩 속도 2배 향상 - 테스트 커버리지 80% 달성 - 번들 크기 30% 감소 ### 사용자 경험 지표 - 로그인 성공률 95% 이상 - 앱 크래시율 0.1% 이하 - 오프라인 동작 100% 지원 - 접근성 AA 등급 달성 ## 위험 요소 및 대응책 ### 기술적 위험 - 마이그레이션 중 데이터 손실 → 백업 전략 수립 - 성능 저하 → 단계적 적용 및 모니터링 - 호환성 문제 → 철저한 테스트 ### 일정 위험 - 복잡성 과소평가 → 버퍼 시간 확보 - 의존성 문제 → 대안 기술 준비 - 팀 리소스 부족 → 우선순위 조정 ## 리소스 요구사항 ### 개발 도구 - GitHub Actions (무료 티어) - Vercel (무료 티어) - Sentry (무료 티어) - Linear (무료 티어) ### API 서비스 - Clerk (10,000 사용자까지 무료) - Supabase (500MB까지 무료) - 총 예상 비용: $0/월 (소규모) ## 다음 단계 1. Phase 1 작업 즉시 시작 2. 주간 진행 상황 리뷰 3. 필요시 계획 조정 4. 각 단계별 성과 측정