← 포트폴리오 목록

반려동물 스토리북 통합 운영 플랫폼

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

MVP 이후 다수 고객의 자료를 한 화면에서 관리하는 마스터-디테일 관리자 콘솔과 캐릭터 일관성 검수, 판형·출력 프리셋 관리, 생성 파이프라인 모니터링까지 통합한 확장형 운영 플랫폼을 설계·구현합니다.

서비스 타입Web
업종모니터링
기술 스택
React + TypeScriptTailwind CSSNode.js + ExpressPostgreSQL + PrismaRedisBull QueueAWS S3Recharts
주요 기능
  • 고객·반려동물 자료 통합 관리
  • 생성 이력 및 캐릭터 일관성 검수
  • 판형·출력 규격 프리셋 관리
  • 생성 파이프라인 이용 현황 모니터링

프로젝트 개요

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

MVP 이후 다수 고객의 자료를 한 화면에서 관리하는 마스터-디테일 관리자 콘솔과 캐릭터 일관성 검수, 판형·출력 프리셋 관리, 생성 파이프라인 모니터링까지 통합한 확장형 운영 플랫폼을 설계·구현합니다.

작업 범위

  • 고객·반려동물 자료 통합 관리: 관리자가 좌측 고객 리스트에서 항목을 선택하면 우측에 반려동물 정보, 사연, 업로드 사진, 생성된 스토리·삽화·PDF 이력을 한 화면에서 조회할 수 있습니다
  • 생성 이력 및 캐릭터 일관성 검수: 관리자가 AI 삽화 생성 결과를 페이지별로 검수하고, 일관성이 낮은 페이지를 표시해 재생성을 요청할 수 있습니다
  • 판형·출력 규격 프리셋 관리: 정방형·A5 등 인쇄 판형을 프리셋으로 등록하고, 판형별 재단선·안전여백 값을 관리자가 직접 조정할 수 있습니다
  • 생성 파이프라인 이용 현황 모니터링: AI 생성 요청 건수, 페이지 재시도 발생 건수, 생성 단계별 진행 분포 등을 대시보드에서 확인할 수 있습니다

주요 업무

  • 고객·반려동물 자료 통합 관리 화면: 마스터-디테일 레이아웃으로 좌측 리스트와 우측 상세 패널을 구성하고, 상세 패널은 탭 없이 요약 카드·연결 항목·이력을 인라인으로 배치합니다
  • 생성 이력 및 캐릭터 일관성 검수 화면: 생성 이력 테이블에 페이지별 썸네일과 검수 상태(승인/재생성요청) 배지를 표시하고, 일괄 선택 후 재생성 요청을 큐에 등록합니다
  • 판형·출력 규격 프리셋 관리 화면: 판형 프리셋을 DB 테이블로 관리하고, 각 프리셋의 재단·안전여백 수치를 PDF 생성 파이프라인이 참조하도록 설계합니다
  • 생성 파이프라인 이용 현황 모니터링 화면: 생성 이력 로그를 집계해 요청·재시도·완료 건수를 시계열 차트와 위젯으로 표시합니다
반려동물 스토리북 통합 운영 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

다수 고객의 생성 이력과 대용량 사진 데이터를 조회할 때 응답 지연이 발생할 리스크

집계 쿼리 인덱싱과 페이지네이션으로 대응합니다

다중 페이지 일괄 재생성 요청 시 일부만 처리되는 부분 실패 리스크

큐 등록을 원자적 트랜잭션으로 묶어 대응합니다

판형 프리셋 변경이 과거 생성된 PDF 규격에 영향을 줄 리스크

프리셋 버전 관리로 기존 데이터를 고정합니다

생성 파이프라인 지표를 집계하는 배치 작업이 원본 생성 트래픽과 자원을 경합할 리스크

별도 집계 큐와 스케줄 분리로 대응합니다

구현 내용

핵심 기능 상세

핵심 기능 1

고객·반려동물 자료 통합 관리

관리자가 좌측 고객 리스트에서 항목을 선택하면 우측에 반려동물 정보, 사연, 업로드 사진, 생성된 스토리·삽화·PDF 이력을 한 화면에서 조회할 수 있습니다.

  • 좌측 고객 리스트에 검색·상태 배지 필터를 적용한 리스트 컴포넌트를 구현합니다
  • 우측 상세 패널을 요약 카드·사진 갤러리·생성 이력 섹션으로 구성해 모달 없이 인라인으로 표시합니다
  • 고객 선택 시 관련 데이터를 하나의 API 응답으로 묶어 조회하는 집계 쿼리를 설계합니다

마스터-디테일 구조와 집계 쿼리를 결합해 고객 한 명의 전체 이력을 화면 전환 없이 조회할 수 있는 구조를 구현합니다.

고객·반려동물 자료 통합 관리
고객·반려동물 자료 통합 관리 실제 화면
핵심 기능 2

생성 이력 및 캐릭터 일관성 검수

관리자가 AI 삽화 생성 결과를 페이지별로 검수하고, 일관성이 낮은 페이지를 표시해 재생성을 요청할 수 있습니다.

  • 페이지별 썸네일과 검수 상태 배지를 그리드로 표시하는 검수 테이블 컴포넌트를 구현합니다
  • 다중 선택 후 일괄 재생성 요청 시 Bull Queue에 원자적으로 작업을 등록하는 구조를 설계합니다
  • 검수 이력을 별도 로그 테이블에 적재해 재생성 요청 추이를 추적 가능하게 설계합니다

일괄 검수 UI와 원자적 큐 등록을 결합해 다수 페이지의 재생성 요청을 안전하게 처리하는 구조를 구현합니다.

생성 이력 및 캐릭터 일관성 검수
생성 이력 및 캐릭터 일관성 검수 실제 화면
핵심 기능 3

판형·출력 규격 프리셋 관리

정방형·A5 등 인쇄 판형을 프리셋으로 등록하고, 판형별 재단선·안전여백 값을 관리자가 직접 조정할 수 있습니다.

  • 판형 프리셋(크기·재단선·안전여백) CRUD 화면과 API를 구현합니다
  • 프리셋 값을 PDF 생성 파이프라인이 조회해 적용하도록 설정 참조 구조를 설계합니다
  • 판형 변경 시 기존 생성 데이터에는 영향이 없도록 프리셋 버전 관리를 적용합니다

판형 프리셋 CRUD와 버전 관리를 결합해 인쇄 규격 변경에도 기존 생성물이 영향받지 않는 구조를 구현합니다.

판형·출력 규격 프리셋 관리
판형·출력 규격 프리셋 관리 실제 화면
핵심 기능 4

생성 파이프라인 이용 현황 모니터링

AI 생성 요청 건수, 페이지 재시도 발생 건수, 생성 단계별 진행 분포 등을 대시보드에서 확인할 수 있습니다. 생성 이력 로그를 집계해 요청·재시도·완료 건수를 시계열 차트와 위젯으로 표시합니다.

  • 생성 이력 로그를 일별로 집계하는 배치 작업을 Cron으로 구현합니다
  • Recharts로 요청·재시도·완료 건수를 시계열 라인 차트와 도넛 차트로 시각화합니다
  • 재시도 발생 상위 원인을 유형별로 분류해 리스트로 표시합니다

일별 집계 배치와 다중 차트 위젯을 결합해 생성 파이프라인의 처리 흐름을 한눈에 파악할 수 있는 모니터링 화면을 구현합니다.

생성 파이프라인 이용 현황 모니터링
생성 파이프라인 이용 현황 모니터링 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

관리자 데이터 모델 및 집계 쿼리 설계 · 2026.09

고객·생성이력 통합 조회를 위한 집계 뷰 설계, 인덱스 8개 추가

STEP 2

검수·재생성 큐 API 개발 · 2026.09

일괄 검수, 재생성 요청 큐 등록 등 API 14개 구현

STEP 3

마스터-디테일 관리자 UI 개발 · 2026.09

React 기반 고객 리스트·상세 패널·판형 설정 화면 12개 구현

STEP 4

모니터링 대시보드 및 통합 테스트 · 2026.09

Recharts 기반 집계 차트 구현, 큐 부분실패 시나리오 등 테스트 30개 작성

개발 결과

고객 통합 조회 집계 쿼리 설계고객 한 명의 반려동물·사연·생성이력·PDF를 단일 API 응답으로 묶는 집계 쿼리와 인덱스를 설계합니다.
일괄 재생성 요청 큐 아키텍처 구현다중 페이지 선택 후 재생성 요청을 Bull Queue에 원자적으로 등록하는 트랜잭션 처리 구조를 구현합니다.
판형 프리셋 버전 관리 체계 구축판형 변경이 기존 생성물에 영향을 주지 않도록 프리셋 버전 관리와 참조 구조를 설계합니다.
생성 이력 일별 집계 파이프라인 설계Cron 기반 배치로 생성·재시도 이력을 일별 집계해 모니터링 차트 데이터로 제공하는 구조를 구현합니다.

기술적 주안점

  • 마스터-디테일 구조와 집계 쿼리를 결합해 고객 한 명의 전체 이력을 화면 전환 없이 조회할 수 있는 구조를 구현합니다
  • 일괄 검수 UI와 원자적 큐 등록을 결합해 다수 페이지의 재생성 요청을 안전하게 처리하는 구조를 구현합니다
  • 판형 프리셋 CRUD와 버전 관리를 결합해 인쇄 규격 변경에도 기존 생성물이 영향받지 않는 구조를 구현합니다

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

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

프로젝트 문의