와이어프레임 / 35-화면설계 / wireframes / 화면-06 멤버십·크레딧

화면 06 · 멤버십 / 크레딧 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page 06. 멤버쉽/크레딧 (825:3136) · 허브 노트: 화면-06-멤버십-크레딧.md
6개 섹션 · 15개 상태 프레임 · 기기 375×812 · 결제 대행: PortOne(포트원) · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)

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

06_01 · 멤버십 안내 · 가입

무료(FREE)·멤버십 두 플랜을 비교해 보여주는 가입 안내. "Start membership"을 누르면 아래에서 기간 선택 모달이 솟는다. 약관 동의 후 카드 결제로 이어진다.

멤버십 안내 · 미가입 (플랜 비교)
‹ Membership 1
FREE 2 $0/mo
✓ Create 1 character. ✓ Enjoy up to 50 chats per character per day. ✓ Generate up to 3 images per character per day.
You are on this plan
Membership 3 $7.99/mo
✓ Create up to 3 characters. ✓ Enjoy unlimited daily chats per character. ✓ Generate up to 30 images per character per day.
Start membership 4
  • 주석 · 멤버십 안내
  • 1이동뒤로 가기 → 메인·마이페이지 진입점(이 화면군 밖). FE 뷰 MembershipGuideView.vue · 경로 /membership.
  • 2요소무료(FREE) 플랜 카드. "You are on this plan"으로 현재 등급을 표시. 혜택 목록은 icon-check-14로 나열.
  • 3데이터멤버십 플랜 카드(월 $7.99). 상품·플랜 조회 GET /product · GET /product/membership.
  • 4이동가입 시작 → 기간 선택 모달(6·3·1개월).
  • ·규칙플랜 카드는 MembershipPlanCard.vue · 선택형 카드는 contents-btn. 가격 $7.99는 소수점 값이라 부동소수점 오차 주의([[부채-Float-가격정밀도]]).
  • ·규칙Figma에 안내/플랜 화면이 두 벌(구버전·신버전 비교 시안)로 들어 있다. 정본 확정 필요 #needs-verification.
기간 선택 모달 · default
‹ Membership

Choose your plan 1

6 months
38% off
3 months
13% off
1 month
$7.99/mo
Agree and join membership 2
Pay with card 3
  • 주석 · 기간 선택 모달
  • 1요소바닥에서 솟는 modal. 6개월(38% 할인)·3개월(13% 할인)·1개월 중 하나를 고른다.
  • 2동작약관 동의 체크(button/check+text). 필수 동의.
  • 3상태미선택·미동의 상태라 "Pay with card"가 비활성(ghost). 기간+동의를 채우면 selected로.
  • ·이동기간 카드 클릭 → selected 상태.
기간 선택 모달 · selected
‹ Membership

Choose your plan

6 months
38% off
3 months
13% off
Agree and join membership
Pay with card 1
  • 1데이터기간 선택 + 약관 동의(on) → "Pay with card" 활성. 구독 실행 PATCH /member/subscribe/:idx → PortOne 카드 결제([[PortOne-연동]], 이 화면군 밖) → 멤버십 이용 중. 자동 갱신은 배치가 처리([[흐름-정기결제-자동갱신]]).

06_01_01 · 멤버십 이용 중 · 플랜 변경

이미 멤버십을 쓰는 사용자 화면. 멤버십 플랜이 위로 올라가고 "Change membership"이 보인다. 기간을 바꾸면 변경 완료 팝업 → 변경 완료 모달로 이어진다.

멤버십 이용 중 · default
‹ Membership 1
Membership 2 $7.99/mo
✓ Create up to 3 characters. ✓ Enjoy unlimited daily chats per character. ✓ Generate up to 30 images per character per day.
Change membership 3
FREE $0/mo
  • 주석 · 멤버십 이용 중
  • 1이동뒤로 가기 → 마이페이지(이 화면군 밖). 결제 성공 후 진입하는 이용 중 화면.
  • 2요소현재 쓰는 멤버십 플랜이 위로 올라온다. 보유 상태는 MemberMembership 엔티티로 판별.
  • 3이동기간 변경 → 플랜 변경 모달. FE 뷰 MembershipChangePlanView.vue(mode=change-plan) · 경로 /membership/change-plan.
  • ·상태무료(FREE) 플랜은 아래로 내려가 흐리게(비활성) 표시된다.
플랜 변경 모달 · 변경할 플랜 선택
‹ Membership

Change your plan

1 month 1
Your current plan
6 months
38% off
Agree and change membership 2
Complete 3
End membership 4
  • 주석 · 플랜 변경 모달
  • 1요소현재 쓰는 기간을 "Your current plan"으로 표시. 다른 기간을 골라 바꾼다.
  • 2동작약관 동의 체크("Agree and change membership"). 동의해야 Complete 활성.
  • 3데이터변경 실행 PATCH /member/subscribe/:idx(플랜 조회 GET /product/membership) → 변경 완료 팝업.
  • 4이동"End membership" → 해지 확인 팝업. 해지는 PATCH /member/unsubscribe.
변경 완료 팝업
‹ Membership

변경 완료

멤버십 플랜이 바뀌었습니다.

확인 1
  • 1이동플랜 변경 성공 안내 popup. "확인" → 바뀐 내용을 다시 보여주는 변경 완료 모달.
변경 완료 후 모달 팝업
‹ Membership

Your new plan 1

6 months 38% off
확인 2
  • 1요소변경 완료 뒤 바뀐 기간·혜택을 모달로 다시 확인시킨다.
  • 2이동"확인" → 멤버십 이용 중 화면으로 복귀.

06_01_01 · 멤버십 해지

"End membership"을 누르면 다시 묻는 확인 팝업이 뜬다. 예(Yes)를 고르면 해지 완료 팝업이 뜨고, 잔여기간까지는 계속 이용한다.

해지 안내 팝업 · 재확인
‹ Membership

멤버십을 해지할까요? 1

이용 기간이 끝날 때까지는 계속 쓸 수 있어요. 그 뒤에는 프리미엄 기능이 사라집니다.

No 2
Yes 3
  • 주석 · 해지 확인
  • 1규칙해지 재확인 popup. 잔여기간 이용 유지·이후 기능 상실을 고지.
  • 2이동"No" → 해지 취소, 멤버십 이용 중으로 복귀.
  • 3데이터"Yes" → 해지 실행 PATCH /member/unsubscribe → 해지 완료 팝업.
해지 완료 팝업
‹ Membership

해지 완료

이용 기간이 끝날 때까지는 멤버십을 계속 쓸 수 있어요.

확인 1
  • 1규칙해지 완료. "확인" → 이용 중 화면(잔여기간 유지). 잔여기간이 끝나면 무료 등급으로 전환된다(06_01_03).

06_01_02 · 재결제 (잔여기간 남은 경우)

해지했지만 이용 기간이 아직 남은 사용자가 다시 결제할 때 보는 화면. 남은 기간 안내와 함께 플랜 선택으로 이어진다.

재결제 · 잔여기간 있음
‹ Membership 1
해지 예약됨 2
이용 기간이 끝나기 전까지 다시 구독할 수 있어요.
Membership $7.99/mo
Resume membership 3
  • 주석 · 재결제(잔여기간)
  • 1이동뒤로 가기 → 마이페이지(이 화면군 밖). FE 뷰 MembershipChangePlanView.vue(mode=re-subscribe) · 경로 /membership/re-subscribe.
  • 2상태해지했지만 잔여기간이 남은 상태. 남은 기간을 안내한다.
  • 3데이터다시 구독 PATCH /member/subscribe/:idx → 멤버십 이용 중 복귀. 잔여기간 안에는 추가 결제 없이 재개될 수 있음 #needs-verification.

06_01_03 · 잔여기간 종료 후 무료 전환

해지 뒤 잔여기간이 끝나 무료 등급으로 내려간 사용자 화면. 무료 플랜이 현재 등급으로 표시되고, 멤버십에 "Resume membership" 버튼이 붙어 재가입을 권한다.

무료 전환 · 재가입 권유
‹ Membership 1
FREE 2 $0/mo
✓ Create 1 character. ✓ Enjoy up to 50 chats per character per day.
You are on this plan
Membership $7.99/mo
Resume membership 3
  • 주석 · 무료 전환
  • 1이동뒤로 가기 → 마이페이지(이 화면군 밖).
  • 2상태잔여기간이 끝나 무료(FREE) 등급으로 내려간 상태. 무료 플랜이 현재 등급.
  • 3이동"Resume membership" → 기간 선택 모달(재가입). 안내 화면(06_01)과 달리 이미 이용 이력이 있는 사용자 대상.

06_02 · 크레딧 구매

크레딧(충전식 재화) 상품 목록. 월 1회 한정 묶음 상품을 맨 위에 두고, 그 아래 20·40·80·200 크레딧을 가격순으로 늘어놓는다. 상품을 고르면 구매 확인 모달에서 카드로 결제한다.

크레딧 안내 · default
‹ Credits 1
Monthly Exclusive Package 2
월 1회 한정 · 보너스 크레딧 포함
20 Credits 3
+ bonus
40 Credits
+ bonus
80 Credits
+ bonus
200 Credits
+ bonus
  • 주석 · 크레딧 안내
  • 1데이터크레딧 상품 목록 GET /product/credit. FE 뷰 CreditsView.vue · 경로 /credits.
  • 2요소월 1회 한정 묶음 상품(Monthly Exclusive Package)을 맨 위에 강조 배치. 보너스 크레딧 포함.
  • 3이동20·40·80·200 크레딧 상품(CreditCard.vue · contents-btn). 각 상품의 보너스 크레딧 비율 표시. 카드 클릭 → 선택 상태.
  • ·규칙가격은 소수점 값이라 부동소수점 오차 주의([[부채-Float-가격정밀도]]).
크레딧 안내 · selected
‹ Credits
Monthly Exclusive Package
월 1회 한정 · 보너스 크레딧 포함
80 Credits 1
+ bonus
200 Credits
+ bonus
Add Credits 2
  • 1상태상품 하나를 고른 상태. 선택 카드 테두리가 진해진다.
  • 2이동상품 선택 시 하단 "Add Credits" CTA 활성 → 구매 확인 모달.
크레딧 안내 · 이미 구매(월 소진)
‹ Credits
Monthly Exclusive Package Purchased 1
이번 달 구매 완료
20 Credits
+ bonus
40 Credits
+ bonus
  • 1규칙월 1회 한정 묶음 상품을 이번 달에 이미 산 경우, 해당 상품만 흐리게(비활성)·"Purchased"로 잠근다. 일반 크레딧 상품은 계속 구매 가능.
크레딧 구매 확인 모달
‹ Credits

구매 확인

80 Credits 1
+ bonus
Agree and continue to add credits 2
Pay with card 3
  • 주석 · 구매 확인 모달
  • 1요소고른 상품과 가격을 다시 보여준다(바닥에서 솟는 modal).
  • 2동작약관 동의 체크("Agree and continue to add credits"). 동의해야 "Pay with card" 활성.
  • 3데이터단건 결제 POST /payment([[POST-payment]]) · 파라미터 uuid·creditProductIdx·productType=CREDIT → PortOne 카드 결제(이 화면군 밖). 멤버십과 달리 자동 갱신 없는 단건 구매.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-06-멤버십-크레딧.md의 wireframe: 필드가 이 파일을 가리킨다. Figma 페이지에는 이 파일이 다루지 않는 06_03 환불·06_04 contact 구획도 있으나, KB 노트에 문서화된 멤버십·크레딧 15상태만 담았다(#needs-verification).