awesomedev/mirim-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mirim-app/frontend/public/docs/week6-detailed.html
AWESOMEDEV 84144a1608 fix(security+a11y): 종합 감사(PMD+5관점, 29에이전트) 확정 12건 수정 
[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>
2026-07-17 13:38:30 +09:00

887 lines
51 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>6주차 상세 강의안 — 실전 티켓 ② · 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> · 수습 상세 강의안 · 6 / 8</div>
<h1>6주차 상세 강의안<br>실전 티켓 ② — 더 독립적으로</h1>
<p class="lede">5주차에 실전 티켓을 처음 잡아봤다면, 이번 주는 멘토의 손을 조금 놓습니다. 난이도 ★★ 티켓을 스스로 설계하고, 막혀도 먼저 스스로 해결책을 찾아본 뒤 질문하는 습관을 만듭니다. 금요일에는 다음 2주 종합 프로젝트의 주제와 팀을 정하며 한 단계 도약을 준비합니다.</p>
<div class="mast-meta">
<span class="chip"><span class="dot"></span>난이도 ★★</span>
<span class="chip"><span class="dot"></span>수습생 4명 · 개발 3 · 디자인 1</span>
<span class="chip"><span class="dot"></span>주 5일 · 미림마이스터고 3학년</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><strong>6블록 틀(학습목표 · 진행표 · 멘토 스크립트 · 실습 · 이해 확인 · 흔한 실수)은 1주차 강의안과 동일합니다.</strong> 각 세션 카드를 그대로 따라 읽으면 됩니다.</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분 · 매일 아침 루틴</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 act">✍️</span>실습</div>
<div class="act-box">
<p><b>CS 기본기 4주 커리큘럼 문서의 해당 일차를 진행</b>합니다. 이번 주 아침은 "실무 심화 · 코드리뷰 딥다이브" 트랙으로, 자주 나오는 리뷰 코멘트를 유형별로 정리합니다.</p>
<ul>
<li>커리큘럼 문서 6주차 월요일 분량을 함께 읽고, 예시 코드 1개에 리뷰 코멘트를 각자 2개씩 달기</li>
<li>디자이너 수습생은 디자인 QA 체크 관점(간격·정렬·상태 표현)으로 같은 화면을 리뷰</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> 반드시 각자 코멘트 2개를 소리 내어 발표시켜 참여를 끌어냅니다. 짧아도 좋다고 안심시켜 주세요.</div>
</div>
</div>
</div>
</div>
<div class="session">
<div class="s-head">
<div class="tag">Day 1 · 세션 2 · 오전</div>
<h3>★★ 티켓 배정 — "내 티켓" 이해하기</h3>
<div class="dur">70분</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~5개로 스스로 쪼갤 수 있다.</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:00</div><div class="ac"><b>티켓 배정</b> — 개발 3명에게 각 1개, 예: React 목록 화면에 필터·정렬 추가, Spring Boot 조회 API에 페이지네이션 붙이기, 폼 유효성 검사 보강</div></div>
<div class="r"><div class="tm">0:10</div><div class="ac"><b>각자 읽기</b> — 티켓 설명을 조용히 정독하고 모르는 단어에 형광펜</div></div>
<div class="r"><div class="tm">0:25</div><div class="ac"><b>"내 말로 설명" 발표</b> — 한 명씩 티켓을 자기 문장으로 다시 말하기</div></div>
<div class="r"><div class="tm">0:45</div><div class="ac"><b>할 일 쪼개기</b> — 워크시트에 작은 단계 3~5개 적기</div></div>
<div class="r"><div class="tm">1:05</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>"먼저 티켓을 <b>내 말로</b> 설명해 볼게요. '이 화면을 쓰는 사람이 누구고, 왜 이 기능이 필요할까?' 이거부터 시작해요."</p>
<p><em>(학생이 막히면) "정답을 말하려 하지 말고, 지금 이해한 만큼만 말해줘요. 나머지는 같이 채워요."</em></p>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
<div class="tpl">
<div class="cap">티켓 쪼개기 워크시트 — 빈칸을 채우세요</div>
<pre>[티켓 제목] <span class="hl">___________________________</span>
[이 기능을 쓰는 사람] <span class="hl">_______________________</span>
[왜 필요한가 한 줄] <span class="hl">_________________________</span>
[작은 할 일로 쪼개기]
1. <span class="hl">_______________________________________</span>
2. <span class="hl">_______________________________________</span>
3. <span class="hl">_______________________________________</span>
4. (있다면) <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><b>다음을 각자 대답할 수 있으면 통과입니다.</b></p>
<ul>
<li>내 티켓을 한 문장으로 설명해 보세요.</li>
<li>가장 먼저 손댈 작은 할 일은 무엇인가요?</li>
<li>"다 됐다"고 말하려면 화면/응답에서 무엇이 보여야 하나요?</li>
</ul>
</div>
</div>
</div>
</div>
<div class="session">
<div class="s-head">
<div class="tag">Day 1 · 세션 3 · 오후</div>
<h3>설계 제안 — "이렇게 만들게요"를 먼저 말하기</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>코드를 짜기 전에 "어떤 파일을 어떻게 바꿀지"를 짧게 스스로 제안한다.</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:00</div><div class="ac"><b>설계 제안이란</b> — "손대기 전 30초 계획"의 뜻을 예시로 설명</div></div>
<div class="r"><div class="tm">0:15</div><div class="ac"><b>각자 설계 초안 작성</b> — 아래 대본 빈칸 채우기 (25분)</div></div>
<div class="r"><div class="tm">0:40</div><div class="ac"><b>1:1 설계 리뷰</b> — 멘토가 "왜 그렇게?"만 물으며 스스로 다듬게 함</div></div>
<div class="r"><div class="tm">1:10</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>"틀려도 괜찮아요. 계획이 틀리면 같이 고치면 되고, 그 과정이 진짜 실력이 되는 거예요. 완벽한 설계가 아니라 <b>내 생각을 말로 꺼내는 것</b>이 오늘의 목표예요."</p>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>설계 제안 대본</div>
<div class="tpl">
<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> 예요.
한 가지 걱정되는 부분은 <span class="hl">_____________</span> 예요."</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>어떤 파일을 바꿀지 스스로 지목했나요?</li>
<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> 이번 주 핵심은 독립성입니다. 답 대신 질문("그럼 그 다음은?")으로 스스로 도달하게 두세요. 침묵 10초는 괜찮습니다.</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">40분 · 매일 아침 루틴</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>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시간 (점심 제외) · 집중 구현</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>
</ul>
</div>
<div class="block">
<div class="bt"><span class="ic run">🕘</span>진행표</div>
<div class="run">
<div class="r"><div class="tm">0:00</div><div class="ac"><b>오늘의 규칙 공지</b> — "막히면 먼저 3가지, 그다음 질문" 규칙 안내 (5분)</div></div>
<div class="r"><div class="tm">0:05</div><div class="ac"><b>집중 구현</b> — 각자 자기 티켓 진행, 멘토는 자리 순회만</div></div>
<div class="r"><div class="tm">1:30</div><div class="ac"><b>중간 체크인</b> — "지금 어디까지 됐는지" 한 줄씩 공유 (10분)</div></div>
<div class="r"><div class="tm">1:40</div><div class="ac"><b>집중 구현</b> 계속</div></div>
<div class="r"><div class="tm">2:50</div><div class="ac"><b>막힘 로그 정리</b> — 오늘 막혔던 지점과 해결법 1개 기록</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="tpl">
<div class="cap">막힘 로그 — 질문 전에 스스로 채우기</div>
<pre>[막힌 지점] <span class="hl">_________________________________</span>
[시도 1] <span class="hl">___________________</span> → 결과: <span class="hl">_______</span>
[시도 2] <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></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>오늘 스스로 뚫은 막힘이 하나라도 있나요?</li>
<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> 막힘 로그를 먼저 채우게 한 뒤 질문받으세요. 다만 30분 넘게 같은 곳에서 헤매면 개입해 좌절을 막습니다 — 독립성과 방치는 다릅니다.</div>
</div>
</div>
</div>
</div>
<div class="session">
<div class="s-head">
<div class="tag">Day 2 · 세션 3 · 오후</div>
<h3>디자이너 트랙 — 프로젝트 화면 방향 구상 시작</h3>
<div class="dur">80분 · 디자인 수습생 중심</div>
</div>
<div class="s-body">
<div class="block">
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>다음 2주 프로젝트에서 자신이 맡을 기획·화면 방향을 스스로 그려보기 시작한다.</li>
<li>개발 수습생이 만드는 화면과 어떻게 맞물릴지 한 장으로 정리한다.</li>
</ul>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
<div class="tpl">
<div class="cap">화면 방향 스케치 — 디자이너 워크시트</div>
<pre>[이 프로젝트는 누구를 위한 것] <span class="hl">_______________</span>
[핵심 화면 3개]
1. <span class="hl">_______________</span> (무엇을 보여주나)
2. <span class="hl">_______________</span>
3. <span class="hl">_______________</span>
[가장 중요한 버튼/행동 하나] <span class="hl">_____________</span>
[개발 파트와 맞춰야 할 것] <span class="hl">_______________</span></pre>
</div>
<div class="act-box mt">
<p><b>진행 방식</b> 종이 스케치나 간단한 와이어프레임으로 충분합니다. 완성도보다 "방향"이 목표예요.</p>
<ul>
<li>거친 손그림 → 멘토와 5분 대화 → 한 번 다시 그리기</li>
<li>우리 고객사(KT엠모바일 · KT알파 · 핀업) 서비스 화면을 참고 예시로 살펴보기</li>
</ul>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic check">✅</span>이해 확인</div>
<div class="check-box">
<p><b>세션 끝에 확인합니다.</b></p>
<ul>
<li>핵심 화면 3개를 말로 설명할 수 있나요?</li>
<li>개발 파트와 맞춰야 할 지점을 하나 짚었나요?</li>
</ul>
</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">40분 · 매일 아침 루틴</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>CS 기본기 4주 커리큘럼 문서의 해당 일차를 진행</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">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:00</div><div class="ac"><b>집중 구현</b> — 어제 이어서, 절반 지점 통과가 목표</div></div>
<div class="r"><div class="tm">1:20</div><div class="ac"><b>셀프 코드리뷰</b> — 커밋 전 체크리스트로 자기 코드 점검 (20분)</div></div>
<div class="r"><div class="tm">1:40</div><div class="ac"><b>멘토 리뷰</b> — 1인당 10분, 코멘트는 2~3개로 짧게</div></div>
<div class="r"><div class="tm">2: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>"코드를 다 짰다고 바로 올리지 말고, 올리기 전에 스스로 한 번 읽어봐요. '내가 이 코드를 처음 보는 사람이라면 이해될까?' 이 질문 하나면 충분해요."</p>
<p>"제 리뷰 코멘트는 여러분을 혼내는 게 아니에요. 더 좋게 만드는 힌트예요. 반영은 여러분이 직접 해봐요 — 제가 대신 고치지 않을게요."</p>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
<div class="tpl">
<div class="cap">커밋 전 셀프 코드리뷰 체크리스트</div>
<pre>[ ] 변수·함수 이름만 봐도 뜻이 통하나?
[ ] 같은 코드가 두 번 반복되지 않나?
[ ] 값이 없거나 실패할 때도 안 터지나?
[ ] 안 쓰는 코드·주석·<span class="hl">console.log</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><b>재커밋 전에 확인합니다.</b></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">40분 · 매일 아침 루틴</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>CS 기본기 4주 커리큘럼 문서의 해당 일차를 진행</b>합니다. 오늘은 "내가 만든 걸 내가 확인하기" 편으로, 화면/응답을 직접 눌러보며 확인하는 절차를 만듭니다.</p>
</div>
</div>
</div>
</div>
<div class="session">
<div class="s-head">
<div class="tag">Day 4 · 세션 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:00</div><div class="ac"><b>마감 스프린트</b> — 남은 할 일을 마무리, 필요한 질문만 짧게</div></div>
<div class="r"><div class="tm">1:30</div><div class="ac"><b>직접 확인(수동 테스트)</b> — 정상/빈값/오류 3경우를 손으로 눌러보기</div></div>
<div class="r"><div class="tm">2:00</div><div class="ac"><b>최종 셀프리뷰 + 커밋</b> — 완료 기준 대조표 체크</div></div>
<div class="r"><div class="tm">2:30</div><div class="ac"><b>완료 발표</b> — "무엇을 만들었고 어떻게 확인했는지" 3분 데모</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="tpl">
<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></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>세 가지 경우(정상·빈값·오류)를 직접 눌러봤나요?</li>
<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="d5">
<div class="day-badge"><div class="w">FRI</div><div class="n">금</div></div>
<div>
<h2>종합 프로젝트 예고 · 팀 구성 · 회고</h2>
<div class="dm">오늘 목표: 다음 2주 프로젝트의 주제 후보를 보고, 팀·역할·PM을 정하고, 한 주를 돌아본다.</div>
</div>
</div>
<div class="session">
<div class="s-head">
<div class="tag">Day 5 · 세션 1 · 오전</div>
<h3>종합 프로젝트 예고 — 주제 후보 함께 보기</h3>
<div class="dur">80분</div>
</div>
<div class="s-body">
<div class="block">
<div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>다음 2주 종합 프로젝트가 어떤 것인지 큰 그림을 이해한다.</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:00</div><div class="ac"><b>프로젝트 개요</b> — 2주간 팀으로 하나를 만든다는 흐름 설명</div></div>
<div class="r"><div class="tm">0:15</div><div class="ac"><b>주제 후보 공유</b> — 예: 사내 미니 도구, 고객 서비스 참고형 화면, 학습 기록 앱 등 3~4개</div></div>
<div class="r"><div class="tm">0:40</div><div class="ac"><b>각자 선호 투표 + 이유</b> — 끌리는 주제와 이유 한 줄</div></div>
<div class="r"><div class="tm">1:00</div><div class="ac"><b>토론</b> — 우리 4명이 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>"다음 2주는 지금까지 배운 걸 다 모아서, 팀으로 하나의 결과물을 만드는 시간이에요. 혼자가 아니라 넷이 함께요. 우리 회사가 '고객과 함께 더 나은 세상을 만들어 나가는' 것처럼, 여러분도 함께 만들어 볼 거예요."</p>
<p>"주제는 제가 정해주는 게 아니라 같이 골라요. 거창하지 않아도 좋아요. '2주에 우리가 진짜 끝낼 수 있는 크기'가 제일 중요해요."</p>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
<div class="tpl">
<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><b>세션 끝에 확인합니다.</b></p>
<ul>
<li>프로젝트가 2주짜리 팀 작업이라는 걸 이해했나요?</li>
<li>선호 주제와 그 이유를 말했나요?</li>
</ul>
</div>
</div>
</div>
</div>
<div class="session">
<div class="s-head">
<div class="tag">Day 5 · 세션 2 · 오후</div>
<h3>팀 구성 · 역할과 PM 롤 정하기</h3>
<div class="dur">70분</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>PM(진행 담당) 역할이 무엇인지 알고 한 명을 정한다.</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:00</div><div class="ac"><b>역할 소개</b> — 개발 3 · 디자인 1 구성에서 누가 무엇을 맡을지 예시</div></div>
<div class="r"><div class="tm">0:15</div><div class="ac"><b>PM 롤이란</b> — 일정·할 일 정리·소통 담당(대장이 아님)임을 설명</div></div>
<div class="r"><div class="tm">0:30</div><div class="ac"><b>역할·PM 정하기</b> — 서로 상의해 자율 결정, 멘토는 중재만</div></div>
<div class="r"><div class="tm">0:55</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>"PM은 '대장'이 아니에요. 팀이 길을 잃지 않게 할 일을 정리하고, 서로 소통을 돕는 사람이에요. 돌아가면서 경험해 보면 좋은 역할이에요."</p>
<p>"디자인을 맡은 친구는 화면 방향을, 개발 친구들은 각자 맡을 화면·기능을 나눠요. 정답은 없어요. 서로 하고 싶은 것과 잘하는 것을 얘기하면서 정해봐요."</p>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
<div class="tpl">
<div class="cap">팀 구성표 — 함께 채우기</div>
<pre>[프로젝트 이름(가칭)] <span class="hl">_______________</span>
[PM(진행 담당)] <span class="hl">_______________</span>
역할 나누기
- 디자인 파트: <span class="hl">_____</span> → 맡을 것 <span class="hl">_______</span>
- 개발 A: <span class="hl">_____</span> → 맡을 것 <span class="hl">_______</span>
- 개발 B: <span class="hl">_____</span> → 맡을 것 <span class="hl">_______</span>
- 개발 C: <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><b>세션 끝에 확인합니다.</b></p>
<ul>
<li>각자 맡을 역할이 정해졌나요?</li>
<li>PM이 무슨 일을 하는지 말할 수 있나요?</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> 4명 모두 "하고 싶은 것"을 한 번씩 말하게 한 뒤 정하도록 멘토가 진행 순서를 잡아줍니다.</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">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>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:00</div><div class="ac"><b>그룹 회고</b> — 이번 주 KPT(좋았던 것·아쉬운 것·다음에 시도) 한 바퀴</div></div>
<div class="r"><div class="tm">0:25</div><div class="ac"><b>1:1 면담</b> — 1인당 7~8분, 나머지는 워크시트 정리</div></div>
<div class="r"><div class="tm">0:55</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><em>(1:1에서) "이번 주 스스로 제일 잘했다고 느낀 순간은 언제였어요? 다음 주 프로젝트에서 꼭 해보고 싶은 건요?"</em></p>
</div>
</div>
<div class="block">
<div class="bt"><span class="ic act">✍️</span>워크시트</div>
<div class="tpl">
<div class="cap">6주차 회고 — KPT</div>
<pre>[Keep] 이번 주 좋았던 것 <span class="hl">_______________</span>
[Problem] 아쉬웠던 것 <span class="hl">_________________</span>
[Try] 다음 주 시도할 것 <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><b>이번 주 관찰 항목을 수습생별로 기록합니다.</b></p>
<ul>
<li><b>독립성</b> — 멘토 개입 없이 스스로 판단·진행한 정도</li>
<li><b>문제해결력</b> — 막혔을 때 스스로 시도한 뒤 질문했는가</li>
<li><b>협업 태도</b> — 팀 구성·역할 논의에서 서로를 존중했는가</li>
<li>산출물: 완료 티켓 · 프로젝트 킥오프 준비(팀·역할·주제)</li>
</ul>
</div>
</div>
</div>
</div>
<section>
<div class="next">
<p><b>다음 주 예고 · 7주차</b> — 종합 프로젝트 ①: 오늘 정한 팀·역할·주제로 킥오프. 기획·설계부터 화면·API 구현까지 팀으로 함께 만들어 나갑니다. PM이 첫 스탠드업을 이끕니다.</p>
</div>
</section>
<footer>
<span>AWESOMEDEV · 6주차 상세 강의안 (멘토용) · 8부작 중 6</span>
<span>2026 · 수습 가이드 · CS 커리큘럼 · 평가 루브릭과 함께 사용</span>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink