얻을 수 있는 것

  • 7일, 30일, 90일 보기가 있는 완전한 KPI 대시보드 HTML 파일 하나
  • CSV나 JSON 내보내기를 대시보드 데이터로 바꾸는 스크립트
  • recharts 기반 React 블록과, 차트의 ECharts 버전
  • 변화율 칩, 이전 기간 선, 세부 표, 목표 막대
  • 선택: 실행 전에 견적을 보여 주는 PopNow 보고서 헤더 이미지

이럴 때 좋아요

  • 제품, 상점, 고객지원, 성장 KPI
  • 주간·월간 KPI 보고서 페이지
  • 내부 도구의 개요 화면

이럴 때는 맞지 않아요

  • 화면이 많은 전체 관리자 앱
  • 실시간 스트리밍 데이터
  • 한 차트에서 여러 계열을 비교하기

사용 방법

Claude·ChatGPT에서

PopNow 스킬 사용: “KPI 대시보드 템플릿”(kpi-dashboard-template). 할 일: exports/orders.csv로 KPI 대시보드를 만들어 주세요. 주문 수, 매출, 방문자, 첫 답변 시간을 채널별로 나눠 주세요.

코딩 에이전트에서

/popnow-kpi-dashboard-template exports/orders.csv로 KPI 대시보드를 만들어 주세요. 주문 수, 매출, 방문자, 첫 답변 시간을 채널별로 나눠 주세요.

이어서 해 보기

월 매출 목표 150,000을 추가하고, 기본은 최근 7일로 해 주세요.

Next.js 관리자 앱에 쓸 React 버전을 주세요.

미리 준비할 것

  • CSV 또는 JSON 내보내기, 또는 그것을 만드는 명령
  • 지표 네 개와 값이 낮을수록 좋은 지표가 무엇인지
  • 선택: 목표치와 지표를 나눌 열

비슷한 스킬

전체 보기 →

자주 묻는 질문

숫자는 어디서 오나요?

내 내보내기 파일에서 옵니다. 내장 스크립트는 CSV나 JSON을 읽습니다. 일별 합계든 원시 이벤트든 상관없이, 지표마다 하루에 한 행을 만들고 선택 사항인 세부 내역을 더해 페이지에 넣습니다.

변화율은 어떻게 계산하나요?

최근 7일, 30일, 90일을 그 직전의 같은 일수와 비교합니다. 합계는 합계끼리, 시간과 비율은 평균끼리 비교하고, 활성 사용자 같은 수준 값은 가장 최근 값을 비교합니다. 낮을수록 좋은 지표는 하락을 좋은 것으로 표시합니다.

차트 라이브러리가 필요한가요?

HTML 버전은 아무것도 필요 없고 오프라인에서 작동합니다. React 버전은 recharts를 쓰며, 이미 ECharts를 쓰는 프로젝트를 위해 차트의 ECharts 버전도 들어 있습니다.

PopNow가 차트를 그릴 수 있나요?

아니요, 그러면 안 됩니다. 이미지 모델은 숫자를 틀릴 수 있습니다. PopNow는 선택 사항인 글자 없는 헤더나 공유 카드 배경에만 쓰이며, 실제 수치는 HTML로 그 위에 놓입니다.