GlassFrame
원본: projects/skill-lens/design/components/GlassFrame/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
상단 바 60px과 하단 띠 80px. 유리는 틀에만 씁니다
위 바와 아래 띠를 유리로 만드는 틀 재료입니다. 원본은 8판 .fpc .top, .band, .wm .lt.
쓰는 곳
Shell의 위와 아래.
구성(화면이 넘겨줄 것)
워드마크, 진행 점, 가이드와 사용자, 아래 띠의 버튼 둘과 이유 한 줄.
규칙
- 유리(
glass+ 블러 20)는 틀에만. - 워드마크 앞 마크는 30 연보라 타일 안 마크 26(
sl-topbar__mark). - 위 바 오른쪽 글은 13 회색, 아래 띠 이유는 13 회색.
- 온보딩 화면의 버튼은 둘까지(이전 + 주 버튼), 나머지는 링크.
접근성
- 유리 위 작은 글의 대비는 바탕
canvas기준 4.5:1 이상.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=300 subtitle="상단 바 60px과 하단 띠 80px. 유리는 틀에만 씁니다" -->
<style>body{margin:0;padding:var(--space-4);background:var(--gradient-canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.stack--w{max-width:720px}.deco{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 20% 30%,rgba(99,102,241,.14),transparent 70%),radial-gradient(40% 40% at 85% 80%,rgba(182,255,117,.25),transparent 70%)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);font:400 14px/22px var(--font-sans);color:var(--ink-muted)}</style>
<div class="deco"></div>
<div class="sl stack stack--w">
<div class="sl-glass sl-topbar"><span class="sl-topbar__brand"><i class="sl-topbar__mark"></i>SkillLens</span><span class="sl-topbar__step">2/5 직무</span><span class="sl-topbar__spacer"></span><span class="sl-topbar__step">가이드</span><span class="sl-topbar__step">정호준 님</span></div>
<div class="card">가운데 내용은 흰 카드(surface-raised)에 둡니다. 표·폼·목록은 유리를 쓰지 않습니다.</div>
<div class="sl-glass sl-band"><button class="sl-btn sl-btn--secondary">이전</button><span class="sl-band__reason">확인할 직무가 5개 남았어요</span><button class="sl-btn sl-btn--primary">직무확인 →</button></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.