2026-11-09 11:04:51 +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기 최종 프로젝트 가이드</ 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 ; }
2026-11-10 08:38:47 +09:00
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 ; }
2026-11-09 11:04:51 +09:00
. 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 {
2026-11-10 08:38:47 +09:00
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 ; }
2026-11-09 11:04:51 +09:00
. 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</ 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" > 2026.11.10 – </ p >
< p style = "font-size:28px;color:#F7F6F2;border:2px solid #4A5D80;padding:12px 24px;border-radius:8px" > 수업 38일 · 5단계 · 중간/최종 발표</ p >
</ div >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "glance" 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" > OVERVIEW</ 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:28px" >
< div style = "display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:36px" >
< p style = "font-size:72px;font-weight:900;line-height:1.1;color:#14213D" > 38일</ p >
< p style = "font-size:28px;color:#4A5568;line-height:1.4" > 수업일 · 11/10(화) ~ 1/4(월), 총 9주</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:36px" >
< p style = "font-size:72px;font-weight:900;line-height:1.1;color:#14213D" > 5단계</ p >
< p style = "font-size:28px;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:16px;padding:36px" >
< p style = "font-size:72px;font-weight:900;line-height:1.1;color:#14213D" > 16건</ p >
< p style = "font-size:28px;color:#4A5568;line-height:1.4" > 팀별 산출물 · 평가 12 · 발표 2 · 제출 2</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:8px;background:#14213D;border-radius:16px;padding:36px" >
< p style = "font-size:72px;font-weight:900;line-height:1.1;color:#F2A66B" > 12/8</ p >
< p style = "font-size:28px;color:#C9D3E3;line-height:1.4" > 중간 발표 (화) · 5주차</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:8px;background:#14213D;border-radius:16px;padding:36px" >
< p style = "font-size:72px;font-weight:900;line-height:1.1;color:#F2A66B" > 1/4</ p >
< p style = "font-size:28px;color:#C9D3E3;line-height:1.4" > 최종 발표 (월) · 소스코드·시연영상 제출</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:36px" >
< p style = "font-size:72px;font-weight:900;line-height:1.1;color:#14213D" > 20시간</ p >
< p style = "font-size:28px;color:#4A5568;line-height:1.4" > 팀당 멘토링 상한 (온·오프라인 합산)</ p >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "topics" 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" > TEAMS & TOPICS</ p >
< h2 style = "font-size:64px;font-weight:700;line-height:1.15" > 팀별 프로젝트 주제</ h2 >
</ div >
< table style = "font-size:28px;color:#14213D;background:#FFFFFF;border-radius:12px" >
< tr style = "background:#14213D" >< th style = "width:10%;color:#F7F6F2" > 팀</ th >< th style = "width:52%;color:#F7F6F2" > 프로젝트 주제</ th >< th style = "width:38%;color:#F7F6F2" > Auto-Healing 초점 (STEP 4)</ th ></ tr >
< tr >< td > 1팀</ td >< td > 멀티 에이전트 기반 장애 예측·자가 진단·자율 복구 시스템</ td >< td > 장애 자동 진단·복구</ td ></ tr >
< tr style = "background:#F1EFE8" >< td > 2팀</ td >< td > 지능형 업무 협업 및 자율 수행 멀티 에이전트 (일정·자산 관리)</ td >< td > 일정 충돌 자동 조정</ td ></ tr >
< tr >< td > 3팀</ td >< td > 멀티 에이전트 기반 지능형 고객 응대 플랫폼 (금융 상담)</ td >< td > 상담 오류 자동 교정</ td ></ tr >
< tr style = "background:#F1EFE8" >< td > 4팀</ td >< td > AI 에이전트 기반 웹 정보 수집 및 심층 리서치 보고서 생성</ td >< td > 데이터 누락 자동 보완</ td ></ tr >
< tr >< td > 5팀</ td >< td > AI 협업 에이전트 기반 SW 전주기 개발 자동화 플랫폼</ td >< td > 코드 오류 자동 수정</ td ></ tr >
</ table >
< p style = "font-size:26px;color:#7A3A10;background:#FBE3CF;padding:16px 24px;border-radius:8px" > STEP 1에서 제시 주제 중 하나를 고르고, 정해지면 대시보드 팀 구성 표에 주제와 세부 주제를 입력하세요.</ p >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "roadmap" 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" > ROADMAP · 9 WEEKS</ p >
< h2 style = "font-size:64px;font-weight:700;line-height:1.15" > 5단계 로드맵</ h2 >
</ div >
< div style = "display:flex;gap:20px" >
< div style = "flex:1;display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:8px solid #E8833A;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A" > STEP 1</ p >
< h3 style = "font-size:32px;font-weight:700;line-height:1.25" > 기획·설계</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 1주차< br > 11/10 – </ p >
< p style = "font-size:24px;color:#14213D;line-height:1.4" > 요구사항 · 아키텍처 · WBS</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:8px solid #E8833A;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A" > STEP 2</ p >
< h3 style = "font-size:32px;font-weight:700;line-height:1.25" > API · Function Calling 엔진</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 2주차< br > 11/16 – </ p >
< p style = "font-size:24px;color:#14213D;line-height:1.4" > FastAPI · Supabase · Redis</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:8px solid #2F5D8C;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C" > STEP 3</ p >
< h3 style = "font-size:32px;font-weight:700;line-height:1.25" > 단일 에이전트 추론</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 3– < br > 11/23 – </ p >
< p style = "font-size:24px;color:#14213D;line-height:1.4" > LangGraph · 메모리 · 자기 성찰</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:8px solid #2F5D8C;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C" > STEP 4</ p >
< h3 style = "font-size:32px;font-weight:700;line-height:1.25" > 멀티 에이전트 · Auto-Healing</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 5– < br > 12/7 – </ p >
< p style = "font-size:24px;color:#14213D;line-height:1.4" > 협업 엔진 · MCP · 보안 가드레일</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:8px solid #14213D;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D" > STEP 5</ p >
< h3 style = "font-size:32px;font-weight:700;line-height:1.25" > 대화형 앱 · AWS 배포</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 7– < br > 12/21 – </ p >
< p style = "font-size:24px;color:#14213D;line-height:1.4" > 스트리밍 UI · Docker · 통합 테스트</ 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 (화) 중간 발표 — STEP 4 진행 중</ p >
< p style = "flex:1;font-size:28px;font-weight:700;color:#14213D;background:#E8833A;padding:16px 24px;border-radius:8px" > 1/4 (월) 최종 발표 · 소스코드 · 시연영상</ p >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "step1" 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" > STEP 1 · 1주차 · 11/10 – </ 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.2;display:flex;flex-direction:column;gap:20px" >
< h3 style = "font-size:32px;font-weight:700" > 목표 · 전 팀 공통</ h3 >
< p style = "font-size:28px;color:#4A5568;line-height:1.5" > 팀 빌딩과 주제 구체화, 요구사항 정의, 서비스 구조와 기술 스택 설계</ p >
< h3 style = "font-size:32px;font-weight:700" > 세부 수행</ h3 >
< ul style = "font-size:28px;color:#14213D;line-height:1.6" >
< li > 팀 구성 및 주제 선정 (제시 주제 중 택1)</ li >
< li > 요구사항 정의 및 기능 명세 작성</ li >
< li > 서비스 아키텍처 · 기술 스택 설계</ li >
< li > WBS 수립 및 일정 계획</ li >
</ ul >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:20px" >
< h3 style = "font-size:32px;font-weight:700" > 산출물 · 마감 11/13 (금)</ h3 >
< div style = "display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border-left:6px solid #E8833A;border-radius:8px;padding:28px" >
< p style = "font-size:28px;font-weight:700" > 기획서 (요구사항 명세 포함)</ p >
< 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-left:6px solid #E8833A;border-radius:8px;padding:28px" >
< p style = "font-size:28px;font-weight:700" > WBS</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > GitHub 프로젝트 화면 또는 시트를 글자가 잘 보이게 캡처해 제출</ p >
</ div >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 노션에 STEP 1 전용 평가표는 없음 — 중간 발표 ‘기획’ 항목에서 다시 평가됩니다.</ p >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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" > 05 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "step2" 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" > STEP 2 · 2주차 · 11/16 – </ p >
< h2 style = "font-size:60px;font-weight:700;line-height:1.15" > 웹 서비스 기초 · Function Calling 엔진</ h2 >
</ div >
< div style = "display:flex;gap:48px" >
< div style = "flex:1.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 > FastAPI 비동기 API 서버 설계</ li >
< li > Pydantic 유효성 검증 · RESTful API 설계</ li >
< li > Supabase 저장 · CRUD 구조</ li >
< li > Redis 세션 · JWT 인증·권한 구조</ li >
< li > OpenAI Function Calling · Tool Use 외부 API 호출</ li >
< li > Streamlit 프로토타입 · 인터페이스</ li >
< li > Git/GitHub 버전 관리 · 협업 환경</ li >
</ ul >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:20px" >
< h3 style = "font-size:32px;font-weight:700" > 산출물 · 평가 포인트</ h3 >
< div style = "display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #E8833A;border-radius:8px;padding:28px" >
< p style = "font-size:28px;font-weight:700" > API 설계 문서</ p >
< ul style = "font-size:24px;color:#4A5568;line-height:1.5" >
< li > 엔드포인트 규칙의 명확성·일관성</ li >
< li > 데이터 모델과 입력 검증 규칙</ li >
< li > Function Calling 호출 흐름의 타당성</ li >
</ ul >
</ div >
< div style = "display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #E8833A;border-radius:8px;padding:28px" >
< p style = "font-size:28px;font-weight:700" > DB 스키마 설계서</ p >
< ul style = "font-size:24px;color:#4A5568;line-height:1.5" >
< li > 정규화된 ERD와 테이블 관계</ li >
< li > Supabase·Redis 세션, JWT 인증 구조</ li >
< li > 인덱스 전략과 쿼리 최적화</ li >
</ ul >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "step3" 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:#2F5D8C;letter-spacing:2px" > STEP 3 · 3– – </ p >
< h2 style = "font-size:60px;font-weight:700;line-height:1.15" > LangGraph 단일 에이전트 추론·오케스트레이션</ h2 >
</ div >
< div style = "display:flex;gap:48px" >
< div style = "flex:1.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 > CoT/ReAct 프롬프트 · Structured Output 제어</ li >
< li > Function Calling 다중 도구 선택·호출</ li >
< li > 임베딩 · Vector DB 설계·구축</ li >
< li > 단기(Session)·장기 기억 하이브리드 메모리</ li >
< li > 상태 전이 그래프 · 대화 흐름 영속성</ li >
< li > 자기 성찰(Self-reflection) 로직</ li >
< li > LangSmith 디버깅·평가·모니터링</ li >
</ ul >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:20px" >
< h3 style = "font-size:32px;font-weight:700" > 산출물 · 평가 포인트</ h3 >
< div style = "display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:28px" >
< p style = "font-size:28px;font-weight:700" > 상태 전이 그래프 설계서 · 11/27</ p >
< ul style = "font-size:24px;color:#4A5568;line-height:1.5" >
< li > 상태 노드·전이 조건의 완전성</ li >
< li > CoT/ReAct와 그래프 흐름의 정합성</ li >
< li > 모듈화로 확장 대응</ li >
</ ul >
</ div >
< div style = "display:flex;flex-direction:column;gap:10px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:28px" >
< p style = "font-size:28px;font-weight:700" > 자기 성찰 테스트 결과서 · 12/4</ p >
< ul style = "font-size:24px;color:#4A5568;line-height:1.5" >
< li > 오류 탐지 시 보정·재시도 루프</ li >
< li > 사고 궤적과 최종 답의 인과관계</ li >
< li > 반복 종료 조건 · 토큰 비용 통제</ li >
</ ul >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "step4" 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:#2F5D8C;letter-spacing:2px" > STEP 4 · 5– – </ p >
< h2 style = "font-size:60px;font-weight:700;line-height:1.15" > 멀티 에이전트 협업 엔진 · Auto-Healing</ h2 >
</ div >
< div style = "display:flex;gap:48px" >
< div style = "flex:1.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.5" >
< li > 역할 기반 에이전트 분리 · 업무 인계 구조</ li >
< li > 중앙 제어형 · 분산 협업 작업 분배</ li >
< li > 상태 기반 데이터 흐름 · 컨텍스트 전달 (MCP 등)</ li >
< li > AIPP · n8n 노코드 멀티 에이전트 워크플로우</ li >
< li > 컨테이너 패키징 · 서버리스 배포</ li >
< li > 장애 유형별 Auto-Healing 복구 파이프라인</ li >
< li > 프롬프트 인젝션 방어 · 권한 제어 · 응답 필터링</ li >
</ ul >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:16px" >
< h3 style = "font-size:32px;font-weight:700" > 산출물 · 평가 포인트</ h3 >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:20px 24px" >
< p style = "font-size:26px;font-weight:700" > 협업 아키텍처 설계서 · 12/11</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 역할 분리와 인계 논리 · MCP 컨텍스트 전달 · 메시지 실패·데드락 예외 처리</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:20px 24px" >
< p style = "font-size:26px;font-weight:700" > AI 보안 가드레일 설계 · 12/18</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 인젝션 방어(입력 필터·샌드박스) · 최소 권한 원칙 · 유해 응답 차단</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:20px 24px" >
< p style = "font-size:26px;font-weight:700" > Auto-Healing 결과서 · 12/18</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 네트워크·API·LLM 장애별 자동 복구 시연 · 복구 성공률·평균 복구 시간 제시</ p >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "step5" 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:#14213D;letter-spacing:2px" > STEP 5 · 7– – </ p >
< h2 style = "font-size:60px;font-weight:700;line-height:1.15" > 대화형 AI 앱 최적화 · 실서비스 배포</ h2 >
</ div >
< div style = "display:flex;gap:48px" >
< div style = "flex:1.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.5" >
< li > 시나리오·서비스 기획, 에이전트 협업 흐름도</ li >
< li > 외부 API 브릿지 · 노드 간 오케스트레이션 최적화</ li >
< li > LangGraph 협업 엔진 완성 · 백엔드 연동</ li >
< li > 스트리밍 UI · 에이전트 사고 과정 대시보드</ li >
< li > 사용자 피드백·로그 기반 UX 개선</ li >
< li > AWS/Docker 컨테이너 배포</ li >
< li > 통합 테스트 · 최종 시연회</ li >
</ ul >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:16px" >
< h3 style = "font-size:32px;font-weight:700" > 산출물 · 평가 포인트</ h3 >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #14213D;border-radius:8px;padding:20px 24px" >
< p style = "font-size:26px;font-weight:700" > 대화형 AI 웹 앱 · 12/24 · 배포 URL</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 스트리밍 응답·UI 완성도 · 사고 과정 가시화 · 무중단·오토스케일링</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #14213D;border-radius:8px;padding:20px 24px" >
< p style = "font-size:26px;font-weight:700" > 통합 테스트 결과서 · 12/31*</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 주요 시나리오 E2E 결과 기록 · 엣지 케이스·결함 재검증</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #14213D;border-radius:8px;padding:20px 24px" >
< p style = "font-size:26px;font-weight:700" > 배포 아키텍처 설계도 · 12/31*</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > AWS 서비스·컨테이너 구성도 · 부하·비용·운영 대비 배포 방식 적정성</ p >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > * 확정 마감일은 대시보드 일정을 확인하세요</ 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" > 09 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "deadlines" 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" > DEADLINES</ p >
< h2 style = "font-size:64px;font-weight:700;line-height:1.15" > 산출물 마감 일정</ h2 >
</ div >
< table style = "font-size:24px;color:#14213D;background:#FFFFFF" >
< tr style = "background:#14213D" >< th style = "width:15%;color:#F7F6F2" > 마감</ th >< th style = "width:9%;color:#F7F6F2" > 주차</ th >< th style = "width:56%;color:#F7F6F2" > 산출물</ th >< th style = "width:20%;color:#F7F6F2" > 형태</ th ></ tr >
< tr >< td > 11/13 (금)</ td >< td > 1</ td >< td > 기획서(요구사항 명세 포함) · WBS</ td >< td > 문서</ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 11/20 (금)</ td >< td > 2</ td >< td > API 설계 문서 · DB 스키마 설계서</ td >< td > 문서</ td ></ tr >
< tr >< td > 11/27 (금)</ td >< td > 3</ td >< td > 단일 에이전트 상태 전이 그래프 설계서</ td >< td > 문서</ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 12/4 (금)</ td >< td > 4</ td >< td > 자기 성찰 로직 테스트 결과서</ td >< td > 문서</ td ></ tr >
< tr style = "background:#FBE3CF" >< td > 12/8 (화)</ td >< td > 5</ td >< td > 중간 발표 PT 자료</ td >< td > 발표 평가</ td ></ tr >
< tr >< td > 12/11 (금)</ td >< td > 5</ td >< td > 멀티 에이전트 협업 아키텍처 설계서</ td >< td > 문서</ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 12/18 (금)</ td >< td > 6</ td >< td > AI 보안 가드레일 설계 문서 · Auto-Healing 구현 결과서</ td >< td > 문서</ td ></ tr >
< tr >< td > 12/24 (목)</ td >< td > 7</ td >< td > 대화형 AI 웹 애플리케이션</ td >< td > 배포 URL</ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 12/31 (목)*</ td >< td > 8</ td >< td > 통합 테스트 결과서 · 배포 아키텍처 설계도</ td >< td > 문서</ td ></ tr >
< tr style = "background:#FBE3CF" >< td > 1/4 (월)</ td >< td > 9</ td >< td > 최종 발표 PT · 소스코드 · 시연영상(3–5분)</ td >< td > 발표·GitHub·MP4</ td ></ tr >
</ table >
< p style = "position:absolute;left:128px;bottom:64px;width:1300px;font-size:24px;color:#5B6472" > * 8주차 마감 기준 표기 — 확정 마감일은 대시보드 일정을 확인하세요</ 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "presentation" 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" > PRESENTATION CRITERIA</ 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:14%;color:#F7F6F2" > 영역</ th >< th style = "width:43%;color:#F7F6F2" > 중간 발표 · 12/8</ th >< th style = "width:43%;color:#F7F6F2" > 최종 발표 · 1/4 (추가로 보는 것)</ th ></ tr >
< tr >< td > 기획</ td >< td > 문제 정의·솔루션의 논리, 현실적인 범위·일정, 요구사항이 명세에 반영됐는가</ td >< td > 로드맵·마일스톤 구체성, 사용자 피드백을 수집해 반영한 사례</ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 구현</ td >< td > 명세 대비 구현 범위, Git 브랜치·협업 체계, 핵심 기능 1개 이상 안정 시연</ td >< td > E2E 통합 완성도, 엣지 케이스 오류 처리, 중단 없는 데모</ td ></ tr >
< tr >< td > 기술</ td >< td > 스택 적합성·최신성, 계획 대비 성취도, 확장을 고려한 아키텍처</ td >< td > 프로덕션급 확장성, CI/CD·모니터링·장애 대응, 기술 문서화</ td ></ tr >
< tr style = "background:#F5F7FA" >< td > 발표역량</ td >< td > 기승전결 구성·시간 관리, 기술 Q& A 대응력</ 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기 최종 프로젝트 · 수강생 안내</ 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "mentoring" 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" > MENTORING</ 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.15;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 > 팀장이 멘토와 일정을 잡고 디스코드 팀 채널에 공유</ li >
< li > 질문과 자료는 멘토링 전에 디스코드에 미리 올리기</ li >
< li > 멘토 피드백을 반영한 내용은 대시보드 일일 진행 기록에 남기기</ li >
< li > 시작 시각에 맞춰 모여 증빙 사진 촬영에 협조</ li >
</ ul >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 멘토는 정답 대신 실무 경험으로 방향을 제시하고, 과정에서 배운 기술 범위 안에서 지도합니다. 커리큘럼 밖 기술이 필요하면 강사·매니저와 먼저 상의하세요.</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:16px" >
< div style = "display:flex;flex-direction:column;gap:6px;background:#14213D;border-radius:12px;padding:24px 28px" >
< p style = "font-size:48px;font-weight:900;color:#F2A66B;line-height:1.1" > 팀당 20시간</ p >
< p style = "font-size:24px;color:#C9D3E3;line-height:1.4" > 온·오프라인 합산 상한, 오프라인 권장 · 팀 단위와 1:1 모두 가능</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px 28px" >
< p style = "font-size:28px;font-weight:700" > 무엇을 물어볼까</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 기획서 작성 · 기술 가이드 · 일정 관리 · 산출물 피드백 · 이력서·포트폴리오·GitHub</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:24px 28px" >
< p style = "font-size:28px;font-weight:700" > 개인정보는 1:1로</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 이력서 등은 디스코드에 올리지 말고 멘토와 이메일 등으로 주고받기</ p >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "teamrules" 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 OPERATIONS</ 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:28px" >
< div style = "display:flex;flex-direction:column;gap:12px;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: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:26px;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: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:40px;height:40px" aria-label = "Users" >< path d = "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />< circle cx = "9" cy = "7" r = "4" />< path d = "M23 21v-2a4 4 0 0 0-3-3.87" />< path d = "M16 3.13a4 4 0 0 1 0 7.75" /></ svg >< h3 style = "font-size:32px;font-weight:700" > 팀장 선정</ h3 ></ div >
< p style = "font-size:26px;color:#4A5568;line-height:1.5" > 운영 매니저와의 주 소통 창구(일정·제출·지원 요청). 가위바위보 말고 책임감 있는 사람으로. 정해지면 팀 시트 역할을 ‘팀장’으로.</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:12px;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:40px;height:40px" aria-label = "CheckCircle" >< circle cx = "12" cy = "12" r = "10" />< path d = "M8 12l3 3 5-6" /></ svg >< h3 style = "font-size:32px;font-weight:700" > 그라운드 룰</ h3 ></ div >
< p style = "font-size:26px;color:#4A5568;line-height:1.5" > 시작 전에 팀이 합의하는 최소 행동 지침. 거창한 목표 대신 어떻게 소통하고 행동하며 무엇을 지킬지 실천 위주로.</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:12px;background:#14213D;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:#F2A66B;width:40px;height:40px" aria-label = "Star" >< path d = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z" /></ svg >< h3 style = "font-size:32px;font-weight:700;color:#F7F6F2" > 리워드</ h3 ></ div >
< p style = "font-size:26px;color:#C9D3E3;line-height:1.5" > 최종 발표 1등 팀 상금 100만 원. 심사위원 평가로 선정하며 상금은 팀장에게 우선 지급.</ p >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "dashboard" 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" > DASHBOARD</ p >
< h2 style = "font-size:64px;font-weight:700;line-height:1.15" > 프로젝트 대시보드 구조</ h2 >
</ div >
< div style = "display:flex;gap:28px;align-items:center" >
< div style = "flex:1;display:flex;flex-direction:column;gap:14px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:16px;padding:32px" >
< h3 style = "font-size:32px;font-weight:700" > 통합 대시보드 · 전체 현황</ h3 >
< ul style = "font-size:24px;color:#4A5568;line-height:1.55" >
< li > 프로젝트 기간 · 중간·최종 발표일</ li >
< li > 다음 마감과 전체 제출률</ li >
< li > 팀 구성 — 주제 · 기술 스택 · 팀장·팀원 · 멘토 · GitHub</ li >
< li > 단계별 산출물 일정 (■ 작업 · ★ 마감)</ li >
</ ul >
</ div >
< svg viewBox = "0 0 10 5" preserveAspectRatio = "none" style = "flex:none;width:72px;height:40px" aria-hidden = "true" >< polygon points = "0,1.5 6,1.5 6,0 10,2.5 6,5 6,3.5 0,3.5" fill = "#E8833A" /></ svg >
< div style = "flex:1.1;display:flex;flex-direction:column;gap:14px" >
< div style = "display:flex;flex-direction:column;gap:10px;background:#14213D;border-radius:16px;padding:28px" >
< h3 style = "font-size:32px;font-weight:700;color:#F7F6F2" > 우리 팀 시트 · 팀이 직접 작성</ h3 >
< ul style = "font-size:24px;color:#C9D3E3;line-height:1.55" >
< li > 팀 정보 · 팀원 및 역할 (팀장 표시)</ li >
< li > 진행 현황 — 진행 일차 · 이번 주 · 제출 · 보완 요청</ li >
< li > 산출물 제출 상태</ li >
< li > 일일 진행 기록</ li >
< li > 강사·매니저 피드백 확인</ li >
</ ul >
</ div >
< p style = "font-size:24px;color:#4A5568;background:#EEF1F5;padding:16px 24px;border-radius:8px" > 막히면 ‘0팀(작성예시)’ 시트를 참고하세요</ p >
</ div >
</ div >
< div style = "display:flex;gap:16px" >
< p style = "font-size:24px;color:#14213D;background:#FFFFFF;border:1px solid #C9CCD1;padding:10px 20px;border-radius:8px" > 팀 작성 칸 · 우리가 입력</ p >
< p style = "font-size:24px;color:#14213D;background:#E3E3E0;padding:10px 20px;border-radius:8px" > 회색 · 자동 계산</ p >
< p style = "font-size:24px;color:#14213D;background:#D6E4F5;padding:10px 20px;border-radius:8px" > 파랑 · 강사·매니저 의견</ p >
< p style = "font-size:24px;color:#14213D;background:#FBE9A6;padding:10px 20px;border-radius:8px" > 노랑 · 운영진 입력</ p >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "dashrules" 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" > DASHBOARD RULES</ 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:40px;align-items:center;border-top:2px solid #14213D;padding:28px 0px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:44px;font-weight:600;color:#B5541A;width:96px" > 01</ p >
< p style = "flex:1;font-size:32px;line-height:1.4" >< b > 우리 팀 시트의 팀 작성 칸만 입력</ b > — 회색(자동 계산)과 파란 칸(강사·매니저 의견)은 수정하지 않습니다.</ p >
</ div >
< div style = "display:flex;gap:40px;align-items:center;border-top:1px solid #C9CCD1;padding:28px 0px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:44px;font-weight:600;color:#B5541A;width:96px" > 02</ p >
< p style = "flex:1;font-size:32px;line-height:1.4" >< b > 행을 넣거나 지우지 않기</ b > — 산출물 표는 통합 대시보드와 행 순서로 연결되어 있습니다.</ p >
</ div >
< div style = "display:flex;gap:40px;align-items:center;border-top:1px solid #C9CCD1;padding:28px 0px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:44px;font-weight:600;color:#B5541A;width:96px" > 03</ p >
< p style = "flex:1;font-size:32px;line-height:1.4" >< b > 마감일은 대시보드가 기준</ b > — 일정이 바뀌면 팀 시트 마감일도 자동으로 바뀝니다.</ p >
</ div >
< div style = "display:flex;gap:40px;align-items:center;border-top:1px solid #C9CCD1;border-bottom:1px solid #C9CCD1;padding:28px 0px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:44px;font-weight:600;color:#B5541A;width:96px" > 04</ p >
< p style = "flex:1;font-size:32px;line-height:1.4" >< b > 파란 칸 피드백 확인</ b > — 반영한 내용은 일일 진행 기록에 남깁니다.</ p >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "routine" 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" > WEEKLY ROUTINE · 추천</ 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:24px" >
< div style = "display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:6px solid #2F5D8C;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C" > 월요일</ p >
< h3 style = "font-size:30px;font-weight:700;line-height:1.3" > 이번 주 계획</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 대시보드에서 이번 주 마감 산출물을 확인하고 역할을 나누기</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:6px solid #2F5D8C;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#2F5D8C" > 매일</ p >
< h3 style = "font-size:30px;font-weight:700;line-height:1.3" > 일일 기록</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 한 일 · 막힌 점 · 멘토 피드백 반영 내용을 팀 시트에 기록</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:6px solid #E8833A;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#B5541A" > 마감일</ p >
< h3 style = "font-size:30px;font-weight:700;line-height:1.3" > 제출</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 산출물을 제출하고 팀 시트의 제출 상태를 갱신</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:12px;background:#FFFFFF;border-top:6px solid #14213D;border-radius:12px;padding:28px" >
< p style = "font-family:'JetBrains Mono', 'Courier New', monospace;font-size:24px;color:#14213D" > 금요일</ p >
< h3 style = "font-size:30px;font-weight:700;line-height:1.3" > 돌아보기</ h3 >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 파란 칸 피드백과 보완 요청을 확인하고 다음 주에 반영</ p >
</ div >
</ div >
< 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기 최종 프로젝트 · 수강생 안내</ 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" > 16 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "issues" 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" > REMEMBER</ p >
< h2 style = "font-size:64px;font-weight:700;line-height:1.15" > 꼭 기억할 것</ h2 >
</ div >
< div style = "display:flex;flex-direction:column;gap:24px" >
< div style = "display:flex;gap:28px;align-items:center;background:#FFFFFF;border-left:8px solid #E8833A;border-radius:8px;padding:28px 32px" >
< 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:48px;height:48px" aria-label = "Lock" >< rect x = "3" y = "11" width = "18" height = "11" rx = "2" />< path d = "M7 11V7a5 5 0 0 1 10 0v4" /></ svg >
< div style = "flex:1;display:flex;flex-direction:column;gap:6px" >
< h3 style = "font-size:32px;font-weight:700" > 배운 기술 범위 안에서</ h3 >
< p style = "font-size:26px;color:#4A5568;line-height:1.4" > 커리큘럼 밖 기술은 교육 규정상 권장되지 않습니다 — 꼭 필요하면 강사·매니저와 먼저 상의</ p >
</ div >
</ div >
< div style = "display:flex;gap:28px;align-items:center;background:#FFFFFF;border-left:8px solid #E8833A;border-radius:8px;padding:28px 32px" >
< 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:48px;height:48px" 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 >
< div style = "flex:1;display:flex;flex-direction:column;gap:6px" >
< h3 style = "font-size:32px;font-weight:700" > 필수 산출물이 먼저</ h3 >
< p style = "font-size:26px;color:#4A5568;line-height:1.4" > UI/UX 설계서, RAG 검색 품질 평가 결과서 같은 추가 산출물은 운영 매니저와 협의 후 진행</ p >
</ div >
</ div >
< div style = "display:flex;gap:28px;align-items:center;background:#FFFFFF;border-left:8px solid #2F5D8C;border-radius:8px;padding:28px 32px" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" style = "flex:none;color:#2F5D8C;width:48px;height:48px" aria-label = "Users" >< path d = "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />< circle cx = "9" cy = "7" r = "4" />< path d = "M23 21v-2a4 4 0 0 0-3-3.87" />< path d = "M16 3.13a4 4 0 0 1 0 7.75" /></ svg >
< div style = "flex:1;display:flex;flex-direction:column;gap:6px" >
< h3 style = "font-size:32px;font-weight:700" > 기여는 기록으로 남기기</ h3 >
< p style = "font-size:26px;color:#4A5568;line-height:1.4" > 최종 발표에서 개인별 기여도를 밝혀야 합니다 — 일일 기록과 GitHub 커밋이 근거가 됩니다</ p >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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" > 17 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "firstweek" style = "background:#E8833A;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:#14213D;letter-spacing:2px" > FIRST DEADLINE · D-5</ p >
< h2 style = "font-size:96px;font-weight:900;line-height:1.1" > 첫 마감 11/13 (금)</ h2 >
< p style = "font-size:36px;font-weight:500;line-height:1.4" > 기획서(요구사항 명세 포함) · WBS</ p >
</ div >
< div style = "display:grid;grid-template-columns:1fr 1fr;gap:20px" >
< div style = "display:flex;gap:20px;align-items:center;background:#F7F6F2;border-radius:12px;padding:24px 28px" >< 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:40px;height:40px" aria-label = "Check" >< path d = "M20 6L9 17l-5-5" /></ svg >< p style = "font-size:28px;font-weight:500" > 11/10 팀 빌딩 · 팀장 선정</ p ></ div >
< div style = "display:flex;gap:20px;align-items:center;background:#F7F6F2;border-radius:12px;padding:24px 28px" >< 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:40px;height:40px" aria-label = "Check" >< path d = "M20 6L9 17l-5-5" /></ svg >< p style = "font-size:28px;font-weight:500" > 팀별 그라운드 룰 합의</ p ></ div >
< div style = "display:flex;gap:20px;align-items:center;background:#F7F6F2;border-radius:12px;padding:24px 28px" >< 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:40px;height:40px" aria-label = "Check" >< path d = "M20 6L9 17l-5-5" /></ svg >< p style = "font-size:28px;font-weight:500" > 제시 주제 중 택1 · 대시보드 팀 구성 입력</ p ></ div >
< div style = "display:flex;gap:20px;align-items:center;background:#F7F6F2;border-radius:12px;padding:24px 28px" >< 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:40px;height:40px" aria-label = "Check" >< path d = "M20 6L9 17l-5-5" /></ svg >< p style = "font-size:28px;font-weight:500" > 디스코드 팀 채널 · 멘토 일정 협의</ p ></ div >
< div style = "display:flex;gap:20px;align-items:center;background:#F7F6F2;border-radius:12px;padding:24px 28px" >< 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:40px;height:40px" aria-label = "Check" >< path d = "M20 6L9 17l-5-5" /></ svg >< p style = "font-size:28px;font-weight:500" > GitHub 저장소 · 프로젝트 보드 개설</ p ></ div >
< div style = "display:flex;gap:20px;align-items:center;background:#F7F6F2;border-radius:12px;padding:24px 28px" >< 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:40px;height:40px" aria-label = "Check" >< path d = "M20 6L9 17l-5-5" /></ svg >< p style = "font-size:28px;font-weight:500" > 첫날부터 일일 진행 기록 작성</ p ></ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#14213D" > AIO 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 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "midterm" style = "background:#EEF1F5;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:#2F5D8C;letter-spacing:2px" > MIDTERM · 12/8 (화) · 5주차</ 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:16px" >
< h3 style = "font-size:32px;font-weight:700" > 이때까지 갖출 것</ h3 >
< ul style = "font-size:26px;color:#14213D;line-height:1.6" >
< li > STEP 1~3 산출물 제출 완료 (6건)</ li >
< li > FastAPI 백엔드 + Function Calling 엔진 동작</ li >
< li > LangGraph 단일 에이전트와 자기 성찰 루프</ li >
< li > STEP 4 멀티 에이전트 설계 방향</ li >
</ ul >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:16px" >
< h3 style = "font-size:32px;font-weight:700" > 발표에서 보여줄 것</ h3 >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:22px 26px" >
< p style = "font-size:28px;font-weight:700" > 핵심 기능 1개 이상 안정 시연</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 실제 서비스 상황을 반영한 시나리오로</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:22px 26px" >
< p style = "font-size:28px;font-weight:700" > 문제 정의 → 솔루션 → 범위·일정</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 요구사항이 명세에 어떻게 반영됐는지</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:6px;background:#FFFFFF;border-left:6px solid #2F5D8C;border-radius:8px;padding:22px 26px" >
< p style = "font-size:28px;font-weight:700" > 아키텍처와 GitHub 협업 체계</ p >
< p style = "font-size:24px;color:#4A5568;line-height:1.4" > 확장 방향 · 브랜치 전략 · 계획 대비 진척</ p >
</ div >
</ div >
</ div >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#5B6472" > AIO 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" > 19 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "final" 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" > FINAL · 1/4 (월) · 9주차</ 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:#1F2E4F;border-radius:12px;padding:28px" >
< 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:40px;height:40px" aria-label = "Play" >< circle cx = "12" cy = "12" r = "10" />< path d = "M10 8l6 4-6 4z" /></ svg >
< h3 style = "font-size:30px;font-weight:700" > 최종 발표 PT</ h3 >
< p style = "font-size:24px;color:#C9D3E3;line-height:1.5" > 중단 없는 데모, 한계와 대안, 개인별 기여도</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:10px;background:#1F2E4F;border-radius:12px;padding:28px" >
< 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: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:30px;font-weight:700" > 소스코드</ h3 >
< p style = "font-size:24px;color:#C9D3E3;line-height:1.5" > GitHub 저장소에 올리고 저장소 주소 제출</ p >
</ div >
< div style = "display:flex;flex-direction:column;gap:10px;background:#1F2E4F;border-radius:12px;padding:28px" >
< 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:40px;height:40px" aria-label = "Activity" >< path d = "M22 12h-4l-3 9L9 3l-3 9H2" /></ svg >
< h3 style = "font-size:30px;font-weight:700" > 시연영상</ h3 >
< p style = "font-size:24px;color:#C9D3E3;line-height:1.5" > MP4 · 핵심 기능 위주 3~5분 내외</ p >
</ div >
</ div >
< div style = "display:flex;flex-direction:column;gap:12px" >
< h3 style = "font-size:30px;font-weight:700" > 그 전에 끝나 있어야 할 것 (STEP 5)</ h3 >
< p style = "font-size:26px;color:#C9D3E3;line-height:1.5" > 12/24 대화형 AI 웹 앱 배포 URL · 12/31* 통합 테스트 결과서 · 배포 아키텍처 설계도</ p >
</ div >
< p style = "font-size:28px;font-weight:700;color:#14213D;background:#E8833A;padding:16px 24px;border-radius:8px" > 최종 발표 1등 팀 상금 100만 원 — 심사위원 평가로 선정</ p >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#9AA8BF" > AIO 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" > 20 / 21</ p >
</ section >
</ div ></ div >< div class = "frame" >< div class = "slide" >< section id = "closing" style = "background:#F7F6F2;color:#14213D;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" > 9주 동안,< br > 함께 끝까지 만들어 봅시다</ h2 >
< div style = "display:flex;gap:24px" >
< div style = "flex:1;display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px" >
< div style = "display:flex;gap:14px;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:36px;height:36px" 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:30px;font-weight:700" > 질문·소통</ h3 ></ div >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 디스코드 팀 채널 · 일정·제출·지원 요청은 팀장이 매니저에게</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px" >
< div style = "display:flex;gap:14px;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:36px;height:36px" 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:30px;font-weight:700" > 가이드</ h3 ></ div >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 노션 ‘AIO 1기 최종 프로젝트 가이드’ — 단계별 목표와 평가 기준 원문</ p >
</ div >
< div style = "flex:1;display:flex;flex-direction:column;gap:8px;background:#FFFFFF;border:1px solid #E2E0D8;border-radius:12px;padding:28px" >
< div style = "display:flex;gap:14px;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:36px;height:36px" 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:30px;font-weight:700" > 대시보드</ h3 ></ div >
< p style = "font-size:24px;color:#4A5568;line-height:1.5" > 일정·제출 상태·피드백 확인과 일일 진행 기록</ p >
</ div >
</ div >
< p style = "font-size:32px;font-weight:700;color:#B5541A" > Q & A</ p >
< p style = "position:absolute;left:128px;bottom:64px;width:1200px;font-size:24px;color:#6B7280" > AIO 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" > 21 / 21</ p >
</ section >
</ div ></ div >
2026-11-10 08:38:47 +09:00
< 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 >
2026-11-09 11:04:51 +09:00
< script >
2026-11-10 08:38:47 +09:00
const frames = [... document . querySelectorAll ( '.frame' )];
const n = frames . length ;
let cur = 0 ;
2026-11-09 11:04:51 +09:00
function fit () {
2026-11-10 08:38:47 +09:00
const f = frames [ cur ];
f . querySelector ( '.slide' ). style . transform = 'scale(' + ( f . clientWidth / 1920 ) + ')' ;
2026-11-09 11:04:51 +09:00
}
2026-11-10 08:38:47 +09:00
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 );
2026-11-09 11:04:51 +09:00
addEventListener ( 'beforeprint' , () => document . querySelectorAll ( '.slide' ). forEach ( s => s . style . transform = 'none' ));
2026-11-10 08:38:47 +09:00
addEventListener ( 'afterprint' , () => { frames . forEach ( f => f . querySelector ( '.slide' ). style . transform = '' ); fit (); });
2026-11-09 11:04:51 +09:00
</ script >
</ body >
</ html >
