---
code: "SCH-28"
id: "c-sch-swimlane"
tab: "schemas"
kind: "schema"
title: "Swimlane · 역할별 트랙"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "lane"
dataShape: "3-cell diagram with 역할 레인×단계 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["lane", "역할 레인×단계", "3cells", "Swimlane", "BPMN", "RACI", "블루프린트"]
gallery: "https://graph.heal7.com/#SCH-28"
js: "/sku/SCH-28.js"
---

# [SCH-28] Swimlane · 역할별 트랙

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

## 언제 가져가나
역할 레인 × 단계 — 누가 어떤 단계에서 무엇을 하는지 가로 흐름으로.

**응용** 서비스 블루프린트, BPMN 프로세스, RACI 시각화.

## 데이터 모양
- family: `lane`
- dataShape: 3-cell diagram with 역할 레인×단계 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: lane, 역할 레인×단계, 3cells, Swimlane, BPMN, RACI, 블루프린트

- schema.type: `lane`
- 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 = `
    ${['고객','시스템','백엔드'].map((role,i)=>{
      const y = 20 + i*60;
      const c = [royal, gold, plum][i];
      return `<rect x="20" y="${y}" width="60" height="55" rx="4" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
              <text x="50" y="${y+30}" text-anchor="middle" fill="${c}" font-size="11" font-weight="700">${role}</text>
              <line x1="80" y1="${y+27.5}" x2="380" y2="${y+27.5}" stroke="${stroke}" stroke-width="1" opacity=".25" stroke-dasharray="3 4"/>`;
    }).join('')}
    ${[
      [90, 30,'주문 요청', royal],
      [180,90,'주문 검증', gold],
      [180,150,'재고 차감', plum],
      [280,30,'결제 확인',  royal],
      [280,90,'영수증 발급', gold],
      [370,150,'완료',       plum]
    ].map(([x,y,lab,c])=>`
      <rect x="${x-30}" y="${y-12}" width="80" height="24" rx="4" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
      <text x="${x+10}" y="${y+4}" text-anchor="middle" fill="${fg}" font-size="10" font-weight="600">${lab}</text>
    `).join('')}
    ${[[120,30,150,90],[210,90,210,138],[210,90,250,30],[310,30,340,90],[310,90,360,150]].map(([x1,y1,x2,y2])=>`<path d="M ${x1} ${y1} L ${x2} ${y2}" fill="none" stroke="${gold}" stroke-width="1.2" opacity=".5" marker-end="url(#sch-arr)"/>`).join('')}
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="11">3 레인 × 단계별 책임 흐름</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-28
- raw js: https://graph.heal7.com/sku/SCH-28.js

```js
`
    ${['고객','시스템','백엔드'].map((role,i)=>{
      const y = 20 + i*60;
      const c = [royal, gold, plum][i];
      return `<rect x="20" y="${y}" width="60" height="55" rx="4" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
              <text x="50" y="${y+30}" text-anchor="middle" fill="${c}" font-size="11" font-weight="700">${role}</text>
              <line x1="80" y1="${y+27.5}" x2="380" y2="${y+27.5}" stroke="${stroke}" stroke-width="1" opacity=".25" stroke-dasharray="3 4"/>`;
    }).join('')}
    ${[
      [90, 30,'주문 요청', royal],
      [180,90,'주문 검증', gold],
      [180,150,'재고 차감', plum],
      [280,30,'결제 확인',  royal],
      [280,90,'영수증 발급', gold],
      [370,150,'완료',       plum]
    ].map(([x,y,lab,c])=>`
      <rect x="${x-30}" y="${y-12}" width="80" height="24" rx="4" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
      <text x="${x+10}" y="${y+4}" text-anchor="middle" fill="${fg}" font-size="10" font-weight="600">${lab}</text>
    `).join('')}
    ${[[120,30,150,90],[210,90,210,138],[210,90,250,30],[310,30,340,90],[310,90,360,150]].map(([x1,y1,x2,y2])=>`<path d="M ${x1} ${y1} L ${x2} ${y2}" fill="none" stroke="${gold}" stroke-width="1.2" opacity=".5" marker-end="url(#sch-arr)"/>`).join('')}
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="11">3 레인 × 단계별 책임 흐름</text>
  `
```

## 시나리오
- 서비스 블루프린트
- BPMN 프로세스
- RACI 시각화
- 크로스팀 협업 흐름

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