Heatmap
원본: projects/skill-lens/design/components/Heatmap/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
스킬이 행, 단색 순차, 칸 안 숫자. 미달 모서리, 0명 산호 테, 5명 미만 잠금 + 인원 부족, 진단 안 함 빗금 + 대시. 표로 보기 대체 제공
스킬별로 누가 어느 레벨을 가졌는지 보는 지도입니다. 스킬이 행, 직무가 열인 것이 기본이고, 칸을 누르면 그 칸의 사람으로 들어갑니다.
쓰는 곳
조직 결과의 스킬히트맵.
구성(화면이 넘겨줄 것)
스킬(행), 직무 또는 그룹(열), 칸마다 평균 레벨과 진단 인원, 요구레벨.
규칙
- 결과는 스킬 기준이 먼저입니다. 행은 스킬, 사람 단위는 칸을 누른 뒤에.
- 칸 색은 순차형(
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명 미만, 결과 숨김".
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.