AWESOMEDEV
111590104e
- 로그인/회원가입/아이디찾기/비밀번호재설정 (세션 기반) - 대시보드(주차별 진도 체크리스트), 학습 문서 뷰어(17종), 과제 제출/멘토 피드백 - 코딩 기초·개발 환경 설치 가이드 학습 페이지 - 전 소스 한국어 학습 주석 — 수습생 교육용 저장소 - Docker 배포 구성 (Caddy + Spring Boot + PG + Gitea) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
940 lines
59 KiB
HTML
940 lines
59 KiB
HTML
<title>8주차 상세 강의안 · 구현 · 발표 · 최종평가 — AWESOMEDEV 수습 교육</title>
|
||
<style>
|
||
: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.7; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
|
||
.wrap { max-width: 860px; 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(27px,5.4vw,40px); line-height: 1.15; 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: 22px; 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: 14px; padding: 3px 0; }
|
||
nav.toc a b { color: var(--primary); font-weight: 800; min-width: 40px; }
|
||
nav.toc a:hover { color: var(--primary); }
|
||
@media (max-width:560px){ nav.toc ol { grid-template-columns: 1fr; } }
|
||
section { margin-top: clamp(30px,5vw,46px); scroll-margin-top: 20px; }
|
||
section > h2 { font-size: clamp(20px,3.4vw,25px); font-weight: 800; letter-spacing: -0.025em; margin: 12px 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: 16px; }
|
||
p { margin: 0; } strong { font-weight: 700; }
|
||
.day-div { margin-top: clamp(38px,6vw,56px); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
|
||
.day-badge { width: 58px; height: 58px; border-radius: 14px; background: var(--primary); color: #fff; display: grid; place-items: center; text-align: center; line-height: 1.05; box-shadow: var(--shadow); }
|
||
@media (prefers-color-scheme: dark){ .day-badge { color:#0B1017; } }
|
||
:root[data-theme="dark"] .day-badge { color:#0B1017; }
|
||
.day-badge .w { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; opacity: .85; }
|
||
.day-badge .n { font-size: 22px; font-weight: 800; }
|
||
.day-div h2 { margin: 0; font-size: clamp(21px,3.6vw,27px); font-weight: 800; letter-spacing: -0.025em; }
|
||
.day-div .dm { margin-top: 3px; color: var(--ink-soft); font-size: 14px; }
|
||
.session { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
|
||
.s-head { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); background: var(--primary-soft); }
|
||
.s-head .tag { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); font-variant-numeric: tabular-nums; }
|
||
.s-head h3 { margin: 5px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
|
||
.s-head .dur { margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
|
||
.s-body { padding: 18px 20px; display: grid; gap: 16px; }
|
||
.block > .bt { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
|
||
.block .bt .ic { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; }
|
||
.bt .ic.obj { background: var(--primary-soft); } .bt .ic.run { background: var(--line-soft); }
|
||
.bt .ic.script { background: var(--primary-soft); } .bt .ic.act { background: var(--teal-soft); }
|
||
.bt .ic.check { background: var(--amber-soft); } .bt .ic.pit { background: var(--rose-soft); }
|
||
.obj-list { margin: 0; padding: 0; display: grid; gap: 6px; }
|
||
.obj-list li { list-style: none; padding-left: 24px; position: relative; font-size: 14.5px; color: var(--ink); }
|
||
.obj-list li::before { content: "✓"; position: absolute; left: 2px; color: var(--primary); font-weight: 800; }
|
||
.prep { font-size: 13.5px; color: var(--ink-soft); background: var(--code-bg); border-radius: 9px; padding: 10px 14px; }
|
||
.run { display: grid; gap: 0; }
|
||
.run .r { display: grid; grid-template-columns: 66px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
|
||
.run .r:first-child { border-top: 0; }
|
||
.run .r .tm { font-size: 12.5px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||
.run .r .ac { font-size: 14px; color: var(--ink-soft); } .run .r .ac b { color: var(--ink); font-weight: 600; }
|
||
.script { border: 1px solid var(--primary-soft); border-left: 3px solid var(--primary); border-radius: 9px; background: color-mix(in srgb, var(--primary-soft) 40%, transparent); padding: 12px 15px; }
|
||
.script .who { font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 5px; }
|
||
.script p { font-size: 14px; color: var(--ink); line-height: 1.6; }
|
||
.script p + p { margin-top: 8px; }
|
||
.script em { color: var(--ink-soft); font-style: normal; font-size: 13px; }
|
||
.tpl { border: 1px solid var(--amber-line); background: var(--code-bg); border-radius: 10px; overflow: hidden; }
|
||
.tpl .cap { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--amber); background: var(--amber-soft); padding: 7px 15px; border-bottom: 1px solid var(--amber-line); text-transform: uppercase; }
|
||
.tpl pre { margin: 0; padding: 14px 16px; font-family: "SF Mono","Cascadia Code","Consolas",ui-monospace,monospace; font-size: 13px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; word-break: break-word; letter-spacing: 0; }
|
||
.tpl .hl { color: var(--primary); font-weight: 600; }
|
||
.act-box { border: 1px solid color-mix(in srgb,var(--teal) 30%,transparent); background: var(--teal-soft); border-radius: 10px; padding: 13px 16px; }
|
||
.act-box p { font-size: 14px; color: var(--ink); } .act-box p b { font-weight: 700; }
|
||
.act-box ol, .act-box ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); display: grid; gap: 5px; }
|
||
.check-box { border: 1px solid var(--amber-line); background: var(--amber-soft); border-radius: 10px; padding: 13px 16px; }
|
||
.check-box p { font-size: 13.5px; color: var(--ink-soft); } .check-box b { color: var(--ink); }
|
||
.check-box ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13.5px; color: var(--ink); }
|
||
.pit-box { border: 1px solid color-mix(in srgb,var(--rose) 30%,transparent); background: var(--rose-soft); border-radius: 10px; padding: 13px 16px; }
|
||
.pit-box .row { font-size: 13.5px; color: var(--ink-soft); } .pit-box .row + .row { margin-top: 8px; }
|
||
.pit-box b { color: var(--rose); }
|
||
code { font-family: "SF Mono","Cascadia Code","Consolas",ui-monospace,monospace; font-size: 0.9em; background: var(--code-bg); padding: 1px 6px; border-radius: 5px; }
|
||
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; }
|
||
.next { margin-top: 22px; border: 1px dashed var(--primary); border-radius: var(--radius); padding: 18px 22px; background: var(--primary-soft); }
|
||
.next b { color: var(--primary-deep); }
|
||
@media (max-width:560px){ .run .r { grid-template-columns: 58px 1fr; gap: 10px; } }
|
||
@media print { body{background:#fff;} .card,header.mast,.session,nav.toc,.day-badge{box-shadow:none;} .session{break-inside:avoid;} nav.toc{display:none;} }
|
||
</style>
|
||
|
||
<div class="wrap">
|
||
|
||
<header class="mast">
|
||
<div class="wordmark"><b>AWESOMEDEV</b> · 수습 상세 강의안 · 8 / 8</div>
|
||
<h1>8주차 상세 강의안<br>구현 · 발표 · 최종평가</h1>
|
||
<p class="lede">드디어 마지막 주입니다. 이번 주는 만들던 것을 실제로 동작하는 상태까지 완성하고, 경영진과 팀 앞에서 데모로 발표하며, 8주간의 성장을 함께 돌아보고 마무리합니다. 금요일에는 최종 평가와 전환 면담으로 다음 여정을 이야기합니다.</p>
|
||
<div class="mast-meta">
|
||
<span class="chip"><span class="dot"></span>수습생 4명 · 개발 3 · 디자인 1</span>
|
||
<span class="chip"><span class="dot"></span>미림마이스터고 3학년</span>
|
||
<span class="chip"><span class="dot"></span>최종 주차 · 전환 결정</span>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="toc">
|
||
<div class="t">이번 주 목차</div>
|
||
<ol>
|
||
<li><a href="#d1"><b>월</b> 구현 스프린트 · 기능 완성</a></li>
|
||
<li><a href="#d2"><b>화</b> 통합 · 연결하기</a></li>
|
||
<li><a href="#d3"><b>수</b> 버그 정리 · 안정화</a></li>
|
||
<li><a href="#d4"><b>목</b> 리허설 · 마무리</a></li>
|
||
<li><a href="#d5"><b>금</b> 데모 발표 · 최종 면담</a></li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<section>
|
||
<div class="card">
|
||
<p style="font-size:14.5px;color:var(--ink-soft)"><strong style="color:var(--ink)">6블록 틀</strong>(학습목표 · 진행표 · 멘토 스크립트 · 실습 · 이해 확인 · 흔한 실수)은 1주차 강의안과 동일합니다. 처음 여시는 멘토는 1주차 안내 카드를 먼저 참고하세요.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== 월요일 ===================== -->
|
||
<div class="day-div" id="d1">
|
||
<div class="day-badge"><div class="w">MON</div><div class="n">월</div></div>
|
||
<div>
|
||
<h2>구현 스프린트 · 기능 완성</h2>
|
||
<div class="dm">오늘의 목표: 남은 기능을 끝까지 밀어붙여 "실제로 동작하는" 화면을 만든다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 1 · 세션 1 · 오전</div>
|
||
<h3>아침 스탠드업 + 프로젝트 마무리 착수</h3>
|
||
<div class="dur">약 40분 (스탠드업 15분 + 착수 25분)</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>이번 주에 "완성"이 무엇인지, 각자 남은 일이 무엇인지 말로 정리한다.</li>
|
||
<li>마무리 주간의 스탠드업 리듬(어제·오늘·막힌 곳)을 몸에 익힌다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–5분</div><div class="ac"><b>멘토 오프닝.</b> "이번 주가 마지막 주"라는 사실을 담담하고 따뜻하게 알림.</div></div>
|
||
<div class="r"><div class="tm">5–20분</div><div class="ac"><b>스탠드업 한 바퀴.</b> 4명이 순서대로 어제 한 일 · 오늘 할 일 · 막힌 곳을 한 문장씩.</div></div>
|
||
<div class="r"><div class="tm">20–35분</div><div class="ac"><b>남은 작업 쪼개기.</b> 각자 오늘 끝낼 기능 1~2개를 화이트보드에 붙임.</div></div>
|
||
<div class="r"><div class="tm">35–40분</div><div class="ac"><b>착수.</b> 자리로 돌아가 바로 코딩 시작.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"자, 드디어 마지막 주예요. 지난 7주 동안 정말 많이 컸어요. 이번 주는 새로 배우는 주가 아니라, 여러분이 만들던 걸 끝까지 완성해서 자랑스럽게 보여주는 주예요."</p>
|
||
<p>"스탠드업 규칙 기억하죠? 딱 세 가지만 말해요. 어제 뭐 했는지, 오늘 뭐 할 건지, 막힌 게 있는지. 막힌 걸 말하는 건 부끄러운 게 아니라 제일 잘하는 거예요. 그래야 제가 도와줄 수 있어요."</p>
|
||
<p><em>디자이너에게: "OO은 오늘부터 발표에서 보여줄 화면이랑 기획 흐름을 다듬어 주세요. 개발 팀이 완성하는 화면이랑 계속 맞춰보면서요."</em></p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 스탠드업 워크시트</div>
|
||
<div class="act-box">
|
||
<p><b>오늘의 마무리 보드</b>를 각자 채웁니다. 포스트잇 한 장에 아래 대본을 그대로 옮겨 화이트보드에 붙이세요.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">오늘의 마무리 보드 (각자 작성)</div>
|
||
<pre>이름: <span class="hl">________</span>
|
||
|
||
[어제 한 일] <span class="hl">________________________</span>
|
||
[오늘 끝낼 기능 ①] <span class="hl">____________________</span>
|
||
[오늘 끝낼 기능 ②] <span class="hl">____________________</span>
|
||
[지금 막힌 곳] <span class="hl">______________________</span>
|
||
[도움이 필요한가?] ☐ 혼자 가능 ☐ 멘토 도움</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>착수 전에 한 명씩 물어봅니다.</p>
|
||
<ul>
|
||
<li>"오늘 끝낼 기능을 딱 한 문장으로 말해볼래요?"</li>
|
||
<li>"그게 끝났는지 어떻게 알 수 있어요? (완료 기준)"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 마지막 주라고 갑자기 새 기능을 욕심내서 벌린다.</div>
|
||
<div class="row"><b>대처</b> "완성이 목표지 확장이 목표가 아니에요. 지금 있는 걸 동작하게 만드는 게 먼저예요"라고 범위를 좁혀준다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 1 · 세션 2 · 오전~오후</div>
|
||
<h3>기능 완성 스프린트 — 동작하는 상태까지</h3>
|
||
<div class="dur">약 3시간 (중간 체크 포함)</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>맡은 기능을 화면에서 실제로 눌러서 동작하는 상태까지 만든다.</li>
|
||
<li>"됐다고 생각한 것"과 "정말 되는 것"의 차이를 직접 확인한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–70분</div><div class="ac"><b>집중 코딩 1.</b> 각자 기능 ①에 몰입. 멘토는 조용히 순회하며 어깨너머로 관찰.</div></div>
|
||
<div class="r"><div class="tm">70–80분</div><div class="ac"><b>중간 데모.</b> 한 명씩 지금까지 만든 화면을 30초씩 옆 사람에게 보여줌.</div></div>
|
||
<div class="r"><div class="tm">80–150분</div><div class="ac"><b>집중 코딩 2.</b> 기능 ②로 넘어가거나 ①의 마무리.</div></div>
|
||
<div class="r"><div class="tm">150–180분</div><div class="ac"><b>오늘 만든 것 커밋.</b> 동작하는 지점에서 커밋 메시지 남기고 push.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 (순회 중, 막힌 학생에게)</div>
|
||
<p>"화면은 나왔는데 버튼이 안 먹는 거죠? 좋아요, 같이 봐요. 우선 버튼 눌렀을 때 함수가 진짜 불리는지부터 확인해요. <code>console.log</code> 한 줄 찍어볼까요?"</p>
|
||
<p>"거봐요, 로그가 안 찍히죠? 그럼 문제는 함수 안이 아니라 <b>연결</b>이에요. <code>onClick</code>이 제대로 걸렸는지 봐요. 이렇게 하나씩 좁혀가는 거예요. 한 번에 다 보려고 하면 오히려 안 보여요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 완료 확인 체크</div>
|
||
<div class="act-box">
|
||
<p>기능 하나를 "끝났다"고 말하기 전에, 아래 3가지를 <b>실제로 클릭해서</b> 확인합니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">"진짜 되는가" 셀프 체크 (기능마다)</div>
|
||
<pre>기능 이름: <span class="hl">__________</span>
|
||
|
||
☐ 정상 경우: 제대로 입력하면 기대한 화면이 나온다
|
||
☐ 빈 경우: 아무것도 입력 안 하고 눌러도 앱이 안 터진다
|
||
☐ 이상한 경우: 이상한 값을 넣어도 에러 화면 대신
|
||
안내 메시지가 나온다
|
||
|
||
세 개 다 ☑ 되면 → git commit -m "<span class="hl">___기능 완성___</span>"</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>중간 데모 때 각자에게:</p>
|
||
<ul>
|
||
<li>"방금 보여준 게 정상 경우죠? 빈 값 넣으면 어떻게 돼요?" (즉석에서 눌러보게 한다)</li>
|
||
<li>"이 커밋 메시지만 보고 나중에 무슨 작업인지 알 수 있어요?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 화면에 보이기만 하면 "됐다"고 넘어가고, 예외 경우를 한 번도 안 눌러본다.</div>
|
||
<div class="row"><b>대처</b> 멘토가 직접 그 자리에서 빈 값·이상한 값을 넣어 앱을 한 번 "터뜨려" 보이고, "이게 발표날 나면 진땀 나요"라고 웃으며 예방의 필요를 느끼게 한다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 화요일 ===================== -->
|
||
<div class="day-div" id="d2">
|
||
<div class="day-badge"><div class="w">TUE</div><div class="n">화</div></div>
|
||
<div>
|
||
<h2>통합 · 연결하기</h2>
|
||
<div class="dm">오늘의 목표: 따로 만든 조각들을 하나의 앱으로 연결해 처음부터 끝까지 흘러가게 한다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 2 · 세션 1 · 오전</div>
|
||
<h3>아침 스탠드업 (포인터 세션)</h3>
|
||
<div class="dur">약 15분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>어제 완성분을 공유하고, 오늘 "연결"의 목표를 한 문장으로 세운다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>진행 안내</div>
|
||
<div class="act-box">
|
||
<p>아침 스탠드업은 어제와 같은 <b>마무리 보드</b> 형식으로 짧게 진행합니다. 오늘은 "내 기능이 옆 사람 기능과 어디서 만나는가"를 한 마디씩 덧붙이게 하세요. (CS 기본기가 필요한 팀원이 있으면 <b>CS 기본기 4주 커리큘럼 문서의 해당 일차를 진행</b>하되, 마지막 주인 만큼 프로젝트 완성이 우선입니다.)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 2 · 세션 2 · 오전~오후</div>
|
||
<h3>통합 작업 — 프론트와 데이터를 잇다</h3>
|
||
<div class="dur">약 3시간 30분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>React 화면(프론트)과 데이터(백엔드/API)를 연결해 실제 데이터가 화면에 뜨게 한다.</li>
|
||
<li>처음 화면부터 마지막 화면까지 "한 흐름(사용자 시나리오)"으로 이어본다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–15분</div><div class="ac"><b>연결 지도 그리기.</b> 화면 → 어떤 데이터를 부르는지 화살표로 칠판에 그림.</div></div>
|
||
<div class="r"><div class="tm">15–90분</div><div class="ac"><b>연결 1.</b> 각자 자기 화면에서 실제 데이터를 <code>fetch</code>해 뿌리기.</div></div>
|
||
<div class="r"><div class="tm">90–100분</div><div class="ac"><b>합류 점검.</b> 두 명씩 짝지어 서로 화면을 이어 눌러봄.</div></div>
|
||
<div class="r"><div class="tm">100–190분</div><div class="ac"><b>전체 시나리오 연결.</b> 로그인 → 목록 → 상세처럼 처음부터 끝까지 이어봄.</div></div>
|
||
<div class="r"><div class="tm">190–210분</div><div class="ac"><b>통합본 커밋 & 공유.</b> 하나로 합친 버전을 push하고 화면 녹화(30초).</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"어제까지는 각자 자기 방을 꾸민 거예요. 오늘은 그 방들을 복도로 연결해서 한 집으로 만드는 날이에요. 손님(사용자)이 현관에서 들어와서 방까지 쭉 걸어갈 수 있어야 해요."</p>
|
||
<p>"연결할 때 제일 자주 나는 문제가 뭔지 알아요? 데이터가 안 오는 게 아니라 <b>모양이 다른</b> 거예요. 백엔드는 <code>userName</code>으로 줬는데 화면은 <code>name</code>을 찾고 있으면 빈칸이 떠요. 그럴 땐 브라우저 개발자도구 Network 탭에서 진짜 온 데이터를 눈으로 확인해요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 연결 지도</div>
|
||
<div class="act-box">
|
||
<p>코딩 전에 <b>연결 지도</b>를 먼저 채웁니다. 내 화면이 어떤 데이터를 필요로 하는지 말로 정리하면 코드가 쉬워집니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">내 화면 연결 지도</div>
|
||
<pre>내 화면 이름: <span class="hl">____________</span>
|
||
|
||
이 화면이 열릴 때 불러야 할 데이터:
|
||
주소(API): <span class="hl">/api/________</span>
|
||
받는 것: <span class="hl">____________________</span>
|
||
|
||
화면에 보여줄 항목:
|
||
① <span class="hl">________</span> ← 데이터의 <span class="hl">______</span> 필드
|
||
② <span class="hl">________</span> ← 데이터의 <span class="hl">______</span> 필드
|
||
|
||
데이터가 안 왔을 때 화면: ☐ 로딩중 표시 ☐ 빈 목록 안내</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>합류 점검 때 짝끼리 서로 물어보게 합니다.</p>
|
||
<ul>
|
||
<li>"이 화면은 데이터 오기 전에 뭐가 보여? 빈 화면이면 안 돼."</li>
|
||
<li>"Network 탭에서 진짜 온 데이터랑 화면에 뜬 게 같아?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 각자 자기 브랜치에서만 동작하고, 합쳤더니 충돌(conflict)로 앱이 안 켜진다.</div>
|
||
<div class="row"><b>대처</b> 오전 중 한 번은 반드시 <code>main</code>으로 합쳐보게 하고, 충돌 해결을 멘토가 옆에서 한 번 같이 해준다. "합치는 건 자주 할수록 안 아파요"를 반복.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 수요일 ===================== -->
|
||
<div class="day-div" id="d3">
|
||
<div class="day-badge"><div class="w">WED</div><div class="n">수</div></div>
|
||
<div>
|
||
<h2>버그 정리 · 안정화</h2>
|
||
<div class="dm">오늘의 목표: 남은 버그를 잡고, 발표 때 실제로 보여줄 흐름이 끊김 없이 돌게 만든다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 3 · 세션 1 · 오전</div>
|
||
<h3>아침 스탠드업 + 버그 목록 만들기</h3>
|
||
<div class="dur">약 30분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>지금 남은 문제들을 한 곳에 모아 "고칠 순서"를 정한다.</li>
|
||
<li>모든 버그가 똑같이 급하지 않다는 것(우선순위)을 이해한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–10분</div><div class="ac"><b>스탠드업.</b> 어제 통합에서 깨진 곳을 각자 한 가지씩 말함.</div></div>
|
||
<div class="r"><div class="tm">10–25분</div><div class="ac"><b>버그 보드 채우기.</b> 발견된 문제를 포스트잇으로 다 붙이고 급함/안급함으로 나눔.</div></div>
|
||
<div class="r"><div class="tm">25–30분</div><div class="ac"><b>분배.</b> 급한 것부터 각자 이름표를 붙임.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"버그가 많아 보여도 걱정 마요. 프로 개발자도 발표 전엔 다 이래요. 중요한 건 <b>다 고치는 게 아니라 발표에 보여줄 길을 매끄럽게 만드는 것</b>이에요."</p>
|
||
<p>"그래서 오늘은 버그를 두 줄로 나눠요. 왼쪽은 '발표 흐름에서 사용자가 만나는 것', 오른쪽은 '깊이 들어가야 보이는 것'. 왼쪽부터 잡아요. 오른쪽은 회고에 '다음에 개선'으로 적으면 그것도 훌륭한 결과예요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 버그 보드</div>
|
||
<div class="act-box">
|
||
<p>팀 공용 <b>버그 보드</b>를 채웁니다. 각 버그를 아래 형식으로 적어야 나중에 다시 재현할 수 있습니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">버그 카드 (한 장에 하나)</div>
|
||
<pre>[무엇을 했더니] <span class="hl">______________________</span>
|
||
[무엇이 나왔나] <span class="hl">______________________</span>
|
||
[원래 나와야 할 것] <span class="hl">__________________</span>
|
||
|
||
발표 흐름에 포함? ☐ 예(급함) ☐ 아니오(나중)
|
||
담당: <span class="hl">______</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>분배 직전에:</p>
|
||
<ul>
|
||
<li>"이 버그, 발표 시연에서 심사위원이 볼까요 안 볼까요?"</li>
|
||
<li>"제일 먼저 잡아야 할 버그 하나를 고른다면?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 눈에 잘 안 띄지만 재밌어 보이는 버그부터 붙잡고 반나절을 쓴다.</div>
|
||
<div class="row"><b>대처</b> "그건 오른쪽 줄이에요. 발표 길부터 뚫고, 시간 남으면 돌아와요"라고 우선순위로 되돌린다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 3 · 세션 2 · 오후</div>
|
||
<h3>안정화 스프린트 — 발표 흐름 끝까지 돌리기</h3>
|
||
<div class="dur">약 3시간</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>발표에서 보여줄 시나리오를 처음부터 끝까지 한 번도 안 끊고 돌린다.</li>
|
||
<li>버그를 고친 뒤 "다시 눌러 확인"하는 습관을 익힌다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–90분</div><div class="ac"><b>급한 버그 잡기.</b> 각자 왼쪽 줄(발표 흐름) 버그부터 처리.</div></div>
|
||
<div class="r"><div class="tm">90–120분</div><div class="ac"><b>전체 통과 시험 1회.</b> 팀 전원이 모여 시작→끝 시나리오를 한 번 쭉 실행.</div></div>
|
||
<div class="r"><div class="tm">120–170분</div><div class="ac"><b>남은 흐름 버그 처리.</b> 통과 시험에서 끊긴 지점 고침.</div></div>
|
||
<div class="r"><div class="tm">170–180분</div><div class="ac"><b>오늘 결과 커밋 + 회고 메모.</b> 못 고친 건 "다음에 개선"으로 기록.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 (버그 하나 고친 학생에게)</div>
|
||
<p>"고쳤어요? 좋아요! 그런데 여기서 제일 중요한 한 가지. 고쳤다고 바로 다음으로 넘어가지 말고, <b>방금 그 버그가 났던 그 동작을 다시 한 번 그대로 눌러봐요.</b> 진짜 사라졌는지 눈으로 확인해야 해요."</p>
|
||
<p>"그리고 하나 더. 고치다가 옆 기능이 같이 깨지는 경우가 많아요. 그래서 고친 뒤에는 짧게라도 전체를 한 번 훑는 거예요. 이걸 잘하면 발표날 사고가 확 줄어요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 발표 흐름 통과표</div>
|
||
<div class="act-box">
|
||
<p>팀이 함께 <b>발표 흐름 통과표</b>를 만들고, 오후에 한 번은 전 구간 ☑를 목표로 합니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">발표 시나리오 통과표 (팀 공용)</div>
|
||
<pre>1단계 <span class="hl">첫 화면 진입</span> ................ ☐ 통과
|
||
2단계 <span class="hl">___________________</span> .......... ☐ 통과
|
||
3단계 <span class="hl">___________________</span> .......... ☐ 통과
|
||
4단계 <span class="hl">___________________</span> .......... ☐ 통과
|
||
5단계 <span class="hl">마무리 화면</span> ................ ☐ 통과
|
||
|
||
전 구간 한 번에 통과한 시각: <span class="hl">__:__</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>전체 통과 시험 후:</p>
|
||
<ul>
|
||
<li>"방금 어디서 끊겼죠? 그게 급한 버그로 보드에 있나요?"</li>
|
||
<li>"버그 고친 뒤에 다시 눌러 확인했어요?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 데모 데이터가 없어서 발표 때 화면이 텅 비어 보인다.</div>
|
||
<div class="row"><b>대처</b> 오늘 안에 "보기 좋은 예시 데이터"를 미리 넣어두게 한다. 빈 화면보다 채워진 화면이 훨씬 잘 전달된다는 걸 실제로 비교해 보인다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 목요일 ===================== -->
|
||
<div class="day-div" id="d4">
|
||
<div class="day-badge"><div class="w">THU</div><div class="n">목</div></div>
|
||
<div>
|
||
<h2>리허설 · 마무리</h2>
|
||
<div class="dm">오늘의 목표: 데모 시나리오를 확정하고, 실제처럼 발표 리허설을 하며, 남은 버그를 정리한다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 4 · 세션 1 · 오전</div>
|
||
<h3>아침 스탠드업 + 데모 시나리오 확정</h3>
|
||
<div class="dur">약 50분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>내일 발표에서 "누가, 어느 화면을, 어떤 순서로" 보여줄지 확정한다.</li>
|
||
<li>15분 발표의 뼈대(문제 → 우리가 만든 것 → 시연 → 배운 점)를 잡는다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–10분</div><div class="ac"><b>스탠드업.</b> 어제 남은 버그와 오늘 리허설 목표 공유.</div></div>
|
||
<div class="r"><div class="tm">10–30분</div><div class="ac"><b>발표 뼈대 짜기.</b> 4개 파트(문제/솔루션/시연/회고)에 담당자 배정.</div></div>
|
||
<div class="r"><div class="tm">30–45분</div><div class="ac"><b>시연 대본 초안.</b> 시연 담당이 클릭 순서를 한 줄씩 적음.</div></div>
|
||
<div class="r"><div class="tm">45–50분</div><div class="ac"><b>디자이너 파트 확인.</b> 화면·기획 발표 흐름을 발표 뼈대에 끼워 맞춤.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"발표는 코딩이랑 달라요. 잘 만든 걸 <b>잘 전하는 것</b>까지가 실력이에요. 15분이면 생각보다 짧아요. 그래서 순서를 정해둬야 안 헤매요."</p>
|
||
<p>"순서는 간단해요. ①우리가 풀려던 문제가 뭐였는지, ②그래서 뭘 만들었는지, ③실제로 이렇게 됩니다(시연), ④8주 동안 뭘 배웠는지. 이 네 칸만 채우면 발표가 돼요."</p>
|
||
<p><em>디자이너에게: "OO은 ②와 함께 화면을 어떻게 설계했는지, 왜 이렇게 배치했는지 기획 이야기를 맡아주세요. 개발자들이 만든 걸 '왜'로 이어주는 다리예요."</em></p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 발표 대본 뼈대</div>
|
||
<div class="act-box">
|
||
<p>팀이 함께 <b>발표 대본 뼈대</b>를 채웁니다. 담당자와 대략의 시간까지 적어야 리허설이 가능합니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">15분 발표 대본 뼈대 (팀 공용)</div>
|
||
<pre>① 문제 (약 2분) 담당 <span class="hl">____</span>
|
||
"우리는 <span class="hl">________</span> 문제를 풀고 싶었습니다."
|
||
② 솔루션 (약 3분) 담당 <span class="hl">____</span> + 디자이너 <span class="hl">____</span>
|
||
"그래서 <span class="hl">________</span> 을 만들었습니다."
|
||
③ 시연 (약 7분) 담당 <span class="hl">____</span>
|
||
클릭 순서: <span class="hl">_______________________</span>
|
||
④ 배운 점 (약 3분) 담당 <span class="hl">____</span>
|
||
"8주 동안 가장 크게 배운 것: <span class="hl">________</span>"</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>뼈대를 다 채운 뒤:</p>
|
||
<ul>
|
||
<li>"시연에서 첫 클릭이 뭐예요? 마지막 클릭은요?"</li>
|
||
<li>"내 파트를 한 문장으로 시작한다면 무슨 말로 열래요?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 기능을 전부 다 보여주려다 15분을 훌쩍 넘기고 핵심이 묻힌다.</div>
|
||
<div class="row"><b>대처</b> "제일 자랑스러운 흐름 하나에 집중해요. 다 보여주는 것보다 하나를 확실히 보여주는 게 강해요"라고 덜어내게 돕는다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 4 · 세션 2 · 오후</div>
|
||
<h3>발표 리허설 — 실전처럼 두 번</h3>
|
||
<div class="dur">약 2시간 30분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>실제 장비·실제 화면으로 처음부터 끝까지 리허설을 완주한다.</li>
|
||
<li>발표 중 사고(끊김·질문)에 대응하는 법을 미리 연습한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–30분</div><div class="ac"><b>개별 파트 연습.</b> 각자 자기 파트를 소리 내어 2~3번.</div></div>
|
||
<div class="r"><div class="tm">30–75분</div><div class="ac"><b>리허설 1회차.</b> 실제 화면 띄우고 처음부터 끝까지. 멘토는 시간만 잰다.</div></div>
|
||
<div class="r"><div class="tm">75–95분</div><div class="ac"><b>피드백.</b> 좋았던 점 먼저, 고칠 점은 구체적으로 하나씩.</div></div>
|
||
<div class="r"><div class="tm">95–135분</div><div class="ac"><b>리허설 2회차 + 예상 질문 연습.</b> 멘토가 심사위원 역할로 질문.</div></div>
|
||
<div class="r"><div class="tm">135–150분</div><div class="ac"><b>남은 버그 최종 정리.</b> 리허설에서 걸린 곳만 마지막으로 손봄.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 (리허설 후 피드백)</div>
|
||
<p>"방금 정말 좋았어요. 특히 시연에서 화면 넘어가는 게 매끄러웠어요. 딱 하나만 다듬어요. 시작할 때 조금 빨랐어요. 첫 문장은 심호흡하고 천천히. '안녕하세요, 저희 팀이 만든 건…' 이렇게 여유 있게 열면 나머지가 편해져요."</p>
|
||
<p>"그리고 만약 발표 중에 화면이 안 뜨면요? 당황하지 말고 이렇게 말하면 돼요. '잠시 화면을 다시 불러오겠습니다.' 이 한마디면 프로처럼 보여요. 사고는 누구나 나요. 대응이 실력이에요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 리허설 피드백 카드</div>
|
||
<div class="act-box">
|
||
<p>리허설 1회차 뒤, 서로에게 <b>피드백 카드</b>를 한 장씩 써 줍니다. 좋은 점을 반드시 먼저 적는 규칙입니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">동료 피드백 카드</div>
|
||
<pre>받는 사람: <span class="hl">______</span>
|
||
|
||
[좋았던 점 — 꼭 하나 이상]
|
||
<span class="hl">________________________________</span>
|
||
|
||
[더 좋아질 한 가지 — 구체적으로]
|
||
<span class="hl">________________________________</span>
|
||
|
||
[내일 이거 하나만 기억하면 돼요]
|
||
<span class="hl">________________________________</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>2회차 후 각자에게:</p>
|
||
<ul>
|
||
<li>"발표 도중 화면이 멈추면 첫 마디를 뭐라고 할래요?"</li>
|
||
<li>"예상 질문 하나를 미리 준비했어요? 뭐예요?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 리허설 직전까지 코드를 고치다가 잘 되던 발표 버전을 깨뜨린다.</div>
|
||
<div class="row"><b>대처</b> 목요일 오후 이후로는 <b>발표용 버전을 별도 브랜치/태그로 얼려두기</b>. "여기서부터는 발표본을 지킵니다"를 팀 규칙으로 선언한다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 금요일 ===================== -->
|
||
<div class="day-div" id="d5">
|
||
<div class="day-badge"><div class="w">FRI</div><div class="n">금</div></div>
|
||
<div>
|
||
<h2>데모 발표 · 최종 면담</h2>
|
||
<div class="dm">오늘의 목표: 경영진·팀 앞에서 데모를 발표하고, 자기평가서를 제출하고, 최종 평가와 전환 면담으로 8주를 마무리한다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 1 · 오전</div>
|
||
<h3>발표 준비 + 자기평가서 제출</h3>
|
||
<div class="dur">약 60분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>발표 직전 장비·화면·데이터를 최종 점검한다.</li>
|
||
<li>8주를 돌아보는 자기평가서를 스스로 작성해 제출한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–15분</div><div class="ac"><b>장비 리허설.</b> 발표장 화면 연결, 데모 앱 켜서 첫 화면 확인.</div></div>
|
||
<div class="r"><div class="tm">15–45분</div><div class="ac"><b>자기평가서 작성.</b> 조용히 각자 8주 회고 + 자기평가.</div></div>
|
||
<div class="r"><div class="tm">45–55분</div><div class="ac"><b>제출 & 발표 순서 최종 확인.</b> 누가 언제 나설지 한 번 더 맞춤.</div></div>
|
||
<div class="r"><div class="tm">55–60분</div><div class="ac"><b>파이팅.</b> 짧게 서로 응원하고 발표장으로 이동.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"자기평가서는 잘 보이려고 쓰는 게 아니에요. 8주 전의 나랑 지금의 나를 비교하는 거예요. 못한 걸 솔직히 적어도 괜찮아요. 오히려 '이건 아직 부족하고, 다음엔 이렇게 하고 싶다'가 있으면 저는 그게 제일 좋아요."</p>
|
||
<p>"발표 전 긴장되는 거 알아요. 긴장은 잘하고 싶은 마음이에요. 나쁜 게 아니에요. 리허설한 대로만 하면 돼요. 우리 이미 어제 두 번 다 해봤잖아요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 자기평가서</div>
|
||
<div class="act-box">
|
||
<p>각자 <b>자기평가서</b>를 아래 항목대로 작성해 제출합니다. (평가 루브릭과 함께 사용)</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">수습 자기평가서 (8주 회고)</div>
|
||
<pre>이름: <span class="hl">______</span> 트랙: ☐ 개발 ☐ 디자인
|
||
|
||
1. 8주 중 가장 크게 성장했다고 느낀 것
|
||
<span class="hl">________________________________</span>
|
||
2. 이번 프로젝트에서 내가 맡아 끝낸 것
|
||
<span class="hl">________________________________</span>
|
||
3. 아직 부족하다고 느끼는 것 (솔직하게)
|
||
<span class="hl">________________________________</span>
|
||
4. 앞으로 3개월 안에 더 잘하고 싶은 것
|
||
<span class="hl">________________________________</span>
|
||
5. 스스로에게 주는 한마디
|
||
<span class="hl">________________________________</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>발표장 이동 전 최종 확인:</p>
|
||
<ul>
|
||
<li>"데모 앱, 지금 첫 화면 떠 있죠? 인터넷·로그인 다 됐죠?"</li>
|
||
<li>"자기평가서 5칸 다 채웠어요? 빈칸 없죠?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 발표 직전에 코드를 또 만지거나 브랜치를 바꿔 발표본이 안 켜진다.</div>
|
||
<div class="row"><b>대처</b> "오늘은 코드 그만. 우리는 어제 얼려둔 발표본으로만 갑니다"를 다시 못 박는다. 노트북은 발표본 상태 그대로 유지.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 2 · 오후</div>
|
||
<h3>데모 발표 — 경영진·팀 대상 15분</h3>
|
||
<div class="dur">약 90분 (발표 + 질의응답 + 강평)</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>준비한 15분 발표를 경영진과 팀 앞에서 완주한다.</li>
|
||
<li>질문에 당황하지 않고 자기 언어로 답하는 경험을 한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–5분</div><div class="ac"><b>오프닝.</b> 멘토가 8주 과정과 발표 순서를 소개하며 분위기를 데운다.</div></div>
|
||
<div class="r"><div class="tm">5–20분</div><div class="ac"><b>팀 발표 15분.</b> 문제 → 솔루션 → 시연 → 배운 점 순.</div></div>
|
||
<div class="r"><div class="tm">20–35분</div><div class="ac"><b>질의응답.</b> 경영진·팀의 질문. 멘토가 필요하면 다리를 놓아줌.</div></div>
|
||
<div class="r"><div class="tm">35–50분</div><div class="ac"><b>강평.</b> 참석자들이 좋았던 점 위주로 격려 코멘트.</div></div>
|
||
<div class="r"><div class="tm">50–90분</div><div class="ac"><b>기념 촬영 & 정리.</b> 발표 마무리, 발표자료·회고 취합.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 (발표 오프닝, 경영진·팀 앞에서)</div>
|
||
<p>"안녕하세요. 지난 8주 동안 미림마이스터고에서 온 수습생 네 명과 함께 달려왔습니다. 오늘은 그 결과를 직접 보여드리는 자리예요. 첫 주에 <code>console.log</code> 하나에 감탄하던 친구들이 이제 동작하는 앱을 만들어 왔습니다. 따뜻하게 봐주세요."</p>
|
||
<div class="who" style="margin-top:10px">멘토 (질문이 어려워 학생이 멈칫할 때)</div>
|
||
<p>"좋은 질문이에요. 잠깐 제가 거들면요, 지금 질문은 '이 기능을 어떻게 더 빠르게 만들 수 있냐'는 거예요. OO이 시도해본 방향으로 답해볼래요?"</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 발표 진행 대본</div>
|
||
<div class="act-box">
|
||
<p>발표 진행자(멘토 또는 팀장 역할 수습생)가 아래 <b>진행 대본</b>을 손에 들고 흐름을 이끕니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">데모 발표 진행 대본</div>
|
||
<pre>[열기] "지금부터 <span class="hl">___팀명___</span> 의 데모를 시작하겠습니다."
|
||
[전환] 파트 넘길 때: "다음은 <span class="hl">__이름__</span> 이(가)
|
||
<span class="hl">__파트__</span> 를 이어가겠습니다."
|
||
[시연 안내] "실제 화면으로 보여드리겠습니다. 화면 봐주세요."
|
||
[질문 받기] "질문 있으실까요? 편하게 말씀해 주세요."
|
||
[닫기] "저희 발표를 들어주셔서 감사합니다.
|
||
8주간 정말 즐거웠습니다."</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>발표 직전 진행자에게:</p>
|
||
<ul>
|
||
<li>"파트가 넘어갈 때 이름을 불러서 넘겨줄 거죠?"</li>
|
||
<li>"질문이 아무도 없으면 어떻게 자연스럽게 닫을래요?"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 시연 중 앱이 멈추자 학생이 굳어서 말을 잃는다.</div>
|
||
<div class="row"><b>대처</b> 멘토가 즉시 개입해 "이런 경우엔 준비한 녹화 영상으로 보여드릴게요"라며 <b>백업 화면 녹화</b>로 전환. (그래서 화·수에 30초 녹화를 남겨둔 것.) 학생을 탓하지 않는다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 3 · 오후</div>
|
||
<h3>최종 평가 · 전환 면담 (1:1)</h3>
|
||
<div class="dur">약 90분 (1인당 약 20분 + 마무리)</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>멘토 평가 + 데모 + 자기평가를 루브릭으로 종합해 전환 결과를 전달한다.</li>
|
||
<li>결과가 무엇이든 성장을 인정하고, 다음 3개월 성장목표를 함께 세운다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표 (1인 기준)</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">0–3분</div><div class="ac"><b>따뜻하게 열기.</b> 8주 고생을 먼저 인정하며 긴장을 풀어줌.</div></div>
|
||
<div class="r"><div class="tm">3–8분</div><div class="ac"><b>함께 돌아보기.</b> 자기평가서를 같이 보며 성장한 지점을 짚음.</div></div>
|
||
<div class="r"><div class="tm">8–13분</div><div class="ac"><b>결과 전달.</b> 루브릭 종합 결과(전환/조건부/미전환)를 분명하고 다정하게.</div></div>
|
||
<div class="r"><div class="tm">13–18분</div><div class="ac"><b>다음 3개월 목표.</b> 결과와 무관하게 구체적 성장목표 2~3개를 함께 적음.</div></div>
|
||
<div class="r"><div class="tm">18–20분</div><div class="ac"><b>닫기.</b> 감사와 응원. 언제든 물어보라는 말로 문을 열어둠.</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 — 전환 결정 시</div>
|
||
<p>"결론부터 말할게요. OO, 정식으로 함께하게 됐어요. 축하해요! 데모에서 보여준 완성도랑, 막혔을 때 끝까지 파고드는 태도가 특히 좋았어요. 다음 3개월은 이 세 가지를 같이 키워봐요."</p>
|
||
<div class="who" style="margin-top:10px">멘토 — 조건부 전환 시</div>
|
||
<p>"OO은 '조건부 전환'이에요. 무슨 뜻이냐면, 가능성은 충분히 봤고 딱 한두 가지만 더 채우면 된다는 거예요. 부족하다는 게 아니라 '거의 다 왔다'는 신호예요. 앞으로 3개월 동안 이 부분을 이렇게 채워가면 돼요. 제가 계속 봐줄게요."</p>
|
||
<div class="who" style="margin-top:10px">멘토 — 미전환 시</div>
|
||
<p>"OO, 이번엔 정식 전환까지는 이르지 못했어요. 그런데 이건 OO이 못했다는 뜻이 절대 아니에요. 8주 전과 지금을 비교하면 정말 많이 자랐어요. 지금 이 성장 방향을 이렇게 이어가면 분명히 좋은 개발자가 돼요. 오늘 결과보다 앞으로가 훨씬 길어요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 · 최종 면담 기록지</div>
|
||
<div class="act-box">
|
||
<p>멘토는 면담마다 <b>기록지</b>를 채우고, 다음 3개월 목표는 <b>수습생과 함께</b> 소리 내어 적습니다.</p>
|
||
<div class="tpl mt">
|
||
<div class="cap">최종 평가 · 전환 면담 기록지 (멘토 작성)</div>
|
||
<pre>수습생: <span class="hl">______</span> 트랙: ☐ 개발 ☐ 디자인
|
||
|
||
[루브릭 종합]
|
||
멘토 평가 <span class="hl">__</span> / 데모 <span class="hl">__</span> / 자기평가 <span class="hl">__</span>
|
||
[전환 결정] ☐ 전환 ☐ 조건부 전환 ☐ 미전환
|
||
[결정의 근거 — 잘한 점 먼저]
|
||
<span class="hl">________________________________</span>
|
||
|
||
[다음 3개월 성장목표 — 함께 작성]
|
||
① <span class="hl">____________________________</span>
|
||
② <span class="hl">____________________________</span>
|
||
③ <span class="hl">____________________________</span>
|
||
|
||
멘토 서명 <span class="hl">______</span> 면담일 2026-__-__</pre>
|
||
</div>
|
||
<p style="margin-top:10px"><b>진행 팁:</b> 결과가 무엇이든 "잘한 점 → 결과 → 앞으로"의 순서를 지키세요. 결과를 먼저 던지면 뒤 이야기가 들리지 않습니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인 (멘토 셀프)</div>
|
||
<div class="check-box">
|
||
<p>각 면담을 닫기 전에 멘토 스스로 점검합니다.</p>
|
||
<ul>
|
||
<li>결과를 <b>분명한 단어</b>로 전달했는가? (에둘러 말해 오해를 남기지 않았는가)</li>
|
||
<li>미전환·조건부라도 <b>다음 3개월 목표를 함께</b> 손에 쥐여 보냈는가?</li>
|
||
<li>이 학생이 방을 나설 때 <b>주눅이 아니라 방향</b>을 안고 나가는가?</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic pit">⚠️</span>흔한 실수</div>
|
||
<div class="pit-box">
|
||
<div class="row"><b>실수</b> 미전환을 전하기 미안해 말을 흐려서, 학생이 결과를 정확히 이해하지 못한 채 나간다.</div>
|
||
<div class="row"><b>대처</b> 다정함과 명확함은 반대말이 아니다. "결과는 미전환이에요"를 분명히 말한 뒤, 곧바로 성장과 다음 목표로 시간을 충분히 쓴다.</div>
|
||
<div class="row"><b>실수</b> 전환된 학생에게 칭찬만 하고 다음 목표를 안 준다.</div>
|
||
<div class="row"><b>대처</b> 전환도 끝이 아니라 시작이다. 잘한 학생일수록 다음 3개월 성장목표를 더 구체적으로 함께 세운다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<div class="next">
|
||
<p><b>8주 과정 완주를 축하합니다.</b> 첫 주 <code>console.log("Hello")</code>에서 시작해, 오늘 동작하는 데모를 경영진 앞에서 발표하기까지 — 네 명 모두 놀랍게 성장했습니다. 여기가 끝이 아니라 진짜 시작입니다. 각자 손에 쥔 다음 3개월 성장목표와 함께, "고객과 함께 더 나은 세상을 만들어 나가는" AWESOMEDEV의 동료로 계속 나아가요.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<span>AWESOMEDEV · 8주차 상세 강의안 (멘토용) · 8부작 중 8</span>
|
||
<span>2026 · 수습 가이드·CS 커리큘럼·평가 루브릭과 함께 사용</span>
|
||
</footer>
|
||
|
||
</div>
|