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

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

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

04_00 · 채팅 목록 진입

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

목록 · 내역 없을 때

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 · 첫 진입 튜토리얼

처음 들어온 사용자에게 기능을 4단계 말풍선으로 안내한다. 각 단계는 제목·설명·단계 표시(예: 1 / 4)·Skip·Next를 담는다. 딤 위에 안내 상자(layout/tutorial-box)가 뜬다.

튜토리얼 · 1 / 4

‹ 캐릭터 이름 ▨Generate 1

캐릭터 배경 이미지

주석 · 튜토리얼 1단계
1요소헤더 우측 Generate(이미지 생성) 버튼. 1단계가 이 버튼을 가리킨다.
2요소안내 상자(layout/tutorial-box). 제목·설명·단계 표시(1 / 4).
3이동Skip → 튜토리얼을 즉시 닫고 대화 본문으로.
4이동Next → 다음 단계.
·데이터튜토리얼 확인 처리 POST /conversation/tutorial. 근거: ChatConversationView.vue.

튜토리얼 · 2 / 4

‹ 캐릭터 이름

·상태2단계. 안내 상자 위치·내용만 바뀐다. Skip·Next 동작은 1단계와 같다.

튜토리얼 · 3 / 4

‹ 캐릭터 이름

·상태3단계. 하단 입력 바를 가리킨다.

튜토리얼 · 4 / 4

‹ 캐릭터 이름

1이동마지막 단계 완료 → 튜토리얼 닫고 대화 본문으로. POST /conversation/tutorial로 확인 상태 저장.

04_01_01 · 대화 튜토리얼

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

대화 튜토리얼 · 첫인사

‹ 캐릭터 이름

캐릭터 배경 이미지

2026.03.27

04_02 · 대화 본문

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

대화 · default

‹ 캐릭터 이름 1 ▨Generate 2

캐릭터 배경 이미지 3

2026.03.27 4

주석 · 대화 본문 기본
1데이터입장 시 POST /conversation/enter. 스크롤 올리면 이전 메시지 POST /conversation/previous.
2이동헤더 우측 Generate → 이미지 생성 화면(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행.

대화 · 나의 답변

‹ 캐릭터 이름 ▨Generate

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

대화 · typing

‹ 캐릭터 이름 ▨Generate

• • • 1

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

대화 · scroll

‹ 캐릭터 이름 ▨Generate

2026.03.26 1

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

대화 · stop

‹ 캐릭터 이름 ▨Generate

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

대화 · list mode

‹ 캐릭터 이름 ▨Generate

2026.03.27

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

대화 · 성인 대화 감지 팝업

‹ 캐릭터 이름 ▨Generate

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

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

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

완료 배지 · 단일

‹ 캐릭터 이름 ▨Generate

IMG

이미지 생성 완료 1

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

04_04 · 페르소나 정보

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

페르소나 정보 · Modal

‹ 캐릭터 이름

캐릭터 정보 1

🙂

이름 · 나이 · 지역 2

💼

직업 · 관계

♥

호감도 3

♥ ♥ ♥ ♡ ♡

✦

관심사

Close 4

주석 · 페르소나 정보 모달
1요소대화 하단 정보 아이콘(icon-info-24)을 누르면 아래에서 올라오는 모달로 캐릭터 정보를 본다.
2요소항목 카드로 이름·나이·지역·직업·관계·관심사를 나열한다.
3요소호감도는 하트 5칸(icon-heart-20)으로 채움 정도를 표시한다.
4이동Close → 모달을 닫고 대화로 복귀.
·상태내용이 길면 모달을 전체 높이(full)로 펼친다.

페르소나 정보 · Modal full

‹ 캐릭터 이름

캐릭터 정보 1

🙂

이름 · 나이 · 지역

💼

직업 · 관계

♥

호감도

♥ ♥ ♥ ♥ ♡

✦

관심사

📝

소개

1상태정보가 많으면 모달이 화면을 거의 다 덮는 full 높이로 펼쳐진다. 스크롤로 나머지 항목을 본다.

페르소나 정보 · 변경 알림

‹ 캐릭터 이름

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

04_05 · 이미지 생성

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

이미지 생성 · 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규칙생성 전에 입력한 장면(프롬프트)을 한 번 확인시킨다. 크레딧을 쓰기 때문.
2데이터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으로 온다.

토스트 · 이미지 위

‹ 캐릭터 이름

캐릭터 배경 이미지

IMG

이미지 생성 완료 1

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

토스트 · 블랙 배경 위

‹ 캐릭터 이름

IMG

이미지 생성 완료 1

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

토스트 · 배경 이미지 위

‹ 캐릭터 이름

캐릭터 배경 이미지

IMG

이미지 생성 완료 1

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

04_02_01 · 대화 본문 · 확장 웹

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

확장 웹 · default list mode

‹ 캐릭터 이름 ▨Generate 1

캐릭터 이미지 영역 2

메시지 입력…

➤

주석 · 확장 웹 대화
1이동우측 상단 Generate → 이미지 생성 확장 웹.
2상태넓은 화면에서는 캐릭터 이미지를 좌측에 두고 대화를 우측 list mode로 나란히 본다. 엔드포인트·스트리밍은 모바일과 같다(POST /conversation/stream, SSE).

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

이미지 생성의 큰 화면(웹) 레이아웃. 좌측 입력·결과 영역, 우측 앨범을 나란히 둔다. 딜레이 안내·프롬프트 확인 모달 상태를 함께 그린다.

이미지 생성 확장 웹 · default

‹ 이미지 생성 ◈12 1

결과 이미지 영역

장면을 입력하세요…

Generate image 2

앨범

IMG

주석 · 이미지 생성 확장 웹
1데이터우측 상단 보유 크레딧(GET /conversation/credit).
2이동Generate → 프롬프트 확인 모달 → POST /conversation/generateImage. 앨범은 POST /conversation/albums.

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

‹ 이미지 생성

생성 중…

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

이미지 생성 확장 웹 · 모달

‹ 이미지 생성

1데이터웹 프롬프트 확인 모달. Confirm → POST /conversation/generateImage로 생성 시작.

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