디자인킷 · 인포그래픽
100칸 비율 3개
D-인포그래픽-백칸비율
언제 쓰는가
63%처럼 10% 단위로 떨어지지 않는 비율을 세어 볼 수 있게. 100칸 중 값만큼 채움. 판 3개(2개도 가능). 서로 다른 집단·채널의 같은 지표를 비교. 값 바꾸는 법: 칸은 i 100개, 값만큼 앞에서부터 class="on"(아래 줄부터 채워짐). 숫자, 아이콘, 항목명, 설명 한 줄 교체. 강조 판 하나에만 class="hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.
참고
Visualizing.org Icon Array(https://www.visualizing.org/icon-array), Domo Pictogram Chart Best Practices(https://domo-webflow.domo.com/learn/charts/pictogram-chart), Financial Times Visual Vocabulary 의 Part-to-whole 분류 중 gridplot(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary). 10칸으로는 63% 같은 값을 못 나타낸다는 지적에 따라 100칸 단위 격자로 구성. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).
조각
<div class="dk dk-waffle2"> <div class="dk-card wf hot"><p class="h"><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><b>모바일 검색</b></p><div class="bx"><div class="cells"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="tx"><p class="v"><span class="num">63</span><i>%</i></p><p class="nt">전체 유입 100건 중 63건</p></div></div></div> <div class="dk-card wf"><p class="h"><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="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg><b>PC 검색</b></p><div class="bx"><div class="cells"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="tx"><p class="v"><span class="num">22</span><i>%</i></p><p class="nt">평일 업무 시간대 집중</p></div></div></div> <div class="dk-card wf"><p class="h"><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="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg><b>SNS 유입</b></p><div class="bx"><div class="cells"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="tx"><p class="v"><span class="num">15</span><i>%</i></p><p class="nt">숏폼 게시 직후 2일간 집중</p></div></div></div> </div>
스타일
.dk-waffle2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dk-waffle2 .wf{padding:26px 28px 28px}
.dk-waffle2 .h{margin:0 0 20px;display:flex;align-items:center;gap:10px;font-size:var(--f-lg);padding-bottom:16px;border-bottom:1px solid var(--line)}
.dk-waffle2 .h b{font-weight:700}
.dk-waffle2 .h .ic{width:26px;height:26px;color:var(--g4)}
.dk-waffle2 .bx{display:flex;gap:22px;align-items:flex-end}
.dk-waffle2 .cells{flex:none;display:grid;grid-template-columns:repeat(10,15px);gap:3px;transform:scaleY(-1)}
.dk-waffle2 .cells i{width:15px;height:15px;border-radius:3px;background:var(--g1)}
.dk-waffle2 .cells i.on{background:var(--g4)}
.dk-waffle2 .v{margin:0;line-height:1}
.dk-waffle2 .v .num{font-size:var(--f-big);font-weight:700;letter-spacing:-.04em}
.dk-waffle2 .v i{font-style:normal;font-size:var(--f-lg);font-weight:700;margin-left:2px}
.dk-waffle2 .nt{margin:10px 0 0;font-size:var(--f-sm);color:var(--mu)}
.dk-waffle2 .hot .cells i.on{background:var(--ac)}
.dk-waffle2 .hot .v{color:var(--ac)}
.dk-waffle2 .hot .h .ic{color:var(--ac)}