화면 04-06 · 이미지 입력 (멀티모달 사용자 업로드) — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 페이지 없는 신설 화면 · 클릭 가능(prototype)
출처: arwen_docs#946(Epic · 결정 8건 · 안전 게이트 가이드라인) · #1005(본 산출물) · 화면설계: 화면설계-04-06-이미지입력.md
2개 섹션 · 10개 상태 프레임 · 기기 375×812 · 채팅 화면(04-01)의 한 흐름이다 — 별도 라우트가 없고 대화 본문의 입력 바에서 시작해 대화 안에서 끝난다

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그 확정 한도 jpg·png만 · 10MB 이하 · 턴당 1장 · 무료(차감 없음)

0406_01 · 고르기 → 미리보기 → 전송 → 캐릭터 피드백

사용자가 대화에 사진을 올리면 캐릭터가 그 사진을 보고 반응한다. 대화 본문(04_02)의 입력 바 왼쪽 첨부 버튼에서 시작한다.
※ 이 화면은 크레딧을 쓰지 않는다 — 무료 기능이라 차감 확인 팝업이 붙지 않는다(arwen_docs#946 결정6).

📡 호출 엔드포인트
API사진 고르기 · 형식·크기 검사 — 호출 없음. 기기 안에서 끝난다. 파일 선택 창은 브라우저가 연다
API이미지 업로드 — 미확정. 경로·메서드·본문 형식이 정해지지 않았다. 서버 설계가 진행 중이다(arwen_docs#963)
API이미지를 붙인 메시지 전송 — 미확정. 기존 POST /conversation/stream에 이미지 참조를 실을지, 업로드 응답이 곧바로 대화를 잇는지 정해지지 않았다(arwen_docs#963)
API안전 검사(모더레이션 게이트) — 미확정. 화면이 직접 부르지 않는다. 업로드 경로 안에서 서버가 부르고 화면은 판정만 받는다(arwen_docs#961·#963)
규칙⚠️ 없는 엔드포인트를 추측으로 채우지 않는다. 확정되면 이 블록과 화면설계의 「호출 엔드포인트」 표를 함께 고친다

S0 · 대화 기본 (첨부 버튼)

‹ 캐릭터 이름 ▨ Studio

캐릭터 배경 이미지

주석 · 대화 기본 (진입점)
1요소첨부 버튼. 이 화면의 유일한 진입점이다. 입력 바 왼쪽에 둔다. 아이콘 모양과 기존 목록(☰)·정보(ⓘ) 아이콘과의 정확한 배치는 ④디자인에서 굳는다 — needs-verification.
1이동누르면 사진 고르기(S1)로 간다.
2규칙글과 사진을 함께 보낼 수 있다. 사진만 보내는 것도 된다. 언어모델이 사진과 문장을 함께 보므로 「무엇을 봐 달라」를 고르게 하는 요소를 두지 않는다(arwen_docs#946 결정8).
3요소전송 버튼. 기존 대화 전송과 같은 자리·같은 버튼이다.
·규칙이 화면은 별도 라우트가 없다. 대화 본문(chat-conversation · /chat/conversation/:personaIdx) 위에서 일어난다.
·규칙헤더에 보유 크레딧을 두지 않는다 — 무료 기능이라 잔액을 읽지도 차감하지도 않는다(arwen_docs#946 결정6).

S1 · 사진 고르기 (기기 기본 선택창)

‹ 캐릭터 이름

주석 · 사진 고르기
1확정기기(브라우저) 기본 파일 선택창을 그대로 쓴다. 앱이 자체 시트를 그리지 않는다 — 이 목업은 그 기본 창을 대신 그린 자리표시일 뿐이다(arwen_docs#1194 디자인 확정).
2규칙허용 형식은 jpg·png뿐이다. 문서(PDF)는 다음 판(v2) 별건이라 이 화면이 다루지 않는다(arwen_docs#946 결정3).
3규칙한 장의 크기는 10MB 이하다(arwen_docs#946 결정7). ⚠️ 기존 clothing_extraction 경로의 12MB를 그대로 쓰지 않는다 — 확정값은 10MB다.
·규칙한 번에 한 장만 올린다(턴당 1장, arwen_docs#946 결정7).
·이동고르면 미리보기(S2)로 간다. 형식이 안 맞으면 S5, 10MB를 넘으면 S6으로 간다.
·데이터이 단계는 서버를 부르지 않는다. 고른 파일은 기기 안에만 있다.

S2 · 미리보기 (전송 전)

‹ 캐릭터 이름

주석 · 미리보기
1요소미리보기 썸네일은 입력 바 바로 위에 붙는다. 아직 보내기 전이라 대화 흐름에는 들어가지 않는다.
1동작확대 — 썸네일을 누르면 확대 팝업(S2b)이 뜬다. 자세한 동작은 다음 화면(S2b) 참고(arwen_docs#1194 디자인 확정).
2동작제거(✕) — 붙은 사진을 뗀다. 첨부가 풀리고 대화 기본(S0)으로 돌아간다.
·규칙다른 사진으로 바꾸려면 ✕로 먼저 뗀 뒤 첨부 버튼을 다시 눌러 새로 고른다. 썸네일을 눌러 바로 교체하는 동작은 없다(arwen_docs#1194 디자인 확정).
3상태미리보기가 붙어 있는 동안 첨부 버튼을 끈다. 턴당 1장이기 때문이다(arwen_docs#946 결정7).
4이동전송 → 전송·처리중(S3). 글을 비워 두고 사진만 보내도 된다.
·규칙여기까지 서버를 부르지 않았다. 사진은 기기 안에만 있다.

S2b · 미리보기 확대

✕ 1

주석 · 미리보기 확대
1동작닫기 — 우측 상단 X를 누르면 팝업만 닫히고 미리보기(S2)로 돌아간다. 첨부는 그대로 유지된다 — 이 X는 삭제가 아니다(arwen_docs#1194 디자인 확정).
2요소선택한 사진의 원본을 화면 전체에 크게 보여준다. 첨부를 떼거나 다른 사진으로 바꾸는 동작은 여기 없다 — 그건 미리보기(S2)의 ✕로 한다.
·데이터이 단계도 서버를 부르지 않는다. 기기 안의 선택 파일을 그대로 크게 보여줄 뿐이다.

S3 · 전송 · 처리중

‹ 캐릭터 이름

◔ 보는 중… 2

주석 · 전송 · 처리중
1요소내가 보낸 이미지 말풍선(오른쪽). 함께 보낸 글이 있으면 이미지 아래에 붙는다.
2요소대기 표시. 진행률(%)·「업로드 중」 같은 시스템 문구를 쓰지 않는다 — 대화 흐름을 깨지 않도록 인-캐릭터로 표현한다([[화면설계-04-03-인라인미디어]]와 같은 원칙). 문구는 예시다 · needs-verification.
3데이터업로드 → 서버 안전 검사 → 통과분만 언어모델로 간다. 검사는 서버가 한다. 앱이 앞서 본 형식·크기 검사만 믿지 않는다(arwen_docs#946 안전 가이드라인 원칙2).
·규칙판정이 서지 않으면 막는다(fail-closed). 검사가 실패하거나 시간이 초과되면 통과가 아니라 차단(S7)으로 다룬다(같은 가이드라인 원칙1).
·이동통과 → 캐릭터 피드백(S4) · 차단 → S7 · 업로드·처리 실패 → S8.
·규칙전송을 시작한 뒤 취소할 수 있는지는 정해지지 않았다 — 기존 답변 멈춤(POST /conversation/cancel)과 어떻게 맞물리는지 needs-verification(arwen_docs#963·#965).

S4 · 캐릭터 피드백

‹ 캐릭터 이름

1요소캐릭터 피드백 말풍선. 기존 대화 답변과 같은 컴포넌트·같은 경로로 흘러온다(SSE 스트리밍, [[화면설계-04-01-채팅]]).
·규칙반응한 뒤 원본 사진을 폐기하고 설명(캡션)만 기억으로 남긴다(arwen_docs#946 결정4·결정5). [[결정-데이터-삭제금지-원칙]](D54)의 예외에 든다.
·상태⚠️ 그래서 대화방을 나갔다 들어왔을 때 이 이미지 말풍선에 무엇을 보일지가 정해지지 않았다 — 원본·저해상 사본·대체 표시 셋 다 가능하다. needs-verification(arwen_docs#963).
·상태미리보기가 풀렸으므로 첨부 버튼이 다시 켜진다. 눌러 다음 사진을 올릴 수 있다.

0406_02 · 예외 · 차단 안내

막히는 자리가 둘이다. 형식·크기는 보내기 전에 앱이 걸러 입력 바 위에서 알린다. 안전 검사는 보낸 뒤 서버가 걸러 이미지 말풍선 아래에서 알린다.
※ 차단 안내 문구는 이 와이어프레임이 정하지 않는다. 무엇을 막을지와 어떻게 알릴지는 arwen_docs#961이 정하는 정책이다. 여기서는 자리와 상태만 그린다.

📡 호출 엔드포인트
API형식·크기 검사(S5·S6) — 호출 없음. 앱이 기기 안에서 판정한다
API차단 결과 통지(S7) — 미확정. 업로드 응답으로 즉시 오는지, 완료 알림(WebSocket)으로 오는지 정해지지 않았다(arwen_docs#963)
API차단 이벤트 감사 로그 — 화면 밖이다. 원본이 아니라 해시·분류결과·시각·회원 식별자만 남긴다. 관리자 검토 화면은 arwen_cms 소관이라 이 계층에 그리지 않는다(arwen_docs#946·#963)

S5 · 형식 안 맞음 (jpg·png 아님)

‹ 캐릭터 이름

주석 · 형식 안 맞음
1요소안내가 놓이는 자리는 입력 바 바로 위 인라인 줄이다. 아직 보내기 전이라 대화 흐름에 흔적을 남기지 않는다.
1규칙허용 형식은 jpg·png뿐이다(arwen_docs#946 결정3). 문구는 예시다 — 확정 문안은 ④디자인·arwen_docs#965에서 굳는다.
2이동다시 고르기 → 사진 고르기(S1).
·데이터서버를 부르지 않고 앱이 즉시 낸다. 사용자를 기다리게 하지 않는다.

S6 · 크기 초과 (10MB)

‹ 캐릭터 이름

1상태S5와 같은 자리·같은 모양이고 사유만 다르다. 상한은 10MB다(arwen_docs#946 결정7).
·규칙⚠️ 안내 문구에 12MB를 적지 않는다. 기존 clothing_extraction 경로가 12MB를 쓰지만 확정값은 10MB다(arwen_docs#946 트리아지 회신).

S7 · 안전 검사 차단 (자리·상태만)

‹ 캐릭터 이름

［차단 안내 문구 자리 — arwen_docs#961 확정 후 채운다］ 2

주석 · 안전 검사 차단
1상태막힌 사진의 말풍선. 그대로 둘지·흐리게 할지·걷어낼지 정해지지 않았다 — 여기서는 「차단됨」 상태로만 그린다. needs-verification(arwen_docs#961).
2요소이 카드가 정하는 것은 자리다. 안내는 내 이미지 말풍선 바로 아래 시스템 안내 줄에 놓는다. 어느 사진이 막혔는지 붙여서 보여야 사용자가 안다.
2규칙차단 안내는 캐릭터 발화가 아니다. 소프트 차단에서 캐릭터가 아무 반응도 하지 않기로 확정돼 있어(arwen_docs#946 3판정), 캐릭터 말풍선으로 알리면 그 확정과 어긋난다. 그래서 말풍선과 구별되는 모양을 쓴다.
2규칙문구는 arwen_docs#961이 정한다. 차단 갈래(아동 성착취물·비동의 성적 이미지·폭력·불법·민감 신분증 등)마다 다르게 말할지, 한 문장으로 덮을지 정해지지 않았다.
·규칙소프트 차단·하드 차단을 화면에서 구별할지도 미확정이다. 구별한다면 하드 차단에 계정 조치 고지가 붙어 팝업이 하나 더 필요할 수 있다 — 그 자리를 비워 둔다(wf-dim + wf-popup). needs-verification(arwen_docs#961).
·규칙차단에는 재시도를 붙이지 않는다. 같은 사진을 다시 보내도 같은 판정이 난다. 재시도가 붙는 것은 실패(S8)뿐이다.

S8 · 업로드·처리 실패 (다시 보내기)

‹ 캐릭터 이름

사진을 보내지 못했어요. 1

다시 보내기 2

1상태S7과 같은 자리에 놓되 성격이 다르다. 정책이 막은 것이 아니라 다시 해 볼 수 있는 실패다. 문구는 예시다 · needs-verification.
2이동다시 보내기 → 전송·처리중(S3). 사진을 다시 고르지 않고 같은 사진으로 재시도한다.
·규칙⚠️ 검사 실패·시간 초과는 이 상태가 아니라 차단(S7)이다. 판정이 서지 않으면 막는 것이 확정된 원칙이다(fail-closed, arwen_docs#946). 이 상태는 검사에 닿기 전 통신·저장 실패만 다룬다.
·규칙실패해도 차감할 크레딧이 없다 — 무료 기능이라 롤백이라는 개념이 없다(arwen_docs#946 결정6).

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·규칙)이다. 신설 화면(Figma 페이지 없음)으로, 근거는 화면설계 화면설계-04-06-이미지입력.md와 arwen_docs#946(결정 8건·안전 게이트 가이드라인)이다. 비어 있는 두 자리가 있다 — 차단 안내 문구(arwen_docs#961)와 호출 엔드포인트(arwen_docs#963)다. 확정되면 이 파일과 화면설계를 함께 고친다. 화면 구조가 바뀌면 이 파일을 갱신하고, 화면설계의 wireframe: 필드가 이 파일을 가리킨다.