AIPP 사내규정집 RAG 실습 PDF 8종 추가, 최종 프로젝트 가이드 갱신

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Lecture/FinalProject/Doc/AIO_1기_최종프로젝트_가이드.html

@@ -8,10 +8,18 @@
 <style>
   @page { size: 1920px 1080px; margin: 0; }
   * { box-sizing: border-box; margin: 0; }
-  html, body { background: #2B2F36; }
+  html, body { background: #1B1E24; height: 100%; overflow: hidden; }
-  body { padding: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
+  body { display: flex; align-items: center; justify-content: center; }
-  .frame { width: min(1920px, calc(100vw - 32px)); aspect-ratio: 16 / 9; position: relative; overflow: hidden;
+  .frame { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; position: relative; overflow: hidden;
-           box-shadow: 0 8px 32px rgba(0,0,0,.35); border-radius: 6px; }
+           display: none; }
+  .frame.active { display: block; }
+  .nav { position: fixed; right: 16px; bottom: 12px; display: flex; gap: 8px; align-items: center;
+         font: 14px 'JetBrains Mono', 'Noto Sans CJK KR', monospace; color: #C9D3E3; opacity: .25; transition: opacity .2s; }
+  .nav:hover, body.moved .nav { opacity: .9; }
+  .nav button { background: #2B2F36; color: #F7F6F2; border: 1px solid #4A5D80; border-radius: 6px;
+                 width: 36px; height: 32px; font-size: 16px; cursor: pointer; }
+  .nav button:hover { background: #E8833A; color: #14213D; }
+  .progress { position: fixed; left: 0; bottom: 0; height: 4px; background: #E8833A; transition: width .2s; }
   .slide { width: 1920px; height: 1080px; transform-origin: 0 0; position: absolute; left: 0; top: 0; }
   .slide > section { width: 1920px; height: 1080px; position: relative; overflow: hidden;
                       font-family: 'Noto Sans KR', 'Noto Sans CJK KR', Arial, sans-serif; }
@@ -21,8 +29,9 @@
   table { border-collapse: collapse; width: 100%; }
   th, td { padding: 0.35em 0.6em; text-align: left; border-bottom: 1px solid #E2E0D8; vertical-align: top; }
   @media print {
-    html, body { background: none; padding: 0; gap: 0; display: block; }
+    html, body { background: none; padding: 0; gap: 0; display: block; height: auto; overflow: visible; }
-    .frame { width: 1920px; height: 1080px; box-shadow: none; border-radius: 0; break-after: page; }
+    .nav, .progress { display: none; }
+    .frame { display: block !important; width: 1920px; height: 1080px; break-after: page; }
     .slide { transform: none !important; }
   }
 </style>
@@ -669,15 +678,62 @@
 
 </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() {
-    document.querySelectorAll('.frame').forEach(f => {
+    const f = frames[cur];
     f.querySelector('.slide').style.transform = 'scale(' + (f.clientWidth / 1920) + ')';
-    });
   }
-  addEventListener('resize', fit); fit();
+  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', fit);
+  addEventListener('afterprint', () => { frames.forEach(f => f.querySelector('.slide').style.transform = ''); fit(); });
 </script>
 </body>
 </html>