주차별 성과 추이와 조치 시점 표시

성과가 저절로 오른 것이 아니라 어떤 조치 뒤에 올랐는지 보여 주는 장면. 운영 리포트, 레퍼런스 성과 소개. 시점 8~12개, 조치 2~3개(조치 사이 최소 2칸). 선은 무채색, 마지막 값만 강조색. 값 바꾸는 법: 점 x = 64 + 85 × 순번, y = 258 − (지수 − 80) ÷ 80 × 200(축 80~160, 값에 맞게 교체). 조치 점선(class tg)은 조치한 주의 x, 위 첫 줄에 "주 · 조치 이름", 둘째 줄에 이후 변화. 이후 변화 = 다음 조치 직전(또는 마지막) 지수 − 조치 주 지수. 조치 문구끼리 겹치면 조치 이름을 줄임.

구글 애널리틱스·Looker Studio 시계열 차트의 주석(annotation) 표기와 Storytelling with Data(https://www.storytellingwithdata.com)의 "선 위에 사건을 세로선과 짧은 글로 붙이는" 방식, Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Change over Time 분류 참고. 직접 제작.

<div class="dk dk-evt">
<div class="dk-card">
<p class="ttl"><span>주차별 전환 지수 · 집행 첫 주 100 기준</span></p>
<svg width="1088" height="288" viewBox="0 0 1088 288" role="img">
<line x1="44" y1="258" x2="1010" y2="258" class="ax"/>
<text x="32" y="262" text-anchor="end">80</text>
<line x1="44" y1="158" x2="1010" y2="158" class="gr"/>
<text x="32" y="162" text-anchor="end">120</text>
<line x1="44" y1="58" x2="1010" y2="58" class="gr"/>
<text x="32" y="62" text-anchor="end">160</text>
<text x="64" y="280" text-anchor="middle">1주</text>
<text x="149" y="280" text-anchor="middle">2주</text>
<text x="234" y="280" text-anchor="middle">3주</text>
<text x="319" y="280" text-anchor="middle">4주</text>
<text x="404" y="280" text-anchor="middle">5주</text>
<text x="489" y="280" text-anchor="middle">6주</text>
<text x="574" y="280" text-anchor="middle">7주</text>
<text x="659" y="280" text-anchor="middle">8주</text>
<text x="744" y="280" text-anchor="middle">9주</text>
<text x="829" y="280" text-anchor="middle">10주</text>
<text x="914" y="280" text-anchor="middle">11주</text>
<text x="999" y="280" text-anchor="middle">12주</text>
<line x1="234" y1="40" x2="234" y2="258" class="tg"/>
<text x="234" y="14" text-anchor="middle" class="v">3주 · 소재 교체</text>
<text x="234" y="32" text-anchor="middle">이후 3주 +20</text>
<line x1="574" y1="40" x2="574" y2="258" class="tg"/>
<text x="574" y="14" text-anchor="middle" class="v">7주 · 입찰 조정</text>
<text x="574" y="32" text-anchor="middle">이후 3주 +25</text>
<line x1="829" y1="40" x2="829" y2="258" class="tg"/>
<text x="829" y="14" text-anchor="middle" class="v">10주 · 랜딩 페이지 개편</text>
<text x="829" y="32" text-anchor="middle">이후 2주 +17</text>
<polyline points="64,208 149,215.5 234,220.5 319,198 404,178 489,170.5 574,175.5 659,148 744,125.5 829,113 914,90.5 999,70.5" class="ln"/>
<circle cx="234" cy="220.5" r="5" class="dot m"/>
<circle cx="574" cy="175.5" r="5" class="dot m"/>
<circle cx="829" cy="113" r="5" class="dot m"/>
<circle cx="64" cy="208" r="4.5" class="dot m"/>
<text x="64" y="196" text-anchor="middle" class="v">100</text>
<circle cx="999" cy="70.5" r="6.5" class="dot"/>
<text x="1015" y="78.5" class="va big">155</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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