---
code: "SCH-07"
id: "c-sch-quad"
tab: "schemas"
kind: "schema"
title: "2×2 매트릭스 · Quadrant"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "matrix"
dataShape: "4-cell diagram with 2축 교차 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["matrix", "2축 교차", "4cells", "BCG", "Eisenhower", "우선순위"]
gallery: "https://graph.heal7.com/#SCH-07"
js: "/sku/SCH-07.js"
---

# [SCH-07] 2×2 매트릭스 · Quadrant

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

## 언제 가져가나
두 축 교차로 4사분면 — 의사결정의 가장 보편적 프레임. X·Y만 정하면 어떤 분류도 가능.

**응용** 중요도×긴급도(Eisenhower), 가치×난이도, BCG 성장점유율.

## 데이터 모양
- family: `matrix`
- dataShape: 4-cell diagram with 2축 교차 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: matrix, 2축 교차, 4cells, BCG, Eisenhower, 우선순위

- schema.type: `matrix`
- schema.cells: `4`
- schema.axis: `2축 교차`


## 의존
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 = `
    <rect x="60" y="40" width="120" height="70" rx="6" fill="rgba(107,140,255,.10)" stroke="${royal}" stroke-width="1"/>
    <text x="120" y="80" text-anchor="middle" fill="${fg}" font-size="12" font-weight="600">Q2</text>
    <text x="120" y="98" text-anchor="middle" fill="${sub}" font-size="10">낮X · 높Y</text>
    <rect x="220" y="40" width="120" height="70" rx="6" fill="rgba(232,192,105,.14)" stroke="${gold}" stroke-width="1.5"/>
    <text x="280" y="80" text-anchor="middle" fill="${fg}" font-size="12" font-weight="600">Q1 ★</text>
    <text x="280" y="98" text-anchor="middle" fill="${sub}" font-size="10">높X · 높Y</text>
    <rect x="60" y="130" width="120" height="70" rx="6" fill="rgba(255,255,255,.04)" stroke="${stroke}" stroke-width="1"/>
    <text x="120" y="170" text-anchor="middle" fill="${sub}" font-size="12" font-weight="600">Q3</text>
    <text x="120" y="188" text-anchor="middle" fill="${sub}" font-size="10">낮 · 낮</text>
    <rect x="220" y="130" width="120" height="70" rx="6" fill="rgba(224,122,159,.10)" stroke="${rose}" stroke-width="1"/>
    <text x="280" y="170" text-anchor="middle" fill="${fg}" font-size="12" font-weight="600">Q4</text>
    <text x="280" y="188" text-anchor="middle" fill="${sub}" font-size="10">높X · 낮Y</text>
    <line x1="200" y1="30" x2="200" y2="220" stroke="${stroke}" stroke-width="1.5"/>
    <line x1="40" y1="120" x2="360" y2="120" stroke="${stroke}" stroke-width="1.5"/>
    <text x="195" y="28" text-anchor="end" fill="${sub}" font-size="11">Y ↑</text>
    <text x="365" y="135" fill="${sub}" font-size="11">X →</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-07
- raw js: https://graph.heal7.com/sku/SCH-07.js

```js
`
    <rect x="60" y="40" width="120" height="70" rx="6" fill="rgba(107,140,255,.10)" stroke="${royal}" stroke-width="1"/>
    <text x="120" y="80" text-anchor="middle" fill="${fg}" font-size="12" font-weight="600">Q2</text>
    <text x="120" y="98" text-anchor="middle" fill="${sub}" font-size="10">낮X · 높Y</text>
    <rect x="220" y="40" width="120" height="70" rx="6" fill="rgba(232,192,105,.14)" stroke="${gold}" stroke-width="1.5"/>
    <text x="280" y="80" text-anchor="middle" fill="${fg}" font-size="12" font-weight="600">Q1 ★</text>
    <text x="280" y="98" text-anchor="middle" fill="${sub}" font-size="10">높X · 높Y</text>
    <rect x="60" y="130" width="120" height="70" rx="6" fill="rgba(255,255,255,.04)" stroke="${stroke}" stroke-width="1"/>
    <text x="120" y="170" text-anchor="middle" fill="${sub}" font-size="12" font-weight="600">Q3</text>
    <text x="120" y="188" text-anchor="middle" fill="${sub}" font-size="10">낮 · 낮</text>
    <rect x="220" y="130" width="120" height="70" rx="6" fill="rgba(224,122,159,.10)" stroke="${rose}" stroke-width="1"/>
    <text x="280" y="170" text-anchor="middle" fill="${fg}" font-size="12" font-weight="600">Q4</text>
    <text x="280" y="188" text-anchor="middle" fill="${sub}" font-size="10">높X · 낮Y</text>
    <line x1="200" y1="30" x2="200" y2="220" stroke="${stroke}" stroke-width="1.5"/>
    <line x1="40" y1="120" x2="360" y2="120" stroke="${stroke}" stroke-width="1.5"/>
    <text x="195" y="28" text-anchor="end" fill="${sub}" font-size="11">Y ↑</text>
    <text x="365" y="135" fill="${sub}" font-size="11">X →</text>
  `
```

## 시나리오
- Eisenhower — 중요도 × 긴급도
- BCG — 점유율 × 성장률
- Effort vs Impact — 가치 × 난이도
- Stakeholder — Power × Interest

## 관련 SKU
`c-sch-swot`, `c-sch-bcg`, `c-sch-tows`