LEVEL 55 QUEST
대시보드 UI 구축 - 데이터 시각화
대시보드 UI 구축 - 데이터 시각화 — DevFoil 바이브코딩 Stage 12, Lv.55
SaaS 대시보드 설계 원칙
한눈에 핵심 지표를 파악하는 UI
좋은 대시보드는 사용자가 5초 안에 핵심 상황을 파악할 수 있어야 합니다.
모든 정보를 한 화면에 담으려 하지 말고, 가장 중요한 KPI부터 보여주세요.
[대시보드 레이아웃 구조]
┌────────┬─────────────────────────────┐
│ │ KPI 카드 4개 (가로 정렬) │
│ 사이드 │ [매출] [사용자] [전환율] [이탈률] │
│ 바 ├─────────────────────────────┤
│ │ 차트 영역 (2열) │
│ - 대시보드│ [매출 추이 그래프] [사용자 증가]│
│ - 분석 ├─────────────────────────────┤
│ - 설정 │ 테이블 (최근 활동/주문) │
│ │ [검색] [필터] [정렬] │
└────────┴─────────────────────────────┘
KPI 카드 컴포넌트
핵심 지표를 한눈에 보여주는 카드
// src/components/dashboard/KPICard.tsx
interface KPICardProps {
title: string;
value: string;
change: number; // 전월 대비 변화율
icon: React.ReactNode;
}
export function KPICard({ title, value, change, icon }: KPICardProps) {
const isPositive = change >= 0;
return (
<div className="bg-white/5 border border-white/10 rounded-xl p-6">
<div className="flex items-center justify-between mb-4">
<span className="text-gray-400 text-sm">{title}</span>
<span className="text-gray-500">{icon}</span>
</div>
<div className="text-3xl font-bold mb-2">{value}</div>
<div className={`text-sm ${isPositive ? 'text-green-400' : 'text-red-400'}`}>
{isPositive ? '+' : ''}{change}% 전월 대비
</div>
</div>
);
}
// 사용 예시
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<KPICard title="월 매출" value="₩2,340만" change={12.5} icon={...} />
<KPICard title="활성 사용자" value="1,234명" change={8.2} icon={...} />
<KPICard title="전환율" value="4.3%" change={-2.1} icon={...} />
<KPICard title="이탈률" value="3.1%" change={-0.5} icon={...} />
</div>
🔒
여기까지는 미리보기입니다
대시보드 UI 구축 - 데이터 시각화
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.
Google로 3초 만에 시작 →🧵 Threads로 시작무료 공개 강의 둘러보기 (Lv.1~3)무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.