-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
887 lines (835 loc) · 55.4 KB
/
index.html
File metadata and controls
887 lines (835 loc) · 55.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agentic AI Playbook v4.0</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<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=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #fcfcfc;
background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
background-size: 25px 25px;
}
.slide {
display: none;
min-height: 85vh;
align-items: center;
justify-content: center;
}
.slide.active {
display: flex;
}
.slide-container {
width: 100%;
max-width: 1100px; /* Increased max-width */
padding: 60px 70px; /* Adjusted padding */
display: flex;
flex-direction: column;
justify-content: center;
}
.slide-part-title {
font-size: 1.2rem;
font-weight: 700;
color: #555;
margin-bottom: 8px;
}
.slide-title {
font-size: 3rem;
font-weight: 900;
color: #111;
margin-bottom: 25px;
line-height: 1.3;
}
.slide-subtitle {
font-size: 1.5rem;
font-weight: 500;
color: #444;
margin-bottom: 35px;
}
.slide-content {
font-size: 1.1rem;
line-height: 1.9;
color: #333;
}
.highlight {
background-color: #ffdd00;
padding: 0 0.25em;
}
.btn {
padding: 12px 28px;
border-radius: 8px;
font-weight: 700;
transition: all 0.2s ease;
cursor: pointer;
border: none;
}
.btn-primary {
background-color: #111;
color: white;
}
.btn-primary:hover {
background-color: #333;
}
.btn-secondary {
background-color: #f0f0f0;
color: #333;
}
.btn-secondary:hover {
background-color: #e0e0e0;
}
.progress-bar-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 40px;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border-top: 1px solid #eee;
z-index: 10;
}
.progress-bar {
width: 100%;
background-color: #eee;
border-radius: 9999px;
height: 8px;
margin-bottom: 15px;
}
.progress {
background-color: #111;
height: 100%;
border-radius: 9999px;
transition: width 0.3s ease;
}
.interactive-box {
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.interactive-box:hover {
border-color: #111;
background-color: #f9f9f9;
}
.hidden-content {
display: none;
margin-top: 15px;
padding: 15px;
background-color: #f0f0f0;
border-radius: 8px;
max-height: 200px;
overflow-y: auto;
font-size: 0.9rem;
line-height: 1.6;
border: 1px solid #e0e0e0;
}
table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}
th, td {
border: 1px solid #eee;
padding: 14px;
text-align: left;
}
th {
background-color: #f9f9f9;
font-weight: 700;
}
.workflow-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.workflow-step {
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 10px;
padding: 20px;
text-align: center;
min-width: 130px;
}
.workflow-step .icon {
font-size: 2.2rem;
color: #333;
margin-bottom: 8px;
}
.workflow-arrow {
font-size: 1.8rem;
color: #ccc;
}
</style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen p-4 md:p-8 pb-32">
<div class="w-full">
<!-- Slides Container -->
<div id="slides-container">
<!-- Slide 1: Title -->
<div class="slide active">
<div class="slide-container text-center">
<div class="text-7xl mb-8">🚀</div>
<h1 class="text-5xl md:text-6xl font-black text-gray-900 mb-4">Agentic AI Playbook</h1>
<p class="text-xl md:text-2xl text-gray-700">5점에서 100점으로: <span class="highlight">프로덕션급 AI 에이전트 구축 방법론</span></p>
</div>
</div>
<!-- Slide 2: The Challenge -->
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">The Problem: <span class="highlight">5-Point AI</span></h2>
<p class="slide-subtitle">최신 LLM은 왜 복잡한 알고리즘 문제를 풀지 못할까?</p>
<div class="slide-content">
<p>단순 프롬프트 방식으로는 Gemini 2.5 Pro도 한국 정보 올림피아드(KOI) 문제에서 5점을 획득하는 데 그쳤습니다.</p>
<div class="mt-8 p-6 bg-gray-50 border border-gray-200 rounded-lg">
<h3 class="font-bold text-lg">실패 원인 분석</h3>
<p class="mt-2">LLM은 표면적 이해, 불완전한 추론, 엣지 케이스 누락 등 구조적 한계를 가짐. 이 문제들이 복합적으로 작용하여 성능 저하를 유발</p>
</div>
</div>
</div>
</div>
<!-- Slide 3: The Insight -->
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">The Insight: <span class="highlight">IMO 2025 Paper</span></h2>
<p class="slide-subtitle">성능을 20배 향상시킨 파이프라인의 발견</p>
<div class="slide-content">
<p>국제수학올림피아드(IMO) 금상 수상의 비결은 단일 프롬프트가 아닌, 체계적인 파이프라인과 반복적인 개선 루프에 있었다.</p>
<p class="mt-4">이 연구의 핵심은 LLM을 정답 생성기가 아닌, 솔루션 탐색을 위한 추론 엔진으로 활용하는 것이다. 우리는 이 방법론을 알고리즘 문제 해결에 맞게 적용</p>
<div class="mt-8 p-4 bg-gray-50 border border-gray-200 rounded-lg">
<p class="font-semibold">🔑 핵심 원칙: <span class="highlight">분할 정복과 점진적 개선</span></p>
<p>복잡한 문제를 여러 하위 작업으로 나누고, 각 단계의 결과를 다음 단계의 입력으로 사용하여 점진적으로 솔루션의 완성도를 높이는것.</p>
</div>
</div>
</div>
</div>
<!-- Part 1: Cognitive Core -->
<div class="slide">
<div class="slide-container">
<p class="slide-part-title">Part 1: Cognitive Architecture</p>
<h2 class="slide-title">에이전트 추론 아키텍처</h2>
<p class="slide-content">에이전트의 "사고" 방식은 단일 모델의 성능보다 중요함. 구조화된 추론이 왜 필요하며, 어떻게 진화했는지 분석</p>
</div>
</div>
<div class="slide">
<
8B92
div class="slide-container">
<h2 class="slide-title">Chain-of-Thought (CoT)</h2>
<p class="slide-subtitle">"혼자 생각하는것"</p>
<div class="slide-content">
<p>문제를 단계별로 분해하여 추론 능력을 유도하는 기법. 외부 세계와 단절된 일종의 '독백' 방식으로, 사실과 다른 내용을 생성(<span class="highlight">강력한 환각</span>)하거나 초기 오류가 전파될 위험이 있음</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">ReAct: Reason + Act</h2>
<p class="slide-subtitle">"생각하고, 행동하고, 관찰하기"</p>
<div class="slide-content">
<p>추론(Reason)과 행동(Act)을 결합하여 외부 도구 및 환경과 상호작용합니다. 추론을 <span class="highlight">외부 사실에 기반</span>하게 하여 신뢰도를 높인다.</p>
<div class="workflow-diagram">
<div class="workflow-step"><div class="icon">🤔</div><b>추론</b></div>
<div class="workflow-arrow">➡️</div>
<div class="workflow-step"><div class="icon">🛠️</div><b>행동</b></div>
<div class="workflow-arrow">➡️</div>
<div class="workflow-step"><div class="icon">🧐</div><b>관찰</b></div>
<div class="workflow-arrow">🔄</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Tree/Graph of Thoughts (ToT/GoT)</h2>
<p class="slide-subtitle">"모든 가능성 탐색하기"</p>
<div class="slide-content">
<p>선형적 사고에서 벗어나, 여러 해결 경로를 동시에 탐색하고(<span class="highlight">ToT</span>), 생각들을 합치거나 되돌아가는(<span class="highlight">GoT</span>) 비선형적 추론 방식. 이는 더 많은 계산 비용으로 정확도를 높이는 전략적 선택입니다.</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-bold text-lg">🌳 ToT (Tree of Thoughts)</h3>
<p>여러 대안을 탐색하고, 막다른 길에서 백트래킹하여 다른 경로를 시도합니다.</p>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-bold text-lg">🕸️ GoT (Graph of Thoughts)</h3>
<p>여러 아이디어를 합성하거나 반복적으로 개선하는 유연한 사고를 모델링합니다.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Part 2: Agentic Scaffolding -->
<div class="slide">
<div class="slide-container">
<p class="slide-part-title">Part 2: Agentic Scaffolding</p>
<h2 class="slide-title">프레임워크, 계획, 메모리</h2>
<p class="slide-content">추상적 추론을 넘어, 에이전트를 실제로 구축하고 관리하는 데 필요한 실질적인 소프트웨어 구조를 다룬다.</p>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Case Study: KOI 문제 해결 워크플로우</h2>
<p class="slide-subtitle">5단계 파이프라인으로 <span class="highlight">5점에서 27점으로</span></p>
<div class="slide-content">
<p>단순 요청이 아닌, 명확한 역할을 가진 5개의 가상 에이전트가 협력하는 파이프라인을 구축했습니다.</p>
<div class="workflow-diagram text-xs md:text-sm">
<div class="workflow-step"><div class="icon">✍️</div><b>1. 초기 해결</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">✨</div><b>2. 자가 개선</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">🔍</div><b>3. 코드 검증</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">📊</div><b>4. 보고서 분석</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">🔧</div><b>5. 코드 수정</b></div>
</div>
<p class="mt-8 text-center font-bold">이 구조화된 접근만으로 성능이 5배 이상 향상되었음</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Sub-Agent: <span class="highlight">역할 기반 전문화</span></h2>
<p class="slide-subtitle">각 단계는 전문화된 역할을 수행하는 'Sub-Agent'에 해당합니다.</p>
<div class="slide-content">
<p>하나의 만능 에이전트 대신, 각기 다른 강점을 가진 여러 에이전트가 협력하여 시너지를 낸다.</p>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-3 bg-gray-50 rounded-lg"><b>Problem-Solver:</b> 초기 솔루션 생성</div>
<div class="p-3 bg-gray-50 rounded-lg"><b>Solution-Improver:</b> 자가 개선 및 최적화</div>
<div class="p-3 bg-gray-50 rounded-lg"><b>Code-Verifier:</b> 버그 탐지 및 검증</div>
<div class="p-3 bg-gray-50 rounded-lg"><b>Report-Evaluator:</b> 이슈 분석 및 우선순위화</div>
<div class="p-3 bg-gray-50 rounded-lg"><b>Solution-Refiner:</b> 모든 개선사항 통합</div>
<div class="p-3 bg-gray-50 rounded-lg"><b>Workflow-Orchestrator:</b> 전체 과정 조율</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Prompting: Step 1 (초기 솔루션)</h2>
<p class="slide-subtitle">정확성과 효율성을 최우선으로</p>
<div class="slide-content">
<p>첫 단계의 목표는 추측이 아닌, 명확한 논리에 기반한 완전한 첫 솔루션을 얻는 것이다.</p>
<div class="interactive-box" onclick="toggleVisibility('step1-prompt')">
<p class="font-semibold">Step 1 프롬프트 핵심 보기 <i class="fa-solid fa-hand-pointer"></i></p>
<div id="step1-prompt" class="hidden-content">
<ul class="list-disc list-inside space-y-2">
<li><b>Core Instructions:</b> 정확성/효율성 최우선, 불확실성 명시, Python만 사용, 사고 과정 설명.</li>
<li><b>Output Format:</b> 문제 분석 → 핵심 아이디어 → 복잡도 분석 → 코드 → 엣지 케이스 순서 강제.</li>
<li><b>Self-Correction:</b> 최종 출력 전, 지침 준수 여부 스스로 검토.</li>
</ul>
</div>
</div>
</div>
</div>
802E
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Prompting: Step 2 & 3 (개선과 검증)</h2>
<p class="slide-subtitle">스스로를 비판하고, 엄격하게 검증하기</p>
<div class="slide-content grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-lg">✨ Step 2: 자가 개선</h3>
<p>"숙련된 프로그래머가 자신의 초안을 비판적으로 검토"하는 역할을 부여하여 논리, 효율성, 가독성을 개선하도록 유도합니다.</p>
</div>
<div>
<h3 class="font-bold text-lg">🔍 Step 3: 다각적 검증</h3>
<p>"IOI 코칭 스태프이자 자동 채점 시스템" 역할을 부여하여, 해결사가 아닌 검증자로서 치명적 오류, 복잡도, 버그, 엣지 케이스를 찾아내도록 합니다.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Prompting: Step 4 & 5 (분석과 수정)</h2>
<p class="slide-subtitle">지침을 만들고, 그에 따라 수정하기</p>
<div class="slide-content grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-lg">📊 Step 4: 검증 결과 분석</h3>
<p>"수석 코치이자 최종 중재자" 역할을 부여하여, 3단계의 검증 보고서가 타당한지(Valid) 혹은 오탐인지(False Positive) 판단하고 최종 수정 지침을 만든다.</p>
</div>
<div>
<h3 class="font-bold text-lg">🔧 Step 5: 코드 수정</h3>
<p>"숙련된 디버거" 역할을 부여하여, 4단계에서 확정된 수정 지침 목록에 따라 코드의 모든 문제를 해결하고 최적화하도록 지시합니다.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Problem: <span class="highlight">Context Contamination</span></h2>
<p class="slide-subtitle">반복적 개선의 주요 장애물, 컨텍스트 오염</p>
<div class="slide-content">
<p>KOI 사례 연구자는 반복 과정에서 성능이 오히려 저하되는 현상을 경험했습니다. 이는 LLM이 여러 턴의 대화에서 맥락을 잃어버리는 문제 때문이다. (참고: LLMs Get Lost In Multi-Turn Conversation)</p>
<div class="mt-8 p-6 bg-red-50 border border-red-200 rounded-lg">
<h3 class="font-bold text-lg">🚨 컨텍스트 오염의 위험</h3>
<p>초기 단계의 잘못된 가정이나 불필요한 정보가 누적되어, 후반부 추론의 질을 저하시킨다.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Solution: <span class="highlight">The Kick</span></h2>
<p class="slide-subtitle">27점에서 100점으로 이끈 결정적 방법론</p>
<div class="slide-content">
<p>해결책은 멀티턴 대화를 버리고, <b>모든 맥락을 하나의 거대한 싱글턴 프롬프트로 통합</b>하는 것이었다.</p>
<div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
<h3 class="font-bold">최종 프롬프트 구조</h3>
<ul class="list-decimal list-inside mt-2 space-y-1">
<li>엄격한 지침 (Core Instructions)</li>
<li>문제 원문</li>
<li>1~5단계의 모든 생성물 (사고 과정, 코드, 보고서)</li>
<li><b>핵심: 27점짜리 코드의 '테스트 결과' 피드백</b></li>
</ul>
</div>
<p class="mt-6 font-bold">💡 핵심: 컨텍스트는 양보다 질이다. 정제된 사고 과정과 명확한 피드백을 하나의 '완벽한 컨텍스트'로 제공하는 것이 중요</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Orchestration Frameworks</h2>
<p class="slide-subtitle">수동 작업을 자동화하기: AutoGen, LangGraph, CrewAI</p>
<div class="slide-content">
<p>KOI 사례의 '여러 브라우저 탭' 방식은 수동 오케스트레이션이다. 프레임워크는 이 과정을 자동화하고 정교하게 제어할 수 있게 돕는다.</p>
<table class="text-base">
<thead>
<tr><th>프레임워크</th><th>추상화 수준</th><th>핵심 패러다임</th><th>최적 사용 사례</th></tr>
</thead>
<tbody>
<tr><td>📈 LangGraph</td><td>저수준</td><td>상태 기계 그래프</td><td>복잡/장기 실행 앱, 완전한 제어 필요시</td></tr>
<tr><td>💬 AutoGen</td><td>중수준</td><td>다중 에이전트 대화</td><td>협력 에이전트 신속 프로토타이핑</td></tr>
<tr><td>👨🚀 CrewAI</td><td>고수준</td><td>역할 기반 크루</td><td>역할 분해 가능한 워크플로우</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Part 3: 10x Performance -->
<div class="slide">
<div class="slide-container">
<p class="slide-part-title">Part 3: 10x Performance</p>
<h2 class="slide-title">고급 프롬프팅 및 툴링</h2>
<p class="slide-content">기본 동작을 넘어, 고도로 최적화되고 신뢰할 수 있는 방식으로 모델 및 외부 세계와 상호작용하는 방법을 다룬다.</p>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Prompt Engineering Mastery</h2>
<p class="slide-subtitle">프롬프트는 LLM 추론 엔진의 API</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div class="p-4 bg-gray-50 rounded-lg"><b>🎭 역할 프롬프팅:</b> "당신은 IOI 코칭 스태프입니다." 와 같이 명확하고 전문적인 페르소나를 부여하여 응답의 질을 높인다.</div>
<div class="p-4 bg-gray-50 rounded-lg"><b>✨ 메타 프롬프팅:</b> 더 뛰어난 LLM을 사용
8B92
하여 대상 LLM을 위한 최적의 프롬프트를 생성/개선시킨다.</div>
<div class="p-4 bg-gray-50 rounded-lg"><b>🌊 동적 프롬프트 적응:</b> 대화 기록, 피드백, 테스트 결과에 따라 실시간으로 변화하는 프롬프트를 구축.</div>
<div class="p-4 bg-gray-50 rounded-lg"><b>🔒 제약된 생성:</b> 출력이 유효한 JSON 등 정해진 형식을 따르도록 강제하여 도구 사용의 신뢰성을 확보합니다.</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Agent-Computer Interface (ACI)</h2>
<p class="slide-subtitle">모델 컨텍스트 프로토콜(MCP)을 통한 <span class="highlight">도구 사용 표준화</span></p>
<div class="slide-content">
<p><b>문제 ("N x M" 문제):</b> N개의 모델을 M개의 도구에 연결하기 위해 N*M개의 맞춤형 통합이 필요해 생태계가 파편화됩니다.</p>
<p class="mt-4"><b>해결 (MCP):</b> AI를 위한 USB-C처럼 작동합니다. 애플리케이션이 MCP 서버로 기능을 노출하면, 어떤 에이전트의 MCP 클라이언트든 표준화된 방식으로 즉시 연결하고 사용할 수 있습니다.</p>
<div class="mt-8 p-4 bg-gray-50 border border-gray-200 rounded-lg">
<p class="font-semibold">🚀 MCP의 미래: "에이전트 앱 스토어"</p>
<p class="mt-2">Stripe 결제, WolframAlpha 계산 등 전문 기능을 가진 도구들이 서비스 형태로 제공되는 시장이 열릴 것. 미래의 경쟁 우위는 최고의 도구들을 가장 잘 조율하는 능력에서 나올 것임.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Multi-Agent Systems</h2>
<p class="slide-subtitle">언제, 어떻게 전문화된 에이전트 팀을 구성할까?</p>
<div class="slide-content">
<p>KOI 문제 해결 과정은 다중 에이전트 시스템의 효과를 명확히 보여준다.</p>
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="font-bold text-lg text-green-700">✅ 사용 시점</h3>
<ul class="list-disc list-inside mt-2 space-y-2">
<li><b>전문화:</b> '코더', '테스터', '리팩토러' 등 명확한 역할 분담이 가능할 때</li>
<li><b>병렬화:</b> 여러 웹사이트 동시 검색 등 독립적인 작업 수행시</li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg text-red-700">❌ 피해야 할 경우</h3>
<ul class="list-disc list-inside mt-2 space-y-2">
<li><b>강한 의존성:</b> 단계 간 공유 컨텍스트가 너무 많아 통신 오버헤드가 클 때</li>
<li><b>단순한 작업:</b> 단일 에이전트나 스크립트로 충분할 때</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Part 4: 20x Performance -->
<div class="slide">
<div class="slide-container">
<p class="slide-part-title">Part 4: 20x Performance</p>
<h2 class="slide-title">자율적 개선 및 자가 수정</h2>
<p class="slide-content">에이전트가 작업을 실행하는 것을 넘어, 자신의 결과물과 프로세스를 능동적으로 개선하는 가장 진보된 기술을 다룬다.</p>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">The Ultimate Feedback: <span class="highlight">Test Results</span></h2>
<p class="slide-subtitle">TDD 피드백 루프의 완성</p>
<div class="slide-content">
<p>테스트 주도 개발(TDD)의 'Red-Green-Refactor' 사이클은 AI 에이전트를 위한 강력한 피드백 메커니즘이다. KOI 사례는 여기에 핵심 요소를 추가했습니다.</p>
<div class="mt-8 p-6 bg-indigo-50 border border-indigo-200 rounded-lg">
<h3 class="font-bold text-lg">🔑 100점의 비밀: 명시적인 테스트 결과</h3>
<p>"부분문제 3, 6, 7에서 시간 제한 초과"라는 명확하고 구조화된 피드백은, LLM이 추상적인 '개선'이 아닌 '시간 복잡도 최적화'라는 구체적인 목표에 집중하도록 만들었다. 이는 모호한 자연어 피드백보다 효과적이다.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Self-Healing Agents</h2>
<p class="slide-subtitle">컴파일러와 런타임 피드백의 자동화</p>
<div class="slide-content">
<p>TDD를 넘어, 컴파일 오류, 린터 경고, 런타임 예외 등 모든 기계 생성 피드백을 자동으로 캡처하여 에이전트에게 전달하는 워크플로우다.</p>
<div class="mt-6 p-4 bg-gray-100 rounded-lg">
<p>인간: "코드가 틀렸어." (모호함)</p>
<p class="mt-2"><b>기계: <span class="text-red-600">"TypeError on line 42"</span></b> (명확하고 실행 가능한 피드백)</p>
</div>
<p class="mt-6">이는 에이전트의 작업을 "버그를 찾아라"에서 "42번 줄의 TypeError를 수정하라"로 구체화하여 <span class="highlight">탐색 공간을 줄인다.</span></p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Meta-Agents: <span class="highlight">Recursive Self-Improvement</span></h2>
<p class="slide-subtitle">자신의 프로세스까지 개선하는 에이전트</p>
<div class="slide-content">
<p><b>핵심 아이디어:</b> 인간이 에이전트의 워크플로우를 직접 작성하는 대신, 상위 목표만 정의하고 메타 에이전트가 이를 최적의 워크플로우로 '컴파일'합니다.</p>
<ul class="list-disc list-inside mt-6 space-y-2">
<li><b>STOP (Self-Taught Optimizer):</b> LM이 자기 자신의 '개선기' 코드를 더 나은 버전으로 만들도록 요청.</li>
<li><b>ADAS (Automated Design of Agentic Systems):</b> 메타 에이전트가 새로운 에이전트를 프로그래밍, 테스트하고 성공적인 설계를 아카이빙.</li>
</ul>
<p class="mt-6 font-bold">궁극적인 목표: KOI 사례에서 수동으로 발견한 성공적인 워크플로우 자체를 자동화하는 것이다.</p>
</div>
</div>
</div>
<!-- Part 5: Practical Guide -->
<div class="slide">
<div class="slide-container">
<p class="slide-part-title">Part 5: Practical Guide</p>
<h2 class="slide-title">실제 적용과 현실적 함정</h2>
<p class="slide-content">개발자 커뮤니티의 경험과 KOI 사례의 교훈을 종합하여, 흔히 발생하는 실수를 피하는 법을 제시.</p>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Tool Usage Strategy</h2>
<p class="slide-subtitle">도구의 힘을 200% 활용하기</p>
<div class="slide-content space-y-4">
<p><b>🤝 페어 프로그래머로 대하기:</b> 단순히 코드를 요청하지 말고, 대안 평가, 함께 디버깅하는 파트너로 활용.</p>
<p><b>🎯 구체적으로, 그리고 분할하여 접근하기:</b> 전체 프로젝트가 아닌 개별 함수나 모듈 단위로 명확하게 지시합니다.</p>
<p><b>📚 장문 컨텍스트 활용 (Gemini 2.5 Pro):</b> 1M+ 토큰 컨텍스트 창을 활용해, 관련된 모든 문서, 코드, 피드백을 한 번에 제공하여 성능을 극대화합니다.</p>
<p><b>🔄 반복하고 안내하기:</b> 한 번의 완벽한 프롬프트를 기대하지 말고, 에이전트가 생성한 계획을 검토하고 수정하며 반복적으로 대화합니다.</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Common Agentic AI Traps</h2>
<p class="slide-subtitle">"데모에서는 보여주지 않는 것들"</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 text-base">
<div class="p-4 bg-red-50 border border-red-200 rounded-lg"><b>함정 1: 과잉 사용.</b><br>간단한 스크립트로 해결 가능하다면, 그게 정답이다.</div>
<div class="p-4 bg-red-50 border border-red-200 rounded-lg"><b>함정 2: 컨텍스트 관리 소홀.</b><br>컨텍스트 오염은 실패의 주요 원인이다. 정제된 단일 컨텍스트가 멀티턴보다 나을 수 있습니다.</div>
<div class="p-4 bg-red-50 border border-red-200 rounded-lg"><b>함정 3: 연쇄 오류.</b><br>1단계의 작은 오류가 5단계에서 실패로 증폭될 수 있습니다.. 각 단계별 검증이 필수다.</div>
<div class="p-4 bg-red-50 border border-red-200 rounded-lg"><b>함정 4: 검토 비용 과소평가.</b><br>AI 생성 결과물은 공짜가 아니다. 검증(테스트) 없이는 신뢰할 수 없다.</div>
<div class="p-4 bg-red-50 border border-red-200 rounded-lg"><b>함정 5: 보안.</b><br>프롬프트 인젝션에 취약합니다. 신뢰할 수 없는 데이터를 다룰 땐 최소 권한 원칙을 적용해야함.</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Deep Dive: <span class="highlight">The 100-Point Prompt</span></h2>
<p class="slide-subtitle">성공적인 컨텍스트 구조 시각화</p>
<div class="slide-content">
<p>KOI 사례의 성공은 체계적인 컨텍스트 구성에 있었다. 이는 단순한 정보 나열이 아닌, 의도적인 설계의 결과물이다.</p>
<div class="mt-6 p-6 bg-gray-50 rounded-lg border">
<h3 class="font-bold text-lg mb-4">Final Prompt Architecture</h3>
<div class="space-y-4">
<div class="flex items-start"><div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center font-bold mr-4">1</div><div><b>Core Instructions:</b> 목표와 제약조건을 명시하는 시스템 프롬프트</div></div>
<div class="flex items-start"><div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center font-bold mr-4">2</div><div><b>Problem Definition:</b> 해결해야 할 문제 원문</div></div>
<div class="flex items-start"><div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center font-bold mr-4">3</div><div><b>Historical Context:</b> 이전 단계들(1-5)의 모든 사고 과정, 코드, 검증 보고서</div></div>
<div class="flex items-start"><div class="w-8 h-8 bg-red-200 text-red-800 rounded-full flex items-center justify-center font-bold mr-4">4</div><div><b>Execution Feedback:</b> 이전 코드의 구체적인 테스트 실패 결과</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">The Economics of Agentic Workflows</h2>
<p class="slide-subtitle">비용(Cost) vs. 정확도(Accuracy)</p>
<div class="slide-content">
<p>에이전트 워크플로우는 계산 비용과 결과의 질 사이의 트레이드오프 관계를 가진다. 복잡한 파이프라인은 더 많은 토큰을 사용하지만, 더 높은 정확도를 달성할 가능성이 있습니다..</p>
<div class="mt-6 p-4 border rounded-lg text-center">
<p class="font-bold mb-2">Conceptual Graph: Cost vs. Accuracy</p>
<div class="text-6xl mt-4">📈</div>
<p class="mt-4 text-sm text-gray-600">단순 프롬프트 (저비용, 저확도) → 다단계 파이프라인 (중비용, 중확도) → 자가 수정 루프 (고비용, 고확도)</p>
<p class="mt-6 font-bold">프로덕션 환경에서는 목표 성능을 달성하는 가장 <span class="highlight">비용 효율적인 워크플로우</span>를 찾는 것이 중요합니다.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Observability & Debugging</h2>
<p class="slide-subtitle">비결정적 시스템을 어떻게 디버깅할 것인가?</p>
<div class="slide-content">
<p>에이전트의 내부 동작은 블랙박스에 가깝다. 따라서 실패 원인을 파악하기 위한 <span class="highlight">관찰 가능성(Observability)</span> 확보가 필수적이다.</p>
<ul class="list-disc list-inside mt-6 space-y-3">
<li><b>실행 추적 (Tracing):</b> 에이전트의 모든 생각, 행동, 관찰 단계를 로그로 기록. (예: LangSmith)</li>
<li><b>상태 시각화 (State Visualization):</b> 워크플로우의 각 단계에서 에이전트의 상태 변화를 시각적으로 표현합니다.</li>
<li><b>실패 패턴 분석 (Failure Pattern Analysis):</b> 반복적으로 실패하는 특정 단계나 패턴을 식별하여 근본 원인을 진단합니다.</li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Human-in-the-Loop (HITL)</h2>
<p class="slide-subtitle">인간의 개입이 필요한 시점</p>
<div class="slide-content">
<p>완전 자율은 아직 먼 목표다. 효과적인 에이전트 시스템은 인간의 감독과 개입을 전략적으로 통합합니다.</p>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-bold text-lg">전략 수립</h3>
<p class="mt-2 text-sm">초기 문제 해결 방향과 접근법을 인간이 설정</p>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-bold text-lg">위험 작업 승인</h3>
<p class="mt-2 text-sm">코드 배포, 데이터 삭제 등 되돌릴 수 없는 행동 전 최종 승인</p>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-bold text-lg">교착 상태 해결</h3>
<p class="mt-2 text-sm">에이전트가 루프에 빠지거나 모호한 상황에 직면했을 때 개입하여 방향 제시</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Security Model for AI Agents</h2>
<p class="slide-subtitle"><span class="highlight">최소 권한의 원칙</span></p>
<div class="slide-content">
<p>에이전트에게 과도한 권한을 부여하는 것은 심각한 보안 위협을 초래할 수 있습니다. 에이전트는 신뢰할 수 없는 외부 코드처럼 다루어져야 합니다.</p>
<ul class="list-disc list-inside mt-6 space-y-3">
<li><b>프롬프트 인젝션:</b> 외부 데이터(예: 이메일)에 숨겨진 악의적인 명령어가 에이전트의 행동을 조종할 수 있습니다..</li>
<li><b>데이터 유출:</b> 권한이 높은 도구를 통해 민감 정보가 외부로 유출될 수 있습니다.</li>
<li><b>최소 권한 원칙:</b> 에이전트가 사용하는 각 도구는 작업에 필요한 최소한의 권한만 가져야 합니다. (예: 파일 시스템 전체 접근 대신 특정 디렉토리 읽기/쓰기 권한만 부여)</li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Evaluating Agent Performance</h2>
<p class="slide-subtitle">정확도 그 이상의 지표</p>
<div class="slide-content">
<p>에이전트의 성능은 단순히 최종 결과의 정확도로만 평가할 수 없다. 종합적인 평가 지표가 필요합니다.</p>
<div class="mt-6 grid grid-cols-2 gap-6">
<div class="p-4 bg-gray-50 rounded-lg"><b>Task Completion Rate:</b> 주어진 작업을 성공적으로 완료하는 비율</div>
<div class="p-4 bg-gray-50 rounded-lg"><b>Cost per Task:</b> 작업 하나를 완료하는 데 드는 API 호출 비용 및 토큰 사용량</div>
<div class="p-4 bg-gray-50 rounded-lg"><b>Number of Steps/Iterations:</b> 문제 해결까지 필요한 평균 단계 또는 반복 횟수</div>
<div class="p-4 bg-gray-50 rounded-lg"><b>Robustness:</b> 프롬프트나 환경의 작은 변화에 얼마나 일관된 성능을 보이는지</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Case Study 2: Automated Research</h2>
<p class="slide-subtitle">방법론의 일반화 가능성</p>
<div class="slide-content">
<p>KOI 문제 해결에 사용된 파이프라인은 다른 분야에도 적용 가능합니다. 예를 들어, 자동화된 과학 연구 에이전트를 생각할 수 있습니다.</p>
<div class="workflow-diagram text-xs md:text-sm">
<div class="workflow-step"><div class="icon">📄</div><b>논문 검색</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">🧪</div><b>실험 설계</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">💻</div><b>코드 작성</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">📊</div><b>결과 분석</b></div>
<div class="workflow-arrow">→</div>
<div class="workflow-step"><div class="icon">📝</div><b>보고서 초안</b></div>
</div>
<p class="mt-6">이는 <span class="highlight">역할 기반 전문화와 단계적 개선</span>이라는 핵심 원칙이 특정 도메인에 국한되지 않음을 보여준다.</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">The Agentic Stack (2025)</h2>
<p class="slide-subtitle">에이전트 시스템을 구성하는 기술 계층</p>
<div class="slide-content">
<p>현대의 에이전트 시스템은 여러 기술 계층의 조합으로 이루어진다.</p>
<div class="mt-6 space-y-2 p-4 border rounded-lg">
<div class="p-3 bg-gray-800 text-white rounded-md text-center font-bold">Application Layer</div>
<div class="text-center text-gray-400">↑</div>
<div class="p-3 bg-gray-600 text-white rounded-md text-center font-bold">Orchestration (LangGraph, AutoGen)</div>
<div class="text-center text-gray-400">↑</div>
<div class="grid grid-cols-2 gap-2">
<div class="p-3 bg-gray-400 text-white rounded-md text-center font-bold">Memory (Vector DB)</div>
<div class="p-3 bg-gray-400 text-white rounded-md text-center font-bold">Tooling (MCP, APIs)</div>
</div>
<div class="text-center text-gray-400">↑</div>
<div class="p-3 bg-blue-600 text-white rounded-md text-center font-bold">Foundation Models (Gemini, Claude)</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">From Prototype to Production</h2>
<p class="slide-subtitle">프로덕션급 에이전트 배포 로드맵</p>
<div class="slide-content">
<ol class="list-decimal list-inside space-y-4">
<li><b>Manual Workflow:</b> KOI 사례처럼 수동으로 각 단계를 실행하며 최적의 워크플로우를 탐색합니다.</li>
<li><b>Automate with Framework:</b> 검증된 워크플로우를 LangGraph 등 프레임워크를 사용해 자동화합니다.</li>
<li><b>Add Observability:</b> 실행 추적, 로깅, 시각화 도구를 통합하여 시스템 동작을 모니터링합니다.</li>
<li><b>Implement Security Guardrails:</b> 도구에 최소 권한을 부여하고, 위험한 행동에 대한 승인 절차를 추가합니다.</li>
<li><b>Deploy with HITL:</b> 초기 배포 시, 주요 결정 지점에 인간의 개입(<span class="highlight">Human-in-the-Loop</span>)을 필수로 설정하고 점진적으로 자동화 범위를 넓힌다.</li>
</ol>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">The Future: <span class="highlight">Composable Agents</span></h2>
<p class="slide-subtitle">조립 가능한 전문 에이전트의 시대</p>
<div class="slide-content">
<p>미래에는 단일 목적의 전문 에이전트들이 시장에 등장하고, 개발자는 이를 레고 블록처럼 조립하여 복잡한 시스템을 구축하게 될 것이다.</p>
<p class="mt-4">예를 들어, '코드 리뷰 시스템'을 구축하기 위해 처음부터 만드는 대신, MCP를 통해 아래와 같은 전문 에이전트들을 조합할 수 있습니다.</p>
<ul class="list-disc list-inside mt-6 space-y-2">
<li><b>Linter-Agent:</b> 코드 스타일과 정적 오류를 검사</li>
<li><b>Refactor-Agent:</b> 가독성과 효율성을 개선</li>
<li><b>Test-Generator-Agent:</b> 주어진 코드에 대한 유닛 테스트 생성</li>
<li><b>Security-Audit-Agent:</b> 잠재적인 보안 취약점 분석</li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-title">Key Takeaways</h2>
<p class="slide-subtitle">핵심 요약</p>
<div class="slide-content space-y-6">
<div class="flex items-start">
<div class="text-3xl mr-5 font-black">1.</div>
<div><b class="text-xl">Engineering > Prompting</b><br>성공은 프롬프트가 아닌 엔지니어링 규율에서 나온다. 명확한 아키텍처, 상태 관리, 테스트가 핵심이다.</div>
</div>
<div class="flex items-start">
<div class="text-3xl mr-5 font-black">2.</div>
<div><b class="text-xl">Feedback is Fuel</b><br>성능 향상은 명확하고 구조화된 피드백(<span class="highlight">특히 테스트 결과</span>)을 체계적으로 주입하는 능력에 달려 있습니다.</div>
</div>
<div class="flex items-start">
<div class="text-3xl mr-5 font-black">3.</div>
<div><b class="text-xl">Control the Context</b><br>컨텍스트는 에이전트의 '코드'다. 컨텍스트 오염을 막고, 필요한 정보만 정제하여 제공하는 것이 중요.</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container text-center">
<div class="text-6xl mb-6">🎯</div>
<h2 class="slide-title">Final Conclusion</h2>
<div class="slide-content max-w-4xl mx-auto">
<p class="mb-4">'5점'에서 '100점'으로의 도약은 AI 능력의 마법이 아니라, <span class="highlight">엔지니어링 성숙도의 여정</span>이다.</p>
<p>성공적인 에이전틱 AI의 비결은 소프트웨어 엔지니어링 원칙, 즉 <b>명확한 아키텍처, 견고한 테스트, 세심한 컨텍스트 관리, 그리고 신뢰할 수 있는 시스템 구축</b>에 대한 집중에서 찾을 수 있습니다.</p>
<p class="mt-8 font-bold text-xl text-gray-800">가장 효과적인 에이전트 개발자는 결국 뛰어난 시스템 엔지니어일 것이다.</p>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container text-center">
<div class="text-7xl mb-8">👏</div>
<h1 class="text-5xl md:text-6xl font-bold text-gray-800 mb-4">Thank You</h1>
<p class="text-xl md:text-2xl text-gray-600">Q&A</p>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="progress-bar-container">
<div class="progress-bar">
<div id="progress" class="progress"></div>
</div>
<div class="flex justify-between items-center w-full max-w-6xl mx-auto">
<button id="prevBtn" class="btn btn-secondary"><i class="fa-solid fa-arrow-left mr-2"></i> 이전</button>
<span id="slideCounter" class="text-gray-600 font-medium"></span>
<button id="nextBtn" class="btn btn-primary">다음 <i class="fa-solid fa-arrow-right ml-2"></i></button>
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCounter = document.getElementById('slideCounter');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const progressBar = document.getElementById('progress');
function updateSlide() {
slides.forEach((slide, index) => {
slide.classList.remove('active');
if (index === currentSlide) {
slide.classList.add('active');
}
});
slideCounter.textContent = `Slide ${currentSlide + 1} / ${slides.length}`;
progressBar.style.width = `${((currentSlide + 1) / slides.length) * 100}%`;
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === slides.length - 1;
prevBtn.classList.toggle('opacity-50', currentSlide === 0);
prevBtn.classList.toggle('cursor-not-allowed', currentSlide === 0);
nextBtn.classList.toggle('opacity-50', currentSlide === slides.length - 1);
nextBtn.classList.toggle('cursor-not-allowed', currentSlide === slides.length - 1);
}
nextBtn.addEventListener('click', () => {
if (currentSlide < slides.length - 1) {
currentSlide++;
updateSlide();
}
});
prevBtn.addEventListener('click', () => {
if (currentSlide > 0) {
currentSlide--;
updateSlide();
}
});
function toggleVisibility(id) {
const element = document.getElementById(id);
if (element.style.display === 'none' || element.style.display === '') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
nextBtn.click();
} else if (e.key === 'ArrowLeft') {
prevBtn.click();
}
});
// Initial setup
updateSlide();
</script>
</body>
</html>