Dearfam : AI 기반 가족 추억 콘텐츠 서비스

프로젝트 개요

• 구분: 팀 프로젝트 (프론트엔드 리드 / 기획 참여)
• 기간: 2024.11 ~ 2025.09
• 기여도: 프론트엔드 개발 기여도 80% (팀 구성원: 프론트엔드 2명, 백엔드 1명, 디자이너 & 기획 2명)
• 기술 스택: Flutter·Firebase (초기 MVP) → React·TypeScript (웹 서비스), Zustand, TanStack Query, MSW, Tailwind CSS, Shadcn UI, Zod, DOMPurify
• 주요 성과:
  • 2024년 클라우드 아이디어 공모전 대상 (부산시장상) 수상
  • Pre-스타트업 선정으로 창업 사무실 입주 및 지원
  • 제 15회 숭실캡스톤디자인 경진대회 장려상 수상

---

핵심 기술 기여

1. Flutter MVP에서 React·TypeScript 웹 서비스로 전환

• 문제 상황: 초기 MVP는 Flutter로 구축했지만 AI 콘텐츠와 굿즈 제작 기능을 확장하기 위해 웹 서비스 전환이 필요했습니다.
• 해결 과정: React·TypeScript로 웹 서비스를 다시 구성하고, 클라이언트 상태는 Zustand로, 서버 상태는 TanStack Query로 분리했습니다.
• 결과: 웹 환경에 맞는 상태 관리 기반을 마련하고, 초기 MVP의 기능을 웹 서비스 흐름으로 확장할 수 있게 했습니다.

2. 클라이언트·서버 상태 분리

• 문제 상황: 게시글·댓글 데이터와 헤더 모드·작성 폼·미디어 작업 단계가 하나의 상태 흐름에 섞일 수 있었습니다.
• 해결 과정: 서버 데이터는 TanStack Query로, 클라이언트 상태는 Zustand로 분리했습니다. TanStack Query의 mutation과 캐시 업데이트 기능을 활용해 게시글·댓글 변경에 낙관적 업데이트를 적용하고, 요청 실패 시 이전 캐시를 롤백해 클라이언트 상태를 복원했습니다.
• 결과: 서버 상태와 UI 상태의 책임을 분리하고, 변경 실패에도 화면을 안정적으로 복구할 수 있게 했습니다.

3. MSW 기반 백엔드와의 병렬 개발 환경

• 문제 상황: 백엔드 API 구현을 기다리다 보니 프론트엔드 기능 구현이 늦어지는 병목이 생겼습니다.
• 해결 과정: 가족·게시글·댓글·인증 API를 MSW로 모킹해 실제 서버 없이도 성공·실패·빈 상태 등 다양한 응답을 검증했습니다.
• 결과: 백엔드 API 구현 전에 API 통신 과정을 미리 처리할 수 있었습니다.

4. 멀티 소스 입력과 웹 품질 처리

• 문제 상황: 로컬 파일·사진 보관함·카메라·Google Drive 등 입력 경로마다 처리 방식이 달랐고, 대용량 기능과 사용자 입력의 안전성도 확인해야 했습니다.
• 해결 과정: UniversalFilePicker에서 로컬 파일·사진 보관함·카메라·Google Drive 입력 결과를 PictureFile로 통합했습니다. React.lazy·Suspense·OptimizedImage로 페이지와 이미지 로딩을 관리하고, Zod와 DOMPurify로 입력값과 본문을 검증·정제했습니다.
• 결과: 입력 경로가 달라도 동일한 파일 처리 흐름을 재사용하고, 파일 검증·본문 정제·지연 로딩을 일관된 방식으로 처리했습니다.