채팅 탭 첫 화면. 대화 내역이 없으면 빈 상태, 있으면 캐릭터별 대화 카드 목록. 하단은 공통 탭 메뉴. 라우트 chat-list · /chats.
GET /conversation — 대화 목록 조회(비면 빈 상태)아직 대화가 없어요
캐릭터를 만들고 첫 대화를 시작해 보세요. 2
layout/header). 목록 화면 제목 "Chats".GET /conversation 결과가 비면 빈 상태 안내를 그린다. 근거: ChatListView.vue.layout/bottom_menu) My character·Chats·Mypage. 다른 탭은 이 화면군 밖.chat-conversation · /chat/conversation/:personaIdx). :personaIdx는 어떤 페르소나와의 대화인지 가리키는 경로 변수.Chat/bubble 아닌 목록 box).icon-image-12)를 붙인다.GET /conversation. 근거: ChatListView.vue.처음 들어온 사용자에게 기능을 안내 상자(layout/tutorial-box)로 안내한다. 각 단계는 제목·설명·단계 표시·Skip·Previous·Next(마지막은 Done)를 담는다. 모바일은 5단계(Studio·Album·Expand character·Character information·Character chat), 확장 웹은 4단계다 — 확장 웹은 우측에 라이브 프로필이 상시 노출돼 "Expand character" 단계를 건너뛴다(근거: arwen_docs#581, 확장 웹 레이아웃 확정 — 우 라이브 프로필 고정·좌 모바일 사이즈 채팅). 2026-07-21 개편(arwen_docs#581) 전에는 4단계였고 Album 단계가 없었다.
POST /conversation/tutorial — 튜토리얼 확인 저장(Skip·Done)Studio(스튜디오) 2
layout/tutorial-box). "캐릭터와 함께 이미지·영상을 만들고 프로필을 꾸며보세요."POST /conversation/tutorial. 근거: ChatConversationView.vue.Album(앨범) 2
icon-album-24, 신규). 2단계가 이 버튼을 가리킨다. "지금까지 만든 이미지·영상을 한곳에서 모아볼 수 있어요."Expand character(캐릭터 확대 보기) 2
icon-list-24). "캐릭터를 크게 보고 대화 기록도 더 볼 수 있어요."Character information(캐릭터 정보) 2
icon-info-24). "캐릭터의 정보를 확인할 수 있어요."Character chat(캐릭터와 대화) 2
POST /conversation/tutorial로 확인 상태 저장. 확장 웹에서는 4 / 4로 번호만 바뀐다.대화 자체를 익히도록 돕는 단계별 질문. 추천 문구(프리셋)를 눌러 대화를 이어간다. list mode로 배경 없이 목록형으로도 볼 수 있다. 데이터: 추천 문구 POST /conversation/preset.
POST /conversation/preset — 추천 문구(프리셋) 대화 진행POST /conversation/preset.icon-list-24) → 배경 없는 list mode.캐릭터와 메시지를 주고받는 핵심 화면. 상단 캐릭터 배경 위에 말풍선이 쌓이고 하단 입력 바가 고정된다. 답변은 SSE로 한 글자씩 흘러온다. 라우트 chat-conversation · /chat/conversation/:personaIdx.
POST /conversation/enter — 입장 · POST /conversation/previous — 이전 메시지POST /conversation/stream — 답변 스트리밍 SSE · POST /conversation/cancel — 답변 멈춤POST /conversation/enter. 스크롤 올리면 이전 메시지 POST /conversation/previous.chat-generate-image · /chat/generate-image/:personaIdx).Chat/bubble, 왼쪽·회색). 이 페이지에서 가장 많이 쓰는 컴포넌트.icon-list-24) → list mode.icon-info-24) → 페르소나 정보 모달.POST /conversation/stream([[POST-conversation-stream]], SSE). 화면은 useStreamingText로 글자를 이어 붙인다. 근거: ChatConversationView.vue 226행.Chat/text_field). 전송하면 POST /conversation/stream 호출.POST /conversation/previous로 이전 메시지를 더 부른다.cancelConversation → POST /conversation/cancel로 생성을 끊는다.Notice 1
성인용 내용이 감지되었습니다. 18세 이상이 맞으신가요?
popup)이 뜬다. 유해성 필터 [[세이프가드]]와 맞닿는다.Let's keep things respectful. 1
This message was flagged under our community guidelines. Feel free to keep chatting.
[[세이프가드]] 위반으로 판정되면, 대화방을 나갔다 다시 들어올 때 이 팝업이 매번 뜬다. 세이프가드는 사후 기록이라 대화를 막지 않는다 — 성인 대화 감지 팝업과 동시 조건이면 그쪽이 먼저 노출된다.프로필 생성에 문제가 생겼어요 1
감정 영상 생성이 완료되지 못했습니다. 다시 시도하거나, 포기하고 크레딧을 돌려받을 수 있습니다.
GET /member/persona/profile/list로 보관함 목록을 조회해, active=true && completionStatus="FAILED"인 프로필이 있으면 이 팝업을 띄운다. 감정 영상 자동 재시도 3회가 모두 실패한 상태다. 성인 대화 감지·세이프가드 위반 안내 팝업보다 나중에 노출한다.POST /member/persona/profile/{profileIdx}/retry 호출. 상태가 PENDING으로 돌아가고 자동 재시도 3회가 새로 부여된다. 추가 크레딧 차감 없음. 팝업 닫고 대화 계속.POST /member/persona/profile/{profileIdx}/reset 호출. 이전 프로필 복원 + 크레딧 환불(응답의 refundedCredit 값 표시, 만료 크레딧은 제외돼 10보다 작을 수 있음). 물리 삭제 아님(D54). 팝업 닫고 대화 계속.이미지 생성이 끝났음을 대화 말풍선 자리에 배지로 알린다. 배지를 누르면 결과(앨범)로 이동한다.
WebSocket /topic/member/{memberIdx} — 이미지 생성 완료 알림 구독[[WebSocket-알림]]).대화 중 정보 아이콘을 누르면 아래에서 캐릭터 정보 모달이 올라온다. 이름·나이·지역·직업·관계·호감도·관심사를 항목 카드로 나열한다. 호감도는 하트 5칸으로 본다.
icon-info-24)을 누르면 아래에서 올라오는 모달로 캐릭터 정보를 본다.icon-heart-20)으로 채움 정도를 표시한다.정보가 변경되었어요 1
캐릭터 정보(예: 호감도)가 대화로 인해 바뀌었습니다.
장면을 글로 적어 캐릭터 이미지를 만든다. 헤더 우측에 보유 크레딧이 보인다. 생성은 즉시 끝나지 않고 WebSocket으로 완료를 받는다. 라우트 chat-generate-image · /chat/generate-image/:personaIdx.
POST /conversation/generateImage — 이미지 생성 요청POST /conversation/albums — 생성 앨범 조회 · GET /conversation/credit — 잔여 크레딧 조회WebSocket /topic/member/{memberIdx} — 생성 완료 알림 구독어떤 장면을 만들까요?
의상·표정·분위기·화풍을 적을 수 있어요. 2
GET /conversation/credit. 크레딧 정책은 [[크레딧]].Input/input-textarea).button/CTA)가 비활성(흐림). 누르면 크레딧 소모 안내 팝업 → 생성 요청 POST /conversation/generateImage.이미지 생성에 크레딧을 사용할까요? 1
[[화면설계-04-01-채팅]] §규칙).[[크레딧]]. 표시값(-1)은 잠정값이며, 이미지 1회 차감값 확정은 #521이 담당한다.POST /conversation/generateImage → 생성중 화면./topic/member/{memberIdx}를 구독한다(근거: notification.ws.ts 124행). 완료 시 POST /conversation/albums로 앨범을 갱신한다.icon-download-24)으로 결과 이미지를 저장한다.POST /conversation/albums). 썸네일을 눌러 크게 본다.POST /conversation/generateImage 재요청(크레딧 추가 소모).조금만 기다려 주세요 1
생성이 평소보다 오래 걸리고 있어요. 완료되면 알림으로 알려드려요.
만들 수 없는 요청이에요 1
정책에 어긋나는 콘텐츠는 생성할 수 없습니다.
[[세이프가드]]가 판정한다. 크레딧은 소모되지 않는다.크레딧이 부족해요 2
이미지를 만들려면 크레딧이 필요합니다.
GET /conversation/credit) 생성이 막힌다.[[크레딧]].이미지 생성 완료를 위에서 잠깐 떠오르는 토스트로 알린다. 배경(이미지 위·블랙 배경 위)에 따라 대비를 맞춘다. 완료 신호는 WebSocket으로 온다.
WebSocket /topic/member/{memberIdx} — 이미지 생성 완료 알림 구독/topic/member/{memberIdx}) 위에서 토스트가 잠깐 뜬다. 누르면 결과(앨범)로 이동./topic/member/{memberIdx}, 누르면 결과 앨범으로 이동).대화 본문의 큰 화면(웹, 1920 너비) 레이아웃. 좌측 대화(list mode) 421px와 우측 캐릭터 패널 596px을 2열로 배치한다. 저해상도 킷은 모바일 기준이라 여기선 좌우 2열 구조만 개략으로 본다.
POST /conversation/stream — 답변 스트리밍 SSE(모바일과 동일)POST /conversation/stream, SSE). 근거는 Figma #1910:1776과 arwen_fe: LayoutExpand.vue:20-27이다.이미지 생성의 큰 화면(웹) 레이아웃. 좌측 입력·결과 영역 420px, 우측 캐릭터 패널 596px을 나란히 둔다. 딜레이 안내·크레딧 소모 안내 팝업 상태를 함께 그린다.
POST /conversation/generateImage — 이미지 생성 요청 · POST /conversation/albums — 앨범 조회GET /conversation/credit — 잔여 크레딧 조회GET /conversation/credit).POST /conversation/generateImage.#2025:3954의 우측 Persona Profile(#3647:4795)은 자식이 캐릭터 이미지와 dim 둘뿐이다. 이 자리를 확장 웹 앨범 열 수의 선례로 인용하지 않는다(arwen_docs#540).POST /conversation/generateImage로 생성 시작.[[크레딧]]. 표시값(-1)은 잠정값이며, 이미지 1회 차감값 확정은 #521이 담당한다.