와이어프레임 / 35-화면설계 / wireframes / 화면-05 내정보·설정

화면 05 · 내정보 및 설정 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page 4:46 "05. 내정보 및 설정" · 허브 노트: 화면-05-01-내정보-및-설정.md
② 화면설계(상류 명세): ../specs/화면설계-05-01-내정보-및-설정.md — [[화면설계-05-01-내정보-및-설정]]
6개 섹션 · 20개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)
범위: 마이페이지(계정 관리) 화면군. 결제 내역(별도 화면)·멤버십·크레딧·결제수단 관리는 별도 화면 파일(이 화면군 밖).

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

05_01 · 마이페이지 (홈)

계정 관리의 허브. 이메일·멤버십·크레딧·설정 메뉴가 한 화면에 모인다. 멤버십 등급에 따라 무료(Free)·유료(Membership) 두 모습으로 갈린다. 진입 시 GET /member/info로 전체를 채운다.

마이페이지 · 무료(Free)
My page 1
E-mail user@email.com › 2
MembershipFree
Start Membership › 3
Credit0
Add Credit › 4
Payment History› 5
Payment Methods› 6
Set PIN code› 7
Change PIN code›
Change Password› 8
Notifications 9
LanguageEnglish › 10
Log out› 11
Delete account› 12
My character Chats My page 13
  • 주석 · 마이페이지 무료
  • 1데이터진입 시 회원 정보 조회 GET /member/info로 이메일·등급·크레딧·알림·언어를 채운다. 대응 뷰 MyPageView.vue.
  • 2이동이메일 행 → 이메일 변경. 대응 뷰 ChangeEmailView.vue.
  • 3이동"Start Membership" → 멤버십 가입(handleMembership). 멤버십 화면은 [[화면-06-멤버십-크레딧]] (이 화면군 밖).
  • 4이동"Add Credit" → 크레딧 충전(handleAddCredit). 결제 화면은 [[화면-06-멤버십-크레딧]] (이 화면군 밖).
  • 5이동결제 내역(별도 화면) → 별도 화면 파일. 갤러리에서 열람 (이 화면군 밖).
  • 6이동결제 수단 관리 → [[화면-05-03-결제수단-관리]]. 신설 메뉴(arwen_docs#321) (이 화면군 밖).
  • 7이동"Set PIN code" → 간편 비밀번호(PIN) 설정. 대응 뷰 SetPinView.vue.
  • ·이동"Change PIN code" → 간편 비밀번호 변경(ChangePinView.vue). PIN 등록 뒤 노출.
  • 8데이터비밀번호 변경 → POST /auth/email-verify/password(재설정 메일). 대응 뷰 ChangePasswordView.vue.
  • 9동작알림 토글 → 켜짐/꺼짐 즉시 저장 PATCH /member/notification.
  • 10이동"Language" → 언어 설정 모달. 선택 시 PATCH /member/lang.
  • 11이동"Log out" → 로그아웃 확인 팝업. 확인 시 POST /member/signOut.
  • 12이동"Delete account" → 회원 탈퇴. 대응 뷰 DeleteAccountView.vue.
  • 13요소하단 탭(layout/bottom_menu): My character·Chats·My page. 다른 탭은 별도 화면 파일 (이 화면군 밖).
마이페이지 · 유료(Membership)
My page
E-mailuser@email.com ›
3 months membership› 1
renews 2026-08-01 · auto-renew ON 2
Credit1,240
Add Credit ›
Payment History›
Payment Methods›
Change PIN code›
LanguageEnglish ›
Log out›
My character Chats My page
  • 1상태유료 등급이면 멤버십 줄에 등급명(예: 3 months membership)이 뜬다. 눌러 멤버십 관리로(이 화면군 밖).
  • 2상태갱신일과 자동결제(auto-renew) 안내가 붙는다. 근거: [[멤버십]]·[[결제-구독-여정]].

05_02 · 언어 설정 · 로그아웃 (오버레이)

언어 설정은 화면 아래에서 올라오는 모달창(modal), 로그아웃은 화면 가운데에 뜨는 팝업(popup)으로 나눠 쓴다. 근거: KB 노트 "모달과 팝업은 다르게 쓴다".

언어 모달 · default
My page

Language 1

한국어 (Korean)
English
Save 2
  • 주석 · 언어 설정 모달
  • 1요소바텀시트 모달(modal). 언어 선택 항목은 Option 컴포넌트. 한국어·영어 중 하나.
  • 2규칙아무것도 고르지 않으면 Save 비활성. 저장 시 PATCH /member/lang.
언어 모달 · selected
My page

Language

한국어 (Korean)✓ 1
English
Save
  • 1상태고른 항목에 테두리 강조가 붙고 Save 활성. 저장 → PATCH /member/lang 후 마이페이지로 복귀.
로그아웃 확인 팝업
My page

Log out

로그아웃 하시겠어요?

Cancel 1
Ok 2
  • 주석 · 로그아웃 팝업
  • 1이동"Cancel" → 팝업 닫고 마이페이지에 머무름.
  • 2데이터"Ok" → 로그아웃 실행 POST /member/signOut. 성공 시 로그인 화면으로(이 화면군 밖).

05_03 · 이메일 변경

새 이메일 입력 → 인증 메일 발송 → 링크 인증 → 완료. 이미 쓰는 이메일이면 오류로 막는다. 대응 뷰 ChangeEmailView.vue·ChangeEmailSentView.vue·ChangeEmailResultView.vue.

이메일 변경 · default
‹ Change E-mail 1

새 이메일을
입력해 주세요

New e-mail 2
Continue 3
  • 주석 · 이메일 변경 기본
  • 1이동뒤로 가기 → 마이페이지.
  • 2동작새 이메일 입력. 형식·중복 검증. 컴포넌트 Input/Text_field.
  • 3데이터변경 요청 POST /member/email → 인증 메일 발송 POST /member/email-verify. 채우기 전에는 비활성.
이메일 변경 · filled
‹ Change E-mail

새 이메일을
입력해 주세요

new@email.com
Continue
  • ·상태이메일 채우면 Continue 활성 → 인증 메일 발송 안내로.
이메일 변경 · 인증메일 전송
‹

인증 메일을 보냈어요

받은 메일의 인증 링크를 눌러
이메일 변경을 마치세요.

  • ·데이터인증 메일 발송 POST /member/email-verify. 대응 뷰 ChangeEmailSentView.vue.
  • ·이동봉투(일러스트) 클릭 = 메일 링크 인증 시뮬 → 변경 완료.
이메일 변경 · 사용중(오류)
‹ Change E-mail

새 이메일을
입력해 주세요

used@email.com
이미 사용 중인 이메일입니다. 1
Continue
  • 1상태이미 가입에 쓰인 이메일이면 오류 Label로 막는다. 다른 이메일로 재입력 유도. #needs-verification 오류 문구 정본.
이메일 변경 · success
‹

이메일이 변경되었어요

새 이메일로 로그인할 수 있어요.

Go to Home 1
  • 1이동변경 완료 화면. 대응 뷰 ChangeEmailResultView.vue. "Go to Home" → 메인(이 화면군 밖).

05_04 · 간편 비밀번호(PIN) 설정

4자리 PIN을 처음 등록한다. 입력 → 재입력 확인(불일치 시 오류) → 완료. PIN은 브라우저 재실행 시 본인 확인용 4자리 잠금이다. 대응 뷰 SetPinView.vue·ConfirmPinView.vue.

PIN 설정 · 입력
‹ Set PIN code 1

PIN 번호를
설정하세요

숫자 4자리 2
Continue 3
  • 주석 · PIN 설정 입력
  • 1이동뒤로 가기 → 마이페이지.
  • 2동작4칸에 한 자리씩 숫자 입력(Input/Text_field + 키패드).
  • 3이동입력 완료 → 재입력 확인 단계로. PIN 등록 처리(FE 내부).
PIN 설정 · 재입력 error
‹ Set PIN code

PIN 번호를
다시 입력하세요

PIN codes do not match. 1
Continue
  • 1상태앞서 넣은 PIN과 다르면 "PIN codes do not match." 오류. 일치해야 다음 진행(ConfirmPinView.vue).
PIN 설정 · success
‹

PIN이 설정되었어요

다음 접속부터 PIN으로 잠금을 풀어요.

확인 1
  • 1이동등록 완료 → "확인" → 마이페이지로 복귀. 근거: [[glossary]] PIN 정의.

05_05 · 간편 비밀번호(PIN) 변경

이미 PIN을 쓰는 사용자가 바꾼다. 현재 PIN 확인 → 새 PIN 입력·재입력 → 완료. 대응 뷰 ChangePinView.vue·ConfirmChangePinView.vue.

PIN 변경 · 기존 확인
‹ Change PIN code 1

현재 PIN을
입력하세요

본인 확인 2
Continue 3
  • 주석 · PIN 변경 기존 확인
  • 1이동뒤로 가기 → 마이페이지.
  • 2동작현재 쓰는 PIN 4자리 입력. 틀리면 오류(error) 상태로 재시도.
  • 3이동확인되면 새 PIN 입력 단계로.
PIN 변경 · 새 입력/재입력
‹ Change PIN code

새 PIN을
입력하세요

한 번 더 입력해 확인 1
Continue
  • 1상태새 PIN 입력 → 재입력으로 확인. 불일치 시 오류(설정과 동일 규칙).
PIN 변경 · success
‹

PIN이 변경되었어요

새 PIN으로 잠금을 풀어요.

확인 1
  • 1이동변경 완료 → "확인" → 마이페이지로 복귀.

05_06 · 회원 탈퇴

약관을 읽고 동의한 뒤 탈퇴 사유를 골라야 탈퇴한다. 동의 체크 + 사유 선택 → 계정 삭제 → 완료 팝업. 대응 뷰 DeleteAccountView.vue. 처리하면 회원 데이터는 탈퇴 기록으로 남는다([[MemberWithdraw]]). 노출 문구 정본은 [[회원-탈퇴-정책]] "탈퇴 화면 문구" 절이다(#427 확정 · [[결정-회원-탈퇴-정책]] D47).

회원 탈퇴 · 동의 전(default)
‹ Delete account 1

Account Deletion 2

1. Immediate

2. Data deletion

3. Legally retained records

4. Credits & membership

5. Re-registration

I have read the above and agree to delete my account. 3
Why are you leaving? (required) 4
Not the characters/chats I expected
Rarely use it
Cost is a burden
Privacy or security concerns
Too many errors or issues
Other (free text) 5
Delete account 6
  • 주석 · 회원 탈퇴 동의 전
  • 1이동뒤로 가기 → 마이페이지.
  • 2요소탈퇴 안내 헤딩 + 약관 본문 5항목(①즉시 처리 ②데이터 삭제 ③법정 보관 정보 ④크레딧·멤버십 ⑤재가입 제한). 문구 전문은 [[회원-탈퇴-정책]] "탈퇴 화면 문구" 절이 정본이다(#427 확정 · D47). FE i18n(한국어·영어)에 하드코딩해 노출한다(#606 옵션 A).
  • 3동작탈퇴 약관 동의 체크(button/check+text). 필수. 문구 = "위 내용을 확인했으며 탈퇴에 동의합니다."
  • 4동작탈퇴 사유 선택. 필수·택1(단일 선택). 항목은 5종 + 기타로 D47 7항이 확정했다. 고른 항목에 테두리 강조가 붙는다(05_02 언어 모달과 같은 결).
  • 5규칙"Other (free text)"를 고르면 직접 입력란이 아래에 나타난다 — 다음 상태 카드에서 그린다.
  • 6규칙약관 동의와 사유 선택을 둘 다 충족해야 Delete account 활성. 하나라도 비면 비활성이다(화면설계 "탈퇴 게이트" 규칙).
회원 탈퇴 · 동의 후(selected)
‹ Delete account

Account Deletion

1. Immediate

2. Data deletion

3. Legally retained records

4. Credits & membership

5. Re-registration

I have read the above and agree to delete my account.
Why are you leaving? (required)
Not the characters/chats I expected
Rarely use it✓ 1
Cost is a burden
Privacy or security concerns
Too many errors or issues
Other (free text)
Delete account 2
  • 주석 · 회원 탈퇴 동의 후
  • 1상태고른 사유 하나에만 테두리 강조가 붙는다(단일 선택). 다른 항목을 누르면 앞 선택이 풀린다.
  • 2상태동의 체크(on) + 사유 선택(1건) → Delete account 활성. 실행 → POST /member/withdraw(선택한 사유를 함께 보낸다).
회원 탈퇴 · 기타 사유 입력
‹ Delete account

Account Deletion

1. Immediate

2. Data deletion

3. Legally retained records

4. Credits & membership

5. Re-registration

I have read the above and agree to delete my account.
Why are you leaving? (required)
Not the characters/chats I expected
Rarely use it
Cost is a burden
Privacy or security concerns
Too many errors or issues
Other (free text)✓ 1
Tell us more… 2
Delete account 3
  • 주석 · 기타 사유 직접 입력
  • 1상태"Other (free text)"를 고른 상태다. D47 7항의 여섯 번째 항목이다.
  • 2동작기타를 고르면 직접 입력란이 나타난다(FormTextarea). 다른 사유로 바꾸면 입력란이 사라지고 입력값도 비운다. 규칙입력 글자 수: 하한 1자(앞뒤 공백 제거 후)·상한 500자(#711 확정). FormTextarea에 maxlength=500.
  • 3규칙기타를 골랐을 때 입력란이 비어 있으면 사유 선택을 충족하지 않은 것으로 본다(버튼 비활성). 선례: 환불 요청 화면(06_01)의 "사유≥1자" 규칙.
회원 탈퇴 · 완료 팝업
‹ Delete account

Account Deletion

1. Immediate

2. Data deletion

3. Legally retained records

I have read the above and agree to delete my account.
Why are you leaving? (required)
Rarely use it✓
Cost is a burden
Delete account

탈퇴 완료

Your account has been deleted.

Ok 1
  • 1이동탈퇴 성공 → dim+popup 안내. "Ok" → 로그인/시작 화면으로(이 화면군 밖). 데이터는 [[MemberWithdraw]] 기록으로 남는다. 유상 미사용 크레딧 환불은 BE가 이어서 처리한다(D47 5항 · #644).

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-05-01-내정보-및-설정.md의 wireframe: 필드가 이 파일을 가리킨다. 결제 내역(별도 화면)·멤버십·크레딧·결제수단 관리는 별도 화면 파일이며, 화면 간 이동은 갤러리(index.html)로 본다.