AWESOMEDEV
5c9959ce08
이모지 아이콘을 SVG로 바꾸다가, 더 큰 원인을 발견해 함께 고쳤다.
■ 폰트: 이름만 부르고 파일은 안 받아오고 있었다
global.css에 font-family: "Pretendard"가 적혀 있었지만 @font-face도 CDN
링크도 없었다. 그래서 이 글꼴이 따로 깔린 사람 외에는 전원 맑은 고딕으로
보고 있었다 — 앱과 학습 문서 19개 전부. 에러가 안 나서 조용히 넘어간 케이스.
- PretendardStdVariable.woff2(285KB)를 public/fonts에 self-host
· CDN 의존 없음 → 외부 서비스가 죽어도, 오프라인에서도 안 깨진다
· variable font → 파일 하나가 굵기 45~920을 전부 담는다
· font-display: swap → 받는 동안 흰 화면(FOIT) 방지
- 전체판(2MB) 대신 Std판(상용 한글 2,350자)을 골랐다. 앱이 쓰는 한글
1,276자가 Std에 전부 있는지 브라우저에서 실측 확인했다(폴백 0자).
- 학습 문서 19개에도 같은 @font-face 적용
■ 아이콘: 이모지 95종 → Lucide 132개
이모지는 OS마다 다른 그림으로 렌더링되고, 굵기·색을 통제할 수 없고,
스크린리더가 "bust in silhouette"처럼 읽는다.
- 카탈로그의 icon: '📜'(문자) → Icon: ScrollText(컴포넌트)로 전환
- strokeWidth={1.5}로 굵기 통일, aria-hidden으로 장식임을 명시
- 개별 import만 사용(트리셰이킹) → gzip +14KB
- slug: null인 '개발 환경 설치 가이드' 항목이 일괄 변환에서 누락돼
Icon이 undefined가 될 뻔한 것을 정합성 검사(항목 수 vs Icon 수)로 잡았다
■ 토큰: 여백·글자 크기·굵기를 :root로 승격
--space-1~7(4의 배수), --text-xs~2xl, --weight-*, --radius-sm/lg/full.
값을 직접 박으면 다크 모드에서 깨지고 화면마다 미묘하게 어긋난다.
CSS 프레임워크는 도입하지 않았다 — 손으로 쓴 global.css와 충돌하고,
교재로서 "왜 이렇게 썼는지"가 사라지기 때문이다.
■ /design: 재료를 고르는 화면
색·글자·여백·모서리를 실제 CSS 변수로 렌더링(다크 모드 자동 반영) +
Lucide 아이콘 1,993개 검색·복사. lucide-react는 아이콘 하나를 이름 3개로
내보내(Rocket/RocketIcon/LucideRocket) 5,981개처럼 보이므로 별칭을 걸렀다.
아이콘 전체를 훑어야 해 무거운 화면이라 lazy로 분리했다
→ 첫 화면 번들은 1.9KB만 증가(575.57 → 577.44KB).
검증: ESLint 통과, Vitest 30개 통과, 프로덕션 빌드 성공, 콘솔 에러 0.
브라우저에서 수습 7카테고리 + 초급~특급 4과정 = 11개 화면 전수 확인
(각 12카드/12아이콘/이모지 0).
문서: DESIGN.md(폰트·토큰·비용), ICONS.md(규약·대응표 132행)
824 lines
47 KiB
HTML
824 lines
47 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>AWESOMEDEV 수습 상세 강의안 · 3주차</title>
|
||
<style>
|
||
/* 웹폰트: 앱과 같은 Pretendard를 문서에도 적용한다(선언만 있고 파일이 없던 문제 수정). */
|
||
@font-face {
|
||
font-family: "Pretendard";
|
||
src: url("/fonts/PretendardStdVariable.woff2") format("woff2-variations");
|
||
font-weight: 45 920;
|
||
font-display: swap;
|
||
}
|
||
|
||
:root {
|
||
--paper: #FAFBFD; --card: #FFFFFF; --ink: #101A28; --ink-soft: #46536A;
|
||
--ink-faint: #7B8798; --line: #E4E8F0; --line-soft: #EFF2F7;
|
||
--primary: #2159C5; --primary-soft: #E5EDFB; --primary-deep: #163F8F;
|
||
--amber: #B9772A; --amber-soft: #F6EBDA; --amber-line: #E4C79A;
|
||
--teal: #0E8C86; --teal-soft: #E0F1EF;
|
||
--rose: #B4463C; --rose-soft: #F7E7E4;
|
||
--code-bg: #F1F4F9;
|
||
--shadow: 0 1px 2px rgba(16,26,40,.05), 0 8px 24px -12px rgba(16,26,40,.16);
|
||
--radius: 14px;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--paper: #0B1017; --card: #131A24; --ink: #E8EDF4; --ink-soft: #A4B0C0;
|
||
--ink-faint: #74808F; --line: #263140; --line-soft: #1C242F;
|
||
--primary: #6AA0F0; --primary-soft: #172A44; --primary-deep: #AECBF8;
|
||
--amber: #DBA25C; --amber-soft: #2C2318; --amber-line: #4A3B23;
|
||
--teal: #4FC7BE; --teal-soft: #14302E; --rose: #E08A80; --rose-soft: #331E1B;
|
||
--code-bg: #161E28;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
|
||
}
|
||
}
|
||
:root[data-theme="light"] {
|
||
--paper: #FAFBFD; --card: #FFFFFF; --ink: #101A28; --ink-soft: #46536A;
|
||
--ink-faint: #7B8798; --line: #E4E8F0; --line-soft: #EFF2F7;
|
||
--primary: #2159C5; --primary-soft: #E5EDFB; --primary-deep: #163F8F;
|
||
--amber: #B9772A; --amber-soft: #F6EBDA; --amber-line: #E4C79A;
|
||
--teal: #0E8C86; --teal-soft: #E0F1EF; --rose: #B4463C; --rose-soft: #F7E7E4;
|
||
--code-bg: #F1F4F9;
|
||
--shadow: 0 1px 2px rgba(16,26,40,.05), 0 8px 24px -12px rgba(16,26,40,.16);
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--paper: #0B1017; --card: #131A24; --ink: #E8EDF4; --ink-soft: #A4B0C0;
|
||
--ink-faint: #74808F; --line: #263140; --line-soft: #1C242F;
|
||
--primary: #6AA0F0; --primary-soft: #172A44; --primary-deep: #AECBF8;
|
||
--amber: #DBA25C; --amber-soft: #2C2318; --amber-line: #4A3B23;
|
||
--teal: #4FC7BE; --teal-soft: #14302E; --rose: #E08A80; --rose-soft: #331E1B;
|
||
--code-bg: #161E28;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||
body { margin: 0; background: var(--paper); color: var(--ink);
|
||
font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
|
||
line-height: 1.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> · 수습 상세 강의안 · 3 / 8</div>
|
||
<h1>3주차 상세 강의안<br>첫 실무 — 내 작업이 반영되는 경험</h1>
|
||
<p class="lede">이번 주는 수습생이 처음으로 "진짜 코드베이스"를 건드립니다. 아주 작고 안전한 소과제를 배정하고, 접근 방법 공유 → 구현 → 중간보고 → 코드리뷰 반영 → 머지 → 배포 확인까지 실무의 한 사이클을 온전히 밟게 합니다. 목표는 잘 만든 결과물이 아니라, "내가 짠 코드가 실제로 반영되는" 첫 성공 경험을 심는 것입니다.</p>
|
||
<div class="mast-meta">
|
||
<span class="chip"><span class="dot"></span>대상 · 수습생 4명 (개발 3 · 디자인 1)</span>
|
||
<span class="chip"><span class="dot"></span>산출물 · 머지된 첫 PR 1건</span>
|
||
<span class="chip"><span class="dot"></span>스택 · React · Spring Boot · JS 우선</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> 구현 시작 · 30분 룰 · PR 초안</a></li>
|
||
<li><a href="#d3"><b>수</b> 중간보고 · PR 완성</a></li>
|
||
<li><a href="#d4"><b>목</b> 리뷰 반영 · 머지 · 배포 확인</a></li>
|
||
<li><a href="#d5"><b>금</b> 회고 · 1:1 · 퀴즈</a></li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<section>
|
||
<div class="card">
|
||
<p class="sub" style="margin-top:0"><strong>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분 · 포인터 세션</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>"왜 언어가 계속 바뀌어 왔는지"를 우리 스택(JS·Java) 예로 감 잡는다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 / 진행 안내</div>
|
||
<div class="act-box">
|
||
<p><b>CS 기본기 4주 커리큘럼 문서의 W3 해당 일차</b>를 그대로 진행합니다. 이 세션은 포인터(연결)용이니 30~40분 안에 마치고 본 세션으로 넘어갑니다.</p>
|
||
<ul>
|
||
<li>커리큘럼 문서 W3 "언어의 진화" 파트를 화면 공유로 함께 읽기.</li>
|
||
<li>마무리 질문: "오늘 우리가 쓰는 JavaScript는 이 흐름의 어디쯤일까?" 한 명씩 짧게 답.</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">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>과제 범위가 "아주 작다"는 것을 이해하고, 크게 벌리지 않는다.</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–35분</div><div class="ac"><b>과제 배정.</b> 개발 3명에게 안전 과제 1건씩 이슈로 부여(아래 예시 풀에서 선택).</div></div>
|
||
<div class="r"><div class="tm">35–55분</div><div class="ac"><b>과제 읽기.</b> 각자 이슈를 소리 내어 다시 설명 → 멘토가 범위 확인.</div></div>
|
||
<div class="r"><div class="tm">55–70분</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>"오늘부터 여러분한테 진짜 코드베이스에서 할 일을 하나씩 줄 거예요. 겁먹지 않아도 돼요. 첫 과제는 일부러 아주 작고 안전한 걸로 골랐어요."</p>
|
||
<p>"예를 들면 버튼 문구에 오타가 있는 걸 고친다든가, 화면에 안 맞는 문장을 다듬는다든가, 로그 메시지를 조금 더 알아보기 쉽게 바꾸는 거예요. 하루 만에 세상을 바꾸는 게 목표가 아니라, <b>내가 고친 게 실제로 반영되는 걸 한 번 경험</b>하는 게 목표예요."</p>
|
||
<p><em>Tip. 과제를 줄 때 "이건 망가뜨려도 되는 안전한 부분"이라고 분명히 말해 심리적 부담을 낮춘다.</em></p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 — 안전 과제 예시 풀</div>
|
||
<div class="act-box">
|
||
<p>멘토는 아래에서 각자 수준에 맞게 1건씩 고릅니다. <b>공통 조건: 반나절 안에 끝나고, 실패해도 서비스에 영향이 없는 것.</b></p>
|
||
<ul>
|
||
<li>화면 버튼/안내 문구의 <b>오타·어색한 문장 수정</b> (예: "저장되엇습니다" → "저장되었습니다").</li>
|
||
<li>비어 있는 화면의 <b>안내 문구 한 줄 추가</b> (예: 목록이 없을 때 "아직 등록된 항목이 없어요").</li>
|
||
<li>버튼 <b>간격·색·비활성 상태 같은 간단한 UI</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> 이번 주의 목적은 실력 검증이 아니라 <b>사이클 경험</b>이다. 일부러 작게 유지한다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 1 · 세션 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>코드를 짜기 전에 "어디를 · 어떻게 고칠지"를 3~4줄로 먼저 말/글로 정리한다.</li>
|
||
<li>멘토의 짧은 확인을 받고 나서 손을 대는 습관을 만든다.</li>
|
||
<li>(디자이너) 첫 디자인 개선 과제를 받고 범위를 정한다.</li>
|
||
</ul>
|
||
</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>"3~4줄이면 충분해요. 어느 파일을 볼 것 같은지, 어떻게 바꿀 생각인지, 확인은 어떻게 할 건지. 완벽하지 않아도 되니까 지금 생각나는 대로 적어봐요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>워크시트 — 접근 방법 3줄 정리</div>
|
||
<div class="tpl">
|
||
<div class="cap">접근 방법 공유 (빈칸을 채워 멘토에게 보내기)</div>
|
||
<pre>과제: <span class="hl">[예: 저장 버튼 문구 오타 수정]</span>
|
||
|
||
1) 어디를 고칠 것 같은가
|
||
→ <span class="hl">[예: web의 저장 버튼 컴포넌트 파일일 것 같다]</span>
|
||
|
||
2) 어떻게 바꿀 생각인가
|
||
→ <span class="hl">[예: 버튼 텍스트 문자열만 올바른 맞춤법으로 교체]</span>
|
||
|
||
3) 다 되면 어떻게 확인할 것인가
|
||
→ <span class="hl">[예: 로컬에서 그 화면 열어 버튼 글자 직접 확인]</span>
|
||
|
||
막히면? 30분 넘게 혼자 헤매지 않고 멘토에게 물어본다. ✅</pre>
|
||
</div>
|
||
<div class="act-box mt">
|
||
<p><b>디자이너 트랙 (같은 시간, 별도 진행)</b></p>
|
||
<ul>
|
||
<li>첫 디자인 개선 과제 배정: <b>빈 상태(empty state) 화면</b> 또는 <b>버튼의 상태(기본·hover·비활성)</b> 정리.</li>
|
||
<li>Figma에서 개선안을 만들고, "개발자가 그대로 만들 수 있게" <b>핸드오프 메모</b>를 붙이는 것까지가 이번 주 목표라고 안내.</li>
|
||
<li>오늘은 범위만 확정: 무엇을 · 어느 화면을 개선할지 한 줄로 적어 멘토 확인.</li>
|
||
</ul>
|
||
</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>접근 방법 3줄을 <b>멘토에게 공유</b>했는가?</li>
|
||
<li>"막히면 30분 룰"이 뭔지 말할 수 있는가?</li>
|
||
</ul>
|
||
</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>구현 시작 — 스스로 해보되, 30분 룰</h2>
|
||
<div class="dm">목표 · 접근 방법대로 직접 손을 대고, 막히면 30분 안에 도움을 청한다. PR 초안까지.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 2 · 세션 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>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 / 진행 안내</div>
|
||
<div class="act-box">
|
||
<p><b>CS 기본기 4주 커리큘럼 문서의 W3 해당 일차</b>를 진행합니다. 짧게 복습 + 오늘 분량만.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 2 · 세션 2 · 오전~오후</div>
|
||
<h3>직접 구현 — 30분 룰 실습</h3>
|
||
<div class="dur">120분</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>혼자 30분 이상 막히면 스스로 손을 들어 도움을 청한다.</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>구현.</b> 각자 진행. 멘토는 순회하며 "막힌 지 몇 분 됐어요?" 물어 30분 룰 상기.</div></div>
|
||
<div class="r"><div class="tm">90–110분</div><div class="ac"><b>동작 확인.</b> 고친 부분을 직접 눈으로 확인.</div></div>
|
||
<div class="r"><div class="tm">110–120분</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>"30분 룰 하나만 기억해요. <b>혼자 30분 넘게 같은 자리에서 막히면, 그때는 물어보는 게 맞아요.</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>
|
||
<ol>
|
||
<li>최신 <code>main</code>을 받고, 내 과제용 브랜치를 새로 판다.</li>
|
||
<li>접근 방법 3줄대로 파일을 찾아 수정한다.</li>
|
||
<li>고친 화면/로그를 로컬에서 직접 확인한다.</li>
|
||
<li>작은 단위로 커밋 메시지를 남긴다 (예: <code>fix: 저장 버튼 문구 오타 수정</code>).</li>
|
||
</ol>
|
||
</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> 30분 룰을 규칙으로 못박는다. 물어본 학생을 <b>칭찬</b>해 분위기를 만든다.</div>
|
||
<div class="row"><b>실수 ·</b> <code>main</code>에서 바로 수정한다.</div>
|
||
<div class="row"><b>대처 ·</b> "무조건 새 브랜치에서"를 첫날부터 몸에 배게 한다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 2 · 세션 3 · 오후</div>
|
||
<h3>PR 초안 작성</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>PR(Pull Request)이 "리뷰해 달라고 내미는 요청서"임을 이해한다.</li>
|
||
<li>무엇을·왜 바꿨는지, 어떻게 확인했는지가 담긴 PR 설명을 쓴다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>워크시트 — PR 설명 템플릿</div>
|
||
<div class="tpl">
|
||
<div class="cap">PR 설명 (빈칸 채워 초안 올리기)</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>PR 초안을 올리기 전 스스로 점검:</p>
|
||
<ul>
|
||
<li>제목만 봐도 <b>무엇을 한 PR인지</b> 알 수 있는가?</li>
|
||
<li>"어떻게 확인했는지"가 <b>구체적으로</b> 적혀 있는가?</li>
|
||
<li>이 브랜치가 <code>main</code>이 <b>아닌</b> 내 작업 브랜치인가?</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">목표 · 시키지 않아도 진행 상황을 짧게 보고하고, PR을 리뷰 받을 수 있게 완성한다.</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>W3 커리큘럼의 남은 분량을 마무리하고 한 줄로 요약한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 / 진행 안내</div>
|
||
<div class="act-box">
|
||
<p><b>CS 기본기 4주 커리큘럼 문서의 W3 해당 일차</b>를 진행합니다.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 3 · 세션 2 · 오전</div>
|
||
<h3>중간보고 실습 — "3줄 보고"</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>보고를 짧고 구조적으로(한 것·할 것·막힌 것) 말한다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"실무에서 팀장이 제일 답답한 게 뭔지 알아요? 진행 상황이 안 보이는 거예요. 다 끝낼 때까지 아무 말이 없으면, 잘 되고 있는지 막혀 있는지 알 수가 없거든요."</p>
|
||
<p>"그래서 오늘은 <b>'3줄 보고'</b>를 연습할 거예요. 어제 뭘 했고, 오늘 뭘 할 거고, 막힌 건 뭔지. 딱 세 줄이면 돼요. 이걸 하루 한 번씩만 해도 신뢰가 확 올라가요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>워크시트 — 3줄 중간보고 대본</div>
|
||
<div class="tpl">
|
||
<div class="cap">중간보고 (팀 채널에 붙여넣기)</div>
|
||
<pre>[중간보고] <span class="hl">[내 이름]</span> · <span class="hl">[날짜]</span>
|
||
|
||
✅ 한 것: <span class="hl">[예: 저장 버튼 오타 수정하고 로컬 확인까지]</span>
|
||
▶ 할 것: <span class="hl">[예: PR 설명 다듬고 리뷰 요청하기]</span>
|
||
⚠ 막힌 것: <span class="hl">[예: 없음 / 또는: 같은 오타가 다른 화면에도 있는지 확인 중]</span></pre>
|
||
</div>
|
||
<div class="act-box mt">
|
||
<p><b>진행:</b> 각자 3줄 보고를 작성 → 팀 채널에 올리기 → 멘토가 한 명씩 짧게 피드백. "막힌 것: 없음"도 좋은 보고라고 알려준다.</p>
|
||
</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="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 3 · 세션 3 · 오후</div>
|
||
<h3>PR 완성 & 리뷰 요청 (+ 디자이너 핸드오프)</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>리뷰 받을 수 있는 상태로 PR을 다듬고, 정식으로 리뷰를 요청한다.</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–40분</div><div class="ac"><b>PR 마무리.</b> 설명 채우기 · 불필요한 변경 없나 스스로 diff 훑기.</div></div>
|
||
<div class="r"><div class="tm">40–60분</div><div class="ac"><b>리뷰 요청.</b> 멘토를 리뷰어로 지정하고 팀 채널에 한 줄 공지.</div></div>
|
||
<div class="r"><div class="tm">60–90분</div><div class="ac"><b>디자이너 핸드오프.</b> Figma 링크 + 핸드오프 메모를 담당 개발자에게 전달.</div></div>
|
||
</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>
|
||
Figma: <span class="hl">[링크]</span>
|
||
|
||
바뀐 점
|
||
- <span class="hl">[예: 빈 상태에 안내 문구 + 일러스트 추가]</span>
|
||
|
||
개발자가 봐야 할 값
|
||
- 글자색: <span class="hl">[예: 보조 텍스트 컬러]</span>
|
||
- 여백: <span class="hl">[예: 위아래 24, 좌우 16]</span>
|
||
- 버튼 상태: <span class="hl">[기본 / hover / 비활성 각각 첨부]</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>개발 3명 모두 <b>리뷰 요청된 PR</b>이 있는가?</li>
|
||
<li>PR에 <b>내 변경만</b> 들어 있는가(엉뚱한 파일 X)?</li>
|
||
<li>디자이너는 <b>핸드오프 메모</b>를 전달했는가?</li>
|
||
</ul>
|
||
</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">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>코멘트를 하나씩 읽고, 무엇을 요청하는지 자기 말로 옮긴다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"제가 여러분 PR에 코멘트를 몇 개 달았어요. 미리 말할게요. <b>이건 잘못했다고 지적하는 게 아니에요.</b> 저도 제 코드에 매일 리뷰를 받아요. 같이 더 좋게 만드는 대화예요."</p>
|
||
<p>"코멘트를 읽고 이해가 안 되면 '이게 무슨 뜻이에요?'라고 물어봐도 아주 좋아요. 리뷰는 원래 주고받는 거예요."</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic act">✍️</span>실습 — 코멘트 옮겨 적기</div>
|
||
<div class="act-box">
|
||
<p>각 리뷰 코멘트를 아래 형식으로 한 줄씩 정리한 뒤 반영을 시작합니다.</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="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 4 · 세션 2 · 오후</div>
|
||
<h3>반영 → 머지 → 배포 확인 (하이라이트)</h3>
|
||
<div class="dur">120분</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>"내 코드가 실제로 반영된다"는 성공 경험을 명확히 인지한다.</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–50분</div><div class="ac"><b>반영.</b> 코멘트대로 수정 → 커밋 추가 → "반영했어요" 코멘트로 알림.</div></div>
|
||
<div class="r"><div class="tm">50–70분</div><div class="ac"><b>재확인 & 승인.</b> 멘토가 재리뷰 → 승인(Approve).</div></div>
|
||
<div class="r"><div class="tm">70–90분</div><div class="ac"><b>머지.</b> 학생이 직접 머지 버튼을 누른다(멘토 옆에서).</div></div>
|
||
<div class="r"><div class="tm">90–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>"자, 머지 버튼은 <b>여러분이 직접</b> 눌러요. 제가 대신 안 눌러요. 방금 여러분이 짠 코드가 우리 진짜 코드에 합쳐지는 순간이에요."</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>머지한 PR: <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 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>
|
||
</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>회고 · 1:1 · 퀴즈</h2>
|
||
<div class="dm">목표 · 첫 실무 사이클을 돌아보고, 잘한 점·아쉬운 점을 기록하며 다음을 준비한다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 1 · 오전</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>잘한 점 1개, 아쉬운 점 1개, 다음에 시도할 것 1개를 적는다.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic script">💬</span>멘토 스크립트</div>
|
||
<div class="script">
|
||
<div class="who">멘토</div>
|
||
<p>"이번 주 여러분 전부 <b>진짜 코드를 머지</b>했어요. 첫 실무 주에 이만큼 온 거 정말 대단해요. 결과물 크기는 중요하지 않아요. <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">3주차 회고 (각자 작성 후 공유)</div>
|
||
<pre>이번 주 내가 머지한 것: <span class="hl">[한 줄]</span>
|
||
|
||
😀 잘한 점: <span class="hl">[예: 막혔을 때 30분 룰대로 바로 물어봤다]</span>
|
||
🤔 아쉬운 점: <span class="hl">[예: PR 설명을 너무 짧게 썼다]</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>"30분 룰"이 무엇이고 왜 있는가?</li>
|
||
<li>PR 설명에 꼭 들어가야 할 것 <b>2가지</b>는?</li>
|
||
<li>머지 다음에 반드시 해야 하는 것은?</li>
|
||
<li>(디자이너) 좋은 핸드오프 메모에 들어갈 정보 <b>2가지</b>는?</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session">
|
||
<div class="s-head">
|
||
<div class="tag">Day 5 · 세션 2 · 오후</div>
|
||
<h3>1:1 면담 & 평가 체크포인트</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>
|
||
<li>멘토는 평가 루브릭 3항목을 관찰 근거와 함께 기록한다.</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–11분</div><div class="ac"><b>피드백.</b> 잘한 것 먼저, 개선점은 구체적 행동으로.</div></div>
|
||
<div class="r"><div class="tm">인당 11–15분</div><div class="ac"><b>다음 주 한 가지 목표</b> 함께 정하기.</div></div>
|
||
</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>
|
||
|
||
2) 피드백 반영 태도 — 리뷰를 방어 없이 받아 반영했는가
|
||
근거: <span class="hl">[관찰한 사실]</span>
|
||
|
||
3) 보고 습관 — 먼저 진행 상황을 공유했는가
|
||
근거: <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> 1:1이 일방적 평가 통보가 된다.</div>
|
||
<div class="row"><b>대처 ·</b> 학생이 <b>말하는 시간</b>을 더 준다. 멘토는 듣고 근거만 기록.</div>
|
||
<div class="row"><b>실수 ·</b> 결과물 완성도로만 평가한다.</div>
|
||
<div class="row"><b>대처 ·</b> 이번 주 평가축은 <b>완주력·반영 태도·보고 습관</b>임을 기억한다.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<div class="next">
|
||
<p><b>다음 주 예고 — 4주차.</b> 첫 사이클을 돌아본 이제, 조금 더 넓게 봅니다. 우리 서비스가 어떤 구조로 돌아가는지(프론트·백엔드·배포의 큰 그림)를 익히고, 두 번째 과제는 "여러 파일에 걸친 조금 더 큰 변경"으로 한 단계 올라갑니다. 고객사(KT엠모바일·KT알파·핀업)의 실제 화면을 예로 함께 살펴봅니다.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<span>AWESOMEDEV · 3주차 상세 강의안 (멘토용) · 8부작 중 3</span>
|
||
<span>2026 · 수습 가이드 · CS 커리큘럼 · 평가 루브릭과 함께 사용</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|