페르소나 프로필 커스터마이징 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · 신설(화면설계서 PPTX 기반, Figma 페이지 없음) · 클릭 가능(prototype)
출처: 페르소나-프로필-커스터마이징-화면설계서.pptx (Mobile, 2026-06-24 초안) · 허브 노트: 화면-03-02-페르소나-프로필-커스터마이징.md
상위 결정: [[결정-페르소나-의상입력-방식]] (D19) — 입력 방식 옵션②(참조 이미지 → 프롬프트 추출 → 생성) · 관련 이슈 #248 · #249
6개 섹션 · 10개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)
주의: 코드 구현·엔드포인트·도메인 필드는 아직 없다(초안 설계서). 미확정 항목은 주석에 needs-verification으로 적는다.

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

CUSTOM_01 · 진입 · 프로필 버튼

캐릭터 프로필 화면이다. 프로필 이미지 위에 겹친 '커스터마이징' 버튼으로 외형 변경 흐름에 진입한다. 이미 만든 페르소나의 외형을 바꾸는 갈래.

진입 · 프로필

‹ 캐릭터 프로필 1

페르소나 이름

한 줄 소개

커스터마이징 3

주석 · 진입(프로필 버튼)
1이동뒤로 → 이전 화면(캐릭터 목록·채팅, 이 화면군 밖).
2요소프로필 이미지 영역. 커스터마이징 대상 외형. 근거 [[PersonaAppearance]].
3이동'커스터마이징' → 안내 시트(STEP 02). 이 화면이 커스터마이징 진입점. 근거 [[페르소나-프로필-커스터마이징]].
·규칙이미 만든 페르소나의 외형을 바꾸는 갈래. 근거 [[페르소나-생성-여정]]. 실제=보라 버튼·프로필 사진, 와이어프레임은 회색.

CUSTOM_02 · 안내 · 혜택·크레딧

진입 직후 아래에서 올라오는 안내 바텀시트다. 기능 혜택과 소모 크레딧(10)을 진행 전에 미리 고지한다.

안내 · 바텀시트

‹ 캐릭터 프로필

페르소나 이름

주석 · 안내(혜택·크레딧)
1요소진입 직후 아래에서 올라오는 안내 바텀시트. 배경은 딤(어둡게) 처리.
2요소혜택 고지 — 참조 의상 사진으로 프로필 의상 변경 + 프로필 이미지·채팅 라이브 감정 표현 영상 자동 적용. 근거 [[페르소나-프로필-커스터마이징]]·[[PersonaVariationInfo]].
3규칙소모 크레딧 10을 진행 전 미리 고지. 실제 차감은 최종 확정 시 1회. 근거 [[크레딧]]·확정사항(D19 화면설계).
4이동닫기 → 시트 닫고 프로필 복귀(흐름 종료).
5이동진행하기 → 업로드(STEP 03).
·상태실제=보라 CTA·딤 오버레이. 와이어프레임은 회색.

CUSTOM_03 · 업로드 · 참조 사진

참조 사진을 올리는 화면이다. 권장·금지 안내를 함께 둔다. 업로드하면 세이프가드 검열 → 프롬프트 추출(비노출) → 후보 생성으로 이어진다.

업로드 · default

‹ 참조 사진 올리기

＋ 사진 올리기 1

권장 · 캐릭터에게 입히고 싶은 옷이 잘 보이는 사진 2

옷 전체가 선명하게 나올수록 좋아요.

이런 사진은 피해주세요

· 선정적·폭력적이거나 불법적인 이미지

· 다른 사람이 주인공인 사진 (얼굴·신원은 쓰지 않아요)

· 브랜드 로고·캐릭터 그림이 크게 박힌 옷 (그 부분은 반영되지 않아요)

· 옷이 가려지거나 흐릿·어두운 사진

주석 · 업로드(참조 사진)
1동작참조 사진 선택·업로드. '+ 사진 올리기' 영역을 누른다.
2규칙권장 = 캐릭터에 입힐 의상이 선명한 사진. 피해야 할 사진 = 선정·폭력·불법(세이프가드 거부) / 타인이 주인공 / 로고·캐릭터 프린트 / 의상 불명확. 로고·저작 프린트는 업로드 거부가 아니라 추출 단에서 제외.
3데이터업로드 → 세이프가드 검열 → 프롬프트 추출(사용자 비노출) → 후보 생성(STEP 04). 입력 방식 = 옵션② 근거 [[결정-페르소나-의상입력-방식]](D19). 엔드포인트·도메인 필드 미확정(needs-verification).
·규칙업로드 이미지·생성 이미지는 [[세이프가드]]가 검열한다. 검열 부적합 시 재업로드(오른쪽 카드).

업로드 · filled

‹ 참조 사진 올리기

권장 · 캐릭터에게 입히고 싶은 옷이 잘 보이는 사진

옷 전체가 선명하게 나올수록 좋아요.

이런 사진은 피해주세요

· 선정적·폭력적이거나 불법적인 이미지

· 다른 사람이 주인공인 사진 (얼굴·신원은 쓰지 않아요)

· 브랜드 로고·캐릭터 그림이 크게 박힌 옷 (그 부분은 반영되지 않아요)

· 옷이 가려지거나 흐릿·어두운 사진

·상태사진을 올리면 미리보기가 채워지고 업로드 CTA가 활성된다.

업로드 · 검열 부적합 (예외)

‹ 참조 사진 올리기

이 사진은 사용할 수 없어요. 다른 사진을 올려주세요. 1

1상태세이프가드 검열 부적합 → 재업로드 유도. 근거 [[세이프가드]]·예외 처리(엣지 케이스).

CUSTOM_04 · 결과 후보 · 선택

만들어진 후보 이미지를 보고 고르는 화면이다. 최대 3개까지 다시 생성하고 1개를 확정한다. 확정 시점에만 크레딧 10이 1회 빠진다.

결과 · 후보 1/3

‹ 후보 선택

● ○ ○ 1 / 3 2

다시 생성 3

주석 · 결과 후보·선택
1요소생성된 후보 프로필 이미지. 세이프가드 검열을 통과한 결과.
2요소후보 인디케이터 1/3. 현재 후보와 전체 후보 수를 표시.
3동작다시 생성 — 최대 3개까지. 근거 확정사항(최대 3개 → 1개 선택).
4데이터이 이미지로 진행 = 확정. 이 시점에만 크레딧 10을 1회 차감(생성 시점 아님) → 비동기 진행 안내(STEP 05). 근거 [[크레딧]]·확정사항. 엔드포인트 미확정(needs-verification).
·규칙후보 3개가 모두 마음에 안 들 때 재시도·재차감 정책, 후보 생성 무료 한도는 미정(needs-verification). 후보 생성 실패·타임아웃은 예외 처리 대상.

결과 · 다시 생성 2/3

‹ 후보 선택

● ● ○ 2 / 3

다시 생성

·상태'다시 생성'을 눌러 두 번째 후보를 본 상태. 인디케이터가 2/3로 갱신. 최대 3개까지(3/3에서 재생성 소진).

결과 · 크레딧 부족 (예외)

‹ 후보 선택

● ● ○ 2 / 3

1이동크레딧 부족 → 충전 유도. '충전하러 가기' → 멤버십·크레딧 화면(이 화면군 밖, [[화면-06-멤버십-크레딧]]). 근거 예외 처리(크레딧 부족).

CUSTOM_05 · 비동기 진행 안내

확정 직후 뜨는 진행 안내다. 본 생성(프로필 + 감정 베리에이션)은 백그라운드에서 비동기로 돌고, 완료는 채팅 토스트로 알린다.

비동기 · 진행 안내

‹

적용을 시작했어요

완료되면 채팅에서
알려드릴게요.

주석 · 비동기 진행 안내
1이동(시뮬) 아이콘 클릭 = 본 생성 완료 푸시 시뮬 → 채팅 완료 토스트(STEP 06). 실제는 백그라운드 비동기라 사용자 조작이 아니다.
2이동확인 → 화면 닫고 서비스 계속 이용(이 화면군 밖).
·규칙본 생성 = 프로필 이미지 + 감정 베리에이션. 비동기 처리 후 완료 토스트로 알림. 근거 확정사항(비동기 + 완료 토스트)·[[PersonaVariationInfo]]. 본 생성 실패 시 재시도(최대 5회), 크레딧 롤백 여부 미정(needs-verification).

CUSTOM_06 · 완료 토스트 · 채팅

본 생성이 끝나면 채팅 화면 위쪽에 완료 토스트를 띄우고, 갱신된 프로필을 별도 승인 없이 자동 반영한다.

완료 · 토스트·채팅

‹

페르소나 이름 3

✓ 프로필이 새롭게 단장했어요 1

오늘 옷 잘 어울린다!

고마워 2

주석 · 완료 토스트·채팅
1상태본 생성 완료 시 채팅 상단에 완료 토스트 푸시("프로필이 새롭게 단장했어요"). 실제 = 초록 배너, 와이어프레임은 회색.
2규칙감정 베리에이션까지 끝나면 별도 승인 없이 자동 반영. 새 외형이 대화에 자연스럽게 묻어난다. 근거 [[PersonaVariationInfo]]·[[PersonaAppearance]].
3이동채팅 화면은 이 화면군 밖([[화면-04-01-채팅]]). 뒤로·입력창은 채팅 화면의 소관.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·규칙)이다. 이 화면은 신설(화면설계서 PPTX 초안)이라 코드·엔드포인트·도메인 필드가 아직 없다 — needs-verification 주석은 확정 후 근거를 코드로 바꾼다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-03-02-페르소나-프로필-커스터마이징.md의 wireframe: 필드가 이 파일을 가리킨다.