2026-11-10 09:03:34 +09:00
<!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 ( 100 vw , calc ( 100 vh * 16 / 9 )); aspect-ratio : 16 / 9 ; position : relative ; overflow : hidden ;
display : none ; }
. frame . active { display : block ; }
. nav { position : fixed ; right : 16 px ; bottom : 12 px ; display : flex ; gap : 8 px ; align-items : center ;
font : 14 px 'JetBrains Mono' , 'Noto Sans CJK KR' , monospace ; color : #C9D3E3 ; opacity : .25 ; transition : opacity .2 s ; }
. nav : hover , body . moved . nav { opacity : .9 ; }
. nav button { background : #2B2F36 ; color : #F7F6F2 ; border : 1 px solid #4A5D80 ; border-radius : 6 px ;
width : 36 px ; height : 32 px ; font-size : 16 px ; cursor : pointer ; }
. nav button : hover { background : #E8833A ; color : #14213D ; }
. progress { position : fixed ; left : 0 ; bottom : 0 ; height : 4 px ; background : #E8833A ; transition : width .2 s ; }
. slide { width : 1920 px ; height : 1080 px ; transform-origin : 0 0 ; position : absolute ; left : 0 ; top : 0 ; }
. slide > section { width : 1920 px ; height : 1080 px ; 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.3 em ; }
table { border-collapse : collapse ; width : 100 % ; }
th , td { padding : 0.35 em 0.6 em ; text-align : left ; border-bottom : 1 px 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 : 1920 px ; height : 1080 px ; 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 (화) – </ 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– </ 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– </ 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– </ 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– </ 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– </ 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– </ 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 >
2026-11-10 15:20:22 +09:00
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "topics" style = "display:flex; flex-direction:column; gap:36px; padding:128px 128px 160px; background:#eef1f5" >
< div style = "display:flex; flex-direction:column; gap:12px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace; font-size:24px; letter-spacing:2px; color:#2f5d8c" > TOPICS · 제시 주제 중 택1</ p >
< h2 style = "font-family:'Noto Sans KR', Arial, sans-serif; font-size:64px; font-weight:700; line-height:1.15; color:#14213d" > 5개 프로젝트 주제</ h2 >
</ div >
< table style = "font-family:'Noto Sans KR', Arial, sans-serif; font-size:26px; color:#14213d; background:#ffffff" >
< tr style = "background:#14213d" >< th style = "width:6%; color:#f7f6f2" > #</ th >< th style = "width:44%; color:#f7f6f2" > 주제</ th >< th style = "width:33%; color:#f7f6f2" > 도메인 (노션 STEP 2~5)</ th >< th style = "width:17%; 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 > 코드 생성 · SW 개발 협업 · 테스트 자동화</ td >< td > 개발팀</ td ></ tr >
</ table >
< div style = "display:flex; gap:20px" >
< p style = "flex:1; font-family:'Noto Sans KR', Arial, sans-serif; font-size:26px; line-height:1.4; color:#f7f6f2; background:#2f5d8c; padding:16px 24px; border-radius:8px" >< b > 도메인</ b > 은 노션 가이드 기준 — 그 안에서 범위를 좁히는 것은 가능</ p >
< p style = "flex:1; font-family:'Noto Sans KR', Arial, sans-serif; font-size:26px; line-height:1.4; color:#7a3a10; background:#fbe3cf; padding:16px 24px; border-radius:8px" >< b > 핵심 사용자</ b > 는 팀이 직접 정합니다 — 12p 문제 정의 캔버스의 ‘누가’</ p >
</ div >
< p style = "position:absolute; bottom:64px; left:128px; width:1200px; font-family:'Noto Sans KR', Arial, sans-serif; font-size:24px; color:#5b6472" > AIO 1기 최종 프로젝트 · 1주차 킥오프</ p >
< p style = "position:absolute; right:128px; bottom:64px; width:200px; font-family:'JetBrains Mono', 'Courier New', monospace; font-size:24px; text-align:right; color:#5b6472" > 09 / 19</ p >
2026-11-10 09:03:34 +09:00
</ 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– </ 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– </ td ></ tr >
< tr >< td > 2.1</ td >< td > API 엔드포인트 설계</ td >< td > 백엔드</ td >< td > 11/16– </ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 2.2</ td >< td > ERD · 인덱스 설계</ td >< td > 백엔드</ td >< td > 11/17– </ td ></ tr >
< tr >< td > 3.1</ td >< td > 상태 전이 그래프 설계</ td >< td > AI</ td >< td > 11/23– </ 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 >
