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>
749 lines
46 KiB
HTML
749 lines
46 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>1주차 상세 강의안 · 온보딩 & 예절</title>
|
||
<style>
|
||
:root {
|
||
--paper: #FAFBFD; --card: #FFFFFF; --ink: #101A28; --ink-soft: #46536A;
|
||
--ink-faint: #7B8798; --line: #E4E8F0; --line-soft: #EFF2F7;
|
||
--primary: #2159C5; --primary-soft: #E5EDFB; --primary-deep: #163F8F;
|
||
--amber: #B9772A; --amber-soft: #F6EBDA; --amber-line: #E4C79A;
|
||
--teal: #0E8C86; --teal-soft: #E0F1EF;
|
||
--rose: #B4463C; --rose-soft: #F7E7E4;
|
||
--code-bg: #F1F4F9;
|
||
--shadow: 0 1px 2px rgba(16,26,40,.05), 0 8px 24px -12px rgba(16,26,40,.16);
|
||
--radius: 14px;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--paper: #0B1017; --card: #131A24; --ink: #E8EDF4; --ink-soft: #A4B0C0;
|
||
--ink-faint: #74808F; --line: #263140; --line-soft: #1C242F;
|
||
--primary: #6AA0F0; --primary-soft: #172A44; --primary-deep: #AECBF8;
|
||
--amber: #DBA25C; --amber-soft: #2C2318; --amber-line: #4A3B23;
|
||
--teal: #4FC7BE; --teal-soft: #14302E; --rose: #E08A80; --rose-soft: #331E1B;
|
||
--code-bg: #161E28;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
|
||
}
|
||
}
|
||
:root[data-theme="light"] {
|
||
--paper: #FAFBFD; --card: #FFFFFF; --ink: #101A28; --ink-soft: #46536A;
|
||
--ink-faint: #7B8798; --line: #E4E8F0; --line-soft: #EFF2F7;
|
||
--primary: #2159C5; --primary-soft: #E5EDFB; --primary-deep: #163F8F;
|
||
--amber: #B9772A; --amber-soft: #F6EBDA; --amber-line: #E4C79A;
|
||
--teal: #0E8C86; --teal-soft: #E0F1EF; --rose: #B4463C; --rose-soft: #F7E7E4;
|
||
--code-bg: #F1F4F9;
|
||
--shadow: 0 1px 2px rgba(16,26,40,.05), 0 8px 24px -12px rgba(16,26,40,.16);
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--paper: #0B1017; --card: #131A24; --ink: #E8EDF4; --ink-soft: #A4B0C0;
|
||
--ink-faint: #74808F; --line: #263140; --line-soft: #1C242F;
|
||
--primary: #6AA0F0; --primary-soft: #172A44; --primary-deep: #AECBF8;
|
||
--amber: #DBA25C; --amber-soft: #2C2318; --amber-line: #4A3B23;
|
||
--teal: #4FC7BE; --teal-soft: #14302E; --rose: #E08A80; --rose-soft: #331E1B;
|
||
--code-bg: #161E28;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||
body { margin: 0; background: var(--paper); color: var(--ink);
|
||
font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
|
||
line-height: 1.7; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
|
||
.wrap { max-width: 860px; margin: 0 auto; padding: clamp(20px,4vw,48px); }
|
||
|
||
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 10px; }
|
||
.eyebrow::before { content:""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
|
||
|
||
header.mast { border: 1px solid var(--line); border-radius: var(--radius);
|
||
background: radial-gradient(120% 140% at 100% 0%, var(--primary-soft) 0%, transparent 55%), var(--card);
|
||
box-shadow: var(--shadow); padding: clamp(26px,4vw,42px); }
|
||
.wordmark { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
|
||
.wordmark b { color: var(--primary); }
|
||
header.mast h1 { font-size: clamp(27px,5.4vw,40px); line-height: 1.15; margin: 16px 0 0; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
|
||
header.mast .lede { margin: 16px 0 0; font-size: clamp(15px,2.4vw,17px); color: var(--ink-soft); max-width: 58ch; }
|
||
.mast-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
|
||
.chip { font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
|
||
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
|
||
|
||
nav.toc { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 18px 22px; box-shadow: var(--shadow); }
|
||
nav.toc .t { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
|
||
nav.toc ol { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
|
||
nav.toc a { display: flex; gap: 10px; text-decoration: none; color: var(--ink-soft); font-size: 14px; padding: 3px 0; }
|
||
nav.toc a b { color: var(--primary); font-weight: 800; min-width: 40px; }
|
||
nav.toc a:hover { color: var(--primary); }
|
||
@media (max-width:560px){ nav.toc ol { grid-template-columns: 1fr; } }
|
||
|
||
/* 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>온보딩 & 기본 예절</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>흔한 실수 & 대처</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>흔한 실수 & 대처</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>장비 · 계정 세팅 & 시설 안내</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>흔한 실수 & 대처</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>흔한 실수 & 대처</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>흔한 실수 & 대처</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>흔한 실수 & 대처</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>흔한 실수 & 대처</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 · 협업 규칙 & 첫 주 마무리</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 기초 & 커밋 컨벤션</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>흔한 실수 & 대처</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>온보딩 회고 & 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>
|