스윔레인(줄 3개 × 단계 4개)

대상이 다른 3집단의 여정을 같은 단계 4개에 맞춰 줄로 나눠 보이는 도식. 연령대별 구매 여정, 페르소나별 접점, 담당 주체별 업무 흐름에 사용. 줄 3개 × 단계 4개 고정, 칸 문구 2줄(약 22자). 주력 줄 1개 강조. 값 바꾸는 법: 단계 이름 4개(div.row.top 의 b), 줄 3개(집단 b, 꼬리말 span, 칸 p 4개) 교체. 주력 집단 줄에 class="row hot". 예시 칸 문구는 생명보험 부품의 사실(연령대별 상품, 대면 설계사 의존, 면책·감액기간, 철회기간 15일)을 단계에 배치한 것으로 광고주 조사 결과로 교체.

대상별로 줄을 나눈 여정 표기는 서비스 디자인의 customer journey map·swimlane diagram 관행과 SlideModel 의 swimlane 템플릿 묶음 https://slidemodel.com/templates/tag/swimlane/ 참고. 직접 제작.

<div class="dk dk-swim">
<div class="row top"><span></span><b>인지</b><b>고려</b><b>상담</b><b>가입</b></div>
<div class="row"><div class="l"><b>20대</b><span>암보험</span></div><p>영상·SNS에서 암보험 필요성 접촉</p><p>진단금보다 치료비 실질보장 비교</p><p>온라인으로 상담 신청</p><p>설계사 대면 상담 후 청약</p></div>
<div class="row hot"><div class="l"><b>30대</b><span>중복보장 점검</span></div><p>기존 가입 내역 중복 여부 의문</p><p>보장범위 비교 검색, 브랜드 검색</p><p>면책·감액기간 안내 확인 후 상담</p><p>설계사 대면 상담 후 청약</p></div>
<div class="row"><div class="l"><b>40대</b><span>종신보험</span></div><p>가족 계기로 필요성 인식</p><p>보험사 3층 구조에서 후보 압축</p><p>상품정책 차이 확인 후 상담</p><p>청약, 철회기간 15일 안내</p></div>
</div>

.dk-swim{display:flex;flex-direction:column;gap:10px}
.dk-swim .row{display:grid;grid-template-columns:150px repeat(4,minmax(0,1fr));gap:10px;align-items:stretch}
.dk-swim .top b{position:relative;font-size:var(--f-sm);font-weight:700;color:var(--ink);background:var(--g1);padding:8px 16px;line-height:1.4}
.dk-swim .top b:nth-child(2){border-radius:var(--r-sm) 0 0 var(--r-sm)}
.dk-swim .top b:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.dk-swim .top b+b::before{content:"›";position:absolute;left:-10px;top:50%;width:10px;text-align:center;transform:translateY(-50%);color:var(--g3);font-weight:400}
.dk-swim .l{display:flex;flex-direction:column;justify-content:center;padding-right:8px}
.dk-swim .l b{font-size:var(--f-xl);font-weight:700;line-height:1.25}
.dk-swim .l span{font-size:var(--f-sm);color:var(--mu)}
.dk-swim .row p{margin:0;min-height:92px;display:flex;align-items:center;background:var(--card);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:12px 16px;font-size:var(--f-body);color:var(--ink2);line-height:1.45}
.dk-swim .hot .l b{color:var(--ac)}
.dk-swim .hot p{background:var(--acw);box-shadow:none;color:var(--ink)}