AdminShell
원본: projects/skill-lens/design/components/AdminShell/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
매일 쓰는 관리자 작업 틀 2판: 대메뉴 다섯(홈, 진단, 결과, 강화, 설정) 길잡이 240, 명령 팔레트, 저장한 보기, 필터 칩, 끝까지 붙는 표(36~40px), 합계 고정 바닥, 오른쪽 서랍 400
매일 오래 쓰는 관리자 작업 화면의 틀입니다. 왼쪽 길잡이 240, 위 바 60, 내용 최대 1200, 오른쪽 서랍 400.
쓰는 곳
명단, 결과, 설정처럼 관리자가 매일 쓰는 화면. 온보딩과 진단은 Shell을 씁니다.
구성(화면이 넘겨줄 것)
길잡이 항목(아이콘, 이름, 현재 위치), 위 바(현재 위치, 검색, 사용자), 머리(제목, 설명, 행동 버튼 둘까지), 내용(12칸 격자 sl-col-*).
규칙
- 대메뉴는 다섯 고정: 홈, 진단, 결과, 강화, 설정. 명단, 직무, 스킬은 진단 안의 탭입니다.
- PC: 길잡이 펼침, 행 44, 표 머리와 몸 40(촘촘히 36), 버튼 40, 작은 버튼 32, 기본 글자 13, 제목 28.
- 태블릿: 길잡이가 64 레일로 접히고 크기는 터치(행 56, 버튼 48).
- 폰: 길잡이는 위 줄 왼쪽 메뉴로 열고, 머리의 주 버튼은 아래 고정 띠로 내려갑니다. 표는 카드 목록, 서랍은 아래 시트.
- 넓은 PC(1440 이상): 내용 폭 1200 고정.
- 명령 팔레트(
sl-cmdk)로 이름, 직무, 메뉴에 바로 갑니다. - 저장한 보기(
sl-views)는 머리 아래 탭, 도구 줄(sl-toolbar)에 필터 칩, 정렬, 행 높이. 행을 고르면 도구 줄 자리에 일괄 바(sl-bulk)가 들어옵니다. 둘은 동시에 보이지 않습니다. - 표(
sl-grid)는 카드로 감싸지 않습니다. 머리 고정, 바닥 행에 보는 수와 합계. 행을 누르면 서랍이 열리고, 선택은 체크박스로만. - 행 끝 더 보기 메뉴는 항상 보입니다. 호버에만 나오는 행동은 두지 않습니다.
- 스킬 레벨은
sl-lvl(다섯 칸 + 숫자). 목표에 못 미치면sl-lvl--gap(산호). - 서랍에 열린 행은
is-focus(왼쪽 라임 막대). 라임을 PC에서 쓰는 유일한 자리입니다. - 크롬은 중립. 보라는 현재 길잡이, 보기 탭 밑줄, 필터 칩, 레벨 칸에만.
접근성
- 길잡이는
nav랜드마크, 현재 항목은aria-current. - 정렬된 열은
aria-sort. - 아직 없음: 키보드 행 이동, 열 숨기기와 폭 조절, 표 안 바로 고치기.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=700 width=1440 subtitle="매일 쓰는 관리자 작업 틀 2판: 대메뉴 다섯(홈, 진단, 결과, 강화, 설정) 길잡이 240, 명령 팔레트, 저장한 보기, 필터 칩, 끝까지 붙는 표(36~40px), 합계 고정 바닥, 오른쪽 서랍 400" -->
<style>body{margin:0;background:var(--canvas)}.frame{height:680px;overflow:hidden;position:relative}.frame .sl-admin{min-height:680px;grid-template-rows:60px 1fr}.frame .sl-admin__body{overflow:hidden}.frame .sl-admin__nav{grid-row:1 / span 2}</style>
<div class="frame sl-vp"><div class="sl sl-admin"><nav class="sl-admin__nav" aria-label="길잡이"><div class="sl-admin__brand"><i class="sl-topbar__mark"></i><span>SkillLens</span></div>
<a class="sl-admin__item" href="#"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span>홈</span><kbd class="sl-admin__kbd">G H</kbd></a>
<a class="sl-admin__item" href="#" aria-current="page"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><span>진단</span><kbd class="sl-admin__kbd">G D</kbd></a>
<a class="sl-admin__item" href="#"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg><span>결과</span><kbd class="sl-admin__kbd">G R</kbd></a>
<a class="sl-admin__item" href="#"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg><span>강화</span><kbd class="sl-admin__kbd">G E</kbd></a>
<a class="sl-admin__item" href="#"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg><span>설정</span><kbd class="sl-admin__kbd">G S</kbd></a></nav>
<header class="sl-admin__top"><button class="sl-admin__menu sl-btn sl-btn--secondary sl-btn--sm" type="button" aria-label="대메뉴 열기"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg></button><span class="sl-admin__crumb">진단 <b>실무자</b></span><span class="sl-admin__ptitle">진단</span><span class="sl-admin__spacer"></span><button class="sl-cmdk" type="button"><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><span>이름, 직무, 메뉴로 바로 가기</span><kbd>⌘K</kbd></button><button class="sl-btn sl-btn--secondary sl-btn--sm" aria-label="알림"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg></button><span class="sl-topbar__step">정호준 님</span><a class="sl-admin__guide" href="#">가이드</a></header>
<div class="sl-admin__body"><main class="sl-admin__main sl-admin__main--bare"><div class="sl-admin__content">
<div class="sl-admin__head"><div class="sl-top"><h1 class="sl-top__title">실무자 <span class="sl-accent">1,248명</span></h1><p class="sl-top__desc">45명만 직무를 확인하면 전원 진단을 시작할 수 있어요.</p></div><div class="sl-admin__actions"><button class="sl-btn sl-btn--secondary">다운로드</button><button class="sl-btn sl-btn--primary">추가</button></div></div>
<div class="sl-views" role="tablist"><button class="sl-views__tab" role="tab" aria-selected="true">전체 <span class="sl-tab__count">1,248</span></button><button class="sl-views__tab" role="tab" aria-selected="false">직무 확인 <span class="sl-tab__count">45</span></button><button class="sl-views__tab" role="tab" aria-selected="false">진단 진행 중</button><button class="sl-views__tab" role="tab" aria-selected="false">교육사업본부만</button><button class="sl-views__tab sl-views__add" role="tab" aria-selected="false">+ 보기 저장</button></div>
<div class="sl-toolbar"><span class="sl-filter">그룹 <b>교육사업본부</b><button class="sl-filter__x" aria-label="필터 지우기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true" width="12" height="12"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span><span class="sl-filter">진단 <b>마쳤어요 외 2</b><button class="sl-filter__x" aria-label="필터 지우기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true" width="12" height="12"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></span><button class="sl-filter sl-filter--add" type="button">+ 필터</button><button class="sl-toolbar__sort" type="button">최근 갱신순 <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 class="sl-toolbar__density" role="group" aria-label="행 높이"><button type="button" aria-pressed="false" aria-label="촘촘히"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></svg></button><button type="button" aria-pressed="true" aria-label="보통"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 8h18"/><path d="M3 16h18"/></svg></button></div></div>
<table class="sl-grid"><thead><tr><th class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></th><th class="sortable">이름<svg class="sl-grid__sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></th><th class="sortable">직무<svg class="sl-grid__sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></th><th class="sortable">그룹<svg class="sl-grid__sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></th><th class="sortable">스킬 레벨<svg class="sl-grid__sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></th><th class="sortable">진단<svg class="sl-grid__sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></th><th class="sortable is-sorted" aria-sort="descending">갱신<svg class="sl-grid__sort" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></th><th class="tail"></th></tr></thead><tbody><tr class=""><td class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td><span class="name">김담당</span><div class="sub">hojun@gaon.co.kr</div></td><td>서비스 PM</td><td>교육사업본부</td><td><span class="sl-lvl"><span class="sl-lvl__steps"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></span><span class="sl-lvl__num">4/5</span></span></td><td><span class="sl-chip sl-chip--success">마쳤어요</span></td><td class="sub">어제</td><td class="tail"><button class="sl-grid__menu" aria-label="더 보기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr><tr class="is-focus"><td class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td><span class="name">박실무</span><div class="sub">silmu@gaon.co.kr</div></td><td>발전교육 운영</td><td>콘텐츠팀</td><td><span class="sl-lvl"><span class="sl-lvl__steps"><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i></span><span class="sl-lvl__num">3/5</span></span></td><td><span class="sl-chip sl-chip--success">마쳤어요</span></td><td class="sub">3일 전</td><td class="tail"><button class="sl-grid__menu" aria-label="더 보기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr><tr class="is-attention"><td class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td><span class="name">이확인</span><div class="sub">check@gaon.co.kr</div></td><td>없음</td><td>신사업TF</td><td><span class="sub">아직 없음</span></td><td><span class="sl-chip sl-chip--danger">직무 확인</span></td><td class="sub">9월 2일</td><td class="tail"><button class="sl-grid__menu" aria-label="더 보기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr><tr class=""><td class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td><span class="name">최운영</span><div class="sub">ops@gaon.co.kr</div></td><td>HR 운영</td><td>운영팀</td><td><span class="sl-lvl sl-lvl--gap"><span class="sl-lvl__steps"><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i></span><span class="sl-lvl__num">2/5</span></span></td><td><span class="sl-chip sl-chip--warning">진행 중</span></td><td class="sub">오늘</td><td class="tail"><button class="sl-grid__menu" aria-label="더 보기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr><tr class=""><td class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td><span class="name">정기획</span><div class="sub">plan@gaon.co.kr</div></td><td>사업 기획</td><td>전략실</td><td><span class="sl-lvl"><span class="sl-lvl__steps"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></span><span class="sl-lvl__num">5/5</span></span></td><td><span class="sl-chip sl-chip--success">마쳤어요</span></td><td class="sub">어제</td><td class="tail"><button class="sl-grid__menu" aria-label="더 보기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr><tr class=""><td class="sel"><span class="sl-check" role="checkbox" aria-checked="false"></span></td><td><span class="name">한신입</span><div class="sub">new@gaon.co.kr</div></td><td>콘텐츠 제작</td><td>콘텐츠팀</td><td><span class="sl-lvl sl-lvl--gap"><span class="sl-lvl__steps"><i class="on"></i><i class=""></i><i class=""></i><i class=""></i><i class=""></i></span><span class="sl-lvl__num">1/5</span></span></td><td><span class="sl-chip sl-chip--neutral">시작 전</span></td><td class="sub">9월 14일</td><td class="tail"><button class="sl-grid__menu" aria-label="더 보기"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button></td></tr></tbody><tfoot><tr><td class="sel"></td><td>1,248명 중 6명 표시</td><td></td><td></td><td>평균 <span class="num">3.0</span></td><td>마침 <span class="num">1,103</span></td><td colspan="2"></td></tr></tfoot></table>
<div class="sl-rowcards"><div class="sl-rowcard"><div class="sl-rowcard__head"><span class="sl-check" role="checkbox" aria-checked="false"></span><span><div class="sl-rowcard__name">김담당</div><div class="sl-rowcard__email">hojun@gaon.co.kr</div></span><span class="sl-rowcard__status sl-chip sl-chip--success">마쳤어요</span></div><div class="sl-rowcard__facts"><span>직무 <b>서비스 PM</b></span><span>레벨 <b>4/5</b></span></div></div><div class="sl-rowcard is-attention"><div class="sl-rowcard__head"><span class="sl-check" role="checkbox" aria-checked="false"></span><span><div class="sl-rowcard__name">이확인</div><div class="sl-rowcard__email">check@gaon.co.kr</div></span><span class="sl-rowcard__status sl-chip sl-chip--danger">직무 확인</span></div><div class="sl-rowcard__facts"><span>그룹 <b>신사업TF</b></span><span>직무 <b>없음</b></span></div><div class="sl-rowcard__actions"><button class="sl-btn sl-btn--primary sl-btn--sm">직무선택</button></div></div></div>
</div></main>
<aside class="sl-drawer" aria-label="박실무"><div class="sl-drawer__head"><span class="sl-drawer__title">박실무</span><span class="sl-chip sl-chip--success">마쳤어요</span><span class="sl-admin__spacer"></span><button class="sl-btn sl-btn--secondary sl-btn--sm" aria-label="닫기"><svg class="sl-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></div><div class="sl-drawer__body"><dl class="sl-props"><dt>이메일</dt><dd>silmu@gaon.co.kr</dd><dt>직무</dt><dd>발전교육 운영</dd><dt>그룹</dt><dd>콘텐츠팀</dd><dt>스킬 레벨</dt><dd><span class="sl-lvl"><span class="sl-lvl__steps"><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i></span><span class="sl-lvl__num">3/5</span></span></dd><dt>요구레벨</dt><dd><span class="sl-lvl"><span class="sl-lvl__steps"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></span><span class="sl-lvl__num">4/5</span></span></dd><dt>마지막 진단</dt><dd>3일 전</dd><dt>메모</dt><dd class="is-empty">아직 없음</dd></dl><div class="sl-card__note">먼저 채울 스킬: 교육 과정 설계, 학습 데이터 읽기</div><div class="sl-admin__actions"><button class="sl-btn sl-btn--secondary sl-btn--sm">직무수정</button><button class="sl-btn sl-btn--primary sl-btn--sm">결과로</button></div></div></aside></div></div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.