---
code: "SCH-26"
id: "c-sch-userflow"
tab: "schemas"
kind: "schema"
title: "User Flow · 분기 사용자 흐름"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "flow"
dataShape: "5-cell diagram with 좌→우+분기 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["flow", "좌→우+분기", "5cells", "UserFlow", "BPMN", "UX", "분기"]
gallery: "https://graph.heal7.com/#SCH-26"
js: "/sku/SCH-26.js"
---

# [SCH-26] User Flow · 분기 사용자 흐름

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

## 언제 가져가나
분기를 포함한 사용자 시나리오 — 시작에서 종료까지 결정 분기와 함께.

**응용** UX 시나리오, 결제 플로우, 온보딩 분기, BPMN 간소화.

## 데이터 모양
- family: `flow`
- dataShape: 5-cell diagram with 좌→우+분기 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: flow, 좌→우+분기, 5cells, UserFlow, BPMN, UX, 분기

- schema.type: `flow`
- 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 = `
    <ellipse cx="40" cy="120" rx="28" ry="20" fill="${fill1}" stroke="${teal}" stroke-width="1.5"/>
    <text x="40" y="124" text-anchor="middle" fill="${teal}" font-size="11" font-weight="700">시작</text>
    <rect x="92" y="100" width="80" height="40" rx="6" fill="${fill1}" stroke="${royal}" stroke-width="1.5"/>
    <text x="132" y="124" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">로그인</text>
    <polygon points="220,120 250,90 280,120 250,150" fill="rgba(232,192,105,.20)" stroke="${gold}" stroke-width="1.5"/>
    <text x="250" y="124" text-anchor="middle" fill="${gold}" font-size="10" font-weight="700">계정?</text>
    <rect x="305" y="60"  width="80" height="34" rx="6" fill="${fill1}" stroke="${plum}" stroke-width="1.5"/>
    <text x="345" y="80" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">회원가입</text>
    <rect x="305" y="146" width="80" height="34" rx="6" fill="${fill1}" stroke="${rose}" stroke-width="1.5"/>
    <text x="345" y="166" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">대시보드</text>
    ${[[68,120,92,120],[172,120,220,120],[280,108,305,77],[280,140,305,165]].map(([x1,y1,x2,y2])=>`<path d="M ${x1} ${y1} L ${x2} ${y2}" fill="none" stroke="${gold}" stroke-width="1.5" marker-end="url(#sch-arr)"/>`).join('')}
    <text x="280" y="86" fill="${sub}" font-size="9.5">N</text>
    <text x="280" y="156" fill="${sub}" font-size="9.5">Y</text>
    <text x="200" y="222" text-anchor="middle" fill="${sub}" font-size="11">시작 → 액션 → 분기(◇) → 종료</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-26
- raw js: https://graph.heal7.com/sku/SCH-26.js

```js
`
    <ellipse cx="40" cy="120" rx="28" ry="20" fill="${fill1}" stroke="${teal}" stroke-width="1.5"/>
    <text x="40" y="124" text-anchor="middle" fill="${teal}" font-size="11" font-weight="700">시작</text>
    <rect x="92" y="100" width="80" height="40" rx="6" fill="${fill1}" stroke="${royal}" stroke-width="1.5"/>
    <text x="132" y="124" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">로그인</text>
    <polygon points="220,120 250,90 280,120 250,150" fill="rgba(232,192,105,.20)" stroke="${gold}" stroke-width="1.5"/>
    <text x="250" y="124" text-anchor="middle" fill="${gold}" font-size="10" font-weight="700">계정?</text>
    <rect x="305" y="60"  width="80" height="34" rx="6" fill="${fill1}" stroke="${plum}" stroke-width="1.5"/>
    <text x="345" y="80" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">회원가입</text>
    <rect x="305" y="146" width="80" height="34" rx="6" fill="${fill1}" stroke="${rose}" stroke-width="1.5"/>
    <text x="345" y="166" text-anchor="middle" fill="${fg}" font-size="11" font-weight="600">대시보드</text>
    ${[[68,120,92,120],[172,120,220,120],[280,108,305,77],[280,140,305,165]].map(([x1,y1,x2,y2])=>`<path d="M ${x1} ${y1} L ${x2} ${y2}" fill="none" stroke="${gold}" stroke-width="1.5" marker-end="url(#sch-arr)"/>`).join('')}
    <text x="280" y="86" fill="${sub}" font-size="9.5">N</text>
    <text x="280" y="156" fill="${sub}" font-size="9.5">Y</text>
    <text x="200" y="222" text-anchor="middle" fill="${sub}" font-size="11">시작 → 액션 → 분기(◇) → 종료</text>
  `
```

## 시나리오
- UX 시나리오 — 결제 플로우
- 온보딩 분기 — 신규/기존 사용자
- BPMN 간소형
- 챗봇 대화 플로우

## 관련 SKU
`c-sch-swimlane`, `c-sch-dtree`