사용 가이드로 건너뛰기
kpi-dashboard-design작성자 Seth Hobson

KPI Dashboard Design 스킬.

다이어그램 및 차트를 위한 Claude Code 및 Codex skill: KPI 대시보드: 지표 선택, 차트 선택, 레이아웃 및 실시간 패턴.

  • Diagrams & Data Visualization
  • Dashboard
wshobson/agents · plugins/business-analytics/skills/kpi-dashboard-design/SKILL.mdSKILL.md
--- name: kpi-dashboard-design description: Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict … --- ## When to Use This Skill ## Core Concepts ## Detailed worked examples and patterns ## Best Practices ## Related Skills
업스트림 파일에서 읽은 전문 및 섹션 제목 2026-09-14 · 전체 5,423자

01 기능

Claude Code와 Codex에서 kpi-dashboard-design 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 비즈니스 의사 결정을 이끄는 핵심성과지표(KPI) 대시보드를 설계하기 위한 포괄적인 패턴을 제공합니다. 경영진을 위한 월간/분기별 업데이트의 전략적 수준, 관리자를 위한 주간/월간 업데이트의 전술적 수준, 팀을 위한 실시간/일일 업데이트의 운영 수준이라는 세 가지 대시보드 수준을 다룹니다.

이 스킬은 전체 생명주기를 다룹니다: SMART 프레임워크를 활용해 의미 있는 KPI를 선정하고, 적절한 시각화 방식을 선택하고, 경영진 요약부터 부서별 뷰, 세부 드릴다운까지 대시보드 계층을 구축하며, 부서 간 지표 불일치, 알림 피로, 실시간 쿼리로 인한 데이터베이스 성능 문제 같은 일반적인 문제를 해결합니다. 코호트 분석, MRR 정규화, 사전 집계 지표, 동적 알림 임계값을 위한 구체적인 SQL 및 Python 패턴이 포함되어 있습니다.

산출물

  • 툴팁이나 데이터 딕셔너리에 명시적인 정규화 수식이 문서화된 SQL 쿼리
  • OLAP과 OLTP 워크로드를 분리하는 사전 집계 지표 스냅샷을 위한 Python 코드
  • 이동 평균과 표준편차를 사용한 동적 경고 임계값 로직
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    KPI 수준과 대상 정의

    대시보드 범위를 세 가지 수준 중 하나에 맞춥니다: 임원을 위한 월간/분기별 업데이트가 있는 전략적 수준, 관리자를 위한 주간/월간 업데이트가 있는 전술적 수준, 팀을 위한 실시간/일별 업데이트가 있는 운영적 수준입니다.

  2. 02
    각 지표에 SMART 기준 적용

    모든 KPI가 명확한 정의를 갖춘 구체적(Specific)이고, 측정 가능하고 정량화 가능한(Measurable), 현실적인 목표를 가진 달성 가능한(Achievable), 목표에 부합하는 관련성 있는(Relevant), 명확한 기간이 정해진 시간 제한적(Time-bound)인지 확인합니다.

  3. 03
    3단계 계층 구조 구축

    경영진용 요약 페이지에는 추세 지표와 주요 경고가 포함된 4-6개의 헤드라인 KPI를 표시하고, 영업/마케팅/운영/재무 부서별 화면과 근본 원인 분석을 위한 상세 드릴다운을 구성합니다.

  4. 04
    범위를 제한하고 맥락 표시

    뷰당 최대 5-7개의 KPI에 집중하고, 사용자가 숫자를 의미 있게 해석할 수 있도록 항상 비교, 추세, 목표를 포함합니다.

  5. 05
    요약에서 상세로 드릴다운 활성화

    사용자가 상위 수준의 경영진 지표에서 각 숫자 뒤에 있는 상세 데이터와 근본 원인 분석까지 클릭해서 내려갈 수 있도록 탐색 경로를 설계합니다.

02 적합성 확인

kpi-dashboard-design 스킬을 사용해야 하는 경우

이러한 종류의 다이어그램 및 차트 작업에는 Claude Code 또는 Codex에서 kpi-dashboard-design skill을 사용하십시오. 적합성과 제한 사항은 skill 자체 파일에서 가져온 것입니다.

적합한 경우

  • MRR, 이탈률, LTV/CAC 비율을 추적하는 경영진용 SaaS 지표 대시보드 구축
  • 실시간 서비스 상태 및 요청 처리량 모니터링이 포함된 운영 센터 설계
  • 제품 팀을 위한 코호트 잔존율 분석 뷰 생성
  • 계산 방식 불일치로 지표가 서로 상충하는 대시보드 디버깅
  • 조직 전반에서 일관된 정의를 보장하기 위한 지표 거버넌스 수립

    제공할 사항

    • 기존 지표 정의불일치를 진단하거나 수식을 정렬하기 위해 지표가 현재 어떻게 계산되는지(예: 연간 요금제에 대한 MRR 처리 방식이나 코호트 그룹화 로직) 공유합니다.

    03 스킬 내부

    kpi-dashboard-design Skill이 Claude Code와 Codex에 부여하는 규칙

    SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

    1. 일관된 색상 의미 체계 사용

      모든 대시보드 뷰에서 일관되게 부정적인 성과나 문제를 나타낼 때는 빨간색을, 긍정적인 성과나 건강한 상태를 나타낼 때는 초록색을 적용합니다.

    2. 허영 지표를 절대 표시하지 않음

      인상적으로 보이지만 실행 가능한 결정을 이끌지 못하는 지표는 제외합니다. 팀이 결과를 개선하기 위해 조치를 취할 수 있는 데이터에만 집중합니다.

    3. 3D 차트를 절대 사용하지 않음

      3차원 시각화는 인식을 왜곡하고 사용자가 값을 정확하게 비교하기 어렵게 만들기 때문에 피합니다.

    4. 계산 방법론을 문서화하십시오

      지표가 어떻게 계산되는지 숨기지 마십시오. 상충되는 해석을 방지하기 위해 공식과 로직을 항상 문서화하며, 가능하면 대시보드 카드나 툴팁에 직접 표시하십시오.

    5. 업데이트 빈도를 지표 유형에 맞추십시오

      각 KPI에 적합한 대시보드 갱신 주기를 설정하십시오. 운영 지표는 실시간 또는 일일, 전술 지표는 주간 또는 월간, 전략 지표는 월간 또는 분기별로 설정합니다.

    6. 모바일에서도 반응형으로 작동하도록 설계하십시오

      대시보드가 데스크톱 화면뿐만 아니라 모바일 기기에서도 효과적으로 작동하도록 설계하여 경영진과 팀원이 어디서든 핵심 지표에 접근할 수 있도록 하십시오.

    7. 이해도를 위해 여백을 확보하십시오

      너무 많은 요소로 대시보드 레이아웃을 과밀하게 만들지 마십시오. 여백은 이해를 돕고 사용자가 가장 중요한 지표에 집중할 수 있게 합니다.

    04 활용하기

    Claude Code 또는 Codex에 kpi-dashboard-design 설치

    npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

    Claude Code, Codex 또는 사용 중인 에이전트에 kpi-dashboard-design 추가

    프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

    Terminal
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소마다 자체 경로를 문서화할 수 있습니다.

    Skill에 첫 다이어그램 및 차트 작업 부여

    스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

    Starter prompt
    Design an executive SaaS metrics dashboard for [our company] that tracks monthly recurring revenue, customer churn rate, and LTV/CAC ratio. The dashboard needs to update weekly and show trends over the past 12 months with comparisons to our target goals. We've been getting conflicting MRR numbers between this dashboard and finance reports because annual subscriptions are normalized differently. Include the calculation methodology directly on each metric card and ensure the design works on mobile devices for our remote executive team.

    출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

    첫 번째 결과 확인

    SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

    • 코호트 쿼리가 날짜를 일 단위로 절삭하지 않고 DATE_TRUNC('month', created_at)를 사용하는지 확인하십시오. 일 단위 절삭은 코호트를 너무 작게 만들어 트렌드를 보여주지 못합니다
    • 인프라 가동 시간 지표와 함께 P95 페이지 로드 시간, 작업 완료율 같은 사용자 인지 품질 지표가 포함되어 있는지 확인하십시오
    • 실시간 대시보드가 운영 데이터베이스에 복잡한 쿼리를 실행하는 대신 사전 집계된 요약 테이블을 읽는지 테스트하십시오
    • 알림 임계값이 알림 피로를 유발하는 고정 값이 아니라 이동 평균을 기반으로 동적으로 설정되어 있는지 검증하십시오

    OpenDesign에서는 SKILL.md 링크를 통해 kpi-dashboard-design을 가져오십시오: Plugins → Add → Skill → Import from link, 이후 상단 바에서 선택하십시오.

    05 오픈 소스, 추적 가능

    출처, 라이선스 및 검증

    이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

    Repository
    github.com/wshobson/agents Branch main
    스킬 파일
    plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md 검증 시점에 기록된 콘텐츠 체크섬; 커밋 4236bb9
    License
    MIT LICENSE에서.
    리포지토리 스타
    39,635 wshobson/agents 저장소 전체에 대한 GitHub 스냅샷(2026-09-14 촬영), 이 카탈로그에 18개의 스킬 포함. kpi-dashboard-design의 평가나 사용 횟수가 아닙니다.
    OpenDesign에서 검증됨
    2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

    SKILL.md 내부

    1. 이 스킬을 사용해야 하는 경우여섯 가지 시나리오를 나열합니다: 경영진 대시보드, KPI 선택, 실시간 모니터링, 부서별 뷰, 레이아웃 개선, 지표 거버넌스
    2. 핵심 개념세 단계로 구성된 KPI 프레임워크, SMART KPI 기준, 3단계 대시보드 계층 구조를 정의합니다
    3. 상세 예제 및 패턴부서별 일반 KPI와 더 깊은 패턴을 위해 references/details.md를 참조합니다
    4. 모범 사례다섯 가지 권장 사항(KPI 수 제한, 맥락 표시, 일관된 색상, 드릴다운, 적절한 업데이트)과 다섯 가지 비권장 사항(허영 지표, 과밀, 3D 차트, 숨겨진 방법론, 모바일 무시)
    5. 문제 해결다섯 가지 문제를 해결합니다: MRR/재무 불일치, 인프라는 정상인데 사용자 불만, 정체된 코호트, 데이터베이스 과부하, 알림 피로
    6. 관련 스킬대시보드에서 발견한 내용을 경영진 내러티브로 전환하기 위한 data-storytelling 스킬로 연결됩니다
    스킬 자체 설명
    "지표 선택, 시각화 모범 사례 및 실시간 모니터링 패턴을 적용한 효과적인 KPI 대시보드 디자인. MRR, 이탈률 및 LTV/CAC 비율을 추적하는 임원용 SaaS 지표 대시보드를 구축하거나, 실시간 서비스 상태 및 요청 처리량을 표시하는 운영 센터를 디자인하거나, 제품 팀을 위한 코호트 유지율 분석 뷰를 만들거나, 일관되지 않은 계산 방법론으로 인해 지표가 서로 모순되는 대시보드를 디버깅할 때 이 skill을 사용하십시오."

    SKILL.md의 front-matter 설명입니다. 전체 파일은 약 5,423자입니다. GitHub에서 전체 파일 읽기.

    06 설치하기 전에

    kpi-dashboard-design 스킬에 대한 질문

    이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

    대시보드는 지표가 양호하다고 보여주는데 사용자들이 불만을 제기한다면 어떻게 해야 합니까?

    대시보드가 API 가동 시간 같은 인프라 지표는 추적하지만 사용자 인지 품질은 추적하지 않는 것으로 보입니다. 인프라 가동 시간 및 오류율과 함께 P95 페이지 로드 시간, 작업 완료율, 지원 티켓 건수 같은 고객 인지 지표를 추가하십시오. 시스템 상태가 항상 사용자 경험을 반영하지는 않습니다.

    KPI Dashboard Design

    실제 다이어그램 및 차트 작업에서 kpi-dashboard-design을 실행합니다.

    OpenDesign을 다운로드하고 SKILL.md 링크에서 kpi-dashboard-design을 가져온 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

    터미널
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    OpenDesign 데스크톱

    하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

    완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

    • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
    • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
    • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
    무료 다운로드

    macOS, Windows 지원