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>
863 lines
56 KiB
HTML
863 lines
56 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>AWESOMEDEV 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); }
|
||
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> · 일일 과제집 · 1 / 4</div>
|
||
<h1>1주차 일일 과제집<br>온보딩 & 예절 적용</h1>
|
||
<p class="lede">이 과제집은 오전 강의가 끝난 뒤, 오후 자기주도 시간(10:40–12:00, 13:00–16:30)에 여러분이 스스로 진행하는 과제를 하루 단위로 담고 있어요. 매일 정해진 산출물이 있고, 16:30 멘토 리뷰 때 그대로 제출하면 돼요. 순서대로 읽고, 적힌 대로 하면 하루가 꽉 채워지도록 만들었어요.</p>
|
||
<div class="mast-meta">
|
||
<span class="chip"><span class="dot"></span>Week 1 · 월–금</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">1주차 내내 매일 같은 리듬으로 움직여요. 시간을 지키는 것 자체가 이번 주의 훈련이에요.</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줄, 어려웠던 것 1줄, 내일 해볼 것 1줄.</div></div>
|
||
</div>
|
||
<p class="mt" style="font-size:14px; color:var(--ink-soft);"><strong>규칙 한 줄:</strong> 과제가 일찍 끝나면 놀지 말고 예비 과제로 — 예비 과제도 평가에 반영돼요.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===================== 월요일 ===================== -->
|
||
<div class="day-div" id="d1">
|
||
<div class="day-badge"><div class="w">MON</div><div class="n">월</div></div>
|
||
<div>
|
||
<h2>회사 탐색 미션 — 우리 회사 지도 만들기</h2>
|
||
<p class="dm">오전 오리엔테이션(회사소개·사규·세팅)에서 들은 내용을, 오후에 내 손으로 직접 확인하고 지도로 그려요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>우리 회사 지도 1장 + 팀원 인터뷰 3명</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>해요(오전에 안내받은 위치). 모르는 단어(직함·팀명·서비스명)는 만나는 족족 메모장에 적어 두세요.</li>
|
||
<li>아래 <b>"우리 회사 지도" 양식</b>을 종이(또는 문서 앱)에 옮겨 그리고, 위키에서 확인한 팀 이름·담당 업무·대표 연락 채널을 채워요. 우리 회사가 다루는 분야(React 웹, Spring Boot 서버, React Native·Flutter 앱, 클라우드)가 각각 어느 팀 소관인지 표시해 보세요.</li>
|
||
<li>위키만으로 채워지지 않는 칸을 <b>"물어볼 것" 목록</b>으로 만들어요. 최소 5개.</li>
|
||
<li>13:00 이후, <b>팀원 3명에게 직접 찾아가</b> 인터뷰해요. 순서: (1) 오전에 배운 대로 정중하게 자기소개 → (2) "지금 5분 정도 괜찮으실까요?" 확인 → (3) 아래 인터뷰 메모 양식의 질문 → (4) 감사 인사. 바쁘다고 하시면 "언제쯤 다시 오면 될까요?"라고 여쭤보고 그 시간에 다시 가요.</li>
|
||
<li>인터뷰마다 <b>그 자리에서 메모</b>하고, 자리로 돌아와 5분 안에 정리해요(기억은 30분이면 흐려져요).</li>
|
||
<li>인터뷰 내용으로 지도의 빈칸을 채우고, 지도 하단에 <b>"내가 막히면 찾아갈 사람 3명"</b>을 상황별로 적어요(예: 장비 문제 → ○○님).</li>
|
||
<li>16:00까지 지도와 메모를 최종 정리하고, 스스로 소리 내어 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></p>
|
||
<ul>
|
||
<li>우리 회사 지도 1장 (손그림 사진 또는 문서 파일)</li>
|
||
<li>팀원 인터뷰 메모 3장 (양식대로)</li>
|
||
<li>리뷰 시간에 지도를 보며 <b>1분 회사 소개</b>를 직접 발표해요.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">워크시트 — 우리 회사 지도</div>
|
||
<pre>[ AWESOMEDEV 우리 회사 지도 ] 작성자: ______ 날짜: ______
|
||
|
||
■ 회사 한 줄 소개: ________________________________________
|
||
■ 주요 고객사(일반적으로): __________________________________
|
||
|
||
■ 팀 구성
|
||
팀 이름 하는 일(한 줄) 대표 담당자 연락 채널
|
||
1. ________ ________________________ __________ __________
|
||
2. ________ ________________________ __________ __________
|
||
3. ________ ________________________ __________ __________
|
||
4. ________ ________________________ __________ __________
|
||
|
||
■ 기술 분야 → 담당 팀
|
||
React 웹: ______ / Spring Boot 서버: ______ / RN·Flutter 앱: ______ / 클라우드: ______
|
||
|
||
■ 내가 막히면 찾아갈 사람
|
||
장비·계정 문제 → ______ / 과제·일정 질문 → ______ / 사규·행정 질문 → ______</pre>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">워크시트 — 팀원 인터뷰 메모 (1인 1장)</div>
|
||
<pre>인터뷰 상대: ______님 (팀: ______) 시간: __:__ ~ __:__
|
||
|
||
Q1. 지금 하고 계신 일을 하나만 소개해 주신다면?
|
||
→ ________________________________________________
|
||
|
||
Q2. 신입이 첫 달에 꼭 익혔으면 하는 것 한 가지는?
|
||
→ ________________________________________________
|
||
|
||
Q3. 이 팀에 질문할 때 좋은 방법(채널·시간대)은?
|
||
→ ________________________________________________
|
||
|
||
내가 느낀 점 한 줄: ______________________________________</pre>
|
||
</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>오전에 정독한 사규·가이드 문서에서 <b>수습 기간의 나에게 직접 해당되는 규칙 10개</b>를 골라요.</li>
|
||
<li>각 규칙을 <b>내 말로 한 줄씩</b> 바꿔 적어요(문서 문장을 그대로 베끼면 무효).</li>
|
||
<li>그중 "지키기 어려울 것 같은 것" 2개에 별표를 치고, 왜 어려울 것 같은지 한 줄씩 적어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✨</span>참고</div>
|
||
<div class="extra-box"><p><b>팁:</b> 출퇴근·휴가·보안·장비·커뮤니케이션, 이 다섯 갈래에서 최소 1개씩 고르면 균형이 잡혀요. 16:30 리뷰 때 본 과제와 함께 보여 주세요.</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> 회사 지도와 인터뷰는 직군과 무관하게 똑같이 진행해요. 단, 인터뷰 상대 3명 중 <b>1명은 꼭 디자이너(또는 디자인과 협업이 많은 분)</b>를 포함하고, Q2를 "신입 디자이너가 첫 달에 꼭 익혔으면 하는 것"으로 바꿔 물어보세요.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 화요일 ===================== -->
|
||
<div class="day-div" id="d2">
|
||
<div class="day-badge"><div class="w">TUE</div><div class="n">화</div></div>
|
||
<div>
|
||
<h2>예절 워크북 — 판단 문제와 중간보고 대본</h2>
|
||
<p class="dm">오전 예절 강의①(태도·호렌소·중간보고 롤플레이)에서 배운 판단 기준을, 오후에 글로 써서 내 것으로 만들어요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>상황 판단 문제 10제 + 중간보고 대본 3편</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>오전 강의 노트를 10분간 다시 읽고, <b>호렌소 세 글자의 뜻을 각각 한 문장으로</b> 맨 위에 적어요.</li>
|
||
<li>아래 <b>판단 문제 10개</b>를 순서대로 풀어요. 각 문제에 O/X를 고르고, <b>반드시 이유를 2문장 이상</b> 써요. "그냥 그래야 할 것 같아서"는 이유가 아니에요 — 오전에 배운 기준(누가 기다리는가, 언제 알려야 하는가)에 연결해서 쓰세요.</li>
|
||
<li>10문제 중 <b>가장 헷갈렸던 2개</b>에 별표를 치고, 무엇이 헷갈렸는지 한 줄씩 남겨요(리뷰 때 이걸 먼저 이야기해요).</li>
|
||
<li>13:00 이후, 아래 <b>3개 상황의 중간보고 대본</b>을 각각 6~10문장으로 써요. 말하듯이, 실제로 입 밖에 낼 문장으로요.</li>
|
||
<li>대본을 <b>소리 내어 읽으며 시간을 재요</b>. 각 대본이 40초를 넘으면 핵심만 남기고 줄여요.</li>
|
||
<li>줄인 최종본을 정서하고, 각 대본 아래에 "이 보고에서 상대가 알게 되는 것"을 한 줄로 적어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">워크시트 — 상황 판단 문제 10제 (O/X + 이유 2문장 이상)</div>
|
||
<pre>1. 아침에 늦잠을 잤다. 지각이 확실해진 순간보다, 회사에 도착해서
|
||
직접 사과하는 편이 낫다. ( O / X )
|
||
2. 맡은 일이 예정보다 일찍 끝났다. 다음 지시가 있을 때까지
|
||
조용히 기다리는 것이 예의다. ( O / X )
|
||
3. 모르는 용어가 나왔지만 회의 흐름을 끊기 싫어서, 회의가 끝나고
|
||
아무에게도 묻지 않고 검색으로만 해결했다. 잘한 행동이다. ( O / X )
|
||
4. 3일짜리 일을 받았다. 중간보고는 3일째 완성했을 때 한 번이면
|
||
충분하다. ( O / X )
|
||
5. 작업 중 실수로 파일을 잘못 건드린 것 같다. 확실해질 때까지
|
||
말하지 않고 혼자 복구를 시도하는 것이 낫다. ( O / X )
|
||
6. 멘토가 자리에 없다. 급한 확인 사항이 있으면 메신저로 먼저
|
||
남겨 두는 것이 예의에 어긋난다. ( O / X )
|
||
7. 지시받은 내용이 두 가지로 해석된다. 일단 내 해석대로 진행하고
|
||
결과물로 보여 주는 것이 더 능동적인 태도다. ( O / X )
|
||
8. 다른 팀원이 바빠 보인다. 부탁받은 전달 사항은 한가해 보일
|
||
때까지 며칠 미뤄도 된다. ( O / X )
|
||
9. 오후 반차를 쓰고 싶다. 당일 아침에 말해도 규정상 문제없다면
|
||
그걸로 충분하다. ( O / X )
|
||
10. 일이 막혀서 30분 넘게 진전이 없다. 그래도 "스스로 해결하는
|
||
모습"을 보이기 위해 하루 종일 붙잡는 것이 성장에 좋다. ( O / X )</pre>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">워크시트 — 중간보고 대본 3편</div>
|
||
<pre>공통 뼈대: ① 결론 먼저(지금 어디까지 됐는지) → ② 진행 상황 →
|
||
③ 문제/걱정거리 → ④ 다음에 할 일 → ⑤ 상대에게 바라는 것
|
||
|
||
[상황 A] 이틀짜리 조사 과제의 1일차 퇴근 30분 전, 멘토에게 진행 보고.
|
||
(순조롭게 절반쯤 진행된 상태)
|
||
대본: ____________________________________________
|
||
|
||
[상황 B] 과제 중 예상 못 한 문제 발견. 이대로면 기한을 못 지킬 것 같다.
|
||
(문제를 알게 된 직후, 멘토에게)
|
||
대본: ____________________________________________
|
||
|
||
[상황 C] 과제를 예정보다 반나절 일찍 끝냈다. 완료 보고 + 다음 일 요청.
|
||
대본: ____________________________________________</pre>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30에 제출:</b></p>
|
||
<ul>
|
||
<li>판단 문제 10제 완성본 (O/X + 이유, 별표 2개 포함)</li>
|
||
<li>중간보고 대본 3편 최종본 (각 40초 이내 분량)</li>
|
||
<li>리뷰 시간에 대본 중 1편을 멘토 앞에서 <b>실제로 말로</b> 해 봐요.</li>
|
||
</ul>
|
||
</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>오전 강의에서 배운 태도 항목 중 <b>내가 약할 것 같은 순서대로 7개</b>를 골라요.</li>
|
||
<li>각 항목을 "아침에 스스로 물을 수 있는 질문"으로 바꿔요. 예: "인사" → "오늘 사무실에 들어오며 먼저 인사했나?"</li>
|
||
<li>체크표(항목 7개 × 월~금 칸)를 만들고, 오늘 것부터 체크해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✨</span>참고</div>
|
||
<div class="extra-box"><p><b>팁:</b> 이 점검표는 수습 4주 내내 씁니다. 냉정하게 만들수록 나중의 내가 편해져요.</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> 예절과 보고는 직군 공통이에요. 단, 중간보고 대본의 [상황 B]는 "시안 작업 중 참고 자료가 부족해 방향을 잡기 어렵다"는 <b>디자인 상황</b>으로 바꿔 써 보세요 — 여러분이 실제로 하게 될 보고와 더 가까워져요.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 수요일 ===================== -->
|
||
<div class="day-div" id="d3">
|
||
<div class="day-badge"><div class="w">WED</div><div class="n">수</div></div>
|
||
<div>
|
||
<h2>소통 3종 세트 — 이메일 · 메신저 · 전화</h2>
|
||
<p class="dm">오전 예절 강의②(이메일·메신저·전화)의 형식을, 오후에 진짜로 써서 보내며 손에 익혀요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>이메일 2통 발송 + 메신저 질문 1건 + 전화 메모 2장</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">읽는 사람이 30초 안에 용건을 파악하는 이메일·메시지를 실제로 작성해 보내는 힘을 길러요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li><b>이메일 ① 인사 메일:</b> 아래 틀을 참고해 멘토에게 인사 메일을 써요. 자기소개 + 수습 기간의 각오 + 궁금한 점 1개. 제목은 "[수습/본인이름] "으로 시작해요. 다 쓰면 <b>3번 소리 내어 읽고 오타를 잡은 뒤 실제로 발송</b>해요.</li>
|
||
<li><b>이메일 ② 진행보고 메일:</b> "어제(화요일) 예절 워크북 과제를 완료했다"는 내용을 가상의 진행보고 형식으로 써서 멘토에게 발송해요. 결론 먼저, 본문은 10줄 이내, 항목은 번호 목록으로.</li>
|
||
<li><b>메신저 질문 1건:</b> 이번 주 과제 중 실제로 궁금했던 것 하나를 골라, 아래 "좋은 질문 틀"(상황 → 시도한 것 → 질문)에 맞춰 사내 메신저로 멘토에게 보내요. "질문 있어요"라고만 보내고 기다리는 건 금지 — 한 번에 읽고 답할 수 있게 완성된 메시지로.</li>
|
||
<li><b>전화 메모 연습:</b> 아래 두 가상 통화 시나리오를 읽고, 각각 전화 메모 양식에 옮겨 적어요. 시나리오는 일부러 말이 섞여 있으니 <b>핵심(누가·용건·기한·회신 필요 여부)만</b> 골라내는 게 연습 포인트예요.</li>
|
||
<li>메모 2장을 완성하면, 각 메모를 보고 <b>부재중인 담당자에게 전달하는 메신저 문장</b>을 한 줄씩 만들어 봐요(발송은 안 해요).</li>
|
||
<li>보낸 메일 2통과 메신저 질문을 스스로 다시 읽고, "더 줄일 수 있었던 문장"을 각 1개씩 찾아 표시해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">양식 — 업무 이메일 기본 틀</div>
|
||
<pre>제목: <span class="hl">[수습/홍길동]</span> 인사드립니다 / 과제 진행 보고 (용건이 제목에 보이게)
|
||
|
||
○○○ 멘토님, 안녕하세요. 수습 ___기 홍길동입니다.
|
||
|
||
<span class="hl">■ 용건(결론 먼저)</span>: ____________________________________
|
||
<span class="hl">■ 내용</span>:
|
||
1. ____________________________________
|
||
2. ____________________________________
|
||
<span class="hl">■ 요청/질문</span>: ____________________________________ (없으면 "회신 불필요합니다")
|
||
|
||
감사합니다.
|
||
홍길동 드림</pre>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">양식 — 좋은 메신저 질문 틀</div>
|
||
<pre>[상황] 지금 ___ 과제의 ___ 단계를 하고 있는데요,
|
||
[시도] ___를 해 봤고, ___도 확인해 봤는데 ___까지만 알 수 있었어요.
|
||
[질문] ___가 맞는지(또는 ___는 어떻게 하는지) 여쭤봐도 될까요?
|
||
급하지 않으니 편하실 때 답 주시면 됩니다.</pre>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">연습 자료 — 가상 통화 시나리오 2건 + 전화 메모 양식</div>
|
||
<pre>[통화 1] 14:05 수신
|
||
"아 네 안녕하세요, 저 협력사 ○○텔레콤 쪽 담당자인데요. 김○○ 팀장님 계신가요?
|
||
아 안 계세요? 음… 다음 주 화요일 미팅 말인데요, 저희가 오전이 안 될 것
|
||
같아서 오후 2시로 옮길 수 있는지 확인 부탁드리려고요. 아 그리고 회의실은
|
||
저희 쪽으로 와 주시는 걸로 알고 있을게요. 오늘 중으로 문자든 뭐든 답
|
||
주시면 감사하겠습니다. 제 번호는 010-1234-5678입니다."
|
||
|
||
[통화 2] 15:40 수신
|
||
"여보세요, 총무팀 박○○입니다. 이번에 새로 온 수습분들 노트북 자산 등록
|
||
때문에요, 각자 노트북 밑면에 있는 시리얼 번호를 이번 주 금요일까지 저한테
|
||
메일로 보내 주셔야 하거든요. 아 급한 건 아닌데 금요일 넘기면 다음 달
|
||
처리돼요. 메일 주소는 사내 주소록에 있어요. 네네, 부탁드릴게요."
|
||
|
||
--- 전화 메모 양식 (1통화 1장) ---
|
||
받은 사람: ______ 받은 시각: __:__
|
||
건 사람: ______ (소속: ______ / 연락처: ______)
|
||
찾는 사람: ______
|
||
용건(한 줄): ____________________________________
|
||
해야 할 일 / 기한: ____________________________________
|
||
회신 필요? (예/아니오) → 방법·기한: ______</pre>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30에 제출:</b></p>
|
||
<ul>
|
||
<li>실제 발송한 이메일 2통 (멘토 수신함에서 확인)</li>
|
||
<li>실제 발송한 메신저 질문 1건</li>
|
||
<li>전화 메모 2장 + 각 메모의 전달용 메신저 문장 1줄</li>
|
||
</ul>
|
||
</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>아래 "나쁜 메일"을 읽고, <b>문제점을 5개 이상</b> 찾아 번호를 매겨 적어요.</li>
|
||
<li>오늘 배운 기본 틀에 맞춰 <b>전체를 다시 써요</b>.</li>
|
||
<li>원본과 수정본을 나란히 놓고, 무엇이 어떻게 좋아졌는지 3줄로 정리해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">연습 자료 — 나쁜 메일 원본</div>
|
||
<pre>제목: 안녕하세요!!
|
||
|
||
넵 안녕하세여 저 수습인데요 ㅎㅎ 다름이 아니라 지난번에 말씀하신 그 자료
|
||
있잖아요 그거 언제까지였죠?? 그리고 제 노트북이 좀 이상한데 이것도 봐주실
|
||
수 있나요 아 그리고 내일 오전에 잠깐 자리 비울 것 같습니다 그럼 이만~</pre>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✨</span>참고</div>
|
||
<div class="extra-box"><p><b>힌트:</b> 용건이 몇 개인지 세어 보세요. 용건이 3개면 메일도 구조가 3개여야 하고, 어떤 용건은 메일이 아닌 다른 채널이 맞을 수도 있어요.</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개 방향을 잡았고 내일 오전까지 다듬어 공유하겠다"는 <b>디자인 진행보고</b>로 내용을 바꿔 쓰면, 앞으로 매주 쓰게 될 보고와 같은 형태가 돼요.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 목요일 ===================== -->
|
||
<div class="day-div" id="d4">
|
||
<div class="day-badge"><div class="w">THU</div><div class="n">목</div></div>
|
||
<div>
|
||
<h2>우리 서비스 탐험 — 화면 15장 리포트</h2>
|
||
<p class="dm">오전 회사 업무 이해·환경 세팅(+2진수 기초)에 이어, 오후엔 내가 맡게 될 서비스를 사용자 눈으로 샅샅이 훑어요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>서비스 화면 15개 캡처 + 기능 설명 + 궁금한 점 5개</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>에 접속해요(테스트 계정은 오전 세팅 때 받은 것을 사용). 접속이 안 되면 30분 룰을 기다리지 말고 바로 물어보세요 — 환경 문제는 예외예요.</li>
|
||
<li>먼저 15분간 <b>목적 없이 자유롭게</b> 서비스를 돌아다녀요. 캡처하지 말고, 첫인상만 메모해요(3줄).</li>
|
||
<li>이제 체계적으로: 첫 화면부터 시작해 <b>사용자가 이동하는 순서대로 화면 15개를 캡처</b>해요. 같은 화면의 상태 변화(예: 로그인 전/후, 목록 비었을 때/찼을 때)도 다른 화면으로 쳐요.</li>
|
||
<li>캡처마다 아래 리포트 양식의 한 줄 설명을 <b>사용자의 말</b>로 써요. "회원 정보 페이지" 같은 이름표가 아니라 "내 정보를 확인하고 비밀번호를 바꿀 수 있는 화면"처럼 <b>무엇을 할 수 있는지</b>로.</li>
|
||
<li>탐험하며 <b>이상하거나 궁금한 점을 만나는 즉시</b> 메모하고, 최종적으로 5개를 골라 리포트에 정리해요. "버튼을 눌렀는데 아무 일도 안 일어남" 같은 관찰도 훌륭한 항목이에요.</li>
|
||
<li>15장을 이동 흐름 순서로 정렬하고, 리포트 첫 장에 <b>화면 흐름도</b>(화면 이름을 화살표로 연결한 손그림이면 충분)를 붙여요.</li>
|
||
<li>마지막으로 "이 서비스가 없다면 사용자는 무엇이 불편할까?"에 3줄로 답해요 — 서비스의 존재 이유를 내 말로 정리하는 거예요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">양식 — 화면 탐험 리포트 (화면 1개당 1블록 × 15)</div>
|
||
<pre>서비스 이름: ______ 탐험 날짜: ______ 작성: ______
|
||
|
||
── 화면 #01 ──────────────────────────────
|
||
캡처: (이미지 첨부)
|
||
화면 이름(내가 붙인 것): ______
|
||
한 줄 설명(사용자가 할 수 있는 일): ____________________
|
||
이 화면으로 오는 경로: ______ → ______
|
||
메모(이상한 점·궁금한 점 있으면): ______
|
||
|
||
… #02 ~ #15 동일 …
|
||
|
||
── 궁금한 점 TOP 5 ──────────────────────
|
||
1. (화면 #__) ____________________________________
|
||
2. (화면 #__) ____________________________________
|
||
3. (화면 #__) ____________________________________
|
||
4. (화면 #__) ____________________________________
|
||
5. (화면 #__) ____________________________________
|
||
|
||
── 이 서비스가 없다면? (3줄) ─────────────
|
||
____________________________________</pre>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30에 제출:</b></p>
|
||
<ul>
|
||
<li>화면 탐험 리포트 1부 (흐름도 + 화면 15블록 + 궁금한 점 5개 + 존재 이유 3줄)</li>
|
||
<li>리뷰 시간에 궁금한 점 5개 중 <b>가장 중요하다고 생각하는 1개</b>를 골라 이유와 함께 설명해요.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>2진수 변환 연습 12제</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">오전에 배운 2진수를 손으로 굴려서, "컴퓨터는 0과 1로 생각한다"를 감각으로 만들어요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>계산기 없이, 오전에 배운 자릿값 표(128·64·32·16·8·4·2·1)를 종이에 그려 두고 시작해요.</li>
|
||
<li>아래 12문제를 <b>풀이 과정을 남기며</b> 풀어요. 답만 적으면 무효.</li>
|
||
<li>다 풀면 계산기(또는 개발자 도구 콘솔)로 검산하고, 틀린 문제는 어디서 틀렸는지 한 줄씩 적어요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">연습 문제 — 2진수 12제 (풀이 과정 필수, 답은 적혀 있지 않아요)</div>
|
||
<pre>[10진수 → 2진수]
|
||
1. 6을 2진수로 나타내세요.
|
||
2. 13을 2진수로 나타내세요.
|
||
3. 25를 2진수로 나타내세요.
|
||
4. 64를 2진수로 나타내세요.
|
||
5. 100을 2진수로 나타내세요.
|
||
6. 255를 2진수로 나타내세요.
|
||
|
||
[2진수 → 10진수]
|
||
7. 1010(2)를 10진수로 나타내세요.
|
||
8. 1111(2)를 10진수로 나타내세요.
|
||
9. 100000(2)를 10진수로 나타내세요.
|
||
10. 1011011(2)를 10진수로 나타내세요.
|
||
|
||
[생각해 보기]
|
||
11. 8자리 2진수(1바이트)로 표현할 수 있는 가장 큰 10진수는
|
||
얼마인지 구하고, 왜 그런지 한 줄로 설명하세요.
|
||
12. 화면의 색을 흔히 R·G·B 각각 0~255로 표현해요. 왜 하필
|
||
255까지인지, 오늘 배운 내용으로 두 줄 설명해 보세요.</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>서비스 화면 15개 — 디자인 관점 탐험</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>같은 화면 15개, 다른 렌즈.</b> 개발 과제와 같은 서비스·같은 15장을 캡처하되, 각 화면의 메모를 <b>디자인 관찰</b>로 채워요. 궁금한 점 5개도 디자인 관점으로.</p></div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>본 과제의 1~3단계(접속·자유 탐험·15장 캡처)는 동일하게 진행해요.</li>
|
||
<li>화면마다 세 가지를 관찰해 메모해요 — <b>색</b>(주로 쓰인 색 2~3개, 강조색이 무엇을 강조하는지), <b>글자</b>(제목/본문 크기 차이가 충분한지, 줄 길이가 읽기 편한지), <b>간격</b>(요소 사이 여백이 일정한지, 답답하거나 허전한 곳).</li>
|
||
<li>15장 중 <b>가장 잘 됐다고 느낀 화면 1개</b>와 <b>가장 아쉬운 화면 1개</b>를 골라, 각각 이유를 3줄씩 써요.</li>
|
||
<li>아쉬운 화면 1개는 "내가 고친다면"을 글로만 3가지 제안해요(시안 제작은 아직 안 해요).</li>
|
||
<li>궁금한 점 5개(예: "이 회색과 저 회색은 왜 다르지?", "버튼 모서리 둥글기가 화면마다 다른 이유는?")를 정리해 리포트를 완성해요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30에 제출:</b></p>
|
||
<ul>
|
||
<li>디자인 관점 화면 탐험 리포트 1부 (15블록 + 베스트/워스트 화면 + 개선 제안 3가지 + 궁금한 점 5개)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 금요일 ===================== -->
|
||
<div class="day-div" id="d5">
|
||
<div class="day-badge"><div class="w">FRI</div><div class="n">금</div></div>
|
||
<div>
|
||
<h2>Git 사이클 3회전 + 온보딩 회고</h2>
|
||
<p class="dm">오전 Git·코드리뷰·스탠드업 강의(+CPU·메모리 기초)를 그대로 이어서, 오후에 브랜치→커밋→PR 사이클을 몸에 새겨요.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">본 과제</div><h3>연습 저장소에서 브랜치→커밋→PR 3회 반복 + 온보딩 회고 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">브랜치→수정→커밋→푸시→PR의 한 바퀴를 생각 없이도 돌 수 있을 만큼 반복해서, 다음 주 실습의 발판을 만들어요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>오전에 안내받은 <b>연습 저장소를 클론</b>해요: <code>git clone <저장소 주소></code> → 폴더로 이동 → <code>git log --oneline -5</code>로 최근 이력을 먼저 구경해요.</li>
|
||
<li><b>1회전 — 내 소개 파일:</b> <code>git switch -c feat/intro-본인이름</code>으로 브랜치를 만들고, <code>members/</code> 폴더에 <code>본인이름.md</code>를 새로 만들어 자기소개 5줄(이름·목표 스택·이번 주 배운 것 1가지 포함)을 작성해요. <code>git add</code> → 커밋 → 푸시 → PR 생성. 커밋 메시지는 아래 컨벤션 표를 따라요.</li>
|
||
<li>PR 본문을 아래 <b>PR 양식</b>대로 채우고, 멘토를 리뷰어로 지정해요. PR 링크를 메모해 두세요.</li>
|
||
<li><b>2회전 — 기존 파일 수정:</b> 반드시 <code>git switch main</code> → <code>git pull</code>로 돌아온 뒤 새 브랜치 <code>docs/faq-본인이름</code>을 만들어요. 저장소의 <code>FAQ.md</code>에 "신입이 궁금해할 질문과 답" 1개를 추가하고(이번 주에 진짜 궁금했던 것으로), 같은 사이클로 PR까지 만들어요.</li>
|
||
<li><b>3회전 — 오타·정리:</b> 다시 main으로 → <code>git pull</code> → 브랜치 <code>fix/typo-본인이름</code>. 저장소의 아무 문서에서 오타·어색한 문장·깨진 링크를 <b>1개 이상 찾아 고치고</b> PR까지. 없어 보이면 멘토에게 "심어 둔 오타" 힌트를 요청해요.</li>
|
||
<li>3회전이 끝나면 <code>git log --oneline --all</code>과 PR 목록을 보며, 각 회전에서 <b>헷갈렸던 명령 1개씩</b>을 골라 "왜 헷갈렸는지"를 메모해요.</li>
|
||
<li>15:30부터는 <b>온보딩 회고 1장</b>을 아래 양식으로 써요. 솔직하게 — 회고는 잘한 척하는 문서가 아니라 다음 주를 설계하는 문서예요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">참고 — 커밋 메시지 컨벤션 (이대로 지켜요)</div>
|
||
<pre>형식: <span class="hl">타입: 한 일 요약 (한국어, 50자 이내, 마침표 없이)</span>
|
||
|
||
feat: 새 기능·새 파일 추가 예) feat: 홍길동 자기소개 문서 추가
|
||
fix: 잘못된 것 수정 예) fix: FAQ 문서 오타 수정
|
||
docs: 문서 내용 변경 예) docs: FAQ에 브랜치 질문 항목 추가
|
||
chore: 자잘한 정리 예) chore: 불필요한 빈 줄 제거
|
||
|
||
나쁜 예) "수정", "asdf", "커밋합니다", "금요일 과제"</pre>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">양식 — PR 본문 (3개 PR 모두 이 형식)</div>
|
||
<pre>## 무엇을 했나요
|
||
- ____________________________________
|
||
|
||
## 왜 했나요
|
||
- ____________________________________
|
||
|
||
## 리뷰어가 봐 주셨으면 하는 것
|
||
- ____________________________________
|
||
|
||
## 스스로 확인한 것
|
||
- [ ] 브랜치 이름이 컨벤션과 맞다
|
||
- [ ] 커밋 메시지가 컨벤션과 맞다
|
||
- [ ] 관련 없는 파일 변경이 섞이지 않았다</pre>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">양식 — 1주차 온보딩 회고</div>
|
||
<pre>[Keep] 계속하고 싶은 것 (이번 주 잘 됐던 행동) — 3가지
|
||
1. ______ 2. ______ 3. ______
|
||
|
||
[Problem] 아쉬웠던 것 (남 탓 말고 내 행동 중심으로) — 3가지
|
||
1. ______ 2. ______ 3. ______
|
||
|
||
[Try] 다음 주에 시도할 것 (측정 가능하게: "열심히"는 금지) — 3가지
|
||
1. ______ 2. ______ 3. ______
|
||
|
||
[한 줄] 일주일 전의 나에게 해 주고 싶은 말: ______</pre>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>16:30에 제출:</b></p>
|
||
<ul>
|
||
<li>PR 3개 링크 (feat / docs / fix 각 1개, 본문 양식 완성)</li>
|
||
<li>헷갈렸던 명령 메모 3줄</li>
|
||
<li>온보딩 회고 1장</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic extra">✨</span>주의</div>
|
||
<div class="extra-box"><p><b>절대 규칙:</b> main 브랜치에 직접 커밋·푸시하지 않아요. 회전을 시작할 때마다 반드시 main으로 돌아가 <code>git pull</code>부터 — 이 습관이 다음 주 실전에서 여러분을 지켜 줘요.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">예비 과제</div><h3>JavaScript 워밍업 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">다음 주 JavaScript 실습 전에, 브라우저 콘솔에서 값을 다루는 감각을 미리 깨워요.</p>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>브라우저에서 F12 → Console 탭을 열어요. 여기가 오늘의 실습장이에요.</li>
|
||
<li>아래 10문제를 순서대로 콘솔에 직접 입력해 풀어요. <b>입력한 코드와 결과를 그대로 복사</b>해 문서에 남겨요.</li>
|
||
<li>에러가 나면 지우지 말고 <b>에러 메시지도 함께 기록</b>해요 — 에러를 읽는 연습이 절반이에요.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="tpl">
|
||
<div class="cap">연습 문제 — JavaScript 워밍업 10제 (답은 적혀 있지 않아요)</div>
|
||
<pre>1. console.log("안녕하세요, AWESOMEDEV!")를 실행해 인사를 출력하세요.
|
||
2. 변수 name에 본인 이름을, age에 나이를 저장한 뒤 두 변수를
|
||
각각 출력하세요.
|
||
3. name과 age를 이용해 "저는 ○○이고 ○○살입니다" 형태의
|
||
한 문장을 만들어 출력하세요.
|
||
4. 7 + 3, 7 - 3, 7 * 3, 7 / 3, 7 % 3 다섯 가지를 각각 실행하고,
|
||
%가 무엇을 하는 연산인지 주석(//)으로 적으세요.
|
||
5. 변수 price = 12000, count = 3일 때 총액을 계산해 total 변수에
|
||
저장하고 출력하세요.
|
||
6. "2026" + 1을 실행해 보고, 결과가 왜 그렇게 나오는지 한 줄로
|
||
설명을 적으세요.
|
||
7. 변수 isDone = false를 만들고, if문을 사용해 isDone이 true면
|
||
"끝!", false면 "아직!"을 출력하세요.
|
||
8. 배열 days = ["월","화","수","목","금"]을 만들고, days[0]과
|
||
days[4], 그리고 days.length를 출력하세요.
|
||
9. for문으로 1부터 10까지의 숫자를 차례대로 출력하세요.
|
||
10. for문을 고쳐 1부터 10까지의 "합계"를 구해 출력하세요.
|
||
(힌트: 합을 담아 둘 변수가 하나 필요해요)</pre>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic out">📤</span>산출물 · 제출</div>
|
||
<div class="out-box">
|
||
<p><b>제출:</b> 문제별 입력 코드 + 출력 결과(에러 포함)를 담은 기록 문서 1부. 본 과제와 함께 16:30에 제출해요.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task">
|
||
<div class="t-head">
|
||
<div><div class="kind">디자이너 과제</div><h3>Figma 파일 정리 연습 + 온보딩 회고</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>Git 대신 Figma.</b> 개발자의 "브랜치·커밋 규칙"에 해당하는 것이 디자이너에겐 "파일·레이어·네이밍 규칙"이에요. 오늘은 어질러진 파일을 규칙 있게 정리하는 연습을 해요. 회고는 개발 과제와 동일한 양식으로 작성해요.</p></div>
|
||
</div>
|
||
<div class="block">
|
||
<div class="bt"><span class="ic step">📋</span>진행 순서</div>
|
||
<ol class="steps">
|
||
<li>멘토에게 <b>연습용 Figma 파일</b>(일부러 어질러 둔 파일)의 링크를 받아 내 드래프트로 복제해요.</li>
|
||
<li>파일 안의 페이지를 <b>"🧭 Cover / 🎨 Design / 🧪 Playground"</b> 3개로 재구성하고, 각 프레임을 알맞은 페이지로 옮겨요.</li>
|
||
<li>모든 프레임과 주요 레이어에 <b>일관된 이름 규칙</b>을 붙여요: 프레임은 "화면명/상태"(예: 로그인/기본, 로그인/에러), 레이어는 "Rectangle 41" 같은 자동 이름을 전부 의미 있는 이름으로.</li>
|
||
<li>파일 안에서 <b>반복 사용된 색을 모두 찾아</b> 스타일로 등록하고(예: Primary, Gray-Text), 개별 지정된 색을 스타일 참조로 교체해요.</li>
|
||
<li>정리 전/후를 비교하는 <b>Before → After 캡처 한 쌍</b>을 Cover 페이지에 배치하고, "내가 적용한 정리 규칙 5가지"를 텍스트로 정리해요.</li>
|
||
<li>15:30부터는 개발 과제와 같은 양식으로 <b>온보딩 회고 1장</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></p>
|
||
<ul>
|
||
<li>정리 완료된 Figma 파일 링크 (Before→After 캡처, 정리 규칙 5가지 포함)</li>
|
||
<li>온보딩 회고 1장</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== 멘토 리뷰 가이드 ===================== -->
|
||
<section id="review-guide">
|
||
<div class="eyebrow">Mentor Guide</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> 지도가 위키 베끼기가 아니라 인터뷰로 채워졌는가, 인터뷰 예절(사전 양해·감사 인사)을 지켰는가. <b>질문:</b> "장비가 고장 나면 지금 누구에게 먼저 가나요? 왜 그분인가요?"</div></div>
|
||
<div class="row"><div class="t">화</div><div class="v"><b>확인:</b> O/X보다 이유의 근거가 강의 내용과 연결되는가, 대본이 결론-먼저 구조인가. <b>질문:</b> "상황 B 대본을 지금 저한테 그대로 말해 보세요 — 40초 안에요."</div></div>
|
||
<div class="row"><div class="t">수</div><div class="v"><b>확인:</b> 실제 발송된 메일의 제목·구조·오타, 메신저 질문에 '시도한 것'이 들어 있는가, 전화 메모에서 기한·회신 여부를 놓치지 않았는가. <b>질문:</b> "통화 1에서 오늘 중으로 해야 할 일이 뭐였죠?"</div></div>
|
||
<div class="row"><div class="t">목</div><div class="v"><b>확인:</b> 화면 설명이 '이름표'가 아니라 '할 수 있는 일'로 쓰였는가, 궁금한 점이 구체적 화면에 근거하는가. <b>질문:</b> "궁금한 점 1위를 골랐던데, 그게 사용자에게 왜 중요한가요?" (디자이너: "워스트 화면의 개선안 3개 중 가장 효과 큰 건?")</div></div>
|
||
<div class="row"><div class="t">금</div><div class="v"><b>확인:</b> PR 3개의 브랜치·커밋 컨벤션 준수, main 직접 커밋 여부, 회고 Try가 측정 가능한가. <b>질문:</b> "2회전 시작 전에 왜 main에서 pull부터 했나요?" (디자이너: "정리 규칙 5가지 중 팀 전체가 따라야 할 1순위는?")</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div>AWESOMEDEV · 1주차 일일 과제집 (학생 배포용) · 4부작 중 1</div>
|
||
<div>2026 · 1주차 상세 강의안과 함께 사용</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|