---
title: "Dearfam : AI 기반 가족 추억 콘텐츠 서비스"
date: "2024-11-01"
lastModified: "2026-07-21"
category: "AI / Web Platform (팀 리드)"
projectCategory: "AI 서비스"
platforms: ["web","app"]
role: "frontend"
tags: ["React","TypeScript","Flutter","Dart"]
cover: "/images/projects/dearfam.png"
coverAlt: "Dearfam AI 가족 추억 앨범 플랫폼 로고"
githubUrl: "https://github.com/TEAM-POKIE/Dearfam-FrontEnd"
description: "가족의 일상 추억을 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로 입력값과 본문을 검증·정제했습니다.
- **결과**: 입력 경로가 달라도 동일한 파일 처리 흐름을 재사용하고, 파일 검증·본문 정제·지연 로딩을 일관된 방식으로 처리했습니다.