프로젝트 개요
학습자 앱(P1)을 운영하는 관리자 콘솔을 구현합니다. 여러 크리에이터의 보이스카드 사진·영상 콘텐츠 업로드, 구독·결제 현황 분석, 학습자 계정 관리, 해외 결제 호환성 모니터링까지 통합한 운영 대시보드를 stripe 스타일의 사이드바 + KPI + 데이터 테이블 구조로 설계해 MVP 이후의 서비스 확장 방향을 제시합니다.
작업 범위
- 구독 매출 현황: 관리자가 구독 매출 추이와 무료체험 전환 건수, 해외 결제 실패 건수를 하나의 화면에서 확인하는 분석 대시보드입니다
- 보이스카드 콘텐츠 관리: 여러 크리에이터의 인물 사진과 영상을 업로드하고 보이스카드 DB 스키마에 매핑하는 콘텐츠 관리 화면입니다
- 학습자 계정 관리: 학습자 계정의 구독 상태, 결제 이력, 알림 수신 여부를 조회하고 관리하는 화면입니다
- 해외 결제 모니터링: 일본 등 해외 발급 카드의 결제 실패 현황과 대체 결제 수단 적용 여부를 모니터링하는 화면입니다
주요 업무
- 구독 매출 현황 화면: 토스페이먼츠 결제 이벤트를 집계 테이블로 적재하고, 일별 매출·전환 건수·결제 실패 사유를 시계열 차트와 KPI 카드로 시각화합니다
- 보이스카드 콘텐츠 관리 화면: Supabase Storage 버킷에 파일을 업로드하고, 업로드 진행률과 처리 상태(대기/인코딩/검수/게시)를 테이블에서 관리합니다
- 학습자 계정 관리 화면: 탭 기반 필터와 검색으로 계정을 조회하고, 행 클릭 시 상세 패널에서 구독·결제·알림 이력을 함께 확인합니다
- 해외 결제 모니터링 화면: 카드 발급국 코드별 결제 성공·실패 건수를 집계하고, 대체 PG 어댑터 적용 대상 국가를 관리자가 직접 설정할 수 있도록 구현합니다
프로젝트 핵심 과제
여러 크리에이터의 대용량 사진·영상 업로드가 동시에 몰릴 때 스토리지 용량과 처리 큐를 안정적으로 관리하는 구조 설계
국가별 카드 발급 코드(BIN) 판별 정확도를 높여 대체 PG 전환 오탐을 줄이는 로직 설계
결제 웹훅 이벤트 유실 시에도 집계 데이터 정합성을 보장하는 재처리 큐 설계
관리자 등급별 열람 범위를 세분화하면서도 조회 성능을 유지하는 권한 필터링 쿼리 설계
핵심 기능 상세
구독 매출 현황
관리자가 구독 매출 추이와 무료체험 전환 건수, 해외 결제 실패 건수를 하나의 화면에서 확인하는 분석 대시보드입니다.
- PostgreSQL Materialized View로 일별 매출·구독 전환 지표를 사전 집계
- Recharts 기반 시계열 라인 차트와 KPI 카드 컴포넌트 설계
- 토스페이먼츠 웹훅 이벤트를 큐로 수신해 결제 상태 테이블을 갱신하는 파이프라인 구현
결제 웹훅 이벤트를 집계 테이블에 반영하고, Materialized View로 대시보드 조회 부하를 분리하는 구조를 설계합니다.
보이스카드 콘텐츠 관리
여러 크리에이터의 인물 사진과 영상을 업로드하고 보이스카드 DB 스키마에 매핑하는 콘텐츠 관리 화면입니다.
- Multer 기반 청크 업로드와 업로드 진행률 표시 UI 구현
- Supabase Storage 버킷 정책 설계로 크리에이터별 접근 권한 분리
- 업로드된 미디어의 처리 상태 관리를 위한 상태 컬럼 및 필터 테이블 구현
크리에이터별 미디어 업로드부터 게시 상태 관리까지 하나의 테이블 뷰에서 처리하는 콘텐츠 파이프라인을 설계합니다.
학습자 계정 관리
학습자 계정의 구독 상태, 결제 이력, 알림 수신 여부를 조회하고 관리하는 화면입니다. 탭 기반 필터와 검색으로 계정을 조회하고, 행 클릭 시 상세 패널에서 구독·결제·알림 이력을 함께 확인합니다.
- 탭+필터 조합으로 구독 상태(체험/구독중/만료/해지)별 계정 리스트 조회 구현
- 행 클릭 시 인라인 상세 패널에서 결제 이력과 알림 로그를 함께 표시
- 역할 기반 접근 제어로 관리자 등급별 계정 정보 열람 범위 제한
계정 리스트와 상세 정보를 별도 모달 없이 확장형 상세 패널로 통합해 조회 흐름을 단순화합니다.
해외 결제 모니터링
일본 등 해외 발급 카드의 결제 실패 현황과 대체 결제 수단 적용 여부를 모니터링하는 화면입니다.
- 카드 발급국 코드(BIN) 기준 결제 성공·실패 집계 쿼리 설계
- 국가별 대체 PG 어댑터 활성화 여부를 관리자가 토글하는 설정 UI 구현
- 결제 실패 알림을 큐 기반으로 관리자에게 전달하는 알림 파이프라인 구현
국가별 결제 성공·실패 현황을 모니터링하고 특정 국가에서 실패가 누적되면 대체 PG 어댑터를 활성화하는 운영 도구를 설계합니다.
프로젝트 진행 단계
결제 집계 스키마 및 Materialized View 설계 · 2026.09
토스페이먼츠 웹훅 이벤트 테이블, 일별 매출 집계 View 다수 설계 및 인덱싱
콘텐츠 업로드 파이프라인 개발 · 2026.09
Multer 청크 업로드, Supabase Storage 버킷 정책, 처리 상태 관리 API 개발
운영 대시보드 UI 개발 · 2026.09
stripe-multipane 스타일 KPI 카드, 탭드 테이블, 국가별 결제 모니터링 화면 구현
알림 파이프라인 및 통합 테스트 · 2026.09
결제 실패 알림 발송 로직 구현, 전체 관리자 플로우 통합 테스트 진행
개발 결과
기술적 주안점
- 결제 웹훅 이벤트를 집계 테이블에 반영하고, Materialized View로 대시보드 조회 부하를 분리하는 구조를 설계합니다
- 크리에이터별 미디어 업로드부터 게시 상태 관리까지 하나의 테이블 뷰에서 처리하는 콘텐츠 파이프라인을 설계합니다
- 계정 리스트와 상세 정보를 별도 모달 없이 확장형 상세 패널로 통합해 조회 흐름을 단순화합니다
