StateGlyph
원본: projects/skill-lens/design/components/StateGlyph/README.md
상태: Experimental, 접근성 ✓(장식), 다크 ✓, 코드 ✗
렌즈 기하 하나로 그리는 상태 6종: 빈 상태, 찾는 중, 대기, 완료, 오류, 권한 없음
빈 상태, 오류, 권한, 대기, 완료, 찾는 중을 렌즈 두 장의 기하로만 그린 그림 여섯입니다.
쓰는 곳
EmptyState, 오류 화면, 권한 없음.
구성(화면이 넘겨줄 것)
상태 이름 하나.
규칙
- 64 기본, 48과 96 허용. 선 1.5.
- 빈 = 벌어짐, 찾는 중 = 앞 렌즈가 훑음, 대기 = 흐린 렌즈 + 시계, 완료 = 포개짐, 오류 = 산호 금, 권한 없음 = 자물쇠.
- 사람, 손, 마스코트, 이모지를 그리지 않습니다.
접근성
- 그림은
aria-hidden. 옆에 늘 문장이 있습니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Foundations" height=250 subtitle="렌즈 기하 하나로 그리는 상태 6종: 빈 상태, 찾는 중, 대기, 완료, 오류, 권한 없음" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.g{display:flex;gap:var(--space-3);flex-wrap:wrap}.c{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:112px;padding:var(--space-4) var(--space-2);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--border),var(--shadow-card)}.l{font:600 12px/16px var(--font-sans);color:var(--ink-muted);text-align:center}</style>
<div class="sl g">
<div class="c"><svg class="sl-glyph" viewBox="0 0 64 64"><g transform="rotate(28 32 32)"><ellipse class="a" cx="20" cy="32" rx="13" ry="16"/><ellipse class="b" cx="44" cy="32" rx="13" ry="16"/></g></svg><div class="l">빈 상태<br>벌어진 두 렌즈</div></div>
<div class="c"><svg class="sl-glyph sl-glyph--searching" viewBox="0 0 64 64"><g transform="rotate(28 32 32)"><ellipse class="a" cx="26" cy="32" rx="13" ry="16"/><ellipse class="b" cx="38" cy="32" rx="13" ry="16"/></g></svg><div class="l">찾는 중<br>앞 렌즈가 훑음</div></div>
<div class="c"><svg class="sl-glyph" viewBox="0 0 64 64"><g transform="rotate(28 32 32)"><ellipse class="muted" cx="26" cy="32" rx="13" ry="16"/><ellipse class="b" cx="38" cy="32" rx="13" ry="16" style="stroke:var(--border-strong)"/></g><path class="ink" d="M32 20v12l7 5"/></svg><div class="l">대기<br>흐린 렌즈 + 시계</div></div>
<div class="c"><svg class="sl-glyph" viewBox="0 0 64 64"><g transform="rotate(28 32 32)"><ellipse class="a" cx="28" cy="32" rx="13" ry="16"/><ellipse class="b" cx="36" cy="32" rx="13" ry="16"/></g></svg><div class="l">완료<br>포개짐</div></div>
<div class="c"><svg class="sl-glyph" viewBox="0 0 64 64"><g transform="rotate(28 32 32)"><ellipse class="a" cx="26" cy="32" rx="13" ry="16"/><ellipse class="b" cx="38" cy="32" rx="13" ry="16"/></g><path class="coral" d="M30 20l4 9-6 6 5 9"/></svg><div class="l">오류<br>렌즈에 코랄 금</div></div>
<div class="c"><svg class="sl-glyph" viewBox="0 0 64 64"><g transform="rotate(28 32 32)"><ellipse class="muted" cx="26" cy="32" rx="13" ry="16"/><ellipse class="b" cx="38" cy="32" rx="13" ry="16" style="stroke:var(--border-strong)"/></g><path class="ink" d="M25 34v-5a7 7 0 0 1 14 0v5"/><rect x="22" y="34" width="20" height="13" rx="3" fill="none" stroke="var(--ink)" stroke-width="1.5"/></svg><div class="l">권한 없음<br>잠긴 렌즈</div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.