버블 포지셔닝(2축)

두 지표를 축으로 놓고 우리와 경쟁의 위치를 비교. 경쟁 구도 진단, 목표 위치 제시. 대상 4~8개(원 크기는 규모 지표, 없으면 같은 크기). 우리만 강조색, 목표 위치는 점선 원. 값 바꾸는 법: 원 중심 x = 60 + 가로 지수 × 10, y = 276 − 세로 지수 × 2.6(두 축 모두 0~100). 반지름 r = 규모에 비례해 18~38 사이(면적 기준이면 r = 38 × √(규모 ÷ 최대 규모)). 원 안에 이름이 안 들어가는 작은 원은 이름을 원 아래(y + r + 18)로. 우리 원은 class="a bb", 목표 위치는 circle.tgc 와 점선 line.mv 의 좌표 교체(없으면 삭제). 축 이름과 사분면 설명 문구 교체.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Correlation 분류(scatter, bubble)와 컨설팅 보고서의 2×2 포지셔닝 맵 관행 참고. 원에 이름을 직접 적고 사분면 설명은 모서리에 작은 글자로. 직접 제작.

<div class="dk dk-bubble">
<div class="dk-card">
<p class="ttl"><span>브랜드 검색량과 전환 효율 · 원 크기는 광고 노출 규모</span></p>
<svg width="1088" height="300" viewBox="0 0 1088 300" role="img">
<line x1="60" y1="276" x2="1060" y2="276" class="ax"/><line x1="60" y1="16" x2="60" y2="276" class="ax"/><line x1="560" y1="16" x2="560" y2="276" class="md"/><line x1="60" y1="146" x2="1060" y2="146" class="md"/>
<text x="60" y="296">낮음</text><text x="1060" y="296" text-anchor="end" class="k">브랜드 검색량 지수 높음</text><text x="70" y="28" class="k">전환 효율 지수 높음</text>
<text x="1050" y="32" text-anchor="end">검색량과 효율 모두 높은 영역</text><text x="1050" y="266" text-anchor="end">검색량은 많지만 효율이 낮은 영역</text>
<circle cx="840" cy="114.8" r="38" class="g2 bb"/><text x="840" y="119.8" text-anchor="middle" class="k">경쟁 A</text>
<circle cx="700" cy="187.6" r="30" class="g2 bb"/><text x="700" y="192.6" text-anchor="middle" class="k">경쟁 B</text>
<circle cx="280" cy="203.2" r="18" class="g2 bb"/><text x="280" y="239.2" text-anchor="middle" class="k">경쟁 C</text>
<circle cx="560" cy="146" r="22" class="g2 bb"/><text x="560" y="186" text-anchor="middle" class="k">경쟁 D</text>
<circle cx="940" cy="213.6" r="26" class="g2 bb"/><text x="940" y="218.6" text-anchor="middle" class="k">경쟁 E</text>
<line x1="424" y1="80.8" x2="650" y2="66.8" class="mv"/><circle cx="680" cy="62.8" r="26" class="tgc"/><text x="714" y="67.8" class="va">1년 뒤 목표 위치</text>
<circle cx="400" cy="88.8" r="26" class="a bb"/><text x="400" y="134.8" text-anchor="middle" class="v">우리 브랜드</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-bubble .dk-card{padding:22px 32px 20px}
.dk-bubble .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-bubble .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-bubble .lg span{display:flex;align-items:center;gap:6px}
.dk-bubble .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-bubble .lg i.c-a{background:var(--ac)}
.dk-bubble .lg i.c-s{background:var(--soft)}
.dk-bubble .lg i.c-g1{background:var(--g1)}
.dk-bubble .lg i.c-g2{background:var(--g2)}
.dk-bubble .lg i.c-g3{background:var(--g3)}
.dk-bubble .lg i.c-g4{background:var(--g4)}
.dk-bubble .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-bubble svg{display:block}
.dk-bubble svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-bubble svg .a{fill:var(--ac)}
.dk-bubble svg .sf{fill:var(--soft)}
.dk-bubble svg .g1{fill:var(--g1)}
.dk-bubble svg .g2{fill:var(--g2)}
.dk-bubble svg .g3{fill:var(--g3)}
.dk-bubble svg .g4{fill:var(--g4)}
.dk-bubble svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-bubble svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-bubble svg text.k{fill:var(--ink2)}
.dk-bubble svg text.v{fill:var(--ink);font-weight:600}
.dk-bubble svg text.va{fill:var(--ac);font-weight:700}
.dk-bubble svg text.on{fill:var(--card);font-weight:600}
.dk-bubble svg .md{stroke:var(--line2);stroke-width:1;stroke-dasharray:4 4}
.dk-bubble svg .bb{stroke:var(--card);stroke-width:2}
.dk-bubble svg .tgc{fill:none;stroke:var(--ac);stroke-width:2;stroke-dasharray:5 4}
.dk-bubble svg .mv{stroke:var(--ac);stroke-width:1.5;stroke-dasharray:5 4}