접점 경로 흐름(첫 접점 → 중간 → 마지막, 굵기 = 비중)

구매까지 거친 접점의 순서와 비중을 흐름의 굵기로 보여 주는 장면. 마지막 클릭만 보면 놓치는 앞단 매체의 역할 설명, 기여 모델 제안. 단 3개 고정, 단마다 접점 2~4개. 가장 굵은 경로 하나만 강조색. 값 바꾸는 법: 1% = 2.2px. 단의 x = 170, 537, 904(마디 폭 14). 마디 height = 비중 × 2.2, 마디 사이 14px, 첫 마디 y = 28. 흐름 값은 3 × 3 표 두 개(첫 → 중간, 중간 → 마지막)로 주고 행 합 = 출발 마디 비중, 열 합 = 도착 마디 비중이 되게 함. 흐름 path 는 출발 마디에서 위부터 차례로 쌓고 도착 마디에서도 출발 순서대로 쌓음(높이 = 값 × 2.2). 강조 경로의 두 흐름만 class "fl h", 맨 뒤에 그려 위에 놓음.

Cometly의 기여 시각화 안내(https://www.cometly.com/post/attribution-data-visualization-tool)의 생키(Sankey) 경로 표기(흐름 폭 = 이동량, 첫 접점에서 전환까지), 구글 애널리틱스 전환 경로 보고서의 초기·중간·마지막 접점 구분, Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Flow 분류 참고. 직접 제작.

<div class="dk dk-path">
<div class="dk-card">
<p class="ttl"><span>구매 전환 경로의 접점 구성 · 전환 100건당 비중</span></p>
<svg width="1088" height="300" viewBox="0 0 1088 300" role="img">
<path d="M184,28 C360.5,28 360.5,28 537,28 V58.8 C360.5,58.8 360.5,58.8 184,58.8 Z" class="fl"/>
<path d="M184,58.8 C360.5,58.8 360.5,141 537,141 V176.2 C360.5,176.2 360.5,94 184,94 Z" class="fl"/>
<path d="M184,94 C360.5,94 360.5,232 537,232 V254 C360.5,254 360.5,116 184,116 Z" class="fl"/>
<path d="M184,174 C360.5,174 360.5,176.2 537,176.2 V198.2 C360.5,198.2 360.5,196 184,196 Z" class="fl"/>
<path d="M184,196 C360.5,196 360.5,254 537,254 V265 C360.5,265 360.5,207 184,207 Z" class="fl"/>
<path d="M184,221 C360.5,221 360.5,102.8 537,102.8 V127 C360.5,127 360.5,245.2 184,245.2 Z" class="fl"/>
<path d="M184,245.2 C360.5,245.2 360.5,198.2 537,198.2 V218 C360.5,218 360.5,265 184,265 Z" class="fl"/>
<path d="M184,265 C360.5,265 360.5,265 537,265 V276 C360.5,276 360.5,276 184,276 Z" class="fl"/>
<path d="M184,130 C360.5,130 360.5,58.8 537,58.8 V102.8 C360.5,102.8 360.5,174 184,174 Z" class="fl h"/>
<path d="M551,72 C727.5,72 727.5,152 904,152 V189.4 C727.5,189.4 727.5,109.4 551,109.4 Z" class="fl"/>
<path d="M551,109.4 C727.5,109.4 727.5,232 904,232 V249.6 C727.5,249.6 727.5,127 551,127 Z" class="fl"/>
<path d="M551,141 C727.5,141 727.5,72 904,72 V124.8 C727.5,124.8 727.5,193.8 551,193.8 Z" class="fl"/>
<path d="M551,193.8 C727.5,193.8 727.5,189.4 904,189.4 V202.6 C727.5,202.6 727.5,207 551,207 Z" class="fl"/>
<path d="M551,207 C727.5,207 727.5,249.6 904,249.6 V260.6 C727.5,260.6 727.5,218 551,218 Z" class="fl"/>
<path d="M551,232 C727.5,232 727.5,124.8 904,124.8 V138 C727.5,138 727.5,245.2 551,245.2 Z" class="fl"/>
<path d="M551,245.2 C727.5,245.2 727.5,202.6 904,202.6 V218 C727.5,218 727.5,260.6 551,260.6 Z" class="fl"/>
<path d="M551,260.6 C727.5,260.6 727.5,260.6 904,260.6 V276 C727.5,276 727.5,276 551,276 Z" class="fl"/>
<path d="M551,28 C727.5,28 727.5,28 904,28 V72 C727.5,72 727.5,72 551,72 Z" class="fl h"/>
<text x="177" y="14" text-anchor="middle" class="k">첫 접점</text>
<text x="544" y="14" text-anchor="middle" class="k">중간 접점</text>
<text x="911" y="14" text-anchor="middle" class="k">마지막 접점</text>
<rect x="170" y="28" width="14" height="88" rx="2" class="g4"/>
<text x="158" y="70" text-anchor="end" class="k md">검색 광고</text>
<text x="158" y="89" text-anchor="end" class="v">40%</text>
<rect x="170" y="130" width="14" height="77" rx="2" class="g4"/>
<text x="158" y="166.5" text-anchor="end" class="k md">SNS 광고</text>
<text x="158" y="185.5" text-anchor="end" class="v">35%</text>
<rect x="170" y="221" width="14" height="55" rx="2" class="g4"/>
<text x="158" y="246.5" text-anchor="end" class="k md">영상 광고</text>
<text x="158" y="265.5" text-anchor="end" class="v">25%</text>
<rect x="537" y="28" width="14" height="99" rx="2" class="g4"/>
<text x="563" y="82.5" class="v">블로그 후기 45%</text>
<rect x="537" y="141" width="14" height="77" rx="2" class="g4"/>
<text x="563" y="184.5" class="v">브랜드 검색 35%</text>
<rect x="537" y="232" width="14" height="44" rx="2" class="g4"/>
<text x="563" y="259" class="v">바로 이동 20%</text>
<rect x="904" y="28" width="14" height="110" rx="2" class="g4"/>
<text x="930" y="81" class="k md">브랜드 검색 광고</text>
<text x="930" y="100" class="v">50%</text>
<rect x="904" y="152" width="14" height="66" rx="2" class="g4"/>
<text x="930" y="183" class="k md">쇼핑 검색</text>
<text x="930" y="202" class="v">30%</text>
<rect x="904" y="232" width="14" height="44" rx="2" class="g4"/>
<text x="930" y="252" class="k md">자사몰 직접 방문</text>
<text x="930" y="271" class="v">20%</text>
<text x="544" y="294" text-anchor="middle" class="va">가장 굵은 경로: SNS 광고 → 블로그 후기 → 브랜드 검색 광고</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-path .dk-card{padding:22px 32px 20px}
.dk-path .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-path .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-path .lg span{display:flex;align-items:center;gap:6px}
.dk-path .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-path .lg i.c-a{background:var(--ac)}
.dk-path .lg i.c-w{background:var(--acw)}
.dk-path .lg i.c-s{background:var(--soft)}
.dk-path .lg i.c-g1{background:var(--g1)}
.dk-path .lg i.c-g2{background:var(--g2)}
.dk-path .lg i.c-g3{background:var(--g3)}
.dk-path .lg i.c-g4{background:var(--g4)}
.dk-path .lg i.c-o{background:none;border:2px solid var(--ac)}
.dk-path .lg i.c-e{background:var(--soft);border:1px dashed var(--g3)}
.dk-path .lg i.c-t{width:14px;height:3px;border-radius:0;background:var(--ink)}
.dk-path .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-path svg{display:block}
.dk-path svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-path svg .a{fill:var(--ac)}
.dk-path svg .aw{fill:var(--acw)}
.dk-path svg .sf{fill:var(--soft)}
.dk-path svg .g1{fill:var(--g1)}
.dk-path svg .g2{fill:var(--g2)}
.dk-path svg .g3{fill:var(--g3)}
.dk-path svg .g4{fill:var(--g4)}
.dk-path svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-path svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-path svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-path svg text.k{fill:var(--ink2)}
.dk-path svg text.v{fill:var(--ink);font-weight:600}
.dk-path svg text.va{fill:var(--ac);font-weight:700}
.dk-path svg text.on{fill:var(--card);font-weight:600}
.dk-path svg text.big{font-size:24px;font-weight:700}
.dk-path svg text.md{font-size:16px}
.dk-path svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-path svg .ln.hot{stroke:var(--ac)}
.dk-path svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-path svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-path svg .dot.m{fill:var(--g4)}
.dk-path svg .dot.s{fill:var(--g2)}
.dk-path svg .ol{fill:none;stroke:var(--ac);stroke-width:2.5}
.dk-path svg .al{stroke:var(--ac);stroke-width:1.5;fill:none}
.dk-path svg .fl{fill:var(--g1);fill-opacity:.62}
.dk-path svg .fl.h{fill:var(--acm);fill-opacity:.85}