Delta

원본: projects/skill-lens/design/components/Delta/README.md

상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗

부족, 충족, 증감: 부호 + 단어

견본만 새 창으로

요구 대비 부족과 지난 회차 대비 증감을 짧게 보입니다. 부호와 단어가 색보다 먼저입니다.

쓰는 곳

스킬 GAP 표, 개인 결과, 회차 비교.

구성(화면이 넘겨줄 것)

값과 종류(부족, 충족, 증가, 감소, 새로, 진단 안 함).

규칙

• 부족은 "−1단계 부족"(산호), 충족은 "충족"(초록), 증감은 "▲3"과 "▼2", 처음 생긴 것은 "새로".
• 진단하지 않은 스킬은 0이 아니라 "진단 안 함"(회색). 0과 없음을 섞지 않습니다.
• 숫자는 tabular-nums, 부호를 늘 붙입니다.

접근성

• 색이 아니라 부호와 단어로 읽힙니다.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Display" height=140 subtitle="부족, 충족, 증감: 부호 + 단어" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}</style>
<div class="sl stack">
<div class="wrap"><span class="sl-delta sl-delta--short">−1단계 부족</span><span class="sl-delta sl-delta--met">충족</span><span class="sl-delta sl-delta--up">▲ 3</span><span class="sl-delta sl-delta--down">▼ 2</span><span class="sl-delta">진단 안 함</span></div>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.