실시간 KPI 대시보드 셸 만들기

입문~12 분0/4 단계

훌륭한 데이터 대시보드는 모두 같은 뼈대에서 시작합니다. 중요한 숫자를 한눈에 보여주는 깔끔한 KPI 카드 그리드죠. 이번 레슨에서는 API가 실시간 지표를 밀어 넣을 수 있는 바로 그 셸을 만들어 봅니다.

각각 지표 라벨, 큼직한 값, 추세 표시가 들어간 반응형 카드 그리드를 배치하고, 마치 실시간 데이터 소스가 몇 초마다 새 숫자를 보내오는 것처럼 스타일링합니다.

애널리스트처럼 생각하세요. 목표는 즉각적인 가독성입니다. 의사결정자가 2초 만에 비즈니스 상태를 파악할 수 있어야 합니다. 그것을 가능하게 하는 틀을 만들어 봅시다.

안내

사용자가 API 기반 대시보드임을 알 수 있도록 "실시간 지표"라는 h1이 담긴 헤더를 추가하세요.

힌트: `<header>` 안에 `<h1 class="text-3xl font-bold">실시간 지표</h1>`를 사용하세요.

어디에 작성하나요?

11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.

grid 클래스를 사용해 KPI 카드를 담을 반응형 그리드 컨테이너를 만드세요.

"총 매출" 카드를 포함해, 스타일이 적용된 박스 형태의 KPI 카드를 추가하세요.

bg-gray-800 클래스를 사용해 각 카드에 카드다운 배경을 입히세요.

html

13 줄