Skip to main content

UI 패턴 명세 (UI Patterns)

기준일: 2026-03-04 (MVP 합의 반영)

1. 페르소나 허브 (/personas/[id])​

탭 구성:

  • 코디
  • 착장

핵심 UX:

  1. 코디를 먼저 만들거나(또는 공유 코디 복제) 선택한다.
  2. 선택된 코디 기반으로 착장을 생성한다(batch 4).
  3. 저장된 착장을 선택하면 촬영 준비 단계로 진입할 수 있다.
  4. 촬영 준비 단계에서 현재 사용할 착장을 확정한 뒤 Scene(i2i/i2v) 생성으로 이동한다.

2. 코디 생성 (통합)​

단일 기능: 코디 생성

  • t2i: 텍스트 기반 생성
  • i2i: 참조 이미지 기반 생성

공통 출력:

  • 패션 중심 코디 이미지
  • 선택적 코디 positive/negative prompt

3. 착장 생성​

  • 입력:
    • 페르소나(고정)
    • 코디(필수)
  • 생성:
    • 기본 batch 4
  • 저장:
    • 후보 중 선택 저장

4. 촬영 준비 단계 (/personas/[id]/prepare/image|video)​

상단 고정 정보:

  • 선택된 페르소나

중앙 구조:

  • 카테고리별 가로 스크롤 섹션
  • MVP 활성 카테고리: 착장
  • 추후 확장 카테고리: 헤어, 메이크업

우측 패널:

  • 현재 선택된 착장 상세
  • 향후 외형 조합 요약으로 확장 가능

하단 레일:

  • 이전
  • 다음

5. Scene (/personas/[id]/generate/image|video)​

상단 고정 정보:

  • 선택된 페르소나
  • 선택된 착장

입력 규칙:

  • image_1: 착장 이미지
  • image_2, image_3: 선택 참조
  • text_1, text_2: 코디 프롬프트 + Scene 프롬프트 합성

6. 안전 UX​

  1. 코디 없으면 착장 생성 버튼 비활성
  2. 착장 없으면 촬영 준비 단계의 다음 버튼 비활성
  3. Scene 직접 진입 시 outfitId 없으면 준비 단계로 되돌린다
  4. 공유 적용은 원본 참조가 아닌 복제 방식으로 처리