1032 lines
39 KiB
HTML
1032 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>멀티 에이전트란 - 발표 자료</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600;800&family=Noto+Sans+KR:wght@300;400;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-gradient: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f0c29 50%, #03001e 100%);
|
|
--text-main: #f8fafc;
|
|
--text-sub: #94a3b8;
|
|
--accent-color: #818cf8;
|
|
--accent-hover: #c084fc;
|
|
--accent-glow: rgba(129, 140, 248, 0.4);
|
|
--card-bg: rgba(30, 41, 59, 0.5);
|
|
--card-border: rgba(255, 255, 255, 0.08);
|
|
--indicator-bg: rgba(255, 255, 255, 0.1);
|
|
--indicator-active: #818cf8;
|
|
--shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
--font-title: 'Inter', 'Noto Sans KR', sans-serif;
|
|
--font-body: 'Inter', 'Noto Sans KR', sans-serif;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
--text-main: #0f172a;
|
|
--text-sub: #475569;
|
|
--accent-color: #4f46e5;
|
|
--accent-hover: #7c3aed;
|
|
--accent-glow: rgba(79, 70, 229, 0.2);
|
|
--card-bg: rgba(255, 255, 255, 0.7);
|
|
--card-border: rgba(0, 0, 0, 0.08);
|
|
--indicator-bg: rgba(0, 0, 0, 0.1);
|
|
--indicator-active: #4f46e5;
|
|
--shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-gradient);
|
|
color: var(--text-main);
|
|
font-family: var(--font-body);
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
transition: background 0.5s ease, color 0.5s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 슬라이드 컨테이너 */
|
|
.deck {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 개별 슬라이드 기본 설정 */
|
|
.slide {
|
|
position: absolute;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
height: 80%;
|
|
max-height: 800px;
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(20px);
|
|
pointer-events: none;
|
|
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
background: var(--card-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border-radius: 24px;
|
|
border: 1px solid var(--card-border);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* 활성화 상태 슬라이드 */
|
|
.slide.active {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
pointer-events: auto;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 과거 슬라이드 (왼쪽으로 퇴장) */
|
|
.slide.past {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateX(-100px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 미래 슬라이드 (오른쪽에서 대기) */
|
|
.slide.future {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateX(100px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 슬라이드 타이틀 */
|
|
.slide-header {
|
|
margin-bottom: 24px;
|
|
border-bottom: 1px solid var(--card-border);
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.slide-tag {
|
|
font-size: 0.85rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: var(--accent-color);
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
}
|
|
|
|
.slide h1 {
|
|
font-family: var(--font-title);
|
|
font-size: 2.5rem;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
background: linear-gradient(to right, var(--text-main), var(--accent-color));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.slide h2 {
|
|
font-family: var(--font-title);
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* 슬라이드 콘텐츠 배치 구조 */
|
|
.slide-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
align-content: center;
|
|
}
|
|
|
|
.slide-body.split {
|
|
grid-template-columns: 1.2fr 1fr;
|
|
}
|
|
|
|
.slide-body.split-equal {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* 본문 텍스트 스타일 */
|
|
.content-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.content-item {
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.content-item::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--accent-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content-item strong {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content-desc {
|
|
font-size: 0.95rem;
|
|
color: var(--text-sub);
|
|
margin-top: 4px;
|
|
padding-left: 0px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* 이미지 및 미디어 컨테이너 */
|
|
.media-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid var(--card-border);
|
|
position: relative;
|
|
height: 100%;
|
|
min-height: 250px;
|
|
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.media-container img,
|
|
.media-container video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.media-container:hover img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* 더블 미디어 컨테이너 (위아래/양옆) */
|
|
.double-media {
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 16px;
|
|
height: 100%;
|
|
}
|
|
|
|
.double-media-horizontal {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 인용구 스타일 */
|
|
.quote-box {
|
|
background: rgba(129, 140, 248, 0.08);
|
|
border-left: 4px solid var(--accent-color);
|
|
padding: 16px 20px;
|
|
border-radius: 0 12px 12px 0;
|
|
margin: 16px 0;
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.quote-box span {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
color: var(--text-sub);
|
|
margin-top: 8px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 코드 블록 스타일 */
|
|
.code-box {
|
|
font-family: 'Fira Code', monospace;
|
|
background: #0d0e15;
|
|
color: #a9b2c3;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* 인덱스 페이지(첫 화면) 스타일 */
|
|
.slide-intro {
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-intro h1 {
|
|
font-size: 3.8rem;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(135deg, #fff 30%, var(--accent-color) 70%, #d8b4fe 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 0 40px var(--accent-glow);
|
|
}
|
|
|
|
.slide-intro p {
|
|
font-size: 1.3rem;
|
|
color: var(--text-sub);
|
|
max-width: 700px;
|
|
line-height: 1.6;
|
|
margin: 0 auto 30px auto;
|
|
}
|
|
|
|
.slide-intro .badge {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
background: var(--accent-color);
|
|
color: #0f0c29;
|
|
font-weight: 800;
|
|
border-radius: 50px;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 0 20px var(--accent-glow);
|
|
}
|
|
|
|
/* 마무리 슬라이드 */
|
|
.slide-outro {
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-outro h1 {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* 컨트롤바 및 인터페이스 */
|
|
.controls {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
color: var(--text-main);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow);
|
|
transition: all 0.3s ease;
|
|
outline: none;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--accent-color);
|
|
color: #0f0c29;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px var(--accent-glow);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 24px;
|
|
right: 24px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* 프로그레스바 */
|
|
.progress-bar-container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
z-index: 100;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: linear-gradient(to right, var(--accent-color), var(--accent-hover));
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
.slide-number {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
left: 24px;
|
|
font-size: 0.9rem;
|
|
color: var(--text-sub);
|
|
font-family: 'Fira Code', monospace;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* 반응형 및 스크롤바 커스텀 */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--card-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-color);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.slide-body.split,
|
|
.slide-body.split-equal {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.slide h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
.slide h2 {
|
|
font-size: 1.3rem;
|
|
}
|
|
.content-item {
|
|
font-size: 0.95rem;
|
|
}
|
|
.media-container {
|
|
min-height: 180px;
|
|
max-height: 250px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 테마 변경 버튼 -->
|
|
<button class="btn theme-toggle" id="themeBtn" title="테마 변경">☀️</button>
|
|
|
|
<div class="deck">
|
|
|
|
<!-- 슬라이드 1: 표지 -->
|
|
<div class="slide slide-intro active">
|
|
<span class="badge">세미나 발표자료</span>
|
|
<h1>멀티 에이전트란</h1>
|
|
<p>멀티에이전트의 개념 설명, 장점, 실제 구축을 통한 경험 공유를 세미나에서 발표하기 위한 발표 스크립트 및 발표자료입니다.</p>
|
|
<div style="font-size: 0.9rem; color: var(--text-sub); margin-top: 40px;">
|
|
방향키 (← / →) 또는 스페이스바를 사용하여 슬라이드를 넘길 수 있습니다.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 2: AI Agent란? -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">01. AI 에이전트 개요</span>
|
|
<h1>AI Agent란?</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list">
|
|
<p style="font-size: 1.05rem; line-height: 1.5; color: var(--text-sub); margin-bottom: 12px;">
|
|
사용자의 응답 생성을 넘어, 스스로 계획하고 도구를 사용해 목표를 달성하는 자율형 LLM 기반 시스템입니다.
|
|
</p>
|
|
<div class="content-item">
|
|
<strong>Planning (계획 및 추론)</strong>
|
|
<p class="content-desc">작업 분해(Task Decomposition) 및 자기 성찰(Self-Reflection)을 통해 복잡한 목표를 정밀 설계 및 수정합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>Memory (기억 장치)</strong>
|
|
<p class="content-desc">대화 컨텍스트 내의 단기 기억과 벡터 DB 기반 장기 기억(RAG)으로 정보를 보존합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>Tool Use (도구 활용)</strong>
|
|
<p class="content-desc">코드 실행 샌드박스, 웹 브라우저, 외부 API 등을 주도적으로 호출하여 한계를 돌파합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Screenshot%202026-06-25%20at%209.39.07%20pm.png" alt="AI Agent Architecture">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 3: Skills -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">01. AI 에이전트 개요</span>
|
|
<h1>AI Agent를 만드는 Skills</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div class="content-list" style="justify-content: center;">
|
|
<p style="font-size: 1.15rem; line-height: 1.6; margin-bottom: 20px;">
|
|
<strong>Skills</strong>는 AI 에이전트가 외부 환경과 동적으로 상호작용할 수 있도록 결합하는 기능적 실행 모듈입니다. 단순히 프롬프트를 주는 수준을 넘어 실행 코드, 스키마, 사용 설명서 등이 일체화된 확장 도구 모음입니다.
|
|
</p>
|
|
<div class="content-item">
|
|
<strong>동적 모듈화</strong>
|
|
<p class="content-desc">필요에 따라 스킬을 실시간으로 로드하여 사용하고, 완료 후 언로드합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>작업 수행 한계 돌파</strong>
|
|
<p class="content-desc">시스템 레벨 파일 제어, 서버 배포, 물리 데이터 수집 등의 적극적인 실무 대행력을 에이전트에 제공합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 4: Claude cowork와 code -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">01. AI 에이전트 개요</span>
|
|
<h1>Claude cowork vs code</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>작동 방식의 본질적인 차이</strong>
|
|
<p class="content-desc">동일한 최상위 모델을 사용하지만 환경과 인터랙션 절차가 상이합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>Claude Cowork (클라우드 인프라)</strong>
|
|
<p class="content-desc">클라우드 샌드박스에서 구동되며 사무 작업용(PDF, Excel, PPT) 파일 입출력 위주의 가이드 업무 대행.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>Claude Code (로컬 컴퓨터)</strong>
|
|
<p class="content-desc">로컬 기기에 직접 모듈을 설치하고 작동하며, 터미널 환경에서 코딩 작업에 독보적인 효율을 자랑함.</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Screenshot%202026-06-25%20at%2010.04.54%20pm.png" alt="Claude Cowork vs Code">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 5: Skills 사례 소개 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">01. AI 에이전트 개요</span>
|
|
<h1>대표적인 Skills 사례</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
|
|
<div class="code-box" style="font-size: 0.85rem;">
|
|
<h3>1. 개발 관리 스킬 (Dev Skill)</h3>
|
|
<p style="color: var(--accent-color); margin: 6px 0;">Codebase Analysis</p>
|
|
- Grep 탐색 및 File replace<br>
|
|
- Linting / 에러 자동 검증<br>
|
|
- Git Auto Commit & Push
|
|
</div>
|
|
<div class="code-box" style="font-size: 0.85rem;">
|
|
<h3>2. 브라우저 자동화 (Browser QA)</h3>
|
|
<p style="color: var(--accent-color); margin: 6px 0;">Playwright / Puppeteer</p>
|
|
- 실시간 웹 트렌드 스크래핑<br>
|
|
- 웹 UI 자동 QA 테스트 수행<br>
|
|
- 데이터 크롤링 시나리오 기동
|
|
</div>
|
|
<div class="code-box" style="font-size: 0.85rem;">
|
|
<h3>3. 데브옵스 스킬 (DevOps)</h3>
|
|
<p style="color: var(--accent-color); margin: 6px 0;">Firebase / AWS Control</p>
|
|
- Hosting 정적 파일 자율 배포<br>
|
|
- Cloud Firestore DB 규칙 배포<br>
|
|
- 서버 및 클라우드 자원 리사이징
|
|
</div>
|
|
<div class="code-box" style="font-size: 0.85rem;">
|
|
<h3>4. 도메인 특화 API (Research)</h3>
|
|
<p style="color: var(--accent-color); margin: 6px 0;">Bio / Med / Genomics</p>
|
|
- ChEMBL 화학물 정보 탐색<br>
|
|
- PubMed, arXiv 논문 자동 추출<br>
|
|
- dbSNP 유전학 정합성 교차 체크
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 6: Github 점령 및 Understand skill -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">01. AI 에이전트 개요</span>
|
|
<h1>Github를 점령한 Skills</h1>
|
|
</div>
|
|
<div class="slide-body split-equal">
|
|
<div class="media-container">
|
|
<img src="assets/images/Screenshot%202026-06-25%20at%209.43.29%20pm.png" alt="Github Trends Skills">
|
|
</div>
|
|
<div class="double-media">
|
|
<div style="font-size: 0.95rem; color: var(--text-sub); border-bottom: 1px solid var(--card-border); padding-bottom: 8px;">
|
|
<strong>Understand Skill</strong>: 코드베이스나 문서를 인터랙티브 지식 그래프로 변환해 자율 분석합니다.
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Screenshot%202026-06-25%20at%209.41.27%20pm.png" alt="Understand Skill Interface">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 7: multi-agent-mux skill 데모 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">01. AI 에이전트 개요</span>
|
|
<h1>개발 사례: multi-agent-mux 스킬</h1>
|
|
</div>
|
|
<div class="slide-body split-equal">
|
|
<div class="double-media">
|
|
<div style="font-size: 0.95rem; color: var(--text-sub);">
|
|
다양한 프레임워크와 이종 모델 에이전트들을 결합하여 일의 단위로 처리 프로세스를 다중화하는 mux 스킬입니다.
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Screenshot%202026-06-25%20at%209.45.01%20pm.png" alt="multi-agent-mux architecture">
|
|
</div>
|
|
</div>
|
|
<div class="media-container">
|
|
<video src="assets/images/Recording%20Jun%2025,%202026%20-%2011_56%20AM.mp4" controls autoplay muted loop></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 8: Multi-Agent 란? -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">02. 멀티 에이전트 핵심</span>
|
|
<h1>Multi-Agent란?</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div class="content-list" style="justify-content: center;">
|
|
<p style="font-size: 1.15rem; line-height: 1.6; margin-bottom: 16px;">
|
|
단일 에이전트의 정보 누락(Lost in the middle) 및 다중 태스크 처리 시의 환각(Hallucination) 한계를 극복하기 위해, **서로 다른 전문 에이전트들이 협력하는 오케스트레이션 시스템**입니다.
|
|
</p>
|
|
<div class="content-item">
|
|
<strong>분할 정복 (Divide and Conquer)</strong>
|
|
<p class="content-desc">설계, 구현, 검증, 연구 등의 복잡한 프로세스를 병렬 및 세부 태스크로 분산해 집중도를 극대화합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>역할 정의 및 노이즈 제어 (Role Specialization)</strong>
|
|
<p class="content-desc">특정 에이전트에게 단 하나의 프레임워크와 특정 도구만 쥐여줌으로써 모델의 입력 노이즈를 극소화합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>이종 모델 융합 및 교차 검증</strong>
|
|
<p class="content-desc">역할에 따라 가성비가 높은 다른 AI 모델을 배치하여 상호 크로스 리뷰하고 신뢰성을 완성시킵니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 9: Subagent 예시 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">02. 멀티 에이전트 핵심</span>
|
|
<h1>Multi Agent 예시: Subagent</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>동적 하위 작업 위임 (Dynamic Delegate)</strong>
|
|
<p class="content-desc">부모 에이전트(Orchestrator)의 오더 하에 임시로 기동하여 특정 국소적인 과업을 대행한 후 결과만 반환하고 소멸합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>컨텍스트 격리 (Context Isolation)</strong>
|
|
<p class="content-desc">상위 에이전트 대화의 전체 문맥을 오염시키지 않기 위해, 리팩토링이나 검색 등의 하위 작업 맥락만을 격리 분기(Branch)하여 처리합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>자원 최적화</strong>
|
|
<p class="content-desc">토큰 소모량을 감소시키고, 병렬적인 실행 속도를 획기적으로 개선합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="double-media">
|
|
<div class="media-container" style="min-height: 120px;">
|
|
<img src="assets/images/Pasted%20image%2020260625224821.png" alt="Subagent Process Flow">
|
|
</div>
|
|
<div class="media-container" style="min-height: 120px;">
|
|
<img src="assets/images/Pasted%20image%2020260625224849.png" alt="Context Isolation Graph">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 10: Team agent 예시 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">02. 멀티 에이전트 핵심</span>
|
|
<h1>Multi Agent 예시: Team Agent</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>수평적 의견 조율 (Collaborative Agent Debate)</strong>
|
|
<p class="content-desc">부모-자식의 수직적 구조 대신 독립적인 역할을 맡은 에이전트들이 의논하며 협상하는 토론형 구조입니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>의견 충돌 및 타협 시뮬레이션</strong>
|
|
<p class="content-desc">아키텍트 에이전트와 보안 에이전트가 각자의 제약 조건 하에서 충돌하며 최적의 보안 합의점을 이끌어내는 인간 워크플로우의 고차원 모사.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>비선형적 답 고도화</strong>
|
|
<p class="content-desc">상호 피드백을 실시간으로 루프하여 점진적으로 산출물의 수준을 높여나갑니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="double-media">
|
|
<div class="media-container" style="min-height: 120px;">
|
|
<img src="assets/images/Pasted%20image%2020260625230135.png" alt="Team Debate Session">
|
|
</div>
|
|
<div class="media-container" style="min-height: 120px;">
|
|
<img src="assets/images/Pasted%20image%2020260625224919.png" alt="Non-linear Refinement Cycle">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 11: Context Engineering -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">02. 멀티 에이전트 핵심</span>
|
|
<h1>Context Engineering & LangGraph</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div class="content-list" style="justify-content: center;">
|
|
<p style="font-size: 1.1rem; line-height: 1.5; margin-bottom: 20px;">
|
|
**컨텍스트 엔지니어링(Context Engineering)**은 다중 에이전트 시스템에서 에이전트 간의 대화 흐름, 중앙 공유 상태(State), 조건부 루프를 설계하는 방법론입니다.
|
|
</p>
|
|
<div class="content-item">
|
|
<strong>상태 보존 및 순환 제어 (Cyclic Control)</strong>
|
|
<p class="content-desc">선형적인 파이프라인에서 벗어나 반복 루프(재검토), 조건부 분기(검증 결과에 따른 롤백)를 가능하게 하는 순환형 그래프 구조입니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>영속성 관리 (Persistence)</strong>
|
|
<p class="content-desc">중앙 저장소에서 다양한 상태를 추적하므로 대형 슬라이드나 빌드 과정 중 특정 에이전트 노드가 실패하더라도 직전 상태부터 복구할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 12: Orchestration Software -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">02. 멀티 에이전트 핵심</span>
|
|
<h1>오케스트레이션 소프트웨어</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>CrewAI</strong>
|
|
<p class="content-desc">역할(Role), 목표(Goal), 백스토리(Backstory)를 통한 명확한 페르소나 설계와 순차/계층형 프로세스 조율.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>Microsoft AutoGen</strong>
|
|
<p class="content-desc">에이전트 간 대화형 상호작용 및 코드 실행 피드백, 인간의 개입(Human-in-the-loop)에 최적화.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>BeeAI</strong>
|
|
<p class="content-desc">에코시스템 밖에서도 작동하도록 돕는 오픈소스 에이전트 관리 플랫폼 (Linux Foundation 호스트).</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Screenshot%202026-06-25%20at%2010.52.04%20pm.png" alt="Orchestration Tools Frameworks">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 13: Protocols (MCP/ACP & A2A) -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">02. 멀티 에이전트 핵심</span>
|
|
<h1>에이전트 통신 프로토콜 표준</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
|
|
<div class="code-box">
|
|
<h3 style="color: var(--accent-color);">MCP / ACP</h3>
|
|
<p class="content-desc" style="margin-top: 10px; line-height: 1.6;">
|
|
<strong>Model Context Protocol</strong><br>
|
|
AI 호스트와 클라이언트 간에 로컬/원격 도구(Tools) 및 자원(Resources)을 연결하는 표준 인터페이스.<br><br>
|
|
<strong>Agent Communication Protocol</strong><br>
|
|
이종 에이전트간 서비스 발견, 태스크 위임을 규격화한 프로토콜 (2025년 8월 A2A 규격으로 통합).
|
|
</p>
|
|
</div>
|
|
<div class="code-box">
|
|
<h3 style="color: var(--accent-color);">A2A (Agent-to-Agent)</h3>
|
|
<p class="content-desc" style="margin-top: 10px; line-height: 1.6;">
|
|
<strong>Google A2A & Linux Foundation 기증</strong><br>
|
|
이종 에이전트 간 복잡한 결합 코드 없이 작동하도록 지원하는 통합 통신 표준.<br><br>
|
|
<strong>Agent Card (에이전트 카드)</strong><br>
|
|
에이전트의 명칭, 역량, 인증 스키마가 정의된 JSON 사양서로 `/.well-known/agent-card.json` 등을 통해 서비스 탐색에 활용됨.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 14: 구현 문제점들 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">03. 구축 경험 & 이슈</span>
|
|
<h1>실제 구축 시의 한계점과 문제들</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>1. 에이전트 및 하위 세션 관리 난조</strong>
|
|
<p class="content-desc">수많은 임시 subagent들의 생명주기 및 UUID 동기화와 영속성 확보의 복잡함.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>2. 상호 자율 탐색(Service Discovery)과 SPOF</strong>
|
|
<p class="content-desc">마스터-슬레이브 구조는 마스터 고장 시 단일 실패점(SPOF)이 되며, P2P 자율 보고 구조는 네트워크 관리 리소스가 큽니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>3. 비동기 메시지 유실 및 Silent Death</strong>
|
|
<p class="content-desc">수신 에이전트가 다운되거나 하위 에이전트가 통보 없이 고사(Silent death)할 경우 무한 대기(Deadlock) 및 리소스 누수가 발생합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Pasted%20image%2020260625230628.png" alt="Orchestration Fault Modes">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 15: Orchestration 장점 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">03. 구축 경험 & 이슈</span>
|
|
<h1>멀티 에이전트 구축의 명확한 장점</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>프롬프트의 간소화와 제어 루프 아키텍처의 발전</strong>
|
|
<div class="quote-box">
|
|
"코딩 에이전트에 프롬프트를 더 욱여넣지 마세요. 에이전트를 자율 제어하는 루프 아키텍처를 설계하십시오."
|
|
<span>- 페터 슈타인베르거 (Peter Steinberger, OpenClaw 개발자, OpenAI)</span>
|
|
</div>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>공유 환경을 통한 컨텍스트 소모 최소화 (Context-Free Sharing)</strong>
|
|
<p class="content-desc">작업 환경(Workspace)과 파일 이력을 공유하여 히스토리 학습용 텍스트 토큰을 파격적으로 절약합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>이종 가중치 모델간 피드백 및 고난도 비용 분배</strong>
|
|
<p class="content-desc">단일 모델 검토보다 서로 다른 맹점을 상호 보완하도록 유도하고, 비용이 저렴한 모델로 태스크를 다중 라우팅하여 효율을 높입니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 16: What We Need? -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">03. 구축 경험 & 이슈</span>
|
|
<h1>신뢰도 확보를 위해 진짜 필요한 것들</h1>
|
|
</div>
|
|
<div class="slide-body split">
|
|
<div class="content-list" style="gap: 12px;">
|
|
<div class="content-item">
|
|
<strong>Agent Card 기반 작업 환경 공유</strong>
|
|
<p class="content-desc">역할, 규격, 보안 프로토콜을 통일하는 동기화 체계.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>서비스 디스커버리 연동 작동 인프라</strong>
|
|
<p class="content-desc">동적 라우팅 및 가상 네트워크 포트 맵 연동.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>워크플로우 정합성 및 이슈 트래커</strong>
|
|
<p class="content-desc">동일 프로세스 재현 및 추적을 위한 모니터링 인터페이스.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>고성능 양방향 대용량 메시징</strong>
|
|
<p class="content-desc">코드 블록, 이미지 및 멀티모달 센서 데이터 전송을 위한 큰 페이로드(Payload) 및 HTTP/3 멀티 스트리밍 지원.</p>
|
|
</div>
|
|
</div>
|
|
<div class="media-container">
|
|
<img src="assets/images/Pasted%20image%2020260625230351.png" alt="Orchestration Goal Metrics">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 17: Why we need gRPC? -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-tag">03. 구축 경험 & 이슈</span>
|
|
<h1>왜 gRPC가 에이전트 인프라의 해답인가?</h1>
|
|
</div>
|
|
<div class="slide-body">
|
|
<div class="content-list">
|
|
<div class="content-item">
|
|
<strong>A2A 표준 바인딩 및 엣지 연산 최적화</strong>
|
|
<p class="content-desc">연산 및 대역폭 제약이 극심한 디바이스 환경에서 MQTT/CoAP을 보완적으로 수용하며, 상위 게이트웨이 및 엣지 노드 계층의 초고속 자율 통합 제어를 위한 gRPC 프로토콜을 매치합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>고해상도 멀티모달 양방향 스트리밍의 통합</strong>
|
|
<p class="content-desc">HTTP/2, HTTP/3 백본을 사용하여 단일 포트에서 양방향 스트리밍, 이벤트 알림, RPC 통신을 통합함으로써 복잡한 네트워크 요구사항을 일원화합니다.</p>
|
|
</div>
|
|
<div class="content-item">
|
|
<strong>구조화된 Protobuf 직렬화와 기성 인프라 재사용</strong>
|
|
<p class="content-desc">JSON 문자열 파싱 대비 수배 빠르고 효율적이며, 이미 잘 구축된 Envoy, Kubernetes 생명주기 검증 도구(liveness probe)를 재활용하여 에이전트 모니터링을 완성합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 슬라이드 18: Q&A / 마무리 -->
|
|
<div class="slide slide-outro">
|
|
<span class="slide-tag" style="color: var(--accent-color);">Q&A 및 토론</span>
|
|
<h1>감사합니다</h1>
|
|
<p>멀티 에이전트 오케스트레이션과 인프라 아키텍처 세미나 발표를 마치겠습니다.</p>
|
|
<div style="margin-top: 40px; display: flex; justify-content: center; gap: 20px;">
|
|
<span style="font-size: 0.95rem; padding: 10px 20px; border-radius: 30px; background: var(--card-border);">
|
|
질문 및 피드백 환영
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 슬라이드 번호 및 프로그레스 -->
|
|
<div class="slide-number" id="slideNum">1 / 18</div>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
</div>
|
|
|
|
<!-- 내비게이션 컨트롤 버튼 -->
|
|
<div class="controls">
|
|
<button class="btn" id="prevBtn" title="이전 슬라이드 (Left Arrow)">◀</button>
|
|
<button class="btn" id="nextBtn" title="다음 슬라이드 (Right Arrow / Space)">▶</button>
|
|
</div>
|
|
|
|
<script>
|
|
// 상태 및 DOM 변수 초기화
|
|
const slides = document.querySelectorAll('.slide');
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
const slideNumEl = document.getElementById('slideNum');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const themeBtn = document.getElementById('themeBtn');
|
|
let currentIndex = 0;
|
|
|
|
// 슬라이드 화면 갱신 함수
|
|
function updateSlides() {
|
|
slides.forEach((slide, index) => {
|
|
slide.classList.remove('active', 'past', 'future');
|
|
|
|
if (index === currentIndex) {
|
|
slide.classList.add('active');
|
|
|
|
// 슬라이드 내부에 비디오가 있다면 자동으로 재생하고 처음으로 돌려놓기
|
|
const video = slide.querySelector('video');
|
|
if (video) {
|
|
video.currentTime = 0;
|
|
video.play().catch(e => console.log("Video auto-play blocked: ", e));
|
|
}
|
|
} else if (index < currentIndex) {
|
|
slide.classList.add('past');
|
|
// 과거 슬라이드의 비디오는 정지
|
|
const video = slide.querySelector('video');
|
|
if (video) video.pause();
|
|
} else {
|
|
slide.classList.add('future');
|
|
// 미래 슬라이드의 비디오도 정지
|
|
const video = slide.querySelector('video');
|
|
if (video) video.pause();
|
|
}
|
|
});
|
|
|
|
// 슬라이드 번호 및 프로그레스바 갱신
|
|
slideNumEl.textContent = `${currentIndex + 1} / ${slides.length}`;
|
|
const progressPercent = ((currentIndex) / (slides.length - 1)) * 100;
|
|
progressBar.style.width = `${progressPercent}%`;
|
|
}
|
|
|
|
// 다음 슬라이드 이동
|
|
function nextSlide() {
|
|
if (currentIndex < slides.length - 1) {
|
|
currentIndex++;
|
|
updateSlides();
|
|
}
|
|
}
|
|
|
|
// 이전 슬라이드 이동
|
|
function prevSlide() {
|
|
if (currentIndex > 0) {
|
|
currentIndex--;
|
|
updateSlides();
|
|
}
|
|
}
|
|
|
|
// 이벤트 리스너 연결
|
|
nextBtn.addEventListener('click', nextSlide);
|
|
prevBtn.addEventListener('click', prevSlide);
|
|
|
|
// 키보드 컨트롤 연동
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') {
|
|
e.preventDefault();
|
|
nextSlide();
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// 화면 클릭 시 다음 슬라이드 (컨트롤 영역 클릭은 제외)
|
|
document.addEventListener('click', (e) => {
|
|
// 버튼들이나 코드박스, 비디오 컨트롤 등을 클릭했을 때는 무시
|
|
if (e.target.closest('.controls') || e.target.closest('.theme-toggle') || e.target.closest('video') || e.target.closest('code') || e.target.closest('.code-box') || e.target.closest('a')) {
|
|
return;
|
|
}
|
|
|
|
// 화면의 오른쪽 60% 영역을 누르면 다음, 왼쪽 40% 영역을 누르면 이전으로 가도록 구성
|
|
const clickX = e.clientX;
|
|
const windowWidth = window.innerWidth;
|
|
if (clickX > windowWidth * 0.45) {
|
|
nextSlide();
|
|
} else {
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// 테마 설정 및 전환 기능
|
|
let currentTheme = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
themeBtn.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
|
|
|
|
themeBtn.addEventListener('click', () => {
|
|
currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
themeBtn.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
|
|
localStorage.setItem('theme', currentTheme);
|
|
});
|
|
|
|
// 초기 실행
|
|
updateSlides();
|
|
</script>
|
|
</body>
|
|
</html>
|