반폭 · 구매 여정 5단계와 단계별 접점

인지부터 재구매까지 5단계마다 만나는 접점과 보는 지표를 한 줄씩. 단계 5개 고정(4개도 가능), 단계 이름 3자 이내, 접점 16자 이내, 지표 4자 이내. 보강할 단계 1개만 강조. 값 바꾸는 법: .r 하나가 한 단계. .n=번호, .k=단계 이름, 셋째 칸=접점, .g=보는 지표. 보강할 단계 하나에 class="hot".

직접 제작. 고객 여정 지도(customer journey map)의 단계와 접점 행만 추려 세로로 놓는 방식 참고.

<div class="dk dkh dkh-a-journey"><div class="dk-card"><p class="dk-lb">구매 여정 단계별 접점</p>
<div class="ls"><div class="th"><span></span><span>단계</span><span>만나는 접점</span><span>보는 지표</span></div>
<div class="r"><span class="n">1</span><span class="k">인지</span><span>숏폼 영상, 디스플레이 배너</span><span class="g">도달</span></div>
<div class="r"><span class="n">2</span><span class="k">탐색</span><span>검색 광고, 블로그 정보 글</span><span class="g">유입</span></div>
<div class="r hot"><span class="n">3</span><span class="k">비교</span><span>후기 콘텐츠, 비교 검색어 광고</span><span class="g">체류</span></div>
<div class="r"><span class="n">4</span><span class="k">구매</span><span>쇼핑 검색, 상품 상세 페이지</span><span class="g">전환</span></div>
<div class="r"><span class="n">5</span><span class="k">재구매</span><span>채널 메시지, 재방문 광고</span><span class="g">재구매</span></div>
</div>
</div></div>

.dkh-a-journey .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-journey .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-journey .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-journey .ls{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-journey .th,.dkh-a-journey .r{display:grid;grid-template-columns:24px 48px 1fr 54px;column-gap:12px;align-items:center}
.dkh-a-journey .th{flex:none;font-size:var(--f-cap);color:var(--mu);padding:0 0 7px;border-bottom:1px solid var(--line2);line-height:1.4}
.dkh-a-journey .r{flex:1;position:relative;padding:5px 0;font-size:var(--f-sm);line-height:1.45;color:var(--ink2)}
.dkh-a-journey .r::before{content:"";position:absolute;left:11.5px;top:0;bottom:0;width:1px;background:var(--line2)}
.dkh-a-journey .th + .r::before{top:50%}
.dkh-a-journey .r:last-child::before{bottom:50%}
.dkh-a-journey .n{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--card);border:1px solid var(--g2);font-size:var(--f-cap);font-weight:600;color:var(--ink2);line-height:1}
.dkh-a-journey .k{font-weight:600;color:var(--ink);white-space:nowrap}
.dkh-a-journey .g{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}
.dkh-a-journey .r.hot .n{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dkh-a-journey .r.hot .k{color:var(--ac)}
.dkh-a-journey .r.hot span:nth-child(3){color:var(--ink);font-weight:600}