Forevers.app 구축하기: 정지된 추억을 AI 생성 비디오로 변환하기

Forevers.app을 구축하기 시작했을 때, 아이디어는 단순해 보였습니다:

정지된 사진을 가져와서, 의미 있는 이야기로 배열하고, 이를 영화 같은 AI 생성 비디오(AI generated video)로 변환하는 것.

현실적으로, 이것은 우리가 만든 제품 중 기술적으로 가장 도전적이고 흥미로운 제품 중 하나가 되었습니다.

Forevers.app은 사람들이 소중한 추억에 생명력을 불어넣을 수 있도록 돕는 AI 비디오 생성 플랫폼입니다. 사용자는 사진을 업로드하고, 시간 순서대로 정리하면, 전환 효과(transitions), 움직임, 음악, 그리고 감정적인 페이싱(pacing)이 담긴 애니메이션 비디오를 받게 됩니다.

이 단순한 경험 뒤에는 React, TypeScript, Supabase, Replicate, Mux, Stripe, Remotion, Fabric.js, 백그라운드 작업(background jobs), 다국어 UI, 크레딧 로직(credit logic), 관리자 도구(admin tooling), 그리고 시작할 때는 예상하지 못했던 수많은 예외 상황(edge cases)을 포함하는 풀스택 시스템이 자리 잡고 있습니다.

이 글은 우리가 무엇을 만들었는지, 무엇이 고장 났는지, 무엇이 작동했는지, 그리고 다음에 무엇이 올 것인지에 대한 살펴보기입니다.

제품 비전

목표는 단순히 또 다른 AI 도구를 만드는 것이 아니었습니다.

우리는 Forevers.app이 개인적인 느낌을 주기를 원했습니다.

대부분의 사람들은 휴대폰이나 클라우드 저장소에 수백, 수천 장의 사진을 가지고 있습니다. 어떤 것들은 가족 행사, 추모식, 결혼식, 생일, 여행, 어린 시절의 순간, 또는 기억하고 싶은 사랑하는 사람들의 사진입니다.

문제는 사진이 정적이라는 점입니다. 사진은 의미가 있지만, 항상 살아있는 것처럼 느껴지지는 않습니다.

Forevers.app은 AI 기반 애니메이션과 전환 효과를 사용하여 이러한 이미지들을 짧은 영화 같은 비디오로 변환합니다. 사용자는 편집 기술, 타임라인 지식, 비디오 소프트웨어, 또는 프롬프트 엔지니어링(prompt engineering)이 필요하지 않습니다.

사진을 업로드하세요. 배열하세요. 비디오를 생성하세요.

그것이 약속입니다.

우리가 선택한 스택

프론트엔드(frontend)를 위해 우리는 다음으로 구축했습니다:

React 19
TypeScript
Vite
Tailwind CSS
React Router
TanStack Query
Framer Motion
Fabric.js
Remotion
Radix UI 및 shadcn/ui

백엔드 및 인프라를 위해:

인증(auth), 데이터베이스(database), 에지 함수(edge functions)를 위한 Supabase
AI 모델 추론(inference)을 위한 Replicate
비디오 호스팅 및 전송을 위한 Mux
결제 및 크레딧을 위한 Stripe
파일 처리를 위한 Supabase Storage

이 스택은 우리에게 속도와 유연성, 그리고 소비자 친화적인 제품과 강력한 관리자 시스템을 모두 구축할 수 있는 충분한 제어권을 제공했습니다.

첫 번째 큰 과제: AI 비디오 생성은 단일 작업이 아니다

처음에는 비디오 생성이란 AI 모델에 요청을 한 번 보내고 비디오를 하나 받는 것이라고 생각하기 쉽습니다.

하지만 실제로는 그렇지 않습니다.

전체 비디오 생성 파이프라인 (pipeline)은 다음과 같은 많은 작은 단계들로 구성됩니다:

사진 업로드
이미지 검증 (validation)
순서 및 타임라인 로직
클립 생성
예측 추적 (prediction tracking)
트랜지션 (transition) 생성
병합 (merge) 처리
음악 생성
오디오 루핑 (looping)
멀싱 (Muxing)
최종 전달
오류 복구
크레딧 차감
관리자 가시성

각 단계는 독립적으로 실패할 수 있습니다.

어떤 클립은 성공하지만 다른 클립은 실패할 수 있습니다. 병합 작업이 타임아웃 (timeout)될 수도 있습니다. 비디오가 성공적으로 생성되었지만 업로드 중에 실패할 수도 있습니다. 사용자가 중간에 브라우저를 닫아버릴 수도 있습니다. 비디오 파이프라인이 여전히 실행 중인 동안 결제가 완료될 수도 있습니다.

따라서 우리는 비디오 생성을 단일 요청으로 생각하는 것을 멈추고, 이를 상태 머신 (state machine)으로 취급하기 시작해야 했습니다.

그것이 모든 것을 바꾸어 놓았습니다.

장시간 실행되는 AI 작업에 대해 배운 점

AI 작업은 느리고, 예측 불가능하며, 비용이 많이 듭니다.

이는 제품이 불확실성을 중심으로 설계되어야 함을 의미합니다.

우리는 다음 사항들에 대해 신중하게 고민해야 했습니다:

언제 크레딧을 차감할 것인가
진행 상황을 어떻게 보여줄 것인가
실패한 작업을 어떻게 재시도할 것인가
중복 생성을 어떻게 방지할 것인가
부분적인 성공을 어떻게 처리할 것인가
관리자에게 유용한 오류 정보를 어떻게 노출할 것인가
사용자가 막혀 있다고 느끼지 않게 하려면 어떻게 해야 하는가

가장 큰 교훈은 이것이었습니다:

좋은 AI 제품은 모델의 품질에 관한 것만이 아닙니다. 그것은 작업 오케스트레이션 (job orchestration)에 관한 것입니다.

사용자는 최종 결과물에 관심을 갖지만, 신뢰성에도 관심을 갖습니다. 그들은 무언가 진행되고 있다는 것을 알 필요가 있습니다. 관리자는 무엇이 잘못되었는지 알아야 합니다. 시스템은 우아하게 복구될 수 있어야 합니다.

그 결과 우리는 사용자 관리, 비디오 작업 모니터링 (video job monitoring), 모델 프로빙 (model probing), 크레딧 제어 (credit controls), 결제 가시성 (payment visibility), 쿠폰 관리, 브랜딩 설정, CMS 제어 및 지원 도구를 갖춘 더욱 완전한 관리자 대시보드를 구축하게 되었습니다.

프론트엔드 과제: 단순한 UI, 복잡한 상태 (state)

사용자 인터페이스 (UI)는 단순하게 느껴져야 했습니다.

하지만 내부적으로 상태 (state)는 결코 단순하지 않았습니다.

하나의 프로젝트는 많은 사진을 가질 수 있습니다. 사진은 순서를 변경할 수 있습니다. 각 사진은 하나의 클립 (clip)이 될 수 있습니다. 각 클립은 예측 상태 (prediction state)를 가질 수 있습니다. 프로젝트는 초안 (draft), 처리 중 (processing), 실패 (failed), 부분 완료 (partially completed) 또는 완료 (completed) 상태일 수 있습니다.

우리는 데이터 페칭 (fetching), 캐싱 (caching), 그리고 UI의 반응성을 유지하기 위해 TanStack Query를 적극적으로 사용했습니다. 또한 프로젝트 흐름과 전환 (transitions) 과정에서 상호작용이 부드럽게 느껴지도록 Framer Motion을 사용했습니다.

Fabric.js는 캔버스 조작 (canvas manipulation)을 도왔고, Remotion은 렌더링 (rendering)과 합성 (composition)을 생각할 수 있는 강력한 방법을 제공했습니다.

하나의 중요한 제품 결정은 핵심 흐름에 집중하는 것이었습니다. 너무 많은 편집 컨트롤을 추가하고 싶은 유혹이 생기지만, 대부분의 사용자는 전문적인 비디오 소프트웨어를 원하는 것이 아닙니다. 그들은 아름다운 결과물을 빠르게 얻기를 원합니다.

그것이 하나의 지침 원칙이 되었습니다:

강력한 시스템, 단순한 인터페이스.

다국어 문제

Forevers.app은 영어와 히브리어를 지원합니다.

이것은 단순한 번역 작업처럼 들리지만, 실제로는 레이아웃 (layout) 작업이기도 합니다.

히브리어는 RTL (Right-to-Left, 오른쪽에서 왼쪽으로 읽기) 지원을 의미합니다. 컴포넌트 (components)가 이에 적응해야 합니다. 간격 (spacing), 정렬 (alignment), 내비게이션 (navigation), 폰트 로딩 (font loading), 심지어 감정적인 톤 (emotional tone)까지 두 언어 모두에서 자연스럽게 느껴져야 합니다.

우리는 앱이 LTR (Left-to-Right)과 RTL 흐름을 모두 지원할 수 있도록 마케팅 및 제품 경험에 언어 및 폰트 처리 기능을 구축했습니다.

이는 기억을 기반으로 하는 제품은 감정적이기 때문에 특히 중요했습니다. 잘못된 현지화 (localization)는 제품을 평범하게 느껴지게 만들지만, 훌륭한 현지화는 제품을 개인적인 것으로 느끼게 만듭니다.

결제 및 크레딧 시스템

우리는 AI 생성에 실제 비용이 발생하기 때문에 토큰 기반 (token based) 크레딧 시스템을 선택했습니다.

모든 비디오 생성은 컴퓨팅 (compute), 모델 사용 (model usage), 스토리지 (storage) 및 전송 (delivery) 리소스를 소비합니다. 따라서 비즈니스 모델은 사용량과 명확하게 매칭되어야 했습니다.

Stripe가 결제 처리를 담당하며, 앱은 크레딧 (credits), 쿠폰 (coupons), 히스토리 (history) 및 관리자 제어 (admin controls)를 관리합니다.

가장 어려운 부분 중 하나는 결제 성공과 생성 상태 (generation state)를 일치시키는 것이었습니다. 시스템 오류로 인해 사용자가 크레딧을 잃어서는 안 됩니다. 동시에, 플랫폼은 중복 작업 (duplicate jobs) 및 남용 (abuse)으로부터 보호받아야 합니다.

이를 위해 크레딧 차감 (credit deduction), 작업 생성 (job creation), 재시도 동작 (retry behavior) 및 관리자 복구 도구 (admin recovery tools)에 대한 세심한 처리가 필요했습니다.

잘 작동한 부분

지금까지 가장 큰 성공은 제품 경험이 이해하기 쉽다는 점입니다.

사용자는 Replicate, Mux, Remotion 또는 Supabase가 무엇인지 알 필요가 없습니다. 그들은 단지 자신의 사진이 비디오로 변하는 것을 볼 뿐입니다.

그 추상화 (abstraction)가 바로 제품입니다.

우리가 자랑스럽게 생각하는 몇 가지 성과는 다음과 같습니다:

• 생성 파이프라인 (generation pipeline)이 점점 더 안정화되고 있습니다
• 관리자 대시보드 (admin dashboard)가 실제 운영 가시성 (operational visibility)을 제공합니다
• UI가 영어와 히브리어를 모두 지원합니다
• 크레딧 시스템이 사용량을 투명하게 만듭니다
• 앱이 무작위 컴포넌트가 아닌 기능 중심으로 구조화되어 있습니다
• 스택 (stack) 덕분에 통제권을 포기하지 않고도 빠르게 움직일 수 있습니다

개발자 관점에서는 모듈식 구조 (modular structure)가 큰 도움이 되었습니다. 마케팅 (marketing), 프로젝트 (projects), 관리 기능 (admin functionality), 공유 UI (shared UI), 프로바이더 (providers) 및 API 로직 (API logic)을 분리함으로써 앱을 더 쉽게 확장할 수 있었습니다.

처음에 작동하지 않았던 부분

몇 가지 사항은 예상보다 어려웠습니다.

진행 상황 추적 (progress tracking)은 예상보다 더 복잡했습니다. 사용자는 긴 AI 작업 동안 모호한 로딩 화면을 보고 싶어 하지 않습니다.

오류 상태 (error states)에는 더 많은 세부 정보가 필요했습니다. 맥락 없는 AI 작업 실패는 디버깅 (debug)이 거의 불가능합니다.

관리자 도구 (admin tooling)는 예상보다 훨씬 일찍 구축되어야 했습니다. 실제 사용자가 AI 파이프라인과 상호작용하기 시작하면 즉시 가시성이 필요합니다.

비디오 전송 (video delivery)은 그 자체로 하나의 제품 계층 (product layer)입니다. 비디오를 생성하는 것은 작업의 일부일 뿐입니다. 호스팅 (hosting), 재생 (playback), 인코딩 (encoding) 및 전송 (delivery) 또한 그만큼 중요합니다.

AI 비용 제어 (cost control)는 처음부터 설계되어야 합니다. 모든 재시도 (retry), 실패한 작업 (failed job), 그리고 중복 요청 (duplicate request)은 비즈니스에 영향을 미칩니다.

이러한 교훈들이 플랫폼을 크게 형성했습니다.

다음 단계

우리는 현재 Forevers.app을 더 빠르고, 더 똑똑하며, 더 유연하게 만드는 데 집중하고 있습니다.

• 더 나은 생성 품질 (generation quality)
• 더 영화적인 전환 스타일 (cinematic transition styles)
• 개선된 음악 생성 및 동기화 (synchronization)
• 더 똑똑한 사진 순서 제안
• 사용자에게 부담을 주지 않는 더 많은 커스터마이징 (customization)
• 더 나은 모바일 경험
• 더 발전된 관리자 분석 (admin analytics)
• 추가적인 언어 지원
• 템플릿 기반의 비디오 스토리
• 실패한 작업에 대한 개선된 복구 (recovery)

장기적으로 우리의 목표는 Forevers.app을 의미 있는 사진을 감동적인 AI 생성 비디오로 변환하는 가장 쉬운 방법으로 만드는 것입니다.

단순한 슬라이드쇼가 아닙니다.

진정한 기억의 이야기 (memory stories)입니다.

마치며

Forevers.app을 구축하며 우리는 AI 제품이 단순히 모델을 호출하는 것만이 아니라는 점을 배웠습니다.

진정한 작업은 모델 주변의 모든 것입니다:

• 사용자 흐름 (user flow)
• 작업 시스템 (job system)
• 에러 핸들링 (error handling)
• 결제 (payments)
• 관리자 도구 (admin tools)
• 전송 파이프라인 (delivery pipeline)
• 감성적 경험 (emotional experience)

AI는 마법을 가능하게 하지만, 제품 엔지니어링 (product engineering)은 그것을 사용 가능하게 만듭니다.

우리는 아직 초기 단계에 있지만, 지금까지의 결과는 흥미롭습니다. 정지된 기억이 움직이는 영화 같은 비디오로 변하는 것을 보는 것은 진정으로 강력한 경험입니다.

그것이 우리가 계속해서 만들어 나가는 원동력입니다.

여기에서 직접 체험해 보실 수 있습니다:

https://forevers.app