---
code: "SCH-23"
id: "c-sch-roadmap"
tab: "schemas"
kind: "schema"
title: "Roadmap · 분기별 타임라인"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "timeline"
dataShape: "4-cell diagram with 시간축+트랙 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["timeline", "시간축+트랙", "4cells", "Roadmap", "분기", "마일스톤", "OKR"]
gallery: "https://graph.heal7.com/#SCH-23"
js: "/sku/SCH-23.js"
---

# [SCH-23] Roadmap · 분기별 타임라인

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

## 언제 가져가나
시간축 × 다중 트랙 — 일정과 의존성을 동시에 가시화하는 PR/계획 표준.

**응용** 제품 로드맵 PR, OKR 분기 계획, 프로젝트 마일스톤 보고.

## 데이터 모양
- family: `timeline`
- dataShape: 4-cell diagram with 시간축+트랙 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: timeline, 시간축+트랙, 4cells, Roadmap, 분기, 마일스톤, OKR

- schema.type: `timeline`
- schema.cells: `4`
- 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 = `
    ${['Q1','Q2','Q3','Q4'].map((q,i)=>{
      const x = 60 + i*82;
      return `<line x1="${x}" y1="30" x2="${x}" y2="200" stroke="${stroke}" stroke-width="1" stroke-dasharray="3 4"/>
              <text x="${x}" y="22" text-anchor="middle" fill="${gold}" font-size="11" font-weight="700">${q}</text>`;
    }).join('')}
    ${[
      [0, 50,2.4,'기획·리서치',royal],
      [1.5,80,1.8,'MVP 개발',gold],
      [2.8,110,1.0,'베타',plum],
      [3.2,140,0.8,'정식 출시',rose],
      [0.8,170,3.0,'마케팅 캠페인',teal]
    ].map(([qStart,y,qSpan,lab,c])=>{
      const x = 60 + qStart*82, w = qSpan*82;
      return `<rect x="${x}" y="${y-9}" width="${w}" height="18" rx="4" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
              <text x="${x+8}" y="${y+5}" fill="${fg}" font-size="10" font-weight="600">${lab}</text>`;
    }).join('')}
    <text x="20" y="55" fill="${sub}" font-size="9">트랙 1</text>
    <text x="20" y="115" fill="${sub}" font-size="9">트랙 2</text>
    <text x="20" y="175" fill="${sub}" font-size="9">트랙 3</text>
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="10">분기 × 다중 트랙 마일스톤</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-23
- raw js: https://graph.heal7.com/sku/SCH-23.js

```js
`
    ${['Q1','Q2','Q3','Q4'].map((q,i)=>{
      const x = 60 + i*82;
      return `<line x1="${x}" y1="30" x2="${x}" y2="200" stroke="${stroke}" stroke-width="1" stroke-dasharray="3 4"/>
              <text x="${x}" y="22" text-anchor="middle" fill="${gold}" font-size="11" font-weight="700">${q}</text>`;
    }).join('')}
    ${[
      [0, 50,2.4,'기획·리서치',royal],
      [1.5,80,1.8,'MVP 개발',gold],
      [2.8,110,1.0,'베타',plum],
      [3.2,140,0.8,'정식 출시',rose],
      [0.8,170,3.0,'마케팅 캠페인',teal]
    ].map(([qStart,y,qSpan,lab,c])=>{
      const x = 60 + qStart*82, w = qSpan*82;
      return `<rect x="${x}" y="${y-9}" width="${w}" height="18" rx="4" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
              <text x="${x+8}" y="${y+5}" fill="${fg}" font-size="10" font-weight="600">${lab}</text>`;
    }).join('')}
    <text x="20" y="55" fill="${sub}" font-size="9">트랙 1</text>
    <text x="20" y="115" fill="${sub}" font-size="9">트랙 2</text>
    <text x="20" y="175" fill="${sub}" font-size="9">트랙 3</text>
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="10">분기 × 다중 트랙 마일스톤</text>
  `
```

## 시나리오
- 제품 로드맵 외부 발표 (PR)
- OKR 분기 계획 — Quarter별 KR
- 프로젝트 마일스톤 보고
- PR 입찰 제안의 일정 슬라이드

## 관련 SKU
`c-sch-kanban`, `c-sch-cycle`