React 대시보드 템플릿이 필요하다면 KPI Kit의 공개 데모와 소스를 함께 살펴볼 수 있다. React와 TypeScript로 만든 무료 오픈소스 키트로, 매출·고객·운영 템플릿 3종과 38개의 컴포넌트 패턴·예제를 담았다. 이 글에서 실제 공개 화면, 로컬 실행 방법, 필요한 UI를 가져오는 방법과 MIT 라이선스의 이용 범위를 확인할 수 있다.
대시보드에서 숫자 하나를 읽으려면 주변 정보가 필요하다. 어느 기간의 값인지, 무엇과 비교했는지, 비율의 분모는 무엇인지가 함께 보여야 한다. KPI Kit의 공개 화면도 이 연결을 살펴볼 수 있게 구성했다. 상단의 지표에서 기간별 변화, 항목별 분포, 상세 데이터로 이어지는 구조다.
Revenue 화면에서 확인할 수 있는 것
위 화면의 첫 질문은 “어떤 채널이 순매출을 만들고 있는가”다. 순매출, 결제 주문 수, 평균 순주문액, 주문 환불률을 먼저 보여주고, 그 아래에 일별 순매출과 채널별 구성을 배치했다. 기간 선택과 이전 기간 비교를 같은 화면에서 확인할 수 있다.
증감 표기에도 차이가 있다. 순매출의 변화는 %로, 주문 환불률의 변화는 %p에 해당하는 pp로 표시한다. 금액의 상대 변화와 비율 사이의 차이를 같은 숫자 형식으로 뭉개지 않기 위해서다. 차트 아래의 데이터 표와 상세 행은 시각적으로 읽은 결과를 숫자로 다시 확인하는 통로가 된다.
이 화면은 합성 데이터로 만든 예제다. 실제 매출이나 고객 정보를 연결한 서비스 화면이 아니며, 화면에 보이는 금액·주문 수·변화율도 제품의 운영 성과를 뜻하지 않는다.
현재 공개한 범위
템플릿은 Revenue, Customers, Operations 세 가지다. 각각의 화면을 살펴본 뒤 Components 모드에서 작은 패턴 단위로 볼 수 있다. 현재 선택 가능한 38개 패턴·예제의 구성은 다음과 같다.
- KPI 패턴 6개와 차트 표현 9개
- 데이터 테이블 예제 1개
- 탐색·레이아웃 예제 5개
- 입력·피드백 예제 6개
- 데이터 상태 예제 7개와 오류 페이지 예제 4개
여기서 38개는 서로 독립된 컴포넌트 파일의 개수가 아니다. 예를 들어 KPI 카드 하나의 여러 표현 방식이 각각의 패턴으로 포함되어 있다. 재사용할 때는 화면에서 고른 예제가 어떤 컴포넌트와 데이터 구조를 쓰는지 함께 확인하는 편이 좋다. 상세 목록은 컴포넌트 맵에 정리했다.
어떤 작업에 가져다 쓸 수 있나
React로 내부 도구나 관리 화면을 만드는 개발자에게는 UI를 조합하는 출발점으로, 대시보드의 정보 구조를 검토하는 디자이너에게는 지표·차트·표의 관계를 직접 확인하는 참고 화면으로 쓸 수 있다.
먼저 데모에서 목적에 가까운 템플릿을 고른다. 그다음 지표 카드, 비교 차트, 상세 표가 어떤 순서로 연결되는지 확인하고 필요한 부분을 가져오면 된다. 화면의 모양뿐 아니라 지표 이름, 단위, 비교 기간, 데이터가 없을 때의 표현도 자기 업무에 맞춰 바꿔야 한다.
로컬에서 실행하기
Node.js 22.12 이상과 npm이 준비되어 있다면 저장소를 받은 뒤 아래 명령으로 실행할 수 있다. 실행 후 터미널에 표시되는 로컬 주소를 브라우저에서 연다.
git clone https://github.com/chirpyworks/kpi-kit.git
cd kpi-kit
npm ci
npm run dev키트 화면을 바로 열려면 npm run dev:kit을 사용할 수 있다. 예제를 실행하는 데 계정, API 키, 데이터베이스나 유료 서비스는 필요하지 않다.
현재 배포 방식은 소스 복사형이다. 기존 React 프로젝트에 적용할 때는 src/kit/ 전체를 복사하고, 라이선스 고지를 유지한다. 진입 파일과 스타일을 불러온 뒤 kk-root 래퍼를 적용하는 과정은 사용 가이드에 예제 코드와 함께 적어두었다.
실제 데이터에 연결하기 전에
현재 공개 버전은 0.1.0-alpha.5다. UI 소스를 가져오는 것만으로 업무의 계산 기준이나 접근 권한까지 완성되지는 않는다. 실제 데이터의 집계 범위, 비율의 분모, 시간대, 사용자 권한은 통합하는 애플리케이션에서 정의하고 검증해야 한다.
예를 들어 “환불률”이라는 이름이 같아도 주문 건수 기준인지 금액 기준인지에 따라 계산은 달라진다. 예제의 값을 바꾸는 단계에서 그치지 말고, 화면에 적힌 정의와 실제 계산이 일치하는지부터 확인해야 한다.
MIT 라이선스로 공개
KPI Kit은 MIT 라이선스다. 라이선스 조건에 따라 상업적 이용, 수정, 배포가 가능하며, 복제물이나 소프트웨어의 실질적인 부분에는 저작권과 허가 고지를 유지해야 한다. 자세한 조건은 저장소의 LICENSE에서 확인할 수 있다.
처음부터 모든 패턴을 가져올 필요는 없다. 자기 화면에서 답해야 할 질문 하나를 정하고, 그 질문에 필요한 지표와 비교, 상세 표부터 조합해보면 된다. 공개 데모와 소스를 함께 열어두면 화면을 보면서 구조를 따라갈 수 있다.
직접 보기: KPI Kit 데모
소스와 문서: chirpyworks/kpi-kit · 한국어 README
화면을 조합한 뒤 확인할 것: Top 5 차트의 분모와 기타 항목, 팀장과 담당자의 대시보드를 다르게 설계하는 기준을 함께 읽으면 지표와 정보 순서를 점검할 수 있다.