AWESOMEDEV
84144a1608
[HIGH] - 로그인 잠금 XFF 스푸핑 우회: X-Forwarded-For leftmost(위조 가능) → rightmost(Caddy가 붙인 실제 IP) 사용 - 멘토 기본 비밀번호 하드코딩 제거: env 미설정 시 SecureRandom 생성 후 로그 1회 출력. compose에 MENTOR_INITIAL_PASSWORD 추가 - 클릭 카드 키보드 접근 불가(학습문서 전체): Card에 role=button·tabIndex·Enter/Space·aria-label [MEDIUM] - CSV 수식 인젝션: =+-@ 로 시작하는 학생 자유입력 앞에 ' 붙여 엑셀 수식화 차단 (+회귀 테스트) - 학습문서 17개 <html lang=ko> 골격 주입 (스크린리더 한국어 발음) - 과제 제출 폼 label htmlFor/id 연결 - 상단 아이콘 링크(👤·🔑) aria-label + 이모지 aria-hidden - 멘토 제출물 표 행 키보드 접근(role/tabIndex/Enter·Space) - 배지 amber/teal 글자 대비 4.5:1 확보(테마별 --amber-text/--teal-text) [LOW] - 코드에디터 포커스 표시(:focus-within), 문제번호 색 대비(--muted), 카드 :focus-visible - 폼 오류 메시지 role=alert (스크린리더 즉시 안내) 검증: 테스트 26개 통과, 운영에서 XFF 우회 차단(6회째 429)·카드 role/aria·문서 lang=ko 확인. PMD 29건은 전부 저심각 스멜로 실질 결함 없음. 각 수정에 원리 학습 주석. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
802 lines
52 KiB
HTML
802 lines
52 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>4주차 상세 강의안 · 기본기 마무리 · 중간평가 — 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>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="wrap">
|
||
|
||
<header class="mast">
|
||
<div class="wordmark"><b>AWESOMEDEV</b> · 수습 상세 강의안 · 4 / 8</div>
|
||
<h1>4주차 상세 강의안<br>기본기 마무리 · 중간평가</h1>
|
||
<p class="lede">이번 주는 지금까지 쌓은 기본기를 "내 말로" 발표할 수 있게 마무리하는 주간입니다. 두 번째 소과제로 난이도를 한 단계 올려 손을 조금 놓아 보고, 금요일에는 미니 발표회와 함께 4주차 중간평가 면담을 진행합니다. 잘된 점과 보완점, 그리고 전환에 대한 솔직한 신호를 이번 주에 반드시 전달합니다.</p>
|
||
<div class="mast-meta">
|
||
<span class="chip"><span class="dot"></span>대상: 미림마이스터고 3학년 수습생 4명 (개발 3 · 디자인 1)</span>
|
||
<span class="chip"><span class="dot"></span>산출물: 기본기 발표자료 · 두 번째 머지 PR</span>
|
||
<span class="chip"><span class="dot"></span>★ 4주차 중간평가 (전환 신호 전달)</span>
|
||
</div>
|
||
|
||
<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> 발표 자료 준비 · 1:1 코칭</a></li>
|
||
<li><a href="#d5"><b>금</b> 미니 발표회 + 중간평가 면담</a></li>
|
||
</ol>
|
||
</nav>
|
||
</header>
|
||
|
||
<section>
|
||
<div class="card">
|
||
<p><strong>6블록 틀(학습목표 · 진행표 · 멘토 스크립트 · 실습 · 이해 확인 · 흔한 실수)은 1주차 강의안과 동일합니다.</strong> 아침 기본기 세션은 "포인터 세션"으로 짧게 두고, CS 기본기 4주 커리큘럼 문서(W4)의 해당 일차를 그대로 진행하세요.</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">목표: 클릭 → 서버 → DB → 응답의 전 과정을 한 장의 그림으로 정리하고, 기본기를 총복습한다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 1 · 세션 1 · 오전</div>
|
||
<h3>기본기 통합 복습 (포인터 세션)</h3>
|
||
<div class="dur">소요 60분 · 09:30–10:30</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>지난 3주간 배운 기본기(B) 핵심 용어를 다시 한 번 소리 내어 정리한다.</li>
|
||
<li>금요일 발표에서 쓸 "내 말" 표현을 미리 골라 둔다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 안내</div>
|
||
<div class="act-box">
|
||
<p><b>CS 기본기 4주 커리큘럼 문서(W4)의 1일차를 그대로 진행</b>합니다. 아침 기본기는 짧게 훑고, 오늘은 "발표에 쓸 문장 고르기"에 초점을 둡니다.</p>
|
||
<ul>
|
||
<li>커리큘럼 W4 1일차 개념을 학생별로 소리 내어 한 문장씩 요약</li>
|
||
<li>어려운 단어가 나오면 즉시 쉬운 말로 바꿔 옆에 적어 두기</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 1 · 세션 2 · 오후</div>
|
||
<h3>요청 흐름 한 장으로 그리기 — 클릭에서 응답까지</h3>
|
||
<div class="dur">소요 90분 · 13:30–15:00</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>버튼 클릭 한 번이 화면 → 서버 → DB → 다시 화면으로 돌아오는 전 과정을 순서대로 말할 수 있다.</li>
|
||
<li>우리 실제 스택(React 웹 · Spring Boot 서버)에서 각 단계가 어디에 해당하는지 짚을 수 있다.</li>
|
||
<li>자기 그림을 보고 30초 안에 흐름을 설명할 수 있다.</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> 멘토가 화이트보드에 5칸(브라우저 · React 화면 · 네트워크 요청 · Spring Boot 서버 · DB)을 그려 흐름 시연</div></div>
|
||
<div class="r"><div class="tm">30–70분</div><div class="ac"><b>각자 그리기.</b> 학생 4명이 A4에 자기만의 흐름도를 그림. 멘토는 돌아다니며 막힌 칸을 함께 채움</div></div>
|
||
<div class="r"><div class="tm">70–85분</div><div class="ac"><b>돌아가며 설명.</b> 한 명씩 자기 그림을 보고 흐름을 말로 설명 (디자이너는 "화면이 언제 바뀌는가" 관점으로)</div></div>
|
||
<div class="r"><div class="tm">85–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>"오늘은 새로 배우는 게 아니라, 그동안 조각조각 배운 걸 하나로 이어 보는 시간이에요. 버튼 하나 누르면 사실 엄청 많은 일이 순식간에 일어나거든요."</p>
|
||
<p>"어렵게 말 안 해도 돼요. '내가 버튼을 누르면, 화면이 서버한테 물어보고, 서버가 데이터베이스를 확인하고, 다시 화면으로 답이 온다' 이 정도만 여러분 입으로 말할 수 있으면 오늘은 대성공이에요."</p>
|
||
<p><em>학생이 칸을 못 채우고 머뭇거리면 정답을 바로 주지 말고 "방금 그 앞 칸에서 뭘 보냈죠?"처럼 되짚어 주세요.</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>
|
||
<div class="tpl mt">
|
||
<div class="cap">워크시트 · 요청 흐름 한 문장 만들기</div>
|
||
<pre>① 나는 화면에서 <span class="hl">[__________]</span> 버튼을 누른다.
|
||
② 그러면 <span class="hl">[React 화면]</span> 이(가) 서버에게 "<span class="hl">[__________]</span>" 라고 요청을 보낸다.
|
||
③ <span class="hl">[Spring Boot 서버]</span> 는 요청을 받아서 <span class="hl">[__________]</span> 를 한다.
|
||
④ 서버는 <span class="hl">[DB]</span> 에게 "<span class="hl">[__________]</span>" 를 물어보거나 저장한다.
|
||
⑤ DB가 답을 주면, 서버는 그 결과를 <span class="hl">[__________]</span> 형태로 화면에 돌려준다.
|
||
⑥ 화면은 받은 결과로 <span class="hl">[__________]</span> 를 바꿔 보여 준다.
|
||
|
||
→ 위 6줄을 안 보고 30초 안에 말해 보기 (짝끼리 1번씩)</pre>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>다음을 학생이 <b>스스로 말로</b> 설명하면 통과입니다.</p>
|
||
<ul>
|
||
<li>"화면이 직접 DB를 건드리지 않고 왜 서버를 거치나요?" 에 한 문장으로 답하기</li>
|
||
<li>자기 흐름도 5칸의 이름을 순서대로 말하기</li>
|
||
<li>요청(request)과 응답(response)이 각각 어느 방향인지 손으로 가리키기</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> 학생이 완벽한 용어를 못 쓴다고 위축됨. "API 엔드포인트" 같은 말을 못 하면 틀린 줄 안다.</div>
|
||
<div class="row"><b>대처:</b> "정확한 단어보다 순서가 더 중요해요. 순서만 맞으면 단어는 천천히 붙어요"라고 안심시키기.</div>
|
||
<div class="row"><b>실수:</b> 화면(React)과 서버(Spring Boot)를 한 덩어리로 뭉뚱그림.</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">소요 45분 · 09:30–10:15</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>CS 커리큘럼 W4를 이어 진행하며 발표에 쓸 개념을 한 번 더 다진다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 안내</div>
|
||
<div class="act-box">
|
||
<p><b>CS 기본기 4주 커리큘럼 문서(W4)의 2일차를 그대로 진행</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">소요 100분 · 10:30–12:10</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>
|
||
<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–20분</div><div class="ac"><b>과제 브리핑.</b> 멘토가 두 번째 과제 요구사항을 함께 읽되, 첫 주보다 설명을 짧게 (JavaScript 우선, 필요 시 Java 보조)</div></div>
|
||
<div class="r"><div class="tm">20–40분</div><div class="ac"><b>요구사항 내 말로 다시 쓰기.</b> 학생이 과제를 자기 문장으로 옮겨 적고 멘토가 확인</div></div>
|
||
<div class="r"><div class="tm">40–70분</div><div class="ac"><b>작업 쪼개기.</b> 큰 과제를 3~5개 작은 단위로 나누고 첫 단위 착수</div></div>
|
||
<div class="r"><div class="tm">70–95분</div><div class="ac"><b>자립 코딩.</b> 멘토는 자리를 지키되 먼저 다가가지 않음. 학생이 15분 시도 후 질문하도록</div></div>
|
||
<div class="r"><div class="tm">95–100분</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>"그리고 이번엔 제가 조금 덜 알려 줄 거예요. 막히면 먼저 15분만 혼자 붙잡아 보세요. 그 15분 동안 고민한 게 진짜 실력이 돼요. 그래도 안 되면 그때 편하게 부르면 돼요. 혼자 끙끙대다 하루를 날리는 건 안 돼요."</p>
|
||
<p><em>"덜 도와준다"가 "방치"로 느껴지지 않게, 자리를 뜨지 말고 시야 안에 있어 주세요.</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>
|
||
<div class="tpl mt">
|
||
<div class="cap">워크시트 · 두 번째 소과제 작업 쪼개기</div>
|
||
<pre>[과제를 내 말로] <span class="hl">[__________________________]</span>
|
||
|
||
작은 단위로 쪼개기
|
||
1) <span class="hl">[__________]</span> (예상: __분) 난이도 ●○○
|
||
2) <span class="hl">[__________]</span> (예상: __분) 난이도 ●●○
|
||
3) <span class="hl">[__________]</span> (예상: __분) 난이도 ●●●
|
||
|
||
오늘 반드시 끝낼 것 → <span class="hl">[___번]</span>
|
||
막히면 15분 시도 후 질문 (체크: ☐ 했다)</pre>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>세션 끝에 학생마다 다음을 확인합니다.</p>
|
||
<ul>
|
||
<li>과제를 자기 문장으로 한 번에 설명할 수 있는가</li>
|
||
<li>작업을 최소 3개 단위로 쪼갰는가</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> "15분 규칙" 을 칠판에 써 두고, 15분 지나면 손 드는 걸 당연한 절차로 만들기.</div>
|
||
<div class="row"><b>실수:</b> 과제를 안 쪼개고 통째로 덤벼 방향을 잃음.</div>
|
||
<div class="row"><b>대처:</b> 첫 단위를 함께 정해 주고 "이거 하나만 먼저"로 시작 장벽을 낮추기.</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">목표: 두 번째 과제를 이어 가며 스스로 문제를 해결하는 힘을 키우고, 완성 후 PR을 올린다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 3 · 세션 1 · 오전</div>
|
||
<h3>기본기 발표 문장 다듬기 (포인터 세션)</h3>
|
||
<div class="dur">소요 45분 · 09:30–10:15</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>CS 커리큘럼 W4를 마무리 방향으로 진행하고, 모은 발표 문장을 순서대로 배열한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 안내</div>
|
||
<div class="act-box">
|
||
<p><b>CS 기본기 4주 커리큘럼 문서(W4)의 3일차를 그대로 진행</b>합니다. 그동안 모은 "발표 한 문장"들을 금요일 발표 흐름 순서로 늘어놓게 하세요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 3 · 세션 2 · 오전~오후</div>
|
||
<h3>자립 코딩 · 스스로 막힌 곳 뚫기</h3>
|
||
<div class="dur">소요 120분 · 10:30–12: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>
|
||
<li>두 번째 과제를 완성해 PR을 올린다.</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–90분</div><div class="ac"><b>자립 코딩.</b> 멘토는 "15분 규칙" 을 지키며 대기. 질문은 "좋은 질문 3요소" 로 받기</div></div>
|
||
<div class="r"><div class="tm">90–110분</div><div class="ac"><b>마무리 · PR 올리기.</b> 커밋 메시지 함께 다듬고 두 번째 PR 생성</div></div>
|
||
<div class="r"><div class="tm">110–120분</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>
|
||
<p><em>학생이 스스로 원인을 말하면 크게 인정해 주세요. "지금 그거 방금 여러분이 디버깅한 거예요."</em></p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
|
||
<div class="act-box">
|
||
<p><b>좋은 질문 3요소 카드.</b> 질문하러 오기 전에 이 카드를 먼저 채우게 하세요. 반은 스스로 풀립니다.</p>
|
||
</div>
|
||
<div class="tpl mt">
|
||
<div class="cap">워크시트 · 질문하기 전 3줄</div>
|
||
<pre>① 내가 하려던 것: <span class="hl">[__________________]</span>
|
||
② 기대한 결과: <span class="hl">[__________________]</span>
|
||
③ 실제로 난 것: <span class="hl">[__________________]</span>
|
||
(에러면 마지막 줄 그대로 적기: <span class="hl">[__________]</span>)
|
||
|
||
→ 여기까지 적었는데도 모르겠으면 그때 멘토 호출!</pre>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>세션 종료 시 확인합니다.</p>
|
||
<ul>
|
||
<li>두 번째 과제 PR을 올렸는가 (또는 남은 범위를 명확히 말할 수 있는가)</li>
|
||
<li>오늘 스스로 해결한 문제를 한 가지 이상 설명할 수 있는가</li>
|
||
<li>질문 3요소를 갖춰 물어봤는가</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> PR 욕심에 코드를 한꺼번에 몰아 커밋해 무엇을 바꿨는지 설명 못 함.</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>발표 자료 준비 · 1:1 코칭</h2>
|
||
<div class="dm">목표: "내가 이해한 컴퓨터 / 우리 시스템" 10분 발표를 준비하고, 멘토 1:1 코칭으로 다듬는다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 4 · 세션 1 · 오전</div>
|
||
<h3>발표 뼈대 만들기 — 10분을 3덩어리로</h3>
|
||
<div class="dur">소요 90분 · 09:30–11:00</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>발표를 "시작 · 가운데 · 마무리" 3덩어리로 나눠 뼈대를 잡는다.</li>
|
||
<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–15분</div><div class="ac"><b>발표 목표 공유.</b> "심사가 아니라, 내가 이만큼 알게 됐다를 보여 주는 자리" 라고 프레이밍</div></div>
|
||
<div class="r"><div class="tm">15–30분</div><div class="ac"><b>3덩어리 나누기.</b> 시작(내 소개·무엇을 배웠나) / 가운데(요청 흐름·과제 이야기) / 마무리(느낀 점)</div></div>
|
||
<div class="r"><div class="tm">30–80분</div><div class="ac"><b>슬라이드 채우기.</b> 개발자는 요청 흐름도 + 두 과제 이야기, 디자이너는 개선 전/후 화면 배치</div></div>
|
||
<div class="r"><div class="tm">80–90분</div><div class="ac"><b>중간 점검.</b> 슬라이드 장수와 각 덩어리 시간(대략 3·5·2분) 배분 확인</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 → 전체</div>
|
||
<p>"발표라고 하면 겁부터 나죠? 근데 이건 시험이 아니에요. '나 4주 동안 이런 걸 알게 됐어요' 를 편하게 보여 주는 자리예요."</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>
|
||
<div class="tpl mt">
|
||
<div class="cap">워크시트 · "내가 이해한 컴퓨터 / 우리 시스템" 10분 발표</div>
|
||
<pre>[제목] <span class="hl">[____________________]</span>
|
||
(디자이너: "내가 다시 디자인한다면 — <span class="hl">[화면명]</span>")
|
||
|
||
■ 시작 (약 3분)
|
||
- 나는 누구, 4주간 무엇을 했나: <span class="hl">[________]</span>
|
||
|
||
■ 가운데 (약 5분) ← 핵심
|
||
- 개발: 클릭→서버→DB→응답 흐름 설명 <span class="hl">[________]</span>
|
||
- 개발: 두 과제에서 막혔다가 뚫은 순간 <span class="hl">[________]</span>
|
||
- (디자이너: 개선 전 화면 문제점 → 개선안 → 왜 더 나은가)
|
||
|
||
■ 마무리 (약 2분)
|
||
- 가장 크게 배운 것 한 가지: <span class="hl">[________]</span>
|
||
- 앞으로 더 해 보고 싶은 것: <span class="hl">[________]</span></pre>
|
||
</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> "오늘은 내용 먼저, 꾸미기는 마지막 10분" 규칙을 정해 순서를 강제하기.</div>
|
||
<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 4 · 세션 2 · 오후</div>
|
||
<h3>멘토 1:1 발표 코칭</h3>
|
||
<div class="dur">소요 120분 · 13:30–15:30 · 학생당 약 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>어려운 말·빠른 말투·비어 있는 부분을 1:1로 구체적으로 고친다.</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–8분</div><div class="ac"><b>리허설.</b> 학생이 실제로 발표 (멘토는 끊지 않고 끝까지 듣기)</div></div>
|
||
<div class="r"><div class="tm">8–18분</div><div class="ac"><b>피드백.</b> 잘한 점 먼저 2가지 → 고칠 점 1~2가지 (구체적으로)</div></div>
|
||
<div class="r"><div class="tm">18–25분</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">멘토 → 학생 (1:1)</div>
|
||
<p>"방금 발표 좋았어요. 특히 요청 흐름 설명할 때 '화면이 서버한테 물어본다' 이 표현, 진짜 쉽게 잘했어요."</p>
|
||
<p>"한 군데만 같이 고쳐 볼까요? 여기 이 부분은 조금 빠르게 지나갔어요. 여러분이 제일 고생한 부분이니까 오히려 천천히, 한 문장 더 붙여도 좋아요."</p>
|
||
<p><em>잘한 점 → 고칠 점 순서를 지키세요. 지적으로 시작하면 다음 발표가 위축됩니다.</em></p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>1:1 종료 시 각 학생이 다음을 손에 쥐고 나가야 합니다.</p>
|
||
<ul>
|
||
<li>고칠 점 1~2개를 자기 말로 다시 정리했는가</li>
|
||
<li>발표 시간이 대략 10분 안에 들어오는가</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> 멘토가 고칠 점을 3개 이상 쏟아 내 학생이 다 못 고치고 혼란.</div>
|
||
<div class="row"><b>대처:</b> 가장 중요한 것 1~2개만. 나머지는 "지금은 이거 하나만" 으로 남겨 두기.</div>
|
||
<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">목표: 어려운 말 없이 내 말로 발표하고, 4주차 중간평가 면담에서 솔직한 신호(전환 포함)를 반드시 전달받는다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 1 · 오전</div>
|
||
<h3>기본기 미니 발표회 — 내 말로 10분</h3>
|
||
<div class="dur">소요 90분 · 09:30–11:00 · 학생당 발표 10분 + 격려 5분</div>
|
||
</div>
|
||
<div class="s-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
|
||
<ul class="obj-list">
|
||
<li>4주간 배운 기본기를 어려운 말 없이 자기 말로 발표한다.</li>
|
||
<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–70분</div><div class="ac"><b>발표.</b> 4명이 순서대로 각 10분 발표 + 동료가 좋았던 점 1개씩 (개발 3 · 디자인 1)</div></div>
|
||
<div class="r"><div class="tm">70–85분</div><div class="ac"><b>멘토 총평.</b> 팀 전체에 대한 따뜻한 총평 (개인 평가는 오후 면담으로 미룸)</div></div>
|
||
<div class="r"><div class="tm">85–90분</div><div class="ac"><b>기념.</b> 발표자료를 산출물로 제출 확인 (기본기 발표자료 · 두 번째 PR)</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토 → 발표회 시작</div>
|
||
<p>"4주 전에 처음 왔을 때랑 지금이랑, 여러분 진짜 많이 달라졌어요. 오늘은 그걸 서로 보여 주는 자리예요."</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>
|
||
<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 class="block">
|
||
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
|
||
<div class="check-box">
|
||
<p>발표회로 다음을 확인합니다.</p>
|
||
<ul>
|
||
<li>어려운 전문 용어에 기대지 않고 자기 말로 설명했는가</li>
|
||
<li>요청 흐름(개발) 또는 개선안 근거(디자인)를 스스로 말했는가</li>
|
||
<li>산출물(발표자료 · 두 번째 PR)을 제출했는가</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> 개인 피드백은 전부 오후 1:1 면담으로. 공개 자리에선 격려만.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 2 · 오후 · ★ 중간평가</div>
|
||
<h3>4주차 중간평가 1:1 면담 — 솔직한 신호 전달</h3>
|
||
<div class="dur">소요 120분 · 13:30–15:30 · 학생당 약 25~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>
|
||
<li>남은 4주 동안 무엇에 집중할지 함께 목표를 정한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic run">🕘</span>진행표</div>
|
||
<div class="run">
|
||
<div class="r"><div class="tm">준비 (사전)</div><div class="ac"><b>루브릭 채점.</b> 면담 전 학생별 평가 루브릭을 미리 작성. 잘된 점 2 · 보완점 2 · 전환 신호를 문장으로 준비</div></div>
|
||
<div class="r"><div class="tm">0–5분</div><div class="ac"><b>편안하게 열기.</b> 학생 스스로 4주 자기 평가를 먼저 말하게 하기</div></div>
|
||
<div class="r"><div class="tm">5–13분</div><div class="ac"><b>잘된 점.</b> 구체적 사례로 칭찬 (막연한 칭찬 금지)</div></div>
|
||
<div class="r"><div class="tm">13–20분</div><div class="ac"><b>보완점 + 전환 신호.</b> 루브릭 기준으로 솔직하게. 마지막 주에 처음 듣게 하지 않기</div></div>
|
||
<div class="r"><div class="tm">20–28분</div><div class="ac"><b>남은 4주 목표.</b> 함께 다음 집중 포인트 1~2개 합의</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>"보완할 점도 솔직하게 말할게요. 아직 코드를 작은 단위로 나누는 습관은 조금 더 필요해요. 남은 4주 동안 여기만 같이 잡으면 훨씬 단단해질 거예요."</p>
|
||
</div>
|
||
<div class="script mt">
|
||
<div class="who">멘토 → 학생 (전환 신호 · 순조로운 경우)</div>
|
||
<p>"솔직하게 지금 흐름이면 저는 긍정적으로 보고 있어요. 다만 이건 아직 '확정'은 아니고, 남은 4주에서 방금 말한 부분을 채우는 게 중요해요. 그래서 오늘 미리 말해 주는 거예요. 마지막에 갑자기 듣게 하고 싶지 않아서요."</p>
|
||
</div>
|
||
<div class="script mt">
|
||
<div class="who">멘토 → 학생 (전환 신호 · 우려가 있는 경우)</div>
|
||
<p>"이 얘기는 마지막 주가 아니라 지금 하는 게 맞다고 생각해서 꺼내요. 지금 속도라면 아직 전환을 자신 있게 말하긴 이른 상태예요. 나쁘게 들릴 수 있지만, 아직 4주가 남았고 방향을 바꿀 시간이 충분해요."</p>
|
||
<p>"그래서 오늘부터 딱 두 가지에 집중해 봤으면 해요: <em>①작은 단위 커밋 ②막히면 15분 후 질문</em>. 다음 면담 때 이 두 개로 다시 이야기해요. 저도 옆에서 최대한 도울게요."</p>
|
||
<p><em>우려 신호는 '가능성을 닫는 통보'가 아니라 '지금이면 바꿀 수 있다는 초대'로 전하세요. 반드시 구체적 행동 2개와 함께.</em></p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>면담 기록 시트</div>
|
||
<div class="act-box">
|
||
<p><b>멘토가 채우는 면담 기록.</b> 학생마다 아래를 남겨 마지막 8주차 최종평가와 연결하세요. (개인정보이므로 학생에게 공개 배포 금지, 멘토 보관용)</p>
|
||
</div>
|
||
<div class="tpl mt">
|
||
<div class="cap">면담 기록 · 4주차 중간평가 (멘토 보관용)</div>
|
||
<pre>학생: <span class="hl">[____]</span> 트랙: <span class="hl">[개발 / 디자인]</span> 일자: 2026-__-__
|
||
|
||
루브릭 요약 점수: <span class="hl">[____]</span>
|
||
잘된 점 (사례):
|
||
1) <span class="hl">[__________________]</span>
|
||
2) <span class="hl">[__________________]</span>
|
||
보완점 (사례):
|
||
1) <span class="hl">[__________________]</span>
|
||
2) <span class="hl">[__________________]</span>
|
||
|
||
전환 신호 전달 내용: <span class="hl">[순조 / 조건부 / 우려]</span>
|
||
→ 학생에게 실제로 한 말: <span class="hl">[__________]</span>
|
||
→ 학생 반응: <span class="hl">[__________]</span>
|
||
|
||
남은 4주 합의 목표 (1~2개):
|
||
① <span class="hl">[__________]</span>
|
||
② <span class="hl">[__________]</span></pre>
|
||
</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>이번 주에 분명히</b> 전달했는가 — 마지막 주에 처음 듣게 하지 않았는가</li>
|
||
<li>학생이 남은 4주에 할 일 1~2개를 자기 말로 다시 말했는가</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 class="row"><b>실수:</b> 보완점만 길게 말해 학생이 "나는 안 되나 보다" 로 받아들임.</div>
|
||
<div class="row"><b>대처:</b> 잘된 점 → 보완점 → 다음 목표 순서를 지키고, 항상 "함께 하자" 로 닫기.</div>
|
||
<div class="row"><b>실수:</b> 루브릭 없이 즉흥 인상평으로 평가.</div>
|
||
<div class="row"><b>대처:</b> 반드시 평가 루브릭 기준으로 사전 채점 후 면담에 들어가기.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<div class="next">
|
||
<p><b>다음 주차 예고 — 5주차:</b> 중간평가에서 정한 목표를 발판 삼아, 실제 고객 기능(KT엠모바일·KT알파·핀업 과제 맥락)에 가까운 작업으로 한 걸음 더 나아갑니다. 팀 협업과 코드 리뷰의 비중을 본격적으로 늘립니다.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<span>AWESOMEDEV · 4주차 상세 강의안 (멘토용) · 8부작 중 4</span>
|
||
<span>2026 · 수습 가이드 · CS 커리큘럼 · 평가 루브릭과 함께 사용</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|