프로젝트 목록으로 돌아가기
SaaS DevelopmentLiveWeb
Adstacker: AI 동영상 광고 생성기
단일 동영상 업로드로 수백 가지의 브랜드 광고 변형을 생성하는 AI 기반 SaaS입니다. Next.js 웹 앱, 관리자 대시보드, 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 분석
기술 스택
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 생성 프로세서를 구현했습니다.
자막 시스템
SubtitleRenderer.tsx에서 Hormozi, Abdal, MrBeast, GaryVee, TikTok Viral, Clean Corporate를 포함하는 6가지 자막 렌더링 스타일을 모든 4가지 화면 비율에 걸쳐 구축했습니다.
실시간 진행 상황
폴링 없이 프런트엔드에서 실시간 작업 상태 업데이트를 가능하게 하는 SSE 폴백을 포함한 실시간 생성 진행 상황을 위한 WebSocket 게이트웨이를 통합했습니다.
결제 통합
체크아웃 세션, 결제 포털, 원본 본문 및 서명 검증을 포함한 웹훅 핸들러, 구독 시 크레딧 할당, 월별 크레딧 재설정 cron을 포함한 전체 Stripe 구독 라이프사이클을 구현했습니다.
공유 및 다운로드 시스템
nanoid 기반 공유 가능 토큰, 인증 없는 공용 S3 서명 URL 접근, 링크 취소, Content-Disposition 다운로드 헤더를 포함한 공유 및 다운로드 시스템을 구축했습니다.
관리자 모듈
대시보드 분석, 시계열 차트 데이터, 사용자 관리, 구독 관리를 위한 MongoDB aggregation 파이프라인을 사용하여 관리자 모듈을 개발했습니다.
전체 통합
사용자 앱과 관리자 패널 전반에 걸쳐 프런트엔드-백엔드 전체 통합을 주도했습니다. 모든 목 스토어를 라이브 API 호출로 대체하고, WebSocket 진행 상황을 연결하며, 전체 사용자 여정을 엔드 투 엔드로 검증했습니다.
결과
광고 변형: 단일 업로드로 수백 개렌더링: 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개의 bodies, 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는 웹훅(webhook) 기반 크레딧 할당 방식의 Stripe 구독(subscription) 과금(billing)을 구현했습니다. 사용자가 구독(subscribes)하거나 갱신(renews)하면, 웹훅(webhook) 핸들러는 해당 사용자의 플랜 티어(plan tier)에 따라 생성 크레딧(generation credits)을 할당합니다. 각 비디오 변형 생성에는 크레딧(credit) 1개가 소모되며, 월별 크론 잡(cron job)을 통해 크레딧(credit) 잔액이 초기화됩니다. 관리자 대시보드(admin dashboard)에서는 MongoDB 애그리게이션 분석(aggregation analytics)을 통해 크레딧(credit) 사용 패턴, 구독(subscription) 수익(revenue), 사용자별 소비량 등을 보여주어 가격 책정 결정에 필요한 정보를 제공합니다.
