Heatmap
원본: projects/skill-lens/design/components/Heatmap/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
칸에 올리거나 포커스하면 행과 열 이름이 켜지고 근거와 다음 행동이 뜸(화살표로 칸 이동). 스킬이 행, 단색 순차, 칸 안 숫자. 미달 모서리, 0명 산호 테, 5명 미만 잠금 + 인원 부족, 진단 안 함 빗금 + 대시. 표로 보기 대체 제공
스킬별로 누가 어느 레벨을 가졌는지 보는 지도입니다. 스킬이 행, 직무가 열인 것이 기본이고, 칸을 누르면 그 칸의 사람으로 들어갑니다.
쓰는 곳
조직 결과의 스킬히트맵.
구성(화면이 넘겨줄 것)
스킬(행), 직무 또는 그룹(열), 칸마다 평균 레벨과 진단 인원, 요구레벨.
규칙
- 칸에 마우스를 올리거나 포커스하면 그 행과 열 이름이 켜지고, 칸 아래
sl-heat__pop에 근거(평균, 요구레벨, 미달 인원)와 다음 행동(명단 보기)이 뜹니다. 칸 이동은 화살표 키(로빙 tabindex, 코드 쪽). - 결과는 스킬 기준이 먼저입니다. 행은 스킬, 사람 단위는 칸을 누른 뒤에.
- 칸 색은 순차형(
chart-seq-*) 한 가지, 칸 안에 숫자(평균 레벨)를 늘 씁니다. - 요구레벨에 못 미치는 칸은 색이 아니라 오른쪽 위 모서리 표시(산호 삼각)로.
- 진단한 사람이 5명 미만인 그룹은 값을 숨기고 잠금 아이콘(Lucide lock) + "인원 부족"을 씁니다. 그 아래나 범례에 "5명 미만 그룹은 개인이 드러나지 않게 숨겨요" 한 줄(
dataviz.md). - 행과 열 머리는 고정. 잘린 행이 있으면 "스킬 30개 중 20개 보는 중"을 씁니다.
- 가진 사람 0명(공백스킬)은 "0명" + 산호 테(
.is-zero)이고, 다음 행동과 잇는 방법은 화면 설계에서 정합니다. 진단 안 함은 회색 빗금 + 대시(.is-none). 둘은 모양이 다릅니다(P4). - 히트맵 위에 "표로 보기"(
sl-tabs--seg)를 두어 같은 값을 표로 볼 수 있게 합니다. - 폰에서는 표 대신 스킬별 목록(스킬 → 직무별 평균 칩).
- 범례(
Legend)를 항상 함께 둡니다.
접근성
- 히트맵 전체가 Tab 한 번에 들어가는 위젯 하나(
role="grid")입니다. 안에서는 화살표로 칸을 옮기고, Home과 End로 줄 처음과 끝, Enter로 상세, Esc로 히트맵으로 돌아옵니다(코드 쪽, 확인 안 함). - 칸 읽기: "데이터 분석, 개발팀, 평균 3.9, 24명". 숨긴 칸: "협상, 개발, 5명 미만, 결과 숨김".
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=330 width=760 subtitle="칸에 올리거나 포커스하면 행과 열 이름이 켜지고 근거와 다음 행동이 뜸(화살표로 칸 이동). 스킬이 행, 단색 순차, 칸 안 숫자. 미달 모서리, 0명 산호 테, 5명 미만 잠금 + 인원 부족, 진단 안 함 빗금 + 대시. 표로 보기 대체 제공" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row2{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start}.ph{width:390px;max-width:100%}.pc{width:880px;max-width:100%}.cap{font:600 12px/16px var(--font-sans);color:var(--ink-muted);margin:0 0 6px}.ph-screen{padding:var(--space-5);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}</style><div class="sl stack"><div class="sl-tabs sl-tabs--seg" role="tablist"><button class="sl-tab" role="tab" aria-selected="true">히트맵</button><button class="sl-tab" role="tab" aria-selected="false">표로 보기</button></div><table class="sl-heat" tabindex="0" role="grid" aria-label="스킬별 평균 레벨, 검토완료 42명 기준"><thead><tr><th>스킬</th><th>영업</th><th>기획</th><th>개발</th></tr></thead><tbody>
<tr><th>데이터 분석</th><td class="l2 is-short" tabindex="0" aria-label="데이터 분석, 영업, 평균 2.4, 요구레벨 미달, 12명">2.4<span class="sl-heat__pop" role="tooltip"><b>데이터 분석 · 영업</b><br>평균 Lv 2.4(요구 Lv 3) · 12명 중 5명 미달<br><a href="#">명단 보기</a></span></td><td class="l4" tabindex="-1">3.8</td><td class="l5" aria-label="데이터 분석, 개발, 평균 4.6, 24명">4.6</td></tr>
<tr><th>협상</th><td class="l4">3.9</td><td class="l3">2.7</td><td class="is-few" aria-label="협상, 개발, 5명 미만, 결과 숨김"><svg viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>인원 부족</td></tr>
<tr><th>SQL</th><td class="is-zero" aria-label="SQL, 영업, 가진 사람 0명">0명</td><td class="l2 is-short">1.8</td><td class="l4">4.1</td></tr>
<tr><th>AI 도구 활용</th><td class="is-none" aria-label="AI 도구 활용, 영업, 진단 안 함">없음</td><td class="l3">3.1</td><td class="l4">3.7</td></tr></tbody></table><div class="sl-legend"><span class="sl-legend__ramp"><i></i>평균 레벨 1 → 5</span><span><i class="sl-legend__short"></i>요구레벨 미달</span><span><i class="sl-legend__zero"></i>가진 사람 0명</span><span><i class="sl-legend__few"></i>5명 미만(숨김)</span><span><i class="sl-legend__none"></i>진단 안 함</span></div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.