프로젝트 목록으로 돌아가기
SaaS DevelopmentLiveWeb
Adstacker: AI 비디오 광고 생성기
하나의 비디오 업로드로 수백 가지의 브랜드 광고 변형을 생성하는 AI 기반 SaaS입니다. Next.js Web App, Admin Dashboard, NestJS API, Remotion 렌더링 서비스, BullMQ 생성 워커를 통해 조정됩니다. 자동 조합 생성, GPU 가속 렌더링, 다중 스타일 자막, 실시간 WebSocket 진행 상황 업데이트, Stripe 기반 구독 결제를 제공합니다.
17+
Technologies
11+
Key Features
Web
Platform
주요 기능
모든 Hook x Body x CTA 순열을 생성하는 AI 조합 엔진6가지 애니메이션 유형 — 페이드, 슬라이드 업/다운, 스케일, 타자기, 바운스6가지 자막 스타일 — Hormozi, MrBeast, GaryVee, Abdal, TikTok Viral, Clean Corporate모든 4가지 종횡비 — 9:16, 16:9, 1:1, 4:5GPU 가속 Remotion + FFmpeg 렌더링동시성 제어가 가능한 BullMQ 비동기 작업 큐
개발 하이라이트
Mongoose 및 모듈형 CRUD를 사용한 완전한 NestJS 백엔드 아키텍처카르테시안 곱 생성을 통한 조합 엔진6가지 애니메이션 유형을 갖춘 Remotion 비디오 컴포지션 엔진동시성 제어를 갖춘 BullMQ 생성 파이프라인실시간 WebSocket 진행 상황 추적웹훅 기반 크레딧을 통한 Stripe 구독 라이프사이클관리자 대시보드를 위한 MongoDB aggregation analytics
기술 스택
Next.jsReactTypeScriptTailwind CSSshadcn/uiNestJS 11MongooseMongoDBRedisBullMQRemotionFFmpegAWS S3WebSocketStripe
우리의 기여
백엔드 아키텍처
Mongoose 스키마, 모듈형 CRUD API, DTO 유효성 검사, 프런트엔드의 평면 배열을 백엔드의 임베디드 문서로 변환하는 매핑 레이어를 포함하여 전체 NestJS 백엔드를 처음부터 설계했습니다.
조합 엔진
모든 유효한 Hook x Body x CTA x Subtitle 순열을 열거하고 각각을 독립적인 BullMQ 작업으로 대기열에 추가하는 조합 계산기 엔진을 구축했습니다.
비디오 렌더링 파이프라인
6가지 애니메이션 유형을 가진 Remotion 컴포지션(VideoComposition, HookOverlay, BodyOverlay, CtaOverlay)을 개발하고 빠른 작업 실행을 위해 서버 시작 시 번들링했습니다.
생성 워커
S3 다운로드, Remotion renderMedia(), FFmpeg 인코딩 최적화, 썸네일 생성, S3 업로드, DB 업데이트, 오류 처리 및 재시도를 포함하는 BullMQ 생성 프로세서를 구현했습니다.
자막 시스템
4가지 종횡비에 걸쳐 Hormozi, Abdal, MrBeast, GaryVee, TikTok Viral, Clean Corporate를 포함하는 6가지 자막 렌더링 스타일을 SubtitleRenderer.tsx에 구축했습니다.
실시간 진행 상황
SSE 폴백을 통해 실시간 생성 진행 상황을 위한 WebSocket 게이트웨이를 통합하여, 폴링 없이 프런트엔드에서 실시간 작업 상태 업데이트를 가능하게 했습니다.
결제 통합
결제 세션, 결제 포털, 원시 본문 및 서명 검증을 포함하는 웹훅 핸들러, 구독 시 크레딧 할당, 월별 크레딧 초기화 cron 등 전체 Stripe 구독 라이프사이클을 구현했습니다.
공유 및 다운로드 시스템
nanoid 기반 공유 토큰, 인증 없는 공개 S3 서명 URL 접근, 링크 취소, Content-Disposition 다운로드 헤더를 포함하는 공유 및 다운로드 시스템을 구축했습니다.
관리자 모듈
대시보드 분석, 시계열 차트 데이터, 사용자 관리, 구독 관리를 위한 MongoDB aggregation pipelines을 사용하여 관리자 모듈을 개발했습니다.
전체 통합
사용자 앱과 관리자 패널 전반에 걸쳐 프런트엔드-백엔드 통합을 이끌었습니다. 모든 모의 저장소를 실시간 API 호출로 대체하고, WebSocket 진행 상황을 연결하며, 전체 사용자 여정을 E2E로 검증했습니다.
결과
광고 변형: 단일 업로드로 수백 개렌더링: GPU 가속 Remotion + FFmpeg스타일 커버리지: 6가지 자막 스타일 x 6가지 애니메이션 x 4가지 비율아키텍처: 5가지 구성 요소로 조정되는 플랫폼
이 프로젝트의 특별한 점
단일 비디오 업로드를 자동 조합 생성, GPU 가속 렌더링 및 다중 스타일 자막 지원을 통해 수백 가지 브랜드 광고 변형으로 변환합니다. 성과 마케터들을 위해 특별히 제작되었습니다.
자주 묻는 질문
MicrocosmWorks는 모든 Hook x Body x CTA x Subtitle 순열의 데카르트 곱을 계산하는 조합 계산기 엔진을 구축했습니다. 각 입력 요소(hooks, body segments, CTAs)는 사용자에 의해 정의되며, 엔진은 모든 유효한 조합을 열거한 다음, 각각을 독립적인 BullMQ 작업으로 대기열에 추가합니다. 이 접근 방식은 5개의 hooks, 3개의 body, 4개의 CTAs, 6개의 subtitle 스타일을 가진 비디오가 360개의 고유한 광고 변형을 자동으로 생성한다는 것을 의미합니다.
MicrocosmWorks는 Adstacker에 6가지 자막 렌더링 스타일을 구현했습니다: Hormozi, MrBeast, GaryVee, Abdal, TikTok Viral, 그리고 Clean Corporate. 각 스타일은 퍼포먼스 마케터들이 인지하는 인기 크리에이터 형식과 일치하도록 고유한 폰트, 색상, 애니메이션 및 위치 지정 특성을 가집니다. SubtitleRenderer는 Remotion 컴포지션 내에서 4가지 종횡비(9:16, 16:9, 1:1, 4:5)와 6가지 애니메이션 유형(fade, slide-up, slide-down, scale, typewriter, bounce)을 모두 처리합니다.
MicrocosmWorks는 빠른 작업 실행을 위해 서버 시작 시 번들링된 Remotion 컴포지션을 사용하여 렌더링 파이프라인을 구축했으며, 인코딩 최적화를 위한 FFmpeg와 결합했습니다. BullMQ는 구성 가능한 동시성 제어를 통해 비동기 작업 대기열을 관리하므로, 여러 변형이 사용 가능한 GPU 리소스에서 병렬로 렌더링됩니다. 각 작업은 S3 다운로드, Remotion renderMedia, FFmpeg 인코딩, 썸네일 생성, S3 업로드 및 데이터베이스 업데이트를 포함한 전체 파이프라인을 오류 처리 및 자동 재시도와 함께 처리합니다.
MicrocosmWorks는 대기열에 있는 모든 변형에 대한 실시간 생성 진행 상황을 프런트엔드로 푸시하는 WebSocket 게이트웨이를 통합했으며, WebSocket 연결을 사용할 수 없는 환경을 위한 SSE (Server-Sent Events) 폴백을 제공합니다. 사용자는 대기 중, 처리 중, 렌더링 진행률 및 완료 상태를 포함하여 각 변형에 대한 실시간 상태 업데이트를 볼 수 있습니다. 이는 폴링의 필요성을 없애고 생성 파이프라인 상태에 대한 즉각적인 피드백을 제공합니다.
MicrocosmWorks는 웹훅 기반 크레딧 할당과 함께 Stripe 구독 결제를 구현했습니다. 사용자가 구독하거나 갱신할 때, 웹훅 핸들러는 해당 사용자의 요금제 등급에 따라 생성 크레딧을 할당합니다. 각 비디오 변형 생성은 하나의 크레딧을 소모하며, 월별 cron 작업이 크레딧 잔액을 재설정합니다. 관리자 대시보드는 크레딧 사용 패턴, 구독 수익 및 사용자별 소비를 보여주어 가격 결정에 정보를 제공하는 MongoDB 집계 분석을 제공합니다.
