docs-100/index.html at main · robb-lee/docs-100 · GitHub

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>문서조 100건 돌파 기념 프레젠테이션</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Noto Sans KR', sans-serif;
            background-color: #333; /* Presentation background */
            color: #333;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        .presentation-wrapper {
            width: 1280px;
            height: 720px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center center;
            transform: translate(-50%, -50%);
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease-in-out;
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 10;
        }

        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: white;
            position: relative;
            overflow: hidden;
        }

        .overlay-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 40, 85, 0.03);
            z-index: 0;
        }

        .slide-content {
            position: relative;
            z-index: 1;
            height: 720px;
            width: 1280px;
            box-sizing: border-box;
        }

        .accent-color {
            color: #0056b3;
        }

        .dot-pattern {
            position: absolute;
            width: 300px;
            height: 300px;
            background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.2;
            z-index: 0;
        }

        .dot-pattern-1 { top: -50px; right: -100px; }
        .dot-pattern-2 { bottom: -150px; left: -100px; }

        /* Navigation Buttons */
        #navigation {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 50;
            display: flex;
            gap: 8px;
        }
        #navigation button {
            background-color: #0056b3;
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        #navigation button:hover { background-color: #004494; }
        #navigation button:disabled { background-color: #6c757d; cursor: not-allowed; }

        /* Page Counter */
        #page-counter {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 50;
            background: rgba(255, 255, 255, 0.9);
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>

<div class="presentation-wrapper">
    <div class="slide active">
        <div class="slide-container">
            <div class="overlay-bg"></div><div class="dot-pattern dot-pattern-1"></div><div class="dot-pattern dot-pattern-2"></div>
            <div class="slide-content flex flex-col items-center justify-center py-8 px-12 text-center">
                <div class="mb-2"><span class="inline-block px-6 py-2 rounded-full bg-blue-100 text-blue-800 font-medium text-sm mb-4"><i class="fas fa-award mr-2"></i>성과를 넘어 자산으로</span></div>
                <h1 class="text-4xl font-bold mb-4 leading-tight"><span class="accent-color">문서조 100건 돌파 기념:</span><br/>QueryPie 기술 지식 베이스 구축 전략</h1>
                <p class="text-gray-600 text-xl max-w-3xl mb-4">QueryPie 문서조가 만든 전문 기술문서의 100건 돌파를 기념하며,<br/>지금까지의 성과와 앞으로의 발전 전략을 한눈에 보여드립니다.</p>
                <div class="my-6"><img alt="문서조 100건 돌파 기념" class="max-w-sm h-auto rounded-lg shadow-lg" src="100.png"/></div>
                <div class="absolute bottom-5 w-full text-center text-gray-500 text-sm"><p>2025년 8월</p></div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div><div class="dot-pattern dot-pattern-1"></div><div class="dot-pattern dot-pattern-2"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">100건 달성 축하</span> 및 개요</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 mb-4">
                    <div class="w-1/2">
                        <div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded-r-lg mb-4"><p class="text-xl font-medium mb-2"><i class="fas fa-trophy text-yellow-500 mr-2"></i>106건의 기술문서 달성!</p><p class="text-gray-700">자발적 지식 공유 문화와 함께 꾸준히 쌓은 우리의 자산</p></div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-white rounded-lg shadow-md p-4 transition transform hover:-translate-y-1"><p class="text-sm text-gray-500">총 문서 수</p><p class="text-2xl font-bold accent-color">106<span class="text-base">건</span></p></div>
                            <div class="bg-white rounded-lg shadow-md p-4 transition transform hover:-translate-y-1"><p class="text-sm text-gray-500">작성자</p><p class="text-2xl font-bold accent-color">9<span class="text-base">명</span></p></div>
                            <div class="bg-white rounded-lg shadow-md p-4 transition transform hover:-translate-y-1"><p class="text-sm text-gray-500">최다 문서 작성자</p><p class="text-xl font-medium accent-color">Loopy<span class="text-sm">(22건)</span></p></div>
                            <div class="bg-white rounded-lg shadow-md p-4 transition transform hover:-translate-y-1"><p class="text-sm text-gray-500">작성 기간</p><p class="text-xl font-medium accent-color">18<span class="text-base">주</span></p></div>
                        </div>
                    </div>
                    <div class="w-1/2 flex flex-col justify-center items-center">
                        <div class="mb-4 text-center"><p class="text-lg font-medium text-gray-700">우리가 함께 만들어온 전문 기술 지식 베이스</p></div>
                        <div class="w-full flex justify-center"><div class="w-5/6 h-auto"><img alt="문서조 100건 달성" class="rounded-lg shadow-lg w-full" src="100.png"/></div></div>
                    </div>
                </div>
                <div class="mt-4"><p class="text-gray-700"><i class="fas fa-quote-left text-gray-400 mr-2"></i>이 성과는 9명의 팀원(Robb, Jane, Loopy, Lucas, JK, Elon, Morgan, Maretomo, Kelly)들이 각자의 자리에서 전문성을 발휘하고 자발적으로 지식을 공유해준 덕분입니다.<i class="fas fa-quote-right text-gray-400 ml-2"></i></p>
</div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col p-4">
                <div class="mb-4"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">데이터</span>로 보는 우리의 성과</h1><div class="h-1 w-24 bg-blue-600 rounded-full"></div></div>
                <div class="flex space-x-8 flex-1 items-center">
                    <div class="w-5/12">
                        <div class="mb-4"><h2 class="text-xl font-semibold mb-3">18주 동안의 놀라운 성과</h2><p class="text-gray-700 mb-4">지난 18주 동안, 우리는 총 <span class="font-bold accent-color">106건</span>의 귀중한 기술 문서를 만들어냈습니다. 이 성과는 <span class="font-bold accent-color">9명</span>의 팀원들이 각자의 자리에서 전문성을 발휘하고 자발적으로 지식을 공유해준 덕분입니다.</p></div>
                        <div class="grid grid-cols-2 gap-3 mb-3">
                            <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-blue-600"><p class="text-sm text-gray-500">최고 생산 주간</p><p class="text-xl font-bold flex items-end"><span class="text-2xl text-blue-600">11</span><span class="text-sm ml-1">주차</span><span class="text-sm ml-2 text-gray-600">(12건)</span></p></div>
                            <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-green-600"><p class="text-sm text-gray-500">문서왕 </p><p class="text-xl font-bold flex items-end"><span class="text-2xl text-green-600">Loopy</span><span class="text-sm ml-2 text-gray-600">(22건)</span></p></div>
                        </div>
                        <div class="mt-6"><h3 class="text-lg font-medium mb-2">주요 인사이트</h3><ul class="text-gray-700 space-y-2"><li><i class="fas fa-check-circle text-blue-500 mr-2"></i>문서화 작업이 실제 현장의 요구와 긴밀하게 호흡</li><li><i class="fas fa-check-circle text-blue-500 mr-2"></i>할당량이 아닌 필요에 따른 '살아있는 활동'</li><li><i class="fas fa-check-circle text-blue-500 mr-2"></i>자발적 참여 문화의 형성</li></ul></div>
                    </div>
                    <div class="w-7/12">
                        <div class="bg-gray-50 rounded-lg p-4 shadow-sm"><h3 class="text-lg font-medium mb-2">주차별 문서 생산량</h3><div style="position: relative; height: 340px; width: 100%;"><canvas id="weeklyChart"></canvas></div><p class="text-xs text-gray-500 text-center">11주차에 최대 12건 생산, 10주차와 13주차는 0건</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">콘텐츠</span> 분석: 무엇을 공유했는가</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 flex-1">
                    <div class="w-5/12">
                        <div class="mb-3"><h2 class="text-xl font-semibold mb-2">전문가를 위한 기술 지식 베이스</h2><p class="text-gray-700 mb-3">106건의 문서 제목을 분석한 결과, 우리의 지식 공유는 <span class="font-bold accent-color">기술 지원 엔지니어와 파트너</span>라는 명확한 대상을 중심으로 이루어지고 있습니다. 이는 최종 사용자 매뉴얼과는 차별화된, 깊이 있는 기술적 난제를 해결하는 자산입니다.</p></div>
                        <div class="space-y-2">
                            <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-blue-600"><div class="flex items-center mb-2"><div class="rounded-full bg-blue-100 p-2 mr-3"><i class="fas fa-tools text-blue-600"></i></div><h3 class="font-medium">문제 해결 및 이슈 대응 <span class="text-sm text-gray-500">(Reactive)</span></h3></div><p class="text-sm text-gray-600">현장에서 발생하는 복잡한 문제에 대한 해결책 제시. 고객과 현장의 시급한 고충을 해결하는 데 집중.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-green-600"><div class="flex items-center mb-2"><div class="rounded-full bg-green-100 p-2 mr-3"><i class="fas fa-map text-green-600"></i></div><h3 class="font-medium">설치, 배포, 연동 <span class="text-sm text-gray-500">(Prescriptive)</span></h3></div><p class="text-sm text-gray-600">엔터프라이즈 환경에서 제품을 성공적으로 구축하고 통합하는 데 필요한 실질적 가이드 제공.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-yellow-600"><div class="flex items-center mb-2"><div class="rounded-full bg-yellow-100 p-2 mr-3"><i class="fas fa-info-circle text-yellow-600"></i></div><h3 class="font-medium">기능 명세 및 업데이트 <span class="text-sm text-gray-500">(Informative)</span></h3></div><p class="text-sm text-gray-600">신규 릴리스 변경점이나 특정 기능의 상세 명세를 다루며, 최신 기술 정보를 정확하게 전파.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-4 border-l-4 border-purple-600"><div class="flex items-center mb-2"><div class="rounded-full bg-purple-100 p-2 mr-3"><i class="fas fa-sitemap text-purple-600"></i></div><h3 class="font-medium">개념 및 아키텍처 <span class="text-sm text-gray-500">(Foundational)</span></h3></div><p class="text-sm text-gray-600">제품의 근본적인 동작 원리를 설명. 단순한 문제 해결을 넘어, 기술에 대한 깊이 있는 이해 공유.</p></div>
                        </div>
                    </div>
                    <div class="w-7/12">
                        <div class="bg-gray-50 rounded-lg p-4 shadow-sm mb-3"><h3 class="text-lg font-medium mb-2">문서 유형 분포</h3><div style="position: relative; height: 200px; width: 100%;"><canvas id="docTypeChart"></canvas></div></div>
                        <div class="bg-gray-50 rounded-lg p-4 shadow-sm"><h3 class="text-lg font-medium mb-2">유형별 대표 문서 예시</h3><div class="h-56 overflow-y-auto text-sm">
                            <div class="mb-4"><p class="text-blue-600 font-medium mb-1"><i class="fas fa-tools mr-2"></i>문제 해결 및 이슈 대응</p><ul class="ml-6 list-disc text-gray-700 space-y-1"><li>"Agent Connection check failed 로그 과다 생성"</li><li>"Agent Token has expired 오류 해결 가이드"</li><li>"Agent 연결 오류: "No such host is known" (프록시 설정 문제)"</li></ul></div>
                            <div class="mb-4"><p class="text-green-600 font-medium mb-1"><i class="fas fa-map mr-2"></i>설치, 배포, 연동</p><ul class="ml-6 list-disc text-gray-700 space-y-1"><li>"AWS EC2에서 Docker를 통한 HashiCorp Vault 구축 가이드"</li><li>"QueryPie 설치 가이드 (폐쇄망 환경 전용)"</li><li>"QueryPie RDP 캡처 로그 외부 저장소(S3/MinIO) 연동 및 마이그레이션 가이드"</li></ul></div>
                            <div class="mb-4"><p class="text-yellow-600 font-medium mb-1"><i class="fas fa-info-circle mr-2"></i>기능 명세 및 업데이트</p><ul class="ml-6 list-disc text-gray-700 space-y-1"><li>"[Integration] Slack DM 테스트 기능 추가"</li><li>"QueryPie 프록시 포트 관리 가이드"</li><li>"QueryPie AWS 최소 권한 정책 가이드"</li></ul></div>
                            <div><p class="text-purple-600 font-medium mb-1"><i class="fas fa-sitemap mr-2"></i>개념 및 아키텍처</p><ul class="ml-6 list-disc text-gray-700 space-y-1"><li>"QueryPie SAC CommandDetection 작동 원리"</li><li>"SAC/DAC - Redis 역할"</li><li>"QueryPie 자체 쿼리 실행 로직 및 개선"</li></ul></div>
                        </div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">현재의 강점</span>과 미래의 기회</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 flex-1">
                    <div class="w-5/12 flex flex-col justify-center">
                        <div class="mb-12"><h2 class="text-lg font-semibold mb-2 text-blue-600"><i class="fas fa-award mr-2"></i>우리가 증명한 강점</h2><div class="bg-white rounded-lg shadow-sm p-2 border-l-4 border-blue-600 mb-2"><h3 class="text-base font-bold mb-1">최고 수준의 기술 전문성</h3><p class="text-gray-700 text-sm">AWS, Vault, Docker 등 복잡한 엔터프라이즈 기술 스택에 대한 깊이 있는 해결책을 제시하며, 현장의 신뢰를 얻고 있습니다.</p></div><div class="bg-white rounded-lg shadow-sm p-2 border-l-4 border-blue-600"><h3 class="text-base font-bold mb-1">높은 현장 대응성</h3><p class="text-gray-700 text-sm">고객과 내부 팀의 긴급한 요청에 신속하게 반응하며, 문제 해결의 최전선에서 활약하고 있습니다.</p></div></div>
                        <div class="mb-12"><h2 class="text-lg font-semibold mb-2 text-green-600"><i class="fas fa-rocket mr-2"></i>우리의 다음 단계를 위한 기회</h2><div class="bg-white rounded-lg shadow-sm p-2 border-l-4 border-green-600 mb-2"><h3 class="text-base font-bold mb-1">'예방적(Proactive)' 콘텐츠로의 확장</h3><p class="text-gray-700 text-sm">현재의 '대응적' 문제 해결 콘텐츠에 더해, 아키텍처 심층 분석이나 모범 사례 같은 '예방적' 콘텐츠를 강화하여 문제 발생 자체를 줄일 수 있습니다.</p></div><div class="bg-white rounded-lg shadow-sm p-2 border-l-4 border-green-600"><h3 class="text-base font-bold mb-1">지식의 체계화 및 연결</h3><p class="text-gray-700 text-sm">개별적으로 훌륭한 문서들을 유기적으로 연결하고 체계화하여, 단편적인 지식을 넘어 하나의 완성된 '지식 그래프'를 구축할 기회가 있습니다.</p></div></div>
                    </div>
                    <div class="w-7/12 flex flex-col justify-center">
                        <div class="bg-gray-50 rounded-lg p-3 shadow-sm"><h3 class="text-base font-medium mb-2 text-center">강점에서 기회로의 전환</h3>
                            <div class="flex items-center justify-center mb-2"><div class="text-center p-4 bg-blue-100 rounded-lg w-64"><i class="fas fa-tools text-blue-600 text-3xl mb-3"></i><h4 class="font-bold text-blue-800">대응적 문제 해결</h4><p class="text-sm text-blue-700">문제 발생 후 신속한 해결책 제공</p></div><div class="px-4 text-blue-600"><i class="fas fa-long-arrow-alt-right text-2xl"></i></div><div class="text-center p-4 bg-green-100 rounded-lg w-64"><i class="fas fa-lightbulb text-green-600 text-3xl mb-3"></i><h4 class="font-bold text-green-800">예방적 가이드 제공</h4><p class="text-sm text-green-700">개념과 모범 사례를 통해 문제 예방</p></div></div>
                            <div class="flex items-center justify-center mb-2"><div class="text-center p-4 bg-blue-100 rounded-lg w-64"><i class="fas fa-exclamation-circle text-blue-600 text-3xl mb-3"></i><h4 class="font-bold text-blue-800">이슈 중심</h4><p class="text-sm text-blue-700">특정 오류나 이슈에 집중</p></div><div class="px-4 text-blue-600"><i class="fas fa-long-arrow-alt-right text-2xl"></i></div><div class="text-center p-4 bg-green-100 rounded-lg w-64"><i class="fas fa-user-cog text-green-600 text-3xl mb-3"></i><h4 class="font-bold text-green-800">페르소나 및 목표 중심</h4><p class="text-sm text-green-700">전문가의 역할과 목표에 집중</p></div></div>
                            <div class="flex items-center justify-center"><div class="text-center p-4 bg-blue-100 rounded-lg w-64"><i class="fas fa-file-alt text-blue-600 text-3xl mb-3"></i><h4 class="font-bold text-blue-800">독립된 솔루션</h4><p class="text-sm text-blue-700">파편화된 정보</p></div><div class="px-4 text-blue-600"><i class="fas fa-long-arrow-alt-right text-2xl"></i></div><div class="text-center p-4 bg-green-100 rounded-lg w-64"><i class="fas fa-network-wired text-green-600 text-3xl mb-3"></i><h4 class="font-bold text-green-800">상호 연결된 지식 그래프</h4><p class="text-sm text-green-700">유기적인 지식 네트워크</p></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">벤치마킹</span>: Arch Linux Wiki의 성공 공식</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-4 h-full items-center justify-center">
                    <!-- 좌측 열 -->
                    <div class="w-1/2 space-y-3">
                        <!-- 2.1. 성공의 바탕, 명확한 철학 -->
                        <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-blue-600">
                            <h2 class="text-base font-semibold mb-2 text-blue-700">2.1. 성공의 바탕, 명확한 철학</h2>
                            <p class="text-gray-700 mb-2 text-xs">훌륭한 위키는 명확한 철학의 구현체입니다. Arch Wiki의 성공은 그 근간을 이루는 핵심 원칙에서 비롯됩니다.</p>
                            <div class="grid grid-cols-1 gap-2 mb-2">
                                <div class="bg-blue-50 rounded p-2">
                                    <h4 class="text-xs font-medium text-blue-800 mb-1">핵심 원칙</h4>
                                    <p class="text-xs text-gray-700">단순성, 현대성, 실용주의, 사용자 중심주의</p>
                                </div>
                                <div class="bg-blue-50 rounded p-2">
                                    <h4 class="text-xs font-medium text-blue-800 mb-1">사용자 중심주의 재정의</h4>
                                    <p class="text-xs text-gray-700">"DIY 의지가 있는" 숙련된 사용자 대상</p>
                                </div>
                                <div class="bg-blue-50 rounded p-2">
                                    <h4 class="text-xs font-medium text-blue-800 mb-1">업스트림 중심 접근</h4>
                                    <p class="text-xs text-gray-700">소프트웨어 원본을 설명하여 권위 확립</p>
                                </div>
                            </div>
                            <div class="bg-blue-50 border border-blue-200 rounded p-2">
                                <p class="text-xs text-blue-800"><i class="fas fa-lightbulb mr-1"></i><strong>QueryPie 적용:</strong> 지원 도구를 넘어 사상적 리더십 플랫폼으로 격상, 비즈니스 성장에 직접 기여하는 전략적 자산으로 가치 재정의</p>
                            </div>
                        </div>

                        <!-- 2.2. 탁월한 사용성, 기능으로서의 일관성 -->
                        <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-green-600">
                            <h2 class="text-base font-semibold mb-2 text-green-700">2.2. 탁월한 사용성, 기능으로서의 일관성</h2>
                            <p class="text-gray-700 mb-2 text-xs">Arch Wiki가 높은 사용성을 자랑하는 이유는 모든 문서에 걸쳐 유지되는 구조적, 문체적 일관성 때문입니다. 이러한 일관성은 사용자의 인지 부하(cognitive load)를 줄여 정보 습득 효율을 극대화하는 핵심 기능입니다.</p>
                            <div class="grid grid-cols-2 gap-2">
                                <div class="bg-green-50 rounded p-2">
                                    <h4 class="text-xs font-medium text-green-800 mb-1">표준화된 레이아웃 및 섹션</h4>
                                    <p class="text-xs text-gray-700">"설치", "구성", "문제 해결" 섹션의 반복적 사용으로 예측 가능한 정보 구조 제공</p>
                                </div>
                                <div class="bg-green-50 rounded p-2">
                                    <h4 class="text-xs font-medium text-green-800 mb-1">엄격한 서식 규칙</h4>
                                    <p class="text-xs text-gray-700 mb-1">명령어 실행 컨텍스트 즉시 파악:</p>
                                    <div class="font-mono bg-gray-800 text-gray-200 p-1 rounded text-xs">
                                        <span class="text-red-400"># </span>루트 권한<br/>
                                        <span class="text-green-400">$ </span>일반 사용자
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 우측 열 -->
                    <div class="w-1/2 flex flex-col">
                        <!-- 2.3. 지식의 연결, 페이지 목록에서 지식 그래프로 -->
                        <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-purple-600 h-full flex flex-col">
                            <h2 class="text-base font-semibold mb-2 text-purple-700">2.3. 지식의 연결, 페이지 목록에서 지식 그래프로</h2>
                            <p class="text-gray-700 mb-4 text-xs">Arch Wiki의 진정한 힘은 개별 문서의 품질을 넘어, 이들을 유기적으로 연결하여 하나의 거대한 '지식 그래프(Knowledge Graph)'를 형성하는 데 있습니다.</p>

                            <div class="flex-1 space-y-4">
                                <div class="bg-purple-50 rounded p-4">
                                    <h4 class="text-sm font-bold text-purple-800 mb-3"><i class="fas fa-copy mr-2"></i>DRY 원칙 ("Don't Repeat Yourself")</h4>
                                    <p class="text-xs text-gray-700 mb-2">한 가지 정보는 단 한 곳에만 존재해야 하며, 대신 관련된 정보로 적극적으로 링크를 연결합니다.</p>
                                    <p class="text-xs text-gray-600 italic">예: 설치 가이드는 한 곳에만 작성하고, 다른 문서에서는 링크로 참조</p>
                                </div>

                                <div class="bg-purple-50 rounded p-4">
                                    <h4 class="text-sm font-bold text-purple-800 mb-3"><i class="fas fa-link mr-2"></i>적극적인 상호 연결</h4>
                                    <p class="text-xs text-gray-700 mb-2">각 문서는 전제 조건이 되는 개념, 관련된 주제 등으로 촘촘하게 연결되어 사용자를 자연스러운 학습 경로로 안내합니다.</p>
                                    <p class="text-xs text-gray-600 italic">예: 고급 설정 문서 → 기본 설치 문서 → 필수 개념 문서</p>
                                </div>
                            </div>

                            <div class="bg-purple-100 border border-purple-200 rounded p-3 mt-4">
                                <p class="text-xs text-purple-800"><i class="fas fa-network-wired mr-1"></i><strong>결과:</strong> 개별 페이지 목록이 아닌 유기적으로 연결된 지식 생태계 구축</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">QueryPie 기술 KB</span> 비전 및 핵심 원칙</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 flex-1">
                    <div class="w-5/12">
                        <div class="mb-4"><h2 class="text-xl font-semibold mb-3">우리 일에 '이름' 붙여주기</h2><p class="text-gray-700 mb-4">본능적으로 따르고 있던 원칙들을 명문화하여, 우리의 정체성을 확립하고 일관성을 강화합니다. QueryPie 기술 지식 베이스는 단순한 문서를 넘어 전략적 비즈니스 자산으로 발전합니다.</p></div>
                        <div class="mt-6"><h3 class="text-lg font-medium mb-4">지식 베이스의 가치</h3>
                            <div class="flex items-start mb-4"><div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0"><i class="fas fa-arrow-trend-up"></i></div><div><p class="font-medium">대응적에서 <span class="accent-color">예방적</span>으로</p><p class="text-sm text-gray-600">문제가 발생한 후 해결책을 제공하는 것을 넘어, 모범 사례와 아키텍처 심층 분석을 통해 문제 발생을 미리 예방합니다.</p></div></div>
                            <div class="flex items-start mb-4"><div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0"><i class="fas fa-network-wired"></i></div><div><p class="font-medium">파편화에서 <span class="accent-color">연결성</span>으로</p><p class="text-sm text-gray-600">독립된 솔루션에서 유기적으로 연결된 지식 그래프로 발전하여 더 깊은 이해와 통찰을 제공합니다.</p></div></div>
                            <div class="flex items-start"><div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0"><i class="fas fa-gem"></i></div><div><p class="font-medium">비용 센터에서 <span class="accent-color">가치 창출</span>로</p><p class="text-sm text-gray-600">단순한 지원 효율화를 넘어, 시장 교육과 기술 리더십으로 비즈니스 성장에 직접 기여합니다.</p></div></div>
                        </div>
                    </div>
                    <div class="w-7/12">
                        <div class="grid grid-cols-2 gap-6 h-full">
                            <div class="bg-white rounded-lg shadow-md p-3 flex flex-col transition transform hover:-translate-y-1 border-t-4 border-blue-600"><div class="w-14 h-14 rounded-full flex items-center justify-center mb-4 bg-blue-600 text-white text-2xl"><i class="fas fa-user-tie"></i></div><h3 class="text-lg font-semibold mb-2">전문가 중심</h3><p class="text-gray-600 text-sm flex-grow">최종 사용자가 아닌, 기술 엔지니어와 파트너, 고급 사용자를 위한 깊이 있는 기술 콘텐츠에 집중합니다.</p><div class="mt-3 text-blue-600 text-sm font-medium">Expert-Centric</div></div>
                            <div class="bg-white rounded-lg shadow-md p-3 flex flex-col transition transform hover:-translate-y-1 border-t-4 border-green-600"><div class="w-14 h-14 rounded-full flex items-center justify-center mb-4 bg-green-600 text-white text-2xl"><i class="fas fa-sitemap"></i></div><h3 class="text-lg font-semibold mb-2">아키텍처 우선</h3><p class="text-gray-600 text-sm flex-grow">사용법('How')을 넘어, 왜 그렇게 작동하는지에 대한 근본적인 아키텍처와 설계 사상('Why')을 공유합니다.</p><div class="mt-3 text-green-600 text-sm font-medium">Architecture First</div></div>
                            <div class="bg-white rounded-lg shadow-md p-3 flex flex-col transition transform hover:-translate-y-1 border-t-4 border-purple-600"><div class="w-14 h-14 rounded-full flex items-center justify-center mb-4 bg-purple-600 text-white text-2xl"><i class="fas fa-check-double"></i></div><h3 class="text-lg font-semibold mb-2">실용적이고 검증된 지침</h3><p class="text-gray-600 text-sm flex-grow">실제 운영 환경에서 검증된 모범 사례(Best Practices)와 참조 아키텍처(Reference Architectures)를 제공합니다.</p><div class="mt-3 text-purple-600 text-sm font-medium">Practical & Proven</div></div>
                            <div class="bg-white rounded-lg shadow-md p-3 flex flex-col transition transform hover:-translate-y-1 border-t-4 border-yellow-600"><div class="w-14 h-14 rounded-full flex items-center justify-center mb-4 bg-yellow-600 text-white text-2xl"><i class="fas fa-database"></i></div><h3 class="text-lg font-semibold mb-2">신뢰할 수 있는 단일 진실 공급원</h3><p class="text-gray-600 text-sm flex-grow">모든 기술 지식의 최종적이고 유일한 출처로서, 모든 팀이 신뢰하고 활용하는 중심축이 됩니다.</p><div class="mt-3 text-yellow-600 text-sm font-medium">A Single Source of Truth</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">우리의 지식을 담을 그릇</span>: 정보 아키텍처 제안</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 flex-1">
                    <div class="w-5/12">
                        <div class="mb-3"><h2 class="text-lg font-semibold mb-2">체계적인 지식 구조로 발전하기</h2><p class="text-gray-700 mb-3 text-sm">우리가 쌓아온, 그리고 앞으로 쌓아갈 지식들을 더 찾기 쉽고 이해하기 쉽게 만들기 위해 다음과 같은 체계적인 구조를 제안합니다.</p></div>
                        <div class="space-y-2">
                            <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-blue-500"><h3 class="text-sm font-bold flex items-center mb-1"><i class="fas fa-project-diagram mr-2 text-blue-500"></i>아키텍처 심층 분석 (Architecture Deep Dive)</h3><p class="text-xs text-gray-600">제품의 '왜(Why)'를 설명하는 공간. 제품 아키텍처, 보안 모델, 데이터 흐름, 주요 용어 등 제품을 깊이 있게 이해하는 데 필요한 핵심 지식을 제공합니다.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-green-500"><h3 class="text-sm font-bold flex items-center mb-1"><i class="fas fa-server mr-2 text-green-500"></i>프로덕션 운영 가이드 (Production & Operations)</h3><p class="text-xs text-gray-600">설치, 업그레이드, 모니터링, 고가용성(HA) 구성, 백업 및 복구 등 프로덕션 환경에서 제품을 안정적으로 운영하기 위한 모든 실전 기술 가이드를 포함합니다.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-yellow-500"><h3 class="text-sm font-bold flex items-center mb-1"><i class="fas fa-plug mr-2 text-yellow-500"></i>연동 패턴 및 고급 활용 (Integration Patterns)</h3><p class="text-xs text-gray-600">모든 서드파티 시스템과의 연동 방법을 체계적으로 정리합니다. 단순 연동을 넘어, 복잡한 환경에서 발생하는 예외 케이스와 최적화 패턴을 다룹니다.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-red-500"><h3 class="text-sm font-bold flex items-center mb-1"><i class="fas fa-tools mr-2 text-red-500"></i>문제 해결 (Troubleshooting)</h3><p class="text-xs text-gray-600">기존의 문제 해결 가이드를 체계적으로 분류하고 정리한 저장소. 오류 메시지, 증상, 구성 요소별로 쉽게 검색하고 참조할 수 있도록 구성합니다.</p></div>
                            <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-purple-500"><h3 class="text-sm font-bold flex items-center mb-1"><i class="fas fa-lightbulb mr-2 text-purple-500"></i>솔루션 및 전략 가이드 (Solutions & Strategy)</h3><p class="text-xs text-gray-600">제품 기능을 넘어, QueryPie를 활용하여 특정 비즈니스 문제(예: 컴플라이언스, 보안 강화)를 해결하는 방법에 대한 전략적 가이드와 기술 비교 자료를 제공합니다.</p></div>
                        </div>
                    </div>
                    <div class="w-7/12">
                        <div class="bg-white rounded-lg p-3 shadow-sm h-full flex flex-col">
                            <h3 class="text-lg font-medium mb-3 text-center">품질 유지를 위한 약속: 스타일 및 기여 가이드</h3>
                            <p class="text-sm text-gray-700 mb-4 text-center">지식 베이스의 품질과 일관성을 장기적으로 유지하기 위해, 우리만의 '스타일 및 기여 가이드'를 수립하고 함께 지켜나갈 것을 제안합니다.</p>

                            <div class="grid grid-cols-2 gap-3 flex-1">
                                <div class="bg-blue-50 rounded-lg p-3 border-l-4 border-blue-500 flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-2">
                                            <i class="fas fa-file-alt text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-sm">문서 템플릿</h4>
                                    </div>
                                    <p class="text-xs text-gray-700 flex-1">'문제 해결 가이드', '연동 가이드' 등 문서 유형별 표준 템플릿을 제공하여 일관성을 확보합니다.</p>
                                </div>

                                <div class="bg-green-50 rounded-lg p-3 border-l-4 border-green-500 flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center mr-2">
                                            <i class="fas fa-code text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-sm">서식 표준</h4>
                                    </div>
                                    <p class="text-xs text-gray-700 flex-1">코드, 명령어, 설정 파일 등을 표현하는 방식을 통일하여 가독성과 정확성을 높입니다.</p>
                                </div>

                                <div class="bg-yellow-50 rounded-lg p-3 border-l-4 border-yellow-500 flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <div class="w-8 h-8 rounded-full bg-yellow-500 text-white flex items-center justify-center mr-2">
                                            <i class="fas fa-link text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-sm">링크 정책</h4>
                                    </div>
                                    <p class="text-xs text-gray-700 flex-1">주요 용어와 선행 개념 문서로의 연결을 장려하여 지식 그래프를 강화합니다.</p>
                                </div>

                                <div class="bg-purple-50 rounded-lg p-3 border-l-4 border-purple-500 flex flex-col">
                                    <div class="flex items-center mb-2">
                                        <div class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center mr-2">
                                            <i class="fas fa-users text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-sm">기여 프로세스</h4>
                                    </div>
                                    <p class="text-xs text-gray-700 flex-1">문서 작성, 검토, 게시에 대한 명확한 워크플로우를 정의하여 지식의 정확성을 보장하고 더 많은 참여를 독려합니다.</p>
                                </div>
                            </div>

                            <div class="mt-4 bg-gray-50 rounded-lg p-3">
                                <p class="text-xs text-gray-700 text-center"><i class="fas fa-lightbulb text-blue-500 mr-1"></i><strong>결과:</strong> 개별 페이지 목록이 아닌 유기적으로 연결된 지식 생태계 구축</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-2"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">예방적 콘텐츠 강화</span> 및 <span class="accent-color">경험의 자산화</span></h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-3"></div></div>
                <div class="flex justify-center items-center flex-1">
                    <div class="w-5/6 max-w-6xl">
                        <div class="flex space-x-6 h-full">
                            <!-- 4.1 카드 -->
                            <div class="w-1/2 bg-white rounded-xl shadow-lg border-t-4 border-blue-600 p-5 transition transform hover:-translate-y-1">
                                <div class="text-center mb-4">
                                    <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
                                        <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
                                    </div>
                                    <h2 class="text-lg font-bold text-blue-700 mb-2">4.1. 예방적 콘텐츠 강화: 아키텍처 심층 분석</h2>
                                    <p class="text-gray-700 text-sm">문제가 터지기 전에 엔지니어들이 내부 동작 원리를 더 깊이 이해하도록 돕습니다. (QueryPie SAC CommandDetection 작동 원리 같은 문서가 좋은 예시입니다.)</p>
                                </div>
                                <div class="space-y-3">
                                    <div class="bg-blue-50 rounded-lg p-3 border-l-4 border-blue-500">
                                        <h3 class="text-sm font-bold mb-1"><i class="fas fa-project-diagram mr-2 text-blue-500"></i>QueryPie 아키텍처: 구성 요소와 데이터 흐름</h3>
                                        <p class="text-xs text-gray-600">QueryPie를 구성하는 주요 컴포넌트의 역할과 이들 간의 데이터 흐름을 설명하는 고수준의 아키텍처 다이어그램과 설명을 제공합니다.</p>
                                    </div>
                                    <div class="bg-blue-50 rounded-lg p-3 border-l-4 border-blue-500">
                                        <h3 class="text-sm font-bold mb-1"><i class="fas fa-shield-alt mr-2 text-blue-500"></i>QueryPie 보안 모델의 이해: 데이터를 위한 제로 트러스트</h3>
                                        <p class="text-xs text-gray-600">QueryPie가 어떻게 제로 트러스트(Zero Trust) 원칙을 데이터 접근 제어에 적용하는지, 그 철학적, 기술적 접근 방식을 설명합니다.</p>
                                    </div>
                                    <div class="bg-blue-50 rounded-lg p-3 border-l-4 border-blue-500">
                                        <h3 class="text-sm font-bold mb-1"><i class="fas fa-network-wired mr-2 text-blue-500"></i>QueryPie의 세션 및 커넥션 관리 방식</h3>
                                        <p class="text-xs text-gray-600">사용자가 클라이언트 도구를 통해 데이터 소스에 접속할 때, 내부적으로 프록시 세션과 데이터베이스 커넥션이 어떻게 생성되고 관리되는지에 대한 기술적 심층 분석을 제공합니다.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 4.2 카드 -->
                            <div class="w-1/2 bg-white rounded-xl shadow-lg border-t-4 border-green-600 p-5 transition transform hover:-translate-y-1">
                                <div class="text-center mb-4">
                                    <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
                                        <i class="fas fa-gem text-green-600 text-xl"></i>
                                    </div>
                                    <h2 class="text-lg font-bold text-green-700 mb-2">4.2. 경험의 자산화: 모범 사례 및 운영 패턴</h2>
                                    <p class="text-gray-700 text-sm">단순히 기능을 알려주는 것을 넘어, 검증된 운영 노하우와 참조 아키텍처를 제공하여 실수를 줄여줍니다.</p>
                                </div>
                                <div class="space-y-3 mb-4">
                                    <div class="bg-green-50 rounded-lg p-3 border-l-4 border-green-500">
                                        <h3 class="text-sm font-bold mb-1"><i class="fas fa-server mr-2 text-green-500"></i>QueryPie 고가용성(High-Availability) 배포 참조 아키텍처</h3>
                                        <p class="text-xs text-gray-600">장애 발생 시에도 서비스 중단을 최소화할 수 있는 이중화 구성 및 페일오버 전략을 제공합니다.</p>
                                    </div>
                                    <div class="bg-green-50 rounded-lg p-3 border-l-4 border-green-500">
                                        <h3 class="text-sm font-bold mb-1"><i class="fas fa-tachometer-alt mr-2 text-green-500"></i>대규모 설치 환경을 위한 성능 튜닝 가이드</h3>
                                        <p class="text-xs text-gray-600">수천 명의 사용자 또는 수백 개의 데이터 소스를 관리하는 환경에서 발생할 수 있는 성능 병목 현상을 진단하고 개선하기 위한 모범 사례를 제시합니다.</p>
                                    </div>
                                    <div class="bg-green-50 rounded-lg p-3 border-l-4 border-green-500">
                                        <h3 class="text-sm font-bold mb-1"><i class="fas fa-shield-alt mr-2 text-green-500"></i>QueryPie를 위한 백업 및 재해 복구(DR) 전략</h3>
                                        <p class="text-xs text-gray-600">MetaDB와 주요 설정 정보에 대한 정기적인 백업 방법과, 시스템 장애 시 이를 신속하게 복구하기 위한 절차를 상세히 기술한 필수 운영 가이드입니다.</p>
                                    </div>
                                </div>

                                <div class="bg-blue-50 rounded-lg p-3 border border-blue-200">
                                    <h4 class="text-sm font-bold text-blue-800 mb-2 text-center"><i class="fas fa-lightbulb mr-2"></i>핵심 가치</h4>
                                    <ul class="text-xs text-blue-700 space-y-1">
                                        <li>• <strong>비용 절감:</strong> 문제 예방으로 지원 비용 절약</li>
                                        <li>• <strong>신뢰 구축:</strong> 깊이 있는 전문성으로 고객 신뢰 확보</li>
                                        <li>• <strong>지식 자산화:</strong> 개인 노하우를 조직 자산으로 전환</li>
                                        <li>• <strong>품질 보장:</strong> 검증된 방식으로 구축 실패 위험 감소</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1">가치의 확장: <span class="accent-color">전략적 콘텐츠</span> 개발</h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 flex-1">
                    <div class="w-5/12">
                        <div class="mb-3"><h2 class="text-xl font-semibold mb-2">기술 지원을 넘어 리더십으로</h2><p class="text-gray-700 mb-3">기술 지원을 넘어, 잠재 고객과 파트너의 기술적 의사결정을 돕고 QueryPie의 기술 리더십을 보여주는 콘텐츠를 개발합니다. 이를 통해 '비용 센터'가 아닌 '비즈니스 자산'으로 가치를 확장합니다.</p></div>
                        <div class="mb-3"><div class="flex items-center mb-3"><div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3"><i class="fas fa-balance-scale"></i></div><h3 class="text-lg font-semibold">기술 비교 콘텐츠</h3></div><p class="text-gray-700 mb-2 ml-12">QueryPie와 전통적인 방식의 비교를 통해 우리 솔루션의 장점을 명확히 부각시키는 콘텐츠입니다.</p><div class="ml-12 text-sm text-gray-600 italic">예: "QueryPie vs. 전통적인 배스천 호스트(Bastion Host)"</div></div>
                        <div class="mb-3"><div class="flex items-center mb-3"><div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3"><i class="fas fa-shield-alt"></i></div><h3 class="text-lg font-semibold">솔루션 패턴 가이드</h3></div><p class="text-gray-700 mb-2 ml-12">특정 비즈니스 과제를 QueryPie로 해결하는 방법을 제시하는 전략적 가이드입니다.</p><div class="ml-12 text-sm text-gray-600 italic">예: "QueryPie를 활용한 PCI-DSS 컴플라이언스 달성"</div></div>
                        <div class="mb-4"><div class="flex items-center mb-3"><div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3"><i class="fas fa-key"></i></div><h3 class="text-lg font-semibold">최적 솔루션 선택 가이드</h3></div><p class="text-gray-700 mb-2 ml-12">고객 환경에 맞는 최적의 솔루션을 선택하도록 돕는 의사결정 가이드입니다.</p><div class="ml-12 text-sm text-gray-600 italic">예: "최적의 Secrets Management 백엔드 선택 가이드"</div></div>
                    </div>
                    <div class="w-7/12">
                        <div class="bg-white rounded-lg shadow-sm p-3 border-l-4 border-blue-600 h-full"><h3 class="text-lg font-medium mb-4 text-center">기술적 우위에서 비즈니스 가치로</h3>
                            <div class="border border-gray-200 rounded-lg p-4 relative flex mb-4"><div class="w-1/2 pr-8"><h4 class="font-medium mb-2 text-red-600">전통적 기술 문서</h4><ul class="text-sm space-y-2"><li class="flex items-start"><i class="fas fa-minus-circle text-red-500 mt-1 mr-2"></i><span>사용 방법에만 초점</span></li><li class="flex items-start"><i class="fas fa-minus-circle text-red-500 mt-1 mr-2"></i><span>문제 발생 후 해결책 제시</span></li><li class="flex items-start"><i class="fas fa-minus-circle text-red-500 mt-1 mr-2"></i><span>비용 센터로 인식</span></li></ul></div><div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center z-10">VS</div><div class="w-1/2 pl-8"><h4 class="font-medium mb-2 text-green-600">전략적 기술 콘텐츠</h4><ul class="text-sm space-y-2"><li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i><span>비즈니스 과제 해결에 초점</span></li><li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i><span>의사결정 지원과 예방적 접근</span></li><li class="flex items-start"><i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i><span>비즈니스 성장에 기여하는 자산</span></li></ul></div></div>
                            <div class="mb-4 bg-gray-50 p-3 rounded-lg"><h4 class="font-medium mb-3 text-center">전략적 콘텐츠의 비즈니스 효과</h4><div class="flex justify-around"><div class="text-center"><div class="text-blue-600 mb-1 text-2xl"><i class="fas fa-handshake"></i></div><p class="font-medium">파트너십 강화</p><p class="text-sm text-gray-600">기술 선택을 돕는<br/>신뢰할 수 있는 조언자</p></div><div class="text-center"><div class="text-blue-600 mb-1 text-2xl"><i class="fas fa-chart-line"></i></div><p class="font-medium">시장 교육</p><p class="text-sm text-gray-600">잠재 고객을<br/>우리 기술로 유인</p></div><div class="text-center"><div class="text-blue-600 mb-1 text-2xl"><i class="fas fa-trophy"></i></div><p class="font-medium">사상적 리더십</p><p class="text-sm text-gray-600">업계에서<br/>기술 권위자 위치 확보</p></div></div></div>
                            <div class="p-4 bg-blue-50 rounded-lg"><div class="flex items-center"><div class="text-blue-600 text-2xl mr-3"><i class="fas fa-lightbulb"></i></div><div><h4 class="font-medium">다음 단계: 협업 확대</h4><p class="text-sm">마케팅 팀과 협력하여 전략적 콘텐츠를 백서, 웨비나, 블로그 포스트 등 다양한 형태로 확장</p></div></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="slide-container">
            <div class="overlay-bg"></div><div class="dot-pattern dot-pattern-1"></div><div class="dot-pattern dot-pattern-2"></div>
            <div class="slide-content flex flex-col justify-center p-4">
                <div class="mb-3"><h1 class="text-3xl font-bold mb-1"><span class="accent-color">결론 및 다음 단계</span></h1><div class="h-1 w-24 bg-blue-600 rounded-full mb-4"></div></div>
                <div class="flex space-x-8 mb-4">
                    <div class="w-1/2">
                        <div class="bg-blue-50 border-l-4 border-blue-600 p-3 rounded-r-lg mb-4"><p class="text-xl font-medium mb-2"><i class="fas fa-award text-blue-600 mr-2"></i>성과를 넘어 기술 리더십으로!</p><p class="text-gray-700">100건의 문서는 우리의 종착점이 아닌 새로운 시작입니다.</p></div>
                        <div class="mb-4"><p class="text-gray-700 mb-4">우리는 이미 '전문가를 위한 기술 지식 베이스'로서의 역할을 훌륭히 수행하고 있습니다. 이제 이를 체계화하고 확장하여 QueryPie의 기술적 리더십을 보여주는 핵심 자산으로 발전시킬 때입니다.</p></div>
                        <div class="border border-gray-200 rounded-lg p-4"><p class="font-medium text-blue-600 mb-2">함께 만들어가는 다음 단계</p><ul class="list-disc pl-5 text-gray-700"><li>문서 템플릿 및 스타일 가이드 정립</li><li>지식 그래프 구축을 위한 문서 연결 강화</li><li>예방적 콘텐츠 및 모범 사례 개발 확대</li><li>모든 팀원의 참여 촉진 및 지식 공유 문화 확산</li></ul></div>
                    </div>
                    <div class="w-1/2 grid grid-cols-2 gap-4">
                        <div class="bg-blue-50 rounded-lg p-3 col-span-2"><p class="text-lg font-medium text-blue-600 mb-2">우리의 비전</p><p class="text-gray-700">단순한 문서 저장소를 넘어, 기술 리더십을 보여주는 QueryPie의 핵심 자산으로 발전</p></div>
                        <div class="bg-white rounded-lg shadow-sm p-4 transition transform hover:-translate-y-1"><div class="text-center mb-2"><i class="fas fa-users text-blue-500 text-2xl"></i></div><p class="font-medium text-center mb-1">지식 공유 문화</p><p class="text-sm text-center text-gray-600">모든 팀원이 자발적으로 지식을 나누는 문화 확산</p></div>
                        <div class="bg-white rounded-lg shadow-sm p-4 transition transform hover:-translate-y-1"><div class="text-center mb-2"><i class="fas fa-project-diagram text-blue-500 text-2xl"></i></div><p class="font-medium text-center mb-1">지식 그래프화</p><p class="text-sm text-center text-gray-600">개별 문서를 유기적으로 연결하는 체계 구축</p></div>
                        <div class="bg-white rounded-lg shadow-sm p-4 transition transform hover:-translate-y-1"><div class="text-center mb-2"><i class="fas fa-shield-alt text-blue-500 text-2xl"></i></div><p class="font-medium text-center mb-1">기술적 권위</p><p class="text-sm text-center text-gray-600">시장을 선도하는 기술적 깊이와 전문성</p></div>
                        <div class="bg-white rounded-lg shadow-sm p-4 transition transform hover:-translate-y-1"><div class="text-center mb-2"><i class="fas fa-rocket text-blue-500 text-2xl"></i></div><p class="font-medium text-center mb-1">비즈니스 가치</p><p class="text-sm text-center text-gray-600">지원 비용 절감과 함께 신규 고객 유치</p></div>
                    </div>
                </div>
                <div class="mt-4"><p class="text-gray-700 italic text-center"><i class="fas fa-quote-left text-gray-400 mr-2"></i>우리는 지난 100여 건의 문서를 통해 이미 우리의 목적에 맞는 일을 매우 훌륭하게 수행해왔습니다. 이제 함께 다음 단계로 나아갈 시간입니다.<i class="fas fa-quote-right text-gray-400 ml-2"></i></p>
                <div class="mt-6 flex justify-center"><div class="text-center"><p class="text-lg font-medium text-blue-600">문서조와 함께 만들어가는 QueryPie의 미래</p><p class="text-sm text-gray-500">성취한 100건을 기반으로 1000건의 연결된 지식으로</p></div></div></div>
            </div>
        </div>
    </div>
</div>

<div id="navigation">
    <button id="prevBtn"><i class="fas fa-arrow-left"></i> 이전</button>
    <button id="nextBtn">다음 <i class="fas fa-arrow-right"></i></button>
</div>

<div id="page-counter">
    <span id="currentPage">1</span> / <span id="totalPages">11</span>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const slides = document.querySelectorAll('.slide');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const currentPageElem = document.getElementById('currentPage');
        const totalPagesElem = document.getElementById('totalPages');
        const wrapper = document.querySelector('.presentation-wrapper');

        let currentSlide = 0;
        const totalSlides = slides.length;
        totalPagesElem.textContent = totalSlides;

        // Chart initialization tracker
        const charts = {};

        // 초기 스케일 계산 및 저장
        let currentScale = 1;

        function updateButtons() {
            prevBtn.disabled = currentSlide === 0;
            nextBtn.disabled = currentSlide === totalSlides - 1;
        }

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.toggle('active', i === index);
            });
            currentPageElem.textContent = index + 1;
            updateButtons();
            // Initialize charts for the current slide if not already done
            initializeChartsForSlide(index);
        }

        function nextSlide() {
            if (currentSlide < totalSlides - 1) {
                currentSlide++;
                showSlide(currentSlide);
            }
        }

        function prevSlide() {
            if (currentSlide > 0) {
                currentSlide--;
                showSlide(currentSlide);
            }
        }

        function scalePresentation() {
            const slideWidth = 1280;
            const slideHeight = 720;

            // 네비게이션 버튼과 페이지 카운터를 위한 여백 고려
            const availableWidth = window.innerWidth - 40; // 좌우 여백
            const availableHeight = window.innerHeight - 120; // 상하 여백 + 네비게이션 영역

            const scaleX = availableWidth / slideWidth;
            const scaleY = availableHeight / slideHeight;
            currentScale = Math.min(scaleX, scaleY, 1); // 최대 100% 크기로 제한

            // 계산된 스케일을 저장하고 적용
            applyScale();
        }

        function applyScale() {
            // 일관된 스케일 적용
            wrapper.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        }

        // Event Listeners
        nextBtn.addEventListener('click', nextSlide);
        prevBtn.addEventListener('click', prevSlide);

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') {
                nextSlide();
            } else if (e.key === 'ArrowLeft') {
                prevSlide();
            }
        });

        window.addEventListener('resize', scalePresentation);

        function initializeChartsForSlide(index) {
            // Slide 3: Weekly & Contributors Chart (index 2)
            if (index === 2) {
                if (!charts.weeklyChart) {
                    const weeklyCtx = document.getElementById('weeklyChart').getContext('2d');
                    charts.weeklyChart = new Chart(weeklyCtx, {
                        type: 'bar', data: { labels: ['1주', '2주', '3주', '4주', '5주', '6주', '7주', '8주', '9주', '10주', '11주', '12주', '13주', '14주', '15주', '16주', '17주', '18주'], datasets: [{ label: '문서 생산량', data: [9, 8, 5, 1, 10, 7, 7, 9, 1, 0, 12, 3, 0, 5, 9, 11, 7, 2], backgroundColor: '#3b82f6', borderColor: '#2563eb', borderWidth: 1 }] },
                        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { stepSize: 3 } } }, plugins: { legend: { display: false } } }
                    });
                }

            }

            // Slide 4: Doc Type Chart (index 3)
            if (index === 3) {
                 if (!charts.docTypeChart) {
                    const docTypeCtx = document.getElementById('docTypeChart').getContext('2d');
                    charts.docTypeChart = new Chart(docTypeCtx, {
                        type: 'doughnut', data: { labels: ['문제 해결 및 이슈 대응', '설치, 배포, 연동', '기능 명세 및 업데이트', '개념 및 아키텍처'], datasets: [{ data: [18, 49, 32, 7], backgroundColor: ['#0056b3', '#10b981', '#f59e0b', '#8b5cf6'], borderWidth: 0 }] },
                        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 20, boxWidth: 15 } } } }
                    });
                }
            }
        }

        // Initial setup
        scalePresentation();
        showSlide(0);
    });
</script>

</body>
</html>