Next.js로 AI 좀비 커플 비디오 생성기 만들기

저는 두 장의 인물 사진을 개인화된 15초짜리 좀비 로맨스 스토리로 변환하는 작은 웹 앱인 AI Zombie Couple Video를 만들고 있습니다.

이 아이디어는 좀비 커플 비디오 트렌드에서 나왔습니다. 즉, 두 연인 사이의 긴장감 넘치는 만남 장면이 갑자기 그들이 함께했던 행복한 추억으로 전환되는 것입니다. 저는 상세한 프롬프트를 작성하거나 비디오 타임라인을 편집하고 싶지 않은 사람들도 이 장면에 접근할 수 있도록 만들고 싶었습니다.

제품은 현재 배포되었습니다. 여기에서 이 앱이 무엇을 하는지, 그리고 온라인에 올리면서 얻은 몇 가지 실질적인 교훈을 알려드리겠습니다.

집중된 생성 흐름 (A focused creation flow)

사용자는 두 개의 인물 사진을 업로드하고 역할을 지정합니다:

• A는 생존자(survivor)입니다.
• B는 좀비 파트너(zombie partner)입니다.

그다음 Seedance 2.0 또는 2.5와 출력 해상도(480p, 720p, 또는 1080p)를 선택합니다. 인터페이스는 사용자가 생성을 확인하기 전에 크레딧 비용을 보여줍니다.

홈페이지에는 실제 생성된 샘플과 두 개의 입력 사진이 함께 포함되어 있습니다. 이것은 중요한 디자인 결정이었습니다. 방문자들은 크레딧 구매 여부를 결정하기 전에 입력값과 결과를 비교할 수 있기 때문입니다.

생성은 구독 방식이 아닌, 일회성 크레딧 팩을 사용합니다.

장면을 설계한다는 것은 연속성을 생각하는 것을 의미했다 (Designing the scene meant thinking about continuity)

짧은 비디오는 명확한 시각적 스토리텔링이 필요합니다.

개발 과정에서 우리는 캐릭터 간의 거리, 좀비가 접근하는 방향, 그리고 추억 장면으로 전환되는 것과 같은 세부 사항들을 다루었습니다.

특히 중요한 세부 사항 중 하나는 컷(cut)을 가로지르는 움직임을 일치시키는 것이었습니다. 좀비가 한 방향에서 접근하고, 기억 속의 포옹은 그 방향을 계속 이어갑니다. 배경이 갑작스럽게 바뀌지만, 움직임 자체는 여전히 말이 되어야 합니다.

캐릭터의 정체성(identity), 표정(expressions), 의상(clothing) 연속성에도 주의가 필요했습니다. 이들은 생성된 결과를 평가할 때 유용한 점들로 남아있습니다. 완성된 클립은 의도했던 장면과 다를 수 있기 때문입니다.

애플리케이션 스택

이 사이트는 다음을 사용합니다:

• 애플리케이션: Next.js와 React
• 스타일링: Tailwind CSS
• 계정, 주문 및 크레딧 관리: Supabase PostgreSQL
• 호스팅: Vercel
• 결제 시스템 통합: PayPal

저는 SaaS 템플릿에서 시작하여 이 특정 제품에 맞게 계정, 결제 및 크레딧 기능을 조정했습니다.

배포 교훈: 데이터베이스 연결

배포 후 한 가지 문제가 로그인 세션과 관리자 대시보드 모두에 영향을 미쳤습니다.

데이터베이스 로그를 확인한 결과, 세션 연결 풀(session connection pool)이 클라이언트 제한(client limit)에 도달했음을 알 수 있었습니다. 애플리케이션 자체는 온라인 상태였지만, 데이터베이스 의존적인 페이지들은 실패할 수 있었습니다.

저희는 프로덕션 연결을 트랜잭션 풀러(transaction pooler)로 전환하고, 실행 중인 각 애플리케이션 인스턴스 내에서 데이터베이스 클라이언트 재사용(database client reuse) 기능을 활성화하여 연결 제한을 작게 유지했습니다.

재배포 후에는 기존 세션, 관리자 페이지, 크레딧 잔액, 그리고 여러 동시 페이지 읽기 작업을 확인했습니다.

저에게 유용했던 교훈은 성공적인 빌드(build)가 배포된 애플리케이션의 데이터베이스 연결 설정이 적절하다는 것을 증명하지 못한다는 것이었습니다.

크레딧은 사용자 경험의 일부입니다

유료 생성 도구의 경우, 사용자는 버튼을 누르기 전에 명확한 답변이 필요합니다:

• 생성에 비용이 얼마나 들까요?
• 충분한 크레딧이 있을까요?
• 생성이 실패하면 어떻게 되나요?
• 나중에 결과물을 어디서 찾을 수 있나요?

이러한 질문들은 확인 단계(confirmation step), 잔액 표시, 크레딧 기록 및 생성 이력에 영향을 미쳤습니다.

또한 결제 정산 및 크레딧 처리를 시각적 인터페이스와 분리하여 확인하는 것이 중요하다고 판단했습니다.

피드백 환영

샘플을 보고 사이트를 탐색해 보실 수 있습니다:

AI Zombie Couple Video

샘플이 결과를 명확하게 전달하는지, 그리고 모델, 해상도, 크레딧 선택지가 이해하기 쉬운지에 대한 피드백을 주시면 감사하겠습니다.

만약 유료 AI 생성 도구를 구축해 보셨다면, 사용자 경험(UX) 중 어떤 부분이 가장 많은 반복 작업(iteration)이 필요했나요?

공개 사항: 이 글은 프로젝트 개발 노트를 사용하여 AI로 작성되었습니다.