์ํฐํ๋ผ์ด์ฆ ๋ฆฌํฌํธ ๋น๋. ๋์๋ณด๋ ยท ์ฃผ๊ฐ๋ณด๊ณ ยท ์นด๋๋ด์ค๋ฅผ AI๊ฐ ์์ฑํ๊ณ , 105๊ฐ ๋ธ๋๋ ํ ๋ง๋ก ์ฆ์ ์ ํ. CDN ํ ์ค, ๋น๋ ์คํ ์์.
<script src="https://cdn.jsdelivr.net/npm/@m1kapp/maging@0.1.19/dist/maging-all.js"></script>
<body class="mw-themed">๋ผ์ด๋ธ ๋ฐ๋ชจ ยท ์ปดํฌ๋ํธ ๊ฐค๋ฌ๋ฆฌ ยท npm
| ๋ฌธ์ | ๋์ | ๋ด์ฉ |
|---|---|---|
| AGENT.md | LLM / AI ์์ด์ ํธ | ์์ ฏ API ์ ์ฒด ๋ ํผ๋ฐ์ค. LLM์ด ์ด ํ์ผ๋ง ์ฝ์ผ๋ฉด ๋์๋ณด๋ ์์ฑ ๊ฐ๋ฅ |
| DESIGN.md | ๋์์ด๋ / ๊ธฐ์ฌ์ | ์๊ฐ ํ์ง ๊ธฐ์ค 13์น์ โ Shadow, Color, Typography, Responsive, ์ ๊ทผ์ฑ, ๋คํฌ๋ชจ๋, Anti-AI slop ๋ฑ |
| llms/ | LLM ํ๋กฌํํธ | ๋ชจ๋๋ณ ์์ฑ ์ง์นจ โ dashboard, weekly-report, card-news, landing |
| ์ด README | ๊ฐ๋ฐ์ | ์ค์น, ์์ ฏ ๋ชฉ๋ก, ํ ๋ง, API ๊ฐ์ |
KPI ยท ์ฐจํธ ยท ํ ์ด๋ธ ยท ์บ๋ฆฐ๋ โ 37์ข ์์ ฏ์ผ๋ก ์ด์ ๋์๋ณด๋ ์์ฑ.
A4 ๊ฐ๋ก ์ฌ๋ผ์ด๋ ๋ฑ. ์ปค๋ฒ 5์คํ์ผ + pageHeader + KPI strip + monthlyTable + alertBanner. PPTX/PDF export.
์ธ์คํ๊ทธ๋จ/๋งํฌ๋์ธ ์บ๋ฌ์ . 11์ข ์นด๋(Cover 6์คํ์ผ, Body, Quote, Stat, Comparison, Checklist, Step, Testimonial, CTA). 4:5 ๋น์จ.
Hero ยท Pricing ยท Feature Grid ยท Testimonial ยท FAQ โ SaaS ์ ํ ํ์ด์ง.
KPI/ํ์ผ (7) ยท kpiCard ยท heroTile ยท metricChart ยท metricStack ยท compareCard ยท countdownTile ยท ringProgress
์ฐจํธ (13) ยท lineChart ยท barChart ยท donutChart ยท funnelChart ยท gaugeChart ยท radarChart ยท treemapChart ยท scatterChart ยท sankeyChart ยท heatmapChart ยท waterfallChart ยท mapChart ยท cohortMatrix
๋ฆฌ์คํธ/ํ
์ด๋ธ (5) ยท leaderboard ยท activityTable ยท timeline ยท inboxPreview ยท statusGrid
์บ๋ฆฐ๋ (2) ยท calendarHeatmap ยท eventCalendar
ํ๋ก์ ํธ (1) ยท progressStepper
๊ตฌ์กฐ (5) ยท pageHeader ยท sectionHead ยท alertBanner ยท bulletChart ยท sparklineList
์ฃผ๊ฐ๋ณด๊ณ (4) ยท sectionCover ยท insightCard ยท defCard ยท monthlyTable
์นด๋๋ด์ค (11) ยท coverCard ยท bodyCard ยท dataCard ยท numberedCard ยท quoteCard ยท statCard ยท comparisonCard ยท checklistCard ยท stepCard ยท testimonialCard ยท ctaCard
Maging.setTheme('bloomberg');Light (78) ยท claude ยท linear ยท stripe ยท notion ยท airbnb ยท apple ยท hermes ยท tiffany ยท nike ยท tesla ยท starbucks ยท ...
Dark (27) ยท vercel ยท github ยท bloomberg ยท openai ยท spotify ยท netflix ยท discord ยท ...
6๊ฐ ๋์์ธ ์ฒ ํ ํ๊ทธ: minimal ยท editorial ยท corporate ยท dark ยท bold ยท organic
LLM์ด ์ง์ ๊ณ์ฐํ์ง ์์. sparkline/series ๋ฐ์ดํฐ๋ง ๋ฃ์ผ๋ฉด valueยทdelta๋ฅผ ์์ ฏ์ด ์๋ ๊ณ์ฐ.
Maging.kpiCard('#kpi', {
label: '๋งค์ถ', unit: '์',
sparkline: [72์ต, 78์ต, 81์ต, 128์ต],
// โ value "128.0์ต์", delta "58.0%" ์๋
});Maging.fmt.krw() ๋ฑ HTML์ ๋ฐํํ๋ ํฌ๋งทํฐ๋ฅผ value์ ๋ฃ์ผ๋ฉด ์๋ ์ธ์. valueHTML: true ์๋ ์ธํ
๋ถํ์.
Maging.setTheme('vercel') ํ ์ค๋ก ๋ชจ๋ ์์ ฏ ๋ฆฌํ๋ ์. localStorage ์๋ ์์ํ.
| ๋ฐฉ์ | ์ฝ๋ |
|---|---|
| CDN (๊ถ์ฅ) | <script src="https://cdn.jsdelivr.net/npm/@m1kapp/maging@0.1.19/dist/maging-all.js"></script> |
| npm | npm i @m1kapp/maging |
| ๊ฐ๋ณ ๋ก๋ | maging.css + maging.js + ECharts 5 + Tailwind CDN |
maging-all.js๋ Pretendard + maging.css + Tailwind CDN + ECharts 5 + maging.js๋ฅผ ๋ฒ๋ค. maging:ready ์ด๋ฒคํธ ๋ฐ์.
- ECharts 5+ โ ์ฐจํธ ์์ ฏ ํ์
- Tailwind CSS โ ๋ ์ด์์์ฉ (๊ถ์ฅ, ํ์ ์๋)
๋ชจ๋ ๋ธ๋ผ์ฐ์ (CSS color-mix, :has(), aspect-ratio ์ฌ์ฉ). IE/Opera Mini ๋ฏธ์ง์.
MIT