와이어프레임 / 35-화면설계 / wireframes /
인라인 미디어 · Phase 1
인라인 미디어 · Phase 1 (이미지·요청형) — 와이어프레임
파이프라인 ③단계 · 구조 뼈대(SOT) · 회색 저해상 · 클릭 가능
출처: Epic #366 · Phase 1 #368 · 허브 노트: 인라인-미디어-생성.md · 명세: 화면설계-04-03-인라인미디어.md · 앨범: 화면-04-04-앨범.html
대화 맥락에서 캐릭터가 이미지를 즉시 생성·전달. 표시는 미리보기, 과금 포인트는 "크게보기(원본)".
기기: 모바일 375×812 · 확장웹 1077px 2단(좌 420 + 우 596, 1025px 이상). 확장웹 골격 정본 = 결정-확장웹-레이아웃-골격(D37).
▶ 흐름 모드: 요소를 눌러 화면 이동
▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤
①②③ 요소 번호 = 아래 주석
요소·동작·이동·데이터·규칙·상태 유형 태그
요청 → 생성 → 미리보기
명시("셀피 보내줘")는 바로 생성, 암시(맥락)는 캐릭터 제안·확인 후 생성. 모호하면 항상 제안 경로.
- 📡 호출 엔드포인트
- API
POST /conversation/stream — 대화 스트림(요청 인식). 인라인 트리거·조립 경로는 needs-verification
- API
POST /conversation/generateImage — 페르소나 이미지 생성(HF 추론 + 아마존 페일오버). 인라인 재사용 여부 needs-verification
S0 · 대화 기본
- 주석 · 대화 기본
- 1데이터대화 턴은
companion_chat_ai 스트림. 미디어 요청 의도는 intent 파이프라인(#358) 연계.
- ·규칙별도 "생성 버튼" 흐름과 구분 — 인라인은 대화 맥락 트리거. (Studio=기존 생성화면)
- 2이동앨범 진입(입력창 좌측 아이콘) → 앨범(
#413, 이 화면군 밖).
S1a · 명시 요청 (직접)
- 주석 · 명시 요청
- 1규칙"셀피 보내줘" 등 직접 지시=제안/확인 생략, 바로 생성(S2).
- ·규칙세이프가드·closeness tier 게이트(
#377)는 동일 적용. 요청이 모호하면 암시 경로(제안·확인 S1b)로 폴백.
- ·이동요청 확인 → 생성(S2).
S1b · 암시 제안·확인
- 주석 · 암시 제안·확인
- 1규칙캐릭터는 자기 미디어만 제안(자기 활동/장소/외모). closeness tier 게이트(
#377). 후보 소재·억제 규칙(#368).
- ·동작[응]→생성. [괜찮아]/무시→현재 화제 재제안 금지.
S2a · 생성 중 (기본)
- Case A · 기본 로딩 (0~t1초)
- 1요소인-캐릭터 타이핑/로딩 인디케이터만. 진행률 %·"생성 중" 시스템 문구 금지(무색무취·인-캐릭터 원칙).
- ·규칙세이프가드 통과분만 생성 진입. 정상 완료 시 자동 전이 → 미리보기(S3).
S2b · 생성 중 (지연 안내)
- Case B · 지연 안내 (t1 초과)
- 1규칙임계 t1 초과 시(제안 ≈8초) 인-캐릭터 추가 멘트로 대기 유도 — 무반응 이탈 방지. 입력창 계속 활성(대화 가능).
S2c · 장기지연 / 내부 재시도
- Case C · 장기지연 / 내부 재시도 (t2 초과)
- 1규칙t2 초과 or 내부 페일오버(HF→아마존) 시. 표면은 계속 인-캐릭터 — 인프라 전환·"재시도" 노출 금지(사용자는 동일 경험).
- ·상태최종 타임아웃(t3) 초과 or 전 인프라 실패 → 생성 실패(S8, 미차감·인-캐릭터 재시도).
- ·데이터t1·t2·t3 임계값=열린 항목(운영 튜닝). 표시 문구는 케이스별 1종만, 반복 스팸 금지.
S3 · 미리보기
- 주석 · 미리보기
- 1요소저해상 썸네일(원본 대비 화질 명확히 낮춤). 이동탭→크게보기(한도 내 즉시 무료 / 초과 시 차감 S5).
- ·규칙무료 한도(무료 1/일·멤버십 3/일·자정 리셋)는 채팅에 미표시. 잔여·소진 안내는 크게보기 차감 시점(S5)에서만.
크게보기 · 과금
과금 포인트 = "크게보기(원본)". 한도 내 즉시 무료, 초과분은 차감 확인 후.
- 📡 호출 엔드포인트
- API
GET /conversation/credit — 크레딧 잔여 요약 조회.
- API
GET /conversation/albums/media · POST /conversation/albums/media/{idx}/view(1회 열람 차감) · GET /conversation/albums/media/{idx}/download — 크게보기 열람 시 차감(pay-to-view). #481 로 구현 완료.
S4 · 크게보기 (원본·무료/재열람)
- 주석 · 크게보기 (무료/재열람)
- 1요소원본(고해상). 규칙한도 내 무료분 or 소유분(무료 소비분·결제분) 재열람은 팝업 없이 즉시·추가 차감 없음.
- 2이동상단 앨범 이동(
#413). 인라인 크게보기 ↔ 앨범 크게보기 동일 화면.
- 3요소하단 다운로드 — 개별 크게보기에서만 노출(목록 일괄 다운로드 없음,
#413).
S5 · 크게보기 차감 확인
- 주석 · 크게보기 차감
- 1규칙한도 초과분만 차감. 첫 차감만 확인 다이얼로그, 이후 즉시. 소유분(무료한도·결제분)은 팝업 없이 바로.
- 2요소오늘 무료 크게보기 소진 현황(M/M) 표시 — 왜 차감되는지 맥락 제공. 앞 숫자는 한도를 넘겨 보이지 않는다(4/3 금지, 3/3 으로 표시).
- ·규칙문구는 무료 열람 잔여에 따라 갈린다(
#758) — 무료가 남았으면 "이 이미지가 유료라서 차감된다"는 성격의 문구를, 다 썼으면 "오늘 무료 열람을 모두 썼다"는 성격의 문구를 쓴다. 무료가 남아 있어도 유료(PREVIEW)로 굳은 이미지는 이 팝업을 거친다 — 유료 여부는 생성 시점에 정해지기 때문이다. 실제 문안은 담당자·디자인이 확정한다.
- 3요소팝업 내 보유 크레딧 잔액 표시(차감 후 잔액 가늠). 이 값은 설명 문구 쪽에 놓는다.
- 4요소강조 영역(어두운 회색 박스) — 팝업 맨 아래 한 줄. 규칙강조 영역은 설명 문구가 담지 않은 값을 담는다. 이 팝업은 설명이 보유 크레딧을 말하므로 강조가 차감(필요) 크레딧을 맡는다. 같은 숫자를 팝업 안에서 두 번 보여주지 않는다. 정본은
[[화면설계-04-03-인라인미디어]] 「차감 확인 팝업의 강조 영역 표기 규칙」(#967) — 호출 지점 5곳 대조표와 Figma 노드 대조표가 그 절에 있다. 확정 디자인은 4666-2987이며 「N Credits Required」로 그린다.
- ·규칙이 강조 박스는
#967로 새로 그려 넣은 요소다. 그 전까지 이 프레임은 팝업 안 문구를 줄로만 그려 어느 값이 강조로 올라가는지 드러나지 않았다. 앨범의 같은 팝업(화면-04-04-앨범.html A2)은 반대로 보유 크레딧을 강조에 둔다 — 어긋난 것이 아니라 같은 규칙을 각자의 설명 문구에 맞춰 적용한 결과다.
- ·데이터크레딧 차감=PAY 연계. 단가는 이미지 언락 1 · 영상 언락 3 크레딧이다(
[[결정-크레딧-차감단가표]] D43). 무료 한도(무료 1·멤버십 3/일) 수치=열린 항목.
S6 · 한도 후 채팅 업셀 유도
- 주석 · 한도 후 채팅 업셀 유도
- 1규칙한도 소진 후 업셀 팝업 없음. 캐릭터가 채팅으로만 더 보여주고 싶다고 흘림(자연스러운 유도).
- 2동작사용자가 요청할 때만 생성(S2) → 미리보기(S3) → 크게보기 시 차감(S5). 이동요청→생성.
- ·규칙크레딧/충전 유도는 크게보기 차감 시점(S5)에서만. 갑작스런 결제 모달 금지.
S7·S8 · 거절 / 실패
- 주석 · 거절 / 실패
- 1규칙세이프가드 위반=인-캐릭터 거절(시스템 에러 아님). 생성·차감 없음.
- 2상태생성 실패=인-캐릭터+재시도, 미차감.
0403_05 · 영상 업셀 (Phase 3)
크게보기한 이미지 위에 영상 업셀을 붙인다. 영상은 독립 트리거 없이 이미지에 종속된다(#370 · 결정-인라인미디어-영상-업셀 D45). 언락은 항상 유료(3크레딧, 무료 없음)이고, 생성은 수락한 뒤에 한다.
V1 · 영상 업셀 제안
- 주석 · 영상 업셀 제안
- 1요소크게보기한 이미지(원본). 이 이미지가 I2V 입력이 된다.
- 2요소이 이미지로 영상 만들어줘(◆3) 업셀 — 채팅 제안이 아니라 크게보기 이미지 하단에 바로 붙는다 — 크게보기 뒤 노출. 규칙영상은 독립 트리거 없이 이미지에 종속된다(#370·D45). 이동탭 → 언락 차감 확인(V2).
V2 · 영상 언락 차감 확인
- 주석 · 영상 언락 차감
- 1규칙버튼을 누르는 순간 차감·제작 신청이 함께 들어간다(항상 유료·무료 한도 없음, 3크레딧). 근거:
[[크레딧]] 단가표(D43).
V3 · 영상 생성중
- 주석 · 영상 생성중
- 1규칙수락 후 생성(미리 안 만듦 — 영상 느림·고비용). 인-캐릭터 대기. 데이터그 이미지를 입력으로 I2V(
#294·#331 재사용). HF 지연·실패는 인-캐릭터 폴백(미차감).
V4 · 영상 크게보기 (재생)
- 주석 · 영상 재생
- 1규칙완성되면 미리보기 없이 바로 크게보기(재생)한다 — 요청 시 이미 차감했으므로 완성이 곧 열람이다(이미지의 미리보기→크게보기와 다르다). 요소원본 영상(16:9·1280×720·rewind 없는 원본,
#432)·재생 컨트롤·다운로드. 소유분 재열람 무차감.
재진입 · 히스토리 복원
채팅을 나갔다 다시 들어오면 과거 미디어를 타임라인 제자리에 버블로 복원한다. 근거: 결정-인라인미디어-히스토리복원-스트림앵커(D36, 옵션 B) · #528(BE) · #529(FE).
- 📡 호출 엔드포인트
- API
POST /conversation/enter — 재진입 히스토리 로드. 응답 메시지에 미디어 앵커(media)를 앨범 열람 상태와 병합해 포함
- API
POST /conversation/previous — 위로 스크롤 시 이전 페이지. enter와 동일하게 media 포함
S9a · 재진입 복원 (OWNED·원본)
- 주석 · 재진입 복원 (열람 완료분)
- 1동작재진입 시
enter로 히스토리 로드. 위로 스크롤하면 previous로 이전 페이지를 잇는다.
- 2요소OWNED(열람 완료) = 원본 표시·블러 없음·배지 없음. 이동탭→크게보기(S4) 재열람 무차감(팝업 없음).
- ·규칙버블 위치의 정본은 대화 스트림 앵커(
personaAlbumIdx·스트림 index·createAt). 앨범을 시각순 삽입하는 방식(옵션 A)은 쓰지 않는다.
- ·규칙복원 대상은 그 대화(
conversationId) 스코프로 한정. 실패 건도 히스토리 응답 media.status=FAILED(BE arwen_docs#672)인 앵커가 있으면 기존 실패 상태(S8)로 복원하고, 생성 중 미디어는 enter 응답 pendingMedia[]에 한해 로딩 placeholder(S9c)로 복원한다(arwen_docs#563).
S9b · 재진입 복원 (PREVIEW·블러+배지)
- 주석 · 재진입 복원 (미열람분)
- 1요소PREVIEW(미열람) = 블러(흐림) 오버레이로 덮는다. 앨범 그리드의 저해상+오버레이와 같은 시각 규칙(#435).
- 2요소비용 배지 ◆N — 단가는 이미지 언락 1 · 영상 언락 3 크레딧이다(
[[결정-크레딧-차감단가표]] D43). 다만 배지가 붙는 것은 이미지뿐이다 — 영상은 요청 순간 선불로 차감해 이미 OWNED다([[결정-인라인미디어-영상-업셀]] D45). 이동탭→차감 확인(S5)→크게보기(S4).
- ·데이터열람 상태는 스트림에 박지 않고 조회 시
PersonaAlbum.view_status에서 재해석(상태 이중화 방지, D36).
- ·규칙차감은 미디어당 1회. 앨범·히스토리 어느 쪽에서 결제해도 양쪽이 함께 OWNED로 바뀐다(같은
personaAlbumIdx).
0403_04 · 확장웹(넓은 화면) 레이아웃
1025px 이상에서 확장웹이 켜진다. 새 레이아웃이 아니다 — 420px 모바일 뷰를 좌측에 그대로 두고, 우측에 596px 캐릭터 패널을 덧붙여 1077px 박스로 중앙 정렬한다. 근거: 결정-확장웹-레이아웃-골격(D37, A-1·D-1·E-1·G) · #540.
- 📐 골격 픽셀값 (KB 정본 = D37)
- 규칙분기점 1025px 이상 —
LayoutExpand.vue:335 · ChatConversationView.vue:2099
- 규칙콘텐츠 폭 900px, 1201px 이상에서 1076px —
main.scss:26 · :38-40. Figma 박스는 1077px(1px 차이라 사실상 같다)
- 규칙좌 컬럼 420px —
_variables.scss:2 · ChatConversationView.vue:1975 / 우 캐릭터 패널 596px(Figma 실측)
- 규칙우측 패널은 1023px 이하에서 사라진다 —
ChatPersonaExpand.vue:418-422. 하단 탭 내비게이션은 없다
- 상태확장웹 전용 상태를 두지 않는다. 좌측 컬럼 폭이 모바일과 같아 S0~S9c 15상태가 그대로 유효하다. 아래 3프레임은 골격 배치만 보인다
E1 · 확장웹 골격 (대화 · 미리보기)
- 주석 · 확장웹 골격
- 1요소헤더 1077×56 — 좌우 컬럼 위를 가로지른다. 컬럼마다 따로 두지 않는다.
- 2규칙좌 420px — 모바일 화면이 그대로 들어온다. 대화·미디어 버블 크기와 배치가 모바일과 같다.
- 3요소우 596px 캐릭터 패널(이미지 전면 + 하단 dim). 규칙1023px 이하에서 사라진다(
ChatPersonaExpand.vue:418-422).
- ·규칙하단 탭 내비게이션이 없다 —
LayoutExpand.vue 템플릿에 NavigationBar가 없다.
E2 · 크게보기 (S4) — 시트가 좌측 카드 안에서 올라온다
- 주석 · 확장웹 크게보기 (D37 D-1)
- 1규칙크게보기 바텀시트가 좌측 채팅 카드 영역 안에서만 올라온다. 화면 전체를 덮지 않는다. 데이터
ChatMediaViewer.vue:4가 layout-type="expand"를 넘기고, PopupBottomSheet.vue:313-323이 1025px 이상에서 시트를 좌측으로 가둔다.
- 2규칙시트가 떠 있어도 우측 캐릭터가 가려지지 않고 계속 보인다. Figma 모달 선례
#2052:3500과 같은 규칙이다.
- ·요소시트는 좌측 카드를 가득 채운다 —
ChatMediaViewer.vue:95-122가 패널을 height:100%·모서리 반경 0으로 덮어쓴다.
- ·규칙앨범 크게보기는 풀페이지로 남는다(D37 F-1 — 두 화면의 패턴 차이를 유지한다).
화면-04-04-앨범.html E2 참고.
E3 · 차감 확인 팝업 (S5) — 좌측 카드 안
- 주석 · 확장웹 차감 팝업 (D37 E-1)
- 1규칙차감 확인 팝업도 좌측 채팅 카드 영역 안에 뜬다. 데이터
ChatMediaChargePopup.vue:8 + PopupBasic.vue:177-187.
- 2규칙팝업이 떠도 우측 캐릭터는 가려지지 않는다. 어둡게 덮는 범위(dim)가 좌측 컬럼에 한정된다.
- 3요소강조 영역은 모바일 S5와 같다. 확장웹이라고 다른 값을 올리지 않는다 — 좌측 컬럼이 420px로 모바일과 같아 팝업 내용이 그대로 유효하다. 정본은
[[화면설계-04-03-인라인미디어]] 「차감 확인 팝업의 강조 영역 표기 규칙」(#967).
- ·상태재진입 복원 S9a·S9b도 모바일과 같다(D37 G) — 좌측 컬럼이 420px로 모바일과 같아 버블 크기·블러·비용 배지(◆N) 값이 달라지지 않는다.
- ·규칙확인 필요 — 정확히 1024px 구간은 어느 분기에도 걸리지 않는다(확장
min-width:1025px / 패널 숨김 max-width:1023px). 의도인지 실수인지 확인하지 못했다.
전체 4섹션 15상태 + 확장웹 골격 3프레임. 15상태: S0 대화기본 · S1a 명시요청 · S1b 암시제안 · S2a·b·c 생성중(케이스) · S3 미리보기 · S4 크게보기(무료/재열람) · S5 크게보기 차감 · S6 채팅 업셀 · S7·S8 거절/실패 · S9a·S9b·S9c 재진입 복원(OWNED 원본 / PREVIEW 블러+배지 / 생성 중 로딩 placeholder). 확장웹 3프레임(E1 골격 · E2 크게보기 시트 · E3 차감 팝업)은 새 상태가 아니라 골격 배치다 — 좌측 컬럼이 420px로 모바일과 같아 15상태가 그대로 유효하다. 앨범 화면은 #413(기획)·#431(디자인) 별도. 근거: 인라인-미디어-생성.md · #368 정책 코멘트 · #519(D36 재진입 복원) · #537(명세 반영) · #540(D37 확장웹 골격).