페르소나 카드 2인

주 타깃과 보조 타깃을 나란히 정의할 때. 카드 2장. 카드마다 아이콘 초상, 유형 이름, 인구 정보, 특징 3개(아이콘 포함), 실제 검색어 3~4개. 값 바꾸는 법: 유형 이름(h3), 인구 정보(.dm), 특징 3개(아이콘 + 한 줄 문장), 검색어 칩 3~4개 교체. 주 타깃 카드 하나에만 class="hot". 특징은 관찰 가능한 행동으로 쓰고 2줄을 넘기지 않음. 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

템플릿 사이트의 사용자 페르소나 슬라이드 일반 구성, infoDiagram Flat Infographics Template(https://www.infodiagram.com/diagrams/infographics-template-ppt-presentation-flat). 초상 자리를 왼쪽에, 특징을 아이콘 목록으로, 행동 단서를 칩으로 두는 구성을 참고. 사진 대신 아이콘 초상 사용. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-persona">
  <div class="dk-card p hot"><div class="pt"><span class="av"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg></span><span class="tg">주 타깃</span></div><div class="bd"><h3>퇴근길 비교 탐색형</h3><p class="dm">30대 직장인 · 수도권 · 1~2인 가구</p><ul><li><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg><span>평일 19시 이후 모바일로 검색, 후보 세 곳 저장</span></li><li><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg><span>평점보다 최근 한 달 후기 내용을 우선 확인</span></li><li><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/></svg><span>가격 차이 10% 이내면 가까운 곳 선택</span></li></ul><div class="kw"><span class="kl"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>검색어</span><i>강남역 필라테스 후기</i><i>필라테스 1대1 가격</i><i>직장인 저녁 운동</i></div></div></div>
  <div class="dk-card p"><div class="pt"><span class="av"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg></span><span class="tg">보조 타깃</span></div><div class="bd"><h3>주말 상담 예약형</h3><p class="dm">40대 자영업자 · 수도권 · 3~4인 가구</p><ul><li><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2a9 9 0 0 1 9 9"/><path d="M13 6a5 5 0 0 1 5 5"/><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg><span>검색 뒤 바로 전화. 예약 버튼보다 통화 선호</span></li><li><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg><span>가족·지인 추천을 먼저 듣고 검색으로 확인</span></li><li><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v3"/><path d="M16 2v3"/><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="m9 15 2 2 4-4"/></svg><span>주말 오전 방문 가능 여부가 선택 기준</span></li></ul><div class="kw"><span class="kl"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>검색어</span><i>허리 통증 운동 추천</i><i>주말 필라테스 예약</i><i>중년 체형 교정</i></div></div></div>
</div>

.dk-persona{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dk-persona .p{padding:28px 30px;display:grid;grid-template-columns:104px minmax(0,1fr);gap:26px}
.dk-persona .pt{display:flex;flex-direction:column;align-items:center;gap:12px}
.dk-persona .av{width:104px;height:104px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--g4)}
.dk-persona .av .ic{width:56px;height:56px}
.dk-persona .tg{font-size:var(--f-cap);font-weight:600;color:var(--mu);border:1px solid var(--line2);border-radius:999px;padding:3px 12px}
.dk-persona h3{margin:0;font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.dk-persona .dm{margin:4px 0 14px;font-size:var(--f-sm);color:var(--mu)}
.dk-persona ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.dk-persona li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dk-persona li .ic{width:20px;height:20px;flex:none;color:var(--g3);margin-top:1px}
.dk-persona .kw{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;align-items:center}
.dk-persona .kl{flex-basis:100%;display:flex;align-items:center;gap:5px;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-right:4px}
.dk-persona .kl .ic{width:15px;height:15px}
.dk-persona .kw i{font-style:normal;font-size:var(--f-cap);color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);padding:4px 9px}
.dk-persona .hot .av{background:var(--acw);color:var(--ac)}
.dk-persona .hot .tg{color:var(--ac);border-color:var(--acm)}