Shell
원본: projects/skill-lens/design/components/Shell/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
온보딩 틀(8판 jobs~0): 위 바 60(워드마크, 진행 점 420, 가이드), 가운데 카드 880(둥글기 24, 안쪽 32, 사이 24), 아래 띠 80. 폰은 위 56, 흰 본문, 아래 고정 버튼
온보딩과 진단 화면의 바깥 틀입니다. 원본은 8판 .fpc(PC)와 .fph(폰).
쓰는 곳
온보딩, 실무자 진단.
구성(화면이 넘겨줄 것)
위 바(워드마크, 진행 점, 가이드, 사용자), 카드 내용, 아래 띠의 이전, 이유 한 줄, 주 버튼.
규칙
- PC 위 바 60(좌우 72, 유리, 아래 1px 선): 왼쪽 워드마크(
sl-topbar__brand), 가운데 진행 점 420(sl-topbar__progress, 단계 글은 숨김), 오른쪽 가이드와 사용자(sl-topbar__end, 13 회색). - PC 카드: 최대 880, 흰 면, 1px 테, 둥글기 24, 안쪽 32, 사이 24. 카드 위아래 32. 머리는
sl-top sl-top--lg sl-top--flush. - PC 아래 띠 80(유리, 위 1px 선): 안쪽 줄이 카드와 같은 880 폭. 왼쪽 이전, 오른쪽 이유 한 줄 + 주 버튼.
- 폰: 위 56(뒤로 + 진행 점), 본문은 흰 면 전체 폭(20 20 24, 사이 16), 아래 띠는 화면 아래 고정(이유 한 줄 + 주 버튼 56 전체 폭, 이전은 위 바의 뒤로).
- 카드 안의
sl-card는 겉모양 없이 내용만 보입니다.
접근성
- 아래 띠가 마지막 내용과 포커스를 가리지 않게 본문 아래 여백을 둡니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=1201 width=1366 subtitle="온보딩 틀(8판 jobs~0): 위 바 60(워드마크, 진행 점 420, 가이드), 가운데 카드 880(둥글기 24, 안쪽 32, 사이 24), 아래 띠 80. 폰은 위 56, 흰 본문, 아래 고정 버튼" -->
<style>body{margin:0}</style>
<div class="sl sl-shell">
<div class="sl-shell__top"><button class="sl-shell__back" aria-label="이전">‹</button><span class="sl-topbar__brand"><span class="sl-wordmark"><i class="sl-topbar__mark" aria-hidden="true"></i><span class="sl-wordmark__text">Sk<span class="r1">i</span><span class="r2">l</span><span class="r3">l</span>Lens</span></span></span><div class="sl-topbar__progress"><div class="sl-steps"><div class="sl-steps__track"><i class="sl-steps__dot is-done"></i><i class="sl-steps__line is-done"></i><i class="sl-steps__dot is-current"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><span class="sl-sr">2/5 단계</span><i class="sl-steps__glide" style="left:calc(5px + (100% - 10px) * 0.25)"></i></div></div></div><div class="sl-topbar__end"><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">가이드</a><span>김담당, 가온에듀</span></div></div>
<div class="sl-shell__main"><div class="sl-shell__card">
<div class="sl-top sl-top--lg sl-top--flush"><p class="sl-top__eyebrow">04 직무</p><h1 class="sl-top__title">업종에 맞는 직무 <span class="sl-accent">46개</span>를 추천했어요</h1><p class="sl-top__desc">직군 단위로 넣고 뺄 수 있어요. 직무표 파일을 올리면 우리 직무 이름 그대로 써요</p></div>
<div class="sl-stats sl-stats--filter" role="tablist"><button class="sl-stat" role="tab" aria-selected="false"><span class="sl-stat__label">추천 직무</span><span class="sl-stat__value">46개</span></button><button class="sl-stat" role="tab" aria-selected="false"><span class="sl-stat__label">바로 사용</span><span class="sl-stat__value">41개</span></button><button class="sl-stat sl-stat--attention" role="tab" aria-selected="true"><span class="sl-stat__label">확인 필요</span><span class="sl-stat__value">5개</span></button></div>
<div class="sl-tools"><label class="sl-field sl-field--search"><span class="sl-field__box"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="sl-field__input" placeholder="직무 찾기" aria-label="직무 찾기"></span></label><button class="sl-tab">직무 더하기<svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button></div>
<div class="sl-card"><div class="sl-group">교육기획 1개 확인</div><div class="sl-rows"><div class="sl-row"><span class="sl-row__main">교육 서비스기획<small>학습 서비스의 기능과 흐름을 정해요</small><small class="sl-row__note">우리 이름 <b>콘텐츠 개발</b> → 표준 <b>교육 콘텐츠 기획</b>으로 맞췄어요</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">맞아요</a><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">다른 표준</a></span></div></div><div class="sl-group">영업, 마케팅 1개 확인</div><div class="sl-rows"><div class="sl-row"><span class="sl-row__main">영업관리 사무원<small>계약, 정산, 고객 자료를 관리해요</small><small class="sl-row__note">우리 이름 <b>법인교육 영업</b> → 표준 <b>B2B 영업</b>으로 맞췄어요</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">맞아요</a><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">다른 표준</a></span></div></div><div class="sl-group">데이터, 개발 1개 확인</div><div class="sl-rows"><div class="sl-row"><span class="sl-row__main">서비스 기획<small>학습 플랫폼 기능을 기획해요</small><small class="sl-row__note">우리 이름 <b>서비스 PM</b> → 표준 <b>서비스 기획</b>으로 맞췄어요</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">맞아요</a><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">다른 표준</a></span></div></div><div class="sl-group">경영지원 2개 확인</div><div class="sl-rows"><div class="sl-row"><span class="sl-row__main">재무, 회계<small>예산, 결산, 세무를 맡아요</small><small class="sl-row__note">우리 이름 <b>경영기획</b> → 표준 <b>재무, 회계</b>으로 맞췄어요</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">맞아요</a><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">다른 표준</a></span></div><div class="sl-row"><span class="sl-row__main">총무<small>사무실, 자산, 복지를 관리해요</small><small class="sl-row__note">우리 이름 <b>기업문화</b> → 표준 <b>총무</b>으로 맞췄어요</small></span><span class="sl-row__end"><a class="sl-btn sl-btn--link" href="#">맞아요</a><a class="sl-btn sl-btn--link sl-btn--quiet" href="#">다른 표준</a></span></div></div></div>
<p class="sl-card__note">업종 기준 추천이에요. 직무를 누르면 직무시트가 열려요, <a class="sl-btn sl-btn--link" href="#">양식 받기</a></p>
</div></div>
<div class="sl-shell__bottom"><button class="sl-btn sl-btn--secondary">이전</button><span class="sl-band__reason">확인 필요 5개만 보면 넘어갈 수 있어요</span><button class="sl-btn sl-btn--primary" disabled>직무확인 <span class="sl-btn__arrow">→</span></button></div>
</div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.