비교 저울(좌우 무게)

두 방안의 근거 개수나 무게를 견줄 때. 현재 방식과 제안 방식, 유지와 전환. 좌우 항목 각 2~4개. 무거운 쪽(권하는 쪽)이 아래로 기울고 그쪽만 강조. 값 바꾸는 법: 좌우 제목과 "근거 n", 항목(아이콘·굵은 한 줄·보조 한 줄) 교체. 저울 위 추(rect.wt 왼쪽, rect.wa 오른쪽) 개수를 근거 수와 맞춤: 추 한 개는 폭 19·높이 13, 가로 간격 23, 한 층 위는 y 를 16 줄임. 왼쪽이 무거운 경우는 svg 에 style="transform:scaleX(-1)" 를 주고 좌우 목록의 강조를 맞바꿈. 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

SlideModel Performance Comparison 템플릿 분류(https://slidemodel.com/templates/tag/performance-comparison/), PresentationGO 비교 인포그래픽(https://www.presentationgo.com/?p=185782). 가운데 저울, 좌우 근거 목록, 무거운 쪽만 색을 주는 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-scale">
  <div class="sd l"><p class="hd2"><b>현재 방식</b><span class="num">근거 2</span></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.744 17.736a6 6 0 1 1-7.48-7.48"/><path d="M15 6h1v4"/><path d="m6.134 14.768.866-.5 2 3.464"/><circle cx="16" cy="8" r="6"/></svg><span><b>초기 비용 없음</b>기존 계정 그대로 운영</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"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span><b>전환 기간 불필요</b>학습 기간 손실 없음</span></li></ul></div>
  <svg class="bal" viewBox="0 0 320 250" width="320" height="250" role="img" aria-label="오른쪽으로 기운 저울">
    <line class="g" x1="160" y1="60" x2="160" y2="218"/><line class="g base" x1="108" y1="220" x2="212" y2="220"/>
    <g transform="rotate(8 160 60)"><line class="g beam" x1="40" y1="60" x2="280" y2="60"/></g>
    <circle class="pv" cx="160" cy="60" r="7"/>
    <path class="g thin" d="M41.2 43.3 11 113M41.2 43.3 71 113"/><path class="g" d="M5 113h72a36 18 0 0 1-72 0z"/>
    <rect class="wt" x="20" y="97" width="19" height="13" rx="2"/><rect class="wt" x="43" y="97" width="19" height="13" rx="2"/>
    <path class="a thin" d="M278.8 76.7 249 147M278.8 76.7 309 147"/><path class="a" d="M243 147h72a36 18 0 0 1-72 0z"/>
    <rect class="wa" x="258" y="131" width="19" height="13" rx="2"/><rect class="wa" x="281" y="131" width="19" height="13" rx="2"/><rect class="wa" x="258" y="115" width="19" height="13" rx="2"/><rect class="wa" x="281" y="115" width="19" height="13" rx="2"/>
  </svg>
  <div class="sd r dk-card"><p class="hd2"><b>제안 방식</b><span class="num">근거 4</span></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="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></svg><span><b>전환 기준 재정의</b>문의·예약을 구분해 측정</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="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg><span><b>낭비 키워드 차단</b>검색어 보고서 주 1회 정리</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="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg><span><b>소재 교체 주기 단축</b>월 1회에서 2주 1회로</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="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M8 18v-1"/><path d="M12 18v-6"/><path d="M16 18v-3"/></svg><span><b>보고 일원화</b>채널별 보고서를 하나로</span></li></ul></div>
</div>

.dk-scale{display:grid;grid-template-columns:minmax(0,1fr) 320px minmax(0,1.12fr);gap:28px;align-items:center}
.dk-scale .sd.l{padding:0 0 0 8px}
.dk-scale .sd.r{padding:24px 28px}
.dk-scale .hd2{margin:0;display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.dk-scale .hd2 b{font-size:var(--f-lg);font-weight:700}
.dk-scale .hd2 span{font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-scale ul{list-style:none;margin:0;padding:0}
.dk-scale li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);color:var(--mu)}
.dk-scale li:last-child{border-bottom:0}
.dk-scale li .ic{width:24px;height:24px;flex:none;color:var(--g4);margin-top:2px}
.dk-scale li b{display:block;font-size:var(--f-body);color:var(--ink)}
.dk-scale .r .hd2 b,.dk-scale .r .hd2 span{color:var(--ac)}
.dk-scale .bal{display:block}
.dk-scale .bal .g{fill:none;stroke:var(--g3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dk-scale .bal .beam{stroke-width:4}
.dk-scale .bal .base{stroke-width:6}
.dk-scale .bal .thin{stroke-width:1.5}
.dk-scale .bal .a{fill:none;stroke:var(--ac);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dk-scale .bal .pv{fill:var(--g4)}
.dk-scale .bal .wt{fill:var(--g2)}
.dk-scale .bal .wa{fill:var(--ac)}