와이어프레임 / 35-화면설계 / wireframes / 화면-04-05-영상생성-I2V

화면 · 영상 생성 (I2V) — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · 화면설계서(PPTX) 기반 신설 · 클릭 가능(prototype)
출처: 페르소나-영상생성-화면설계서.pptx (2026-06-25) · Figma 페이지 없음 · 허브 노트: 화면-04-05-영상생성-I2V.md
2개 섹션 · 7개 상태 프레임 · 기기 375×812 · 페르소나 이미지→영상(I2V) 생성 플로우 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그

영상생성_01 · 입력 → 생성중 → 완료

기존 이미지 생성 화면에 [이미지 생성]·[영상 생성] 탭을 더했다. 영상 탭은 5칸 연출 입력을 받아 키프레임 이미지 → 시스템 자동 게이트 → I2V 영상까지 한 번에 만든다. 사용자의 중간 이미지 컨펌은 없다.
※ 원 화면설계서는 좌(입력)·우(미리보기) 2단 구성이다. 375px 모바일에서는 상하(미리보기→입력)로 재배치했다 — needs-verification(원본 대상 기기·레이아웃).

영상 생성 · 진입 (빈 입력)
‹ 제인 ◎ 크레딧 24
이미지 생성 1
영상 생성 2
16:9 미리보기 3
① 배경/장소 * 4
7⚄ 랜덤
해질녘 도심 거리…
② 동작 *
⚄ 랜덤
천천히 걸어옴…
③ 표정 *
⚄ 랜덤
엷은 미소…
④ 복장 *
⚄ 랜덤
베이지 코트…
⑤ 기타 (선택)
⚄ 랜덤
카메라 줌인·분위기…
소모 크레딧 3 ◎ 5
영상 생성 6
  • 주석 · 영상 생성 진입
  • 1이동이미지 생성 탭 = 기존 자유 프롬프트 이미지 화면. (같은 페르소나 화면 · 이 화면군 밖)
  • 2요소영상 생성 탭(현재 활성). 같은 화면에서 이미지·영상 모드를 오간다.
  • 3요소결과 미리보기 영역. 규격 16:9 · 1280×720 · 4초 · 24fps.
  • 4요소5칸 연출 입력(①배경/장소 ②동작 ③표정 ④복장 ⑤기타). ①~④ 필수(*), ⑤기타 선택. 각 칸은 타이틀+입력칸+랜덤 버튼.
  • 5규칙영상 1회 생성에 3크레딧 차감(실패 시 롤백). 근거: [[크레딧]].
  • 7동작각 칸 옆 [⚄ 랜덤] = AI가 그 항목을 랜덤 연출로 자동 채운다(이미지 생성의 랜덤 생성과 동일 패턴). 칸별 개별 실행.
  • 6데이터[영상 생성] → 키프레임 이미지 → 시스템 게이트 → I2V 영상까지 비동기 진행. 인프라: [[persona-mp4-queue]] · [[PersonaVariationInfo]]. (정확한 엔드포인트는 KB 노트에 미기재 — needs-verification, arwen_docs#294)
  • ·규칙외형·정체성은 받지 않는다 — character_profile이 자동 충당. 빈 칸은 LLM이 보완.
  • ·규칙1회 입력 → LLM 보정 → 키프레임 → 자동 게이트 → I2V. 사용자의 중간 이미지 컨펌 없음. 근거: arwen_docs#256.
  • ·규칙[영상 생성] 활성 조건 = 필수 4칸(①~④) 입력 충족. ⑤기타는 선택. 빈 필수칸은 직접 입력 또는 랜덤 버튼으로 채운다.
  • ·이동뒤로 → 페르소나 화면 (이 화면군 밖).
영상 생성 · 연출 입력 (filled)
‹ 제인 ◎ 크레딧 24
이미지 생성
영상 생성
16:9 미리보기
① 배경/장소 *
⚄ 랜덤
해질녘 도심 거리
② 동작 *
⚄ 랜덤
천천히 걸어옴
③ 표정 *
⚄ 랜덤
엷은 미소
④ 복장 *
⚄ 랜덤
베이지 코트
⑤ 기타 (선택)
⚄ 랜덤
카메라 줌인·분위기
소모 크레딧 3 ◎
영상 생성
  • ·상태필수 ①~④를 채우면 [영상 생성] 활성(⑤기타 선택). ②동작은 이미지 포즈 + 영상 움직임에 겸용된다.
영상 생성 · 생성중 (비동기)
‹ 제인 ◎ 크레딧 22
이미지 생성
영상 생성
◔ 생성 중… 1
진행 단계 2
키프레임 이미지 → 세이프가드 검열 → 품질 게이트 → I2V 영상
시스템이 내부에서 검열·진행 (유저 컨펌 없음)
생성 중… 3
  • 주석 · 비동기 진행
  • 1이동완료되면 결과 화면으로 자동 전환(컨펌 없음). 미리보기 클릭으로 완료 상태 확인.
  • 2규칙키프레임→영상은 시스템 자동 게이트(세이프가드 필수 + 품질)로 진행. 근거: [[세이프가드]] · arwen_docs#256.
  • 3데이터비동기 생성 큐. 인프라: [[persona-mp4-queue]] · [[PersonaVariationInfo]]. 생성 시작 시 3크레딧 차감(크레딧 24→21).
  • ·규칙미리보기 영역(16:9 컨테이너 유지)에 키프레임이 뜨는 경우(옛 데이터 등, arwen_docs#994) 그 이미지는 세로 비율이라 그대로 채우면 위아래가 잘린다. 완료 전(생성중·세이프가드 차단·생성 실패·실패 썸네일)에는 레터박스(사진 전체가 보이게 축소하고 남는 자리는 배경으로 채움)로 표시해 잘리지 않게 한다. 완료된 영상도 같은 레터박스로 표시한다. 가로로 바뀐 뒤에도 영상 화면비가 832×480(비 1.733)이라 16:9(비 1.778) 컨테이너와 정확히 맞지 않는다. 그래서 그대로 채우면 그 차이만큼 좌우가 잘린다. 근거: [[결정-프로필-표시비율]](D42) · arwen_docs#959 · arwen_docs#983 실측 · arwen_docs#1270.
  • ·규칙탭 전환 중에도 진행 작업은 백그라운드로 유지.
  • ·규칙HF(추론 서버) 가용성 장애 시 아마존 백업 경로로 우회(성인콘텐츠 정책 무관). 근거: arwen_docs#12.
영상 생성 · 완료
‹ 제인 ◎ 크레딧 22
이미지 생성
영상 생성
▶ 1
생성된 콘텐츠 2
▶
영상이 생성되었어요
새 영상 만들기 3
  • 주석 · 완료
  • 1요소16:9 영상 재생(▶). 규격 1280×720 · 4초 · 24fps. 완성 영상도 레터박스로 표시한다. 「원래 16:9라 컨테이너를 그대로 채운다」던 옛 전제는 실측과 달랐다(arwen_docs#983 실측). 레터박스 규칙은 완료 전 키프레임과 완료된 영상 둘 다에 적용한다(arwen_docs#959 · arwen_docs#1270).
  • 2요소'생성된 콘텐츠'에 만든 영상이 쌓인다(▶). 서버에서 불러오므로 화면을 벗어났다 돌아와도 남는다. ⚠️ 키프레임 이미지는 제공되지 않는다 — 썸네일이 비어 오므로 영상 첫 프레임이나 대체 이미지를 쓴다(arwen_docs#994).
  • 3이동새 영상 만들기 / 뒤로 → 입력 화면으로 복귀.
  • ·상태완료 토스트 노출. 문구는 예시 — needs-verification.

영상생성_02 · 예외 처리

세이프가드 차단 · 생성 실패/타임아웃(크레딧 롤백) · 크레딧 부족(충전 유도)을 팝업으로 안내한다.

예외 · 세이프가드 차단
‹ 제인
이미지 생성
영상 생성
영상 생성

생성할 수 없어요

입력 또는 생성 결과가 정책에 맞지 않아 생성을 중단했어요.

수정하기 1
  • 1규칙세이프가드가 입력 5칸 · 키프레임 · 결과 프레임을 검열한다. 위반 시 생성 중단·안내. 근거: [[세이프가드]] · [[성인콘텐츠-정책]].
예외 · 생성 실패 (크레딧 롤백)
‹ 제인
이미지 생성
영상 생성
영상 생성

생성에 실패했어요

잠시 후 다시 시도해 주세요.
차감된 3크레딧은 반환됐어요.

다시 시도 1
  • 1규칙생성 실패·타임아웃 시 3크레딧 롤백(반환). 근거: [[크레딧]].
예외 · 크레딧 부족 (충전 유도)
‹ 제인
이미지 생성
영상 생성
영상 생성

크레딧이 부족해요

영상 생성에는 3크레딧이 필요해요.

충전하기 1
닫기 2
  • 1이동크레딧 부족 시 충전 유도. 충전하기 → 결제·충전 화면. (이 화면군 밖) 근거: [[크레딧]].
  • 2이동닫기 → 입력 화면으로 복귀.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·규칙)이다. 신설 화면(Figma 페이지 없음)으로, 근거는 KB 노트 화면-04-05-영상생성-I2V.md(1차 소스) · arwen_docs#256(제품 결정) · #294(구현) · #12(가용성)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트의 wireframe: 필드가 이 파일을 가리킨다.