SYSTEM BLUEPRINT

UX/UI Wireframe
모아페스타 후원 시스템

3-Click 간편 후원 플로우부터 크리에이터 정산 대시보드까지의 핵심 화면 설계

팬덤 (후원자) 시나리오

3-Click 간편 결제 플로우

콘텐츠 감상 중 이탈 없이 즉각적으로 후원을 완료하는 Frictionless 여정

콘텐츠 감상

모아페스타 플랫폼에서 크리에이터 콘텐츠 열람

후원 버튼 클릭

콘텐츠 하단 또는 프로필의 후원하기 버튼 선택

금액 선택

팝업 UI에서 직관적인 후원 금액 및 결제 수단 선택

간편 결제

연동된 간편결제(PG)로 1초 만에 결제 승인

리액션 시청

결제 완료 즉시 Lottie 애니메이션 리액션 감상

팬덤 (후원자) | 화면 01

후원하기 바텀시트 (Bottom Sheet)

m.moafesta.com/content/123
크리에이터 후원하기
₩ 5,000
₩ 10,000
₩ 50,000
직접 입력
결제하기

[화면 개요 및 목적]

사용자가 콘텐츠 열람 중 이탈 없이 후원 금액을 선택할 수 있도록 바텀시트(Bottom Sheet) 형태의 UI를 제공합니다. 모바일 환경에 최적화된 터치 영역을 확보했습니다.

[핵심 기능 로직]

선택된 금액을 상태로 관리하며, '결제하기' 클릭 시 선택된 금액 정보를 PG 결제 모듈로 전달합니다.

  • Context API / Zustand for State Management
  • CSS Transitions / Framer Motion for Bottom Sheet
팬덤 (후원자) | 화면 02

결제 완료 및 인터랙티브 리액션

m.moafesta.com/content/123
🥳
후원 성공!
크리에이터에게 큰 힘이 되었습니다.
₩ 5,000
콘텐츠로 돌아가기

[화면 개요 및 목적]

간편결제가 완료되면 즉각적으로 성공을 알리는 애니메이션 리액션이 화면 전체에 나타납니다. 사용자의 후원 경험을 긍정적인 감정으로 마무리합니다.

[핵심 기능 로직]

PG사 웹훅(Webhook) 또는 결제 성공 콜백 수신 후 Lottie Player를 트리거하여 애니메이션을 렌더링하고, 3초 후 자동으로 시트가 닫힙니다.

  • Toss Payments / PortOne SDK Integration
  • Lottie Web Player
팬덤 (후원자) | 화면 03

나의 후원 내역

m.moafesta.com/mypage/donations
나의 후원 내역
크리에이터 A
2026.05.14 14:30
₩ 5,000
크리에이터 B
2026.05.12 10:15
₩ 10,000

[화면 개요 및 목적]

마이페이지에서 사용자가 지금까지 후원한 내역을 크리에이터별, 일자별로 리스트업하여 확인할 수 있는 화면입니다.

[핵심 기능 로직]

사용자 ID 기반 후원 DB 결제 내역(Transaction) 조회 API 연동.

  • RESTful API (GET /users/{id}/donations)
  • Infinite Scrolling Pagination
크리에이터 (수혜자) 시나리오

정산 및 출금 플로우

복잡한 서류 없이 실시간으로 누적 후원금을 확인하고 출금을 신청하는 시스템

모아페스타 스튜디오

모아페스타 크리에이터 전용 스튜디오 로그인

후원 대시보드

누적 후원액, 수수료, 정산 가능 금액 실시간 확인

출금 신청

연결된 본인 계좌로 정산 금액 출금 요청

승인 및 송금

관리자 자동/수동 검토 후 정산 대금 송금 진행

정산 완료

정산 완료 상태 알림 수신 및 계좌 입금 확인

크리에이터 (수혜자) | 화면 01

크리에이터 정산 대시보드 메인

studio.moafesta.com/dashboard

정산 요약

누적 후원금
₩ 1,500,000
플랫폼 수수료 (10%)
-₩ 150,000
출금 가능 금액
₩ 1,350,000
출금 신청하기

[화면 개요 및 목적]

크리에이터가 로그인 시 가장 먼저 확인하는 정산 요약 화면입니다. 발생한 총 후원금, 플랫폼 수수료, 실제 출금 가능 금액을 직관적인 카드로 분리하여 명확하게 제시합니다.

[핵심 기능 로직]

결제 완료된 트랜잭션을 합산하여 실시간 정산액을 계산하며, 수수료 정책(10%)을 자동 적용하여 노출합니다.

  • PostgreSQL SUM() Aggregation
  • React Recharts (차트 도입 시)
크리에이터 (수혜자) | 화면 02

출금 신청 및 계좌 관리

studio.moafesta.com/payout/request

출금 신청

출금 신청 금액 ₩ 1,350,000
입금 받을 계좌
국민은행
123456-00-789012 (예금주: 홍길동)
변경
신청 완료하기

[화면 개요 및 목적]

출금 가능 금액을 확인하고 사전에 등록된 본인 명의 계좌로 입금을 요청하는 폼입니다. 오입금을 방지하기 위해 등록된 계좌 정보를 명확히 표시합니다.

[핵심 기능 로직]

출금 신청 시 정산 테이블의 상태가 '신청 완료'로 변경되며, 관리자 대시보드로 알림이 전송됩니다.

  • Transaction State Machine (Pending -> Requested -> Completed)
  • Bank Account Verification API (펌뱅킹 연동 고려 시)
크리에이터 (수혜자) | 화면 03

후원자 통계 및 감사 메시지

studio.moafesta.com/supporters

Top 후원자 랭킹

순위 닉네임 누적 금액 최근 후원일
1 모아러브99 ₩ 500,000 2026.05.14
2 열혈팬가이드 ₩ 300,000 2026.05.13

[화면 개요 및 목적]

자신에게 후원한 팬덤의 리스트와 기여도를 확인하는 인사이트 테이블입니다. VIP 팬덤 관리를 위한 지표를 제공합니다.

[핵심 기능 로직]

특정 크리에이터에게 결제된 내역을 User 기준으로 Grouping 및 Sum 연산하여 내림차순 정렬합니다.

  • Data Aggregation & Visualization
  • Server-side Pagination & Sorting
시스템 관리자 (Admin) 시나리오

통합 매출 및 정산 관리

전체 모아페스타 플랫폼의 결제 트랜잭션을 모니터링하고 정산을 승인하는 중앙 관제 센터

매출 모니터링

실시간 결제 성공/실패 로그 확인

정산 요청 확인

크리에이터의 출금 요청 리스트업

데이터 검증

어뷰징 및 부정 결제 필터링 검토

정산 승인

송금 시스템 트리거 및 승인 처리

통계 도출

월별 플랫폼 수수료 수익 리포트 생성

시스템 관리자 (Admin) | 화면 01

플랫폼 통합 대시보드

admin.moafesta.com

플랫폼 누적 후원 및 수익 현황

총 거래액 (Gross)
₩ 50,000,000
플랫폼 수익 (Net)
₩ 5,000,000
미정산 잔액
₩ 45,000,000

[화면 개요 및 목적]

전체 후원 생태계의 흐름을 한눈에 파악할 수 있는 관리자 전용 대시보드입니다. 회계 처리를 위한 총 거래액, 순수익, 부채(미정산 잔여액)를 명시합니다.

[핵심 기능 로직]

전체 Transaction DB에서 성공한 결제 건들을 Aggregation합니다.

  • Admin Role-based Access Control (RBAC)
  • Real-time DB Queries
시스템 관리자 (Admin) | 화면 02

정산 승인 대기열

admin.moafesta.com/settlements
신청일시 크리에이터 신청 금액 계좌 정보 액션
05.14 10:00 크리에이터A ₩ 1,350,000 국민 123456...
05.13 18:30 크리에이터B ₩ 810,000 신한 110-234...

[화면 개요 및 목적]

크리에이터가 요청한 출금 건을 리스트업하고 관리자가 검토 후 승인하는 화면입니다.

[핵심 기능 로직]

'승인' 버튼 클릭 시 정산 상태가 완료로 업데이트되며, 필요 시 펌뱅킹 API를 통해 계좌 송금을 자동 실행합니다.

  • Transaction State Management
  • Admin UI Table Components
시스템 관리자 (Admin) | 화면 03

결제 로그 모니터링

admin.moafesta.com/logs
[2026-05-14 14:30:01] PAY_SUCCESS | USER_ID: 991 | AMOUNT: 5000 | PG: TOSS_PAY
[2026-05-14 14:32:15] PAY_FAILED | USER_ID: 102 | AMOUNT: 10000 | REASON: INSUFFICIENT_FUNDS
[2026-05-14 14:35:00] PAY_SUCCESS | USER_ID: 442 | AMOUNT: 50000 | PG: KAKAO_PAY
[2026-05-14 14:38:12] PAY_SUCCESS | USER_ID: 120 | AMOUNT: 10000 | PG: TOSS_PAY

[화면 개요 및 목적]

실시간 결제 트랜잭션 성공 및 실패 로그를 모니터링하여 결제 시스템 장애나 부정 결제를 즉시 감지합니다.

[핵심 기능 로직]

백엔드 시스템 로그 스트리밍 수신.

  • WebSocket / SSE for Real-time Logs
  • Issue Tracking & Status Management