대시보드 스킬은(는) 무엇을 하나요?
단일 화면 관리자/분석 대시보드를 생성합니다.
작업 흐름
- 활성 DESIGN.md 읽기 (위에 주입됨). 색상, 타이포그래피, 간격, 컴포넌트 스타일은 모두 여기서 가져옵니다. 새로운 토큰을 임의로 만들지 마십시오.
- 분류 요청 사항을 바탕으로 대시보드가 모니터링하는 대상(매출, 트래픽, 사용량, 인시던트, 운영 등)을 파악합니다. 구체적이고 그럴듯한 메트릭 이름과 값을 생성하세요. "메트릭 A / 메트릭 B" 같은 자리 표시자는 사용하지 마십시오.
- 레이아웃 필요한 영역을 배치합니다:
- 왼쪽 사이드바 (220–260px): 상단에 브랜드 마크, 아이콘이 있는 6–8개의 네비게이션 링크, 활성 상태는 DS 강조색을 사용합니다.
- 상단 바: 왼쪽에 페이지 제목, 오른쪽에 검색 입력 + 사용자 아바타/상태.
- 메인:
- 행 1: 3–4개의 KPI 카드 (레이블 + 큰 숫자 + 이전 기간 대비 변화량).
- 행 2: 하나의 기본 차트 (전체 폭 또는 2/3) — 실제와 비슷한 숫자로 그린 인라인 SVG 선/막대/영역 차트로 렌더링합니다.
- 행 3: 하나의 보조 차트 또는 테이블 (최근 이벤트, 상위 항목 등).
- 작성 하나의 독립적인 HTML 문서:
<!doctype html>부터</html>까지, CSS는 하나의 인라인<style>블록에 포함.- 전체 레이아웃에는 CSS Grid, 카드 내부에는 Flexbox 사용.
- 의미론적 HTML:
<aside>,<header>,<main>,<section>. - 각 논리적 영역에 주석 모드용
data-od-id="slug"태그를 추가합니다.
- 차트: 인라인 SVG만 사용, JS 라이브러리 없음. 선 차트는 약 10줄의
<polyline>과 미세한 영역 채움으로 구성합니다. 막대 차트는 DS 강조색으로 채워진 N개의<rect>로 구성합니다. 축 레이블은 가볍게(희미한 텍스트, 작은 크기) 표시합니다. - 자체 점검:
- 모든 색상은 DESIGN.md 토큰에서 가져옵니다.
- 강조색은 최대 두 번 사용 (사이드바 활성 상태 + 차트 하이라이트 하나).
- 사이드바와 상단 바는 고정(sticky)되어 있고, 메인은 독립적으로 스크롤됩니다.
- 밀도는 DS 분위기에 맞춥니다 — 여유로운 DS는 더 많은 패딩을, 조밀한 DS(트레이딩, 암호화폐)는 행 간격을 좁힙니다.
출력 규약
<artifact> 태그 안에 출력합니다:
<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>
아티팩트 앞에 한 문장을 쓰고, 그 이후에는 아무것도 쓰지 않습니다.