---
code: "SCH-04"
id: "c-sch-9block"
tab: "schemas"
kind: "schema"
title: "만다라트 3×3 · 9-Block"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "block"
dataShape: "9-cell diagram with 중심+8 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["block", "중심+8", "9cells", "만다라트", "목표분해", "BMC", "9분할"]
gallery: "https://graph.heal7.com/#SCH-04"
js: "/sku/SCH-04.js"
---

# [SCH-04] 만다라트 3×3 · 9-Block

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

## 언제 가져가나
하나의 핵심 목표를 8개 보조 요인으로 분해 — 오타니식 만다라트, 막연한 큰 목표를 구체 행동으로.

**응용** 목표-수단 분해, 비즈니스 모델 캔버스, 스킬 매트릭스.

## 데이터 모양
- family: `block`
- dataShape: 9-cell diagram with 중심+8 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: block, 중심+8, 9cells, 만다라트, 목표분해, BMC, 9분할

- schema.type: `block`
- schema.cells: `9`
- schema.axis: `중심+8`


## 의존
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 = `
    ${Array.from({length:9}).map((_,k)=>{
      const i = k%3, j = Math.floor(k/3);
      const x = 70 + i*87, y = 30 + j*60;
      const center = (i===1 && j===1);
      const c = center ? gold : stroke;
      const fill = center ? 'rgba(232,192,105,.18)' : fill1;
      const labs = ['목표1','요인A','목표2','요인D','핵심','요인B','목표4','요인C','목표3'];
      return `<rect x="${x}" y="${y}" width="80" height="55" rx="6" fill="${fill}" stroke="${c}" stroke-width="${center?2:1}"/>
              <text x="${x+40}" y="${y+33}" text-anchor="middle" fill="${center?gold:fg}" font-size="${center?12:10}" font-weight="${center?700:500}">${labs[k]}</text>`;
    }).join('')}
    <text x="200" y="220" text-anchor="middle" fill="${sub}" font-size="11">중심 핵심 + 8 보조 (오타니식 목표 분해)</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-04
- raw js: https://graph.heal7.com/sku/SCH-04.js

```js
`
    ${Array.from({length:9}).map((_,k)=>{
      const i = k%3, j = Math.floor(k/3);
      const x = 70 + i*87, y = 30 + j*60;
      const center = (i===1 && j===1);
      const c = center ? gold : stroke;
      const fill = center ? 'rgba(232,192,105,.18)' : fill1;
      const labs = ['목표1','요인A','목표2','요인D','핵심','요인B','목표4','요인C','목표3'];
      return `<rect x="${x}" y="${y}" width="80" height="55" rx="6" fill="${fill}" stroke="${c}" stroke-width="${center?2:1}"/>
              <text x="${x+40}" y="${y+33}" text-anchor="middle" fill="${center?gold:fg}" font-size="${center?12:10}" font-weight="${center?700:500}">${labs[k]}</text>`;
    }).join('')}
    <text x="200" y="220" text-anchor="middle" fill="${sub}" font-size="11">중심 핵심 + 8 보조 (오타니식 목표 분해)</text>
  `
```

## 시나리오
- 오타니식 목표 분해 — "1군 진입" → 8영역(체력/기술/멘탈/인성 등)
- BMC 9블록 변형 — 핵심 자원 + 8 비즈니스 요소
- 스킬 매트릭스 — 핵심 역량 + 8 보조 역량
- 제품 차별화 — 핵심 가치 + 8 USP

## 관련 SKU
`c-sch-4block`, `c-sch-6block`