HTML/CSS만으로 종속성 없이 5페이지짜리 SaaS 관리자 대시보드 완성

발행: (2026년 6월 11일 PM 07:51 GMT+9)
3 분 소요
원문: Dev.to

Source: Dev.to

모든 SaaS 제품에는 대시보드가 필요합니다. 하지만 대부분의 대시보드 템플릿은 시작하기 위해 React, UI 라이브러리, 그리고 20개의 npm 패키지를 요구합니다.
그래서 저는 순수 HTML/CSS로 하나를 만들었습니다.

5개의 완전한 인터랙티브 페이지

  • Dashboard

    • 추세 표시기가 포함된 4개의 메트릭 카드
    • 매출 바 차트
    • 트래픽 소스 도넛 차트
    • 최신 거래 테이블
    • 실시간 활동 피드
  • Analytics

    • 전환 퍼널 시각화
    • 방문수 기준 상위 페이지
    • 주간 활성 사용자 차트
  • Users

    • 전체 사용자 관리 테이블
    • 아바타 이니셜, 플랜 배지, 상태 표시기
    • 정렬 및 검색 가능
  • Billing

    • 3단계 요금제 선택기
    • 결제 수단 관리
    • 청구서 내역
  • Settings

    • 프로필 정보 폼
    • 알림 토글(인터랙티브)
    • 위험 구역

주요 특징

  • 대부분의 대시보드 템플릿은 특정 프레임워크에 종속됩니다. 이 템플릿은 어떤 환경에서도 작동합니다 — 파일을 열고 바로 편집하면 됩니다.
  • 빌드 단계 없음. npm 설치 필요 없음. React도 필요 없습니다.
  • Pure HTML + CSS
  • 사이드바 네비게이션을 위한 최소한의 바닐라 JS
  • Google Fonts의 Inter 폰트 사용
  • 외부 의존성 제로

구매 및 미리보기

  • 구매: buildnova.gumroad.com
  • 라이브 프리뷰: buildnova-hq.github.io/ui-kit

이 대시보드를 더 유용하게 만들려면 어떤 기능을 추가하고 싶으신가요?

0 조회
Back to Blog

관련 글

더 보기 »