maging — AI 답변을, 쓸 수 있는 결과물로.

THE PROBLEM

AI는 잘 설명하지만,
결과물은 만들어주지 않습니다.

ChatGPT에 물어보면
분석도 해주고, 인사이트도 줍니다.

하지만 그걸
대시보드나 피치덱 형태로 정리하는 건 여전히 수작업입니다.

THE SOLUTION

maging은 그 "마지막 단계"를
자동화합니다.

데이터나 요청을 입력하면
AI가 만든 내용을
바로 사용할 수 있는 형태로 변환합니다.

📊 대시보드

📑 피치덱

📄 리포트

모두 HTML 한 파일로 생성됩니다.

HOW IT WORKS

어떻게 동작하나요

프롬프트 복사 → LLM에 붙여넣기 → HTML 결과 → 공유.

프롬프트 복사

아래 프롬프트가 LLM에게 "maging 라이브러리를 써서 HTML을 만들어라"를 가르칩니다.

maging-prompt.txt

⬆︎ 복사 후 LLM에 붙여넣고 엔터

LLM이 이렇게 답하면 준비 완료 :

▸ 안녕하세요! 결과물 서포터 매징(maging)입니다 ✦
데이터 파일을 첨부하거나, 만들고 싶은 대시보드를 자유롭게 설명해주세요.
어떤 걸 만들어 드릴까요? 🎨

이후 원하는 걸 자연어로 요청하면 HTML이 돌아옵니다.

원하는 LLM에 붙여넣기

어느 모델이든 상관없습니다. 단일 HTML 출력만 되면 됩니다.

ChatGPT

Claude

Gemini

Grok

Perplexity

Copilot

데이터나 원하는 것을 설명

CSV 붙여넣기, 스크린샷 첨부, 자연어로 요청 — 뭐든 됩니다.

나 "여기 우리 3월 매출 CSV야. 경영진 월간 리뷰용 대시보드 만들어줘. Stripe 스타일로."

나 "SaaS 리텐션 + 신규 가입 트래킹 위젯 조합해줘. Linear 느낌."

나 "DevOps 오퍼레이션 모니터 — 게이지, 상태 그리드, 타임라인. Bloomberg 톤으로."

HTML 파일이 나옵니다

브라우저에서 바로 열리고, 파일 하나만 공유하면 어디서든 돌아갑니다.

✓ 단일 HTML 파일

✓ 빌드 없음

✓ 35개 테마 중 선택

✓ Claude Artifact/Gemini Canvas 호환

✓ 모바일 반응형

✓ 테마만 바꾸면 룩 완전 변경

📄 전체 레퍼런스 (llms.txt) →

WHAT YOU GET

결과를 "형태"로 만듭니다

⚙️

코딩 없이

복잡한 설정 없이 바로 생성합니다.

🎨

디자인 없이

35개 브랜드 테마가 자동 적용됩니다.

📎

한 파일로

HTML 하나로 공유 가능합니다.

⚡

즉시 사용

열면 바로 보고 가능한 결과물입니다.

POSITIONING

기존 도구와의 차이

Polished Output

Raw Output

Manual

AI Generated

★ maging

Canva

Figma

Keynote

Excel

CSV

ChatGPT (raw)

Claude (text)

대부분의 도구는 "만들거나" 또는 "생성만" 합니다.
maging은 생성된 내용을 결과물로 완성합니다.

EXAMPLES

이렇게 나옵니다

DASHBOARD

ACME KOREA 대시보드

31개 위젯·7개 섹션이 동작하는 실사용 예시. 테마 실시간 변경.

Coming soon

REPORT

Monthly Sales Report

CSV → 경영진 월간 리뷰용 한 페이지 리포트.

Coming soon

DECK

Pitch Deck

슬라이드 레이아웃 + 키보드 네비 + 풀스크린.

WHO IT'S FOR

이런 분들에게 맞습니다

📊

보고서·PPT 만드는 게 귀찮은 기획자

📈

CSV 데이터를 빠르게 시각화하고 싶은 사람

🤖

AI로 결과물을 만들어보고 싶은 사람

🚀

데모를 빠르게 만들어야 하는 개발자

PHILOSOPHY

AI는 이미 충분히 똑똑합니다.

부족한 건 "표현 방식"입니다.
maging은 AI의 결과를
사람이 바로 사용할 수 있게 만듭니다.

LIVE PREVIEW · 상단 테마 토글로 바꿔보세요

INSTALL

한 줄이면 끝.

Pretendard · maging.css · Tailwind · ECharts · maging.js 전부 자동 로드.

html

<script src="https://cdn.jsdelivr.net/npm/@m1kapp/maging@0.1.14/dist/maging-all.js"></script>
<body class="mw-themed">

✨ maging-all.js = Pretendard + maging CSS + Tailwind Play + ECharts + maging JS · 로드 순서 보장 · window.addEventListener('maging:ready', …) 이벤트 발화

🛠 개발자용: 수동 설치 (세세한 제어 원할 때)

html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@m1kapp/maging@0.1.14/dist/maging.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@m1kapp/maging@0.1.14/dist/maging.js"></script>

개별 로드. 의존성 버전 고정·Tailwind 제외·자체 Pretendard 등 커스터마이즈 가능.

one-liner에서 특정 의존성만 끄고 싶으면:
<script src=".../maging-all.js" data-no-tailwind data-no-echarts></script>

THEME SYSTEM

같은 데이터. 25가지 인격.

상단의 테마 토글을 눌러보세요. 아래 차트들은 CSS 변수만 바뀌고, 데이터와 레이아웃은 그대로입니다.

Light 12 · Dark 13 — 각 테마는 dist/themes/<name>.css로 분리 사용 가능.

WIDGET GALLERY

31종 위젯.

아래는 대표 7종의 라이브 예제입니다. 나머지 18종 (Heatmap · Gauge · Radar · Treemap · Scatter · Sankey · StatCard · HeroTile · RingProgress · Compare · MetricStack · Countdown · StatusGrid · Timeline · InboxPreview · CalendarHeatmap · EventCalendar · ProgressStepper)은 전체 데모에서 실전 사용 예시를 볼 수 있습니다.

1. KPI 카드 kpiCard

숫자 · 이전 대비 증감 · 스파크라인

Maging.kpiCard('#el', {
  label: '이번 달 매출',
  value: '₩128억',
  delta: 8.3,
  sparkline: [420,445,430,468,475,490,510,530,548,562,580]
});

2. 라인 차트 lineChart

다중 시리즈 · 누적(stack) · 영역 채우기 옵션

Maging.lineChart('#el', {
  title: '주간 매출', subtitle: '최근 12주',
  categories: ['W01','W02','W03','W04','W05','W06',
               'W07','W08','W09','W10','W11','W12'],
  series: [
    { name: 'Enterprise', data: [420,445,430,468,475,
      490,510,505,530,548,562,580] },
    { name: 'SMB', data: [160,170,165,175,180,188,
      195,200,210,220,228,240] }
  ],
  stack: true,
  yFormatter: v => v + 'M',
  height: 260
});

3. 바 차트 barChart

가로/세로 · 라벨 · 포매터

Maging.barChart('#el', {
  title: '지역별 매출',
  items: [
    { label: '서울', value: 1250 },
    { label: '경기', value: 980 },
    { label: '부산', value: 720 },
    { label: '인천', value: 540 },
    { label: '대구', value: 410 }
  ],
  horizontal: true,
  yFormatter: v => v + 'M',
  height: 260
});

4. 퍼널 차트 funnelChart

단계별 전환 시각화 (영업 파이프라인 등)

Maging.funnelChart('#el', {
  title: '영업 파이프라인',
  stages: [
    { label: '리드',   value: 2400 },
    { label: '검증',   value: 1380 },
    { label: '데모',   value: 820 },
    { label: '제안',   value: 410 },
    { label: '성약',   value: 127 }
  ],
  height: 260
});

5. 도넛 차트 donutChart

중앙 라벨 · 자동 합계

Maging.donutChart('#el', {
  title: '제품 카테고리',
  slices: [
    { label: 'Enterprise',   value: 548 },
    { label: 'Professional', value: 312 },
    { label: 'Team',         value: 178 },
    { label: 'Starter',      value: 84 }
  ],
  centerLabel: '전체 판매',
  centerValue: '1,122건',
  height: 260
});

6. 리더보드 leaderboard

아바타 · 이름 · 진행률 바 (ECharts 사용 안 함)

Maging.leaderboard('#el', {
  title: '영업 TOP 5',
  subtitle: '분기 목표 달성률',
  items: [
    { name: '김지훈', initial: '김', percent: 98, meta: '98% · ₩245M' },
    { name: '이수민', initial: '이', percent: 94, meta: '94% · ₩220M' },
    { name: '정하늘', initial: '정', percent: 87, meta: '87% · ₩198M' },
    { name: '박민재', initial: '박', percent: 82, meta: '82% · ₩175M' },
    { name: '최유리', initial: '최', percent: 76, meta: '76% · ₩148M' }
  ]
});

7. 활동 테이블 activityTable

커스텀 렌더러 · LIVE 뱃지 · 상태 뱃지

Maging.activityTable('#el', {
  title: '최근 거래', live: true,
  columns: [
    { key: 'time',    label: '시간' },
    { key: 'company', label: '고객사' },
    { key: 'amount',  label: '금액',  align: 'right',
      render: v => Maging.fmt.krw(v) },
    { key: 'status',  label: '상태', align: 'right',
      render: (_, r) => `<span class="mw-badge mw-badge--${r.statusCls}">${r.statusLabel}</span>` }
  ],
  rows: [
    { time: '3분 전', company: '한빛테크', amount: 45200000,
      statusCls: 'success', statusLabel: '완료' },
    { time: '8분 전', company: '블루스퀘어', amount: 18500000,
      statusCls: 'success', statusLabel: '완료' },
    { time: '14분 전', company: '유니온시스템', amount: 62000000,
      statusCls: 'warning', statusLabel: '진행중' }
  ]
});

USAGE

두 가지 사용 방식.

어느 쪽이든 편한 걸 쓰세요. 결과는 같습니다.

① Declarative HTML 속성 자동 마운트

페이지 로드 시 [data-mw-widget]을 자동으로 스캔합니다. 간단한 위젯에 가장 빠른 방법.

html

<!-- 간단한 값은 data 속성으로 -->
<div data-mw-widget="kpi-card"
     data-mw-label="매출"
     data-mw-value="₩128억"
     data-mw-delta="8.3"
     data-mw-sparkline="420,445,430,468,475,490"></div>

<!-- 복잡한 config는 JSON script 참조 -->
<div data-mw-widget="line-chart" data-mw-config="rev-cfg"></div>
<script type="application/json" id="rev-cfg">
{ "title": "매출", "categories": ["W1","W2"],
  "series": [{ "name": "A", "data": [10, 20] }] }
</script>

② Imperative JS API

동적 데이터, 업데이트, 외부 API 연동 등 모든 케이스. 핸들을 받아 .update(data) 가능.

// 마운트
const kpi = Maging.kpiCard('#el', {
  label: '매출', value: '₩128억', delta: 8.3,
  sparkline: [420, 445, 430, 468, 475]
});

// 나중에 데이터만 업데이트
kpi.update({ value: '₩142억', delta: 10.9 });

// 테마 변경 — 모든 위젯 자동 재렌더
Maging.setTheme('bloomberg');

// 리사이즈는 자동 처리됨

말하면,
결과물로 나옵니다.

한 줄짜리 부트스트랩 + 자연어 요청 → 완성된 HTML.

Try maging → View demo

AI 답변을, 쓸 수 있는 결과물 대시보드 피치덱 리포트 결과물 로.

AI는 잘 설명하지만, 결과물은 만들어주지 않습니다.

maging은 그 "마지막 단계"를 자동화합니다.

어떻게 동작하나요

결과를 "형태"로 만듭니다

기존 도구와의 차이

이렇게 나옵니다

이런 분들에게 맞습니다

한 줄이면 끝.

같은 데이터. 25가지 인격.

31종 위젯.

1. KPI 카드 kpiCard

2. 라인 차트 lineChart

3. 바 차트 barChart

4. 퍼널 차트 funnelChart

5. 도넛 차트 donutChart

6. 리더보드 leaderboard

7. 활동 테이블 activityTable

두 가지 사용 방식.

① Declarative HTML 속성 자동 마운트

② Imperative JS API

말하면, 결과물로 나옵니다.

AI 답변을,
쓸 수 있는 결과물 대시보드 피치덱 리포트 결과물 로.

AI는 잘 설명하지만,
결과물은 만들어주지 않습니다.

maging은 그 "마지막 단계"를
자동화합니다.

말하면,
결과물로 나옵니다.