Matrix / Quadrant diagram

매트릭스 다이어그램이란

매트릭스 다이어그램은 두 개의 교차 축으로 정의된 2차원 공간에 항목을 배치하여, 위치만으로 의미를 한눈에 전달합니다. 가장 일반적인 형태는 2×2 사분면 그리드입니다. 제품 관리자들은 아이젠하워 매트릭스를 사용해 긴급한 작업과 중요한 작업을 구분하고, 전략 컨설턴트들은 BCG 매트릭스로 포트폴리오 투자를 배분하며, HR 팀은 9-box 그리드로 성과와 잠재력을 매핑합니다. 이 시각적 관례는 Boston Consulting Group의 1970년대 포트폴리오 업무에서 시작되어 Ansoff, Johari, RICE 등의 프레임워크로 확장되었습니다.

Schematex는 세 가지 매트릭스 모드를 지원합니다: quadrant (레이블이 있는 축의 2×2 또는 3×3 버블 플롯), heatmap (N×M 색상 셀 그리드), correlation (N×M 점 강도 테이블). 8개의 사전 구축 템플릿이 가장 일반적인 프레임워크를 기본 제공하며, 모든 축 레이블, 사분면 이름, 포인트 속성을 완전히 사용자 정의할 수 있습니다.

1. 첫 번째 매트릭스 만들기

가장 간단한 매트릭스: 레이블이 있는 두 축과 세 포인트로 이루어진 커스텀 2×2.

80%의 사용 사례를 커버하는 네 가지 규칙:

1. matrix 키워드로 시작하고, 선택적으로 템플릿 이름 또는 따옴표로 묶인 제목을 추가합니다.
2. x-axis:와 y-axis:로 축을 설정합니다 — 또는 내장 템플릿을 사용해 이 단계를 건너뜁니다.
3. 각 포인트는 "레이블" at (x, y) 형식으로, x와 y는 0.0(낮음/왼쪽/아래)에서 1.0(높음/오른쪽/위)까지의 십진수입니다.
4. 좌표 뒤에 선택적 속성을 추가합니다 — size:, category:, color:, shape:, highlight:.

주석은 줄 어디서든 #으로 시작해야 합니다 (따옴표 문자열 외부).

2. 내장 템플릿

템플릿은 축, 사분면 레이블, 그리드 크기를 미리 구성합니다. 헤더 줄의 두 번째 토큰으로 템플릿 이름만 사용하면 됩니다.

템플릿의 축과 사분면 레이블은 명시적인 x-axis: / y-axis: / quadrant 지시어로 재정의할 수 있습니다.

3. 축

축 줄은 각 차원의 의미적 극단을 선언합니다.

x-axis: Low Effort → High Effort
y-axis: Low Value → High Value

화살표는 낮은 레이블(왼쪽/아래)과 높은 레이블(오른쪽/위)을 구분합니다. 다음 구분자들은 모두 동일합니다:

반전 축은 "높은" 값이 왼쪽이나 아래에 위치하는 관례를 위한 것입니다:

x-axis: High Market Share ← Low Market Share

4. 포인트

각 포인트는 정규화된 (x, y) 좌표 쌍으로 위치가 결정되는 버블입니다.

"Label" at (x, y)
"Label" at (x, y) size: 4 category: design color: #7B1FA2 highlight: true note: "clarify spec"

[0, 1] 범위 밖의 좌표는 차트 경계에 클램핑되고 배지로 표시됩니다 — 원래 값은 툴팁 표시를 위해 저장됩니다.

5. 사분면 레이블

각 사분면에 이름과 선택적 부제목을 레이블로 붙입니다.

quadrant Q1 "Do First"
quadrant Q2 "Schedule"
quadrant Q3 "Delete"
quadrant Q4 "Delegate"

# 선택적 부제목:
quadrant Q1 "Do First" description: "High urgency, high importance"

사분면 번호는 표준 수학 관례를 따릅니다: Q1 = 오른쪽 위, Q2 = 왼쪽 위, Q3 = 왼쪽 아래, Q4 = 오른쪽 아래. Q 접두사는 선택 사항입니다 — quadrant 1 "레이블"도 동일하게 유효합니다.

6. 히트맵 모드

히트맵 모드는 버블 위치를 그리는 대신 N×M 셀을 색상 강도로 채웁니다.

matrix heatmap 4x3 "Skill Matrix"
rows: [Strategy, Execution, Communication, Technical]
cols: [Junior, Mid, Senior]

cell (0,0) level: weak
cell (1,0) level: medium
cell (2,0) level: strong
cell (0,1) value: 7
cell (1,2) label: "Top 10%"

• matrix heatmap COLxROW — 헤더가 그리드 차원을 설정합니다.
• rows:와 cols: — 쉼표로 구분되거나 대괄호 목록으로 된 축 레이블.
• cell (col, row) — 0 인덱스, 열 먼저, 행 두 번째 (행 0 = 아래).
• level: — strong (3), medium (2), weak (1) — 열 강도의 약식.
• value: — 명시적 숫자 값 (level:을 재정의).
• label: — 셀 안에 배치되는 따옴표 텍스트.

7. 상관관계 모드

상관관계 모드는 N×M 점 매트릭스를 렌더링하며, 강도는 행과 열 변수 간의 관계 강도를 나타냅니다.

matrix correlation 4x4 "Product Metrics"
rows: [DAU, Retention, Revenue, NPS]
cols: [DAU, Retention, Revenue, NPS]

cell (0,0) value: 1
cell (1,0) value: 0.82
cell (2,0) value: 0.54
cell (3,0) value: 0.71

동일한 cell 문법이 적용됩니다. level: strong | medium | weak도 상관관계 모드에서 허용됩니다.

8. SIPOC 모드

SIPOC는 Six Sigma DMAIC 프로젝트의 Define 단계를 시작하는 한 페이지짜리 범위 정의 테이블입니다. 왼쪽에서 오른쪽으로 다섯 개의 고정 열로, 프로세스가 다루는 모든 사람과 사물을 명시합니다: Suppliers · Inputs · Process · Outputs · Customers. 팀이 측정이나 개선을 시작하기 전에 SIPOC은 경계를 고정합니다 — "이 프로세스는 어디서 시작하고, 어디서 끝나며, 누가 작업을 전달하고 받는가."

matrix sipoc "Order fulfilment"
suppliers: "Vendor", "Warehouse"
inputs: "PO", "Stock levels"
process: "Receive order", "Pick", "Pack", "Ship"
outputs: "Shipped package", "Invoice"
customers: "End customer", "Finance"

• matrix sipoc으로 시작하고, 선택적으로 따옴표로 묶인 제목을 추가합니다.
• 다섯 열 각각은 별도의 지시어입니다: suppliers:, inputs:, process:, outputs:, customers:.
• 콜론 뒤에 쉼표로 구분된 따옴표 문자열로 항목을 나열합니다. 열에는 항목 수에 제한이 없으며, 행은 해당 열 안에서 위에서 아래로 쌓입니다.
• process: 열은 높은 수준의 단계 순서입니다 (일반적으로 4–7단계) — 자세한 플로우차트가 아닌 주요 단계만 포함합니다.

다섯 열은 선언 순서에 관계없이 항상 정규 S-I-P-O-C 순서로 렌더링됩니다. 따라서 LLM이 블록을 순서 없이 출력해도 다이어그램이 올바르게 읽힙니다.

9. QFD 모드 (품질의 집)

QFD(Quality Function Deployment) — Yoji Akao가 도입한 품질의 집 — 은 고객이 원하는 것을 이를 구현하는 엔지니어링 특성으로 변환합니다. 행은 WHATs(고객 요구사항, 각각 중요도 가중치가 있음)이고, 열은 HOWs(팀이 통제하는 측정 가능한 엔지니어링 특성)입니다. 그리드의 본문은 각 HOW가 각 WHAT을 얼마나 강하게 충족시키는지를 기록합니다.

차별점: 엔진이 하단 행을 직접 계산합니다. 각 HOW의 기술적 중요도는 해당 열의 가중치 × 관계 강도 합계입니다 — "어떤 엔지니어링 특성이 가장 많은 고객 가치를 이동시키며, 따라서 가장 많은 노력을 투자할 가치가 있는가"에 대한 순위 있는 답변입니다. 그리고 집의 지붕 — 열 위의 반 매트릭스 다이아몬드 셀 — 은 두 HOW가 서로 도움이 되는지 방해가 되는지를 기록합니다.

matrix qfd "Coffee maker"
what: "Quiet operation" weight: 5
what: "Brews fast" weight: 3
what: "Energy efficient" weight: 4
how: "Fan RPM" dir: down
how: "Heater watts" dir: up
how: "Insulation" dir: up
rel (0,0): 9
rel (0,2): 3
rel (1,1): 9
rel (2,1): 3
rel (2,2): 9
roof (0,1): --
roof (1,2): +

WHATs와 HOWs

관계 셀

rel (i, j): strength는 열-j HOW가 행-i WHAT을 얼마나 강하게 충족시키는지를 기록합니다. 인덱스는 (행, 열), 모두 0 기반입니다.

9 / 3 / 1 척도는 QFD 관례입니다: 중요도 행을 합산할 때 하나의 강한 링크가 여러 약한 링크보다 우선하도록 의도적으로 비선형으로 설계되었습니다.

계산된 기술적 중요도 행

엔진은 각 열을 합산하여 집의 하단에 기술적 중요도 행을 생성합니다:

importance(j) = Σ 행 i에 대해  ( weight(i) × strength(i, j) )

위의 커피 메이커 예시에서 행은 45 / 39 / 51로 계산됩니다 — Insulation(51)이 가장 높은 레버리지 특성이고, Heater watts(39)가 가장 낮습니다. 이 순위가 결과물입니다: 팀에게 엔지니어링 노력을 어디에 쏟아야 하는지 알려줍니다.

normalize: true(블록 어느 곳이든 별도 줄에 추가)를 사용하면 원시 합계 대신 각 열을 총계의 백분율로 표시합니다 — 이 예시에서는 33% / 29% / 38%. 백분율은 매우 다른 가중치 척도에서 상대적 우선순위를 더 쉽게 읽을 수 있게 합니다.

지붕 — HOW × HOW 상관관계

지붕은 열 위에 위치하는 삼각형 반 매트릭스입니다. roof (i, j): glyph는 HOW i와 HOW j가 서로를 강화하는지 충돌하는지를 기록합니다 — 팀이 조율해야 할 시너지와 트레이드오프.

각 지붕 항목은 표준 QFD 피치 지붕 그리드에서 다이아몬드 셀로 렌더링됩니다. 예시에서 roof (0,1): --는 Fan RPM을 낮추면서 Heater watts를 올리는 것이 트레이드오프임을 표시하고, roof (1,2): +는 Heater watts와 Insulation이 서로 강화함을 표시합니다.

10. Punnett 모드 (멘델 유전학)

Punnett 스퀘어는 유전자 교배의 자손을 예측합니다. 두 부모의 유전자형만 입력하면 엔진이 멘델 유전을 처리합니다 — 각 부모의 배우자(유전자 좌위당 한 개의 대립유전자)를 열거하고, 그리드를 모든 배우자 조합으로 채우며, 유전자형 및 표현형 비율을 계산합니다. 사용자는 그리드를 직접 채울 필요가 없습니다.

matrix punnett "Eye color  (Bb × Bb)"
cross: Bb x Bb
trait B: "Brown eyes" / "Blue eyes"

교배

대립유전자의 대소문자가 우성을 결정합니다 — 이것이 표준 유전학 관례입니다. 대문자는 우성 대립유전자, 소문자는 열성 대립유전자입니다. 유전자형은 대립유전자를 글자로 그룹화합니다: RrYy는 두 개의 유전자 좌위, R/r(둥근/주름진)과 Y/y(노란/초록). 유전자 하나는 단성 잡종 교배 (2×2 그리드), 두 개는 이성 잡종 (4×4), 세 개는 삼성 잡종 (8×8).

계산된 비율 (차별점)

엔진은 유전자형만으로 다음을 도출합니다:

• 각 부모의 배우자 — 열과 행 헤더 — 유전자 좌위당 하나의 대립유전자를 취함 (이형 접합체 Bb는 B와 b 생성);
• 자손 그리드 — 모든 배우자 쌍, 우성 대립유전자 먼저 작성 (Bb, bB 아님);
• 표현형 비율 — 어떤 표현형을 발현하는지에 따라 그룹화된 박스, 최소 분수로 환원. 단성 잡종 Bb × Bb는 고전적인 3:1, 이성 잡종 RrYy × RrYy는 유명한 9:3:3:1;
• 유전자형 비율 — 예: 단성 잡종의 1:2:1 (BB 1개, Bb 2개, bb 1개).

각 박스는 표현형 클래스에 따라 색조가 입혀지고, 하단에 범례와 함께 표현형 비율 및 유전자형 비율이 표시됩니다.

11. 구성 옵션

config: 블록은 시각적 렌더링을 조정합니다. 각 옵션은 config: 헤더 아래의 별도 들여쓰기 줄에 배치합니다.

config:
  quadrantBg: true
  gridLines: true
  axisArrows: true
  bubbleScale: area
  legendPosition: bottom-right

두 가지 약식 지시어도 최상위 수준에서 작동합니다 (config: 블록 안이 아님):

axis: off          # off | on | auto — 축 선 표시 여부
margins: true      # true | false — 점수 + 순위 마진 표시 (상관관계 모드)

12. 레이블과 주석

• 제목: matrix "내 제목" 또는 독립 줄에 title: 내 제목.
• 포인트 레이블: at (…) 앞의 따옴표 문자열.
• 축 레이블: x-axis:와 y-axis: 지시어.
• 사분면 레이블: quadrant Q1 "이름" 지시어.
• 주석: 줄 어디서든 #, 따옴표 문자열 외부.

matrix "Prioritization"
# 주석입니다
x-axis: Low Cost → High Cost   # 지시어 뒤 인라인 주석
"Fix bug" at (0.1, 0.9) size: 3  # 포인트 뒤 주석

13. 테이블 모드 (style: table)

기본 매트릭스 렌더링은 산점도/버블 차트 — 포인트가 (x, y) 좌표에 떠있습니다. 출력이 사분면별로 그룹화된 항목 목록인 프레임워크(아이젠하워, Johari, Impact-Effort, 9-box)에는 style: table을 사용해 셀 내 텍스트 레이아웃으로 전환합니다.

matrix eisenhower "This Week"
style: table
Q2: "Ship hotfix"
Q2: "Customer demo prep"
Q1: "Write Q3 OKRs"
Q1: "Refactor auth layer"
Q4: "LinkedIn updates"
Q3: "Reorganize Slack channels"

style: table은 다음 변경을 자동으로 적용합니다:

Q1 … Q4 약식 (2×2 전용)

2×2 템플릿의 경우 긴 cell (col, row) label: "항목" 형식 대신 Qn: "항목"을 사용합니다. 매핑:

같은 약식 키를 반복해 같은 셀에 여러 항목을 추가합니다:

Q2: "Ship hotfix"
Q2: "Customer demo prep"

3×3 그리드(9-box)의 경우 cell (col, row) label: "…"를 직접 사용하세요 — Q 약식은 2×2 전용입니다.

테이블 vs 산점도 선택 기준

14. 예약어와 이스케이프

줄 시작 시 예약: matrix (헤더), x-axis:, y-axis:, quadrant, config:, title:, rows:, cols:, grid:, axis:, margins:, cell. SIPOC 모드: suppliers:, inputs:, process:, outputs:, customers:. QFD 모드: what:, how:, rel, roof, normalize:.

포인트 줄은 따옴표 문자로 시작해야 합니다 (" 또는 '). 따옴표로 시작하지 않는 줄은 포인트로 처리되지 않습니다.

공백이 있는 문자열은 축 레이블에서 따옴표가 필요하지 않습니다 — 콜론(과 화살표) 이후의 텍스트가 그대로 사용됩니다. note:와 label: 포인트 속성에서는 큰따옴표를 사용합니다.

15. 자주 발생하는 실수

16. 문법 (EBNF)

document     = header directive*

header       = "matrix" ( template-name | mode-header | title )? NEWLINE
template-name = "eisenhower"|"impact-effort"|"rice"|"bcg"|"ansoff"|"johari"|"9-box"|"risk-matrix"
mode-header  = ( "heatmap" | "correlation" ) ( number "x" number )? title?
             | ( "sipoc" | "qfd" | "punnett" ) title?
title        = quoted-string | bare-text

directive    = x-axis | y-axis | quadrant-dir | config-block
             | point | cell | q-short | rows-dir | cols-dir | grid-dir
             | style-dir | title-dir | axis-dir | margins-dir
             | sipoc-col | qfd-what | qfd-how | qfd-rel | qfd-roof | normalize-dir
             | punnett-cross | punnett-trait
             | comment | blank

# SIPOC 모드
sipoc-col    = ( "suppliers:" | "inputs:" | "process:" | "outputs:" | "customers:" )
               WS quoted-string ( "," quoted-string )* NEWLINE

# QFD / 품질의 집 모드
qfd-what     = "what:" WS quoted-string WS "weight:" number NEWLINE
qfd-how      = "how:" WS quoted-string ( WS "dir:" ( "up" | "down" ) )? NEWLINE
qfd-rel      = "rel" WS "(" number "," number ")" ":" WS ( "9" | "3" | "1" ) NEWLINE  # (row, col)
qfd-roof     = "roof" WS "(" number "," number ")" ":" WS ( "++" | "+" | "-" | "--" ) NEWLINE  # (how, how)
normalize-dir = "normalize:" WS "true" NEWLINE

# Punnett (멘델 유전학) 모드
punnett-cross = ( "cross:" | "parents:" ) WS genotype WS ( "x" | "×" | "*" ) WS genotype NEWLINE
punnett-trait = "trait" WS letter ":" WS quoted-string WS "/" WS quoted-string NEWLINE  # 우성 / 열성
genotype     = ( letter letter )+   # 글자로 그룹화된 대립유전자 쌍; 대소문자 = 우성, 예: "RrYy"

x-axis       = "x-axis:" WS axis-spec NEWLINE
y-axis       = "y-axis:" WS axis-spec NEWLINE
axis-spec    = text arrow text  |  text   # 일반 텍스트 → 높은 레이블만
arrow        = "→" | "->" | "↑" | "←" | "<-" | "<" | "↓"

quadrant-dir = "quadrant" WS "Q"? digit WS quoted-string ( WS "description:" quoted-string )? NEWLINE

config-block = "config:" NEWLINE ( INDENT key ":" WS value NEWLINE )*

point        = quoted-string WS "at" WS "(" number "," number ")" ( WS point-prop )* NEWLINE
point-prop   = "size:" number
             | "category:" bareword
             | "color:" hex-color
             | "shape:" ( "circle"|"square"|"triangle"|"diamond" )
             | "highlight:" "true"
             | "note:" quoted-string
             | "label:" quoted-string

cell         = "cell" WS "(" digit "," digit ")" ( WS cell-prop )* NEWLINE
cell-prop    = "value:" number
             | "label:" quoted-string
             | "level:" ( "strong" | "medium" | "weak" )

style-dir    = "style:" WS "table" NEWLINE
q-short      = "Q" ( "1" | "2" | "3" | "4" ) ":" WS quoted-string NEWLINE   # 2×2 전용

rows-dir     = "rows:" WS label-list NEWLINE
cols-dir     = "cols:" WS label-list NEWLINE
grid-dir     = "grid:" WS number "x" number NEWLINE
axis-dir     = "axis:" WS ( "off" | "on" | "auto" ) NEWLINE
margins-dir  = "margins:" WS ( "true" | "false" | "on" | "1" ) NEWLINE

label-list   = "[" text ("," text)* "]" | text ("," text)*
quoted-string = '"' any-char-but-quote* '"' | "'" any-char-but-quote* "'"
comment      = "#" any NEWLINE

권위 있는 소스: src/diagrams/matrix/parser.ts. 이 문서와 파서가 다를 경우 파서가 우선입니다 — 이슈를 열어주세요.

17. 표준 준수

Schematex 매트릭스 다이어그램은 Boston Consulting Group (1970), 아이젠하워 결정 매트릭스, Ansoff 성장 매트릭스, Johari 창 프레임워크에서 사용하는 표준 2×2 사분면 관례를 구현합니다. 9-box 그리드는 McKinsey/GE 인재 리뷰 관례(3×3, 성과 × 잠재력)를 따릅니다. 히트맵과 상관관계 모드는 명명된 외부 표준을 따르지 않지만, Excel 조건부 서식 및 R의 corrplot 같은 도구에서 발견되는 보편적인 셀 강도 인코딩을 사용합니다.

현재 구현된 기능:

• ✅ 커스텀 축과 사분면 레이블이 있는 2×2 사분면 모드
• ✅ 3×3 사분면 모드 (9-box 템플릿)
• ✅ level:과 value: 셀이 있는 N×M 히트맵 모드
• ✅ N×M 상관관계 모드
• ✅ SIPOC 모드 — 다섯 열 Suppliers · Inputs · Process · Outputs · Customers 범위 정의 테이블 (Six Sigma DMAIC Define)
• ✅ QFD / 품질의 집 모드 — WHATs × HOWs 그리드, 9 / 3 / 1 관계 척도, 계산된 기술적 중요도 행(normalize: true 백분율 포함), HOW × HOW 상관관계 지붕 (++ / + / - / --)
• ✅ Punnett 모드 — 두 부모 유전자형의 멘델 교배; 엔진이 배우자, 자손 그리드, 유전자형 + 표현형 비율(단성 잡종 3:1, 이성 잡종 9:3:3:1)을 계산; 대립유전자 대소문자 = 우성; 선택적 trait 표현형 이름; 단성/이성/삼성 잡종 (2×2 / 4×4 / 8×8)
• ✅ 8개 내장 템플릿 (eisenhower, impact-effort, rice, bcg, ansoff, johari, 9-box, risk-matrix)
• ✅ 포인트 속성: size, category, color, shape, highlight, note
• ✅ 반전 축 (← / <-)
• ✅ Config 블록 (quadrantBg, gridLines, axisArrows, bubbleScale, legendPosition, labelCollision, offChartPolicy)
• ✅ style: table — Q1…Q4 약식(2×2) 및 쌓인 글머리 목록이 있는 셀 내 텍스트 레이아웃
• ⏳ 포인트의 label: 재정의 (파싱됨, 렌더러 지원 보류 중)
• ⏳ 차트 외부 drop 정책 (파싱됨, 렌더러는 현재 항상 클램핑-배지)
• ⏳ margins: 상관관계 점수/순위 사이드바 (파싱됨, 아직 렌더링 안 됨)

참고문헌:

• Henderson, B. (1970). The Product Portfolio. Boston Consulting Group.
• Covey, S. (1989). The 7 Habits of Highly Effective People. (Eisenhower matrix popularization)
• Ansoff, H.I. (1957). "Strategies for Diversification." Harvard Business Review.
• Akao, Y. (1990). Quality Function Deployment: Integrating Customer Requirements into Product Design. Productivity Press. (House of Quality)
• Pyzdek, T. & Keller, P. (2018). The Six Sigma Handbook (5th ed.). McGraw-Hill. (SIPOC in DMAIC Define)
• Punnett, R.C. (1905). Mendelism. Macmillan. (the Punnett square); Mendel, G. (1866). "Versuche über Pflanzenhybriden."

18. 로드맵

계획 중 — 아직 파싱 불가. 오늘 생성된 DSL에서 이것들을 사용하지 마세요; 파서가 거부하거나 무시합니다.

• 수영 레인 / 구역 오버레이 — 그리드 뒤에 그려지는 명명된 직사각형 강조 영역.
• 임계선 — 레이블이 있는 수평 또는 수직 참조선 (예: "손익분기점" 선).
• 버블 내부 레이블 — 포인트 레이블을 버블 옆이 아닌 버블 안에 출력하는 옵션.
• 테이블로 내보내기 — 스프레드시트 가져오기를 위해 SVG 외에 구조화된 CSV / JSON 출력.
• 4×4 및 커스텀 레이블 사분면 모드 — 히트맵이 아닌 사분면(버블 플롯) 모드에서 레이블이 있는 셀이 있는 임의 NxM.

더 빨리 필요하다면 GitHub 이슈에서 추적하세요.

관련 예시

예시 갤러리에서 바로 사용 가능한 시나리오: