Dashcipe
레시피 목록으로 돌아가기
이전 대시보드다음 대시보드
SaaS중급런칭 기간 무료즉시 다운로드 가능Starter KitNext.js Source3화면 포함상태 UI 포함Preview SVGsSchemaLicenseDashcipe Quality StandardFigma import kit다크모드 포함

SaaS 구독 관리 대시보드

MRR, churn, trial conversion을 한눈에 보는 구독 서비스 starter kit입니다.

60분Next.js / Tailwind / RechartsSaaS 창업자 / RevOps

Recipe Workspace

미리보고, KPI 이유를 확인하고, 구현 시작점을 복사하세요

대시보드 레이아웃을 먼저 넓게 확인한 뒤, 아래에서 KPI 이유와 코드 샘플, AI IDE 프롬프트를 이어서 확인합니다.

Live Recipe Preview

SaaS 구독 관리 대시보드

MRR, churn, trial conversion을 한눈에 보는 구독 서비스 starter kit입니다.

Starter Kit 즉시 다운로드라이브 전체화면

Live Recipe

SaaS 구독 관리 대시보드

MRR, 해지, Trial 전환을 같은 축에서 봅니다.

MRR · Starter Kit 즉시 다운로드
Finance terminaldensesidebarasset cardsallocation chartcashflow table

MRR

₩12.4M+14.1%

Churn

3.2%-0.6%p

Trial 전환

18.9%+1.7%p

결제 실패

31건-8건

MRR 추세

Visx

Risk Ledger

Chart.js
1

Starter

ARPU ₩14K

420명
2

Pro

성장 +18%

188명
3

Team

업셀 후보

42명

Watch List

해지 위험 고객18명
결제 복구₩740K
Trial 잔여84명

Detail Table

Starter

ARPU ₩14K

420명

상태

Pro

성장 +18%

188명

상태

Team

업셀 후보

42명

상태

상단

상단 KPI 카드 4개

중앙

핵심 추세 차트와 세그먼트

하단

우선순위 테이블과 알림

KPI Ingredients

MRR

MRR는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 KPI: MRR 세그먼트

Churn

Churn는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 KPI: Churn 세그먼트

Trial 전환율

Trial 전환율는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 KPI: Trial 전환율 세그먼트

Expansion MRR

Expansion MRR는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 KPI: Expansion MRR 세그먼트

Code Starter

컴포넌트 코드 복사

const metrics = [
  { label: "MRR", value: "18,420", change: "+8.2%" },
  { label: "Churn", value: "34.8%", change: "+2.1%p" },
  { label: "Trial 전환율", value: "$84.2K", change: "+12.4%" }
];

export function SaasSubscriptionDashboardPreviewCards() {
  return <section className="grid gap-3 md:grid-cols-3">{metrics.map((metric) => <article key={metric.label} className="rounded-xl border border-zinc-200 bg-white p-4"><p className="text-xs font-bold text-zinc-500">{metric.label}</p><strong className="mt-1 block text-2xl font-black">{metric.value}</strong><span className="text-xs font-black text-emerald-600">{metric.change}</span></article>)}</section>;
}

AI IDE Prompt

AI IDE에 바로 붙여넣기

SaaS 구독 관리 대시보드를 만들어줘. 상단에는 MRR, Churn, Trial 전환율, Expansion MRR KPI 카드를 두고, 중단에는 추세/세그먼트 차트, 하단에는 우선순위 테이블과 상태 UI를 배치해줘.

Bundle Preview

3화면 포함 미리보기

overview, detail, settings 화면을 SVG로 먼저 확인하고 ZIP 소스를 바로 받을 수 있습니다.

Decision System

디자인 전에 이 대시보드가 왜 필요한지 설명합니다

AdSense 심사에서 얇은 템플릿 페이지로 보이지 않도록 운영 판단, 데이터 정의, 실패 패턴, 대체 레이아웃을 문서화합니다.

이 대시보드가 해결하는 운영 판단

SaaS 구독 관리 대시보드는 성장이 신규 매출 때문인지, 해지 감소 때문인지, 가격 개선 때문인지 알 수 있는가?라는 질문에 답하기 위한 운영 화면입니다. 상단 KPI는 단순 현황 보고가 아니라 이번 주에 담당자가 취할 액션을 정하기 위해 배치합니다.

이 레시피는 SaaS 창업자 / RevOps, 초기 제품 개발자가 데이터 정의, 차트 우선순위, 하단 액션 테이블을 빠르게 정하도록 설계되었습니다.

데이터 소스와 이벤트 정의

  • Stripe events, subscription table, CRM lifecycle status

데이터 소스는 실제 연결 전에도 이벤트명, 소유자, 업데이트 주기, 결측 처리 기준을 먼저 정해야 합니다.

필수 KPI와 제거 기준

MRR

MRR는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 지표 또는 제거 신호: MRR 세그먼트

Churn

Churn는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 지표 또는 제거 신호: Churn 세그먼트

Trial 전환율

Trial 전환율는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 지표 또는 제거 신호: Trial 전환율 세그먼트

Expansion MRR

Expansion MRR는 담당자가 이번 주 우선순위를 정할 수 있을 때 상단 KPI로 둡니다.

대체 지표 또는 제거 신호: Expansion MRR 세그먼트

흔한 실패 패턴

MRR만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.

Churn만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.

Trial 전환율만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.

Expansion MRR만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.

대체 레이아웃

초기 MVP에서는 상단 KPI 카드 4개 구성을 유지하고, 데이터가 쌓이면 핵심 추세 차트와 세그먼트 영역을 세그먼트 비교 또는 코호트 분석으로 확장하세요.

Implementation Blueprint

구현 전에 합의할 KPI 감사 프로토콜

아래 표는 화면을 만들기 전에 합의해야 하는 KPI 계산식, 리뷰 주기, 액션 트리거입니다. 이 기준이 없으면 차트는 예뻐도 실제 운영 회의에서 결정을 만들지 못합니다.

MRR

MRR = 기준 이벤트 집계값 / 비교 기준. 세그먼트는 MRR 세그먼트 단위로 먼저 나눕니다.

매일 오전

MRR가 전주 대비 10% 이상 흔들리면 원인 세그먼트와 하단 액션 테이블을 함께 확인합니다.

Churn

Churn = 기준 이벤트 집계값 / 비교 기준. 세그먼트는 Churn 세그먼트 단위로 먼저 나눕니다.

주간 리뷰

Churn가 전주 대비 10% 이상 흔들리면 원인 세그먼트와 하단 액션 테이블을 함께 확인합니다.

Trial 전환율

Trial 전환율 = 기준 이벤트 집계값 / 비교 기준. 세그먼트는 Trial 전환율 세그먼트 단위로 먼저 나눕니다.

캠페인 종료 후

Trial 전환율가 전주 대비 10% 이상 흔들리면 원인 세그먼트와 하단 액션 테이블을 함께 확인합니다.

Expansion MRR

Expansion MRR = 기준 이벤트 집계값 / 비교 기준. 세그먼트는 Expansion MRR 세그먼트 단위로 먼저 나눕니다.

월간 리포트

Expansion MRR가 전주 대비 10% 이상 흔들리면 원인 세그먼트와 하단 액션 테이블을 함께 확인합니다.

이벤트와 테이블 정의 시작점

AI IDE로 구현을 시작할 때는 아래처럼 이벤트/테이블 이름을 먼저 고정하면 프롬프트 품질이 올라갑니다.

saas_subscription.viewed

MRR 판단에 필요한 원천 이벤트입니다. owner, occurred_at, segment_key, value, source_system 필드를 기본으로 둡니다.

saas_subscription.converted

Churn 판단에 필요한 원천 이벤트입니다. owner, occurred_at, segment_key, value, source_system 필드를 기본으로 둡니다.

saas_subscription.risk_flagged

Trial 전환율 판단에 필요한 원천 이벤트입니다. owner, occurred_at, segment_key, value, source_system 필드를 기본으로 둡니다.

saas_subscription.resolved

Expansion MRR 판단에 필요한 원천 이벤트입니다. owner, occurred_at, segment_key, value, source_system 필드를 기본으로 둡니다.

주간 운영 리뷰 순서

  1. 1MRR 변화가 실제 운영 문제인지, 일시적 노이즈인지 먼저 분리합니다.
  2. 2Churn와 함께 보면 원인이 유입, 전환, 품질, 처리량 중 어디에 있는지 좁힐 수 있습니다.
  3. 3하단 테이블에서 담당자와 세그먼트를 고르고 이번 주 안에 실행할 액션을 하나만 정합니다.
  4. 4다음 리뷰에서는 같은 차트가 아니라 액션 이후의 회복 여부를 기준으로 레이아웃을 조정합니다.

자주 묻는 질문

SaaS 구독 관리 대시보드에서 가장 먼저 봐야 할 KPI는 무엇인가요?

SaaS 구독 관리 대시보드에서는 MRR, Churn, Trial 전환율, Expansion MRR를 우선 확인합니다. 특히 MRR는 담당자가 이번 주 액션을 정할 수 있을 때 상단에 둡니다.

이 레시피는 어떤 데이터 소스가 필요한가요?

Stripe events, subscription table, CRM lifecycle status가 기본 데이터 소스입니다. 구현 전에는 이벤트명, 집계 주기, 소유자, 결측 처리 기준을 먼저 정해야 합니다.

초기 MVP에서도 이 레이아웃을 그대로 써도 되나요?

초기에는 상단 KPI 카드 4개와 핵심 추세 차트와 세그먼트만 먼저 구현해도 됩니다. 하단 테이블과 알림은 운영 액션이 명확해질 때 확장하세요.

어떤 지표를 제거해야 하나요?

담당자가 주간 리뷰 안에 액션을 취할 수 없는 지표, 데이터 정의가 불안정한 지표, 인접 지표와 함께 해석되지 않는 vanity metric은 상단 KPI에서 제거합니다.

AI IDE 프롬프트는 어떻게 활용하나요?

프롬프트를 그대로 복사하기보다 실제 데이터 필드명, 테이블명, 상태 UI 요구사항, 접근성 요구사항을 추가해 프로젝트에 맞게 조정하는 것이 좋습니다.

Market Pattern

마켓에서 검증된 대시보드 패턴을 Dashcipe식으로 재해석합니다

공개 미리보기에서 관찰 가능한 일반 패턴만 참고하고, Dashcipe의 KPI 판단과 운영 레시피 구조로 다시 작성합니다.

finance-terminal-plus / dark
asset cardsallocation chartcashflow tablerisk feed

마켓 템플릿에서 검증된 화면 패턴

금융형 템플릿은 어두운 터미널, 자산 카드, allocation 차트, 거래/현금흐름 테이블로 신뢰감을 만듭니다.

이 레시피에 맞게 바꾼 이유

Dashcipe는 이를 MRR, 포트폴리오, 인보이스, 후원 운영의 리스크/비중 판단 구조로 바꿉니다.

복사하면 안 되는 요소와 재해석 기준

금융 화면의 일반적인 정보 구조만 참고하고 특정 템플릿의 색상 체계나 컴포넌트 디자인은 재사용하지 않습니다.

무료 리소스

무료로 받을 수 있는 것

KPI 판단, 레이아웃, 코드, 프롬프트, Figma SVG, schema, tokens를 바로 확인하고 활용할 수 있습니다.

downloadZIPdesignFigma SVGdataSchemadesignTokensDashcipe Quality StandardResponsive QASchemaFigma SVGLicenseChangelog

Starter Kit Files

이 번들에 포함된 것

  • overview.html
  • detail.html
  • settings.html
  • src/page.tsx
  • src/components
  • src/data/sample-data.ts
  • data/schema.json
  • tokens.json

Compatibility

빠른 적용을 위한 구성

  • Next.js App Router
  • Tailwind CSS
  • Static HTML preview
  • Figma SVG import

예상 적용 시간: 35 min

Quality Checklist

마켓 승인 신호

  • 3 production-style screens
  • Reusable TSX components
  • Empty/loading/error states
  • Light/dark tokens
  • Schema-backed sample data

이 레시피가 맞는 경우

  • 업종별 핵심 KPI가 이미 어느 정도 정해진 경우
  • 차트와 테이블의 우선순위를 빠르게 잡아야 하는 경우

이 레시피를 피해야 하는 경우

  • 아직 이벤트나 데이터 정의가 전혀 없는 경우
  • 단순 마케팅 랜딩 페이지만 필요한 경우

Expert Notes

실제 운영자가 KPI를 읽는 방식

각 지표를 운영 판단, 실패 신호, 데이터 출처, 제거 기준까지 연결합니다.

SaaS 창업자 / RevOps

왜 중요한가
MRR는 단순 현황 숫자가 아니라 다음 운영 액션을 고르는 판단 기준입니다.
실패 신호
MRR만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.
데이터 출처
Stripe events, subscription table, CRM lifecycle status
제거 기준
담당자가 주간 리뷰 안에 액션을 취할 수 없다면 상단 KPI에서 제거합니다.

SaaS 창업자 / RevOps

왜 중요한가
Churn는 단순 현황 숫자가 아니라 다음 운영 액션을 고르는 판단 기준입니다.
실패 신호
Churn만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.
데이터 출처
Stripe events, subscription table, CRM lifecycle status
제거 기준
담당자가 주간 리뷰 안에 액션을 취할 수 없다면 상단 KPI에서 제거합니다.

SaaS 창업자 / RevOps

왜 중요한가
Trial 전환율는 단순 현황 숫자가 아니라 다음 운영 액션을 고르는 판단 기준입니다.
실패 신호
Trial 전환율만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.
데이터 출처
Stripe events, subscription table, CRM lifecycle status
제거 기준
담당자가 주간 리뷰 안에 액션을 취할 수 없다면 상단 KPI에서 제거합니다.

SaaS 창업자 / RevOps

왜 중요한가
Expansion MRR는 단순 현황 숫자가 아니라 다음 운영 액션을 고르는 판단 기준입니다.
실패 신호
Expansion MRR만 움직이고 인접 지표가 움직이지 않으면 데이터 정의 또는 운영 병목을 의심합니다.
데이터 출처
Stripe events, subscription table, CRM lifecycle status
제거 기준
담당자가 주간 리뷰 안에 액션을 취할 수 없다면 상단 KPI에서 제거합니다.

Recipe Flow

목록으로 돌아가지 않고 다음 레시피 보기

전체 레시피
이전 레시피Play Console 운영 대시보드설치, 삭제, 평점, 리뷰를 앱 상태 점검용으로 묶은 운영 대시보드입니다.다음 레시피예약 관리 대시보드예약, 취소, 노쇼, 상담 상태를 운영 우선순위로 정리합니다.

Related Recipes

함께 보면 좋은 레시피

같은 분야나 기술 스택에 맞는 대시보드 레시피입니다.

bootstrap-analytics
무료 리소스초급

AdMob 수익 대시보드

수익 하락이 트래픽 문제인지, 단가 문제인지, 배치 문제인지 분리할 수 있는가?

무료 다운로드품질 기준 통과Starter KitNext.js3화면SchemaFigma SVGNext.jsTailwindChart.js
마켓 패턴bootstrap-analytics
레이아웃: topbar표면: lightstat cardsbar chart
4 KPI상세 보기
enterprise-suite
무료 리소스중급

GA4 앱 분석 대시보드

유저가 어디서 들어와 어떤 이벤트에서 전환 또는 이탈하는가?

무료 다운로드품질 기준 통과Starter KitNext.js3화면SchemaFigma SVGNext.jsTailwindRecharts
마켓 패턴enterprise-suite
레이아웃: split표면: hybridKPI rowtrend chart
4 KPI상세 보기
ops-workbench
무료 리소스초급

Play Console 운영 대시보드

스토어 품질 변화가 설치, 삭제, 평점 중 어디서 먼저 나타나는가?

요청 가능HTMLTailwindChart.js
마켓 패턴ops-workbench
레이아웃: sidebar표면: darkstatus wallmap/list panel
4 KPI상세 보기