와이어프레임 / 35-화면설계 / wireframes / 화면-결제수단 관리

화면 · 결제수단 관리 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · 신설 화면(화면설계서 PPTX 기반 · Figma 페이지 없음) · 클릭 가능(prototype)
출처: 결제수단-관리-화면설계서.pptx(8슬라이드) · KB 노트: 화면-05-03-결제수단-관리.md · 결정 arwen_docs#321 / 상위 arwen_docs#295
5개 섹션(A~E) · 9개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)

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

A · My Page 진입 (결제수단 관리 메뉴)

내 정보·설정(My Page)의 Payment History 행 아래에 Payment Methods · 결제 수단 관리 행을 신설한다. 나머지 설정 항목은 현행 유지.

A · My Page (메뉴 신설)
‹ 내 정보 · 설정 1
E-mail›
Password›
PIN›
멤버십›
Payment History · 결제 내역 2›
Payment Methods · 결제 수단 관리 3Manage ›
알림›
언어›
  • 주석 · My Page 진입
  • 1이동뒤로 가기 → 이전 화면(메인/설정 상위). (이 화면군 밖)
  • 2요소기존 Payment History · 결제 내역 행. 현행 유지. 상세는 (이 화면군 밖).
  • 3이동신설 행. Payment History 바로 아래에 Payment Methods · Manage 추가 → 결제수단 목록. 근거: arwen_docs#321 · 상위 arwen_docs#295(결제수단 관리 메뉴로 일원화).
  • ·규칙나머지 설정 항목(E-mail/Password/PIN/멤버십/알림/언어)과 기존 레이아웃은 현행 유지. 이 행만 신설한다.

B · 결제수단 목록 (다중 · 기본 배지)

등록 수단을 다중으로 나열한다. 기본 수단은 [기본] 배지 + 삭제 버튼 미노출(삭제 차단형). 비기본은 [기본 지정]·[삭제]를 노출한다. 하단에 [+ 결제수단 추가].

B · 목록 (default)
‹ 결제 수단 관리
▭
신한카드 ···· 1234 1
유효기간 05/28
기본 2
›
▭
국민카드 ···· 5678
유효기간 11/27
기본 지정 3 삭제 4
▭
카카오페이
간편결제
기본 지정 삭제
+ 결제수단 추가 5
  • 주석 · 결제수단 목록
  • 1요소등록 수단을 다중으로 나열(수단명·마스킹번호·유효기간). 다중 등록 + 기본 지정. 근거: 결정① arwen_docs#321.
  • 2요소[기본] 배지. 기본 = 정기결제(구독)에 쓰이는 수단. 이 행은 삭제 버튼을 노출하지 않는다(삭제 차단형). 근거: 결정③.
  • 3이동비기본 행의 [기본 지정] → 기본 지정 동의 모달(구독 재바인딩).
  • 4이동비기본 행의 [삭제] → 삭제 확인 모달(확인 후 즉시 삭제).
  • 5이동[+ 결제수단 추가] → 카드 등록(빌링키 발급) 화면.
  • ·데이터목록 조회 → BE 결제수단 관리 전용 엔드포인트(목록). 신설 필요·경로 미정 · needs-verification(결정④, 아직 API 스펙 없음).
  • ·규칙기본 수단은 삭제 차단, 다른 수단을 기본으로 교체하거나 구독 해지 뒤 삭제. 근거: arwen_docs#321 · [[결정-재구독-경로-빌링키검증]].
B · 목록 (등록 수단 없음)
‹ 결제 수단 관리

등록된 결제수단이 없어요

결제수단을 추가하면
구독·크레딧 결제에 사용할 수 있어요.

+ 결제수단 추가 1
  • 1상태수단을 하나도 등록하지 않은 첫 진입 상태. 추가 화면으로 유도.

C · 기본 지정 동의 모달 (구독 재바인딩)

비기본 수단을 기본으로 지정하면 동의 모달을 거쳐 활성 정기구독이 그 수단으로 재바인딩된다. 침묵 자동 전환은 없다.

C · 기본 지정 동의 모달
‹ 결제 수단 관리
▭
국민카드 ···· 5678

기본 결제수단으로 지정할까요? 1

정기 구독 결제수단도 이 수단으로 함께 변경됩니다. 다음 결제부터 적용돼요.

지정하기 2
취소 3
  • 주석 · 기본 지정 동의
  • 1규칙기본 지정 = 구독 결제수단 변경(통합). 동의 기반 재바인딩이며 침묵 전환이 없다. 근거: 결정② arwen_docs#321.
  • 2데이터지정 → 기본 교체 + 활성 정기구독 재바인딩. BE 전용 엔드포인트(기본지정·구독 재바인딩) 신설 필요·경로 미정 · needs-verification(결정④). 완료 후 목록 복귀.
  • 3이동취소 → 기본·구독 변경 없이 목록으로. (동의 거부 = 변경 없음)

D · 결제수단 추가 (빌링키 등록 → 기본 지정 확인)

카드 정보로 빌링키를 발급해 등록한다. 등록 완료 시 동일한 기본 지정 모달이 뜬다. 발급 실패는 재시도로 유도.

D · 추가 (카드 등록)
‹ 결제수단 추가

카드 등록

카드번호 1
유효기간 MM/YY
CVC
비밀번호 앞 2자리
생년월일
등록하기 2
  • 주석 · 결제수단 추가
  • 1동작카드 정보 입력(번호·유효기간·CVC·비밀번호 앞 2자리·생년월일). 빌링키 발급용 필드.
  • 2데이터등록 → 빌링키 발급은 [[결정-재구독-경로-빌링키검증]] 패턴 재사용. 수단 저장은 BE 결제수단 관리 전용 엔드포인트(추가) 신설 필요·경로 미정 · needs-verification(결정④). 성공 시 기본 지정 모달.
  • ·규칙중복 카드 등록 방지. 발급 실패 시 등록 실패 안내·재시도로 이동.
D · 등록 완료 → 기본 지정
‹ 결제수단 추가

카드 등록

···· ···· ···· 9012
09/29
•••
등록하기

기본 결제수단으로 지정할까요? 1

방금 등록한 수단을 기본으로 지정하면, 정기 구독 결제수단도 이 수단으로 변경됩니다.

기본으로 지정 2
나중에 3
  • 1규칙빌링키 발급·등록 완료 시 D는 C와 동일한 기본 지정 모달을 띄운다. 근거: 결정②·화면 D arwen_docs#321.
  • 2데이터지정 → 기본 교체 + 구독 재바인딩(needs-verification, 결정④). 목록으로.
  • 3이동나중에 → 기본·구독 변경 없이 목록으로(등록만 완료).
D · 빌링키 발급 실패
‹ 결제수단 추가

카드 등록

···· ···· ···· 9012
09/29
•••
카드 등록에 실패했어요. 정보를 확인하고 다시 시도해 주세요. 1
다시 시도 2
  • 1상태빌링키 발급 실패 시 오류 Label 노출. 근거: 예외 처리(빌링키 발급 실패 → 등록 실패 안내·재시도).
  • 2이동다시 시도 → 카드 등록 입력으로 복귀. (중복 카드일 때도 등록 차단·안내)

E · 삭제 (비기본 즉시 / 기본 차단·유도)

비기본 수단은 확인 후 즉시 삭제한다. 기본(구독 물린) 수단은 직접 삭제할 수 없고, 다른 수단을 기본으로 지정하거나 구독을 해지하도록 유도한다.

E · 비기본 삭제 확인
‹ 결제 수단 관리
▭
국민카드 ···· 5678

이 결제수단을 삭제할까요? 1

국민카드 ···· 5678 · 삭제하면 되돌릴 수 없어요.

삭제하기 2
취소
  • 주석 · 비기본 삭제
  • 1규칙비기본(구독에 물리지 않은) 수단만 삭제 대상. 근거: 화면 E arwen_docs#321.
  • 2데이터삭제 → 확인 후 즉시 삭제. BE 결제수단 관리 전용 엔드포인트(삭제) 신설 필요·경로 미정 · needs-verification(결정④). 완료 후 목록 갱신.
E · 기본·구독중 삭제 차단
‹ 결제 수단 관리
▭
신한카드 ···· 1234 1
구독 중 · 정기결제 수단
기본
›
구독 중인 기본 결제수단은 삭제할 수 없어요. 구독을 먼저 해지하거나, 다른 수단을 기본으로 지정하세요. 2
구독 관리로 이동 3
+ 결제수단 추가
  • 1상태등록 수단 1개 + 구독 중. 기본(구독 물린) 수단이라 삭제 버튼을 노출하지 않는다. 근거: 결정③(삭제 차단형).
  • 2규칙삭제 시도 시 "구독을 먼저 해지하세요" 안내. 근거: 예외 처리(등록 수단 1개 + 구독 중).
  • 3이동구독 해지 → 멤버십·구독 관리 화면. (이 화면군 밖).

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 신설 화면이라 Figma 정본이 없고 화면설계서 PPTX + KB 노트 화면-05-03-결제수단-관리.md의 상태 목록(A~E)으로 세웠다. BE 결제수단 관리 전용 엔드포인트(목록·추가·삭제·기본지정·구독 재바인딩)는 결정④로 신설 필요·경로 미확정(needs-verification)이며, 빌링키 발급은 [[결정-재구독-경로-빌링키검증]] 패턴을 재사용한다.