구매 여정 5단계와 단계별 매체 배치

구매까지의 단계마다 고객이 무엇을 하고, 어떤 매체를 놓고, 무슨 지표를 보는지 한 장에 정리할 때. 단계 5개 고정, 행 2~3개, 칸마다 1~2줄. 예산을 집중할 단계 하나를 강조. 값 바꾸는 법: .s=단계 머리 5개, 아래 .c 는 행 순서대로 5칸씩, .lb=행 이름. 집중할 단계 하나의 .s 와 그 열의 모든 .c 에 class="hot"(세로로 이어진 옅은 바탕). 마지막 단계 머리에 class="end".

Think with Google 의 소비자 구매 여정 자료(https://www.thinkwithgoogle.com/consumer-insights/consumer-journey/)와 McKinsey consumer decision journey 의 단계 구분. PresentationGO Chevron Arrow Process(https://presentationgo.com/?p=153533): 단계 머리 아래에 행을 맞추는 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-journey">
  <div class="lb"></div><div class="s"><span class="n num">01</span><b>인지</b><span class="ln"></span></div><div class="s"><span class="n num">02</span><b>탐색</b><span class="ln"></span></div><div class="s hot"><span class="n num">03</span><b>비교</b><span class="ln"></span></div><div class="s"><span class="n num">04</span><b>구매</b><span class="ln"></span></div><div class="s end"><span class="n num">05</span><b>재구매</b><span class="ln"></span></div>
  <div class="lb">고객 행동</div><div class="c">영상과 피드에서 처음 접함</div><div class="c">검색으로 종류와 가격 확인</div><div class="c hot">후기와 경쟁 제품 비교</div><div class="c">혜택 확인 후 결제</div><div class="c">소모 시점에 다시 주문</div>
  <div class="lb">배치 매체</div><div class="c">영상 광고, 디스플레이</div><div class="c">검색 광고, 블로그 콘텐츠</div><div class="c hot">쇼핑검색, 후기 콘텐츠</div><div class="c">리타기팅, 브랜드 검색</div><div class="c">고객 메시지, 멤버십</div>
  <div class="lb">보는 지표</div><div class="c">도달 수, 조회율</div><div class="c">클릭률, 검색량</div><div class="c hot">상세 조회, 장바구니</div><div class="c">전환 건수, 전환 단가</div><div class="c">재구매율, 주기</div>
</div>

.dk-journey{display:grid;grid-template-columns:96px repeat(5,minmax(0,1fr))}
.dk-journey .s{display:flex;align-items:center;gap:10px;padding:14px 0 14px 20px;border-radius:var(--r-sm) var(--r-sm) 0 0}
.dk-journey .s .n{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-journey .s b{font-size:var(--f-xl);font-weight:700;line-height:1.3}
.dk-journey .ln{flex:1;height:1px;background:var(--line2);position:relative;margin:0 2px 0 4px}
.dk-journey .ln::after{content:"";position:absolute;right:1px;top:50%;width:7px;height:7px;border-top:1px solid var(--line2);border-right:1px solid var(--line2);transform:translateY(-50%) rotate(45deg)}
.dk-journey .s.end .ln{visibility:hidden}
.dk-journey .lb{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding:18px 0;border-top:1px solid var(--line)}
.dk-journey .lb:first-child{border:0}
.dk-journey .c{font-size:var(--f-body);color:var(--ink2);padding:17px 20px;border-top:1px solid var(--line);min-height:86px}
.dk-journey .hot{background:var(--acw)}
.dk-journey .s.hot b,.dk-journey .s.hot .n{color:var(--ac)}
.dk-journey .c.hot{color:var(--ink);font-weight:600}
.dk-journey .c.hot:nth-last-child(-n+5){border-radius:0 0 var(--r-sm) var(--r-sm)}