---
code: "SCH-24"
id: "c-sch-kanban"
tab: "schemas"
kind: "schema"
title: "Kanban · 칸반 보드"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "board"
dataShape: "3-cell diagram with 좌→우 흐름 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["board", "좌→우 흐름", "3cells", "Kanban", "애자일", "WIP", "GTD"]
gallery: "https://graph.heal7.com/#SCH-24"
js: "/sku/SCH-24.js"
---

# [SCH-24] Kanban · 칸반 보드

> AI 붙여넣기 카드. 갤러리 런타임(`main.js`)이 아니라 이 파일을 가져와라.

## 언제 가져가나
좌→우 흐름 + WIP 한도 — 작업 흐름의 가시성과 병목 식별.

**응용** 애자일 sprint 보드, 개인 GTD, 영업 파이프라인 단계별.

## 데이터 모양
- family: `board`
- dataShape: 3-cell diagram with 좌→우 흐름 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: board, 좌→우 흐름, 3cells, Kanban, 애자일, WIP, GTD

- schema.type: `board`
- schema.cells: `3`
- schema.axis: `좌→우 흐름`


## 의존
svg · load `low` · library `SVG`

## 붙여넣는 법
1. 라이브러리 없음. svg viewBox 0 0 400 240
2. 아래 body 를 svg 안에 넣는다
3. 색 변수(`${gold}` 등)는 T 토큰으로 치환한다

```js
const T = {
  "bg": "transparent",
  "fg": "#ece8f5",
  "sub": "#a59bbd",
  "grid": "rgba(255,255,255,.08)",
  "gold": "#e8c069",
  "royal": "#6b8cff",
  "rose": "#e07a9f",
  "teal": "#6dd2c4",
  "plum": "#b487e8"
};
const gold = T.gold, royal = T.royal, rose = T.rose, teal = T.teal, plum = T.plum, fg = T.fg, sub = T.sub;
const stroke = 'rgba(255,255,255,.18)';
const fill1 = 'rgba(232,192,105,.10)';
const fill2 = 'rgba(107,140,255,.10)';
const host = document.querySelector('#chart');
const body = `
    ${[
      ['📋 To Do',     stroke, [['카드 A',royal],['카드 B',plum]]],
      ['⚡ In Progress', gold,  [['카드 C',gold],['카드 D',rose]]],
      ['✅ Done',     teal,   [['카드 E',teal],['카드 F',teal],['카드 G',teal]]]
    ].map(([title,c,cards],i)=>{
      const x = 20 + i*125;
      return `<rect x="${x}" y="20" width="115" height="200" rx="8" fill="rgba(255,255,255,.03)" stroke="${c}" stroke-width="1.5"/>
              <text x="${x+58}" y="40" text-anchor="middle" fill="${fg}" font-size="12" font-weight="700">${title}</text>
              <line x1="${x+10}" y1="48" x2="${x+105}" y2="48" stroke="${c}" stroke-width="1" opacity=".4"/>
              ${cards.map((card,k)=>{
                const cy = 58 + k*42, cardLab=card[0], cc=card[1];
                return `<rect x="${x+10}" y="${cy}" width="95" height="34" rx="4" fill="${fill1}" stroke="${cc}" stroke-width="1"/>
                        <text x="${x+18}" y="${cy+22}" fill="${fg}" font-size="11" font-weight="500">${cardLab}</text>`;
              }).join('')}`;
    }).join('')}
    <text x="200" y="232" text-anchor="middle" fill="${sub}" font-size="10">WIP 한도 + 좌→우 흐름</text>
  `;
host.innerHTML = '<svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="overflow:visible">' + (typeof body === 'string' ? body : '') + '</svg>';
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 3911-4470
- gallery: https://graph.heal7.com/#SCH-24
- raw js: https://graph.heal7.com/sku/SCH-24.js

```js
`
    ${[
      ['📋 To Do',     stroke, [['카드 A',royal],['카드 B',plum]]],
      ['⚡ In Progress', gold,  [['카드 C',gold],['카드 D',rose]]],
      ['✅ Done',     teal,   [['카드 E',teal],['카드 F',teal],['카드 G',teal]]]
    ].map(([title,c,cards],i)=>{
      const x = 20 + i*125;
      return `<rect x="${x}" y="20" width="115" height="200" rx="8" fill="rgba(255,255,255,.03)" stroke="${c}" stroke-width="1.5"/>
              <text x="${x+58}" y="40" text-anchor="middle" fill="${fg}" font-size="12" font-weight="700">${title}</text>
              <line x1="${x+10}" y1="48" x2="${x+105}" y2="48" stroke="${c}" stroke-width="1" opacity=".4"/>
              ${cards.map((card,k)=>{
                const cy = 58 + k*42, cardLab=card[0], cc=card[1];
                return `<rect x="${x+10}" y="${cy}" width="95" height="34" rx="4" fill="${fill1}" stroke="${cc}" stroke-width="1"/>
                        <text x="${x+18}" y="${cy+22}" fill="${fg}" font-size="11" font-weight="500">${cardLab}</text>`;
              }).join('')}`;
    }).join('')}
    <text x="200" y="232" text-anchor="middle" fill="${sub}" font-size="10">WIP 한도 + 좌→우 흐름</text>
  `
```

## 시나리오
- 애자일 sprint 보드
- 개인 GTD — Backlog·Now·Done
- 영업 파이프라인 단계별
- 채용 진행 보드 — 단계별 후보자

## 관련 SKU
`c-sch-roadmap`, `c-sch-3flow`