AWESOMEDEV
5c9959ce08
이모지 아이콘을 SVG로 바꾸다가, 더 큰 원인을 발견해 함께 고쳤다.
■ 폰트: 이름만 부르고 파일은 안 받아오고 있었다
global.css에 font-family: "Pretendard"가 적혀 있었지만 @font-face도 CDN
링크도 없었다. 그래서 이 글꼴이 따로 깔린 사람 외에는 전원 맑은 고딕으로
보고 있었다 — 앱과 학습 문서 19개 전부. 에러가 안 나서 조용히 넘어간 케이스.
- PretendardStdVariable.woff2(285KB)를 public/fonts에 self-host
· CDN 의존 없음 → 외부 서비스가 죽어도, 오프라인에서도 안 깨진다
· variable font → 파일 하나가 굵기 45~920을 전부 담는다
· font-display: swap → 받는 동안 흰 화면(FOIT) 방지
- 전체판(2MB) 대신 Std판(상용 한글 2,350자)을 골랐다. 앱이 쓰는 한글
1,276자가 Std에 전부 있는지 브라우저에서 실측 확인했다(폴백 0자).
- 학습 문서 19개에도 같은 @font-face 적용
■ 아이콘: 이모지 95종 → Lucide 132개
이모지는 OS마다 다른 그림으로 렌더링되고, 굵기·색을 통제할 수 없고,
스크린리더가 "bust in silhouette"처럼 읽는다.
- 카탈로그의 icon: '📜'(문자) → Icon: ScrollText(컴포넌트)로 전환
- strokeWidth={1.5}로 굵기 통일, aria-hidden으로 장식임을 명시
- 개별 import만 사용(트리셰이킹) → gzip +14KB
- slug: null인 '개발 환경 설치 가이드' 항목이 일괄 변환에서 누락돼
Icon이 undefined가 될 뻔한 것을 정합성 검사(항목 수 vs Icon 수)로 잡았다
■ 토큰: 여백·글자 크기·굵기를 :root로 승격
--space-1~7(4의 배수), --text-xs~2xl, --weight-*, --radius-sm/lg/full.
값을 직접 박으면 다크 모드에서 깨지고 화면마다 미묘하게 어긋난다.
CSS 프레임워크는 도입하지 않았다 — 손으로 쓴 global.css와 충돌하고,
교재로서 "왜 이렇게 썼는지"가 사라지기 때문이다.
■ /design: 재료를 고르는 화면
색·글자·여백·모서리를 실제 CSS 변수로 렌더링(다크 모드 자동 반영) +
Lucide 아이콘 1,993개 검색·복사. lucide-react는 아이콘 하나를 이름 3개로
내보내(Rocket/RocketIcon/LucideRocket) 5,981개처럼 보이므로 별칭을 걸렀다.
아이콘 전체를 훑어야 해 무거운 화면이라 lazy로 분리했다
→ 첫 화면 번들은 1.9KB만 증가(575.57 → 577.44KB).
검증: ESLint 통과, Vitest 30개 통과, 프로덕션 빌드 성공, 콘솔 에러 0.
브라우저에서 수습 7카테고리 + 초급~특급 4과정 = 11개 화면 전수 확인
(각 12카드/12아이콘/이모지 0).
문서: DESIGN.md(폰트·토큰·비용), ICONS.md(규약·대응표 132행)
382 lines
26 KiB
HTML
382 lines
26 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>어썸데브 수습 평가 루브릭</title>
|
||
<style>
|
||
/* 웹폰트: 앱과 같은 Pretendard를 문서에도 적용한다(선언만 있고 파일이 없던 문제 수정). */
|
||
@font-face {
|
||
font-family: "Pretendard";
|
||
src: url("/fonts/PretendardStdVariable.woff2") format("woff2-variations");
|
||
font-weight: 45 920;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root {
|
||
--paper: #FAFBFD; --card: #FFFFFF; --ink: #101A28; --ink-soft: #46536A;
|
||
--ink-faint: #7B8798; --line: #E4E8F0; --line-soft: #EFF2F7;
|
||
--primary: #2159C5; --primary-soft: #E5EDFB; --primary-deep: #163F8F;
|
||
--amber: #B9772A; --amber-soft: #F6EBDA; --amber-line: #E4C79A;
|
||
--teal: #0E8C86; --teal-soft: #E0F1EF;
|
||
--rose: #B4463C; --rose-soft: #F7E7E4;
|
||
--code-bg: #F1F4F9;
|
||
--shadow: 0 1px 2px rgba(16,26,40,.05), 0 8px 24px -12px rgba(16,26,40,.16);
|
||
--radius: 14px;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--paper: #0B1017; --card: #131A24; --ink: #E8EDF4; --ink-soft: #A4B0C0;
|
||
--ink-faint: #74808F; --line: #263140; --line-soft: #1C242F;
|
||
--primary: #6AA0F0; --primary-soft: #172A44; --primary-deep: #AECBF8;
|
||
--amber: #DBA25C; --amber-soft: #2C2318; --amber-line: #4A3B23;
|
||
--teal: #4FC7BE; --teal-soft: #14302E; --rose: #E08A80; --rose-soft: #331E1B;
|
||
--code-bg: #161E28;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
|
||
}
|
||
}
|
||
:root[data-theme="light"] {
|
||
--paper: #FAFBFD; --card: #FFFFFF; --ink: #101A28; --ink-soft: #46536A;
|
||
--ink-faint: #7B8798; --line: #E4E8F0; --line-soft: #EFF2F7;
|
||
--primary: #2159C5; --primary-soft: #E5EDFB; --primary-deep: #163F8F;
|
||
--amber: #B9772A; --amber-soft: #F6EBDA; --amber-line: #E4C79A;
|
||
--teal: #0E8C86; --teal-soft: #E0F1EF; --rose: #B4463C; --rose-soft: #F7E7E4;
|
||
--code-bg: #F1F4F9;
|
||
--shadow: 0 1px 2px rgba(16,26,40,.05), 0 8px 24px -12px rgba(16,26,40,.16);
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--paper: #0B1017; --card: #131A24; --ink: #E8EDF4; --ink-soft: #A4B0C0;
|
||
--ink-faint: #74808F; --line: #263140; --line-soft: #1C242F;
|
||
--primary: #6AA0F0; --primary-soft: #172A44; --primary-deep: #AECBF8;
|
||
--amber: #DBA25C; --amber-soft: #2C2318; --amber-line: #4A3B23;
|
||
--teal: #4FC7BE; --teal-soft: #14302E; --rose: #E08A80; --rose-soft: #331E1B;
|
||
--code-bg: #161E28;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||
body { margin: 0; background: var(--paper); color: var(--ink);
|
||
font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
|
||
line-height: 1.68; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
|
||
.wrap { max-width: 900px; margin: 0 auto; padding: clamp(20px,4vw,48px); }
|
||
|
||
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 10px; }
|
||
.eyebrow::before { content:""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
|
||
|
||
header.mast { border: 1px solid var(--line); border-radius: var(--radius);
|
||
background: radial-gradient(120% 140% at 100% 0%, var(--primary-soft) 0%, transparent 55%), var(--card);
|
||
box-shadow: var(--shadow); padding: clamp(26px,4vw,42px); }
|
||
.wordmark { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
|
||
.wordmark b { color: var(--primary); }
|
||
header.mast h1 { font-size: clamp(28px,5.6vw,42px); line-height: 1.14; margin: 16px 0 0; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
|
||
header.mast .lede { margin: 16px 0 0; font-size: clamp(15px,2.4vw,17px); color: var(--ink-soft); max-width: 58ch; }
|
||
|
||
/* Identity fields */
|
||
.idfields { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px 22px; }
|
||
.idf { display: grid; gap: 6px; }
|
||
.idf .k { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
|
||
.idf .v { border-bottom: 1.5px solid var(--line); min-height: 26px; }
|
||
|
||
section { margin-top: clamp(30px,5vw,46px); scroll-margin-top: 20px; }
|
||
section > h2 { font-size: clamp(21px,3.6vw,26px); font-weight: 800; letter-spacing: -0.025em; margin: 14px 0 0; text-wrap: balance; }
|
||
section > .sub { color: var(--ink-soft); margin: 9px 0 0; font-size: 15px; max-width: 64ch; }
|
||
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(18px,3vw,26px); }
|
||
.mt { margin-top: 18px; } .mt-s { margin-top: 12px; }
|
||
p { margin: 0; } strong { font-weight: 700; }
|
||
|
||
/* Principle */
|
||
.princ { display: grid; gap: 12px; }
|
||
.princ li { list-style: none; display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }
|
||
.princ .n { width: 22px; height: 22px; border-radius: 6px; background: var(--primary); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; margin-top: 3px; }
|
||
@media (prefers-color-scheme: dark){ .princ .n { color:#0B1017; } }
|
||
:root[data-theme="dark"] .princ .n { color:#0B1017; }
|
||
.princ b { color: var(--ink); font-weight: 700; }
|
||
|
||
/* Rubric dimension */
|
||
.dim { margin-top: 16px; }
|
||
.dim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
|
||
.dim-head .name { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
|
||
.dim-head .name .idx { color: var(--primary); font-variant-numeric: tabular-nums; }
|
||
.dim-head .wt { font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: var(--primary); background: var(--primary-soft); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
|
||
.levels { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
|
||
.lv { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: var(--card); }
|
||
.lv .lh { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
|
||
.lv .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; }
|
||
.lv1 .lh { color: var(--rose); } .lv2 .lh { color: var(--amber); }
|
||
.lv3 .lh { color: var(--teal); } .lv4 .lh { color: var(--primary); }
|
||
.lv p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
|
||
.lv .pts { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
|
||
.scoreline { margin-top: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 14px; }
|
||
.scoreline .lbl { color: var(--ink-soft); font-weight: 600; }
|
||
.scorebox { width: 70px; height: 34px; border: 1.5px solid var(--primary); border-radius: 8px; display: inline-block; }
|
||
.scoreline .max { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
|
||
.dim-note { margin-top: 12px; padding: 11px 14px; background: var(--primary-soft); border-radius: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; }
|
||
.dim-note b { color: var(--ink); }
|
||
@media (max-width: 680px){ .levels { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 420px){ .levels { grid-template-columns: 1fr; } }
|
||
|
||
/* Summary table */
|
||
.tblwrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; }
|
||
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
|
||
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
|
||
thead th { font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); background: var(--paper); }
|
||
tbody tr:last-child td { border-bottom: 0; }
|
||
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||
tr.total td { font-weight: 800; background: var(--primary-soft); }
|
||
tr.total td.num { color: var(--primary); font-size: 16px; }
|
||
.cell-fill { display: inline-block; min-width: 54px; border-bottom: 1.5px solid var(--line); text-align: right; }
|
||
|
||
/* Bands */
|
||
.bands { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
|
||
.band { border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; }
|
||
.band .r { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
|
||
.band.go { border-color: color-mix(in srgb, var(--teal) 40%, transparent); background: var(--teal-soft); }
|
||
.band.cond { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); }
|
||
.band.no { border-color: color-mix(in srgb, var(--rose) 40%, transparent); background: var(--rose-soft); }
|
||
.band.go .r { color: var(--teal); } .band.cond .r { color: var(--amber); } .band.no .r { color: var(--rose); }
|
||
.band .d { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
|
||
@media (max-width:560px){ .bands { grid-template-columns: 1fr; } }
|
||
|
||
/* Repeatable log */
|
||
.logrow { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
|
||
.logrow .lr-h { font-weight: 800; font-size: 13px; color: var(--primary); margin-bottom: 10px; }
|
||
.logrow .qa { display: grid; gap: 10px; }
|
||
.qa .q { font-size: 13px; }
|
||
.qa .q .lab { font-weight: 700; color: var(--ink); }
|
||
.writeline { margin-top: 6px; border-bottom: 1.5px dashed var(--line); min-height: 24px; }
|
||
.writeline.tall { min-height: 46px; }
|
||
|
||
.note-tip { margin-top: 14px; font-size: 13px; color: var(--ink-faint); }
|
||
.callout { border: 1px solid var(--amber-line); border-radius: var(--radius); background: var(--amber-soft); padding: 18px 22px; margin-top: 16px; }
|
||
.callout h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
|
||
.callout p { color: var(--ink-soft); font-size: 14px; }
|
||
|
||
/* Decision */
|
||
.decide { display: grid; gap: 12px; }
|
||
.opt { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
|
||
.opt .cb { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--primary); margin-top: 2px; }
|
||
.opt .ot { font-weight: 800; font-size: 15px; }
|
||
.opt .od { color: var(--ink-soft); font-size: 13.5px; margin-top: 3px; }
|
||
.signrow { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||
.signrow .s .k { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
|
||
.signrow .s .v { margin-top: 20px; border-bottom: 1.5px solid var(--line); }
|
||
@media (max-width:560px){ .signrow { grid-template-columns: 1fr; } }
|
||
|
||
footer { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
|
||
|
||
@media print {
|
||
body { background: #fff; }
|
||
.card, header.mast, .lv, .logrow, .opt, .band { box-shadow: none; }
|
||
section { break-inside: avoid; }
|
||
.scorebox, .cell-fill, .writeline, .idf .v, .signrow .s .v { border-color: #999 !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="wrap">
|
||
|
||
<header class="mast">
|
||
<div class="wordmark"><b>AWESOMEDEV</b> · 수습 평가</div>
|
||
<h1>수습 평가 루브릭 & 기록지</h1>
|
||
<p class="lede">멘토가 인쇄해서 바로 채점·기록하는 평가 양식이에요. 5개 축 루브릭 · 주간 1:1 기록 · 자기평가 · 최종 전환 판정까지 한 세트로 담았어요. 점수는 <strong>인상이 아니라 매주 쌓인 근거</strong>로 매깁니다.</p>
|
||
<div class="idfields">
|
||
<div class="idf"><div class="k">수습생 이름</div><div class="v"></div></div>
|
||
<div class="idf"><div class="k">직무</div><div class="v"></div></div>
|
||
<div class="idf"><div class="k">멘토</div><div class="v"></div></div>
|
||
<div class="idf"><div class="k">평가 시점</div><div class="v"></div></div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Principle -->
|
||
<section id="principle">
|
||
<div class="eyebrow">평가 원칙</div>
|
||
<h2>이 점수로 채용을 결정해요</h2>
|
||
<div class="card mt">
|
||
<ul class="princ" style="margin:0;padding:0;">
|
||
<li><span class="n">1</span><div><b>인상이 아닌 근거로.</b> 매주 1:1 기록(8회)이 쌓이면 최종 점수가 데이터가 됩니다. 막판 인상으로 뒤집지 않기.</div></li>
|
||
<li><span class="n">2</span><div><b>완성도보다 성장 속도·태도.</b> 고졸 신입에게 지금의 실력보다 6개월 뒤 그림을 봅니다. 가중치가 그렇게 설계돼 있어요.</div></li>
|
||
<li><span class="n">3</span><div><b>나쁜 신호는 4주차 안에.</b> 전환이 어렵겠다는 판단은 중간평가에서 반드시 공유합니다.</div></li>
|
||
<li><span class="n">4</span><div><b>레벨을 고르고 점수를 적어요.</b> 각 축에서 가장 가까운 레벨에 ○ 표시 후, 제안 점수 범위 안에서 최종 점수를 기입.</div></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Rubric -->
|
||
<section id="rubric">
|
||
<div class="eyebrow">루브릭 · 100점</div>
|
||
<h2>5개 축으로 채점</h2>
|
||
<p class="sub">각 축마다 4개 레벨 중 하나에 ○, 오른쪽에 최종 점수를 적으세요.</p>
|
||
|
||
<!-- D1 -->
|
||
<div class="card dim">
|
||
<div class="dim-head">
|
||
<div class="name"><span class="idx">①</span> 성장 속도 · 학습력</div>
|
||
<div class="wt">배점 25점 · 최우선</div>
|
||
</div>
|
||
<div class="levels">
|
||
<div class="lv lv1"><div class="lh"><span class="dot"></span>Lv1 미흡</div><p>같은 피드백을 반복하고, 새 개념 습득이 더디다.</p><div class="pts">~13점</div></div>
|
||
<div class="lv lv2"><div class="lh"><span class="dot"></span>Lv2 보통</div><p>알려주면 익히지만 스스로 확장은 약하다.</p><div class="pts">14–18점</div></div>
|
||
<div class="lv lv3"><div class="lh"><span class="dot"></span>Lv3 충족</div><p>피드백을 다음에 반영하고, 새 개념을 무리 없이 흡수한다.</p><div class="pts">19–22점</div></div>
|
||
<div class="lv lv4"><div class="lh"><span class="dot"></span>Lv4 우수</div><p>한 번 배우면 스스로 응용·확장하고, 남에게 설명할 수 있다.</p><div class="pts">23–25점</div></div>
|
||
</div>
|
||
<div class="scoreline"><span class="lbl">점수</span><span class="scorebox"></span><span class="max">/ 25</span></div>
|
||
</div>
|
||
|
||
<!-- D2 -->
|
||
<div class="card dim">
|
||
<div class="dim-head">
|
||
<div class="name"><span class="idx">②</span> 기본기 · 직무 역량</div>
|
||
<div class="wt">배점 25점</div>
|
||
</div>
|
||
<div class="levels">
|
||
<div class="lv lv1"><div class="lh"><span class="dot"></span>Lv1 미흡</div><p>기본 개념 이해가 부족하고, 과제 완성이 어렵다.</p><div class="pts">~13점</div></div>
|
||
<div class="lv lv2"><div class="lh"><span class="dot"></span>Lv2 보통</div><p>도움을 받아 과제를 완성한다.</p><div class="pts">14–18점</div></div>
|
||
<div class="lv lv3"><div class="lh"><span class="dot"></span>Lv3 충족</div><p>배운 기본기를 이해하고, 주어진 과제를 스스로 완성한다.</p><div class="pts">19–22점</div></div>
|
||
<div class="lv lv4"><div class="lh"><span class="dot"></span>Lv4 우수</div><p>기본기를 우리 업무(React·Spring)에 연결해 설명하고, 결과물이 안정적이다.</p><div class="pts">23–25점</div></div>
|
||
</div>
|
||
<div class="scoreline"><span class="lbl">점수</span><span class="scorebox"></span><span class="max">/ 25</span></div>
|
||
</div>
|
||
|
||
<!-- D3 -->
|
||
<div class="card dim">
|
||
<div class="dim-head">
|
||
<div class="name"><span class="idx">③</span> 협업 · 소통</div>
|
||
<div class="wt">배점 20점</div>
|
||
</div>
|
||
<div class="levels">
|
||
<div class="lv lv1"><div class="lh"><span class="dot"></span>Lv1 미흡</div><p>보고·질문이 없고, 받은 리뷰가 반영되지 않는다. 동료 PR도 안 본다.</p><div class="pts">~10점</div></div>
|
||
<div class="lv lv2"><div class="lh"><span class="dot"></span>Lv2 보통</div><p>시키면 보고하나 맥락이 부족하고, 리뷰는 지적받은 것만 겨우 고친다.</p><div class="pts">11–14점</div></div>
|
||
<div class="lv lv3"><div class="lh"><span class="dot"></span>Lv3 충족</div><p>중간보고·질문(30분 룰·3요소)을 하고, 받은 리뷰를 이해하고 반영한다. 동료 PR에 한 건이라도 성실히 리뷰한다.</p><div class="pts">15–17점</div></div>
|
||
<div class="lv lv4"><div class="lh"><span class="dot"></span>Lv4 우수</div><p>먼저 공유하고, 동료 PR에 근거 있는 리뷰로 도움을 준다. 리뷰를 감정이 아닌 코드로 주고받는다.</p><div class="pts">18–20점</div></div>
|
||
</div>
|
||
<div class="scoreline"><span class="lbl">점수</span><span class="scorebox"></span><span class="max">/ 20</span></div>
|
||
<p class="dim-note">💡 <b>코드리뷰</b>는 이 축의 핵심 근거예요 — Gitea PR의 리뷰 코멘트(주고받은 것 모두)가 5~8주차 내내 남습니다. <b>리뷰를 잘 받는 것</b>(방어하지 않고 배우기)과 <b>리뷰를 잘 주는 것</b>(사람이 아닌 코드를 짚기)을 함께 봅니다. 자세한 방법은 학습 문서 <b>「코드리뷰 실습 가이드」</b> 참고.</p>
|
||
</div>
|
||
|
||
<!-- D4 -->
|
||
<div class="card dim">
|
||
<div class="dim-head">
|
||
<div class="name"><span class="idx">④</span> 태도 · 예절 · 책임감</div>
|
||
<div class="wt">배점 20점</div>
|
||
</div>
|
||
<div class="levels">
|
||
<div class="lv lv1"><div class="lh"><span class="dot"></span>Lv1 미흡</div><p>시간·약속을 어기고, 기본 예절·보안 인식이 부족하다.</p><div class="pts">~10점</div></div>
|
||
<div class="lv lv2"><div class="lh"><span class="dot"></span>Lv2 보통</div><p>대체로 지키나 가끔 놓친다.</p><div class="pts">11–14점</div></div>
|
||
<div class="lv lv3"><div class="lh"><span class="dot"></span>Lv3 충족</div><p>시간·예절·보안을 지키고, 맡은 일을 끝까지 한다.</p><div class="pts">15–17점</div></div>
|
||
<div class="lv lv4"><div class="lh"><span class="dot"></span>Lv4 우수</div><p>주도적이고 책임감 있으며, 팀 분위기에 긍정적이다.</p><div class="pts">18–20점</div></div>
|
||
</div>
|
||
<div class="scoreline"><span class="lbl">점수</span><span class="scorebox"></span><span class="max">/ 20</span></div>
|
||
</div>
|
||
|
||
<!-- D5 -->
|
||
<div class="card dim">
|
||
<div class="dim-head">
|
||
<div class="name"><span class="idx">⑤</span> 성장 가능성</div>
|
||
<div class="wt">배점 10점</div>
|
||
</div>
|
||
<div class="levels">
|
||
<div class="lv lv1"><div class="lh"><span class="dot"></span>Lv1 미흡</div><p>6개월 뒤 함께 일하는 그림이 그려지지 않는다.</p><div class="pts">~5점</div></div>
|
||
<div class="lv lv2"><div class="lh"><span class="dot"></span>Lv2 보통</div><p>가능성은 있으나 확신은 어렵다.</p><div class="pts">6–7점</div></div>
|
||
<div class="lv lv3"><div class="lh"><span class="dot"></span>Lv3 충족</div><p>꾸준히 성장 중이며, 함께 일하는 그림이 그려진다.</p><div class="pts">8–9점</div></div>
|
||
<div class="lv lv4"><div class="lh"><span class="dot"></span>Lv4 우수</div><p>기대 이상으로, 빠르게 전력이 될 잠재력이 보인다.</p><div class="pts">10점</div></div>
|
||
</div>
|
||
<div class="scoreline"><span class="lbl">점수</span><span class="scorebox"></span><span class="max">/ 10</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Summary + bands -->
|
||
<section id="summary">
|
||
<div class="eyebrow">합산</div>
|
||
<h2>총점과 판정 기준</h2>
|
||
<div class="tblwrap">
|
||
<table>
|
||
<thead><tr><th>평가 축</th><th class="num">배점</th><th class="num">획득 점수</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>① 성장 속도 · 학습력</td><td class="num">25</td><td class="num"><span class="cell-fill"></span></td></tr>
|
||
<tr><td>② 기본기 · 직무 역량</td><td class="num">25</td><td class="num"><span class="cell-fill"></span></td></tr>
|
||
<tr><td>③ 협업 · 소통</td><td class="num">20</td><td class="num"><span class="cell-fill"></span></td></tr>
|
||
<tr><td>④ 태도 · 예절 · 책임감</td><td class="num">20</td><td class="num"><span class="cell-fill"></span></td></tr>
|
||
<tr><td>⑤ 성장 가능성</td><td class="num">10</td><td class="num"><span class="cell-fill"></span></td></tr>
|
||
<tr class="total"><td>합계</td><td class="num">100</td><td class="num"><span class="cell-fill"></span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="bands">
|
||
<div class="band go"><div class="r">75점 이상 · 전환 권장</div><div class="d">기대에 부합. 정규직 전환을 추천.</div></div>
|
||
<div class="band cond"><div class="r">60–74점 · 조건부</div><div class="d">가능성 있음. 추가 관찰·조건부 전환 검토.</div></div>
|
||
<div class="band no"><div class="r">60점 미만 · 재검토</div><div class="d">전환 어려움. 사유를 명확히 정리.</div></div>
|
||
</div>
|
||
<div class="callout">
|
||
<h3>⚠️ 점수 구간은 가이드일 뿐</h3>
|
||
<p>구간은 참고선이에요. 총점이 낮아도 <b>④ 태도·⑤ 성장 가능성</b>이 뛰어나면 전환할 수 있고, 총점이 높아도 태도에 큰 문제가 있으면 재검토합니다. 숫자보다 사람을 보되, 숫자로 근거를 남기세요. 회사 상황에 맞게 구간은 조정 가능합니다.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Weekly 1:1 -->
|
||
<section id="weekly">
|
||
<div class="eyebrow">주간 기록</div>
|
||
<h2>주간 1:1 기록지 <span style="font-size:14px;font-weight:600;color:var(--ink-faint);">(매주 · 8회)</span></h2>
|
||
<p class="sub">한 주에 하나씩. 잘한 것 1 · 아쉬운 것 1을 매주 기록하면 최종 평가의 근거가 됩니다. 필요한 만큼 복사해 쓰세요.</p>
|
||
<div class="card mt">
|
||
<div class="logrow">
|
||
<div class="lr-h">◻ ___주차 · 날짜 __________</div>
|
||
<div class="qa">
|
||
<div class="q"><span class="lab">이번 주 한 일</span><div class="writeline"></div></div>
|
||
<div class="q"><span class="lab">잘한 것 (1)</span><div class="writeline"></div></div>
|
||
<div class="q"><span class="lab">아쉬운 것 · 개선점 (1)</span><div class="writeline"></div></div>
|
||
<div class="q"><span class="lab">전달한 피드백</span><div class="writeline"></div></div>
|
||
<div class="q"><span class="lab">다음 주 목표</span><div class="writeline"></div></div>
|
||
</div>
|
||
</div>
|
||
<p class="note-tip">※ 인쇄 시 이 블록을 8부 준비하거나, 주차별로 페이지를 나눠 사용하세요. 4주차·8주차 기록엔 중간/최종 평가 결과도 함께 남깁니다.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Self assessment -->
|
||
<section id="self">
|
||
<div class="eyebrow">자기평가</div>
|
||
<h2>자기평가서 <span style="font-size:14px;font-weight:600;color:var(--ink-faint);">(수습생 작성 · 4주차 · 8주차)</span></h2>
|
||
<p class="sub">수습생이 직접 작성해요. 자기객관화 능력도 평가의 한 부분입니다.</p>
|
||
<div class="card mt">
|
||
<div class="qa" style="display:grid;gap:14px;">
|
||
<div class="q"><span class="lab">① 이 기간 내가 잘했다고 생각하는 것</span><div class="writeline tall"></div></div>
|
||
<div class="q"><span class="lab">② 어려웠던 것 · 아직 부족한 것</span><div class="writeline tall"></div></div>
|
||
<div class="q"><span class="lab">③ 새로 배운 것 (기술 · 태도 모두)</span><div class="writeline tall"></div></div>
|
||
<div class="q"><span class="lab">④ 다음 기간에 도전하고 싶은 것</span><div class="writeline tall"></div></div>
|
||
<div class="q"><span class="lab">⑤ 스스로 매기는 점수와 이유 (100점 만점)</span><div class="writeline tall"></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Final decision -->
|
||
<section id="decision">
|
||
<div class="eyebrow">최종 판정</div>
|
||
<h2>전환 결정 <span style="font-size:14px;font-weight:600;color:var(--ink-faint);">(8주차 · 멘토+대표)</span></h2>
|
||
<div class="card mt">
|
||
<div class="decide">
|
||
<div class="opt"><span class="cb"></span><div><div class="ot" style="color:var(--teal);">정규직 전환</div><div class="od">기대에 부합. 다음 3개월 성장 목표를 함께 설정한다.</div></div></div>
|
||
<div class="opt"><span class="cb"></span><div><div class="ot" style="color:var(--amber);">조건부 전환 · 추가 관찰</div><div class="od">가능성 있음. 관찰 기간·보완 목표를 명시한다.</div></div></div>
|
||
<div class="opt"><span class="cb"></span><div><div class="ot" style="color:var(--rose);">미전환</div><div class="od">전환 어려움. 사유를 구체적으로 정리해 정중히 전달한다.</div></div></div>
|
||
</div>
|
||
<div class="qa" style="display:grid;gap:12px;margin-top:18px;">
|
||
<div class="q"><span class="lab">종합 의견</span><div class="writeline tall"></div></div>
|
||
<div class="q"><span class="lab">전환 시 다음 3개월 성장 목표</span><div class="writeline tall"></div></div>
|
||
</div>
|
||
<div class="signrow">
|
||
<div class="s"><div class="k">멘토 서명 / 날짜</div><div class="v"></div></div>
|
||
<div class="s"><div class="k">대표 확인 / 날짜</div><div class="v"></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<span>AWESOMEDEV · 수습 평가 루브릭 & 기록지 (멘토용)</span>
|
||
<span>2026 · 8주 교육 운영안과 함께 사용</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|