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행)
474 lines
35 KiB
HTML
474 lines
35 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>어썸데브 수습 8주 상세 교육안</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.72; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
|
||
.wrap { max-width: 880px; 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; }
|
||
.mast-meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
|
||
.chip { font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
|
||
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
|
||
|
||
nav.toc { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 18px 22px; box-shadow: var(--shadow); }
|
||
nav.toc .t { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
|
||
nav.toc ol { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
|
||
nav.toc a { display: flex; gap: 10px; text-decoration: none; color: var(--ink-soft); font-size: 14.5px; padding: 3px 0; }
|
||
nav.toc a b { color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; }
|
||
nav.toc a:hover { color: var(--primary); }
|
||
@media (max-width:560px){ nav.toc ol { grid-template-columns: 1fr; } }
|
||
|
||
section { margin-top: clamp(32px,5vw,50px); scroll-margin-top: 20px; }
|
||
section > h2 { font-size: clamp(21px,3.6vw,27px); 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: 15.5px; max-width: 64ch; }
|
||
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px,3vw,28px); }
|
||
.mt { margin-top: 18px; } .mt-s { margin-top: 12px; }
|
||
p { margin: 0; } strong { font-weight: 700; }
|
||
|
||
/* Track legend */
|
||
.tracks { display: grid; gap: 12px; }
|
||
.track { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
|
||
.track .k { width: 26px; height: 26px; border-radius: 8px; color:#fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; margin-top: 2px; }
|
||
@media (prefers-color-scheme: dark){ .track .k { color:#0B1017; } }
|
||
:root[data-theme="dark"] .track .k { color:#0B1017; }
|
||
.track.a .k { background: var(--primary); } .track.b .k { background: var(--amber); } .track.c .k { background: var(--teal); }
|
||
.track h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 800; }
|
||
.track p { color: var(--ink-soft); font-size: 14px; }
|
||
|
||
/* Timeblock */
|
||
.time { display: grid; gap: 0; }
|
||
.time .row { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
|
||
.time .row:first-child { border-top: 0; }
|
||
.time .t { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
|
||
.time .v { font-size: 14.5px; color: var(--ink-soft); } .time .v b { color: var(--ink); font-weight: 600; }
|
||
|
||
/* Week */
|
||
.phase-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
|
||
.p1 .phase-tag { color: var(--primary); background: var(--primary-soft); }
|
||
.p2 .phase-tag { color: var(--amber); background: var(--amber-soft); }
|
||
.p3 .phase-tag { color: var(--teal); background: var(--teal-soft); }
|
||
.p4 .phase-tag { color: var(--primary-deep); background: var(--primary-soft); }
|
||
|
||
.week-head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
|
||
.week-badge { width: 62px; height: 62px; border-radius: 15px; color: #fff; display: grid; place-items: center; text-align: center; line-height: 1.05; box-shadow: var(--shadow); }
|
||
@media (prefers-color-scheme: dark){ .week-badge { color:#0B1017; } }
|
||
:root[data-theme="dark"] .week-badge { color:#0B1017; }
|
||
.p1 .week-badge { background: var(--primary); } .p2 .week-badge { background: var(--amber); }
|
||
.p3 .week-badge { background: var(--teal); } .p4 .week-badge { background: var(--primary-deep); }
|
||
.week-badge .w { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; opacity: .85; }
|
||
.week-badge .n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
|
||
.week-head h3 { margin: 6px 0 0; font-size: clamp(19px,3.2vw,23px); font-weight: 800; letter-spacing: -0.02em; }
|
||
.week-head .goal { margin-top: 4px; color: var(--ink-soft); font-size: 14.5px; }
|
||
|
||
/* Focus 3-col */
|
||
.focus { margin-top: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
|
||
.focus .fc { padding: 14px 16px; border-left: 1px solid var(--line-soft); }
|
||
.focus .fc:first-child { border-left: 0; }
|
||
.focus .fk { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
|
||
.focus .fv { margin-top: 6px; font-size: 14px; color: var(--ink); }
|
||
.focus .fv b { font-weight: 700; }
|
||
@media (max-width:600px){ .focus { grid-template-columns: 1fr; } .focus .fc { border-left: 0; border-top: 1px solid var(--line-soft); } .focus .fc:first-child { border-top: 0; } }
|
||
|
||
/* Days */
|
||
.days { display: grid; gap: 0; margin-top: 16px; }
|
||
.day { display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
|
||
.day:first-child { border-top: 0; }
|
||
.day .d { font-size: 12px; font-weight: 800; text-align: center; padding: 6px 4px; border-radius: 8px; height: fit-content; color: var(--ink-soft); background: var(--line-soft); }
|
||
.day .c h5 { margin: 2px 0 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
|
||
.day .c p { margin-top: 5px; font-size: 14px; color: var(--ink-soft); } .day .c p b { color: var(--ink); font-weight: 600; }
|
||
|
||
.meta2 { margin-top: 16px; display: grid; gap: 10px; }
|
||
.meta2 .m { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; font-size: 14px; }
|
||
.meta2 .m .lab { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; }
|
||
.meta2 .m.out .lab { color: var(--teal); } .meta2 .m.eval .lab { color: var(--primary); } .meta2 .m.dz .lab { color: var(--amber); }
|
||
.meta2 .m .txt { color: var(--ink-soft); } .meta2 .m .txt b { color: var(--ink); font-weight: 600; }
|
||
|
||
.star { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 800; color: var(--rose); background: var(--rose-soft); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
|
||
|
||
.callout { border: 1px solid var(--amber-line); border-radius: var(--radius); background: var(--amber-soft); padding: 20px 24px; }
|
||
.callout h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
|
||
.callout p { color: var(--ink-soft); font-size: 14.5px; }
|
||
.callout ul { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; display: grid; gap: 5px; }
|
||
|
||
.check { display: grid; gap: 10px; margin: 0; padding: 0; }
|
||
.check li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-soft); }
|
||
.check .box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--primary); margin-top: 4px; }
|
||
.check b { color: var(--ink); font-weight: 600; }
|
||
|
||
footer { margin-top: 46px; 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 (max-width:560px){ .day { grid-template-columns: 48px 1fr; gap: 12px; } .meta2 .m { grid-template-columns: 72px 1fr; gap: 8px; } .week-head { grid-template-columns: auto 1fr; } }
|
||
@media print { body{background:#fff;} .card,header.mast,.week-badge,nav.toc{box-shadow:none;} section{break-inside:avoid;} nav.toc{display:none;} }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="wrap">
|
||
|
||
<header class="mast">
|
||
<div class="wordmark"><b>AWESOMEDEV</b> · 수습 교육 운영안</div>
|
||
<h1>수습 8주<br>주차별 상세 교육안</h1>
|
||
<p class="lede">멘토가 이 문서 하나로 8주를 운영할 수 있게 만들었어요. 매주 <strong>목표 · 요일별 활동 · 산출물 · 평가 체크포인트</strong>를 담았고, 예절(A)·기본기(B)·실무(C) 세 트랙이 어떻게 맞물리는지 한눈에 볼 수 있어요.</p>
|
||
<div class="mast-meta">
|
||
<span class="chip"><span class="dot"></span>9월 1일 – 10월 31일 · 8주</span>
|
||
<span class="chip"><span class="dot"></span>개발 3 · 디자인 1</span>
|
||
<span class="chip"><span class="dot"></span>멘토용 (대외 배포 X)</span>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="toc">
|
||
<div class="t">운영안 목차</div>
|
||
<ol>
|
||
<li><a href="#principle"><b>00</b>운영 원칙 · 표준 일과</a></li>
|
||
<li><a href="#prep"><b>00</b>시작 전 멘토 준비</a></li>
|
||
<li><a href="#w1"><b>W1</b>온보딩 & 회사 적응</a></li>
|
||
<li><a href="#w2"><b>W2</b>기초 다지기</a></li>
|
||
<li><a href="#w3"><b>W3</b>첫 실무</a></li>
|
||
<li><a href="#w4"><b>W4</b>기본기 마무리 · 중간평가</a></li>
|
||
<li><a href="#w5"><b>W5</b>실전 티켓 ①</a></li>
|
||
<li><a href="#w6"><b>W6</b>실전 티켓 ②</a></li>
|
||
<li><a href="#w7"><b>W7</b>종합 프로젝트 · 설계</a></li>
|
||
<li><a href="#w8"><b>W8</b>구현 · 발표 · 최종평가</a></li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<!-- Principles -->
|
||
<section id="principle">
|
||
<div class="eyebrow">운영 원칙</div>
|
||
<h2>세 트랙을 매일 병행해요</h2>
|
||
<p class="sub">강의만 몰아치지 않아요. 아침엔 기본기를 배우고, 낮엔 손으로 일하고, 예절은 8주 내내 관찰합니다.</p>
|
||
<div class="card mt tracks">
|
||
<div class="track a"><div class="k">A</div><div><h4>회사 생활 · 기본 예절</h4><p>W1 집중 교육 후 8주 내내 관찰. 인사·보고·이메일·전화. <b>수습 가이드</b> 참고.</p></div></div>
|
||
<div class="track b"><div class="k">B</div><div><h4>컴퓨터 기본기</h4><p>W1~W4 매일 아침 1시간. 컴퓨터 구조·자료구조·프로그램의 변화. <b>CS 4주 커리큘럼</b> 참고.</p></div></div>
|
||
<div class="track c"><div class="k">C</div><div><h4>실무</h4><p>W3부터 점점 비중↑. 소과제 → 실전 티켓 → 종합 프로젝트.</p></div></div>
|
||
</div>
|
||
|
||
<div class="card mt time">
|
||
<div class="row"><div class="t">09:00–09:30</div><div class="v">출근 · 자리 정리 · 하루 준비</div></div>
|
||
<div class="row"><div class="t">09:30–10:30</div><div class="v"><b>기본기 학습(B)</b> — W1~4. W5부터는 실무 심화로 대체</div></div>
|
||
<div class="row"><div class="t">10:30–10:40</div><div class="v"><b>데일리 스탠드업</b> — 어제/오늘/막힌 것 한 사람당 1분</div></div>
|
||
<div class="row"><div class="t">10:40–12:00</div><div class="v">오전 활동 (그 주 핵심 과제)</div></div>
|
||
<div class="row"><div class="t">13:00–17:30</div><div class="v">오후 활동 — 실습 · 과제 · <b>코드리뷰 · 멘토링</b></div></div>
|
||
<div class="row"><div class="t">17:30–18:00</div><div class="v"><b>하루 정리 · 3줄 회고</b> (오늘 배운 것 / 막힌 것 / 궁금한 것)</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Prep -->
|
||
<section id="prep">
|
||
<div class="eyebrow">시작 전</div>
|
||
<h2>멘토 준비 체크리스트 (D-7)</h2>
|
||
<p class="sub">막상 시작했는데 줄 일이 없어 방치되는 게 최악이에요. 미리 준비합니다.</p>
|
||
<div class="card mt">
|
||
<ul class="check">
|
||
<li><span class="box"></span><div><b>멘토 1:1 배정</b> — 개발 3명(백/프론트 담당), 디자인 1명(디자인 or 프론트 리드)</div></li>
|
||
<li><span class="box"></span><div><b>수습용 태스크 풀 20개+</b> 미리 확보 — 난이도 ★~★★ 소과제·티켓 목록</div></li>
|
||
<li><span class="box"></span><div><b>계정·장비·좌석·접근권한</b> 사전 세팅 (Git·메신저·위키·개발환경)</div></li>
|
||
<li><span class="box"></span><div><b>교육 자료 준비</b> — 수습 가이드 인쇄본, CS 4주 커리큘럼, 사규·보안 문서</div></li>
|
||
<li><span class="box"></span><div><b>일정 예약</b> — 데일리 스탠드업, 주간 1:1, 4주차 중간평가, 8주차 최종평가·데모</div></li>
|
||
<li><span class="box"></span><div><b>연소근로자 노무 점검</b> — 만 18세 미만 시 근로계약·친권자 동의·근로시간(HR 확인)</div></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W1 -->
|
||
<section id="w1" class="p1">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 1 · 적응</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">1</span></div>
|
||
<div><h3>온보딩 & 회사 적응</h3><div class="goal">낯섦을 없애고, 사회인의 기본 예절을 몸에 익힌다. 아직 개발은 시키지 않는다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">아침 기본기 (B)</div><div class="fv">목·금 <b>컴퓨터 구조</b> 도입</div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv"><b>예절 집중 교육 (A)</b> + 환경 세팅</div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">첫 인사 이메일 · 온보딩 회고</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>오리엔테이션</h5><p><b>대표 환영사</b> · 회사·팀 소개 · 멘토 배정 · 사규/보안 교육 · 장비·계정 세팅 · <b>수습 가이드 배포·정독</b>.</p></div></div>
|
||
<div class="day"><div class="d">화</div><div class="c"><h5>예절 집중 ① — 태도와 보고</h5><p>A1 하루의 기본 / A2 보고·연락·상담(호렌소). <b>롤플레이:</b> 멘토에게 중간보고 말해보기.</p></div></div>
|
||
<div class="day"><div class="d">수</div><div class="c"><h5>예절 집중 ② — 소통 도구</h5><p>A3 이메일 / A4 메신저 / A5 전화. <b>실습:</b> 첫 인사 이메일 작성, 전화 응대 롤플레이.</p></div></div>
|
||
<div class="day"><div class="d">목</div><div class="c"><h5>제품·업무 이해 + 개발환경</h5><p>우리가 <b>KT엠모바일·KT알파·핀업</b>에서 하는 일 소개. 개발환경 세팅 시작. (아침: 기본기 1일차)</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>협업 규칙 워크숍</h5><p>Git 브랜치·커밋 / 코드리뷰 받는 법 / 스탠드업 / <b>30분 룰</b>. 온보딩 회고 작성·공유.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">첫 인사 이메일 1통, <b>온보딩 회고</b> 1장(뭘 배웠고 뭐가 어려웠는지)</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt">출근·시간 준수, 예절 습득 속도, 적극성·태도. (주간 1:1 기록 시작)</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">예절 동일. 목·금 디자인 환경 세팅 + 우리 서비스 UI 둘러보기.</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W2 -->
|
||
<section id="w2" class="p1">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 1 · 적응</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">2</span></div>
|
||
<div><h3>기초 다지기 — 읽는 눈 만들기</h3><div class="goal">코드와 화면을 '읽는' 눈을 만들고, 예절을 일상으로 정착시킨다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">아침 기본기 (B)</div><div class="fv">컴퓨터 구조 마무리 → <b>자료구조</b></div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">코드베이스·화면 읽기 + <b>Git 연습</b></div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">기능 분석 문서 · 연습 PR</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>코드베이스 구조 훑기</h5><p>우리 <b>React 폴더 구조</b>와 <b>Spring Boot 프로젝트 구조</b>가 어떻게 생겼는지 큰 지도 그리기.</p></div></div>
|
||
<div class="day"><div class="d">화</div><div class="c"><h5>요청 흐름 추적</h5><p>개발자도구 Network 탭으로 <b>React → REST API → Spring Boot</b> 흐름 눈으로 확인.</p></div></div>
|
||
<div class="day"><div class="d">수</div><div class="c"><h5>기능 읽기 과제</h5><p>화면/기능 하나를 골라 <b>어떻게 동작하는지 분석해 문서화</b>. 멘토와 함께 검토.</p></div></div>
|
||
<div class="day"><div class="d">목</div><div class="c"><h5>Git 실전 연습</h5><p>연습용 브랜치 생성 → 커밋 → <b>PR 올려보기</b>. 커밋 메시지 컨벤션 익히기.</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>주간 회고 · 미니 퀴즈</h5><p>1:1 면담(잘한 것 1 / 더 할 것 1). 기본기 미니 퀴즈.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">기능 분석 문서 1개, 연습 PR 1개</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt">이해력, 질문의 질(30분 룰·3요소), 예절 정착도</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">UI 인벤토리 작성(색·타이포·컴포넌트) + 개선점 5개 리포트</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W3 -->
|
||
<section id="w3" class="p2">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 2 · 실무 입문</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">3</span></div>
|
||
<div><h3>첫 실무 — 내 작업이 반영되는 경험</h3><div class="goal">아주 작은 진짜 과제를, 리뷰를 거쳐 실제로 반영해본다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">아침 기본기 (B)</div><div class="fv"><b>프로그램의 변화</b></div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">첫 소과제 <b>착수→PR→머지</b></div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">머지된 첫 PR 🎉</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>첫 소과제 배정</h5><p>안전한 것(오타·문구·간단 UI·로그 개선 등). <b>착수 전 접근 방법을 먼저 공유</b>하게 한다.</p></div></div>
|
||
<div class="day"><div class="d">화·수</div><div class="c"><h5>구현 + 중간보고</h5><p>스스로 구현. 막히면 30분 룰. 진행 상황 <b>중간보고</b> 습관 잡기. PR 작성.</p></div></div>
|
||
<div class="day"><div class="d">목</div><div class="c"><h5>리뷰 반영 → 머지 → 배포 확인</h5><p>코드리뷰 피드백 반영. <b>"내 코드가 반영되는" 첫 경험.</b> 배포 후 실제 동작 확인.</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>회고 · 1:1 · 퀴즈</h5><p>첫 실무 소감 나누기. 잘한 점·아쉬운 점 기록.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt"><b>머지된 첫 PR</b> 1건</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt">완주력, 피드백 반영 태도, 보고 습관</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">첫 디자인 개선 과제(빈 상태·버튼 상태 등) + 개발자에게 핸드오프 연습</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W4 -->
|
||
<section id="w4" class="p2">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 2 · 실무 입문</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">4</span></div>
|
||
<div><h3>기본기 마무리 · 중간평가 <span class="star">중요</span></h3><div class="goal">기본기를 '내 말로' 발표하고, 두 번째 과제로 난이도를 한 단계 올린다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">아침 기본기 (B)</div><div class="fv">통합·복습 → <b>금 미니 발표회</b></div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">두 번째 소과제 + <b>중간평가 면담</b></div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">발표자료 · 두 번째 PR</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>요청 흐름 전체 정리</h5><p>클릭 → 서버 → DB → 응답 전 과정을 그림으로 정리(기본기 총복습).</p></div></div>
|
||
<div class="day"><div class="d">화·수</div><div class="c"><h5>두 번째 소과제 (난이도 ↑)</h5><p>첫 과제보다 한 단계 위. 멘토 개입은 조금 줄인다.</p></div></div>
|
||
<div class="day"><div class="d">목</div><div class="c"><h5>발표 자료 준비</h5><p>"내가 이해한 컴퓨터/우리 시스템" 10분 발표 준비. 멘토 1:1 코칭.</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>기본기 미니 발표회 🎤 + 중간평가</h5><p>발표(어려운 말 없이 내 말로). 이어 <b>4주차 중간평가 면담</b>.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">기본기 발표자료, 두 번째 머지 PR</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt"><b>중간평가 — 전환 신호 반드시 전달.</b> "지금 이대로면 애매하다"는 피드백은 이때 줘야 한다(마지막에 처음 듣게 하지 않기)</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">발표 주제 "내가 다시 디자인한다면" — 화면 개선안 발표 + 중간평가</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W5 -->
|
||
<section id="w5" class="p3">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 3 · 실전</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">5</span></div>
|
||
<div><h3>실전 티켓 ①</h3><div class="goal">실제 백로그 티켓을 '착수→구현→리뷰→배포' 사이클대로 처리한다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">아침 (B 종료)</div><div class="fv"><b>실무 심화</b> — React 상태·Spring 계층 짧게</div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">실전 티켓 ★~★★ 처리</div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">완료 티켓 1~2건</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>티켓 배정 · 설계</h5><p>실제 티켓 배정. 접근 방법·예상 소요를 멘토와 합의.</p></div></div>
|
||
<div class="day"><div class="d">화–목</div><div class="c"><h5>구현 · 리뷰 · 반영 반복</h5><p>사이클을 스스로 돌린다. 매일 중간보고. 코드리뷰 반영.</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>회고 · 1:1</h5><p>티켓 마무리·배포 확인. 주간 피드백 기록.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">완료·배포된 티켓 1~2건</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt">자기주도성, 코드 품질 성장, 같은 지적 반복 여부</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">실제 개선 디자인 1건 → 개발 반영까지 따라가기</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W6 -->
|
||
<section id="w6" class="p3">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 3 · 실전</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">6</span></div>
|
||
<div><h3>실전 티켓 ② — 더 독립적으로</h3><div class="goal">난이도 ★★, 멘토 개입을 줄이고 스스로 더 많이 판단한다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">아침</div><div class="fv">실무 심화 · 코드리뷰 딥다이브</div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">독립적 티켓 처리 + <b>프로젝트 예고</b></div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">완료 티켓 · 프로젝트 팀 구성</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>티켓 배정 (난이도 ★★)</h5><p>조금 더 손이 가는 티켓. 설계를 스스로 제안하게 한다.</p></div></div>
|
||
<div class="day"><div class="d">화–목</div><div class="c"><h5>독립 구현</h5><p>멘토는 질문에 답하되 먼저 나서지 않는다. 막힘 해결력 관찰.</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>종합 프로젝트 예고 · 팀 구성</h5><p>다음 2주 프로젝트 주제 후보 공유, 역할·PM 롤 논의. 회고·1:1.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">완료 티켓, 프로젝트 킥오프 준비</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt">독립성, 문제해결력, 협업 태도</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">프로젝트에서 맡을 기획·화면 방향 구상 시작</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W7 -->
|
||
<section id="w7" class="p4">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 4 · 종합 프로젝트</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">7</span></div>
|
||
<div><h3>종합 프로젝트 — 기획 · 설계</h3><div class="goal">4명이 함께 작지만 끝까지 가는 기능 하나를 기획하고 설계한다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">협업 구조</div><div class="fv">디자인 1(기획·화면) + 개발 3(백/프론트), <b>PM 롤 지정</b></div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">주제 확정 → 설계 → 개발 착수</div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">기획서 · 화면 설계 · 태스크 보드</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월</div><div class="c"><h5>주제 확정 · 역할 분담</h5><p>실제 제품에 붙일 수 있는 작은 기능 하나. 역할·PM 롤 지정.</p></div></div>
|
||
<div class="day"><div class="d">화·수</div><div class="c"><h5>기획 · 설계</h5><p>기획서, 화면 설계, <b>API 설계</b>, 태스크 보드 작성. 멘토 리뷰.</p></div></div>
|
||
<div class="day"><div class="d">목·금</div><div class="c"><h5>개발 착수 · 중간 점검</h5><p>구현 시작. 매일 스탠드업으로 진행 공유. 금요일 진행률 점검.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">기획서, 화면 설계, 태스크 보드, 초기 구현</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt">협업·소통, 주도성, 계획 대비 실행</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">기획·화면 주도 + 개발자에게 스펙 핸드오프</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- W8 -->
|
||
<section id="w8" class="p4">
|
||
<div class="card">
|
||
<span class="phase-tag">Phase 4 · 종합 프로젝트</span>
|
||
<div class="week-head mt-s">
|
||
<div class="week-badge"><span class="w">WEEK</span><span class="n">8</span></div>
|
||
<div><h3>구현 · 발표 · 최종평가 <span class="star">피날레</span></h3><div class="goal">완성하고, 데모로 발표하고, 8주를 마무리한다.</div></div>
|
||
</div>
|
||
<div class="focus">
|
||
<div class="fc"><div class="fk">하이라이트</div><div class="fv"><b>데모 발표</b> (경영진·팀 대상)</div></div>
|
||
<div class="fc"><div class="fk">이번 주 핵심</div><div class="fv">완성 → 발표 → 최종평가·전환 면담</div></div>
|
||
<div class="fc"><div class="fk">산출물</div><div class="fv">동작 데모 · 발표자료 · 회고</div></div>
|
||
</div>
|
||
<div class="days">
|
||
<div class="day"><div class="d">월–수</div><div class="c"><h5>구현 · 통합 · 테스트</h5><p>기능 완성, 통합, 버그 정리. 실제로 동작하는 상태까지.</p></div></div>
|
||
<div class="day"><div class="d">목</div><div class="c"><h5>리허설 · 마무리</h5><p>데모 시나리오 점검, 발표 리허설, 남은 버그 정리.</p></div></div>
|
||
<div class="day"><div class="d">금</div><div class="c"><h5>데모 발표 🎤 + 최종평가</h5><p>15분 데모 발표. <b>자기평가서</b> 제출. 이어 <b>최종 평가 · 전환 면담</b>.</p></div></div>
|
||
</div>
|
||
<div class="meta2">
|
||
<div class="m out"><span class="lab">산출물</span><span class="txt">동작 데모, 발표자료, 프로젝트 회고, 자기평가서</span></div>
|
||
<div class="m eval"><span class="lab">평가 체크</span><span class="txt"><b>최종평가 — 루브릭 종합(멘토 평가 + 데모 + 자기평가) → 전환 결정.</b> 결과 통보 + 전환 시 다음 3개월 성장 목표 함께 제시</span></div>
|
||
<div class="m dz"><span class="lab">디자이너</span><span class="txt">프로젝트 화면·기획 발표 파트 담당</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Closing -->
|
||
<section id="close">
|
||
<div class="callout">
|
||
<h3>📌 8주 내내 지킬 것</h3>
|
||
<ul>
|
||
<li><b>주간 1:1은 거르지 않기</b> — 8번의 기록이 쌓이면 최종 평가가 인상이 아닌 근거가 됩니다.</li>
|
||
<li><b>나쁜 신호는 빨리, 4주차 안에</b> — 전환이 어렵겠다는 판단은 반드시 중간에 공유합니다.</li>
|
||
<li><b>완성도보다 성장 속도·태도</b> — 고졸 신입에게 지금의 실력보다 6개월 뒤 그림을 봅니다.</li>
|
||
</ul>
|
||
</div>
|
||
<p class="sub mt-s" style="font-size:13.5px;">함께 쓰는 문서: <b>수습 가이드</b>(학생 배포용) · <b>CS 기본기 4주 커리큘럼</b>(Layer B) · <b>평가 루브릭</b>(작성 예정).</p>
|
||
</section>
|
||
|
||
<footer>
|
||
<span>AWESOMEDEV · 수습 8주 상세 교육 운영안 (멘토용)</span>
|
||
<span>2026 · 개정 시 최신본으로 대체</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|