← 포트폴리오 목록

반려동물 AI 동화 스토리북 생성 플랫폼

설계·구현 참고 자료 — 고객 납품 실적으로 구분된 항목이 아닙니다.

반려동물 사진과 사연을 입력하면 AI가 동화형 스토리와 삽화를 자동 생성하고, 같은 반려동물의 특징을 여러 페이지에서 일관되게 유지하는 검증 로직과 300DPI 출판 품질 PDF 생성까지 지원하는 풀스택 웹 서비스를 React + Node.js 기반으로 설계·구현합니다.

서비스 타입Web
업종AI 서비스
기술 스택
React + TypeScriptTailwind CSSNode.js + ExpressPostgreSQL + PrismaOpenAI APIGemini APIClaude APIAWS S3
주요 기능
  • 반려동물 정보·사연 입력 마법사
  • AI 스토리·삽화 자동 생성
  • 캐릭터 일관성 검증 미리보기
  • 출판용 PDF 자동 생성·다운로드

프로젝트 개요

범위: 개발, 디자인, 기획

반려동물 사진과 사연을 입력하면 AI가 동화형 스토리와 삽화를 자동 생성하고, 같은 반려동물의 특징을 여러 페이지에서 일관되게 유지하는 검증 로직과 300DPI 출판 품질 PDF 생성까지 지원하는 풀스택 웹 서비스를 React + Node.js 기반으로 설계·구현합니다.

작업 범위

  • 반려동물 정보·사연 입력 마법사: 보호자가 반려동물 사진(최대 10장)과 이름·종·외형 특징, 추억 에피소드를 단계별 스텝퍼로 입력할 수 있는 화면을 제공합니다
  • AI 스토리·삽화 자동 생성: 입력된 사연을 바탕으로 동화형 스토리와 페이지별 삽화를 자동 생성하고, 진행 상태와 실패 시 재시도 옵션을 제공합니다
  • 캐릭터 일관성 검증 미리보기: 생성된 전체 페이지를 순서대로 미리보기하며, 같은 반려동물이 페이지마다 일관되게 표현됐는지 나란히 비교할 수 있습니다
  • 출판용 PDF 자동 생성·다운로드: 완성된 스토리북을 표지 포함 전체 페이지로 자동 배치하고, 인쇄 판형에 맞는 재단선·안전여백을 적용한 PDF로 다운로드할 수 있습니다

주요 업무

  • 반려동물 정보·사연 입력 마법사 화면: React Hook Form 기반 다단계 폼 상태 관리, 이미지 업로드는 Presigned URL 방식으로 AWS S3에 직접 전송해 서버 부하를 줄이는 구조로 설계합니다
  • AI 스토리·삽화 자동 생성 화면: 텍스트 생성은 OpenAI/Gemini/Claude API 중 선택 가능한 어댑터 패턴으로 설계하고, 이미지 생성은 큐 기반 비동기 작업으로 처리해 생성 실패 시 개별 페이지만 재시도합니다
  • 캐릭터 일관성 검증 미리보기 화면: 참조 이미지 조건화 프롬프트에 원본 사진 특징 태그를 고정 삽입해 페이지 간 캐릭터 일관성을 높이고, 미리보기 화면에서 페이지 썸네일을 그리드로 비교합니다
  • 출판용 PDF 자동 생성·다운로드 화면: pdf-lib과 Puppeteer로 300DPI 기준 고정 판형 템플릿에 삽화·텍스트를 자동 배치하고, 재단(bleed)·안전여백 가이드를 레이어로 삽입한 출력용 PDF를 생성합니다
반려동물 AI 동화 스토리북 생성 플랫폼
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

같은 반려동물이 페이지마다 다르게 그려지는 캐릭터 일관성 저하 리스크

원본 사진 특징 고정 프롬프트와 페이지별 재생성 기능으로 대응합니다

화면에서는 선명하던 삽화가 인쇄용 PDF에서 흐릿해지는 해상도 저하 리스크

300DPI 기준 렌더링과 배치 검증으로 대응합니다

텍스트·이미지 생성 API 응답 지연 또는 실패로 전체 생성 플로우가 중단될 리스크

페이지 단위 큐 분리와 개별 재시도 구조로 대응합니다

인쇄 판형이 사전 확정되지 않아 페이지 레이아웃이 판형별로 재작업될 리스크

판형 프리셋 기반 템플릿 구조로 확장 가능하게 설계합니다

구현 내용

핵심 기능 상세

핵심 기능 1

반려동물 정보·사연 입력 마법사

보호자가 반려동물 사진(최대 10장)과 이름·종·외형 특징, 추억 에피소드를 단계별 스텝퍼로 입력할 수 있는 화면을 제공합니다.

  • React Hook Form + Zod로 스텝별 유효성 검증과 진행 상태를 관리하는 멀티스텝 폼 구조를 설계합니다
  • AWS S3 Presigned URL 발급 API로 최대 10장 사진을 클라이언트에서 직접 업로드하는 구조를 구현합니다
  • 입력 데이터를 PostgreSQL 정규화 테이블(고객·반려동물·에피소드)로 분리 저장하는 스키마를 설계합니다

멀티스텝 폼과 S3 직접 업로드를 결합해 대용량 이미지 업로드 시에도 서버 리소스 부담을 최소화하는 구조를 구현합니다.

반려동물 정보·사연 입력 마법사
반려동물 정보·사연 입력 마법사 실제 화면
핵심 기능 2

AI 스토리·삽화 자동 생성

입력된 사연을 바탕으로 동화형 스토리와 페이지별 삽화를 자동 생성하고, 진행 상태와 실패 시 재시도 옵션을 제공합니다.

  • Strategy 패턴으로 OpenAI/Gemini/Claude 텍스트 생성 API를 교체 가능한 어댑터로 추상화합니다
  • 페이지별 삽화 생성 작업을 비동기 큐로 분리해 실패한 페이지만 개별 재시도하는 구조를 구현합니다
  • SSE(Server-Sent Events)로 생성 진행 상태를 프론트엔드에 실시간 스트리밍합니다

어댑터 패턴 기반 멀티 AI 제공자 전환 구조와 페이지 단위 재시도 큐를 결합해 생성 실패에 유연하게 대응하는 파이프라인을 설계합니다.

AI 스토리·삽화 자동 생성
AI 스토리·삽화 자동 생성 실제 화면
핵심 기능 3

캐릭터 일관성 검증 미리보기

생성된 전체 페이지를 순서대로 미리보기하며, 같은 반려동물이 페이지마다 일관되게 표현됐는지 나란히 비교할 수 있습니다.

  • 원본 사진에서 추출한 외형 특징 태그를 모든 페이지 프롬프트에 고정 삽입하는 프롬프트 템플릿을 설계합니다
  • 페이지 썸네일 그리드 뷰로 전체 페이지의 캐릭터 표현을 한 화면에서 비교할 수 있게 구현합니다
  • 일관성이 낮다고 판단되는 페이지만 선택해 재생성 요청하는 부분 재생성 UI를 구현합니다

고정 특징 태그 프롬프트 템플릿과 페이지별 부분 재생성 기능을 결합해 캐릭터 일관성 검증-보정 루프를 구현합니다.

캐릭터 일관성 검증 미리보기
캐릭터 일관성 검증 미리보기 실제 화면
핵심 기능 4

출판용 PDF 자동 생성·다운로드

완성된 스토리북을 표지 포함 전체 페이지로 자동 배치하고, 인쇄 판형에 맞는 재단선·안전여백을 적용한 PDF로 다운로드할 수 있습니다.

  • pdf-lib 기반으로 300DPI 해상도 기준 고정 판형 PDF 생성 파이프라인을 구현합니다
  • 재단선(bleed)과 안전여백을 별도 레이어로 삽입해 인쇄소 규격에 맞춘 출력 템플릿을 설계합니다
  • Puppeteer로 HTML 페이지 레이아웃을 고해상도 이미지로 렌더링한 뒤 PDF에 합성하는 구조를 구현합니다

300DPI 고정 판형 템플릿과 재단·안전여백 레이어를 결합해 인쇄 품질 검증이 가능한 출판용 PDF 생성 구조를 설계합니다.

출판용 PDF 자동 생성·다운로드
출판용 PDF 자동 생성·다운로드 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

요구사항 분석 및 데이터 모델 설계 · 2026.09

반려동물·에피소드·생성이력 스키마 설계, PostgreSQL 테이블 12개 정의 및 관계 매핑

STEP 2

AI 생성 파이프라인 및 API 개발 · 2026.09

OpenAI/Gemini/Claude 어댑터, 삽화 생성 큐, PDF 생성 API 등 24개 엔드포인트 구현

STEP 3

스텝퍼 UI 및 미리보기 화면 개발 · 2026.09

React 기반 멀티스텝 입력·진행상태·캐릭터 비교 미리보기 화면 10개 구현

STEP 4

출판 PDF 검증 및 통합 테스트 · 2026.09

300DPI 판형별 PDF 출력 검증, 생성 실패 재시도 시나리오 등 통합 테스트 40개 케이스 작성

개발 결과

멀티 AI 제공자 어댑터 아키텍처 구현OpenAI·Gemini·Claude 텍스트 생성 API를 Strategy 패턴으로 추상화해 제공자 전환이 가능한 어댑터 구조를 설계합니다.
페이지 단위 비동기 재시도 큐 설계삽화 생성 실패 시 전체 재생성 없이 해당 페이지만 재처리하는 Bull Queue 기반 재시도 로직을 구현합니다.
300DPI 출판 PDF 파이프라인 구축pdf-lib과 Puppeteer를 결합해 재단선·안전여백 레이어를 포함한 인쇄용 PDF 생성 파이프라인을 설계합니다.
캐릭터 특징 고정 프롬프트 템플릿 설계원본 사진 외형 태그를 모든 페이지 프롬프트에 고정 삽입해 캐릭터 일관성을 높이는 템플릿 구조를 구현합니다.

기술적 주안점

  • 멀티스텝 폼과 S3 직접 업로드를 결합해 대용량 이미지 업로드 시에도 서버 리소스 부담을 최소화하는 구조를 구현합니다
  • 어댑터 패턴 기반 멀티 AI 제공자 전환 구조와 페이지 단위 재시도 큐를 결합해 생성 실패에 유연하게 대응하는 파이프라인을 설계합니다
  • 고정 특징 태그 프롬프트 템플릿과 페이지별 부분 재생성 기능을 결합해 캐릭터 일관성 검증-보정 루프를 구현합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의