크기 차등 키워드 칩 묶음

키워드 구름 대신 사용. 검색어·언급어를 의도별 2~3묶음으로 나누고 검색량에 따라 칩 크기 3단. 묶음당 칩 4~7개, 전체 20개 이내. 가장 큰 칩 하나만 강조. 값 바꾸는 법: 묶음(.gr)을 복사·삭제해 2~3개. 묶음 아이콘·이름·합계 교체. 칩은 값이 큰 순서로 놓고 크기 class: s3(묶음 내 1위) s2(중간) s1(나머지). 칩 안 숫자는 지수나 비율. 전체에서 가장 큰 칩 하나에만 hot. 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

Storytelling with Data 의 워드 클라우드 대안 논의(https://www.storytellingwithdata.com/blog), Datawrapper 차트 선택 기준(https://www.datawrapper.de/blog). 흩뿌린 글자 구름 대신 묶음과 순서가 있는 목록으로 바꾸고 크기는 3단만 쓰는 방식을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

<div class="dk dk-chips">
  <div class="dk-card">
    <div class="gr"><div class="gh"><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><div><b>정보 탐색</b><span class="num">월 검색량 지수 100</span></div></div><div class="cs"><span class="ch s3 hot">필라테스 효과<i class="num">38</i></span><span class="ch s2">필라테스 요가 차이<i class="num">21</i></span><span class="ch s2">필라테스 주 몇 회<i class="num">14</i></span><span class="ch s1">기구 필라테스<i class="num">12</i></span><span class="ch s1">필라테스 복장<i class="num">9</i></span><span class="ch s1">필라테스 초보<i class="num">6</i></span></div></div>
    <div class="gr"><div class="gh"><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="M12 3v18"/><path d="m19 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1"/><path d="m5 8 3 8a5 5 0 0 1-6 0zV7"/><path d="M7 21h10"/></svg><div><b>비교 검토</b><span class="num">월 검색량 지수 64</span></div></div><div class="cs"><span class="ch s3">필라테스 가격<i class="num">24</i></span><span class="ch s2">1대1 필라테스 비용<i class="num">15</i></span><span class="ch s2">필라테스 후기<i class="num">11</i></span><span class="ch s1">그룹 필라테스 인원<i class="num">8</i></span><span class="ch s1">필라테스 환불<i class="num">6</i></span></div></div>
    <div class="gr"><div class="gh"><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="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg><div><b>방문 직전</b><span class="num">월 검색량 지수 41</span></div></div><div class="cs"><span class="ch s3">강남역 필라테스<i class="num">17</i></span><span class="ch s2">필라테스 체험 수업<i class="num">10</i></span><span class="ch s1">필라테스 주말 예약<i class="num">8</i></span><span class="ch s1">필라테스 주차<i class="num">6</i></span></div></div>
  </div>
</div>

.dk-chips .dk-card{padding:8px 32px}
.dk-chips .gr{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.dk-chips .gr:last-child{border-bottom:0}
.dk-chips .gh{display:flex;align-items:center;gap:14px}
.dk-chips .gh .ic{width:30px;height:30px;flex:none;color:var(--g4)}
.dk-chips .gh b{display:block;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-chips .gh span{font-size:var(--f-cap);color:var(--mu)}
.dk-chips .cs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dk-chips .ch{display:inline-flex;align-items:baseline;gap:8px;background:var(--soft);color:var(--ink);border-radius:999px;font-weight:600;white-space:nowrap;line-height:1.3}
.dk-chips .ch i{font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-chips .s3{font-size:var(--f-xl);font-weight:700;padding:12px 24px}
.dk-chips .s2{font-size:var(--f-md);padding:9px 18px}
.dk-chips .s1{font-size:var(--f-sm);padding:6px 14px;color:var(--ink2)}
.dk-chips .hot{background:var(--ac);color:var(--card)}
.dk-chips .hot i{color:var(--card)}