AWESOMEDEV
bb12d072b1
- code-review.html: 5~8주차 티켓 흐름에 상시 코드리뷰 도입. 왜/리뷰 흐름(PR→동료+멘토→반영→merge)/리뷰어 체크리스트/ 좋은·나쁜 코멘트 예시/받는 자세. 우리 실제 버그를 예시로. - capstone-demoday.html: 7~8주차 캡스톤 = 1인 1기능(플랫폼 위) + 8주차 금 데모데이. 밤샘 해커톤 아닌 미니 스프린트+발표. 일정·발표법·평가 연결. - 평가 루브릭 ③ 협업·소통에 코드리뷰 항목 명시(주는 것/받는 것) + dim-note 스타일 - DocsPage에 'PRACTICE(실습)' 카테고리 추가, documents.json + 운영 DB 시드(학생 노출) 검증: 학생 계정에 두 문서 노출·렌더 확인. 커리큘럼 확장 없이 기존 티켓·PR·루브릭에 얹음. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
173 lines
13 KiB
HTML
173 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>캡스톤 & 데모데이 · AWESOMEDEV</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;
|
|
--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;
|
|
--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.72; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
|
|
.wrap { max-width: 820px; 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, b { font-weight: 700; }
|
|
h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
|
|
|
|
.days { display: grid; gap: 10px; margin-top: 16px; }
|
|
.day { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
|
|
.day .when { font-weight: 800; color: var(--primary); font-size: 14px; }
|
|
.day .when span { display: block; font-weight: 600; color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
|
|
.day .t { font-weight: 700; color: var(--ink); }
|
|
.day .d { color: var(--ink-soft); font-size: 14px; margin-top: 3px; }
|
|
@media (max-width: 560px){ .day { grid-template-columns: 1fr; gap: 6px; } }
|
|
|
|
.ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
|
|
@media (max-width: 620px){ .ideas { grid-template-columns: 1fr; } }
|
|
.idea { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); }
|
|
.idea .tag { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); }
|
|
.idea .h { font-weight: 700; margin: 5px 0 4px; }
|
|
.idea .d { color: var(--ink-soft); font-size: 13.5px; }
|
|
|
|
.rules { margin-top: 14px; display: grid; gap: 9px; }
|
|
.rules .item { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 14.5px; color: var(--ink-soft); align-items: start; }
|
|
.rules .mk { color: var(--teal); font-weight: 800; margin-top: 1px; }
|
|
.rules b { color: var(--ink); }
|
|
|
|
.judge { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
|
|
.judge th, .judge td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
|
|
.judge th { background: var(--primary-soft); color: var(--primary-deep); font-weight: 700; white-space: nowrap; }
|
|
.judge td.n { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
|
|
code, .icode { background: var(--code-bg); border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em; }
|
|
.tip { margin-top: 16px; background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink-soft); }
|
|
.tip b { color: var(--teal); }
|
|
.warn { margin-top: 16px; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink-soft); }
|
|
.warn b { color: var(--amber); }
|
|
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--ink-faint); font-size: 13px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header class="mast">
|
|
<div class="wordmark"><b>AWESOMEDEV</b> · 실습 가이드</div>
|
|
<div class="eyebrow" style="margin-top:16px">Capstone & Demo Day</div>
|
|
<h1>캡스톤 & 데모데이</h1>
|
|
<p class="lede">8주의 마지막, 각자 <b>기능 하나를 처음부터 끝까지</b> 만들어 대표님 앞에서 시연합니다.
|
|
밤샘 경쟁 해커톤이 아니라, 두 달간 배운 걸 종합하는 <b>미니 스프린트 + 발표</b>예요. 자기가 매일 쓰는 이 플랫폼을 더 좋게 만듭니다.</p>
|
|
<div class="mast-meta">
|
|
<span class="chip"><span class="dot"></span>7~8주차 · 종합</span>
|
|
<span class="chip"><span class="dot"></span>1인 1기능 (디자이너는 페어)</span>
|
|
<span class="chip"><span class="dot"></span>데모데이: 8주차 금요일</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<div class="eyebrow">What</div>
|
|
<h2>무엇을 만드나</h2>
|
|
<p class="sub">거창한 새 서비스가 아니에요. "이 플랫폼에 있으면 좋겠다" 싶은 기능 하나를, 혼자 힘으로 끝까지.</p>
|
|
<div class="card mt">
|
|
<p>대상은 <b>여러분이 매일 쓰는 이 학습 플랫폼(mirim-app)</b>입니다. 8주간 티켓으로 이 코드를 만져 왔으니
|
|
구조를 이미 알아요. 그 위에 "화면 → API → DB"를 관통하는 기능 하나를 스스로 설계하고 구현합니다.
|
|
범위는 <b>4~5일에 끝낼 수 있는 크기</b> — 멘토와 함께 첫날 범위를 확정해요.</p>
|
|
</div>
|
|
<div class="ideas">
|
|
<div class="idea"><div class="tag">개발</div><div class="h">학습 뱃지·연속 출석</div><div class="d">코스를 N개 완료하면 뱃지, 며칠 연속 학습했는지 표시. 진도 데이터를 활용.</div></div>
|
|
<div class="idea"><div class="tag">개발</div><div class="h">코딩 문제 즐겨찾기</div><div class="d">어려웠던 문제를 별표해 두고 나중에 다시 풀기. 새 테이블 + 화면.</div></div>
|
|
<div class="idea"><div class="tag">개발</div><div class="h">멘토용 주간 리포트</div><div class="d">이번 주 학생별 제출·진도 요약을 한 화면에. 집계 쿼리 연습.</div></div>
|
|
<div class="idea"><div class="tag">디자인+개발</div><div class="h">대시보드 리디자인</div><div class="d">첫 화면을 더 동기부여되게. 디자이너가 설계, 개발자와 페어로 반영.</div></div>
|
|
</div>
|
|
<div class="tip"><b>아이디어는 자유예요.</b> 위는 예시일 뿐 — 자기가 "있으면 진짜 쓸 것 같은" 걸 고르는 게 제일 좋아요. 단, 첫날 멘토와 범위를 못 박아 "5일 안에 끝나는 크기"로 자릅니다.</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="eyebrow">Schedule</div>
|
|
<h2>일정 — 7주차 기획, 8주차 스프린트</h2>
|
|
<p class="sub">이미 7주차(기획·설계) → 8주차(구현·발표) 커리큘럼과 이어져요. 그 뼈대에 데모데이를 얹습니다.</p>
|
|
<div class="days">
|
|
<div class="day"><div class="when">7주차<span>기획 주간</span></div><div><div class="t">주제 정하기 · 설계 발표</div><div class="d">무엇을·왜 만들지 정하고, 화면 스케치 + 데이터 구조(어떤 테이블·API)를 한 장으로. 주 끝에 멘토·동료 앞에서 3분 설계 발표 → 피드백으로 범위 조정.</div></div></div>
|
|
<div class="day"><div class="when">8주차 월~목<span>스프린트</span></div><div><div class="t">구현 + 매일 스탠드업</div><div class="d">매일 아침 5분 "어제 한 것·오늘 할 것·막힌 것" 공유. 중간에 PR을 열어 동료·멘토 리뷰(코드리뷰 가이드 그대로). 막히면 30분 룰로 질문.</div></div></div>
|
|
<div class="day"><div class="when">8주차 금<span>데모데이 🎉</span></div><div><div class="t">시연 + 발표 + 회고</div><div class="d">각자 5분 시연 + 3분 Q&A. 대표님·멘토·동료가 관객. "무엇을·왜·어떻게·무엇을 배웠나"를 담아요. 끝나고 두 달 전체 회고.</div></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="eyebrow">Demo Day</div>
|
|
<h2>발표는 이렇게</h2>
|
|
<p class="sub">코드가 멋진 것보다 "무엇을 배웠는지 전할 수 있는가"가 더 중요해요. 5분이면 충분합니다.</p>
|
|
<div class="card mt">
|
|
<div class="rules">
|
|
<div class="item"><span class="mk">1</span><div><b>왜 만들었나</b> (30초) — 어떤 불편을 풀고 싶었는지.</div></div>
|
|
<div class="item"><span class="mk">2</span><div><b>실제로 보여주기</b> (2분) — 슬라이드 말고 <b>돌아가는 화면</b>으로 시연. 미리 시나리오를 연습해 두기.</div></div>
|
|
<div class="item"><span class="mk">3</span><div><b>어떻게 만들었나</b> (1분) — 화면·API·DB가 어떻게 이어지는지 한 장으로.</div></div>
|
|
<div class="item"><span class="mk">4</span><div><b>무엇을 배웠나 · 못한 것</b> (1분) — 막혔던 지점과 배움. 못 끝낸 부분을 솔직히 말하는 게 오히려 점수예요.</div></div>
|
|
<div class="item"><span class="mk">5</span><div><b>Q&A</b> (3분) — 관객 질문. 모르면 "그건 아직 몰라요, 찾아볼게요"가 정답.</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="warn"><b>완성이 목표가 아니에요.</b> 미완이어도 괜찮습니다 — 어디까지 했고 왜 거기서 멈췄는지 설명할 수 있으면 돼요. 밤새우지 마세요. 지속가능한 속도가 실무의 기본입니다.</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="eyebrow">Evaluation</div>
|
|
<h2>무엇을 보나</h2>
|
|
<p class="sub">캡스톤은 별도 점수가 아니라, 8주 평가 루브릭의 여러 축을 <b>한 번에 종합해 확인하는 자리</b>예요.</p>
|
|
<table class="judge">
|
|
<thead><tr><th>보는 것</th><th>연결되는 평가 축</th><th class="n">무게</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>혼자 힘으로 화면~DB를 관통했나</td><td>② 기본기 · 직무 역량</td><td class="n">높음</td></tr>
|
|
<tr><td>스탠드업·리뷰·질문으로 잘 협업했나</td><td>③ 협업 · 소통</td><td class="n">높음</td></tr>
|
|
<tr><td>막힘을 스스로 헤쳐 나갔나</td><td>① 성장 속도 · 학습력</td><td class="n">중간</td></tr>
|
|
<tr><td>발표로 자기 일을 설명했나</td><td>③ 협업 · 소통 / ④ 태도</td><td class="n">중간</td></tr>
|
|
<tr><td>끝까지 책임지고 마무리했나</td><td>④ 태도 · 책임감 / ⑤ 성장 가능성</td><td class="n">중간</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="tip"><b>즉, 캡스톤은 8주의 축소판이에요.</b> 평소에 티켓·리뷰·질문을 성실히 한 사람이 자연스럽게 잘합니다 — 벼락치기가 안 되는 구조예요. 자세한 채점은 <b>「어썸데브 수습 평가 루브릭」</b> 참고.</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<span>AWESOMEDEV · 캡스톤 & 데모데이</span>
|
|
<span>7~8주차 · 데모데이 8주차 금요일</span>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|