와이어프레임 / 35-화면설계 / wireframes / 화면-03 캐릭터 설정

화면 03 · 캐릭터 설정(페르소나 생성) — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page node 4:45 "03. 캐릭터 설정" · 허브 노트: 화면-03-01-캐릭터설정.md
5개 섹션 · 29개 단계·상태 프레임 · 기기 375×812 · 페르소나 한 명을 처음부터 만드는 마법사(약 20단계). 하단 이전·다음 버튼이 단계를 잇는다(이 파일에서 data-goto로 따라갈 수 있다).

▶ 흐름 모드: 요소를 눌러 화면 이동(마법사 따라가기) ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그 주 흐름 = 여성 경로(남성 갈래는 변형 카드로 표기)

03_01 · 기본 정보 (입력)

소개 → 성별·관계·성 정체성·성적 지향·생년월일 입력. 모두 드롭다운/날짜 입력. 값은 서버로 바로 보내지 않고 화면 이동마다 브라우저에 임시 저장(draft)한다.

03_01 · intro(소개)
‹ 캐릭터 만들기

나만의 캐릭터를
만들어 볼까요?

기본 정보 → 외형 → 성격을 차례로 정하고
미리보기로 확정하면 대화를 시작할 수 있어요.

시작하기 1
  • 주석 · 생성 소개
  • 1이동페르소나 생성 진입점. "시작하기" → 기본 정보 입력. FE: PersonaBasicInfoView.vue.
  • ·규칙생성 경로 밖으로 나가면 임시 저장값을 지운다(clearPersonaDraft). 근거: [[페르소나-생성]].
  • ·규칙등급별 페르소나 개수 제한이 있을 수 있다. 안내 정합성은 리스크로 추적. #needs-verification · [[리스크-persona-개수제한-불일치]].
03_01 · 기본정보 default
‹ 기본 정보

캐릭터의 기본 정보를
알려주세요 1

성별 2
관계 3
성 정체성 4
성적 지향 5
생년월일 6
이전 7
다음 8
  • 주석 · 기본 정보 기본
  • 1요소단계 제목. 이 화면은 [[PersonaInfo]] 엔티티를 채운다.
  • 2동작성별 선택(드롭다운 Input / input-icon). 이후 외형이 남/여 갈래로 갈린다.
  • 3동작관계 선택(연인/친구 등). 성격 설정의 관계 화면과 연결된다.
  • 4동작성 정체성 선택(드롭다운).
  • 5동작성적 지향 선택(드롭다운).
  • 6동작생년월일 입력(Input / Text_field). 성인 여부 판정에 쓴다.
  • 7이동이전(button / CTA 좌측) → 소개로.
  • 8데이터다음 → 값 임시 저장(persona-draft.repository.ts) 후 외형 생성으로. 서버 저장 없음.
03_01 · error(성인만 가능)
‹ 기본 정보

캐릭터의 기본 정보를
알려주세요

여성
연인
Cisgender
Heterosexual
2012 · 01 · 01
성인만 캐릭터를 만들 수 있어요. 1
이전
다음
  • 1상태생년월일이 미성년이면 오류 Label을 띄우고 다음 진행을 막는다. 근거: [[성인콘텐츠-정책]].
03_01 · 페이지 이탈 팝업
‹ 기본 정보

캐릭터의 기본 정보를
알려주세요

여성
연인
성 정체성
이전
다음

지금 나가시겠어요?

작성 중인 캐릭터 정보가 사라져요.

계속 만들기 1
나가기 2
  • 1이동"계속 만들기" → 팝업 닫고 입력으로 복귀.
  • 2규칙"나가기" → 생성 경로 이탈. 임시 저장값 삭제(clearPersonaDraft) 후 메인으로(이 화면군 밖). 컴포넌트: popup.

03_02 · 외형 생성 ⓐ — 인종·연령·체형·피부톤 (외형 1~2 / 4)

큰 미리보기 카드 + 가로 썸네일에서 항목을 고른다. 헤더 우측에 진행 표시(1/4…)를 둔다. create 경로는 임시 저장만 한다. (환경변수 VITE_ENABLE_CRS='true'면 글 묘사형 CRS(Conversational Recommender System) 경로가 대신 등록된다 · router/index.ts:423-461 · #needs-verification #434 확정)

03_02_01 · 인종(여성)
‹ 외형 1 / 4 1

피부·인종을 골라주세요 2

persona's name 3
4
이전
다음 5
  • 주석 · 외형 선택(공통 골격)
  • 1요소진행 표시 "현재/전체". FE는 외형을 4화면으로 묶는다: 1/4 Ethnicity(인종+연령) → 2/4 Body(체형+피부톤+가슴/상체) → 3/4 Face(얼굴형+동공+수염) → 4/4 HairStyle(헤어길이+텍스쳐+색상). #needs-verification #434 확정.
  • 2요소단계 안내 문구.
  • 3요소선택을 반영하는 캐릭터 미리보기 카드(이미지 placeholder + 이름). [[PersonaAppearance]]를 채운다.
  • 4동작가로 썸네일에서 인종을 고른다(button / options-select). 선택된 항목은 커지고 테두리가 진해진다(icon-check-12).
  • 5데이터다음 → 임시 저장 후 연령대 팝업으로. FE: create/PersonaCreateEthnicityView.vue. 서버 저장 없음.
03_02_01 · 인종(남성)
‹ 외형 1 / 4

피부·인종을 골라주세요

persona's name
이전
다음
  • ·상태기본 정보에서 성별=남성이면 같은 골격의 남성 갈래를 그린다. 이후 외형 단계도 남/여로 나뉜다.
03_02_01_01 · 연령대(팝업)
‹ 외형 1 / 4

겉보기 나이 1

YoungPrimeMature
적용 2
  • 1요소겉보기 나이를 슬라이더로 정하는 하단 팝업(button / slider-select). 눈금: Young · Prime · Mature.
  • 2이동"적용" → 팝업 닫고 체형 선택으로. 값은 임시 저장. 컴포넌트: popup.
03_02_02 · 체형(여성)
‹ 외형 2 / 4

체형을 골라주세요

persona's name
이전
다음 1
  • 1데이터다음 → 피부톤 선택. FE: create/PersonaCreateBodyView.vue(피부톤·skinTone + 여성 breast / 남성 upperBodyShape 하위 단계를 품음 · #needs-verification #434 확정). 임시 저장만.
03_02_02_01 · 피부톤
‹ 외형 2 / 4

피부톤 1

적용 2
  • 1요소피부톤을 고르는 하단 팝업(button / options-select). default·selected 두 상태.
  • 2이동"적용" → 성별에 따른 세부(여성=가슴 사이즈, 남성=상체 스타일)로. 임시 저장.
03_02_02_01 · 가슴 사이즈(여성)
‹ 외형 2 / 4

가슴 사이즈 1

S M ✓ L
적용 2
  • 1요소여성 갈래 전용 세부(button / options-select).
  • 2이동"적용" → 얼굴 선택으로. 임시 저장.
03_02_02_01_01 · 상체 스타일(남성)
‹ 외형 2 / 4

상체 스타일

보통 ✓ 근육질
적용
  • ·상태남성 갈래 전용 세부. 여성 갈래의 가슴 사이즈와 같은 자리에 온다. "적용" → 얼굴 선택.

03_02 · 외형 생성 ⓑ — 얼굴·동공·헤어 (외형 3~4 / 4)

얼굴형 → 동공 색상(남성은 수염 추가) → 헤어 길이 → 텍스쳐 → 머리 색상. 같은 골격(미리보기 + 팝업 선택)을 반복한다. create 경로는 임시 저장만 한다.

03_02_03 · 얼굴(여성)
‹ 외형 3 / 4

얼굴형을 골라주세요

persona's name
이전
다음 1
  • 1데이터다음 → 동공 색상. FE: create/PersonaCreateFaceView.vue(eyeColor + 남성 beardType 하위 단계를 품음 · #needs-verification #434 확정). 임시 저장만.
03_02_03_01 · 동공 색상
‹ 외형 3 / 4

동공 색상 1

적용 2
  • 1요소동공 색을 고르는 하단 팝업(button / options-select).
  • 2이동"적용" → 헤어 길이로. 남성 갈래는 이 뒤에 수염 단계가 붙는다. 임시 저장.
03_02_03_01 · 수염(남성)
‹ 외형 3 / 4

수염

없음 ✓ 콧수염 턱수염
적용
  • ·상태남성 갈래 전용. 동공 색상 뒤에 온다. "적용" → 헤어 길이.
03_02_04 · 헤어 길이
‹ 외형 4 / 4

헤어 길이를 골라주세요

persona's name
이전
다음 1
  • 1데이터다음 → 헤어 텍스쳐. FE: create/PersonaCreateHairStyleView.vue(길이·텍스쳐·색상 세부). 임시 저장만.
03_02_04_01 · 헤어 텍스쳐
‹ 외형 4 / 4

헤어 텍스쳐 1

직모 ✓ 웨이브 곱슬
적용 2
  • 1요소머리 질감을 고르는 하단 팝업(button / options-select).
  • 2이동"적용" → 머리 색상으로. 임시 저장.
03_02_04_02 · 머리 색상
‹ 외형 4 / 4

머리 색상 1

완료 2
  • 1요소머리 색을 고르는 하단 팝업(button / options-select). 외형 마지막 세부.
  • 2이동외형 완료 → 성격 설정(MBTI)으로. 임시 저장.

03_03 · 페르소나 성격 설정 (성격 1~6 / 6)

MBTI 4축 → Big Five 5요인 → 가치관·태도 → 관계 세부 → 성격 정리 → 기타(이름). 슬라이더·선택지·입력으로 [[PersonaPersonality]]·[[PersonaEtc]]를 채운다. 마지막 기타 화면이 페르소나를 최종 저장한다.

03_03_01 · MBTI
‹ 성격 1 / 6 1

성격 유형을 정해주세요 2

외향 E내향 I
감각 S직관 N
사고 T감정 F
판단 J인식 P
이전
다음 3
  • 주석 · 성격 설정(공통 골격)
  • 1요소성격 단계 진행 표시(1/6). 성격은 6단계다.
  • 2요소MBTI 4개 축을 슬라이더로 정한다(에너지 방향·정보 처리·의사 결정·생활 양식). 컴포넌트 button / slider-select.
  • 3데이터다음 → Big Five. FE: settings/PersonaSettingsMbtiView.vue. 임시 저장만.
03_03_02 · Big Five
‹ 성격 2 / 6

성격 5요인을 정해주세요

개방성
성실성
외향성
우호성
신경성
이전
다음 1
  • 1데이터5요인 슬라이더. 다음 → 가치관·태도. FE: settings/PersonaSettingsBigFiveView.vue. 임시 저장만.
03_03_03 · 가치관·태도
‹ 성격 3 / 6

가치관과 태도를 골라주세요

다정함 ✓ 유머러스 진지함 ✓ 독립적 보호적 호기심
이전
다음 1
  • 1데이터가치관·태도 다중 선택(button / options-select). 다음 → 관계 세부. FE: settings/PersonaSettingsValuesAttitudesView.vue. 임시 저장만.
03_03_04_01 · 관계(연인)
‹ 성격 4 / 6

연인 관계의 세부를 정해주세요 1

애정 표현
질투
다정한 연인 ✓ 츤데레
이전
다음 2
  • 1규칙기본 정보의 관계 선택에 따라 세부가 달라진다(연인=Romantic partner / 친구 등). 이 카드는 연인 갈래.
  • 2데이터다음 → 성격 정리. FE: settings/PersonaSettingsRomanticView.vue. 임시 저장만.
03_03_04 · 성격 정리(personality)
‹ 성격 5 / 6

성격을 자유롭게 정리해 주세요 1

이전
다음 2
  • 1요소연인·친구 공통 성격을 여러 줄로 정리(Input / input-textarea). default·filled 상태.
  • 2이동다음 → 기타(이름) 입력. 임시 저장만.
03_03_04 · 기타(etc · 이름)
‹ 성격 6 / 6

마지막으로,
이름 등을 정해주세요 1

이름 2
이전
다음 3
  • 1요소이름 등 기타 정보 입력([[PersonaEtc]]). 성격 마지막 단계.
  • 2동작이름 입력(Input / Text_field) + 자유 메모(textarea).
  • 3데이터다음 → 미리보기 생성. 이 화면이 페르소나를 최종 저장한다: PUT /member/persona. FE: settings/PersonaSettingsEtcView.vue.

03_03 미리보기 · 03_04 생성 완료

서버가 대표 이미지를 만든다(비동기). 마음에 안 들면 다시 생성(최대 3회). 확정하면 이름을 마지막으로 정하고 완료 안내를 본 뒤 대화로 간다. FE: settings/PersonaSettingsBridgeView.vue → PersonaSettingsCompletedView.vue.

미리보기 · loading
‹ 미리보기

캐릭터를 만드는 중… 1

잠시만 기다려 주세요.

(데모) 생성 완료 보기 2
  • 주석 · 미리보기·완료
  • 1데이터미리보기 이미지 생성 요청 PUT /member/persona/preview. 서버가 이미지를 비동기로 만든다. 근거: [[흐름-페르소나-이미지-생성]].
  • 2이동(프로토타입용) 생성 완료 화면으로 넘어가는 데모 링크.
미리보기 · 캐릭터 생성
‹ 미리보기

마음에 드시나요? 재생성은 최대 3회까지 할 수 있어요. 1

다시 생성 (Recreate) 2
이 캐릭터로 결정 (Selection complete) 3
  • 1요소생성된 대표 이미지([[PersonaInfoPreview]])와 재생성 안내. 재생성 한도는 3회.
  • 2데이터"다시 생성"(button / btn-text) → 재생성 PUT /member/persona/preview/regenerate.
  • 3이동"결정"(button / CTA) → 최종 이름 입력 모달로.
미리보기 · recreate
‹ 미리보기

다시 만들었어요. 남은 재생성 1회. 1

다시 생성 (Recreate)
이 캐릭터로 결정
  • 1상태재생성할 때마다 남은 횟수를 줄여 보여준다. 재생성 = PUT /member/persona/preview/regenerate.
미리보기 · 재생성 소진
‹ 미리보기

재생성을 모두 사용했어요. 지금 캐릭터로 결정해 주세요. 1

다시 생성 (0회 남음)
이 캐릭터로 결정 2
  • 1규칙재생성 3회를 다 쓰면 "다시 생성"을 비활성화한다.
  • 2이동결정만 가능 → 최종 이름 입력 모달로.
미리보기 · 최종 이름 입력
‹ 미리보기

이 캐릭터의 이름은? 1

Aria
확정 2
  • 1요소결정 후 대표 이미지를 확정하며 최종 이름을 정하는 모달(popup + Input / Text_field).
  • 2이동"확정" → 생성 완료 안내로. (최종 저장은 앞선 기타 화면의 PUT /member/persona에서 이뤄짐)
03_04 · 생성 완료(성공 모달)

캐릭터가 완성됐어요!

이제 바로 대화를 시작할 수 있어요.

대화 시작하기 1
  • 1이동생성 성공 안내. "대화 시작하기" → 채팅(이 화면군 밖).
  • ·규칙이 화면(/persona/settings/completed)은 정상 흐름으로 들어올 때만 보인다. 직전 화면이 생성 경로가 아니면 메인으로 되돌린다(beforeEnter · router/index.ts 535행). 단계를 건너뛴 우회 진입을 막는다.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 하단 다음을 눌러 소개 → 기본 정보 → 외형 → 성격 → 미리보기 → 완료로 마법사를 따라갈 수 있다(남성 갈래·CRS 경로는 변형/주석으로 표기). 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-03-01-캐릭터설정.md의 wireframe: 필드가 이 파일을 가리킨다.
needs-verification: ①CRS 경로 정식 풀이 미확인(#434 확정: CRS = Conversational Recommender System) ②Figma 세분 단계 ↔ FE 4화면 묶음 경계(#434 확정: Ethnicity·Body·Face·HairStyle 4화면) ③페르소나 개수 제한 안내 정합성([[리스크-persona-개수제한-불일치]]).