LEVEL 54 QUEST

관리자 대시보드 UI 설계

SaaS 관리자 대시보드의 레이아웃, KPI 카드, 사이드바 네비게이션, 반응형 CSS, 실시간 데이터 API를 구현합니다.

대시보드 레이아웃 설계 (그리드 시스템)

CSS Grid 기반 대시보드 구조

SaaS 관리자 대시보드는 사이드바와 메인 콘텐츠 영역으로 나뉘며, CSS Grid를 활용하여 유연한 레이아웃을 구성합니다. KPI 카드, 차트, 테이블 등 다양한 위젯을 배치할 수 있는 구조를 만듭니다.

        /* dashboard_layout.css */
.dashboard-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
    background: #0f172a;
}

.sidebar {
    background: #1e293b;
    border-right: 1px solid #334155;
    padding: 20px 0;
}

.main-content {
    padding: 30px;
    overflow-y: auto;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.chart-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
    

KPI 카드 구현

핵심 지표 카드 4종

총 고객수, 월 매출, 활성 Agent 수, API 사용량 등 핵심 KPI를 한눈에 볼 수 있는 카드 컴포넌트를 구현합니다. 각 카드에는 전월 대비 증감율도 표시합니다.

        // kpi_cards.php - KPI 데이터 조회
function getKPIData($pdo) {
    $kpis = [];

    // 총 고객수
    $stmt = $pdo->query("SELECT COUNT(*) as total FROM customers WHERE status='active'");
    $kpis['total_customers'] = $stmt->fetch()['total'];

    // 월 매출
    $stmt = $pdo->query("
        SELECT COALESCE(SUM(amount), 0) as revenue
        FROM payments
        WHERE MONTH(created_at) = MONTH(NOW())
        AND YEAR(created_at) = YEAR(NOW())
        AND status = 'completed'
    ");
    $kpis['monthly_revenue'] = $stmt->fetch()['revenue'];

    // 활성 Agent 수
    $stmt = $pdo->query("
        SELECT COUNT(*) as active
        FROM agents WHERE is_active = 1
        AND last_ping > DATE_SUB(NOW(), INTERVAL 5 MINUTE)
    ");
    $kpis['active_agents'] = $stmt->fetch()['active'];

    // API 사용량 (이번 달)
    $stmt = $pdo->query("
        SELECT COUNT(*) as api_calls
        FROM api_logs
        WHERE MONTH(called_at) = MONTH(NOW())
    ");
    $kpis['api_calls'] = $stmt->fetch()['api_calls'];

    // 전월 대비 증감율 계산
    $stmt = $pdo->query("
        SELECT COALESCE(SUM(amount), 0) as prev_revenue
        FROM payments
        WHERE MONTH(created_at) = MONTH(DATE_SUB(NOW(), INTERVAL 1 MONTH))
        AND status = 'completed'
    ");
    $prev = $stmt->fetch()['prev_revenue'];
    $kpis['revenue_change'] = $prev > 0
        ? round(($kpis['monthly_revenue'] - $prev) / $prev * 100, 1)
        : 0;

    return $kpis;
}
    

🔒

여기까지는 미리보기입니다

관리자 대시보드 UI 설계
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)