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>
880 lines
55 KiB
HTML
880 lines
55 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>
|
||
: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); }
|
||
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; }
|
||
.time { display: grid; gap: 0; }
|
||
.time .row { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
|
||
.time .row:first-child { border-top: 0; }
|
||
.time .t { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
|
||
.time .v { font-size: 14.5px; color: var(--ink-soft); } .time .v b { color: var(--ink); font-weight: 600; }
|
||
.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; }
|
||
.task { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
|
||
.t-head { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); background: var(--primary-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
||
.t-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
|
||
.t-head .kind { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); }
|
||
.diff { font-size: 12px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
|
||
.diff.d1 { color: var(--teal); background: var(--teal-soft); }
|
||
.diff.d2 { color: var(--amber); background: var(--amber-soft); }
|
||
.diff.d3 { color: var(--rose); background: var(--rose-soft); }
|
||
.t-body { padding: 18px 20px; display: grid; gap: 14px; }
|
||
.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.goal { background: var(--primary-soft); } .bt .ic.step { background: var(--teal-soft); }
|
||
.bt .ic.out { background: var(--amber-soft); } .bt .ic.extra { background: var(--line-soft); }
|
||
.bt .ic.dz { background: var(--rose-soft); }
|
||
.goal-line { font-size: 14.5px; color: var(--ink); }
|
||
.steps { margin: 0; padding: 0 0 0 2px; display: grid; gap: 8px; counter-reset: st; }
|
||
.steps li { list-style: none; padding-left: 30px; position: relative; font-size: 14px; color: var(--ink-soft); counter-increment: st; }
|
||
.steps li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: var(--teal-soft); color: var(--teal); font-weight: 800; font-size: 12px; display: grid; place-items: center; }
|
||
.steps li b { color: var(--ink); font-weight: 600; }
|
||
.out-box { border: 1px solid var(--amber-line); background: var(--amber-soft); border-radius: 10px; padding: 12px 15px; }
|
||
.out-box p { font-size: 13.5px; color: var(--ink-soft); } .out-box b { color: var(--ink); }
|
||
.out-box ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink); }
|
||
.extra-box { border: 1px dashed var(--line); background: var(--code-bg); border-radius: 10px; padding: 12px 15px; }
|
||
.extra-box p { font-size: 13.5px; color: var(--ink-soft); } .extra-box b { color: var(--primary); }
|
||
.dz-box { border: 1px solid color-mix(in srgb,var(--rose) 25%,transparent); background: var(--rose-soft); border-radius: 10px; padding: 12px 15px; }
|
||
.dz-box p { font-size: 13.5px; color: var(--ink-soft); } .dz-box b { color: var(--rose); }
|
||
.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; }
|
||
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; }
|
||
@media (max-width:560px){ .time .row { grid-template-columns: 96px 1fr; gap: 10px; } }
|
||
@media print { body{background:#fff;} .card,header.mast,.task,.day-badge{box-shadow:none;} .task{break-inside:avoid;} }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="wrap">
|
||
|
||
<header class="mast">
|
||
<div class="wordmark"><b>AWESOMEDEV</b> · 일일 과제집 · 3 / 4</div>
|
||
<h1>3주차 일일 과제집<br>첫 소과제 실전</h1>
|
||
<p class="lede">이 과제집은 오후 자기주도 시간(10:40–12:00, 13:00–16:30)에 쓰는 문서예요. 이번 주는 배정받은 첫 소과제가 메인이고, 이 문서는 그 소과제를 계획→구현→PR→리뷰 반영→회고로 끌고 가는 체크리스트와 양식을 담고 있어요. 매일 16:30 멘토 리뷰 때 제출할 산출물이 정해져 있으니, 하루를 시작할 때 그날의 산출물부터 확인하고 움직여 보세요.</p>
|
||
<div class="mast-meta">
|
||
<span class="chip"><span class="dot"></span>Week 3 · 월–금</span>
|
||
<span class="chip"><span class="dot"></span>오후 자기주도 시간용</span>
|
||
<span class="chip"><span class="dot"></span>매일 16:30 과제 리뷰 제출</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="rhythm">
|
||
<div class="eyebrow">Daily Rhythm</div>
|
||
<h2>하루의 리듬</h2>
|
||
<p class="sub">3주차 내내 하루의 뼈대는 같아요. 오전 강의에서 배운 것을 오후에 소과제로 바로 이어가는 구조예요.</p>
|
||
<div class="card mt">
|
||
<div class="time">
|
||
<div class="row"><div class="t">09:30–10:30</div><div class="v"><b>아침 강의(멘토)</b> — 기본기 코너 「프로그램의 변화」 + 그날의 소과제 진행 포인트</div></div>
|
||
<div class="row"><div class="t">10:40–12:00</div><div class="v"><b>일일 과제 전반</b> — 머리가 맑은 시간. 그날 과제의 가장 어려운 부분부터 시작해요</div></div>
|
||
<div class="row"><div class="t">13:00–16:30</div><div class="v"><b>일일 과제 후반</b> — 막히면 <b>30분 룰</b>: 30분 동안 스스로 시도한 흔적(검색어·시도한 코드·에러 메시지)을 정리한 뒤 멘토에게 질문해요</div></div>
|
||
<div class="row"><div class="t">16:30–17:00</div><div class="v"><b>멘토 과제 리뷰</b> — 그날의 산출물을 제출하고 피드백을 받아요</div></div>
|
||
<div class="row"><div class="t">17:00–17:30</div><div class="v"><b>하루 정리 · 3줄 회고</b> — 오늘 한 것 / 배운 것 / 내일 할 것을 각 1줄로</div></div>
|
||
</div>
|
||
<p class="mt" style="font-size:13.5px;color:var(--ink-faint);">규칙 하나만 기억해요: <strong>과제가 일찍 끝나면 놀지 말고 예비 과제로 — 예비 과제도 평가에 반영돼요.</strong></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== MON ===================== -->
|
||
<div class="day-div" id="d1">
|
||
<div class="day-badge"><div><div class="w">MON</div><div class="n">월</div></div></div>
|
||
<div>
|
||
<h2>착수 계획서 — 시작하기 전에 지도를 그린다</h2>
|
||
<p class="dm">오전 강의에서 첫 소과제를 배정받고 접근 방법을 공유했어요. 오후엔 그 접근 방법을 문서로 굳혀요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>소과제 착수 계획서 1장 쓰기</h3></div>
|
||
<span class="diff d2">난이도 ★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">코드를 치기 전에 "무엇을, 어떻게, 얼마나 걸려서" 할지 스스로 설명하는 힘을 길러요 — 실무에서 가장 먼저 배우는 습관이에요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li><b>과제 티켓을 소리 내어 읽어요.</b> 배정받은 소과제의 설명을 3번 읽고, 모르는 단어·기능 이름에 전부 밑줄을 쳐요.</li>
|
||
<li><b>화면에서 확인해요.</b> 실제 서비스(개발 환경)를 열어 과제가 말하는 화면·기능을 직접 눌러 보고, 현재 동작을 스크린샷 1장으로 남겨요.</li>
|
||
<li><b>코드 입구를 찾아요.</b> 화면에 보이는 문구(버튼 이름 등)를 저장소에서 검색해서, 고쳐야 할 파일 후보를 2~3개까지 좁혀요. 확신이 없어도 괜찮아요 — "후보"면 충분해요.</li>
|
||
<li><b>아래 양식을 채워요.</b> 특히 "불확실한 점"을 비워 두지 마세요. 불확실한 점이 하나도 없다면 과제를 아직 덜 이해한 거예요.</li>
|
||
<li><b>작업을 3덩어리로 쪼개요.</b> "화요일 오전 / 화요일 오후 / 수요일 오전"에 각각 무엇을 끝낼지 계획서의 일정 칸에 적어요.</li>
|
||
<li><b>멘토 확인을 받아요.</b> 계획서를 들고 멘토에게 5분만 시간을 요청해서, 방향이 맞는지 확인 도장을 받아요. 16:30 전에 미리 받아도 좋아요.</li>
|
||
<li><b>수정 사항을 반영해요.</b> 멘토 코멘트를 계획서에 빨간 글씨(또는 "멘토 피드백:" 표시)로 추가해서 최종본을 만들어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 착수 계획서 1장 (아래 양식 그대로, 마크다운 파일 <code>plan.md</code> 또는 공유 문서)</p>
|
||
<ul>
|
||
<li>양식의 6개 항목이 모두 채워져 있을 것</li>
|
||
<li>"불확실한 점"이 최소 2개 이상 적혀 있을 것</li>
|
||
<li>멘토 확인 코멘트가 반영돼 있을 것</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>워크시트</div>
|
||
<div class="tpl">
|
||
<div class="cap">착수 계획서 양식 — 빈칸을 채워요</div>
|
||
<pre># 소과제 착수 계획서
|
||
|
||
작성자: <span class="hl">______</span> 작성일: 2026-__-__ 과제명: <span class="hl">______________________</span>
|
||
|
||
## 1. 무엇을 (What)
|
||
- 이 과제가 끝나면 사용자에게 무엇이 달라지나요? (1~2문장)
|
||
→ <span class="hl">________________________________________</span>
|
||
- 현재 동작 스크린샷: (붙여넣기)
|
||
|
||
## 2. 어떻게 (How)
|
||
- 고칠 것으로 보이는 파일/영역 후보:
|
||
1) <span class="hl">______________________</span> — 이유: <span class="hl">__________</span>
|
||
2) <span class="hl">______________________</span> — 이유: <span class="hl">__________</span>
|
||
- 대략의 순서: <span class="hl">____________ → ____________ → ____________</span>
|
||
|
||
## 3. 예상 소요
|
||
- 화요일 오전: <span class="hl">______________________</span>
|
||
- 화요일 오후: <span class="hl">______________________</span>
|
||
- 수요일 오전: <span class="hl">______________________</span> (PR 올리기 포함)
|
||
|
||
## 4. 불확실한 점 (최소 2개)
|
||
- <span class="hl">________________________________________</span>
|
||
- <span class="hl">________________________________________</span>
|
||
|
||
## 5. 완료 기준 (Definition of Done)
|
||
- [ ] <span class="hl">______________________</span> 가 화면에서 동작한다
|
||
- [ ] 기존 기능 <span class="hl">__________</span> 이 깨지지 않았다
|
||
- [ ] PR이 올라가고 설명이 채워져 있다
|
||
|
||
## 6. 멘토 피드백 (확인 후 기록)
|
||
- <span class="hl">________________________________________</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>내 과제 주변 코드 탐험 노트</h3></div>
|
||
<span class="diff d1">난이도 ★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">내일 구현을 시작할 파일들을 미리 읽어 두면, 화요일 아침의 나에게 큰 선물이 돼요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>계획서 2번 항목의 파일 후보를 위에서부터 하나씩 열어요.</li>
|
||
<li>파일마다 <b>맨 위(import·컴포넌트/클래스 선언)부터 끝까지</b> 훑고, "이 파일의 역할 1줄"을 노트에 적어요.</li>
|
||
<li>모르는 함수·문법이 나오면 <b>일단 이름만</b> 노트에 적고 넘어가요 (전부 이해하려고 멈추지 않기).</li>
|
||
<li>파일들 사이의 호출 관계를 화살표로 그려요. 예: <code>화면 컴포넌트 → API 호출 함수 → 서버 컨트롤러</code></li>
|
||
<li>노트 마지막에 "내일 제일 먼저 열 파일 1개"를 정해서 적어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✚</span>제출</div>
|
||
<div class="extra-box">
|
||
<p><b>제출:</b> 탐험 노트(파일별 역할 1줄 + 화살표 그림 + 모르는 것 목록). 계획서 뒤에 붙여서 함께 내면 돼요. 일찍 끝났을 때만 하는 과제지만, 하면 화요일이 훨씬 편해져요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>개선 과제 착수 계획 — 대상 화면과 문제 정의</h3></div>
|
||
<span class="diff d2">난이도 ★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic dz">🎨</span>개발자 과제와의 차이</div>
|
||
<div class="dz-box">
|
||
<p><b>구조는 같고 대상만 달라요.</b> 개발자가 "코드 입구"를 찾는 자리에서, 디자이너는 "화면의 문제"를 찾아요. 계획서 양식도 같은 것을 쓰되 2번 항목을 아래처럼 바꿔서 채워요.</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>배정받은 개선 대상 화면을 열고, <b>현재 상태 스크린샷을 전부</b>(기본·비어 있음·로딩·오류 상태) 캡처해요.</li>
|
||
<li>화면을 처음 보는 사람처럼 사용해 보며 <b>불편한 점을 5개 이상</b> 메모해요 (사소해도 전부).</li>
|
||
<li>5개 중 이번 주에 고칠 <b>핵심 문제 1~2개</b>를 고르고, "누가 / 언제 / 왜 불편한가"를 각 1문장으로 정의해요.</li>
|
||
<li>참고할 만한 다른 서비스의 같은 화면을 2개 찾아 스크린샷과 "여기서 배울 점 1줄"을 적어요.</li>
|
||
<li>착수 계획서 양식의 2번을 "문제 정의 + 참고 사례"로 채우고, 3번 일정(화: 시안 1차 / 수: 시안 2차 / 목: 핸드오프)을 적어요.</li>
|
||
<li>멘토 확인을 받고 피드백을 6번 칸에 기록해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 디자인 착수 계획서 1장 (현재 상태 캡처 + 문제 정의 1~2개 + 참고 사례 2개 + 일정)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== TUE ===================== -->
|
||
<div class="day-div" id="d2">
|
||
<div class="day-badge"><div><div class="w">TUE</div><div class="n">화</div></div></div>
|
||
<div>
|
||
<h2>구현 1일차 — 계획대로 가되, 어긋남을 기록한다</h2>
|
||
<p class="dm">오전 강의의 진행 포인트(작게 커밋하기)를 오후 구현에 바로 적용해요. 퇴근 전 중간보고까지가 오늘의 한 세트예요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>소과제 구현 1일차 + 퇴근 전 중간보고</h3></div>
|
||
<span class="diff d3">난이도 ★★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">계획을 실제 코드로 옮기면서, 진행 상황을 남이 이해할 수 있게 보고하는 실무 사이클을 처음부터 끝까지 경험해요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li><b>작업 브랜치를 만들어요.</b> <code>git switch -c feature/과제이름-이니셜</code> 형태로. 브랜치 이름은 멘토가 봐도 무슨 작업인지 알 수 있게 지어요.</li>
|
||
<li><b>계획서의 "화요일 오전" 덩어리부터</b> 시작해요. 어제 정한 "제일 먼저 열 파일"을 열고, 가장 작은 변경 하나(문구 하나, 조건 하나)로 시작해서 화면에 반영되는지 먼저 확인해요.</li>
|
||
<li><b>동작하는 단위마다 커밋해요.</b> 하루 최소 3커밋. 커밋 메시지는 "무엇을 했는지"가 보이게: <code>feat: 목록 화면에 빈 상태 문구 추가</code> 처럼요.</li>
|
||
<li><b>막히면 30분 룰.</b> 30분 동안 ①에러 메시지 정독 ②검색 ③작은 실험, 이 3가지를 해 보고 그래도 안 되면 시도 내역을 정리해 멘토에게 질문해요. 질문도 실력이에요.</li>
|
||
<li><b>15:50이 되면 손을 멈추고</b> 계획서를 다시 열어요. 계획 대비 어디까지 왔는지, 예상과 달랐던 점을 체크해요.</li>
|
||
<li><b>아래 틀로 중간보고를 작성해요.</b> 1주차에 배운 보고 틀 그대로예요: 사실 → 판단 → 다음 행동.</li>
|
||
<li><b>16:30 리뷰에서</b> 중간보고를 읽고, 오늘 커밋을 화면과 함께 보여줘요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> ① 오늘의 진행 커밋(브랜치에 3커밋 이상, 푸시 완료) ② 중간보고 메시지(아래 틀)</p>
|
||
<ul>
|
||
<li>커밋 메시지만 읽어도 오늘 한 일이 보일 것</li>
|
||
<li>중간보고에 "계획과 달랐던 점"이 솔직하게 적혀 있을 것 (없으면 "없음"이라고 쓰되, 정말인지 한 번 더 생각!)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>워크시트</div>
|
||
<div class="tpl">
|
||
<div class="cap">중간보고 메시지 틀 — 메신저에 이 형식으로 보내요</div>
|
||
<pre>[중간보고] <span class="hl">과제명</span> — 구현 1일차 (화)
|
||
|
||
■ 오늘 한 것 (사실)
|
||
- <span class="hl">________________________________________</span>
|
||
- <span class="hl">________________________________________</span>
|
||
- 커밋: <span class="hl">N</span>개 (브랜치: <span class="hl">feature/______</span>)
|
||
|
||
■ 진행률 (판단)
|
||
- 계획 대비: <span class="hl">예정대로 / 조금 늦음 / 많이 늦음</span> 중 하나 + 이유 1줄
|
||
- 계획과 달랐던 점: <span class="hl">________________________________________</span>
|
||
|
||
■ 내일 할 것 (다음 행동)
|
||
- 오전: <span class="hl">______________________</span>
|
||
- 오후: <span class="hl">______________________</span> + PR 올리기
|
||
|
||
■ 도움이 필요한 것
|
||
- <span class="hl">________________ (없으면 "없음")</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>JS 함수 연습 10제 — 손을 멈추지 않기</h3></div>
|
||
<span class="diff d1">난이도 ★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">소과제가 일찍 끝났거나 멘토 답변을 기다리는 동안, 함수 작성 근육을 유지해요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>새 파일 <code>practice-w3-tue.js</code>를 만들어요.</li>
|
||
<li>아래 문제를 <b>1번부터 순서대로</b> 풀어요. 각 문제는 함수 하나로 작성해요.</li>
|
||
<li>문제마다 <code>console.log()</code>로 예시 입력 2개 이상을 넣어 결과를 확인해요.</li>
|
||
<li>막히는 문제는 건너뛰되, 파일에 <code>// TODO: 왜 막혔는지 1줄</code>을 남겨요.</li>
|
||
<li>다 풀면(또는 시간이 되면) 커밋해서 개인 연습 저장소에 푸시해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>연습문제</div>
|
||
<div class="tpl">
|
||
<div class="cap">JS 함수 연습 10제 (답은 스스로!)</div>
|
||
<pre>1. sum(a, b) — 두 수를 받아 합을 반환하는 함수를 작성하세요.
|
||
|
||
2. isEven(n) — 정수를 받아 짝수면 true, 홀수면 false를 반환하세요.
|
||
|
||
3. maxOfThree(a, b, c) — 세 수 중 가장 큰 값을 반환하세요.
|
||
(Math.max 없이 if문으로 먼저 풀고, 그 다음 Math.max로도 풀어 보세요.)
|
||
|
||
4. repeatText(text, n) — 문자열 text를 n번 이어붙인 문자열을 반환하세요.
|
||
예: repeatText("하", 3) → "하하하"
|
||
|
||
5. countVowels(str) — 영어 문자열에서 모음(a,e,i,o,u)의 개수를 반환하세요.
|
||
대문자도 세어야 합니다.
|
||
|
||
6. reverseWords(sentence) — 문장을 받아 단어 순서를 뒤집어 반환하세요.
|
||
예: reverseWords("나는 오늘 출근했다") → "출근했다 오늘 나는"
|
||
|
||
7. sumArray(numbers) — 숫자 배열의 합을 반환하세요.
|
||
for문으로 한 번, reduce로 한 번, 두 가지 방법으로 작성하세요.
|
||
|
||
8. filterLongNames(names, minLength) — 이름 배열에서 글자 수가
|
||
minLength 이상인 이름만 담은 새 배열을 반환하세요.
|
||
예: filterLongNames(["김", "이서연", "박준"], 2) → ["이서연", "박준"]
|
||
|
||
9. toPriceText(price) — 숫자를 받아 천 단위 콤마를 붙인 문자열에
|
||
"원"을 붙여 반환하세요. 예: toPriceText(1250000) → "1,250,000원"
|
||
|
||
10. findFirstIndex(arr, target) — 배열에서 target이 처음 나오는
|
||
인덱스를 반환하고, 없으면 -1을 반환하세요.
|
||
(indexOf 없이 직접 반복문으로 구현하세요.)</pre>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✚</span>제출</div>
|
||
<div class="extra-box">
|
||
<p><b>제출:</b> <code>practice-w3-tue.js</code> 파일 링크(푸시된 커밋). 몇 번까지 풀었는지, 어디서 막혔는지를 중간보고 메시지 끝에 한 줄로 덧붙여요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>시안 1차 — 핵심 문제 하나를 화면으로</h3></div>
|
||
<span class="diff d2">난이도 ★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic dz">🎨</span>개발자 과제와의 차이</div>
|
||
<div class="dz-box">
|
||
<p><b>개발자의 "커밋"이 디자이너에겐 "시안 버전"이에요.</b> 하루의 끝에 중간보고를 보내는 것은 동일하고, 커밋 개수 대신 시안 버전 수를 적어요.</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>어제 정의한 핵심 문제 1개를 골라, 디자인 툴에 <b>현재 화면을 그대로 복제</b>한 프레임을 먼저 만들어요 (비교 기준).</li>
|
||
<li>같은 화면의 개선안을 <b>서로 다른 방향으로 2개</b> 그려요. 하나는 "최소 수정", 하나는 "과감한 수정".</li>
|
||
<li>각 시안 옆에 "무엇을 왜 바꿨는지"를 3줄 이내로 메모해요.</li>
|
||
<li>기본 상태만 그리지 말고, <b>비어 있음·로딩·오류 상태</b> 중 최소 1개를 함께 그려요.</li>
|
||
<li>15:50에 손을 멈추고 중간보고 틀(위 개발자용과 동일)로 보고를 작성해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 시안 1차 링크(현재 화면 + 개선안 2방향 + 메모) + 중간보고 메시지</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== WED ===================== -->
|
||
<div class="day-div" id="d3">
|
||
<div class="day-badge"><div><div class="w">WED</div><div class="n">수</div></div></div>
|
||
<div>
|
||
<h2>구현 2일차 + PR — 내 작업을 남에게 건넨다</h2>
|
||
<p class="dm">오전 강의에서 좋은 PR의 조건을 배웠어요. 오후엔 구현을 마무리하고 그 조건대로 PR을 올려요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>구현 마무리 + 첫 PR 올리기</h3></div>
|
||
<span class="diff d3">난이도 ★★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">"동작하는 코드"를 "리뷰받을 수 있는 PR"로 포장하는 법을 배워요 — PR은 코드가 아니라 커뮤니케이션이에요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li><b>오전(10:40–12:00)에 구현을 끝내는 걸 목표로</b> 어제 중간보고의 "내일 할 것"부터 이어가요. 새 기능 욕심은 금지 — 계획서의 완료 기준만 채워요.</li>
|
||
<li><b>완료 기준 체크리스트를 하나씩 검증해요.</b> 화면에서 직접 눌러 보고, 기존 기능이 깨지지 않았는지 주변 기능 3개를 함께 확인해요.</li>
|
||
<li><b>스크린샷/짧은 녹화를 준비해요.</b> 변경 전(월요일 캡처)과 변경 후를 나란히 놓을 수 있게요.</li>
|
||
<li><b>커밋을 정리해요.</b> "wip", "수정" 같은 커밋 메시지가 있으면 의미가 보이게 고민해 보고, 마지막 커밋까지 푸시해요.</li>
|
||
<li><b>아래 틀로 PR을 작성해요.</b> 제목은 50자 이내, "무엇을"이 바로 보이게. 본문은 틀의 모든 항목을 채워요.</li>
|
||
<li><b>스스로 셀프 리뷰를 해요.</b> PR의 Files changed 탭을 처음부터 끝까지 읽고, 스스로 발견한 어색한 부분에 먼저 코멘트를 달아요 (최소 1개).</li>
|
||
<li><b>리뷰어로 멘토를 지정</b>하고, 메신저로 "PR 올렸습니다 + 링크"를 알려요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 올라간 PR 링크</p>
|
||
<ul>
|
||
<li>PR 본문의 4개 섹션(무엇/왜/스크린샷/확인 방법)이 모두 채워져 있을 것</li>
|
||
<li>변경 전·후 스크린샷이 붙어 있을 것</li>
|
||
<li>셀프 리뷰 코멘트가 1개 이상 달려 있을 것</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>워크시트</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>
|
||
- 고민했지만 선택하지 않은 방법(있다면): <span class="hl">__________</span>
|
||
|
||
## 스크린샷
|
||
| 변경 전 | 변경 후 |
|
||
|---|---|
|
||
| (이미지) | (이미지) |
|
||
|
||
## 확인 방법 (리뷰어가 따라 할 수 있게)
|
||
1. <span class="hl">______ 화면으로 이동</span>
|
||
2. <span class="hl">______ 버튼 클릭</span>
|
||
3. <span class="hl">______ 가 보이면 정상</span>
|
||
|
||
## 스스로 확인한 것
|
||
- [ ] 완료 기준 체크리스트 전부 통과
|
||
- [ ] 주변 기능 3개 정상 동작: <span class="hl">__ , __ , __</span>
|
||
- [ ] 콘솔 에러 없음</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>"내 코드 설명 문서" 1장</h3></div>
|
||
<span class="diff d1">난이도 ★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">내가 바꾼 코드를 말로 설명할 수 있어야 진짜 이해한 거예요 — 내일 리뷰 코멘트에 답할 준비도 돼요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>내 PR의 변경 파일 중 <b>가장 핵심인 파일 1개</b>를 골라요.</li>
|
||
<li>"이 코드를 처음 보는 옆자리 동료"를 독자로 상상하고, 변경한 부분이 <b>줄 단위로 무슨 일을 하는지</b> 설명하는 글을 써요.</li>
|
||
<li>설명하다가 "왜 이렇게 썼지?" 싶은 줄이 나오면 솔직하게 "이 부분은 검색해서 가져왔는데 정확히는 모름"이라고 적어요 — 그게 내일 공부할 목록이에요.</li>
|
||
<li>마지막에 "이 코드가 고장 난다면 어디부터 볼까?" 1문단을 덧붙여요.</li>
|
||
<li>A4 1장 분량이 되면 멈추고 저장해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✚</span>제출</div>
|
||
<div class="extra-box">
|
||
<p><b>제출:</b> 설명 문서 1장(<code>explain.md</code>). PR 링크와 함께 내요. "정확히는 모름" 표시가 있는 문서가 없는 문서보다 <b>좋은 평가</b>를 받아요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>시안 2차 + 개발자 피드백 받기</h3></div>
|
||
<span class="diff d3">난이도 ★★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic dz">🎨</span>개발자 과제와의 차이</div>
|
||
<div class="dz-box">
|
||
<p><b>개발자의 "PR 올리기"가 디자이너에겐 "시안을 개발자에게 보여주기"예요.</b> 리뷰받을 수 있는 형태로 포장한다는 점은 완전히 같아요.</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>어제 2개 방향 중 <b>멘토와 함께 고른 방향 1개</b>를 다듬어 2차 시안을 만들어요.</li>
|
||
<li>기본·비어 있음·로딩·오류 <b>4개 상태를 전부</b> 그려요.</li>
|
||
<li>버튼·입력창의 <b>눌림/비활성 상태</b>도 각각 그려요.</li>
|
||
<li>개발 수습 동료 1명에게 시안을 보여주고 <b>"이대로 만들 수 있어? 애매한 부분은 어디야?"</b>를 물어 답을 그대로 받아 적어요 (최소 3개).</li>
|
||
<li>받은 피드백 중 반영할 것/안 할 것을 나누고 이유를 1줄씩 적어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 시안 2차 링크(4개 상태 포함) + 개발자 피드백 3개와 반영 여부 메모</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== THU ===================== -->
|
||
<div class="day-div" id="d4">
|
||
<div class="day-badge"><div><div class="w">THU</div><div class="n">목</div></div></div>
|
||
<div>
|
||
<h2>리뷰 반영 — 코멘트는 공격이 아니라 선물</h2>
|
||
<p class="dm">오전 강의에서 리뷰 코멘트를 읽는 법을 배웠어요. 오후엔 실제 코멘트를 하나씩 반영하고 머지까지 가요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>리뷰 코멘트 반영 → 머지 → 배포 확인</h3></div>
|
||
<span class="diff d3">난이도 ★★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">리뷰 코멘트를 감정이 아니라 정보로 받아들이고, "무엇을 왜 고쳤는지" 설명하며 반영하는 태도를 익혀요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li><b>코멘트를 전부 먼저 읽어요.</b> 하나씩 고치기 전에 끝까지 읽고, 아래 반영 기록표에 코멘트를 번호 붙여 옮겨 적어요.</li>
|
||
<li><b>이해 안 되는 코멘트엔 바로 되물어요.</b> "이 코멘트는 ~라는 뜻이 맞을까요?"라고 PR에서 질문하는 것도 훌륭한 반영이에요.</li>
|
||
<li><b>하나 고칠 때마다 커밋 하나.</b> 코멘트 여러 개를 한 커밋에 뭉치지 않아요. 커밋 메시지에 어떤 코멘트에 대한 수정인지 남겨요.</li>
|
||
<li><b>반영 기록표를 채워요.</b> 코멘트마다 "무엇을 / 왜 그렇게" 고쳤는지 1~2줄. 반영하지 않기로 한 코멘트가 있다면 이유를 적고 리뷰어와 합의해요.</li>
|
||
<li><b>고친 뒤 PR에 답글을 달아요.</b> 각 코멘트에 "반영했습니다 + 커밋 링크" 또는 자기 생각을 답해요. 말없이 고치기만 하면 리뷰어가 다시 다 찾아봐야 해요.</li>
|
||
<li><b>승인(Approve)을 받으면 머지해요.</b> 머지 방식(멘토가 안내한 방식)을 확인하고 실행해요.</li>
|
||
<li><b>배포를 확인해요.</b> 머지 후 개발 서버 화면에서 내 변경이 실제로 보이는지 직접 눌러 확인하고, 확인 스크린샷을 남겨요. "머지 = 끝"이 아니라 "화면에서 보임 = 끝"이에요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> ① 머지된 PR 링크 ② 반영 기록표 ③ 배포 확인 스크린샷</p>
|
||
<ul>
|
||
<li>모든 코멘트에 답글이 달려 있을 것 (반영/미반영 모두)</li>
|
||
<li>반영 기록표의 "왜" 칸이 비어 있지 않을 것</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>워크시트</div>
|
||
<div class="tpl">
|
||
<div class="cap">리뷰 반영 기록표</div>
|
||
<pre># 리뷰 반영 기록 — <span class="hl">과제명</span>
|
||
|
||
| # | 코멘트 요약 | 무엇을 고쳤나 | 왜 그렇게 고쳤나 | 커밋 |
|
||
|---|---|---|---|---|
|
||
| 1 | <span class="hl">______________</span> | <span class="hl">______________</span> | <span class="hl">______________</span> | <span class="hl">____</span> |
|
||
| 2 | <span class="hl">______________</span> | <span class="hl">______________</span> | <span class="hl">______________</span> | <span class="hl">____</span> |
|
||
| 3 | <span class="hl">______________</span> | <span class="hl">______________</span> | <span class="hl">______________</span> | <span class="hl">____</span> |
|
||
|
||
## 반영하지 않은 코멘트 (있다면)
|
||
- 코멘트: <span class="hl">__________</span> / 이유: <span class="hl">__________</span> / 리뷰어 합의: <span class="hl">예·아니오</span>
|
||
|
||
## 배포 확인
|
||
- 머지 시각: <span class="hl">__:__</span> / 화면 확인 시각: <span class="hl">__:__</span>
|
||
- 확인한 화면·동작: <span class="hl">________________________</span> (스크린샷 첨부)
|
||
|
||
## 오늘 리뷰에서 배운 것 1가지
|
||
- <span class="hl">________________________________________</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>동료 PR 읽기 — 배운 점 3개</h3></div>
|
||
<span class="diff d1">난이도 ★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">남의 PR을 읽는 것은 공짜 과외예요 — 같은 주에 같은 코드베이스에서 일어난 일이라 흡수가 빨라요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>다른 수습 동료의 PR 1개를 골라요 (머지됐거나 리뷰 중인 것).</li>
|
||
<li>본문을 먼저 읽고, "이 PR이 뭘 하는지" 내 말로 1문장 요약해요.</li>
|
||
<li>변경 파일을 처음부터 끝까지 읽어요. 이해 안 되는 줄은 건너뛰되 개수를 세요.</li>
|
||
<li>리뷰 코멘트와 답글의 대화를 읽고, <b>배운 점 3개</b>를 메모해요 (코드 기법 / PR 쓰는 법 / 대화하는 법 무엇이든).</li>
|
||
<li>가능하다면 그 PR에 칭찬 코멘트 하나를 남겨요. "이 부분 설명이 이해하기 쉬웠어요" 같은 것도 좋아요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✚</span>제출</div>
|
||
<div class="extra-box">
|
||
<p><b>제출:</b> 메모 1장(PR 링크 + 1문장 요약 + 배운 점 3개 + 이해 못 한 줄 개수). 반영 기록표 뒤에 붙여 함께 내요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>핸드오프 문서 — 시안을 만들 수 있는 명세로</h3></div>
|
||
<span class="diff d3">난이도 ★★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic dz">🎨</span>개발자 과제와의 차이</div>
|
||
<div class="dz-box">
|
||
<p><b>개발자의 "머지"가 디자이너에겐 "핸드오프"예요.</b> 어제 받은 개발자 피드백(애매하다던 부분)이 오늘 명세로 답해야 할 목록이에요.</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>최종 시안 프레임을 정리하고, 사용한 색·글자 크기를 <b>이름 붙은 스타일</b>로 정돈해요.</li>
|
||
<li>화면 요소 사이의 <b>간격을 숫자로</b> 표기해요 (여백·요소 간 거리, 최소 8곳 이상).</li>
|
||
<li>버튼·입력창의 <b>상태별 명세</b>를 표로 써요: 기본 / 눌림 / 비활성 / 오류 — 각각 색·문구가 어떻게 달라지는지.</li>
|
||
<li><b>인터랙션 명세</b>를 문장으로 써요: "이 버튼을 누르면 → 무엇이 → 어떻게 되는가"를 최소 3개.</li>
|
||
<li>어제 개발자가 "애매하다"고 한 부분마다 명세에 답이 있는지 체크해요.</li>
|
||
<li>같은 개발자에게 문서를 보여주고 "이제 만들 수 있겠어?"라는 답을 받아요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 핸드오프 문서 링크(간격 표기 + 상태 명세표 + 인터랙션 3개 + 개발자 확인 코멘트)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== FRI ===================== -->
|
||
<div class="day-div" id="d5">
|
||
<div class="day-badge"><div><div class="w">FRI</div><div class="n">금</div></div></div>
|
||
<div>
|
||
<h2>첫 실무 회고 — 계획과 실제의 간격을 잰다</h2>
|
||
<p class="dm">오전엔 한 주 마무리 강의와 1:1 면담이 있어요. 오후엔 이번 주 전체를 숫자와 문장으로 되돌아봐요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>"계획 대비 실제" 회고 1장</h3></div>
|
||
<span class="diff d2">난이도 ★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">예측과 실제의 차이를 직접 재 보면, 다음 과제의 예상 소요가 훨씬 정확해져요 — 이게 경력의 핵심 근육이에요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>월요일의 착수 계획서와 화·수 중간보고를 나란히 펴 놓아요.</li>
|
||
<li>아래 비교표의 <b>"예상" 칸을 계획서에서 그대로 옮겨 적어요</b> (지금 기억으로 다시 쓰지 않기 — 그대로 옮기는 게 핵심).</li>
|
||
<li>"실제" 칸을 채워요. 커밋 시각·중간보고·PR 타임라인을 근거로 최대한 정확하게.</li>
|
||
<li>예상 못 한 문제를 <b>전부</b> 나열하고, 각각 "미리 알 수 있었나? (예/아니오)"를 표시해요.</li>
|
||
<li>"다음에 다르게 할 것 3가지"를 써요. "열심히 한다" 같은 다짐 금지 — <b>행동으로 검증 가능한 문장</b>만: 예) "계획서에 파일 후보를 적기 전에 실제로 파일을 열어 확인한다".</li>
|
||
<li>이번 주 가장 뿌듯했던 순간 1개, 가장 힘들었던 순간 1개를 솔직하게 적어요.</li>
|
||
<li>오후 1:1 면담(멘토가 시간을 잡아요)에서 회고를 함께 읽으며 이야기해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 회고 1장 (아래 양식, <code>retro-w3.md</code>)</p>
|
||
<ul>
|
||
<li>"예상" 칸이 계획서 원문 그대로일 것</li>
|
||
<li>"다음에 다르게 할 것"이 검증 가능한 행동 문장 3개일 것</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>워크시트</div>
|
||
<div class="tpl">
|
||
<div class="cap">첫 실무 회고 양식</div>
|
||
<pre># 3주차 회고 — 첫 소과제
|
||
|
||
## 1. 계획 대비 실제
|
||
| 항목 | 예상 (월요일 계획서 원문) | 실제 | 차이·이유 |
|
||
|---|---|---|---|
|
||
| 구현 완료 시점 | <span class="hl">________</span> | <span class="hl">________</span> | <span class="hl">________</span> |
|
||
| 고친 파일 | <span class="hl">________</span> | <span class="hl">________</span> | <span class="hl">________</span> |
|
||
| PR 올린 시점 | <span class="hl">________</span> | <span class="hl">________</span> | <span class="hl">________</span> |
|
||
| 리뷰 코멘트 개수 | <span class="hl">____개 예상</span> | <span class="hl">____개</span> | <span class="hl">________</span> |
|
||
|
||
## 2. 예상 못 한 문제 (전부)
|
||
| 문제 | 얼마나 잡아먹었나 | 미리 알 수 있었나 |
|
||
|---|---|---|
|
||
| <span class="hl">____________</span> | <span class="hl">약 __시간</span> | <span class="hl">예 / 아니오</span> |
|
||
| <span class="hl">____________</span> | <span class="hl">약 __시간</span> | <span class="hl">예 / 아니오</span> |
|
||
|
||
## 3. 다음에 다르게 할 것 3가지 (검증 가능한 행동으로)
|
||
1. <span class="hl">________________________________________</span>
|
||
2. <span class="hl">________________________________________</span>
|
||
3. <span class="hl">________________________________________</span>
|
||
|
||
## 4. 이번 주의 순간들
|
||
- 가장 뿌듯했던 순간: <span class="hl">________________________</span>
|
||
- 가장 힘들었던 순간: <span class="hl">________________________</span>
|
||
|
||
## 5. 멘토에게 묻고 싶은 것 1가지
|
||
- <span class="hl">________________________________________</span></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>「프로그램의 변화」 그림 한 장 정리</h3></div>
|
||
<span class="diff d1">난이도 ★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic goal">🎯</span>목표</div>
|
||
<p class="goal-line">이번 주 아침 기본기 코너에서 배운 "프로그램의 변화(상태가 어떻게 바뀌어 가는가)"를 그림 한 장으로 남기면 오래 기억돼요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>이번 주 아침 강의 노트를 훑고, "프로그램의 변화"에서 배운 개념을 키워드로 다 뽑아요 (변수의 값 변화, 상태 전이, 이벤트→상태→화면 등).</li>
|
||
<li>종이든 디지털이든 <b>한 장</b>에, 내 소과제 기능을 예로 들어 "사용자 행동 → 상태 변화 → 화면 변화"의 흐름을 그림으로 그려요.</li>
|
||
<li>화살표마다 "무엇이 바뀌는지"를 라벨로 붙여요.</li>
|
||
<li>그림 아래에 "이번 주 가장 새로웠던 개념 1개"를 2~3문장으로 설명해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✚</span>제출</div>
|
||
<div class="extra-box">
|
||
<p><b>제출:</b> 그림 1장(사진 또는 파일). 회고와 함께 내요. 잘 그린 그림은 다음 기수 교육 자료로 쓸 수도 있어요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>디자인 회고 — 시안의 계획 대비 실제</h3></div>
|
||
<span class="diff d2">난이도 ★★</span>
|
||
</div>
|
||
<div class="t-body">
|
||
<div class="block">
|
||
<div class="bt"><span class="ic dz">🎨</span>개발자 과제와의 차이</div>
|
||
<div class="dz-box">
|
||
<p><b>회고 양식은 개발자용을 그대로 쓰되</b>, 1번 표의 항목을 "시안 1차 완료 / 개발자 피드백 개수 / 핸드오프 완료 시점"으로 바꿔 채워요. 특히 "개발자가 애매하다고 한 것들을 처음부터 명세에 넣었다면?"을 2번 표에서 꼭 다뤄요.</p>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>월요일 디자인 착수 계획서와 화·수 시안 버전들을 나란히 펴요.</li>
|
||
<li>회고 양식 1번 표를 디자인 버전 항목으로 바꿔 채워요.</li>
|
||
<li>개발자 피드백에서 나온 "애매한 부분"들을 2번 표(예상 못 한 문제)에 넣고, 미리 알 수 있었는지 표시해요.</li>
|
||
<li>다음 시안 때 다르게 할 것 3가지를 행동 문장으로 써요. 예) "시안을 넘기기 전에 4개 상태를 그렸는지 셀프 체크한다".</li>
|
||
<li>1:1 면담에서 회고를 함께 읽어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30까지 제출:</b> 디자인 회고 1장 (비교표 + 다르게 할 것 3가지)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== MENTOR GUIDE ===================== -->
|
||
<section id="mentor">
|
||
<div class="eyebrow">For Mentors</div>
|
||
<h2>멘토 리뷰 가이드 (16:30–17:00)</h2>
|
||
<p class="sub">매일 리뷰에서 확인할 것과 던질 질문이에요. 산출물의 완성도보다 "스스로 설명할 수 있는가"를 봐 주세요.</p>
|
||
<div class="card mt">
|
||
<div class="time">
|
||
<div class="row"><div class="t">월 · 계획서</div><div class="v"><b>확인:</b> 불확실한 점이 솔직하게 적혔는가, 일정 3덩어리가 현실적인가. <b>질문:</b> "이 과제에서 제일 자신 없는 부분이 어디예요? 그게 계획서에 적혀 있나요?"</div></div>
|
||
<div class="row"><div class="t">화 · 구현 1일차</div><div class="v"><b>확인:</b> 커밋이 의미 단위로 쪼개졌는가, 중간보고에 사실·판단·다음 행동이 구분됐는가. <b>질문:</b> "오늘 계획과 달랐던 점을 언제 알아챘어요? 더 일찍 알 수 있었을까요?"</div></div>
|
||
<div class="row"><div class="t">수 · PR</div><div class="v"><b>확인:</b> PR 본문만 읽고 리뷰가 가능한가, 셀프 리뷰 코멘트가 있는가. <b>질문:</b> "이 PR에서 리뷰어가 제일 걱정할 부분이 어디라고 생각해요?"</div></div>
|
||
<div class="row"><div class="t">목 · 리뷰 반영</div><div class="v"><b>확인:</b> 모든 코멘트에 답글이 달렸는가, 반영 기록의 "왜"가 채워졌는가, 배포 확인까지 했는가. <b>질문:</b> "가장 아팠던 코멘트는 뭐였고, 지금은 어떻게 생각해요?"</div></div>
|
||
<div class="row"><div class="t">금 · 회고</div><div class="v"><b>확인:</b> "예상" 칸이 계획서 원문 그대로인가, 다르게 할 3가지가 행동 문장인가. <b>질문:</b> "다음 소과제의 예상 소요를 지금 다시 잡는다면 뭘 근거로 잡을 거예요?" — 1:1에서 다음 주 방향까지 합의.</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div>AWESOMEDEV · 3주차 일일 과제집 (학생 배포용) · 4부작 중 3</div>
|
||
<div>2026 · 3주차 상세 강의안과 함께 사용</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|