Legend
원본: projects/skill-lens/design/components/Legend/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
범례: 색과 모양을 같이. 히트맵 상태 다섯
차트와 히트맵의 색, 모양, 기호가 무엇을 뜻하는지 보이는 줄입니다.
쓰는 곳
모든 차트와 히트맵 바로 위나 아래.
구성(화면이 넘겨줄 것)
항목(견본, 이름), (선택) 읽는 법 한 줄.
규칙
- 차트가 있으면 범례는 늘 같이 둡니다.
- 순차형은 왼쪽 낮음, 오른쪽 높음의 띠 하나로.
- 기호(미달 모서리, 5명 미만, 없음)도 범례에 넣습니다.
접근성
- 견본은 장식, 이름 글이 뜻을 전합니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=110 subtitle="범례: 색과 모양을 같이. 히트맵 상태 다섯" -->
<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-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/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.