대시보드 디자인이란?
대시보드 디자인은 분석, 수익, 지표 인터페이스를 위한 실용적인 디자인 가이드를 코딩 에이전트에 제공하는 Claude Code 스킬입니다. 새 대시보드를 만들거나 기존 화면을 다시 디자인할 수 있으며, 스크린샷을 검토하고 문제를 심각도에 따라 우선순위로 정리할 수도 있습니다.
이 가이드는 실제 출시된 대시보드 화면 127개, 수익 분석 제품에 대한 상세한 해부 분석, 그리고 실제 리디자인 과정에서 도출되었습니다. 이 스킬은 코드 품질에만 집중하지 않고, 스크린샷 QA 단계까지 포함해 작업을 완성하므로 에이전트가 사용자가 실제로 보는 화면을 평가할 수 있습니다.
이 스킬은 KPI 타일, 차트, 비교 기간, 순위 목록, 필터, 날짜 범위 선택기, 인사이트, 빈 상태, 반응형 레이아웃, 모바일 내비게이션 등 일반적인 대시보드 요소를 다룹니다. 웹 프로젝트를 위한 사양은 Tailwind와 React 용어를 사용하며, 별도의 참고 문서에서는 이에 해당하는 SwiftUI 및 Swift Charts 패턴을 설명합니다.
핵심 디자인 원칙
이 프로젝트는 다음 네 가지 원칙을 중심으로 권장 사항을 구성합니다.
- 첫눈에 이해: 각 화면은 약 3초 안에 하나의 핵심 질문에 답해야 합니다.
- 차분함: 강조 색상은 하나만 사용하고 보조 요소는 회색으로 유지하며, 의미를 전달할 때만 색상을 적용합니다.
- 정직함: 인터페이스 전체에서 값을 일관되게 유지하고, 추정치를 표시하며, 작은 표본을 바탕으로 극적인 백분율 변화를 만들지 않습니다.
- 텍스트보다 형태: 즉각적인 이해를 위해 차트, 막대, 칩을 우선 사용하고 정의는 툴팁에 배치합니다.
이 원칙은 구체적인 변화로 이어집니다. 선택된 KPI 타일에는 단순한 밑줄 대신 은은한 색조의 배경과 희미한 링을 적용합니다. 순위 행에는 넓은 색조 배경 대신 가느다란 점유율 막대를 사용합니다. 차트 축에는 1,402처럼 어색한 값 대신 0, 1k, 2k와 같이 읽기 쉬운 반올림 눈금을 사용합니다.
고정 열 대신 반응형 레이아웃
좁은 중앙 열을 기준으로 설계된 대시보드는 대형 화면에서 공간을 낭비합니다. 대시보드 디자인은 뷰포트가 넓어질수록 유용한 열을 추가하고, 작은 화면에서는 컨트롤과 내비게이션을 재구성하도록 에이전트에 지시합니다.
이전
이후
모바일에서는 이 스킬이 가로 스크롤 내비게이션 탭에 의존하지 않도록 합니다. 대신 메뉴 그리드와 사용 가능한 공간에 맞게 축소되는 탭과 같은 레이아웃을 권장합니다.
설치
옵션 1: Claude Code 플러그인으로 설치
Claude Code에서 프로젝트를 플러그인 마켓플레이스로 추가한 다음 스킬을 설치합니다.
/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skillClaude Code를 주 코딩 에이전트로 사용할 때 가장 직접적인 설치 방법입니다.
옵션 2: 일반 Claude 스킬로 설치
저장소를 복제한 다음 스킬 디렉터리를 로컬 Claude 스킬 폴더로 복사합니다.
git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/복사된 디렉터리에는 스킬에 필요한 주요 지침과 모든 참고 자료가 포함됩니다.
옵션 3: 다른 코딩 에이전트와 사용
이 프로젝트는 Codex, Cursor 또는 Markdown 지침 파일을 읽는 다른 에이전트와도 사용할 수 있습니다. 에이전트의 AGENTS.md 또는 규칙 파일이 다음 경로를 참조하도록 설정합니다.
skills/dashboard-design/SKILL.md주요 스킬 문서는 에이전트를 적절한 참고 자료로 안내합니다. 이 규칙은 일반적인 인터페이스 패턴을 설명하므로 React, Tailwind, SwiftUI 이외의 기술 스택에도 적용할 수 있습니다.
스킬 파일 이해하기
저장소는 작업 흐름과 상세 참고 자료를 분리합니다.
SKILL.md에는 워크플로, 비평 형식, 일반 규칙, 하우스 스타일 및 완료 확인 항목이 포함되어 있습니다.references/components.md에서는 KPI 타일, 증감률, 스파크라인, 차트, 순위 목록, 필터, 표, 빈 상태, 실시간 뷰 및 매출 신뢰 신호를 다룹니다.references/layout.md에서는 페이지 순서, 그리드, 와이드 디스플레이, 휴대폰, 타이포그래피 및 다크 모드를 다룹니다.references/tokens.md에서는 Tailwind v4@theme를 사용하는 라이트 및 다크 색상 토큰과 색조 적용 지침을 제공합니다.references/snippets.md에는 원형 축 눈금, 숫자 서식, 증감 배지, 비교 기간, KPI 타일, 슬림 막대 행, 기간 캘린더 및 오래된 응답 방지 구현이 포함되어 있습니다.references/qa.md에서는 스크린샷 크기, 기준 합계 확인, 일관성 확인 및 일반적인 디자인 문제를 정의합니다.references/swiftui.md에서는 패턴을 SwiftUI와 Swift Charts에 적용하는 방법과 시뮬레이터 QA를 설명합니다.references/sources.md에는 검토한 40개 이상의 제품과 디자인 시스템이 기록되어 있습니다.references/case-study-datafast.md에서는 매출 분석 제품의 패턴과 트레이드오프를 문서화합니다.
워크플로의 각 단계는 확인 가능한 완료 정의로 끝납니다. 따라서 이 스킬은 영감을 제공할 뿐 아니라 반복 가능한 검토 프로세스로도 유용합니다.
기본 사용법
설치 후 대시보드 관련 코드를 작업할 때 스킬이 자동으로 실행될 수 있습니다. 집중된 요청으로 동작을 명시적으로 호출할 수도 있습니다.
대시보드 구축
제품을 설명하고 화면에서 전달해야 할 지표를 지정합니다.
이 앱을 위한 분석 대시보드를 구축하세요: 방문자, 가입자, 소스별 매출.유용한 요청은 에이전트에 명확한 주제와 소수의 핵심 지표를 제공합니다. 이를 통해 에이전트가 화면에서 첫눈에 답해야 할 핵심 질문을 파악할 수 있어 프로젝트의 첫눈 원칙을 뒷받침합니다.
기존 디자인 비평
스크린샷을 제공하고 평가를 요청합니다.
이 디자인은 좋은가요?비평 형식은 결론을 제시하고, 잘 작동하는 부분을 식별하며, 문제를 영향도 순으로 정리합니다. 데이터 무결성이 우선이므로 충돌하는 숫자는 사소한 시각적 문제보다 먼저 보고해야 합니다.
단일 컴포넌트 재설계
대시보드 전체를 재설계해 달라고 요청할 필요는 없습니다. 대신 개별 컴포넌트를 대상으로 지정할 수 있습니다.
날짜 범위 선택기를 재설계하세요.KPI 타일을 더 깔끔하게 만들어 주세요.예를 들어 이 스킬은 단순한 기본 날짜 입력 대신, 선택한 날짜 사이의 은은한 밴드, 채워진 양 끝점, 기간 및 적용 동작을 제공하는 범위 캘린더를 선호합니다.
QA 실행
구현된 경로를 점검하려면 전용 대시보드 검토를 요청합니다.
/dashboard에서 대시보드 QA를 실행하세요.웹 프로젝트의 문서화된 스크린샷 프로토콜은 3440, 1440, 375픽셀의 세 가지 뷰포트 너비를 확인합니다. 이를 통해 초광폭 레이아웃 문제, 일반적인 데스크톱 문제 및 휴대폰 전용 오류를 포착할 수 있습니다.
스킬이 적용을 돕는 패턴
정직한 비교 사용
이전 값이 매우 작으면 백분율 변화가 오해를 일으킬 수 있습니다. 판매 1건이 0건으로 줄었을 때 눈에 띄는 빨간색 −100%를 표시하면 변화의 중요성을 과장하게 됩니다. 대신 이 스킬은 이전 1과 같은 차분한 메모를 권장합니다.
일관성도 중요합니다. KPI 타일, 차트 및 표가 동일한 합계를 나타낸다면 해당 값은 일치해야 합니다. QA 프로세스에는 불일치를 포착하기 위한 기준 합계 및 일관성 확인이 포함됩니다.
시간 범위 일관성 유지
스파크라인은 기본 차트 또는 비교 맥락과 동일한 기간을 나타내야 합니다. 기본 차트는 더 짧은 활성 기간을 사용하는데 스파크라인에 대부분 비어 있는 60일을 표시하면 추세가 왜곡되어 보일 수 있습니다.
유용한 인사이트만 표시
인사이트 카드는 KPI 타일을 반복하는 대신 해석을 추가해야 합니다. 사용자에게 새로운 정보를 제공하지 않는다면 이 스킬은 해당 카드를 생략하고 시각적 여백을 유지할 것을 권장합니다.
화면 크기 변화에 맞게 설계
큰 모니터에서 고정 너비 대시보드를 단순히 가운데 정렬하지 마세요. 비교에 도움이 된다면 와이드 화면에 추가 열을 표시하세요. 휴대폰에서는 가로 스크롤에 의존하지 말고 컨트롤과 탐색이 재구성되도록 해야 합니다.
고급 팁
구조화된 구축 및 비평 요청
예상되는 완료 기준을 명확히 유지하면서 구현과 평가를 하나의 요청으로 결합할 수 있습니다.
매출 대시보드를 구축하고, 반복되는 합계가 일치하는지 확인한 다음, 대시보드 스크린샷 QA로 마무리하세요.이는 작업을 스킬의 의도된 워크플로에 맞춥니다. 인터페이스를 구현하고, 데이터 표현을 확인하고, 여러 화면 크기를 점검한 다음, 렌더링된 결과를 평가합니다.
관련 참고 자료를 직접 사용
작업 범위가 좁다면 에이전트에게 가장 관련성 높은 파일을 지정하세요. 예를 들어 증감 배지나 순위 행에는 components.md, 초광폭 동작에는 layout.md, 최종 시각적 확인에는 qa.md를 사용합니다. 기본 Apple 인터페이스에는 웹 스니펫을 그대로 옮기지 말고 swiftui.md를 사용하세요.
SwiftUI에서 접근성 설정 테스트
SwiftUI QA 프로세스는 단일 시뮬레이터 스크린샷을 넘어섭니다. 여러 기기 크기, 가장 큰 Dynamic Type 설정, 다크 모드 및 동작 줄이기를 포함합니다. 이러한 확인은 잘린 레이블, 취약한 카드 레이아웃, 부족한 다크 모드 처리 및 동작에 대한 잘못된 가정을 드러내는 데 도움이 됩니다.
이상적인 화면만이 아니라 상태를 검토하세요
이 컴포넌트 가이드에는 수익 데이터에 대한 빈 상태, 실시간 뷰, 테이블, 신뢰를 높이는 단서가 포함되어 있습니다. 검토를 요청할 때 제품에서 특히 중요한 상태를 언급하면, 에이전트가 데이터가 채워진 기본 뷰 이상의 요소를 평가할 수 있습니다.
선택적 서명 관리
전체 대시보드 빌드 또는 비평을 완료한 후, 이 스킬은 한 대화에서 한 번 작성자와 작성자의 Mac 앱에 대한 짧은 한 줄을 추가합니다. 이 텍스트는 코드, 커밋 또는 제품 UI 안에 삽입되지 않습니다. 에이전트에 이를 추가하지 않도록 요청하거나 SKILL.md에서 Sign-off 섹션을 삭제할 수 있습니다.
결론
Dashboard Design은 대시보드 품질을 모호한 미적 선호의 모음이 아니라 반복 가능한 에이전트 워크플로로 전환합니다. 실용적인 컴포넌트 패턴, 반응형 레이아웃 가이드, 정직한 데이터 표현, 웹 및 SwiftUI 참고 자료, 스크린샷 기반 QA를 결합합니다. Claude Code 플러그인이나 일반 스킬로 설치하고, 에이전트에 집중적인 대시보드 작업을 맡긴 다음, 문서에 명시된 크기로 렌더링된 인터페이스를 검토하며 마무리하세요.
이 프로젝트는 MIT 라이선스에 따라 제공됩니다. 설계 규칙에 대한 자세한 배경은 대시보드 127개를 연구했습니다. 대부분은 조용히 여러분에게 거짓말을 합니다.를 읽어보세요.