채널 간 흐름(유입 → 전환 → 재구매)

여러 유입 채널이 어느 전환 지점으로 모이고 다시 재구매로 이어지는지 선으로 보여줄 때. 유입 4개, 전환 2개, 재구매 2개 고정. 가장 굵게 보여줄 경로 하나만 강조. 값 바꾸는 법: 세 묶음 .col.a(유입 4), .col.b(전환 2), .col.c(재구매 2)의 .nd 문구 교체. 선은 svg path: 유입 i → 전환 연결은 path 의 끝 y 값(전환 1 = 85, 전환 2 = 255)으로 바꾼다. 주력 경로 하나의 path 와 그 위 .nd 에 class="hot".

slideworks.io 컨설팅 장표 해설(https://slideworks.io/templates/consulting-powerpoint-templates): 고정 격자, 여백, 강조색을 핵심 한 곳에만 쓰는 방식. Financial Times Visual Vocabulary 의 흐름(flow, sankey) 표현(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary): 주 경로만 색과 굵기로 구분. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-flow">
  <div class="hd"><span>유입</span><span>전환</span><span>재구매</span></div>
  <div class="g">
  <svg width="1152" height="340" viewBox="0 0 1152 340" aria-hidden="true"><path class="" d="M310,127 C375,127 375,85 440,85"/><path class="" d="M310,212 C375,212 375,255 440,255"/><path class="" d="M310,297 C375,297 375,255 440,255"/><path class="" d="M730,85 C795,85 795,255 860,255"/><path class="" d="M730,255 C795,255 795,85 860,85"/><path class="" d="M730,255 C795,255 795,255 860,255"/><path class="hot" d="M310,42 C375,42 375,85 440,85"/><path class="hot" d="M730,85 C795,85 795,85 860,85"/></svg>
  <div class="col a"><div class="nd hot" style="top:6px"><h3>검색 광고</h3><p>의도가 분명한 유입</p><span class="v num">유입의 42%</span></div><div class="nd" style="top:91px"><h3>SNS 광고</h3><p>관심사 기반 신규 유입</p><span class="v num">유입의 31%</span></div><div class="nd" style="top:176px"><h3>디스플레이</h3><p>방문 이력 대상 재접촉</p><span class="v num">유입의 18%</span></div><div class="nd" style="top:261px"><h3>제휴, 콘텐츠</h3><p>후기와 추천 경유</p><span class="v num">유입의 9%</span></div></div>
  <div class="col b"><div class="nd hot" style="top:49px"><h3>상품 상세페이지</h3><p>단품 구매, 전환율 지수 100</p></div><div class="nd" style="top:219px"><h3>기획전 페이지</h3><p>묶음 구매, 전환율 지수 135</p></div></div>
  <div class="col c"><div class="nd hot" style="top:49px"><h3>고객 메시지</h3><p>구매 30일 뒤 재구매 안내</p></div><div class="nd" style="top:219px"><h3>멤버십</h3><p>등급 혜택으로 주기 단축</p></div></div>
  </div>
</div>

.dk-flow .hd{display:grid;grid-template-columns:440px 420px minmax(0,1fr);margin-bottom:8px}
.dk-flow .hd span{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding-bottom:8px;border-bottom:1px solid var(--line2);margin-right:130px}
.dk-flow .hd span:last-child{margin-right:0}
.dk-flow .g{position:relative;height:340px}
.dk-flow svg{position:absolute;left:0;top:0}
.dk-flow path{fill:none;stroke:var(--line2);stroke-width:1.5}
.dk-flow path.hot{stroke:var(--ac);stroke-width:2.5}
.dk-flow .col{position:absolute;top:0;height:340px}
.dk-flow .col.a{left:0;width:310px}
.dk-flow .col.b{left:440px;width:290px}
.dk-flow .col.c{left:860px;width:292px}
.dk-flow .nd{position:absolute;left:0;right:0;height:60px;margin-top:6px;display:flex;flex-direction:column;justify-content:center;padding:0 18px}
.dk-flow .col.a .nd{border-right:2px solid var(--g2);padding-left:0}
.dk-flow .col.b .nd{border-left:2px solid var(--g2);border-right:2px solid var(--g2)}
.dk-flow .col.c .nd{border-left:2px solid var(--g2)}
.dk-flow .col.a .nd{padding-right:110px}
.dk-flow h3{font-size:var(--f-md);font-weight:700;margin:0;line-height:1.35}
.dk-flow p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-flow .v{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-flow .col .nd.hot{border-color:var(--ac)}
.dk-flow .nd.hot h3{color:var(--ac)}