3자 관계(삼각 구도)

세 주체 사이에 무엇이 오가는지 보여줄 때. 광고주·대행사·파트너, 브랜드·매체·소비자. 주체 3개 고정, 변마다 오가는 것 2줄, 주체마다 역할 2줄, 가운데 공동 기준 1개. 값 바꾸는 법: 전부 svg 글자. text.nm=주체 이름(원 안, 6자 이내), text.d1·d2=주체 옆 역할 2줄, text.e1·e2=변 위에 오가는 것 2줄, text.ct·cs=가운데 공동 기준. 좌표는 그대로 두고 문구만 교체. 강조색은 가운데에만.

slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. Slidesgo 관계형 인포그래픽의 삼각 배치(https://slidesgo.com/theme/cycle-diagrams). 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-triad">
  <svg width="1152" height="380" viewBox="0 0 1152 380" aria-hidden="true"><line x1="538.6" y1="100.9" x2="367.4" y2="279.1"/><line x1="613.4" y1="100.9" x2="784.6" y2="279.1"/><line x1="384.0" y1="318.0" x2="768.0" y2="318.0"/><circle class="nd" cx="576" cy="62" r="46"/><text class="nm" x="576" y="68" text-anchor="middle">광고주</text><circle class="nd" cx="330" cy="318" r="46"/><text class="nm" x="330" y="324" text-anchor="middle">대행사</text><circle class="nd" cx="822" cy="318" r="46"/><text class="nm" x="822" y="324" text-anchor="middle">제작 파트너</text>
<text class="e1" x="425" y="180" text-anchor="middle">브리프, 승인</text><text class="e2" x="425" y="200" text-anchor="middle">주간 보고, 조정안</text><text class="e1" x="727" y="180" text-anchor="middle">최종 검수</text><text class="e2" x="727" y="200" text-anchor="middle">완성 소재 납품</text><text class="e1" x="576" y="344" text-anchor="middle">제작 지시, 일정 관리</text><text class="e2" x="576" y="364" text-anchor="middle">시안, 수정본</text>
<text class="ct" x="576" y="226" text-anchor="middle">공동 기준</text><text class="cs" x="576" y="250" text-anchor="middle">전환 건수와 납기</text>
<text class="d1" x="640" y="52">목표와 예산 결정</text><text class="d2" x="640" y="74">최종 승인 권한</text>
<text class="d1" x="268" y="308" text-anchor="end">전략, 운영, 보고</text><text class="d2" x="268" y="330" text-anchor="end">단일 연락 창구</text>
<text class="d1" x="884" y="308">영상, 이미지 제작</text><text class="d2" x="884" y="330">대행사가 품질 관리</text></svg>
</div>

.dk-triad svg{display:block}
.dk-triad line{stroke:var(--line2);stroke-width:1.5}
.dk-triad .nd{fill:var(--card);stroke:var(--line2);stroke-width:1.5}
.dk-triad .nm{font-size:16px;font-weight:700;fill:var(--ink)}
.dk-triad .e1,.dk-triad .e2{font-size:14px;fill:var(--ink2);paint-order:stroke;stroke:var(--bg);stroke-width:8px;stroke-linejoin:round}
.dk-triad .e1{font-weight:600;fill:var(--ink)}
.dk-triad .ct{font-size:20px;font-weight:700;fill:var(--ac)}
.dk-triad .cs{font-size:14px;fill:var(--mu)}
.dk-triad .d1{font-size:16px;font-weight:600;fill:var(--ink)}
.dk-triad .d2{font-size:14px;fill:var(--mu)}