SaaS 대시보드 템플릿.
SaaS 분석 대시보드의 완성된 웹 앱 UI입니다. Tallywise라는 구독 매출 분석 도구를 예시로 한 화면 8개로, MRR 개요와 고객 목록부터 매출 보고서, 청구서, 코호트별 유지율, 팀 설정, 첫 실행 온보딩까지 담았습니다. 숫자는 모든 화면에서 맞아떨어지고, 모든 화면이 평범한 HTML과 Tailwind라서 Codex나 Claude Code가 복제해 여러분의 앱으로 바꿀 수 있습니다.
2026년 11월 7일 업데이트
웹사이트 · 8 페이지 · 무료 오픈 소스
01개요 
02고객 
03고객 상세 
04매출 
05청구서 
06코호트 
07설정 
08온보딩
복제하기
npx degit ummydev/ui-templates/webapps/saas-dashboard my-app
저장소의 나머지 부분 없이 이 템플릿만 새 폴더에 복사합니다.
내 것으로 만들기
codexdesign.io의 SaaS 대시보드 템플릿입니다. 이름을 [내 제품]으로 바꾸고, 예시 데이터를 [내 기능]으로 바꾸되, 모든 화면이 DESIGN.md의 디자인 시스템을 따르도록 해 주세요.
새 폴더에서 이 내용을 Codex나 Claude Code에 붙여 넣으세요.
- 사용 기술
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
템플릿에 담긴 내용
| 화면 | 담긴 내용 |
|---|---|
| 개요 | MRR, ARR, 고객 수, 이탈률과 전월 대비, 이번 달 MRR 변동, 요금제별 MRR, 최근 이벤트 |
| 고객 | 검색, 요금제와 상태 필터, 정렬, 회사·요금제·MRR 표 |
| 고객 상세 | 회사 정보, 구독, MRR 이력, 누적 매출, 메모와 활동 |
| 매출 | 12개월간의 신규·확장·축소·이탈 MRR, CSV 내보내기 |
| 청구서 | 상태별(미결제, 연체, 초안, 결제 완료) 청구서와 청구서 한 장의 미리보기 |
| 코호트 | 가입 월별 유지율 표와 가중 평균, 그 해석 |
| 설정 | 팀원과 역할, 초대, 가려진 API 키, 권한 표 |
| 온보딩 | 새 계정의 빈 상태와 Stripe 연결, 기록 가져오기, 팀 초대 단계 |
예시 데이터는 가상 회사의 10월 데이터입니다. MRR 62,500달러, ARR 750,000달러, 고객 712곳, 이탈률 3.9%입니다. 네 요금제를 합치면 정확히 이 숫자가 되고, 이번 달 변동도 맞아떨어집니다(59,840 + 4,210 + 1,890 − 420 − 3,020 = 62,500). 매출 보고서의 12개월은 개요와 같은 MRR로 끝납니다. 고객 이름은 가상입니다.
각 화면은 HTML 파일 하나로, 1440×900 기준으로 디자인했고 너비 390픽셀 휴대폰에서도 쓸 수 있습니다. 휴대폰에서는 사이드바가 메뉴로 접히고 표는 가로로 스크롤됩니다. 스타일은 Tailwind CSS v4와 공용 tokens.css입니다. 숫자는 IBM Plex Mono 고정폭 숫자, 차트는 SVG이며, 표의 행은 키보드로 선택할 수 있고 아이콘은 Lucide입니다. 어떤 파일이든 브라우저에서 열기만 하면 되고, 설치나 빌드는 필요 없습니다.
Codex나 Claude Code와 함께 쓰기
ui-templates 저장소에서 이 템플릿만 복사하세요.
npx degit ummydev/ui-templates/webapps/saas-dashboard my-dashboard
그런 다음 에이전트에게 여러분의 앱으로 바꿔 달라고 요청하세요.
이 폴더는 SaaS 대시보드 UI 템플릿입니다. [내 제품]으로 바꿔 주세요. 대상은 [누구를 위한 제품인지]입니다. DESIGN.md와 tokens.css는 디자인 시스템으로 그대로 두고, 지표, 요금제, 고객, 차트를 [내 데이터]로 바꾸되 합계가 모든 화면에서 일치하도록 해 주세요. 그런 다음 [Next.js / React / 내 기술 스택]으로 구현하고 [내 데이터 소스]에 연결해 주세요.
디자인 시스템이 DESIGN.md에 적혀 있으므로, 에이전트가 나중에 추가하는 화면(알림, 세그먼트, 예측 등)도 기존 화면 8개와 어울립니다.
Ledger 디자인 시스템 기반
이 템플릿은 데이터가 많은 도구를 위한 고밀도 다크 디자인 시스템 Ledger를 사용합니다. IBM Plex Sans와 숫자용 IBM Plex Mono, 6px 모서리, 그리고 현재 상태와 핵심 수치에만 쓰는 터미널풍 앰버 강조색 하나가 특징입니다. 페이지에서 실시간 미리보기, 전체 DESIGN.md, shadcn 테마를 볼 수 있습니다.
자주 묻는 질문
이 SaaS 대시보드 템플릿은 무료인가요?
네. MIT 라이선스의 오픈 소스이며, 개인 프로젝트와 상업 프로젝트 모두에 쓸 수 있습니다.
Next.js, React, shadcn/ui에서도 쓸 수 있나요?
네. 화면이 Tailwind 클래스를 쓴 평범한 HTML이라서, 에이전트가 어떤 프레임워크의 컴포넌트로든 옮길 수 있습니다. Ledger 페이지에는 같은 색상의 shadcn 테마도 있습니다. tokens.css와 DESIGN.md는 그대로 두라고 요청하면 옮긴 뒤에도 디자인이 유지됩니다.
라이트 테마가 있나요?
있습니다. 기본은 다크 테마이며, 어떤 화면이든 <html> 태그에서 class="dark"를 지우면 Ledger의 라이트 테마로 바뀝니다.