awesomedev/mirim-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mirim-app/frontend/public/docs/week1-detailed.html
AWESOMEDEV 5c9959ce08
All checks were successful
CI / backend-test (push) Successful in 3m25s
Details
CI / frontend-build (push) Successful in 48s
Details
CI / backend-dep-scan (push) Successful in 31s
Details
feat(design): 디자인 시스템 — Pretendard 실적용·토큰·Lucide 아이콘 132개·/design 
이모지 아이콘을 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행)
2026-07-22 21:10:28 +09:00

757 lines
46 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>1주차 상세 강의안 · 온보딩 & 예절</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; } }
/* How-to-use */
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; }
.legend { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.lg { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--ink-soft); }
.lg .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; }
.lg .ic.script { background: var(--primary-soft); } .lg .ic.act { background: var(--teal-soft); }
.lg .ic.check { background: var(--amber-soft); } .lg .ic.pit { background: var(--rose-soft); }
.lg b { color: var(--ink); }
/* Day divider */
.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 card */
.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 { }
.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; }
.prep b { color: var(--ink); }
.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); }
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> · 수습 상세 강의안 · 1 / 8</div>
<h1>1주차 상세 강의안<br>온보딩 &amp; 기본 예절</h1>
<p class="lede">멘토가 강의실에서 그대로 진행하는 <strong>분 단위 퍼실리테이터 가이드</strong>예요. 각 세션마다 학습목표 · 진행표 · <strong>멘토 스크립트</strong> · 실습 · 이해 확인 · 흔한 실수까지 담았습니다. "하나하나 알려줘야 하는" 학생 기준으로 썼어요.</p>
<div class="mast-meta">
<span class="chip"><span class="dot"></span>Week 1 · 월–금</span>
<span class="chip"><span class="dot"></span>대상: 개발 3 · 디자인 1</span>
<span class="chip"><span class="dot"></span>진행: 멘토</span>
</div>
</header>
<nav class="toc">
<div class="t">1주차 세션 목차</div>
<ol>
<li><a href="#how"><b>안내</b>이 강의안 사용법</a></li>
<li><a href="#d1"><b>월</b>오리엔테이션 (4세션)</a></li>
<li><a href="#d2"><b>화</b>예절① 태도와 보고 (3세션)</a></li>
<li><a href="#d3"><b>수</b>예절② 소통 도구 (3세션)</a></li>
<li><a href="#d4"><b>목</b>업무 이해 · 환경 · 기본기 (3세션)</a></li>
<li><a href="#d5"><b>금</b>협업 규칙 · 회고 (4세션)</a></li>
</ol>
</nav>
<!-- How to use -->
<section id="how">
<div class="eyebrow">이 강의안 사용법</div>
<h2>모든 세션은 같은 틀로</h2>
<p class="sub">아래 6개 블록이 세션마다 반복돼요. 이 틀은 2~8주차 강의안에도 똑같이 적용됩니다.</p>
<div class="card mt legend">
<div class="lg"><div class="ic script">🎯</div><div><b>학습목표</b> — 세션이 끝나면 할 수 있는 것</div></div>
<div class="lg"><div class="ic act">🕘</div><div><b>진행표</b> — 분 단위 흐름(도입·전개·마무리)</div></div>
<div class="lg"><div class="ic script">💬</div><div><b>멘토 스크립트</b> — 실제로 이렇게 말해요</div></div>
<div class="lg"><div class="ic act">✍️</div><div><b>실습·워크시트</b> — 학생이 직접 해보는 활동</div></div>
<div class="lg"><div class="ic check">✅</div><div><b>이해 확인</b> — 넘어가기 전 점검 질문</div></div>
<div class="lg"><div class="ic pit">⚠️</div><div><b>흔한 실수 &amp; 대처</b> — 미리 알고 대응</div></div>
</div>
<div class="card mt" style="font-size:14px;color:var(--ink-soft);">
<b style="color:var(--ink);">진행 팁</b> — 강의는 짧게(한 번에 15분 이내), 나머지는 실습·대화로. 학생이 말을 많이 하게 하세요. 모르면 물어보는 분위기를 첫날부터 만드는 게 이 주의 최대 목표입니다.
</div>
</section>
<!-- ============ DAY 1 ============ -->
<div class="day-div" id="d1">
<div class="day-badge"><span class="w">MON</span><span class="n">월</span></div>
<div><h2>Day 1 · 오리엔테이션</h2><div class="dm">목표: 낯섦 제거. 회사·사람·공간·규칙에 익숙해진다. 오늘은 개발/디자인 실무 없음.</div></div>
</div>
<!-- D1 S1 -->
<div class="session">
<div class="s-head"><div class="tag">Day1 · 세션 1 · 오전</div><h3>환영과 회사·팀 소개</h3><div class="dur">약 60분 · 대표 환영사 포함</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>어썸데브가 어떤 회사이고 무슨 일을 하는지 한 문장으로 말할 수 있다.</li>
<li>같이 일할 팀원과 내 멘토가 누구인지 안다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic run">🕘</span>진행표</div>
<div class="run">
<div class="r"><div class="tm">0–10분</div><div class="ac"><b>대표 환영사</b> — 장익준 대표. 수습 가이드의 "대표 인사" 톤으로. 실수해도 된다는 메시지.</div></div>
<div class="r"><div class="tm">10–25분</div><div class="ac"><b>회사 소개</b> — 2023년 설립, KT엠모바일·KT알파·핀업과 함께하는 개발/유지보수. "우리가 만든 게 수많은 사람에게 쓰인다".</div></div>
<div class="r"><div class="tm">25–45분</div><div class="ac"><b>팀·멘토 소개</b> — 각 팀원 자기소개(1분씩), 멘토 1:1 배정 발표, 학생 자기소개.</div></div>
<div class="r"><div class="tm">45–60분</div><div class="ac"><b>오늘 일정 안내</b> + 화장실·탕비실·비상구 등 공간 안내.</div></div>
</div>
</div>
<div class="block"><div class="bt"><span class="ic script">💬</span>멘토 스크립트 (자기소개 유도)</div>
<div class="script"><div class="who">멘토</div>
<p>"긴장하지 않아도 돼요. 오늘은 배우는 날이 아니라 <em>익숙해지는</em> 날이에요. 돌아가면서 이름이랑, 요즘 관심 있는 것 하나만 편하게 얘기해 줄래요?"</p>
<p><em>→ 학생이 말문을 열도록, 업무 질문(할 줄 아는 언어 등)은 첫날엔 하지 않는다. 부담 주지 않기.</em></p>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — 첫날부터 기술 수준을 확인하려 든다. → 학생이 위축됨.</div>
<div class="row"><b>대처</b> — 오늘은 사람·환경에만 집중. 실력 파악은 2주차부터 자연스럽게.</div>
</div>
</div>
</div>
</div>
<!-- D1 S2 -->
<div class="session">
<div class="s-head"><div class="tag">Day1 · 세션 2 · 오전</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 run">🕘</span>진행표</div>
<div class="run">
<div class="r"><div class="tm">0–15분</div><div class="ac"><b>근무 기본</b> — 근무시간, 출퇴근, 휴게, 연차·병가 절차, 급여일. (연소근로자는 근로시간 규정 별도 안내)</div></div>
<div class="r"><div class="tm">15–30분</div><div class="ac"><b>보안 수칙</b> — 코드·고객정보 반출 금지, 비밀번호·토큰 취급, 개인 계정/PC 사용 규칙.</div></div>
<div class="r"><div class="tm">30–40분</div><div class="ac"><b>서약</b> — 보안 서약서·개인정보 동의 등 서류 작성(회사 양식).</div></div>
</div>
</div>
<div class="block"><div class="bt"><span class="ic check">✅</span>이해 확인</div>
<div class="check-box">
<p>학생에게 물어보고 답하게 한다:</p>
<ul>
<li>"회사 코드를 개인 노트북에 복사해도 될까요?" (→ 안 된다)</li>
<li>"지각할 것 같으면 어떻게 해야 하죠?" (→ 늦기 전에 멘토에게 미리 연락)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- D1 S3 -->
<div class="session">
<div class="s-head"><div class="tag">Day1 · 세션 3 · 오후</div><h3>장비 · 계정 세팅 &amp; 시설 안내</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 act">✍️</span>실습 — 세팅 체크리스트</div>
<div class="act-box">
<p><b>멘토와 하나씩 확인하며 로그인:</b></p>
<ul>
<li>사내 메신저 / 이메일 계정</li>
<li>Git(Gitea) 계정 · 프로필 사진 · 이름 설정</li>
<li>사내 위키 / 일정(캘린더) / 태스크 보드 접근</li>
<li>노트북 기본 세팅(브라우저·에디터 설치는 목요일 개발환경 세션에서)</li>
</ul>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — 계정 세팅을 학생 혼자 하게 두고 자리를 뜬다.</div>
<div class="row"><b>대처</b> — 첫날은 옆에서 함께. 막히는 지점을 메모해 두면 온보딩 문서 개선에 쓸 수 있다.</div>
</div>
</div>
</div>
</div>
<!-- D1 S4 -->
<div class="session">
<div class="s-head"><div class="tag">Day1 · 세션 4 · 오후</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>앞으로 8주가 어떻게 흘러가는지 큰 그림을 안다.</li>
<li>"30분 룰", "모르면 물어보기" 같은 핵심 약속을 이해한다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>진행</div>
<div class="act-box">
<p><b>수습 가이드(배포본)를 함께 넘기며</b> 핵심만 짚는다:</p>
<ul>
<li>8주 로드맵 (예절·기본기 먼저, 실무는 뒤)</li>
<li>하루 리듬 · 30분 룰 · 좋은 질문 vs 나쁜 질문</li>
<li>평가는 "성장 속도·태도" 중심이고 놀랄 일 없다는 점</li>
</ul>
</div>
</div>
<div class="block"><div class="bt"><span class="ic check">✅</span>오늘의 마무리</div>
<div class="check-box">
<p><b>하루 정리 3줄 회고 시작</b> — 오늘 배운 것 / 어색했던 것 / 궁금한 것. 첫날부터 습관화.</p>
</div>
</div>
</div>
</div>
<!-- ============ DAY 2 ============ -->
<div class="day-div" id="d2">
<div class="day-badge"><span class="w">TUE</span><span class="n">화</span></div>
<div><h2>Day 2 · 예절① 태도와 보고</h2><div class="dm">목표: 사회인의 기본 태도와 "혼자 판단하지 않고 보고하는" 습관(호렌소)을 몸에 익힌다.</div></div>
</div>
<!-- D2 S1 -->
<div class="session">
<div class="s-head"><div class="tag">Day2 · 세션 1 · 오전</div><h3>왜 예절인가 + 하루의 기본</h3><div class="dur">약 50분 · 수습 가이드 A1</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>회사에서 신뢰가 어떻게 쌓이는지 이해한다.</li>
<li>출퇴근·인사·호칭·복장의 기본을 실제로 해본다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic run">🕘</span>진행표</div>
<div class="run">
<div class="r"><div class="tm">0–10분</div><div class="ac"><b>도입 질문</b> — "믿음직한 신입은 어떤 사람일까?" 학생 생각 듣기.</div></div>
<div class="r"><div class="tm">10–25분</div><div class="ac"><b>강의</b> — 신뢰는 큰 성과가 아니라 매일의 작은 기본에서. A1 항목(시간·인사·호칭·복장·정리) 하나씩.</div></div>
<div class="r"><div class="tm">25–45분</div><div class="ac"><b>실습</b> — 인사·호칭 연습(아래 활동).</div></div>
<div class="r"><div class="tm">45–50분</div><div class="ac">정리 · 질문받기.</div></div>
</div>
</div>
<div class="block"><div class="bt"><span class="ic script">💬</span>멘토 설명 포인트</div>
<div class="script"><div class="who">이렇게 설명</div>
<p>"출근 시간이 9시라면, 9시에 <em>도착</em>이 아니라 9시에 <em>일 시작</em>이에요. 그래서 10분 전에 와서 자리를 준비하는 거예요. 이건 눈치가 아니라 약속이에요."</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>출근 인사: "안녕하세요!" (밝게)</li>
<li>팀원 호칭 부르기: "○○님, 안녕하세요."</li>
<li>퇴근 인사: "먼저 들어가 보겠습니다. 수고하셨습니다."</li>
</ol>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — 인사를 작게 하거나 눈을 안 본다. </div>
<div class="row"><b>대처</b> — "인사는 소리와 눈맞춤이 8할"이라고 알려주고 한 번 더 시켜본다. 잘하면 바로 칭찬.</div>
</div>
</div>
</div>
</div>
<!-- D2 S2 -->
<div class="session">
<div class="s-head"><div class="tag">Day2 · 세션 2 · 오전</div><h3>보고 · 연락 · 상담 (호렌소)</h3><div class="dur">약 50분 · 수습 가이드 A2 · 이 주의 핵심</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>보고·연락·상담의 차이를 안다.</li>
<li>"문제가 생기면 숨기지 않고 즉시 알린다"를 이해한다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic run">🕘</span>진행표</div>
<div class="run">
<div class="r"><div class="tm">0–5분</div><div class="ac"><b>도입</b> — "일을 다 했는데 아무한테도 말 안 하면?" → 안 한 것과 같다.</div></div>
<div class="r"><div class="tm">5–20분</div><div class="ac"><b>강의</b> — 보고(결과)·연락(진행·문제)·상담(판단이 안 설 때). 특히 "나쁜 소식일수록 빨리".</div></div>
<div class="r"><div class="tm">20–45분</div><div class="ac"><b>실습</b> — 중간보고 롤플레이(다음 세션과 연결).</div></div>
<div class="r"><div class="tm">45–50분</div><div class="ac">정리.</div></div>
</div>
</div>
<div class="block"><div class="bt"><span class="ic script">💬</span>멘토 스크립트 (핵심 메시지)</div>
<div class="script"><div class="who">이렇게 설명</div>
<p>"여러분이 가장 많이 하는 실수는 '혼자 해결하려다 늦게 터뜨리는 것'이에요. 일이 잘돼도, 안 돼도 <em>중간에 공유</em>하면 돼요. 특히 문제는 빨리 말할수록 작아지고, 숨길수록 커져요."</p>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — 학생이 막혀도 "폐 끼칠까 봐" 말을 못 한다.</div>
<div class="row"><b>대처</b> — "물어보는 게 폐가 아니라, 안 물어보고 헤매는 게 폐"라고 못 박는다. 물어봤을 때 반드시 반갑게 반응.</div>
</div>
</div>
</div>
</div>
<!-- D2 S3 -->
<div class="session">
<div class="s-head"><div class="tag">Day2 · 세션 3 · 오후</div><h3>롤플레이 — 중간보고 해보기</h3><div class="dur">약 60분 · 실습 중심</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>정해진 틀(무엇을·어디까지·언제까지·도움요청)로 중간보고를 말할 수 있다.</li>
</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> "○○님, 잠깐 시간 괜찮으세요?
배정해주신 __________ 건 <span class="hl">중간 공유</span>드려요.
지금까지: __________ 까지 했고,
상황: __________ (되고 있음 / 막힌 부분은 __________),
예상: 오늘 __________ 까지 될 것 같습니다.
혹시 먼저 봐주실 부분 있을까요?"</pre>
</div>
<div class="act-box" style="margin-top:12px;">
<p><b>진행 방법</b></p>
<ol>
<li>멘토가 가상의 과제를 하나 준다("A 화면 버튼 색을 바꾸는 일" 등).</li>
<li>학생이 위 틀의 빈칸을 채워 <b>소리 내어</b> 보고한다.</li>
<li>한 명씩 돌아가며, 3번 반복해 익숙해지게.</li>
</ol>
</div>
</div>
<div class="block"><div class="bt"><span class="ic check">✅</span>이해 확인</div>
<div class="check-box">
<p>보고에 <b>4요소</b>가 들어갔는지 체크: <b>무엇을 · 어디까지 · 언제까지 · 도움요청</b>. 빠진 게 있으면 다시.</p>
</div>
</div>
</div>
</div>
<!-- ============ DAY 3 ============ -->
<div class="day-div" id="d3">
<div class="day-badge"><span class="w">WED</span><span class="n">수</span></div>
<div><h2>Day 3 · 예절② 소통 도구</h2><div class="dm">목표: 이메일·메신저·전화를 회사식으로 쓸 수 있다. 템플릿과 롤플레이로 몸에 익힌다.</div></div>
</div>
<!-- D3 S1 -->
<div class="session">
<div class="s-head"><div class="tag">Day3 · 세션 1 · 오전</div><h3>이메일 쓰는 법</h3><div class="dur">약 60분 · 수습 가이드 A3</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–15분</div><div class="ac"><b>강의</b> — 이메일은 공식 기록. 5부분 구조 설명(수습 가이드 A3 템플릿 활용).</div></div>
<div class="r"><div class="tm">15–45분</div><div class="ac"><b>실습</b> — 멘토에게 보내는 "첫 인사 메일" 작성.</div></div>
<div class="r"><div class="tm">45–60분</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> [수습] 입사 인사드립니다 — 홍길동
안녕하세요, ○○님.
9월 1일부터 수습으로 합류한 <span class="hl">홍길동</span>입니다.
앞으로 잘 부탁드립니다. 모르는 게 많지만
빨리 배우겠습니다. 편하게 알려주시면 감사하겠습니다.
감사합니다.
홍길동 드림</pre>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — 제목 없음 / "저기요" 말투 / 인사·소개 없이 용건만.</div>
<div class="row"><b>대처</b> — 나쁜 예를 하나 보여주고 학생이 직접 고쳐보게 하면 오래 남는다.</div>
</div>
</div>
</div>
</div>
<!-- D3 S2 -->
<div class="session">
<div class="s-head"><div class="tag">Day3 · 세션 2 · 오후</div><h3>메신저 예절</h3><div class="dur">약 40분 · 수습 가이드 A4</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 script">💬</span>핵심 규칙 (O / X)</div>
<div class="script"><div class="who">O 이렇게</div>
<p>용건을 한 번에 정리해 보낸다 · 질문엔 배경도 함께 · 읽으면 반응(이모지/"확인했습니다") · 급하지 않으면 업무시간 안에.</p>
</div>
<div class="script" style="border-left-color:var(--rose);background:color-mix(in srgb,var(--rose-soft) 55%,transparent);border-color:var(--rose-soft);margin-top:10px;"><div class="who" style="color:var(--rose);">X 이건 피하기</div>
<p>"안녕하세요"만 보내고 기다리게 하기 · 한 문장을 여러 번 끊어 알림 폭탄 · 5분 만에 "?" 재촉 · 밤·주말에 급하지 않은 연락.</p>
</div>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>실습</div>
<div class="act-box">
<p>학생이 실제 사내 메신저로 멘토에게 <b>"질문 메시지 하나"</b>를 배경까지 담아 보내본다. (예: 어제 세팅 중 막혔던 것)</p>
</div>
</div>
</div>
</div>
<!-- D3 S3 -->
<div class="session">
<div class="s-head"><div class="tag">Day3 · 세션 3 · 오후</div><h3>전화 응대 (스크립트 + 롤플레이)</h3><div class="dur">약 50분 · 수습 가이드 A5</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="tpl">
<div class="cap">멘토가 '외부 전화'가 되어 걸어준다 → 학생이 받는다</div>
<pre><span class="hl">[받기]</span> "네, 어썸데브 개발팀 홍길동입니다."
── 들으며 메모 3가지 ──
· 누가 (회사·이름)
· 무엇을 (용건)
· 언제까지 (기한)
<span class="hl">[모르는 내용이면]</span>
"확인 후 다시 연락드리겠습니다.
성함과 연락처 남겨주시겠어요?"
→ 담당자/멘토에게 즉시 전달</pre>
</div>
<div class="act-box" style="margin-top:12px;">
<p><b>진행:</b> 멘토가 시나리오 2개로 전화를 건다. ① 간단한 용건 ② 학생이 모르는 용건(→ 메모+연결 연습). 각 학생 2회씩.</p>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — 당황해서 아무 말도 못 하거나, 모르는데 아는 척 답한다.</div>
<div class="row"><b>대처</b> — "모르면 확인 후 연락"이 정답임을 강조. 첫 마디만 외워도 절반은 된다.</div>
</div>
</div>
<div class="block"><div class="bt"><span class="ic check">✅</span>오늘의 마무리</div>
<div class="check-box"><p>3줄 회고. "오늘 배운 소통 도구 중 가장 어색했던 것"을 적게 한다.</p></div>
</div>
</div>
</div>
<!-- ============ DAY 4 ============ -->
<div class="day-div" id="d4">
<div class="day-badge"><span class="w">THU</span><span class="n">목</span></div>
<div><h2>Day 4 · 업무 이해 · 환경 · 기본기 시작</h2><div class="dm">목표: 우리가 하는 일을 이해하고, 개발/디자인 환경을 세팅한다. 아침엔 기본기(컴퓨터 구조) 시작.</div></div>
</div>
<!-- D4 S0 morning -->
<div class="session">
<div class="s-head"><div class="tag">Day4 · 아침 · 09:30–10:30</div><h3>[기본기 B] 컴퓨터 구조 1일차 — 2진수</h3><div class="dur">60분 · CS 4주 커리큘럼 1일차</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list"><li>데이터가 0과 1로 저장되는 원리를 이해한다.</li></ul>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>진행</div>
<div class="act-box"><p><b>CS 4주 커리큘럼의 1일차</b>를 그대로 진행: 10진↔2진 변환, 글자가 숫자로(ASCII), 색이 숫자로(<code style="font-family:monospace;">#2159C5</code>=RGB). 상세 실습은 CS 커리큘럼 문서 참고.</p></div>
</div>
</div>
</div>
<!-- D4 S1 -->
<div class="session">
<div class="s-head"><div class="tag">Day4 · 세션 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>어썸데브가 KT엠모바일·KT알파·핀업에서 무엇을 하는지 이해한다.</li>
<li>우리가 쓰는 기술(React·Spring Boot·클라우드·앱)의 큰 그림을 안다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic script">💬</span>멘토 설명 포인트</div>
<div class="script"><div class="who">이렇게 설명</div>
<p>"우리는 큰 회사들의 서비스를 <em>함께 만들고, 잘 돌아가게 유지</em>해요. 통신(KT엠모바일·KT알파), 금융/커머스(핀업)처럼 <em>수많은 사람이 매일 쓰는</em> 시스템이라, 작은 실수도 크게 번질 수 있어요. 그래서 기본기와 책임감을 강조하는 거예요."</p>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>주의</div>
<div class="pit-box"><div class="row">고객사 실제 데이터·화면을 다룰 땐 보안 범위를 먼저 안내한다(무엇을 봐도 되고 무엇은 안 되는지).</div></div>
</div>
</div>
</div>
<!-- D4 S2 -->
<div class="session">
<div class="s-head"><div class="tag">Day4 · 세션 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>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>실습 — 개발자</div>
<div class="act-box">
<ul>
<li>에디터·Node·Git 등 <b>개발환경 설치</b>(회사 표준 셋업 문서 따라).</li>
<li>담당하게 될 프로젝트를 <b>로컬에서 한 번 실행</b>해 보기(멘토 동행).</li>
<li>화면을 사용자처럼 클릭하며 흐름 익히기.</li>
</ul>
</div>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>실습 — 디자이너</div>
<div class="act-box">
<ul>
<li>디자인 도구(Figma 등) 환경 세팅.</li>
<li>우리 서비스 화면을 캡처하며 <b>UI 첫인상 메모</b>(색·글자·간격).</li>
</ul>
</div>
</div>
<div class="block"><div class="bt"><span class="ic check">✅</span>이해 확인</div>
<div class="check-box"><p>개발자: 로컬 실행 성공 여부. 디자이너: 화면 5개 이상 캡처·메모. 안 되면 원인을 함께 기록.</p></div>
</div>
</div>
</div>
<!-- ============ DAY 5 ============ -->
<div class="day-div" id="d5">
<div class="day-badge"><span class="w">FRI</span><span class="n">금</span></div>
<div><h2>Day 5 · 협업 규칙 &amp; 첫 주 마무리</h2><div class="dm">목표: 우리가 함께 일하는 방식(Git·코드리뷰·스탠드업·30분 룰)을 익히고 첫 주를 돌아본다.</div></div>
</div>
<!-- D5 morning -->
<div class="session">
<div class="s-head"><div class="tag">Day5 · 아침 · 09:30–10:30</div><h3>[기본기 B] 컴퓨터 구조 2일차 — CPU·메모리·저장장치</h3><div class="dur">60분 · CS 4주 커리큘럼 2일차</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic act">✍️</span>진행</div>
<div class="act-box"><p>CS 커리큘럼 2일차 진행: 작업관리자로 CPU·메모리 관찰, "책상=RAM, 책장=디스크" 비유, 우리 클라우드 서버로 연결.</p></div>
</div>
</div>
</div>
<!-- D5 S1 -->
<div class="session">
<div class="s-head"><div class="tag">Day5 · 세션 1 · 오전</div><h3>Git 기초 &amp; 커밋 컨벤션</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>브랜치를 만들고, 커밋하고, PR을 올리는 흐름을 안다.</li>
<li>우리 커밋 메시지 규칙(<code style="font-family:monospace;">feat:</code>·<code style="font-family:monospace;">fix:</code> 등)을 안다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic run">🕘</span>진행표</div>
<div class="run">
<div class="r"><div class="tm">0–20분</div><div class="ac"><b>개념</b> — Git이 왜 필요한가(협업·기록·되돌리기). 브랜치·커밋·PR을 그림으로.</div></div>
<div class="r"><div class="tm">20–60분</div><div class="ac"><b>실습</b> — 연습용 저장소에서 브랜치 생성 → 파일 수정 → 커밋 → PR 올리기.</div></div>
<div class="r"><div class="tm">60–70분</div><div class="ac"><b>커밋 메시지</b> — 좋은 예/나쁜 예 비교, 컨벤션 안내.</div></div>
</div>
</div>
<div class="block"><div class="bt"><span class="ic pit">⚠️</span>흔한 실수 &amp; 대처</div>
<div class="pit-box">
<div class="row"><b>실수</b> — main에 바로 커밋하거나, "수정", "ㅇㅇ" 같은 커밋 메시지.</div>
<div class="row"><b>대처</b> — "브랜치 → PR → 리뷰"가 기본임을 반복. 커밋 메시지는 "무엇을 왜 바꿨는지" 한 줄.</div>
</div>
</div>
</div>
</div>
<!-- D5 S2 -->
<div class="session">
<div class="s-head"><div class="tag">Day5 · 세션 2 · 오후</div><h3>코드리뷰 받는 법 · 스탠드업 · 30분 룰</h3><div class="dur">약 50분</div></div>
<div class="s-body">
<div class="block"><div class="bt"><span class="ic obj">🎯</span>학습목표</div>
<ul class="obj-list">
<li>리뷰 피드백을 방어가 아니라 배움으로 받는 자세를 안다.</li>
<li>스탠드업에서 무엇을 말하는지, 30분 룰을 안다.</li>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic script">💬</span>멘토 설명 포인트</div>
<div class="script"><div class="who">이렇게 설명</div>
<p>"코드리뷰에서 지적받는 건 여러분이 부족해서가 아니라, 그게 <em>원래 일하는 방식</em>이에요. 저도 매번 리뷰받아요. 변명보다 '왜 그런지'를 먼저 물어보세요."</p>
<p>"스탠드업은 딱 세 가지 — 어제 한 것 / 오늘 할 것 / 막힌 것. 30초면 돼요."</p>
</div>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>실습 — 미니 스탠드업</div>
<div class="act-box"><p>학생들이 실제로 돌아가며 <b>"어제/오늘/막힌 것"</b>을 말해본다. (이번 주 배운 것을 소재로)</p></div>
</div>
</div>
</div>
<!-- D5 S3 -->
<div class="session">
<div class="s-head"><div class="tag">Day5 · 세션 3 · 오후</div><h3>온보딩 회고 &amp; 1주차 마무리 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>
</ul>
</div>
<div class="block"><div class="bt"><span class="ic act">✍️</span>실습 — 온보딩 회고 (1장)</div>
<div class="act-box">
<p><b>학생이 작성:</b></p>
<ul>
<li>이번 주 가장 인상 깊었던 것</li>
<li>어색했거나 어려웠던 것</li>
<li>다음 주에 잘해보고 싶은 것</li>
<li>회사·멘토에게 궁금하거나 바라는 것</li>
</ul>
</div>
</div>
<div class="block"><div class="bt"><span class="ic check">✅</span>멘토 — 첫 주간 1:1 (평가 기록 시작)</div>
<div class="check-box">
<p><b>평가 루브릭의 주간 1:1 기록지</b>에 첫 기록을 남긴다:</p>
<ul>
<li>이번 주 잘한 것 1 / 아쉬운 것 1</li>
<li>전달한 피드백 · 다음 주 목표</li>
</ul>
<p style="margin-top:8px;">관찰 포인트(1주차): <b>태도·적응 속도·예절 습득·적극성</b>.</p>
</div>
</div>
</div>
</div>
<!-- Next -->
<section id="next">
<div class="next">
<p><b>다음 모듈 예정</b> — 2주차 상세 강의안(코드·화면 읽기 + Git 실전 + 자료구조). 같은 6블록 틀로 이어집니다.</p>
</div>
</section>
<footer>
<span>AWESOMEDEV · 1주차 상세 강의안 (멘토용) · 8부작 중 1</span>
<span>2026 · 수습 가이드·CS 커리큘럼·평가 루브릭과 함께 사용</span>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink