AI 영상 생성에서는 프롬프트 입력 그 자체보다 「생성 버튼을 누른 후에 예상보다 많은 크레딧이 차감되었다」는 경험이 이탈로 이어지기 쉽다. 특히 요금이 초 단위와 해상도에 따라 달라지는 경우, 고정된 「1회 ○ 크레딧」이라는 표시만으로는 의사결정에 필요한 정보가 부족하다.

이 기사에서는 초 단위·해상도·모델별 단가로부터, 전송 전에 크레딧 소비를 확정 표시하는 폼 (Form) 설계를 정리한다.

1. 요금을 입력값의 일부로 다루기

영상 생성 요청을 다음과 같은 타입 (Type)으로 나타낸다.

type Resolution = "480p" | "720p";
type VideoRequest = {
durationSeconds: number;
...

단가표는 UI의 분기 (Branching)에 직접 매립하지 않고, 독립된 설정으로 둔다.

const CREDIT_RATE: Record<Resolution, number> = {
"480p": 1.6,
"720p": 3,
...

소수를 포함하는 단가에서는 실제 청구 단위에 맞춰 올림 (Ceil) 한다. 예를 들어 480p·8초라면 Math.ceil(8 × 1.6) = 13 크레딧이 된다.

2. 「생성 후」가 아니라 「입력 중」에 보여주기

견적은 확인 화면뿐만 아니라, 초 단위나 해상도를 변경하는 순간에 업데이트한다. 사용자가 비교하고 싶은 것은 다음 세 가지다.

• 현재 설정으로 필요한 크레딧
• 보유 크레딧으로 실행 가능한지 여부
• 해상도나 초 단위를 바꿨을 때의 차이

React에서는 파생값 (Derived value)으로 계산하면 별도의 state를 가질 필요가 없다.

const estimatedCredits = useMemo(
() => estimateCredits({ durationSeconds, resolution }),
[durationSeconds, resolution]
...

버튼 문구도 Generate — 13 credits와 같이 하면, 클릭 결과가 명확해진다. 잔액이 부족하다면 단순히 버튼을 비활성화할 뿐만 아니라 「앞으로 몇 크레딧이 더 필요한지」를 표시하는 것이 좋다.

3. 클라이언트의 견적을 신뢰하지 않기

화면에 올바른 견적을 보여주더라도, 최종적인 요금 판정은 서버 측에서 재계산한다. 클라이언트 값을 그대로 청구에 사용하면, 변조나 오래된 요금표에 의한 불일치가 발생한다.

export async function createVideo(input: VideoRequest, userId: string) {
const normalized = {
...input,
...

UI 표시와 서버 계산이 동일한 요금 정의를 참조할 수 있는 구조로 만들면, 표시 차이를 줄일 수 있다.

4. 실패 시 환불을 프로덕트 사양으로 만들기

외부 영상 생성 API는 비동기 (Asynchronous)이며, 큐 대기·타임아웃·프로바이더 장애가 발생할 수 있다. 따라서 크레딧 처리는 「차감」뿐만 아니라 다음의 상태 전이 (State transition)로 설계한다.

• 생성 접수 시 크레딧을 예약 또는 차감
• 태스크 (Task) 성공 시 확정
• 프로바이더 실패 시 단 한 번 환불
• 동일한 실패 통지가 여러 번 와도 중복 환불하지 않음

환불 처리에는 generation ID를 멱등 키 (Idempotency key)로 갖게 한다. 사용자에게는 실패 이유와 「환불 완료」를 동시에 표시하면, 고객 지원 문의를 줄일 수 있다.

5. 구현 예시로 확인한 포인트

이 설계는 내가 참여하고 있는 MICT의 Grok Video Generator에서, Grok Imagine 1.5 Preview의 입력 플로우를 정리할 때 사용했다.

현재 페이지에서는 다음을 생성 전에 확인할 수 있다.

• 1~15초의 영상 시간
• 480p / 720p
• 네이티브 오디오
• 480p는 1.6 credits/sec, 720p는 3 credits/sec
• 설정에서 산출한 합계 크레딧

MICT는 내가 개발에 참여하고 있는 프로덕트이며, 위 링크는 구현 예시로서 게재하고 있다.

요약

AI 생성 폼에서 중요한 것은 가격표를 두는 것이 아니라, 사용자가 선택한 설정의 결과를 전송 전에 확정 표시하는 것이다.

구현상의 요점은 다음 네 가지로 집약할 수 있다.

• 요금표를 설정으로 분리한다
• 입력 중에 견적을 업데이트한다
• 서버에서 반드시 재계산한다
• 실패 환불을 멱등하게 만든다

이 네 가지만으로도 「무료 크레딧은 있는데 첫 번째 영상을 만들 수 없다」거나 「누르고 나서야 요금을 알게 된다」와 같은 초기 경험의 마찰을 상당히 줄일 수 있다.

Discussion