반폭 · 2×2 매트릭스(사분면 이름 + 점 3~4개)

과제나 매체를 두 기준(효과와 난이도, 도달과 전환 등)으로 나눠 우선순위를 보일 때 절반 칸에. 사분면 4개에 이름, 점 3~4개(이름 6자 이내). 강조색은 먼저 손댈 사분면과 그 안의 점 하나. 값 바꾸는 법: 사분면 네 칸은 고정 좌표(왼쪽 위 30,6 / 오른쪽 위 214,6 / 왼쪽 아래 30,116 / 오른쪽 아래 214,116, 각 180×106). 강조할 칸의 rect class 를 "f-w", 나머지를 "f-s" 로. 점 x = 30 + 가로 기준 값(0~100) × 3.64, y = 222 − 세로 기준 값(0~100) × 2.16. 점 이름은 점 x + 12, y + 5(오른쪽 끝에 닿으면 text-anchor="end" 로 점 왼쪽에). 사분면 이름 4개와 아래·왼쪽 축 이름 교체.

BCG 성장·점유율 매트릭스와 효과·난이도(impact·effort) 매트릭스의 일반 구성, McKinsey 공개 보고서의 사분면 도식(한 사분면만 옅은 바탕)을 참고. 직접 제작.

<div class="dk dkh dkh-g-matrix"><div class="dk-card"><p class="dk-lb">개선 과제 우선순위 · 효과와 난이도 기준</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 248" preserveAspectRatio="xMidYMid meet" role="img">
<rect x="30" y="6" width="180" height="106" rx="8" class="f-w"/><rect x="214" y="6" width="180" height="106" rx="8" class="f-s"/><rect x="30" y="116" width="180" height="106" rx="8" class="f-s"/><rect x="214" y="116" width="180" height="106" rx="8" class="f-s"/>
<text x="42" y="26" class="va">우선 실행</text><text x="382" y="26" text-anchor="end" class="k">단계 추진</text><text x="42" y="212" class="k">여유 시 진행</text><text x="382" y="212" text-anchor="end" class="k">보류</text>
<circle cx="92" cy="66" r="7" class="f-a"/><text x="105" y="71" class="v">랜딩 개선</text><circle cx="286" cy="58" r="6" class="f-g4"/><text x="298" y="63" class="k">영상 제작</text><circle cx="104" cy="164" r="6" class="f-g4"/><text x="116" y="169" class="k">키워드 정리</text><circle cx="300" cy="172" r="6" class="f-g4"/><text x="312" y="177" class="k">앱 개편</text>
<text x="212" y="242" text-anchor="middle">실행 난이도 낮음 → 높음</text><text x="16" y="114" text-anchor="middle" transform="rotate(-90 16 114)">기대 효과 낮음 → 높음</text>
</svg></div>
<p class="nt">예시 문구 · 실제 내용으로 교체</p></div></div>

.dkh-g-matrix .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-matrix .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-matrix .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-matrix .cv{flex:1;min-height:0;position:relative}
.dkh-g-matrix .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-matrix svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-matrix svg .k{fill:var(--ink2)}
.dkh-g-matrix svg .v{fill:var(--ink);font-weight:600}
.dkh-g-matrix svg .va{fill:var(--ac);font-weight:700}
.dkh-g-matrix svg .on{fill:var(--card);font-weight:600}
.dkh-g-matrix svg .t14{font-size:14px}
.dkh-g-matrix svg .f-a{fill:var(--ac)}
.dkh-g-matrix svg .f-w{fill:var(--acw)}
.dkh-g-matrix svg .f-s{fill:var(--soft)}
.dkh-g-matrix svg .f-c{fill:var(--card)}
.dkh-g-matrix svg .f-g1{fill:var(--g1)}
.dkh-g-matrix svg .f-g2{fill:var(--g2)}
.dkh-g-matrix svg .f-g3{fill:var(--g3)}
.dkh-g-matrix svg .f-g4{fill:var(--g4)}
.dkh-g-matrix svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-matrix svg .gr{stroke:var(--line);stroke-width:1;fill:none}