화면 04 · 채팅 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page node 28:339 "04. 채팅" · 허브 노트: 화면-04-01-채팅.md
10개 섹션 · 45개 상태 프레임 · 대화 목록·본문·이미지 생성·캐릭터 정보·토스트·확장 웹 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)

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

04_00 · 채팅 목록 진입

채팅 탭 첫 화면. 대화 내역이 없으면 빈 상태, 있으면 캐릭터별 대화 카드 목록. 하단은 공통 탭 메뉴. 라우트 chat-list · /chats.

📡 호출 엔드포인트
APIGET /conversation — 대화 목록 조회(비면 빈 상태)

목록 · 내역 없을 때

Chats 1

아직 대화가 없어요

캐릭터를 만들고 첫 대화를 시작해 보세요. 2

주석 · 목록 빈 상태
1요소상단 헤더(layout/header). 목록 화면 제목 "Chats".
2데이터목록 조회 GET /conversation 결과가 비면 빈 상태 안내를 그린다. 근거: ChatListView.vue.
3이동하단 탭 메뉴(layout/bottom_menu) My character·Chats·Mypage. 다른 탭은 이 화면군 밖.

목록 · 내역 있을 때

Chats

IMG

오후 2:14 2 ▨3 3

IMG

어제

IMG

03.26 ▨1

주석 · 대화 카드 목록
1이동카드 클릭 → 해당 캐릭터 대화 본문(chat-conversation · /chat/conversation/:personaIdx). :personaIdx는 어떤 캐릭터와의 대화인지 가리키는 경로 변수.
·요소카드 = 프로필 사진 + 이름 + 마지막 메시지 + 시각(Chat/bubble 아닌 목록 box).
2요소마지막 메시지 시각.
3요소이미지가 있으면 이미지 개수 배지(icon-image-12)를 붙인다.
·데이터목록 조회 GET /conversation. 근거: ChatListView.vue.

04_01 · 첫 진입 튜토리얼

처음 들어온 사용자에게 기능을 안내 상자(layout/tutorial-box)로 안내한다. 각 단계는 제목·설명·단계 표시·Skip·Previous·Next(마지막은 Done)를 담는다. 모바일은 6단계(Studio·Album·Expand character·Character information·Character chat·Report), 확장 웹은 5단계다 — 확장 웹은 우측에 라이브 프로필이 상시 노출돼 "Expand character" 단계를 건너뛴다(근거: arwen_docs#581, 확장 웹 레이아웃 확정 — 우 라이브 프로필 고정·좌 모바일 사이즈 채팅). 2026-07-21 개편(arwen_docs#581) 전에는 4단계였고 Album 단계가 없었다. Report 단계는 arwen_docs#1589에서 6번째로 더했다. 이 단계의 시안은 모바일 크기만 있고, 확장 웹은 같은 방식으로 왼쪽 대화 열의 예시 말풍선을 안내한다(arwen_docs#1654).

📡 호출 엔드포인트
APIPOST /conversation/tutorial — 튜토리얼 확인 저장(Skip·Done)

튜토리얼 · 1 / 6

‹ 캐릭터 이름 ▨Studio 1

캐릭터 배경 이미지

주석 · 튜토리얼 1단계
1요소헤더 우측 Studio(구 Generate, arwen_docs#581 개편) 버튼. 1단계가 이 버튼을 가리킨다.
2요소안내 상자(layout/tutorial-box). "캐릭터와 함께 이미지·영상을 만들고 프로필을 꾸며보세요."
3이동Skip → 튜토리얼을 즉시 닫고 대화 본문으로.
4이동Next → 다음 단계.
·데이터튜토리얼 확인 처리 POST /conversation/tutorial. 근거: ChatConversationView.vue.

튜토리얼 · 2 / 6 신규

‹ 캐릭터 이름

주석 · 튜토리얼 2단계 (신규 · arwen_docs#581)
1요소입력 바 좌측 앨범 아이콘(icon-album-24, 신규). 2단계가 이 버튼을 가리킨다. "지금까지 만든 이미지·영상을 한곳에서 모아볼 수 있어요."
2요소안내 상자. 단계 표시 2 / 6.
3이동Previous → 이전 단계(1단계). 2단계부터 Previous가 나타난다.
·상태이 스텝은 arwen_docs#581에서 신설했다. 채팅 화면에 새로 생긴 앨범 버튼을 안내한다.

튜토리얼 · 3 / 6

‹ 캐릭터 이름

주석 · 튜토리얼 3단계
1요소목록 아이콘(icon-list-24). "캐릭터를 크게 보고 대화 기록도 더 볼 수 있어요."
2요소안내 상자. 단계 표시 3 / 6.
3이동Next → 다음 단계.
·분기확장 웹은 이 3단계를 노출하지 않는다(arwen_docs#581 DoD). 확장 웹은 우측에 라이브 프로필이 상시 노출돼("우 라이브 프로필 고정·좌 모바일 사이즈 채팅" 확정 구조) "캐릭터를 확대해서 보라"는 안내가 성립하지 않는다. 별도 확장 웹 전용 프레임은 없다 — FE가 레이아웃 조건으로 이 단계만 건너뛰고 나머지 5단계를 이어간다(모바일 4/6→확장 웹 3/5, 모바일 5/6→확장 웹 4/5, 모바일 6/6→확장 웹 5/5로 번호를 다시 매긴다).

튜토리얼 · 4 / 6

‹ 캐릭터 이름

주석 · 튜토리얼 4단계
1요소정보 아이콘(icon-info-24). "캐릭터의 정보를 확인할 수 있어요."
2요소안내 상자. 단계 표시 4 / 6.
3이동Next → 다음 단계.
·상태확장 웹에서는 이 단계가 3 / 5로 번호만 바뀐다(3단계 Expand character 제외 결과).

튜토리얼 · 5 / 6

‹ 캐릭터 이름

주석 · 튜토리얼 5단계
1요소입력 바. "캐릭터와 자유롭게 대화를 나눠보세요."
2요소안내 상자. 단계 표시 5 / 6.
3이동Next → 다음 단계(Report).

튜토리얼 · 6 / 6 신규

‹ 캐릭터 이름

주석 · 튜토리얼 6단계 (신규 · 마지막 · arwen_docs#1589)
1요소예시 말풍선. 화면의 실제 말풍선이 아니라 정해진 예시 말풍선을 비춘다(arwen_docs#1654 결정 ④). 다른 스텝이 정해진 모양을 비추는 것과 같은 방식이다. 시안 문구는 영문이다("I noticed you checking me out. Mind if I join you for a bit?"). 국문은 개발 단계에서 넣는다.
2요소안내 상자. 제목 Report, 설명 "Press and hold a message, or right-click it to report."(길게 누르거나 오른쪽 클릭하면 신고). 단계 표시 6 / 6. 키보드 안내는 넣지 않는다 — Mac Safari는 키보드 경로가 없고 지원 범위 밖이다(arwen_docs#1654 결정 ①).
3이동마지막 단계 완료 → 튜토리얼 닫고 대화 본문으로. POST /conversation/tutorial로 확인 상태 저장. 확장 웹에서는 5 / 5로 번호만 바뀐다.
·상태확장 웹: 전용 프레임은 없다. 왼쪽 대화 열(폭 420px) 안의 예시 말풍선을 안내하고, 오른쪽 캐릭터 패널은 가리키지 않는다(arwen_docs#1654 결정 ②).
·규칙예시 말풍선 뒤 가림막은 시안에 그리지 않는다. 이미 메시지가 쌓인 방에서 튜토리얼이 열릴 때만 구현이 뒤를 가린다(가운데 불투명, 위 24px·아래 12px 흐림). 구현자는 «시안에 없다»는 이유로 지우지 않는다(arwen_docs#1654 결정 ③).

04_01_01 · 대화 튜토리얼

대화 자체를 익히도록 돕는 단계별 질문. 추천 문구(프리셋)를 눌러 대화를 이어간다. list mode로 배경 없이 목록형으로도 볼 수 있다. 데이터: 추천 문구 POST /conversation/preset.

📡 호출 엔드포인트
APIPOST /conversation/preset — 추천 문구(프리셋) 대화 진행

대화 튜토리얼 · 첫인사

‹ 캐릭터 이름

캐릭터 배경 이미지

2026.03.27

04_02 · 대화 본문

캐릭터와 메시지를 주고받는 핵심 화면. 상단 캐릭터 배경 위에 말풍선이 쌓이고 하단 입력 바가 고정된다. 답변은 SSE로 한 글자씩 흘러온다. 라우트 chat-conversation · /chat/conversation/:personaIdx.

📡 호출 엔드포인트
APIPOST /conversation/enter — 입장 · POST /conversation/previous — 이전 메시지
APIPOST /conversation/stream — 답변 스트리밍 SSE · POST /conversation/cancel — 답변 멈춤

대화 · default

‹ 캐릭터 이름 1 ▨Studio 2

캐릭터 배경 이미지 3

2026.03.27 4

주석 · 대화 본문 기본
1데이터입장 시 POST /conversation/enter. 스크롤 올리면 이전 메시지 POST /conversation/previous.
2이동헤더 우측 Studio → 이미지 생성 화면(chat-generate-image · /chat/generate-image/:personaIdx).
3요소상단에 캐릭터 사진이 배경으로 깔리고 위·아래에 딤이 겹친다.
4요소날짜 구분선. 날이 바뀌면 대화 사이에 들어간다.
5요소캐릭터 말풍선(Chat/bubble, 왼쪽·회색). 이 페이지에서 가장 많이 쓰는 컴포넌트.
6이동목록 아이콘(icon-list-24) → list mode.
7이동정보 아이콘(icon-info-24) → 캐릭터 정보 모달.
8데이터입력·전송 시 답변 스트리밍 POST /conversation/stream([[POST-conversation-stream]], SSE). 화면은 useStreamingText로 글자를 이어 붙인다. 근거: ChatConversationView.vue 226행.

대화 · 라이브 프로필 준비 중

‹ 캐릭터 이름 ▨Studio

정적 프로필 사진 ☺ 표정 준비 중 1

주석 · 라이브 프로필 준비 중 (PREPARING)
1요소정적 프로필 사진 좌하단의 알약형 배지 표정 준비 중(Figma 영문 Preparing expression..., 웃는 얼굴 아이콘). 대화를 막지 않는 오버레이(덮어 얹는 요소)다.
·자리배지는 모바일에서 대화 영역 바로 위(그 영역 윗변에서 4), 왼쪽 여백 16이다. 확장 웹은 패널 좌상단(16, 16)이다. 사진 영역이 아니라 대화 영역에 맞춘 까닭 — 사진 영역은 가로(1:1) 기준, 대화 영역은 세로(%) 기준이라 화면 비율이 달라지면 경계가 어긋난다(2026-10-06, arwen_docs#1660).
·규칙배지는 타이머가 아니라 생성 상태로 끈다. 완성 알림이 오면 완성 안내 토스트와 Live 배지로 바뀌고, 실패이거나 5분 안에 신호가 없으면 조용히 사라진다. 에러 문구는 없다. 정본 [[결정-라이브프로필-준비중안내]](D99).
·데이터신호는 WebSocket 이벤트 persona.profile.default.completed(status SUCCESS/FAILED). [[websocket-event-채널]].
·동작배지의 웃는 얼굴 이모지는 움직인다. 참고는 Figma 배지 주석의 CodePen Happy 동작이다. 이모지는 DSG Library 컴포넌트 icon-emoji-smile-14이고, 변형을 놓인 순서대로 1 smile/Default · 2 smile/left · 3 wink/front · 4 wink/left · 5 laugh/front 라 부른다. 움직임 순서는 1 → 5 → 2 → 4 → 3 → 1이다(2026-10-06 Figma 노드 1593-391 대조로 확정 — 더 이상 가정이 아니다). 얼굴이 왼쪽으로 옮겨 가는 거리는 2다(코드펜의 5px 는 지름 100 짜리 얼굴 기준이라 14px 아이콘에 그대로 쓰지 않는다). 입은 다섯 변형에서 모두 같다 — 변형을 가르는 것은 눈과 좌우 위치뿐이다. 윙크 때 하트(코드펜 그래픽 그대로, 크기 4)가 얼굴 왼쪽 바깥 눈높이에서 떠올랐다 사라진다. 시간과 전환은 코드펜 기준(한 바퀴 약 4.2초)이고 쉬는 시간 없이 계속 반복한다. 「동작 줄이기」 설정을 켠 사용자에게는 움직이지 않는 1번(smile/Default)을 보여준다. 퍼블리싱은 끝났다(arwen_docs#1660) — 움직임 라이브러리 없이 SVG 의 <animate> 로 그렸다. 프론트엔드 반영(#1360)이 다음이다.
·상태준비 중 안내는 프로필 자리의 이 배지 하나로 충분하다고 정했다. 그래서 인트로 토스트(같은 안내를 한 번 더 띄우는 것)는 두지 않는다.

대화 · 라이브 프로필 완성 안내 토스트

‹ 캐릭터 이름 ▨Studio

정적 프로필 사진 Live 2

☺ ○○의 표정이 살아났어요 1

주석 · 라이브 프로필 완성 (READY) — 안내 토스트
1요소완성 알림이 오면 화면 위쪽(헤더 위)에 어두운 알약형 토스트로 ○○의 표정이 살아났어요(Figma 영문 Character's Name's expression came to life!)를 한 번 보여주고 저절로 사라진다. ○○는 캐릭터 이름이다.
2요소토스트와 함께 프로필 사진 좌상단에 Live 배지(붉은 점)가 나타난다. 토스트가 사라진 뒤에도 배지는 남는다(다음 프레임).
·규칙이미 본 토스트는 대화방에 다시 들어와도 되풀이하지 않는다(revealed 표시). 이 표시를 서버와 기기 중 어디에 저장할지는 미정이며 #1360에서 정한다.
·규칙이미지 생성 완료 토스트(04_06)와 같은 자리를 쓴다. 앱의 토스트 자리는 레이아웃마다 한 벌뿐이라 둘은 겹쳐 보이지 않고 뒤에 온 것이 앞의 것을 덮어쓴다(2026-10-06 실측, arwen_docs#1660). 완성 안내는 한 번만 보여주는 것이라 덮이면 되살릴 수 없으므로 완성 안내를 먼저 보이고 이미지 완료를 뒤로 미룬다. 미루는 차례는 #1360에서 다룬다.
·자리Live 배지는 모바일에서 헤더 아래(헤더 끝에서 8), 왼쪽 여백 16이다. 확장 웹은 패널 좌상단으로 준비 중 배지와 같다(2026-10-06, arwen_docs#1660).

대화 · 라이브 프로필 (완성 뒤)

‹ 캐릭터 이름 ▨Studio

라이브 프로필 Live 1

주석 · 라이브 프로필 (완성 뒤 상시 상태)
1요소프로필 사진이 표정에 따라 움직이는 동안 좌상단에 Live 배지(붉은 점)를 상시 표시한다. 토스트는 없다.

대화 · 나의 답변

‹ 캐릭터 이름 ▨Studio

1상태사용자 답변은 오른쪽 어두운 말풍선, 캐릭터 답변은 왼쪽 회색 말풍선으로 구분한다.

대화 · typing

‹ 캐릭터 이름 ▨Studio

• • • 1

1상태캐릭터가 답을 만드는 중. SSE로 글자가 이어 붙기 직전의 대기 표시.
2상태입력창에 글자를 적는 중(Chat/text_field). 전송하면 POST /conversation/stream 호출.

대화 · scroll

‹ 캐릭터 이름 ▨Studio

2026.03.26 1

1상태위로 스크롤하면 배경 이미지가 걷히고 지난 대화가 쌓여 보인다. 더 올리면 POST /conversation/previous로 이전 메시지를 더 부른다.

대화 · stop

‹ 캐릭터 이름 ▨Studio

1데이터답변 스트리밍 중에는 전송 대신 '멈춤' 버튼이 뜬다. 누르면 cancelConversation → POST /conversation/cancel로 생성을 끊는다.

대화 · list mode

‹ 캐릭터 이름 ▨Studio

2026.03.27

1상태캐릭터 배경 이미지를 걷어내고 말풍선만 목록형으로 본다. 다시 누르면 배경 대화(default)로 돌아간다.

대화 · 성인 대화 감지 팝업

‹ 캐릭터 이름 ▨Studio

주석 · 성인 대화 감지
1규칙대화에서 성인용 내용이 감지되면 확인 팝업(popup)이 뜬다. 유해성 필터 [[세이프가드]]와 맞닿는다.
2이동Cancel → 팝업 닫고 대화로 복귀(성인 대화 중단).
3이동Confirm(18세 이상 확인) → 팝업 닫고 대화 계속.

대화 · 세이프가드 위반 안내

‹ 캐릭터 이름 ▨Studio

주석 · 세이프가드 위반 안내 (arwen_docs#401)
1규칙사용자 발화가 [[세이프가드]] 위반으로 판정되면, 대화방을 나갔다 다시 들어올 때 이 팝업이 매번 뜬다. 세이프가드는 사후 기록이라 대화를 막지 않는다 — 성인 대화 감지 팝업과 동시 조건이면 그쪽이 먼저 노출된다.
2이동OK → 팝업 닫고 대화 계속(차단 아님, 단순 고지).

대화 · AI 캐릭터 고지 팝업 신규

‹ 캐릭터 이름 ▨Studio

주석 · AI 캐릭터 고지 팝업 (스토어 AI 고지 요건, arwen_docs#1276·#1539)
1규칙캐릭터별로 그 캐릭터와의 채팅에 처음 들어올 때 1회만 뜬다. 대화 본문(chat-default) 위에 뜨는 자리 하나로 확정됐다(디자이너 확인, 2026-09-18) — 첫 진입 튜토리얼(04_01) 쪽에는 더 이상 별도로 두지 않는다.
2이동OK → 팝업 닫고 대화 계속.
·규칙디자인은 영문으로만 만든다. 국문은 별도로 디자인하지 않고, [[스토어-메타-정책-선언표]]의 국문 확정 문구를 개발 단계에서 그대로 붙여 넣는다(디자이너 확인, 2026-09-18).

대화 · 프로필 커스텀 최종 실패 재시도 확인

‹ 캐릭터 이름 ▨Studio

주석 · 프로필 커스텀 최종 실패 재시도 확인 (D56 · arwen_docs#786)
1규칙채팅 진입 시 GET /member/persona/profile/list로 보관함 목록을 조회해, active=true && completionStatus="FAILED"인 프로필이 있으면 이 팝업을 띄운다. 감정 영상 자동 재시도 3회가 모두 실패한 상태다. 성인 대화 감지·세이프가드 위반 안내 팝업보다 나중에 노출한다.
2이동다시 시도 → POST /member/persona/profile/{profileIdx}/retry 호출. 상태가 PENDING으로 돌아가고 자동 재시도 3회가 새로 부여된다. 추가 크레딧 차감 없음. 팝업 닫고 대화 계속.
3이동포기하기 → POST /member/persona/profile/{profileIdx}/reset 호출. 이전 프로필 복원 + 크레딧 환불(응답의 refundedCredit 값 표시, 만료 크레딧은 제외돼 10보다 작을 수 있음). 물리 삭제 아님(D54). 팝업 닫고 대화 계속.

04_03 · 이미지 생성 완료 배지

이미지 생성이 끝났음을 대화 말풍선 자리에 배지로 알린다. 배지를 누르면 결과(앨범)로 이동한다.

📡 호출 엔드포인트
APIWebSocket /topic/member/{memberIdx} — 이미지 생성 완료 알림 구독

완료 배지 · 단일

‹ 캐릭터 이름 ▨Studio

IMG

이미지 생성 완료 1

1이동이미지 생성이 끝나면 대화 흐름에 완료 배지가 뜬다. 눌러서 결과(앨범)로 이동. 완료 신호는 WebSocket으로 받는다([[WebSocket-알림]]).

04_04 · 캐릭터 정보

대화 중 정보 아이콘을 누르면 아래에서 캐릭터 정보 모달이 올라온다. 이름·나이·지역·직업·관계·호감도·관심사를 항목 카드로 나열한다. 호감도는 하트 5칸으로 본다.

캐릭터 정보 · Modal

‹ 캐릭터 이름

캐릭터 정보 1

AI 캐릭터 신규 5

🙂

이름 · 나이 · 지역 2

💼

직업 · 관계

♥

호감도 3

♥ ♥ ♥ ♡ ♡

✦

관심사

Close 4

주석 · 캐릭터 정보 모달
1요소대화 하단 정보 아이콘(icon-info-24)을 누르면 아래에서 올라오는 모달로 캐릭터 정보를 본다.
2요소항목 카드로 이름·나이·지역·직업·관계·관심사를 나열한다.
3요소호감도는 하트 5칸(icon-heart-20)으로 채움 정도를 표시한다.
4이동Close → 모달을 닫고 대화로 복귀.
5요소「AI 캐릭터」 라벨(영문 「AI character」) — 캐릭터가 실제 사람이 아닌 AI임을 상시 고지한다. 스토어 AI 고지 요건, 문구는 [[스토어-메타-정책-선언표]]가 정본(arwen_docs#1276·#1539).
·상태내용이 길면 모달을 전체 높이(full)로 펼친다.

캐릭터 정보 · Modal full

‹ 캐릭터 이름

캐릭터 정보 1

AI 캐릭터 신규 2

🙂

이름 · 나이 · 지역

💼

직업 · 관계

♥

호감도

♥ ♥ ♥ ♥ ♡

✦

관심사

📝

소개

1상태정보가 많으면 모달이 화면을 거의 다 덮는 full 높이로 펼쳐진다. 스크롤로 나머지 항목을 본다.
2요소「AI 캐릭터」 라벨 — persona-modal과 동일하게 full 높이에서도 상시 노출한다(arwen_docs#1539).

캐릭터 정보 · 변경 알림

‹ 캐릭터 이름

1상태대화가 진행되며 호감도 등 캐릭터 정보가 바뀌면 변경 알림을 띄운다. 확인하면 갱신된 정보 모달로 이어진다.

04_05 · 이미지 생성

장면을 글로 적어 캐릭터 이미지를 만든다. 헤더 우측에 보유 크레딧이 보인다. 생성은 즉시 끝나지 않고 WebSocket으로 완료를 받는다. 라우트 chat-generate-image · /chat/generate-image/:personaIdx.

📡 호출 엔드포인트
APIPOST /conversation/generateImage — 이미지 생성 요청
APIPOST /conversation/albums — 생성 앨범 조회 · GET /conversation/credit — 잔여 크레딧 조회
APIWebSocket /topic/member/{memberIdx} — 생성 완료 알림 구독

이미지 생성 · default

‹ 이미지 생성 ◈12 1

어떤 장면을 만들까요?

의상·표정·분위기·화풍을 적을 수 있어요. 2

결과

No content 3

장면 설명

장면을 입력하세요… 4

주석 · 이미지 생성 기본
1데이터헤더 우측 보유 크레딧. 잔여 확인 GET /conversation/credit. 크레딧 정책은 [[크레딧]].
2요소무엇을 적을 수 있는지(의상·표정·분위기·화풍) 안내.
3상태아직 결과가 없으면 "No content"를 보여준다.
4요소장면 설명 입력칸(Input/input-textarea).
5데이터입력 전에는 CTA(button/CTA)가 비활성(흐림). 누르면 크레딧 소모 안내 팝업 → 생성 요청 POST /conversation/generateImage.

이미지 생성 · 크레딧 소모 안내 팝업

‹ 이미지 생성 ◈12

햇살 좋은 카페, 미소, 파스텔 화풍

주석 · 크레딧 소모 안내
1규칙생성 전에 크레딧 소모를 안내한다. 입력한 프롬프트 자체는 생성 뒤 결과 화면의 프롬프트 보기 바텀시트에서 확인한다([[화면설계-04-01-채팅]] §규칙).
2데이터차감·보유 크레딧 값의 정본은 [[크레딧]]. 표시값(-1)은 잠정값이며, 이미지 1회 차감값 확정은 #521이 담당한다.
3데이터Confirm → 생성 요청 POST /conversation/generateImage → 생성중 화면.

이미지 생성 · 생성중

‹ 이미지 생성 ◈11

결과

◐이미지를 만드는 중… 1

장면 설명

햇살 좋은 카페, 미소, 파스텔 화풍

1상태요청 뒤 결과를 기다린다. 크레딧이 1 차감된다(11).
2데이터완료 알림은 WebSocket으로 받는다. 화면은 /topic/member/{memberIdx}를 구독한다(근거: notification.ws.ts 124행). 완료 시 POST /conversation/albums로 앨범을 갱신한다.

이미지 생성 · 완료 (1282px)

‹ 이미지 생성 ◈11

결과 이미지 1 ⤓ 2👤

생성된 이미지(앨범) 3

IMG

장면 설명

햇살 좋은 카페, 미소, 파스텔 화풍 4

주석 · 이미지 생성 완료
1상태생성이 끝나면 위에 큰 결과 이미지가 보인다. 프레임 높이가 1282px로 늘어난다.
2동작내려받기 아이콘(icon-download-24)으로 결과 이미지를 저장한다.
3이동생성 결과 묶음(앨범)이 가로로 늘어선다(POST /conversation/albums). 썸네일을 눌러 크게 본다.
4요소입력칸에 사용한 장면 설명 문구가 남는다.
5데이터다시 Generate → 크레딧 소모 안내 후 POST /conversation/generateImage 재요청(크레딧 추가 소모).

이미지 생성 · 실패 썸네일

‹ 이미지 생성 ◈11

생성된 이미지(앨범)

⚠실패 1

↻ 2

1상태생성이 실패하면 해당 썸네일 자리에 실패 표시가 남는다.
2동작다시 시도(재생성) → 생성중으로 되돌아간다.

이미지 생성 · 이미지 선택

‹ 이미지 보기

선택한 이미지 크게 보기 1

1동작앨범 썸네일을 누르면 그 이미지를 크게 본다. 내려받기·프로필 지정 등을 할 수 있다.

이미지 생성 · 딜레이 안내

‹ 이미지 생성 ◈11

생성 중…

1규칙생성이 오래 걸리면 딜레이 안내를 띄운다. 완료는 WebSocket 알림으로 받으므로 화면을 벗어나도 된다.

이미지 생성 · 정책 위반 안내

‹ 이미지 생성 ◈12

금지된 장면 설명…

1규칙정책 위반 콘텐츠는 생성을 막고 안내한다. 유해성 필터 [[세이프가드]]가 판정한다. 크레딧은 소모되지 않는다.

이미지 생성 · 크레딧 소진 안내

‹ 이미지 생성 ◈0 1

장면 설명…

주석 · 크레딧 소진
1데이터잔여 크레딧이 0이면(GET /conversation/credit) 생성이 막힌다.
2규칙크레딧 소진 안내를 띄운다. 정책은 [[크레딧]].
3이동충전하기 → 크레딧 충전(이 화면군 밖).

04_06 · 이미지 생성 완료 알림 (토스트)

이미지 생성 완료를 위에서 잠깐 떠오르는 토스트로 알린다. 배경(이미지 위·블랙 배경 위)에 따라 대비를 맞춘다. 완료 신호는 WebSocket으로 온다.

📡 호출 엔드포인트
APIWebSocket /topic/member/{memberIdx} — 이미지 생성 완료 알림 구독

토스트 · 이미지 위

‹ 캐릭터 이름

캐릭터 배경 이미지

IMG

이미지 생성 완료 1

1데이터WebSocket으로 완료 알림을 받으면(/topic/member/{memberIdx}) 위에서 토스트가 잠깐 뜬다. 누르면 결과(앨범)로 이동.

토스트 · 블랙 배경 위

‹ 캐릭터 이름

IMG

이미지 생성 완료 1

1상태어두운 배경 위에서도 토스트가 잘 보이도록 밝은 카드로 대비를 준다. 동작은 이미지 위 토스트와 같다.

토스트 · 배경 이미지 위

‹ 캐릭터 이름

캐릭터 배경 이미지

IMG

이미지 생성 완료 1

1상태캐릭터 배경 이미지 위에 뜨는 토스트다. 배경과 대비를 주려고 밝은 카드로 표시한다. 동작은 이미지 위 토스트와 같다(WebSocket /topic/member/{memberIdx}, 누르면 결과 앨범으로 이동).

04_02_02 · 대화 본문 · 확장 웹

대화 본문의 큰 화면(웹, 1920 너비) 레이아웃. 좌측 대화(list mode) 421px와 우측 캐릭터 패널 596px을 2열로 배치한다. 저해상도 킷은 모바일 기준이라 여기선 좌우 2열 구조만 개략으로 본다.

📡 호출 엔드포인트
APIPOST /conversation/stream — 답변 스트리밍 SSE(모바일과 동일)

확장 웹 · default list mode

‹ 캐릭터 이름 ▨Studio 1

메시지 입력…

➤

캐릭터 이미지 영역 2

주석 · 확장 웹 대화
1이동우측 상단 Studio → 이미지 생성 확장 웹.
2상태넓은 화면에서는 대화를 좌측(421px)에 두고 캐릭터 이미지를 우측(596px)에 나란히 본다. 엔드포인트·스트리밍은 모바일과 같다(POST /conversation/stream, SSE). 근거는 Figma #1910:1776과 arwen_fe: LayoutExpand.vue:20-27이다.

확장 웹 · 라이브 프로필 준비 중

‹ 캐릭터 이름 ▨Studio 1

메시지 입력…

➤

캐릭터 이미지 영역☺ 표정 준비 중 1

주석 · 확장 웹 라이브 프로필 준비 중
1요소우측 캐릭터 패널 좌상단에 표정 준비 중 배지를 얹는다(모바일은 좌하단). 완성·실패 처리는 모바일과 같다.
·상태확장 웹에는 완성 안내 토스트 프레임이 없다(Figma 04_02_02에 준비 중·라이브 두 상태만 있음).

확장 웹 · 라이브 프로필

‹ 캐릭터 이름 ▨Studio 1

메시지 입력…

➤

캐릭터 이미지 영역Live 1

주석 · 확장 웹 라이브 프로필
1요소우측 캐릭터 패널 좌상단에 Live 배지(붉은 점)를 상시 표시한다.

04_05_02 · 이미지 생성 · 확장 웹

이미지 생성의 큰 화면(웹) 레이아웃. 좌측 입력·결과 영역 420px, 우측 캐릭터 패널 596px을 나란히 둔다. 딜레이 안내·크레딧 소모 안내 팝업 상태를 함께 그린다.

📡 호출 엔드포인트
APIPOST /conversation/generateImage — 이미지 생성 요청 · POST /conversation/albums — 앨범 조회
APIGET /conversation/credit — 잔여 크레딧 조회

이미지 생성 확장 웹 · default

‹ 이미지 생성 ◈12 1

결과 이미지 영역

장면을 입력하세요…

Generate image 2

캐릭터 이미지 영역 3

주석 · 이미지 생성 확장 웹
1데이터우측 상단 보유 크레딧(GET /conversation/credit).
2이동Generate → 크레딧 소모 안내 팝업 → POST /conversation/generateImage.
3상태우측은 캐릭터 패널이다. 앨범 그리드가 아니다 — Figma #2025:3954의 우측 Persona Profile(#3647:4795)은 자식이 캐릭터 이미지와 dim 둘뿐이다. 이 자리를 확장 웹 앨범 열 수의 선례로 인용하지 않는다(arwen_docs#540).

이미지 생성 확장 웹 · 딜레이 안내

‹ 이미지 생성

생성 중…

1규칙웹에서도 지연 시 딜레이 안내를 띄운다. 완료는 WebSocket 알림으로 받는다.

이미지 생성 확장 웹 · 크레딧 소모 안내 팝업

‹ 이미지 생성

1데이터웹 크레딧 소모 안내 팝업. Confirm → POST /conversation/generateImage로 생성 시작.
2데이터차감·보유 크레딧 값의 정본은 [[크레딧]]. 표시값(-1)은 잠정값이며, 이미지 1회 차감값 확정은 #521이 담당한다.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-04-01-채팅.md의 wireframe: 필드가 이 파일을 가리킨다.