ChartColors
원본: projects/skill-lens/design/components/ChartColors/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
차트 팔레트: 범주형 6(순서 고정), 순차형 7, 발산형 7
결과 화면 차트의 색 체계입니다. 범주형, 순차형, 발산형 세 팔레트.
쓰는 곳
직무별 준비도, 스킬 히트맵, 목표 대비 차이.
구성(화면이 넘겨줄 것)
값과 범주.
규칙
- 범주형
chart-1~6: 순서 고정, 이웃끼리 명도가 다르게. 일곱 범주 이상이면 "기타"로 묶습니다. - 순차형
chart-seq-1~7: 히트맵과 레벨 분포. 진할수록 큰 값. - 발산형
chart-div-1~7: 목표 대비 부족(산호)과 초과(보라)에만. - 차트 안의 도달, 진행, 미달은 상태색 그대로.
- 파이 차트는 범주 넷 이하일 때만. 그라데이션으로 순차 팔레트를 대신하지 않습니다.
접근성
- 색만으로 구분하지 않습니다. 범례에 단어, 선은 모양을 달리, 막대에는 라벨.
- 연한 색은 흰 바탕에서
chart-ring윤곽과 함께.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Foundations" height=330 subtitle="차트 팔레트: 범주형 6(순서 고정), 순차형 7, 발산형 7" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.g{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);max-width:720px}.lbl{font:600 12px/16px var(--font-sans);color:var(--ink-muted);margin-bottom:var(--space-2)}</style>
<div class="sl g">
<div class="sl-card sl-chart"><div class="lbl">직무별 준비도 (범주형)</div><div class="sl-chart__bars"><i class="sl-chart__bar c1" style="height:92%"></i><i class="sl-chart__bar c2" style="height:70%"></i><i class="sl-chart__bar c3" style="height:58%"></i><i class="sl-chart__bar c4" style="height:81%"></i><i class="sl-chart__bar c5" style="height:40%"></i><i class="sl-chart__bar c6" style="height:64%"></i></div><div class="sl-chart__legend"><span><i class="c1"></i>서비스 PM</span><span><i class="c2"></i>전문도 개발</span><span><i class="c3"></i>HR 운영</span><span><i class="c4"></i>발전교육</span><span><i class="c5"></i>기업문화</span><span><i class="c6"></i>기타</span></div></div>
<div class="sl-card sl-chart"><div class="lbl">스킬 준비도 (순차형, 낮음 → 높음)</div><div class="sl-chart__scale"><i style="background:var(--chart-seq-1)"></i><i style="background:var(--chart-seq-2)"></i><i style="background:var(--chart-seq-3)"></i><i style="background:var(--chart-seq-4)"></i><i style="background:var(--chart-seq-5)"></i><i style="background:var(--chart-seq-6)"></i><i style="background:var(--chart-seq-7)"></i></div><div class="lbl" style="margin-top:var(--space-4)">목표 대비 (발산형, 부족 ← 중립 → 초과)</div><div class="sl-chart__scale"><i style="background:var(--chart-div-1)"></i><i style="background:var(--chart-div-2)"></i><i style="background:var(--chart-div-3)"></i><i style="background:var(--chart-div-4)"></i><i style="background:var(--chart-div-5)"></i><i style="background:var(--chart-div-6)"></i><i style="background:var(--chart-div-7)"></i></div><div class="sl-chart__legend" style="margin-top:var(--space-3)"><span><i style="background:var(--success-fill)"></i>목표 도달</span><span><i style="background:var(--warning-fill)"></i>진행 중</span><span><i style="background:var(--danger)"></i>미달</span></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.