Cardly Studio

개요

카드뉴스 디자인 13종 프리셋(Magazine Cover · Aurora Mesh · Risograph · Brutalist · Y2K 등) 위에서 프로젝트 → 카드셋 → 슬라이드 위계와 무한 CopyVersion 히스토리를 다루는 카드뉴스 오케스트레이터. AI 카피·이미지 프롬프트 빌더 + PNG/ZIP 내보내기 + 배경 합성 + Vitest + Playwright E2E.

내가 한 작업

• ▸Next.js 16 App Router + Supabase RLS + 자동 저장 디바운스 동기화
• ▸Zustand 상태 관리 + 실시간 동기화 로직
• ▸13종 카드 템플릿 디자인 + Three.js 기반 실시간 3D 렌더 프리뷰
• ▸이미지 라이브러리 + Supabase Storage(`cardnews-images`) 연동
• ▸html-to-image + jszip 클라이언트 PNG/ZIP 합성 파이프라인
• ▸Anthropic SDK 기반 AI 프롬프트 빌더 + MCP 서버 통합 (`src/lib/mcp`)
• ▸Vitest + Playwright E2E + RLS 검증 SQL 스크립트

주요 기능

• 13종 디자인 템플릿 (Magazine / Aurora / Risograph / Brutalism / Y2K)
• 프로젝트 → 카드셋(시나리오/앵글) → 슬라이드 3단 위계
• 무한 CopyVersion 히스토리 (라벨 / 복원)
• 카드별 배경 이미지 + 오버레이 / 블러 + 라이브러리 재사용
• AI 프롬프트 빌더 (카피 + 이미지 4스타일)
• PNG / ZIP 내보내기 (메타데이터 + README 동봉)

핵심 포인트

• 13개 디자인 프리셋 (2026 트렌드)
• 프로젝트 → 카드셋 → 슬라이드 + 무한 카피 버전
• AI 카피 · 이미지 프롬프트 빌더
• PNG / ZIP 내보내기 (배경 합성)
• Vitest + Playwright E2E 커버리지

타임라인

기술 스택

</>Next.js 16 · Supabase RLS · Three.js · MCP · 13 프리셋