---
code: "SCH-09"
id: "c-sch-funnel"
tab: "schemas"
kind: "schema"
title: "5단계 퍼널 · Funnel"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "funnel"
dataShape: "5-cell diagram with 위→아래 협소화 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["funnel", "위→아래 협소화", "5cells", "AARRR", "전환", "채용", "파이프라인"]
gallery: "https://graph.heal7.com/#SCH-09"
js: "/sku/SCH-09.js"
---

# [SCH-09] 5단계 퍼널 · Funnel

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

## 언제 가져가나
위→아래 폭 협소화 — 단계별 전환율과 이탈을 동시에 가시화하는 깔때기.

**응용** AARRR(획득·활성·유지·수익·추천), 채용 단계, 영업 파이프라인.

## 데이터 모양
- family: `funnel`
- dataShape: 5-cell diagram with 위→아래 협소화 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: funnel, 위→아래 협소화, 5cells, AARRR, 전환, 채용, 파이프라인

- schema.type: `funnel`
- schema.cells: `5`
- 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 = `
    ${[
      [40, 30, 320,'인지 (Aware)','100%',gold],
      [70, 70, 260,'관심 (Interest)','62%',royal],
      [100,110,200,'고려 (Consider)','38%',plum],
      [130,150,140,'전환 (Convert)','20%',rose],
      [160,190, 80,'유지 (Retain)','12%',teal]
    ].map(([x,y,w,lab,pct,c])=>`
      <rect x="${x}" y="${y}" width="${w}" height="32" rx="3" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
      <text x="${x+10}" y="${y+22}" fill="${fg}" font-size="12" font-weight="600">${lab}</text>
      <text x="${x+w-10}" y="${y+22}" text-anchor="end" fill="${c}" font-size="13" font-weight="700">${pct}</text>
    `).join('')}
  `;
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-09
- raw js: https://graph.heal7.com/sku/SCH-09.js

```js
`
    ${[
      [40, 30, 320,'인지 (Aware)','100%',gold],
      [70, 70, 260,'관심 (Interest)','62%',royal],
      [100,110,200,'고려 (Consider)','38%',plum],
      [130,150,140,'전환 (Convert)','20%',rose],
      [160,190, 80,'유지 (Retain)','12%',teal]
    ].map(([x,y,w,lab,pct,c])=>`
      <rect x="${x}" y="${y}" width="${w}" height="32" rx="3" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
      <text x="${x+10}" y="${y+22}" fill="${fg}" font-size="12" font-weight="600">${lab}</text>
      <text x="${x+w-10}" y="${y+22}" text-anchor="end" fill="${c}" font-size="13" font-weight="700">${pct}</text>
    `).join('')}
  `
```

## 시나리오
- AARRR — 획득·활성·유지·수익·추천
- 채용 깔때기 — 지원→서류→면접→오퍼→입사
- 영업 파이프라인 — Lead→Opp→Won
- 회원가입 — 방문→가입→첫 구매

## 관련 SKU
`c-sch-3flow`, `c-sch-5flow`, `c-sch-journey`