수치 매트릭스(행 × 열 값, 농도 3단)

행(질문군·연령·페르소나) × 열(채널·매체·단계)의 칸에 숫자를 넣고 값의 크기를 농도 3단으로 칠하는 교차표. 최댓값 칸 하나만 강조색. 질문군 × 채널 점유, 연령 × 매체, 수단 × 평가에 사용. 행 3~6개, 값 열 4~7개(앞쪽 기준 열 0~2개 별도), 칸 값은 숫자 또는 4자 이내. 값 바꾸는 법: 칸마다 숫자와 span 의 class 교체: d0(낮음) / d1(중간) / d2(높음) / mx(최댓값 1칸만). 구간 기준은 범례 문구와 함께 조정. 앞쪽 기준 열(검색어 수, 검색 요약 표시)이 필요 없으면 col·th·td 를 함께 삭제하고 값 열을 7개까지 늘림. 묶음 머리(th.grp)의 colspan 을 값 열 수에 맞춤. 예시 수치는 채널 합계가 20이 되게 만든 가정값.

값의 크기를 칸 농도로 보이는 교차표는 Financial Times Visual Vocabulary 의 heatmap 항목 https://ft-interactive.github.io/visual-vocabulary/ 과 Stephen Few 의 highlight table 설명 참고. 최댓값 하나만 강조색으로 두는 처리와 코드는 직접 제작.

<div class="dk dk-nmx"><div class="dk-card"><table>
<colgroup><col style="width:170px"><col style="width:110px"><col style="width:130px"><col><col><col><col><col></colgroup>
<thead><tr><th rowspan="2">질문군</th><th rowspan="2" class="n">검색어 수</th><th rowspan="2" class="n">검색 요약 표시</th><th colspan="5" class="grp">상위 20개 글의 채널별 글 수</th></tr>
<tr><th class="c">블로그</th><th class="c">카페</th><th class="c">지식iN</th><th class="c">영상</th><th class="c">공식 페이지</th></tr></thead>
<tbody>
<tr><td class="k">대표·브랜드</td><td class="n num">6개</td><td class="n num">4개</td><td class="c"><span class="d1 num">5</span></td><td class="c"><span class="d0 num">2</span></td><td class="c"><span class="d0 num">1</span></td><td class="c"><span class="d1 num">3</span></td><td class="c"><span class="d2 num">9</span></td></tr>
<tr><td class="k">가격·조건</td><td class="n num">8개</td><td class="n num">6개</td><td class="c"><span class="d2 num">9</span></td><td class="c"><span class="d1 num">5</span></td><td class="c"><span class="d1 num">3</span></td><td class="c"><span class="d0 num">1</span></td><td class="c"><span class="d0 num">2</span></td></tr>
<tr><td class="k">방법·절차</td><td class="n num">10개</td><td class="n num">9개</td><td class="c"><span class="mx num">11</span></td><td class="c"><span class="d0 num">2</span></td><td class="c"><span class="d1 num">4</span></td><td class="c"><span class="d1 num">3</span></td><td class="c"><span class="d0 num">0</span></td></tr>
<tr><td class="k">지역·시즌</td><td class="n num">6개</td><td class="n num">2개</td><td class="c"><span class="d2 num">7</span></td><td class="c"><span class="d2 num">8</span></td><td class="c"><span class="d0 num">1</span></td><td class="c"><span class="d0 num">2</span></td><td class="c"><span class="d0 num">2</span></td></tr>
</tbody></table></div>
<p class="lg"><span class="d0">0~2</span><span class="d1">3~6</span><span class="d2">7 이상</span><span class="mx">최댓값</span><em>글 수는 콘텐츠 공급량의 대리지표. 조사일 기준 가정값</em></p></div>

.dk-nmx{display:flex;flex-direction:column;gap:14px}
.dk-nmx .dk-card{padding:18px 24px 14px}
.dk-nmx table{width:100%;border-collapse:collapse;table-layout:fixed}
.dk-nmx th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:4px 10px 8px;vertical-align:bottom}
.dk-nmx thead tr:last-child th,.dk-nmx th[rowspan]{border-bottom:1px solid var(--line2)}
.dk-nmx th.grp{text-align:center;color:var(--ink);border-bottom:1px solid var(--line)}
.dk-nmx .n{text-align:right}
.dk-nmx .c{text-align:center}
.dk-nmx td{padding:7px 5px;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink2)}
.dk-nmx td.k,.dk-nmx td.n{padding-left:10px;padding-right:10px}
.dk-nmx tbody tr:last-child td{border-bottom:0}
.dk-nmx td.k{font-weight:700;color:var(--ink);font-size:var(--f-md)}
.dk-nmx td span{display:block;line-height:48px;border-radius:var(--r-sm);font-size:var(--f-lg);font-weight:600}
.dk-nmx .d0{background:var(--soft);color:var(--mu)}
.dk-nmx .d1{background:var(--g1);color:var(--ink)}
.dk-nmx .d2{background:var(--g2);color:var(--ink)}
.dk-nmx .mx{background:var(--ac);color:var(--card)}
.dk-nmx .lg{margin:0;display:flex;align-items:center;gap:8px}
.dk-nmx .lg span{font-size:var(--f-cap);padding:2px 12px;border-radius:var(--r-sm)}
.dk-nmx .lg em{font-style:normal;font-size:var(--f-cap);color:var(--mu);margin-left:10px}