647 lines
60 KiB
HTML
647 lines
60 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>AIO 1기 최종 프로젝트 1주차 킥오프</title>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=JetBrains+Mono:wght@400;600&display=swap">
|
||
<style>
|
||
@page { size: 1920px 1080px; margin: 0; }
|
||
* { box-sizing: border-box; margin: 0; }
|
||
html, body { background: #1B1E24; height: 100%; overflow: hidden; }
|
||
body { display: flex; align-items: center; justify-content: center; }
|
||
.frame { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; position: relative; overflow: hidden;
|
||
display: none; }
|
||
.frame.active { display: block; }
|
||
.nav { position: fixed; right: 16px; bottom: 12px; display: flex; gap: 8px; align-items: center;
|
||
font: 14px 'JetBrains Mono', 'Noto Sans CJK KR', monospace; color: #C9D3E3; opacity: .25; transition: opacity .2s; }
|
||
.nav:hover, body.moved .nav { opacity: .9; }
|
||
.nav button { background: #2B2F36; color: #F7F6F2; border: 1px solid #4A5D80; border-radius: 6px;
|
||
width: 36px; height: 32px; font-size: 16px; cursor: pointer; }
|
||
.nav button:hover { background: #E8833A; color: #14213D; }
|
||
.progress { position: fixed; left: 0; bottom: 0; height: 4px; background: #E8833A; transition: width .2s; }
|
||
.slide { width: 1920px; height: 1080px; transform-origin: 0 0; position: absolute; left: 0; top: 0; }
|
||
.slide > section { width: 1920px; height: 1080px; position: relative; overflow: hidden;
|
||
font-family: 'Noto Sans KR', 'Noto Sans CJK KR', Arial, sans-serif; }
|
||
section [style*="JetBrains"] { }
|
||
h1, h2, h3, p, li, td, th { font-family: inherit; }
|
||
ul, ol { padding-left: 1.3em; }
|
||
table { border-collapse: collapse; width: 100%; }
|
||
th, td { padding: 0.35em 0.6em; text-align: left; border-bottom: 1px solid #E2E0D8; vertical-align: top; }
|
||
@media print {
|
||
html, body { background: none; padding: 0; gap: 0; display: block; height: auto; overflow: visible; }
|
||
.nav, .progress { display: none; }
|
||
.frame { display: block !important; width: 1920px; height: 1080px; break-after: page; }
|
||
.slide { transform: none !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="frame"><div class="slide"><section id="cover" style="background:#14213D;color:#F7F6F2;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px;display:flex;flex-direction:column;justify-content:center;gap:40px">
|
||
<div style="position:absolute;left:0;top:0;width:24px;height:1080px;background:#E8833A"></div>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;color:#F2A66B;letter-spacing:4px">AIO 1기 · FINAL PROJECT · WEEK 1</p>
|
||
<h1 style="font-size:112px;font-weight:900;line-height:1.1">최종 프로젝트<br>킥오프</h1>
|
||
<p style="font-size:36px;color:#C9D3E3;line-height:1.4">팀을 만들고, 주제를 고르고, 함께 일하는 방식을 정하는 한 주</p>
|
||
<div style="display:flex;gap:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;color:#14213D;background:#E8833A;padding:12px 24px;border-radius:8px">11/10 (화) – 11/13 (금)</p>
|
||
<p style="font-size:28px;color:#F7F6F2;border:2px solid #4A5D80;padding:12px 24px;border-radius:8px">STEP 1 · 프로젝트 기획 및 설계</p>
|
||
</div>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="week" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:40px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">THIS WEEK</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">이번 주 흐름 — 4일 안에 기획을 끝냅니다</h2>
|
||
</div>
|
||
<div style="display:flex;gap:20px">
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;background:#14213D;border-radius:12px;padding:32px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:26px;color:#F2A66B">11/10 화 · 오늘</p>
|
||
<h3 style="font-size:34px;font-weight:700;color:#F7F6F2">팀 만들기</h3>
|
||
<ul style="font-size:24px;color:#C9D3E3;line-height:1.6">
|
||
<li>팀 빌딩 · 역할 탐색</li>
|
||
<li>팀장 선정</li>
|
||
<li>팀 헌장 · 그라운드 룰</li>
|
||
<li>협업 환경 세팅</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:32px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:26px;color:#B5541A">11/11 수</p>
|
||
<h3 style="font-size:34px;font-weight:700">주제 정하기</h3>
|
||
<ul style="font-size:24px;color:#4A5568;line-height:1.6">
|
||
<li>5개 주제 검토</li>
|
||
<li>선택 기준으로 점수화</li>
|
||
<li>문제 정의 · 타깃 사용자</li>
|
||
<li>핵심 시나리오</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:32px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:26px;color:#B5541A">11/12 목</p>
|
||
<h3 style="font-size:34px;font-weight:700">설계하기</h3>
|
||
<ul style="font-size:24px;color:#4A5568;line-height:1.6">
|
||
<li>요구사항 명세</li>
|
||
<li>아키텍처 · 기술 스택</li>
|
||
<li>에이전트 구성 초안</li>
|
||
<li>WBS 초안</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;background:#E8833A;border-radius:12px;padding:32px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:26px;color:#14213D">11/13 금 · 마감</p>
|
||
<h3 style="font-size:34px;font-weight:700;color:#14213D">제출하기</h3>
|
||
<ul style="font-size:24px;color:#14213D;line-height:1.6">
|
||
<li>기획서 (요구사항 명세 포함)</li>
|
||
<li>WBS (화면 캡처)</li>
|
||
<li>대시보드 제출 상태 갱신</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">02 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="bigpicture" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:40px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">THE BIG PICTURE · 9 WEEKS</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">이번 주 기획이 9주의 설계도입니다</h2>
|
||
</div>
|
||
<div style="display:flex;gap:16px">
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:10px;background:#E8833A;border-radius:12px;padding:28px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D">STEP 1 · 1주차</p>
|
||
<h3 style="font-size:30px;font-weight:700;color:#14213D;line-height:1.3">기획 · 설계</h3>
|
||
<p style="font-size:24px;color:#14213D;line-height:1.4">지금 여기</p>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">STEP 2 · 2주차</p>
|
||
<h3 style="font-size:30px;font-weight:700;line-height:1.3">API · Function Calling</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">FastAPI · DB · 인증</p>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">STEP 3 · 3–4주차</p>
|
||
<h3 style="font-size:30px;font-weight:700;line-height:1.3">단일 에이전트</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">LangGraph · 메모리 · 자기 성찰</p>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">STEP 4 · 5–6주차</p>
|
||
<h3 style="font-size:30px;font-weight:700;line-height:1.3">멀티 에이전트</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">협업 · Auto-Healing · 보안</p>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D">STEP 5 · 7–8주차</p>
|
||
<h3 style="font-size:30px;font-weight:700;line-height:1.3">대화형 앱 · 배포</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">스트리밍 UI · AWS</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:20px">
|
||
<p style="flex:1;font-size:28px;font-weight:700;color:#F7F6F2;background:#2F5D8C;padding:16px 24px;border-radius:8px">12/8 (화) 중간 발표</p>
|
||
<p style="flex:1;font-size:28px;font-weight:700;color:#F7F6F2;background:#14213D;padding:16px 24px;border-radius:8px">1/4 (월) 최종 발표 · 소스코드 · 시연영상</p>
|
||
</div>
|
||
<p style="font-size:28px;color:#4A5568;line-height:1.4">주제와 요구사항이 흔들리면 이후 산출물이 전부 흔들립니다. 이번 주에 범위를 현실적으로 잡는 것이 가장 중요합니다.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">03 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="roles" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">TEAM BUILDING · 권장 역할</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">팀 역할 나누기</h2>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px">
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-top:6px solid #E8833A;border-radius:12px;padding:28px">
|
||
<h3 style="font-size:32px;font-weight:700">PM · 기획</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">일정 · 산출물 · 대시보드 관리, 기획서 총괄</p>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">전 단계</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-top:6px solid #E8833A;border-radius:12px;padding:28px">
|
||
<h3 style="font-size:32px;font-weight:700">백엔드</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">FastAPI · Supabase · Redis · JWT 인증</p>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">STEP 2 중심</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-top:6px solid #2F5D8C;border-radius:12px;padding:28px">
|
||
<h3 style="font-size:32px;font-weight:700">AI · 에이전트</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">LangGraph · 프롬프트 · RAG · 메모리</p>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">STEP 3–4 중심</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-top:6px solid #2F5D8C;border-radius:12px;padding:28px">
|
||
<h3 style="font-size:32px;font-weight:700">프론트 · UX</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">Streamlit · 스트리밍 UI · 사고 과정 대시보드</p>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">STEP 2 · 5</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-top:6px solid #14213D;border-radius:12px;padding:28px">
|
||
<h3 style="font-size:32px;font-weight:700">인프라 · DevOps</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">GitHub · Docker · AWS · CI/CD · 모니터링</p>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D">STEP 4–5 중심</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-top:6px solid #14213D;border-radius:12px;padding:28px">
|
||
<h3 style="font-size:32px;font-weight:700">QA · 보안 · 문서</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">테스트 결과서 · 보안 가드레일 · 기술 문서</p>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D">STEP 3–5</p>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#7A3A10;background:#FBE3CF;padding:16px 24px;border-radius:8px">한 사람이 여러 역할을 겸하고, 역할마다 주 담당 + 보조 담당을 두세요. 모두가 코드에 기여해야 합니다 — 최종 발표에서 개인별 기여도를 평가합니다.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">04 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="leader" style="background:#14213D;color:#F7F6F2;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:40px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#F2A66B;letter-spacing:2px">TEAM LEADER</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">팀장은 신중하게 정합니다</h2>
|
||
</div>
|
||
<div style="display:flex;gap:48px">
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:20px">
|
||
<h3 style="font-size:32px;font-weight:700;color:#F2A66B">팀장이 하는 일</h3>
|
||
<ul style="font-size:28px;color:#E5E9F0;line-height:1.6">
|
||
<li>운영 매니저와의 주 소통 창구 — 일정, 산출물 제출, 지원 요청</li>
|
||
<li>멘토와 멘토링 일정 협의 → 디스코드 팀 채널에 공유</li>
|
||
<li>팀 일정과 대시보드 현황 챙기기</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:20px">
|
||
<h3 style="font-size:32px;font-weight:700;color:#F2A66B">정하는 방법</h3>
|
||
<ul style="font-size:28px;color:#E5E9F0;line-height:1.6">
|
||
<li>가위바위보 금지 — 책임감과 의지가 있는 사람</li>
|
||
<li>정해지면 대시보드 ‘팀원 및 역할’에 ‘팀장’ 표시</li>
|
||
<li>최종 1등 상금 100만 원은 팀장에게 우선 지급</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:28px;color:#14213D;background:#E8833A;padding:18px 28px;border-radius:8px;font-weight:700">팀장 = 모든 일을 혼자 하는 사람이 아니라, 일이 굴러가게 만드는 사람</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#9AA8BF">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#9AA8BF;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">05 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="charter" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">TEAM CHARTER</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">팀 헌장 — 한 장으로 합의하기</h2>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px">
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">01</p>
|
||
<h3 style="font-size:28px;font-weight:700">팀명 · 미션</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">우리가 해결할 문제를 한 문장으로</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">02</p>
|
||
<h3 style="font-size:28px;font-weight:700">목표</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">1/4에 시연할 모습과 개인별 성장 목표</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">03</p>
|
||
<h3 style="font-size:28px;font-weight:700">역할과 책임</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">팀장 · 주 담당 · 보조 담당</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A">04</p>
|
||
<h3 style="font-size:28px;font-weight:700">그라운드 룰</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">소통 · 행동 · 약속의 최소 지침</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">05</p>
|
||
<h3 style="font-size:28px;font-weight:700">소통 방식</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">채널 · 응답 시간 · 공유 위치</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">06</p>
|
||
<h3 style="font-size:28px;font-weight:700">회의 리듬</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">데일리 스탠드업 · 주간 회고</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">07</p>
|
||
<h3 style="font-size:28px;font-weight:700">의사결정</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">합의 → 안 되면 투표 → 팀장 결정</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C">08</p>
|
||
<h3 style="font-size:28px;font-weight:700">갈등 · 이탈 대응</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.4">먼저 팀 안에서, 안 되면 매니저에게</p>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#4A5568;line-height:1.4">GitHub README 또는 팀 드라이브에 저장하고, 전원이 동의 표시를 남깁니다. 프로젝트 중간에 회고하며 고쳐도 됩니다.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">06 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="groundrules" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">GROUND RULES · 예시</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">그라운드 룰 — 거창한 목표 말고 실천할 약속</h2>
|
||
</div>
|
||
<div style="display:flex;gap:24px">
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:16px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:32px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:44px;height:44px" aria-label="Chat"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><h3 style="font-size:34px;font-weight:700">어떻게 소통할까</h3></div>
|
||
<ul style="font-size:26px;color:#14213D;line-height:1.6">
|
||
<li>팀 대화는 디스코드에서</li>
|
||
<li>수업 시간 중 메시지는 2시간 안에 응답</li>
|
||
<li>30분 넘게 막히면 바로 공유</li>
|
||
<li>피드백은 사람이 아니라 코드·문서에</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:16px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:32px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:44px;height:44px" aria-label="Code"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg><h3 style="font-size:34px;font-weight:700">어떻게 행동할까</h3></div>
|
||
<ul style="font-size:26px;color:#14213D;line-height:1.6">
|
||
<li>매일 시작 10분 스탠드업</li>
|
||
<li>main 브랜치 직접 push 금지</li>
|
||
<li>PR은 1명 이상 리뷰 후 머지</li>
|
||
<li>회의 결과는 그날 문서로 남김</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:16px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:32px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:44px;height:44px" aria-label="CheckCircle"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/></svg><h3 style="font-size:34px;font-weight:700">무엇을 지킬까</h3></div>
|
||
<ul style="font-size:26px;color:#14213D;line-height:1.6">
|
||
<li>마감 하루 전 팀 내부 초안 공유</li>
|
||
<li>지각·불참은 미리 공지</li>
|
||
<li>일일 진행 기록은 당일 작성</li>
|
||
<li>맡은 일을 못 하면 빨리 말하기</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#7A3A10;background:#FBE3CF;padding:16px 24px;border-radius:8px">위 내용은 예시입니다. 팀이 직접 토론해서 5~10개로 정하고, 지키지 못했을 때 어떻게 할지도 함께 정하세요.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">07 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="tools" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">SETUP · 오늘 끝내기</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">협업 환경 세팅</h2>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
|
||
<div style="display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:28px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:40px;height:40px" aria-label="Chat"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><h3 style="font-size:32px;font-weight:700">디스코드 팀 채널</h3></div>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">주 소통과 자료 공유 — 매니저도 함께 봅니다. 오픈채팅·개인 메신저는 최소화, 이력서 등 개인정보는 멘토와 1:1로.</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:28px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:40px;height:40px" aria-label="Code"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg><h3 style="font-size:32px;font-weight:700">GitHub</h3></div>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">팀 저장소 · Projects 보드(WBS) · 브랜치 전략(main / develop / feature) · README에 팀 헌장</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:28px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:40px;height:40px" aria-label="Chart"><path d="M3 3v18h18"/><path d="M7 16v-4"/><path d="M12 16V8"/><path d="M17 16v-7"/></svg><h3 style="font-size:32px;font-weight:700">대시보드 팀 시트</h3></div>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">팀 정보 · 팀원 및 역할 · 일일 진행 기록 · 산출물 제출 상태 — 막히면 ‘0팀(작성예시)’ 참고</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:28px">
|
||
<div style="display:flex;gap:16px;align-items:center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#B5541A;width:40px;height:40px" aria-label="Book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg><h3 style="font-size:32px;font-weight:700">팀 드라이브</h3></div>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">기획서 · 발표 자료 공동 작성, 회의록 보관</p>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#14213D;background:#D6E4F5;padding:16px 24px;border-radius:8px"><b>오늘 입력:</b> 통합 대시보드 팀 구성 표 — 주제(미정이면 비워 두기) · 기술 스택 · 팀장 · 팀원 · GitHub 주소</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">08 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="topics" style="background:#EEF1F5;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C;letter-spacing:2px">TOPICS · 제시 주제 중 택1</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">5개 프로젝트 주제</h2>
|
||
</div>
|
||
<table style="font-size:26px;color:#14213D;background:#FFFFFF">
|
||
<tr style="background:#14213D"><th style="width:7%;color:#F7F6F2">#</th><th style="width:53%;color:#F7F6F2">주제</th><th style="width:22%;color:#F7F6F2">도메인</th><th style="width:18%;color:#F7F6F2">핵심 사용자</th></tr>
|
||
<tr><td>1</td><td>멀티 에이전트 기반 장애 예측·자가 진단·자율 복구 시스템</td><td>인프라 관리</td><td>운영자 · SRE</td></tr>
|
||
<tr style="background:#F5F7FA"><td>2</td><td>지능형 업무 협업 및 자율 수행 멀티 에이전트</td><td>통합 비서 · 일정·자산</td><td>직장인 · 팀</td></tr>
|
||
<tr><td>3</td><td>멀티 에이전트 기반 지능형 고객 응대 플랫폼</td><td>금융 상담 · 자산 분석</td><td>금융 고객 · 상담원</td></tr>
|
||
<tr style="background:#F5F7FA"><td>4</td><td>AI 에이전트 기반 웹 정보 수집 및 심층 리서치 보고서 생성</td><td>시장 조사 · 경쟁사 분석</td><td>기획 · 마케팅</td></tr>
|
||
<tr><td>5</td><td>AI 협업 에이전트 기반 SW 전주기 개발 자동화 플랫폼</td><td>코드 생성 · 테스트</td><td>개발팀</td></tr>
|
||
</table>
|
||
<p style="font-size:26px;color:#4A5568;line-height:1.4">모든 주제가 같은 기술 흐름을 거칩니다 — FastAPI + Function Calling → LangGraph 단일 에이전트 → 멀티 에이전트 + Auto-Healing → 스트리밍 UI + AWS 배포</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5B6472">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#5B6472;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">09 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="agents" style="background:#EEF1F5;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C;letter-spacing:2px">TOPICS · 에이전트 구성 예시</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">주제별로 그려 보는 멀티 에이전트</h2>
|
||
</div>
|
||
<table style="font-size:26px;color:#14213D;background:#FFFFFF">
|
||
<tr style="background:#14213D"><th style="width:7%;color:#F7F6F2">#</th><th style="width:58%;color:#F7F6F2">에이전트 협업 흐름 (예시)</th><th style="width:35%;color:#F7F6F2">Auto-Healing 초점 (가이드)</th></tr>
|
||
<tr><td>1</td><td>모니터링 → 진단 → 복구 실행 → 보고</td><td>장애 자동 진단 · 복구</td></tr>
|
||
<tr style="background:#F5F7FA"><td>2</td><td>요청 분석 → 일정 관리 → 자산 관리 → 조율</td><td>일정 충돌 자동 조정</td></tr>
|
||
<tr><td>3</td><td>의도 분류 → 상담 → 자산 분석 → 응답 검수</td><td>상담 오류 자동 교정</td></tr>
|
||
<tr style="background:#F5F7FA"><td>4</td><td>조사 계획 → 웹 수집 → 분석 → 보고서 작성</td><td>데이터 누락 자동 보완</td></tr>
|
||
<tr><td>5</td><td>요구 분석 → 코드 생성 → 테스트 → 리뷰·수정</td><td>코드 오류 자동 수정</td></tr>
|
||
</table>
|
||
<p style="font-size:26px;color:#4A5568;line-height:1.4">주제를 고를 때 “우리 팀은 어떤 장애·오류를 일부러 만들고, 그것이 자동으로 복구되는 장면을 보여줄 수 있는가?”를 꼭 물어보세요.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5B6472">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#5B6472;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">10 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="criteria" style="background:#EEF1F5;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:32px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C;letter-spacing:2px">HOW TO CHOOSE</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">주제 선택 스코어카드</h2>
|
||
</div>
|
||
<table style="font-size:26px;color:#14213D;background:#FFFFFF">
|
||
<tr style="background:#14213D"><th style="width:22%;color:#F7F6F2">기준</th><th style="width:62%;color:#F7F6F2">확인 질문</th><th style="width:16%;color:#F7F6F2">점수 1–5</th></tr>
|
||
<tr><td>관심 · 동기</td><td>9주 동안 팀 전원이 몰입할 수 있는가?</td><td></td></tr>
|
||
<tr style="background:#F5F7FA"><td>데이터 · API</td><td>무료·모의 데이터와 외부 API를 바로 구할 수 있는가?</td><td></td></tr>
|
||
<tr><td>Auto-Healing</td><td>오류를 일부러 만들고 자동 복구를 시연할 수 있는가?</td><td></td></tr>
|
||
<tr style="background:#F5F7FA"><td>시연 가능성</td><td>3~5분 안에 핵심 흐름을 끝까지 보여줄 수 있는가?</td><td></td></tr>
|
||
<tr><td>범위</td><td>우리 인원으로 8주 안에 E2E 완성이 가능한가?</td><td></td></tr>
|
||
<tr style="background:#F5F7FA"><td>포트폴리오</td><td>면접에서 문제와 해법을 설명하기 좋은가?</td><td></td></tr>
|
||
</table>
|
||
<div style="display:flex;gap:20px">
|
||
<p style="flex:1;font-size:26px;color:#F7F6F2;background:#2F5D8C;padding:16px 24px;border-radius:8px">① 각자 점수 → ② 합산 → ③ 상위 2개 토론 → ④ 결정</p>
|
||
<p style="flex:1;font-size:26px;color:#14213D;background:#FFFFFF;border:1px solid #C9CCD1;padding:16px 24px;border-radius:8px">동점이면 데이터·API와 범위 점수가 높은 쪽</p>
|
||
</div>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5B6472">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#5B6472;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">11 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="problem" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">PROBLEM DEFINITION</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">문제 정의 캔버스</h2>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px">
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #E8833A;border-radius:8px;padding:28px">
|
||
<h3 style="font-size:30px;font-weight:700">누가</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">타깃 사용자는 누구이고 어떤 상황에 있는가</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #E8833A;border-radius:8px;padding:28px">
|
||
<h3 style="font-size:30px;font-weight:700">무엇이 문제인가</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">사용자가 겪는 불편과 그 비용(시간·돈·위험)</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #E8833A;border-radius:8px;padding:28px">
|
||
<h3 style="font-size:30px;font-weight:700">지금은 어떻게</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">현재 해결 방식과 그 한계</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:28px">
|
||
<h3 style="font-size:30px;font-weight:700">우리 솔루션</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">에이전트들이 무엇을 대신 해 주는가</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:28px">
|
||
<h3 style="font-size:30px;font-weight:700">왜 멀티 에이전트인가</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">역할 분리와 자동 복구가 왜 필요한가</p>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:28px">
|
||
<h3 style="font-size:30px;font-weight:700">성공 지표</h3>
|
||
<p style="font-size:24px;color:#4A5568;line-height:1.5">무엇을 재면 성공인지 (처리 시간, 복구율 등)</p>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#14213D;background:#D6E4F5;padding:16px 24px;border-radius:8px"><b>한 문장 테스트:</b> “[누가]는 [문제] 때문에 [비용]을 치르고 있다. 우리는 [솔루션]으로 [지표]를 개선한다.”</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">12 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="proposal" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">DELIVERABLE 1 · 11/13 (금)</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">기획서 권장 목차</h2>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px 48px">
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">01</p><p style="flex:1;font-size:30px;line-height:1.4"><b>프로젝트 개요</b> — 배경 · 목표 · 팀 소개</p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">05</p><p style="flex:1;font-size:30px;line-height:1.4"><b>서비스 아키텍처 · 기술 스택</b></p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">02</p><p style="flex:1;font-size:30px;line-height:1.4"><b>문제 정의</b> — 타깃 사용자 · 현재 방식</p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">06</p><p style="flex:1;font-size:30px;line-height:1.4"><b>에이전트 구성 · 협업 흐름</b> (초안)</p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">03</p><p style="flex:1;font-size:30px;line-height:1.4"><b>핵심 시나리오</b> — 사용자 흐름</p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">07</p><p style="flex:1;font-size:30px;line-height:1.4"><b>일정 · 역할 분담</b> — WBS 요약</p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">04</p><p style="flex:1;font-size:30px;line-height:1.4"><b>요구사항 명세</b> — 기능 · 비기능</p></div>
|
||
<div style="display:flex;gap:24px;align-items:center;border-bottom:1px solid #C9CCD1;padding:16px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#B5541A;width:64px">08</p><p style="flex:1;font-size:30px;line-height:1.4"><b>리스크와 대응</b> — 기술 · 일정 · 데이터</p></div>
|
||
</div>
|
||
<p style="font-size:26px;color:#4A5568;line-height:1.4">요구사항 명세(04)는 기획서 안에 반드시 포함됩니다. 발표 평가의 ‘기획’ 항목도 이 문서를 바탕으로 봅니다.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">13 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="requirements" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:32px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">REQUIREMENTS</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">요구사항 명세 쓰는 법</h2>
|
||
</div>
|
||
<div style="display:flex;gap:20px">
|
||
<p style="flex:1;font-size:24px;color:#14213D;background:#FFFFFF;border:1px solid #E2E0D8;padding:14px 20px;border-radius:8px"><b>ID</b> FR(기능) · NFR(비기능)</p>
|
||
<p style="flex:1;font-size:24px;color:#14213D;background:#FFFFFF;border:1px solid #E2E0D8;padding:14px 20px;border-radius:8px"><b>우선순위</b> Must · Should · Could</p>
|
||
<p style="flex:1.3;font-size:24px;color:#14213D;background:#FFFFFF;border:1px solid #E2E0D8;padding:14px 20px;border-radius:8px"><b>수용 기준</b> 완료를 확인하는 방법</p>
|
||
</div>
|
||
<table style="font-size:24px;color:#14213D;background:#FFFFFF">
|
||
<tr style="background:#14213D"><th style="width:11%;color:#F7F6F2">ID</th><th style="width:46%;color:#F7F6F2">요구사항</th><th style="width:12%;color:#F7F6F2">우선</th><th style="width:31%;color:#F7F6F2">수용 기준</th></tr>
|
||
<tr><td>FR-01</td><td>서버 지표 이상 시 진단 에이전트를 자동 호출한다</td><td>Must</td><td>이상 이벤트 → 진단 시작 로그 확인</td></tr>
|
||
<tr style="background:#F5F7FA"><td>FR-02</td><td>진단 결과에 따라 재시작·롤백 등 복구를 실행한다</td><td>Must</td><td>수동 개입 없이 복구 완료 기록</td></tr>
|
||
<tr><td>FR-03</td><td>에이전트 사고 과정을 대시보드에 실시간 표시한다</td><td>Should</td><td>단계별 스트리밍 표시 확인</td></tr>
|
||
<tr style="background:#F5F7FA"><td>NFR-01</td><td>프롬프트 인젝션 입력을 차단한다</td><td>Must</td><td>공격 테스트 케이스 차단 결과 기록</td></tr>
|
||
<tr><td>NFR-02</td><td>JWT로 인증되지 않은 요청을 거부한다</td><td>Must</td><td>미인증 요청 시 401 응답</td></tr>
|
||
</table>
|
||
<p style="font-size:24px;color:#6B7280">예시: 1번 주제(장애 자동 복구) 기준 · 팀 주제에 맞게 다시 작성하세요</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">14 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="architecture" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:32px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">ARCHITECTURE · 초안</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">아키텍처와 기술 스택 그리기</h2>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<div style="display:flex;gap:24px;align-items:center;background:#FFFFFF;border-left:8px solid #E8833A;border-radius:8px;padding:20px 28px">
|
||
<p style="font-size:28px;font-weight:700;width:300px">사용자 인터페이스</p>
|
||
<p style="flex:1;font-size:26px;color:#4A5568">Streamlit 프로토타입 · 스트리밍 대화 UI · 사고 과정 대시보드</p>
|
||
</div>
|
||
<div style="display:flex;gap:24px;align-items:center;background:#FFFFFF;border-left:8px solid #E8833A;border-radius:8px;padding:20px 28px">
|
||
<p style="font-size:28px;font-weight:700;width:300px">API 서버</p>
|
||
<p style="flex:1;font-size:26px;color:#4A5568">FastAPI(비동기) · Pydantic 검증 · JWT 인증</p>
|
||
</div>
|
||
<div style="display:flex;gap:24px;align-items:center;background:#FFFFFF;border-left:8px solid #2F5D8C;border-radius:8px;padding:20px 28px">
|
||
<p style="font-size:28px;font-weight:700;width:300px">에이전트 엔진</p>
|
||
<p style="flex:1;font-size:26px;color:#4A5568">LangGraph · OpenAI Function Calling · MCP · 자기 성찰 · 보안 가드레일</p>
|
||
</div>
|
||
<div style="display:flex;gap:24px;align-items:center;background:#FFFFFF;border-left:8px solid #2F5D8C;border-radius:8px;padding:20px 28px">
|
||
<p style="font-size:28px;font-weight:700;width:300px">데이터 · 메모리</p>
|
||
<p style="flex:1;font-size:26px;color:#4A5568">Supabase · Redis 세션 · Vector DB 장기 기억</p>
|
||
</div>
|
||
<div style="display:flex;gap:24px;align-items:center;background:#14213D;border-radius:8px;padding:20px 28px">
|
||
<p style="font-size:28px;font-weight:700;width:300px;color:#F2A66B">운영 · 배포</p>
|
||
<p style="flex:1;font-size:26px;color:#C9D3E3">Docker · AWS · LangSmith 모니터링 · Auto-Healing 파이프라인</p>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#7A3A10;background:#FBE3CF;padding:16px 24px;border-radius:8px">과정에서 배운 기술 범위 안에서 고르세요. 커리큘럼 밖 기술이 꼭 필요하면 강사·매니저와 먼저 상의합니다.</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">15 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="wbs" style="background:#F7F6F2;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:32px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A;letter-spacing:2px">DELIVERABLE 2 · 11/13 (금)</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">WBS 만드는 법</h2>
|
||
</div>
|
||
<div style="display:flex;gap:48px">
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:16px">
|
||
<h3 style="font-size:32px;font-weight:700">원칙</h3>
|
||
<ul style="font-size:26px;color:#14213D;line-height:1.55">
|
||
<li>STEP → 작업 묶음 → 1~3일 단위 작업으로 쪼개기</li>
|
||
<li>대시보드 산출물 마감일에서 거꾸로 계산</li>
|
||
<li>마감 하루 전 팀 내부 리뷰 일정 포함</li>
|
||
<li>12/8 중간 발표 준비 기간 따로 잡기</li>
|
||
<li>작업마다 담당자 1명 · 버퍼 남기기</li>
|
||
</ul>
|
||
</div>
|
||
<div style="flex:1.2;display:flex;flex-direction:column;gap:16px">
|
||
<h3 style="font-size:32px;font-weight:700">예시 행</h3>
|
||
<table style="font-size:24px;color:#14213D;background:#FFFFFF">
|
||
<tr style="background:#14213D"><th style="width:12%;color:#F7F6F2">ID</th><th style="width:44%;color:#F7F6F2">작업</th><th style="width:20%;color:#F7F6F2">담당</th><th style="width:24%;color:#F7F6F2">기간</th></tr>
|
||
<tr><td>1.1</td><td>팀 헌장 · 그라운드 룰</td><td>전원</td><td>11/10</td></tr>
|
||
<tr style="background:#F5F7FA"><td>1.2</td><td>요구사항 명세</td><td>PM</td><td>11/11–12</td></tr>
|
||
<tr><td>2.1</td><td>API 엔드포인트 설계</td><td>백엔드</td><td>11/16–18</td></tr>
|
||
<tr style="background:#F5F7FA"><td>2.2</td><td>ERD · 인덱스 설계</td><td>백엔드</td><td>11/17–19</td></tr>
|
||
<tr><td>3.1</td><td>상태 전이 그래프 설계</td><td>AI</td><td>11/23–26</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:26px;color:#14213D;background:#D6E4F5;padding:16px 24px;border-radius:8px"><b>제출 형태:</b> GitHub Projects 화면 또는 시트 파일을 글자가 잘 보이게 캡처해서 제출</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#6B7280;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">16 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="today" style="background:#EEF1F5;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C;letter-spacing:2px">TODAY · 진행 순서 예시</p>
|
||
<h2 style="font-size:64px;font-weight:700;line-height:1.15">오늘 워크숍은 이렇게 진행합니다</h2>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column">
|
||
<div style="display:flex;gap:32px;align-items:center;border-top:2px solid #14213D;padding:18px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;font-weight:600;color:#2F5D8C;width:120px">20분</p><p style="flex:1;font-size:30px"><b>자기소개</b> — 강점 · 해 보고 싶은 역할 · 관심 주제</p></div>
|
||
<div style="display:flex;gap:32px;align-items:center;border-top:1px solid #C9CCD1;padding:18px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;font-weight:600;color:#2F5D8C;width:120px">20분</p><p style="flex:1;font-size:30px"><b>팀장 선정 · 역할 분담</b> — 주 담당 + 보조 담당</p></div>
|
||
<div style="display:flex;gap:32px;align-items:center;border-top:1px solid #C9CCD1;padding:18px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;font-weight:600;color:#2F5D8C;width:120px">40분</p><p style="flex:1;font-size:30px"><b>팀 헌장 · 그라운드 룰</b> 작성과 합의</p></div>
|
||
<div style="display:flex;gap:32px;align-items:center;border-top:1px solid #C9CCD1;padding:18px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;font-weight:600;color:#2F5D8C;width:120px">30분</p><p style="flex:1;font-size:30px"><b>협업 환경 세팅</b> — 디스코드 · GitHub · 대시보드 · 드라이브</p></div>
|
||
<div style="display:flex;gap:32px;align-items:center;border-top:1px solid #C9CCD1;padding:18px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;font-weight:600;color:#2F5D8C;width:120px">40분</p><p style="flex:1;font-size:30px"><b>주제 탐색</b> — 5개 주제 검토 · 스코어카드 1차</p></div>
|
||
<div style="display:flex;gap:32px;align-items:center;border-top:1px solid #C9CCD1;border-bottom:1px solid #C9CCD1;padding:18px 0px"><p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:28px;font-weight:600;color:#2F5D8C;width:120px">20분</p><p style="flex:1;font-size:30px"><b>팀별 공유 · Q&A</b> — 팀명 · 팀장 · 후보 주제 발표</p></div>
|
||
</div>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5B6472">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#5B6472;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">17 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="checklist" style="background:#E8833A;color:#14213D;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;gap:36px">
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D;letter-spacing:2px">CHECKLIST · D-3</p>
|
||
<h2 style="font-size:72px;font-weight:900;line-height:1.1">금요일까지 끝낼 것</h2>
|
||
</div>
|
||
<div style="display:flex;gap:28px">
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px">
|
||
<h3 style="font-size:32px;font-weight:700">오늘 (화)</h3>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#F7F6F2;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#14213D;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500">팀장 선정 · 대시보드에 표시</p></div>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#F7F6F2;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#14213D;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500">팀 헌장 · 그라운드 룰 합의</p></div>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#F7F6F2;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#14213D;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500">디스코드 · GitHub · 드라이브 개설</p></div>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#F7F6F2;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#14213D;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500">첫 일일 진행 기록 작성</p></div>
|
||
</div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:14px">
|
||
<h3 style="font-size:32px;font-weight:700">금요일 (11/13)까지</h3>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#14213D;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#F2A66B;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500;color:#F7F6F2">주제 확정 · 대시보드 입력</p></div>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#14213D;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#F2A66B;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500;color:#F7F6F2">기획서 (요구사항 명세 포함) 제출</p></div>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#14213D;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#F2A66B;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500;color:#F7F6F2">WBS 캡처 제출</p></div>
|
||
<div style="display:flex;gap:16px;align-items:center;background:#14213D;border-radius:10px;padding:18px 24px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;color:#F2A66B;width:36px;height:36px" aria-label="Check"><path d="M20 6L9 17l-5-5"/></svg><p style="font-size:26px;font-weight:500;color:#F7F6F2">첫 멘토링 일정 디스코드 공유</p></div>
|
||
</div>
|
||
</div>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#14213D">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#14213D;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">18 / 19</p>
|
||
|
||
</section>
|
||
</div></div><div class="frame"><div class="slide"><section id="closing" style="background:#14213D;color:#F7F6F2;font-family:'Noto Sans KR', Arial, sans-serif;padding:128px 128px 160px;display:flex;flex-direction:column;justify-content:center;gap:48px">
|
||
<h2 style="font-size:96px;font-weight:900;line-height:1.1">좋은 팀이<br>좋은 프로젝트를 만듭니다</h2>
|
||
<p style="font-size:36px;color:#C9D3E3;line-height:1.4">오늘은 코드보다 사람과 약속에 집중하는 날입니다.</p>
|
||
<div style="display:flex;gap:24px">
|
||
<p style="font-size:28px;color:#14213D;background:#E8833A;padding:14px 28px;border-radius:8px;font-weight:700">첫 마감 · 11/13 (금) 기획서 + WBS</p>
|
||
<p style="font-size:28px;color:#F7F6F2;border:2px solid #4A5D80;padding:14px 28px;border-radius:8px">질문은 디스코드 팀 채널로</p>
|
||
</div>
|
||
<p style="font-family:'JetBrains Mono', 'Courier New', monospace;font-size:32px;font-weight:600;color:#F2A66B">Q & A</p>
|
||
<p style="position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#9AA8BF">AIO 1기 최종 프로젝트 · 1주차 킥오프</p>
|
||
<p style="position:absolute;right:128px;bottom:64px;width:200px;font-size:24px;color:#9AA8BF;text-align:right;font-family:'JetBrains Mono', 'Courier New', monospace">19 / 19</p>
|
||
|
||
</section>
|
||
</div></div>
|
||
<div class="progress"></div>
|
||
<div class="nav" aria-label="슬라이드 이동">
|
||
<button id="prev" title="이전 (←)" aria-label="이전 슬라이드">‹</button>
|
||
<span id="count"></span>
|
||
<button id="next" title="다음 (→)" aria-label="다음 슬라이드">›</button>
|
||
<button id="fs" title="전체 화면 (F)" aria-label="전체 화면">⛶</button>
|
||
</div>
|
||
<script>
|
||
const frames = [...document.querySelectorAll('.frame')];
|
||
const n = frames.length;
|
||
let cur = 0;
|
||
function fit() {
|
||
const f = frames[cur];
|
||
f.querySelector('.slide').style.transform = 'scale(' + (f.clientWidth / 1920) + ')';
|
||
}
|
||
function go(i) {
|
||
cur = Math.max(0, Math.min(n - 1, i));
|
||
frames.forEach((f, k) => f.classList.toggle('active', k === cur));
|
||
document.getElementById('count').textContent = (cur + 1) + ' / ' + n;
|
||
document.querySelector('.progress').style.width = ((cur + 1) / n * 100) + '%';
|
||
history.replaceState(null, '', '#' + (cur + 1));
|
||
fit();
|
||
}
|
||
addEventListener('keydown', e => {
|
||
if (e.altKey || e.ctrlKey || e.metaKey) return;
|
||
const k = e.key;
|
||
if (['ArrowRight', 'ArrowDown', 'PageDown', ' ', 'Enter'].includes(k)) { e.preventDefault(); go(cur + (e.shiftKey && k === ' ' ? -1 : 1)); }
|
||
else if (['ArrowLeft', 'ArrowUp', 'PageUp', 'Backspace'].includes(k)) { e.preventDefault(); go(cur - 1); }
|
||
else if (k === 'Home') { e.preventDefault(); go(0); }
|
||
else if (k === 'End') { e.preventDefault(); go(n - 1); }
|
||
else if (k === 'f' || k === 'F') toggleFs();
|
||
});
|
||
function toggleFs() {
|
||
if (document.fullscreenElement) document.exitFullscreen();
|
||
else document.documentElement.requestFullscreen && document.documentElement.requestFullscreen();
|
||
}
|
||
document.getElementById('prev').onclick = () => go(cur - 1);
|
||
document.getElementById('next').onclick = () => go(cur + 1);
|
||
document.getElementById('fs').onclick = toggleFs;
|
||
let tx = null;
|
||
addEventListener('touchstart', e => { tx = e.touches[0].clientX; }, { passive: true });
|
||
addEventListener('touchend', e => {
|
||
if (tx === null) return;
|
||
const dx = e.changedTouches[0].clientX - tx; tx = null;
|
||
if (Math.abs(dx) > 50) go(cur + (dx < 0 ? 1 : -1));
|
||
});
|
||
let hideT;
|
||
addEventListener('mousemove', () => {
|
||
document.body.classList.add('moved'); clearTimeout(hideT);
|
||
hideT = setTimeout(() => document.body.classList.remove('moved'), 1500);
|
||
});
|
||
addEventListener('resize', fit);
|
||
addEventListener('hashchange', () => go((parseInt(location.hash.slice(1)) || 1) - 1));
|
||
go((parseInt(location.hash.slice(1)) || 1) - 1);
|
||
addEventListener('beforeprint', () => document.querySelectorAll('.slide').forEach(s => s.style.transform = 'none'));
|
||
addEventListener('afterprint', () => { frames.forEach(f => f.querySelector('.slide').style.transform = ''); fit(); });
|
||
</script>
|
||
</body>
|
||
</html>
|