Responsive
원본: projects/skill-lens/design/components/Responsive/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
같은 화면, 세 구간: 폰 390(햄버거 + 아래 고정 띠, 카드 목록), 태블릿 834(접힌 길잡이, 표), PC 1440(길잡이 펼침, 서랍 열림). 전부 0.5배
같은 화면이 세 구간(폰, 태블릿, PC)에서 어떻게 달라지는지 한 장에서 봅니다.
쓰는 곳
새 화면과 부품의 구간 검토.
구성(화면이 넘겨줄 것)
화면 하나.
규칙
- 구간은 폰 ~767, 태블릿 768~1023, PC 1024~. 1440 이상은 내용 폭 1200.
- 바뀌는 것: 길잡이, 밀도, 겹침, 표, 쪽 넘김. 안 바뀌는 것: 색, 글자 단계, 둥글기, 간격, 움직임, 말.
- 태블릿은 배치는 PC, 크기는 폰.
- 구간 분기는
bundle.css안에서만.
접근성
.sl-vp로 감싸면 상자 폭으로 구간이 정해집니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Foundations" height=560 width=1420 subtitle="같은 화면, 세 구간: 폰 390(햄버거 + 아래 고정 띠, 카드 목록), 태블릿 834(접힌 길잡이, 표), PC 1440(길잡이 펼침, 서랍 열림). 전부 0.5배" -->
<style>body{margin:0;padding:var(--space-4);background:var(--canvas)}.row{display:flex;gap:var(--space-4);align-items:flex-start}.vp{zoom:.5;flex:none;height:1040px;overflow:hidden;border-radius:24px;box-shadow:0 0 0 2px var(--border-strong)}.vp .sl-admin{min-height:1040px;position:relative}.vp{position:relative}.vp .sl-admin__body{position:relative}.vp--phone{width:390px}.vp--tablet{width:834px}.vp--pc{width:1440px}.lbl{font:600 13px/20px var(--font-sans);color:var(--ink-muted);margin-bottom:var(--space-2)}</style>
<div class="sl row"><div><div class="lbl">폰 390</div><div class="vp vp--phone 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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>
</div></div></div></div><div><div class="lbl">태블릿 834</div><div class="vp vp--tablet 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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>
</div></div></div></div><div><div class="lbl">PC 1440</div><div class="vp vp--pc 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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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>[email protected]</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></div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.