포지셔닝 맵(두 축과 경쟁사 점)

두 기준 위에 경쟁사와 자사의 위치를 찍어 빈자리를 보여줄 때. 경쟁 분석, 브랜드 방향 제안. 점 5~8개, 자사 1개만 강조, 오른쪽 해석 3개. 값 바꾸는 법: 그림 크기 660×380, 축 교차점 (330,190). 점 좌표: cx = 330 + 가로 점수(-1~1) × 300, cy = 190 - 세로 점수(-1~1) × 165. 경쟁사는 circle.pt + text.pl, 자사는 circle.halo·me 와 text.ml·ms(같은 좌표로 이동). 밀집 구간 타원은 ellipse.zone. 축 끝 이름은 text.al.

Deckary MBB 장표 유형 정리(https://deckary.com/blog/consulting-slide-templates). Financial Times Visual Vocabulary 의 상관(scatter) 표현(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary): 비교 대상은 회색 점, 주인공만 색. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-pos">
  <svg width="660" height="380" viewBox="0 0 660 380" aria-hidden="true"><line class="ax" x1="16" y1="190" x2="644" y2="190"/><line class="ax" x1="330" y1="14" x2="330" y2="366"/>
<text class="al" x="16" y="180">가격 낮음</text><text class="al" x="644" y="180" text-anchor="end">가격 높음</text><text class="al" x="340" y="26">전문가용</text><text class="al" x="340" y="364">입문용</text>
<ellipse class="zone" cx="190" cy="148" rx="120" ry="88"/><text class="zl" x="190" y="262" text-anchor="middle">경쟁 밀집 구간</text>
<circle class="pt" cx="150" cy="110" r="7"/><text class="pl" x="163" y="115">A사</text><circle class="pt" cx="215" cy="150" r="7"/><text class="pl" x="228" y="155">B사</text><circle class="pt" cx="130" cy="205" r="7"/><text class="pl" x="143" y="210">C사</text><circle class="pt" cx="250" cy="95" r="7"/><text class="pl" x="263" y="100">D사</text><circle class="pt" cx="455" cy="280" r="7"/><text class="pl" x="468" y="285">E사</text><circle class="pt" cx="520" cy="240" r="7"/><text class="pl" x="533" y="245">F사</text>
<circle class="halo" cx="480" cy="92" r="22"/><circle class="me" cx="480" cy="92" r="10"/><text class="ml" x="510" y="88">자사</text><text class="ms" x="510" y="108">전문가용, 중상 가격</text></svg>
  <ol>
    <li><span class="n num">1</span><div><h3>저가 입문 구간에 4개사 밀집</h3><p>가격 문구 위주의 광고 경쟁, 검색어 단가 상승</p></div></li>
    <li><span class="n num">2</span><div><h3>전문가용 고가 구간은 비어 있음</h3><p>검색 수요는 있으나 대응하는 광고가 적음</p></div></li>
    <li class="hot"><span class="n num">3</span><div><h3>자사는 빈 구간의 유일한 선택지</h3><p>성능 근거 중심 메시지로 차별화, 가격 경쟁 회피</p></div></li>
  </ol>
</div>

.dk-pos{display:grid;grid-template-columns:660px minmax(0,1fr);gap:48px;align-items:center}
.dk-pos svg{display:block}
.dk-pos .ax{stroke:var(--g3);stroke-width:1}
.dk-pos .al{font-size:13px;fill:var(--mu)}
.dk-pos .zone{fill:var(--soft);stroke:var(--line2);stroke-width:1;stroke-dasharray:4 4}
.dk-pos .zl{font-size:13px;fill:var(--mu)}
.dk-pos .pt{fill:var(--g2)}
.dk-pos .pl{font-size:14px;fill:var(--ink2)}
.dk-pos .halo{fill:var(--acw)}
.dk-pos .me{fill:var(--ac)}
.dk-pos .ml{font-size:17px;font-weight:700;fill:var(--ac)}
.dk-pos .ms{font-size:13px;fill:var(--ink2)}
.dk-pos ol{list-style:none;margin:0;padding:0}
.dk-pos li{display:grid;grid-template-columns:36px minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--line)}
.dk-pos li:last-child{border-bottom:0}
.dk-pos .n{font-size:var(--f-lg);font-weight:700;color:var(--g2);line-height:1.35}
.dk-pos h3{font-size:var(--f-md);font-weight:700;margin:0 0 2px;line-height:1.4}
.dk-pos li p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-pos .hot .n,.dk-pos .hot h3{color:var(--ac)}