-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
1457 lines (1362 loc) · 118 KB
/
index.html
File metadata and controls
1457 lines (1362 loc) · 118 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
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ko" data-theme="light" data-title-ko="Claude Code 101 — 완전 입문 가이드 2026" data-title-en="Claude Code 101 — Complete Beginner's Guide 2026">
<head>
<meta charset="UTF-8">
<script>(function(){var l=localStorage.getItem('cc101-lang')||'ko';document.documentElement.setAttribute('lang',l)})();</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code 101 — 완전 입문 가이드 2026</title>
<meta name="description" content="Claude Code 설치부터 실전 프로젝트까지, AI 에이전틱 코딩의 모든 것을 마스터하세요. 2026년 3월 최신 버전 기준.">
<meta property="og:title" content="Claude Code 101 — 완전 입문 가이드">
<meta property="og:description" content="설치부터 실전 프로젝트까지, AI 에이전틱 코딩 완전 정복">
<meta property="og:type" content="website">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
/* LIGHT MODE (기본) */
--bg-deep: #f8fafc;
--bg-card: #ffffff;
--bg-card-hover: #f1f5f9;
--bg-surface: #f4f7fb;
--bg-code: #f1f5f9;
--accent: #ea6c0a;
--accent-glow: rgba(234,108,10,0.10);
--accent2: #0284c7;
--accent2-glow: rgba(2,132,199,0.10);
--accent3: #7c3aed;
--green: #16a34a;
--green-dim: rgba(22,163,74,0.10);
--red: #dc2626;
--yellow: #d97706;
--text: #0f172a;
--text-dim: #334155;
--text-muted: #64748b;
--border: #e2e8f0;
--border-hover: #cbd5e1;
--radius: 14px;
--radius-sm: 8px;
--font-body: 'Noto Sans KR', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-display: 'Outfit', sans-serif;
--surface-hover: rgba(0,0,0,.03);
--surface-subtle: rgba(0,0,0,.04);
--code-inline-bg: rgba(0,0,0,.06);
--kv-divider: rgba(0,0,0,.06);
--shadow-card: 0 8px 28px rgba(0,0,0,.12);
}
[data-theme="dark"] {
--bg-deep: #06090f;
--bg-card: #0d1219;
--bg-card-hover: #141c27;
--bg-surface: #0a0f18;
--bg-code: #080c14;
--accent: #f97316;
--accent-glow: rgba(249,115,22,0.12);
--accent2: #38bdf8;
--accent2-glow: rgba(56,189,248,0.10);
--accent3: #a78bfa;
--green: #34d399;
--green-dim: rgba(52,211,153,0.12);
--red: #f87171;
--yellow: #fbbf24;
--text: #e2e8f0;
--text-dim: #94a3b8;
--text-muted: #64748b;
--border: #1a2233;
--border-hover: #2a3a50;
--surface-hover: rgba(255,255,255,.015);
--surface-subtle: rgba(255,255,255,.025);
--code-inline-bg: rgba(255,255,255,.05);
--kv-divider: rgba(255,255,255,.04);
--shadow-card: 0 8px 28px rgba(0,0,0,.3);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border-hover) var(--bg-deep)}
body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text);line-height:1.75;overflow-x:hidden}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}
a{color:var(--accent2);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
code{font-family:var(--font-mono);font-size:.88em;background:var(--code-inline-bg);padding:2px 7px;border-radius:4px;color:var(--accent2)}
/* NOISE */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}
/* PROGRESS */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:1000;transition:width .15s;box-shadow:0 0 14px var(--accent)}
/* SIDEBAR */
.sidebar{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:100;padding:.8rem .4rem;display:flex;flex-direction:column;gap:2px}
.sidebar a{display:flex;align-items:center;gap:8px;padding:5px 8px;text-decoration:none;color:var(--text-muted);font-family:var(--font-mono);font-size:.65rem;border-radius:0 5px 5px 0;transition:all .3s;white-space:nowrap}
.sidebar a .label{opacity:0;transform:translateX(-4px);transition:all .3s;pointer-events:none}
.sidebar:hover a .label,.sidebar a.active .label{opacity:1;transform:translateX(0)}
.sidebar a .pip{width:3px;height:14px;background:var(--border);border-radius:3px;transition:all .3s;flex-shrink:0}
.sidebar a:hover .pip,.sidebar a.active .pip{background:var(--accent);height:18px;box-shadow:0 0 6px var(--accent)}
.sidebar a.active{color:var(--accent)}
/* HERO */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(249,115,22,.07) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at 20% 80%,rgba(56,189,248,.04) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 20%,rgba(167,139,250,.03) 0%,transparent 60%);z-index:0}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(249,115,22,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(249,115,22,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent);z-index:0}
.hero-content{position:relative;z-index:1;max-width:800px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:var(--accent-glow);border:1px solid rgba(249,115,22,.25);border-radius:100px;font-family:var(--font-mono);font-size:.78rem;color:var(--accent);margin-bottom:2rem;animation:fadeInDown .8s ease}
.hero-badge .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:var(--font-display);font-size:clamp(3rem,8vw,6.5rem);font-weight:800;line-height:1;letter-spacing:-.04em;margin-bottom:.3em;animation:fadeInUp .8s ease .2s both}
.hero h1 .hl{background:linear-gradient(135deg,var(--accent),#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero h1 .num{font-family:var(--font-mono);font-weight:300;color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);font-size:.65em}
.hero-sub{font-size:1.15rem;color:var(--text-dim);max-width:540px;margin:0 auto 2.5rem;font-weight:300;animation:fadeInUp .8s ease .4s both}
.hero-meta{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;animation:fadeInUp .8s ease .6s both}
.hero-meta-item{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted)}
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted);font-size:.72rem;font-family:var(--font-mono);animation:bounce 2s infinite;cursor:pointer;z-index:1}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
/* CONTAINER */
.container{max-width:1060px;margin:0 auto;padding:0 2rem}
/* MODULE */
.module-section{padding:5rem 0;border-bottom:1px solid var(--border);scroll-margin-top:2rem}
.module-number{font-family:var(--font-mono);font-size:.78rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;display:flex;align-items:center;gap:10px}
.module-number::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.2}
.module-title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:.4rem}
.module-desc{color:var(--text-dim);font-size:.95rem;max-width:600px}
/* GOALS */
.goals{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.5rem 0 2rem}
.goal-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:var(--green-dim);border:1px solid rgba(52,211,153,.18);border-radius:100px;font-size:.82rem;color:var(--green)}
/* CARD */
.content-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .3s;margin-bottom:1rem}
.content-card:hover{border-color:var(--border-hover)}
.card-header{padding:1rem 1.3rem;display:flex;align-items:center;cursor:pointer;user-select:none;gap:.8rem}
.card-header:hover{background:var(--surface-hover)}
.card-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.card-icon.orange{background:var(--accent-glow);border:1px solid rgba(249,115,22,.18)}
.card-icon.blue{background:var(--accent2-glow);border:1px solid rgba(56,189,248,.18)}
.card-icon.purple{background:rgba(167,139,250,.10);border:1px solid rgba(167,139,250,.18)}
.card-icon.green{background:var(--green-dim);border:1px solid rgba(52,211,153,.18)}
.card-title-area{flex:1}
.card-title{font-family:var(--font-display);font-weight:600;font-size:1rem;margin-bottom:1px}
.card-subtitle{font-size:.78rem;color:var(--text-muted)}
.card-toggle{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0;color:var(--text-muted)}
.content-card.open .card-toggle{transform:rotate(180deg);border-color:var(--accent);color:var(--accent)}
.card-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.content-card.open .card-body{max-height:8000px}
.card-content{padding:0 1.3rem 1.3rem;border-top:1px solid var(--border);padding-top:1.3rem}
.card-content p{margin-bottom:.8rem;color:var(--text-dim);font-size:.92rem}
.card-content strong{color:var(--text);font-weight:500}
.card-content h4{font-family:var(--font-display);font-size:.95rem;font-weight:600;margin:1.3rem 0 .6rem;color:var(--text);display:flex;align-items:center;gap:8px}
.card-content h4::before{content:'';width:3px;height:14px;background:var(--accent);border-radius:2px}
.card-content ul,.card-content ol{margin:.6rem 0 .8rem 1.2rem;color:var(--text-dim);font-size:.92rem}
.card-content li{margin-bottom:.35rem}
.card-content li code{font-size:.82rem}
/* CODE */
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:var(--radius-sm);margin:.8rem 0;overflow:hidden}
.code-header{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:var(--surface-subtle);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted)}
.code-header .lang{display:flex;align-items:center;gap:6px}
.code-header .lang .dot{width:7px;height:7px;border-radius:50%}
.dot.bash{background:var(--green)}.dot.json{background:var(--accent)}.dot.md{background:var(--accent2)}.dot.swift{background:var(--accent3)}.dot.txt{background:var(--yellow)}
.copy-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:2px 9px;border-radius:4px;cursor:pointer;font-family:var(--font-mono);font-size:.68rem;transition:all .2s}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{border-color:var(--green);color:var(--green)}
pre{padding:.8rem 1rem;overflow-x:auto;font-family:var(--font-mono);font-size:.82rem;line-height:1.65;color:var(--text-dim);white-space:pre-wrap;word-break:break-word}
pre .comment{color:var(--text-muted)}pre .keyword{color:var(--accent3)}pre .string{color:var(--green)}pre .cmd{color:var(--accent2)}pre .flag{color:var(--accent)}pre .prompt{color:var(--text-muted);user-select:none}
/* TABLE */
.data-table{width:100%;border-collapse:separate;border-spacing:0;margin:.8rem 0;font-size:.88rem;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.data-table th{background:var(--surface-subtle);padding:9px 12px;text-align:left;font-weight:500;font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border)}
.data-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text-dim)}
.data-table tr:last-child td{border-bottom:none}
.data-table td:first-child{font-family:var(--font-mono);color:var(--accent2);font-size:.82rem;white-space:nowrap}
.data-table tbody tr:hover td{background:var(--surface-hover)}
/* KV */
.kv-item{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--kv-divider)}
.kv-item:last-child{border-bottom:none}
.kv-key{font-family:var(--font-mono);font-size:.82rem;color:var(--accent2);min-width:120px;flex-shrink:0}
.kv-val{color:var(--text-dim);font-size:.88rem}
/* PRACTICE BOX (ENHANCED) */
.practice-box{background:var(--bg-card);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius);overflow:hidden;margin-top:2rem}
.practice-header{padding:1rem 1.3rem;display:flex;align-items:center;gap:.8rem;cursor:pointer;user-select:none;background:linear-gradient(135deg,rgba(249,115,22,.06),rgba(56,189,248,.03))}
.practice-header:hover{background:linear-gradient(135deg,rgba(249,115,22,.09),rgba(56,189,248,.05))}
.practice-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.25);border-radius:100px;font-family:var(--font-mono);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.practice-title{font-family:var(--font-display);font-weight:600;font-size:1rem;flex:1}
.practice-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.practice-box.open .practice-body{max-height:10000px}
.practice-content{padding:1.3rem;border-top:1px solid var(--border)}
.practice-box .card-toggle{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0;color:var(--text-muted)}
.practice-box.open .card-toggle{transform:rotate(180deg);border-color:var(--accent);color:var(--accent)}
/* STEP */
.step{display:flex;gap:1rem;margin-bottom:1.2rem;position:relative;padding-left:.5rem}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--accent-glow);border:1px solid rgba(249,115,22,.25);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.75rem;font-weight:600;color:var(--accent);flex-shrink:0;margin-top:2px}
.step-content{flex:1}
.step-content h5{font-family:var(--font-display);font-weight:600;font-size:.92rem;margin-bottom:.3rem;color:var(--text)}
.step-content p{color:var(--text-dim);font-size:.88rem;margin-bottom:.4rem}
.step-content .expected{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.15);border-radius:var(--radius-sm);padding:.6rem .8rem;margin-top:.5rem;font-size:.85rem;color:var(--text-dim)}
.step-content .expected-label{font-family:var(--font-mono);font-size:.7rem;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
/* CHECKLIST */
.checklist{margin:.6rem 0}
.checklist-item{display:flex;align-items:flex-start;gap:.6rem;padding:.4rem 0;cursor:pointer;user-select:none}
.checklist-item input{display:none}
.check-box{width:18px;height:18px;border:1.5px solid var(--border-hover);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all .2s}
.checklist-item input:checked~.check-box{background:var(--green);border-color:var(--green)}
.checklist-item input:checked~.check-box svg{display:block}
.check-box svg{display:none;width:12px;height:12px}
.checklist-item .cl-text{color:var(--text-dim);font-size:.88rem;transition:color .2s}
.checklist-item input:checked~.cl-text{color:var(--text-muted);text-decoration:line-through}
/* TIP/WARN */
.tip-box{background:var(--accent2-glow);border-left:3px solid var(--accent2);padding:.8rem 1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:.8rem 0}
.tip-box .tip-label{font-family:var(--font-mono);font-size:.72rem;color:var(--accent2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.tip-box p{color:var(--text-dim);font-size:.88rem;margin:0}
.warn-box{background:rgba(251,146,60,.06);border-left:3px solid var(--accent);padding:.8rem 1rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:.8rem 0}
.warn-box .warn-label{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.warn-box p{color:var(--text-dim);font-size:.88rem;margin:0}
/* TIMELINE */
.timeline{position:relative;padding-left:2rem;margin:.8rem 0}
.timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent),var(--accent2),var(--accent3));opacity:.25}
.timeline-item{position:relative;padding-bottom:1rem}
.timeline-item::before{content:'';position:absolute;left:-2rem;top:5px;width:9px;height:9px;background:var(--accent);border-radius:50%;border:2px solid var(--bg-card);z-index:1}
.timeline-item:last-child::before{background:var(--green);box-shadow:0 0 6px var(--green)}
.timeline-date{font-family:var(--font-mono);font-size:.78rem;color:var(--accent)}
.timeline-text{color:var(--text-dim);font-size:.88rem}
/* OVERVIEW */
.overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin:2rem 0}
.overview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;cursor:pointer;transition:all .3s;text-decoration:none;color:inherit;display:block}
.overview-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-card);color:inherit}
.overview-card .oc-num{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:var(--border-hover);line-height:1;margin-bottom:.4rem}
.overview-card:hover .oc-num{color:var(--accent)}
.overview-card .oc-title{font-family:var(--font-display);font-weight:600;margin-bottom:.2rem;font-size:.95rem}
.overview-card .oc-desc{font-size:.82rem;color:var(--text-muted)}
.overview-card .oc-time{font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);margin-top:.6rem;display:flex;align-items:center;gap:5px}
.overview-card .oc-progress{height:3px;background:var(--border);border-radius:2px;margin-top:.5rem;overflow:hidden}
.overview-card .oc-progress-fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s}
.overview-card .oc-chapter-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.2);border-radius:100px;font-family:var(--font-mono);font-size:.68rem;color:var(--accent3);margin-top:.5rem}
.chapter-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.82rem;color:var(--accent3);margin-left:1rem;padding:3px 10px;border:1px solid rgba(167,139,250,.2);border-radius:100px;transition:all .2s}
.chapter-link:hover{color:var(--accent);border-color:rgba(249,115,22,.3);background:var(--accent-glow)}
/* COMPLETION */
.completion-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;padding-top:1.2rem;border-top:1px dashed var(--border)}
.check-btn{display:flex;align-items:center;gap:8px;padding:8px 18px;background:none;border:1px solid var(--border);border-radius:100px;color:var(--text-dim);cursor:pointer;font-family:var(--font-body);font-size:.88rem;transition:all .3s}
.check-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.check-btn.checked{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.check-btn .ci{width:18px;height:18px;border:2px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s}
.check-btn.checked .ci{background:var(--green);border-color:var(--green)}
.check-btn.checked .ci svg{display:block}
.check-btn .ci svg{display:none}
.progress-text{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted)}
/* ── SUPPORT FAB ── */
.support-fab{
position:fixed;bottom:5.5rem;right:1.6rem;z-index:500;
display:flex;align-items:center;gap:6px;
padding:10px 18px;
background:#FEE500;
border:none;
border-radius:100px;
cursor:pointer;
font-family:var(--font-body);
font-size:.85rem;font-weight:700;
color:#3C1E1E;
box-shadow:0 4px 20px rgba(254,229,0,.5);
transition:all .25s;
}
.support-fab:hover{
background:#F9D800;
transform:translateY(-2px);
box-shadow:0 8px 28px rgba(254,229,0,.6);
}
.support-fab .fab-icon{font-size:1rem;line-height:1}
.support-fab.show{animation:fab-in .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes fab-in{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
html[lang="en"] .support-fab{background:#6e40c9;color:#fff;box-shadow:0 4px 20px rgba(110,64,201,.4)}
html[lang="en"] .support-fab:hover{background:#5a32a3;box-shadow:0 8px 28px rgba(110,64,201,.5)}
/* ── SUPPORT OVERLAY ── */
.support-overlay{
display:none;position:fixed;inset:0;z-index:600;
background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
animation:fade-in .2s ease;
}
.support-overlay.open{display:block}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
/* ── SUPPORT MODAL ── */
.support-modal{
display:none;position:fixed;z-index:700;
bottom:9rem;right:1.6rem;
width:300px;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:20px;
padding:1.6rem 1.4rem 1.3rem;
box-shadow:0 20px 60px rgba(0,0,0,.3);
text-align:center;
}
.support-modal.open{
display:block;
animation:modal-in .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modal-in{
from{opacity:0;transform:translateY(12px) scale(.95)}
to{opacity:1;transform:none}
}
.support-close{
position:absolute;top:.9rem;right:1rem;
background:none;border:none;cursor:pointer;
color:var(--text-muted);font-size:1rem;line-height:1;
transition:color .2s;
}
.support-close:hover{color:var(--text)}
.support-header{margin-bottom:1rem}
.support-pulse{
font-size:2.2rem;margin-bottom:.6rem;line-height:1;
display:inline-block;
animation:coffee-bounce 2s ease-in-out infinite;
}
@keyframes coffee-bounce{
0%,100%{transform:translateY(0) rotate(-5deg)}
50%{transform:translateY(-5px) rotate(5deg)}
}
.support-title{
font-family:var(--font-display);
font-size:1.05rem;font-weight:700;
margin-bottom:.5rem;color:var(--text);
}
.support-sub{
font-size:.84rem;color:var(--text-dim);line-height:1.65;
}
.support-sub strong{color:var(--accent)}
.support-sub-small{
font-size:.75rem;color:var(--text-muted);
display:block;margin-top:.3rem;
}
.support-qr-wrap{
background:var(--bg-surface);
border:1px solid var(--border);
border-radius:14px;
padding:1rem;
margin:.8rem 0;
}
.support-qr{
width:160px;height:160px;
border-radius:10px;
display:block;margin:0 auto .7rem;
object-fit:contain;
}
.gh-sponsor-btn{
display:inline-flex;align-items:center;gap:.5rem;
margin:.9rem 0 .4rem;padding:10px 22px;
background:#6e40c9;color:#fff;
border-radius:100px;font-size:.9rem;font-weight:700;
text-decoration:none;transition:all .25s;
box-shadow:0 4px 16px rgba(110,64,201,.35);
}
.gh-sponsor-btn:hover{background:#5a32a3;transform:translateY(-2px);box-shadow:0 8px 24px rgba(110,64,201,.5);color:#fff}
.support-qr-label{
display:flex;align-items:center;justify-content:center;gap:.4rem;
font-size:.78rem;color:var(--text-muted);font-weight:500;
}
.support-thanks{
font-size:.75rem;color:var(--text-muted);margin-top:.6rem;
}
/* ── COMMUNITY CTA ── */
.community-cta{padding:3rem 0;border-top:1px solid var(--border)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.cta-grid{grid-template-columns:1fr}}
.cta-card{
display:flex;align-items:center;gap:1rem;
padding:1.2rem 1.4rem;border-radius:16px;text-decoration:none;
transition:transform .2s, box-shadow .2s;
}
.cta-card:hover{transform:translateY(-2px)}
.cta-kakao{background:#FEE500;color:#3C1E1E}
.cta-kakao:hover{box-shadow:0 8px 28px rgba(254,229,0,.4);color:#3C1E1E}
[data-theme="dark"] .cta-kakao{background:#F9E000;color:#2a1400}
.cta-github{background:var(--bg-card);border:1px solid var(--border);color:var(--text)}
.cta-github:hover{border-color:var(--accent);box-shadow:var(--shadow-card);color:var(--text)}
.cta-icon{font-size:1.8rem;line-height:1;flex-shrink:0}
.cta-body{flex:1}
.cta-body strong{display:block;font-weight:700;font-size:.95rem;margin-bottom:2px}
.cta-body span{font-size:.8rem;opacity:.7}
.cta-arrow{flex-shrink:0;opacity:.5}
.cta-card:hover .cta-arrow{opacity:1}
.cta-qr-wrap{flex-shrink:0;background:#fff;border-radius:10px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.cta-qr{width:72px;height:72px;display:block;border-radius:4px}
.cta-qr-label{text-align:center;font-size:.62rem;color:#888;margin-top:3px;font-weight:500}
@media(max-width:480px){.cta-qr-wrap{display:none}}
/* FOOTER */
.site-footer{padding:3rem 2rem;text-align:center;border-top:1px solid var(--border)}
.footer-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.footer-logo .hl{color:var(--accent)}
.footer-text{color:var(--text-muted);font-size:.82rem;margin-bottom:1rem}
.footer-links{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
.footer-links a{color:var(--text-muted);font-size:.82rem;font-family:var(--font-mono)}
.footer-links a:hover{color:var(--accent)}
/* THEME TOGGLE */
.theme-toggle{position:fixed;bottom:1.8rem;right:1.8rem;z-index:1000;width:44px;height:44px;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border);cursor:pointer;font-size:1.15rem;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:var(--shadow-card);padding:0;line-height:1}
.theme-toggle:hover{border-color:var(--accent);transform:scale(1.1)}
/* RESPONSIVE */
@media(max-width:768px){
.sidebar{display:none}
.container{padding:0 1rem}
.module-section{padding:3rem 0}
.overview-grid{grid-template-columns:1fr}
.kv-item{flex-direction:column;gap:.15rem}
.kv-key{min-width:auto}
.step{padding-left:0}
.hero-meta{gap:.8rem}
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<button class="theme-toggle" id="themeToggle" data-title-ko="다크 모드로 전환" data-title-en="Switch to dark mode">🌙</button>
<nav class="sidebar" id="sidebar"></nav>
<!-- HERO -->
<section class="hero" id="overview">
<div class="hero-bg"></div>
<div class="hero-grid"></div>
<div class="hero-content">
<div class="hero-badge"><span class="dot"></span>2026.03 Latest — Opus 4.6 · v2.2.x</div>
<h1><span class="hl">Claude Code</span><br><span class="num">101</span></h1>
<p class="hero-sub"><span class="lang-ko">설치부터 실전 프로젝트까지,<br>AI 에이전틱 코딩의 모든 것을 마스터하세요.</span><span class="lang-en">From installation to real-world projects,<br>master everything about AI agentic coding.</span></p>
<div class="hero-meta">
<div class="hero-meta-item"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg><span class="lang-ko">12개 모듈</span><span class="lang-en">12 Modules</span></div>
<div class="hero-meta-item"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg><span class="lang-ko">16~22시간</span><span class="lang-en">16–22 hours</span></div>
<div class="hero-meta-item"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg><span class="lang-ko">비개발자~중급</span><span class="lang-en">Beginner–Intermediate</span></div>
</div>
</div>
<div class="scroll-cue" onclick="document.querySelector('#roadmap').scrollIntoView({behavior:'smooth'})"><span class="lang-ko">시작하기 ↓</span><span class="lang-en">Get Started ↓</span></div>
</section>
<!-- ROADMAP -->
<section class="module-section" id="roadmap">
<div class="container">
<div style="margin-bottom:2rem">
<div class="module-number">Roadmap</div>
<h2 class="module-title"><span class="lang-ko">학습 로드맵</span><span class="lang-en">Learning Roadmap</span></h2>
<p class="module-desc"><span class="lang-ko">순서대로 따라가며 실습하세요. 진행률이 자동 저장됩니다.</span><span class="lang-en">Follow along in order with hands-on practice. Progress is saved automatically.</span></p>
</div>
<div class="overview-grid" id="overviewGrid"></div>
<div style="text-align:center;margin-top:.8rem"><span class="progress-text" id="totalProgress">완료: 0 / 11</span></div>
</div>
</section>
<div id="modulesContainer"></div>
<!-- ── SUPPORT FLOATING BUTTON ── -->
<button class="support-fab" id="supportFab" onclick="openSupport()" data-aria-ko="후원하기" data-aria-en="Sponsor">
<span class="fab-icon">☕</span>
<span class="fab-label"><span class="lang-ko">후원</span><span class="lang-en">Support</span></span>
</button>
<!-- ── SUPPORT MODAL ── -->
<div class="support-overlay" id="supportOverlay" onclick="closeSupport()"></div>
<div class="support-modal" id="supportModal" role="dialog" aria-modal="true">
<button class="support-close" onclick="closeSupport()" data-aria-ko="닫기" data-aria-en="Close">✕</button>
<div class="support-header">
<div class="support-pulse">☕</div>
<h3 class="support-title"><span class="lang-ko">학습이 즐거우셨나요?</span><span class="lang-en">Enjoying the course?</span></h3>
<p class="support-sub">
<span class="lang-ko">여러분의 후원 한 잔이<br><strong>다음 챕터를 더 빠르게</strong> 만듭니다.<br><span class="support-sub-small">커피 한 잔 값이 콘텐츠 1시간을 앞당깁니다 ☕→📖</span></span>
<span class="lang-en">Your support helps us<br><strong>speed up the next chapter</strong>.<br><span class="support-sub-small">One coffee = 1 hour of content created sooner ☕→📖</span></span>
</p>
</div>
<div class="lang-ko">
<div class="support-qr-wrap">
<img src="kakaopay-qr.jpg" alt="카카오페이 후원 QR" class="support-qr"/>
<div class="support-qr-label">
<svg width="52" height="20" viewBox="0 0 52 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#FEE500"/>
<path d="M10 4.5C6.96 4.5 4.5 6.46 4.5 8.88c0 1.54.97 2.9 2.44 3.73l-.62 2.3a.19.19 0 0 0 .28.21l2.68-1.78c.23.03.47.04.72.04 3.04 0 5.5-1.96 5.5-4.38S13.04 4.5 10 4.5z" fill="#3C1E1E"/>
<text x="24" y="14" font-family="Arial" font-weight="700" font-size="11" fill="#3C1E1E">pay</text>
</svg>
<span>카카오페이로 스캔</span>
</div>
</div>
<p class="support-thanks">후원해 주신 분들 덕분에 계속 쓸 수 있어요 🙏</p>
</div>
<div class="lang-en">
<a href="https://github.com/sponsors/M1zz" target="_blank" rel="noopener noreferrer" class="gh-sponsor-btn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/>
</svg>
Sponsor on GitHub
</a>
<p class="support-thanks">Thank you to all our sponsors! 🙏</p>
</div>
</div>
<section class="community-cta">
<div class="container">
<div class="cta-grid">
<a class="cta-card cta-kakao" href="https://open.kakao.com/o/pWK34Oji" target="_blank" rel="noopener noreferrer">
<div class="cta-body">
<strong>💬 <span class="lang-ko">오픈 카톡방 참여하기</span><span class="lang-en">Join Open KakaoTalk</span></strong>
<span><span class="lang-ko">막히는 부분 질문 · 학습 인증 · 정보 공유</span><span class="lang-en">Ask questions · Share progress · Exchange tips</span></span>
</div>
<div class="cta-qr-wrap">
<img src="kakao-openchat-qr.jpg" alt="오픈채팅 QR" class="cta-qr"/>
<div class="cta-qr-label"><span class="lang-ko">카메라로 스캔</span><span class="lang-en">Scan with camera</span></div>
</div>
</a>
<a class="cta-card cta-github" href="https://github.com/m1zz/ClaudeCode101" target="_blank" rel="noopener noreferrer">
<div class="cta-icon">⭐</div>
<div class="cta-body">
<strong><span class="lang-ko">GitHub Star 주기</span><span class="lang-en">Give a GitHub Star</span></strong>
<span><span class="lang-ko">오픈소스 프로젝트를 응원해 주세요</span><span class="lang-en">Support this open-source project</span></span>
</div>
<svg class="cta-arrow" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
</section>
<section id="feedback-section" style="border-top:1px solid var(--border);padding:3rem 2rem 0;">
<div class="container" style="max-width:860px;margin:0 auto;">
<p style="font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.4rem;">📣 <span class="lang-ko">피드백 & 댓글</span><span class="lang-en">Feedback & Comments</span></p>
<p style="font-size:.83rem;color:var(--text-muted);margin-bottom:1.2rem;"><span class="lang-ko">이 사이트가 도움이 됐나요? GitHub 계정으로 댓글이나 반응을 남겨주세요.</span><span class="lang-en">Was this site helpful? Leave a comment or reaction with your GitHub account.</span></p>
<div id="giscus-main"></div>
</div>
</section>
<footer class="site-footer">
<div class="footer-logo">Claude Code <span class="hl">101</span></div>
<p class="footer-text"><span class="lang-ko">개발자리 — AI 시대의 개발 교육 · 2026</span><span class="lang-en">Gaebalja — AI-Era Developer Education · 2026</span></p>
<div class="footer-links">
<a href="https://code.claude.com/docs" target="_blank"><span class="lang-ko">공식 문서</span><span class="lang-en">Official Docs</span></a>
<a href="https://github.com/anthropics/claude-code" target="_blank">GitHub</a>
<a href="https://claudelog.com/claude-code-changelog" target="_blank">Changelog</a>
</div>
</footer>
<script>
const SVG_CHECK = '<svg width="12" height="12" fill="none" stroke="white" stroke-width="3" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg>';
const SVG_CHEVRON = '<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="6,9 12,15 18,9"/></svg>';
function getLang() { return localStorage.getItem('cc101-lang') || 'ko'; }
const modules = [
{
id:'prereq',num:'Pre',title:'터미널이 처음이라면',desc:'비개발자를 위한 사전 준비',time:'1시간',chapterUrl:'chapters/terminal.html',
title_en:'New to Terminals?',desc_en:'Prerequisites for non-developers',
goals:['터미널 기본 사용법 익히기','개발 환경 설치 완료','왜 터미널인지 이해'],
goals_en:['Learn basic terminal usage','Complete development environment setup','Understand why we use the terminal'],
sections:[
{title:'터미널이란?',title_en:'What is a Terminal?',icon:'🖥️',iconClass:'green',subtitle:'컴퓨터에게 글자로 명령하는 도구',subtitle_en:'A tool to give your computer text commands',content:`
<p><strong>터미널(Terminal)</strong>은 컴퓨터에게 텍스트로 명령을 내리는 도구입니다. 마우스로 클릭하는 대신, 글자를 입력해서 폴더를 열고, 파일을 만들고, 프로그램을 실행합니다.</p>
<h4>터미널 여는 법</h4>
<div class="kv-item"><span class="kv-key">macOS</span><span class="kv-val">Spotlight(<code>⌘+Space</code>) → "터미널" 검색 → Enter</span></div>
<div class="kv-item"><span class="kv-key">Windows</span><span class="kv-val">시작 메뉴 → "PowerShell" 또는 "터미널" 검색</span></div>
<h4>꼭 알아야 할 명령어 5개</h4>
<table class="data-table"><thead><tr><th>명령어</th><th>뜻</th><th>비유</th></tr></thead><tbody>
<tr><td>pwd</td><td>현재 위치 확인</td><td>내가 어느 폴더에 있는지 (지도 앱의 현재 위치)</td></tr>
<tr><td>ls</td><td>파일 목록 보기</td><td>이 폴더에 뭐가 있는지 (탐색기 열기)</td></tr>
<tr><td>cd 폴더명</td><td>폴더 이동</td><td>그 폴더로 들어가기 (폴더 더블클릭)</td></tr>
<tr><td>mkdir 이름</td><td>새 폴더 만들기</td><td>마우스 우클릭 → 새 폴더</td></tr>
<tr><td>clear</td><td>화면 정리</td><td>터미널 깨끗하게 비우기</td></tr>
</tbody></table>
<div class="tip-box"><div class="tip-label">겁먹지 마세요</div><p>터미널은 무서운 게 아닙니다. 잘못 입력해도 컴퓨터가 고장나지 않습니다. "command not found" 에러가 뜰 뿐이에요. 다시 입력하면 됩니다.</p></div>`},
{title:'개발 환경 설치',title_en:'Setting Up Dev Environment',icon:'⚙️',iconClass:'blue',subtitle:'Homebrew와 Node.js (10분이면 끝)',subtitle_en:'Homebrew and Node.js (done in 10 min)',content:`
<p>Claude Code를 설치하려면 먼저 두 가지 도구가 필요합니다. 어렵지 않습니다 — 복사-붙여넣기만 하면 됩니다.</p>
<h4>Step 1: Homebrew 설치 (macOS)</h4>
<p>Homebrew는 macOS의 "앱스토어"와 비슷합니다. 터미널에서 프로그램을 설치할 때 사용합니다.</p>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># 터미널에 아래를 통째로 복사-붙여넣기 후 Enter</span>
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
<span class="comment"># 설치 확인 (버전 번호가 나오면 성공)</span>
<span class="cmd">brew</span> <span class="flag">--version</span></pre></div>
<h4>Step 2: Node.js 설치</h4>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># macOS</span>
<span class="cmd">brew</span> <span class="flag">install</span> node
<span class="comment"># Windows — nodejs.org 에서 LTS 버전 다운로드 후 설치</span>
<span class="comment"># 설치 확인 (v18 이상이면 OK)</span>
<span class="cmd">node</span> <span class="flag">--version</span></pre></div>
<div class="warn-box"><div class="warn-label">Windows 사용자</div><p>Homebrew는 macOS 전용입니다. Windows는 <a href="https://nodejs.org" target="_blank">nodejs.org</a>에서 직접 다운로드하고, Claude Code는 <code>winget install Anthropic.ClaudeCode</code>로 설치합니다.</p></div>`},
{title:'왜 터미널에서 하나요?',title_en:'Why the Terminal?',icon:'💡',iconClass:'orange',subtitle:'claude.ai 웹이 있는데 왜 CLI를?',subtitle_en:"There's claude.ai — why use CLI?",content:`
<p>Claude는 <a href="https://claude.ai" target="_blank">claude.ai</a> 웹에서도 사용할 수 있습니다. 그런데 <strong>무언가를 직접 만들려면</strong> 터미널 버전인 Claude Code가 훨씬 강력합니다.</p>
<div class="kv-item"><span class="kv-key">claude.ai (웹)</span><span class="kv-val">채팅으로 대화 → 코드를 복사해서 직접 파일에 붙여넣기 → 수동 반복</span></div>
<div class="kv-item"><span class="kv-key">Claude Code (터미널)</span><span class="kv-val">프로젝트 안에서 대화 → 파일 읽기/만들기/수정을 자동 수행 → 바로 실행</span></div>
<p style="margin-top:.8rem">웹 버전은 <strong>"조언해주는 친구"</strong>이고, Claude Code는 <strong>"옆에 앉아서 같이 만들어주는 동료"</strong>입니다.</p>
<div class="tip-box"><div class="tip-label">코드를 몰라도 됩니다</div><p>"할 일 목록 앱 만들어줘"라고 말하면 Claude Code가 알아서 만듭니다. 여러분은 <strong>무엇을 만들지</strong>만 설명하면 됩니다. 이것이 바이브 코딩(Vibe Coding)입니다.</p></div>`}
],
practice:{
summary:'터미널을 열고, 기본 명령어를 실행하고, 개발 환경을 설치해보세요.',
summary_en:'Open the terminal, run basic commands, and install your dev environment.',
steps:[
{title:'터미널 열기',title_en:'Open Terminal',desc:'macOS: <code>⌘+Space</code> → "터미널" 입력 → Enter. Windows: 시작 메뉴 → "PowerShell" 검색.',expected:'텍스트 화면이 열리고 커서가 깜빡이면 성공!',expected_en:'A text screen opens with a blinking cursor!'},
{title:'현재 위치 확인',desc:'<code>pwd</code>를 입력하고 Enter를 누르세요.',expected:'<code>/Users/이름</code> 같은 경로가 표시됩니다. 이게 지금 여러분이 있는 "폴더" 위치입니다.'},
{title:'파일 목록 보기',desc:'<code>ls</code>를 입력하고 Enter를 누르세요.',expected:'현재 폴더에 있는 파일과 폴더 이름들이 나열됩니다. Finder(탐색기)에서 보는 것과 같은 내용입니다.'},
{title:'폴더 만들고 이동하기',desc:'<code>mkdir my-first-project</code>를 입력 후 Enter. 그 다음 <code>cd my-first-project</code>를 입력하세요.',expected:'에러 없이 실행되면 성공. <code>pwd</code>로 확인하면 경로 끝에 my-first-project가 보입니다.'},
{title:'Homebrew 설치 (macOS)',desc:'위의 Homebrew 설치 명령어를 복사-붙여넣기하세요. 비밀번호를 물어보면 Mac 로그인 비밀번호를 입력합니다 (타이핑해도 화면에 안 보이는 게 정상).',expected:'<code>brew --version</code>을 입력하면 버전 번호가 표시됩니다. 설치에 5~10분 걸릴 수 있습니다.'},
{title:'Node.js 설치',desc:'<code>brew install node</code> (macOS) 또는 nodejs.org에서 다운로드 (Windows).',expected:'<code>node --version</code>으로 v18 이상이 표시되면 준비 완료!'}
],
checklist:['터미널 열기 성공','pwd, ls, cd, mkdir 명령어 실행','Homebrew 설치 완료 (macOS)','Node.js v18+ 설치 확인','my-first-project 폴더 생성'],
checklist_en:['Open terminal successfully','Run pwd, ls, cd, mkdir commands','Install Homebrew (macOS)','Confirm Node.js v18+ installed','Create my-first-project folder']
}
},
{
id:'module0',num:'00',title:'Claude Code가 뭔가요?',desc:'개념, 역사, 왜 지금인가',time:'30분',chapterUrl:'chapters/what-is-claude-code.html',
title_en:'What is Claude Code?',desc_en:'Concepts, history, why now',
goals:['Claude Code의 정체와 기존 도구 차이점 이해','2026년 현재 생태계 파악'],
goals_en:['Understand Claude Code and how it differs from other tools','Survey the 2026 ecosystem'],
sections:[
{title:'Claude Code란?',title_en:'What is Claude Code?',icon:'💡',iconClass:'orange',subtitle:'에이전틱 코딩 도구의 핵심',subtitle_en:'The core of agentic coding tools',content:`
<p><strong>Claude Code</strong>는 터미널에서 동작하는 <strong>에이전틱(Agentic) 코딩 도구</strong>입니다. 코드 자동완성이 아니라, 코드베이스를 읽고 → 이해하고 → 계획하고 → 실행하고 → 검증하는 전 과정을 자율 수행합니다.</p>
<h4>기존 도구와의 차이</h4>
<div class="kv-item"><span class="kv-key">Copilot</span><span class="kv-val">타이핑 중 다음 줄 제안 → 수동적 보조</span></div>
<div class="kv-item"><span class="kv-key">Cursor</span><span class="kv-val">IDE 내 AI 채팅 → 편집기에 묶임</span></div>
<div class="kv-item"><span class="kv-key">Claude Code</span><span class="kv-val">터미널 에이전트 — 파일 읽기/쓰기, bash, git, 테스트까지 자율 수행</span></div>
<div class="tip-box"><div class="tip-label">핵심</div><p>"코드 써주는 도구"가 아닌 "시니어 개발자가 옆에 앉아서 같이 일하는 것"에 가깝습니다.</p></div>`},
{title:'AI 코딩 발전 4단계',title_en:'4 Stages of AI Coding',icon:'📈',iconClass:'green',subtitle:'Vibe Coding에서 하네스 엔지니어링까지',subtitle_en:'From Vibe Coding to Harness Engineering',content:`
<p>AI와 개발자의 협업 방식은 4단계로 진화하고 있습니다. <strong>이 과정의 목표는 3단계까지 도달하는 것</strong>입니다.</p>
<div class="kv-item"><span class="kv-key">1단계</span><span class="kv-val"><strong>Vibe Coding</strong> — "만들어줘"만 말하고 결과만 확인. 내부 코드 구조는 무시</span></div>
<div class="kv-item"><span class="kv-key">2단계</span><span class="kv-val"><strong>In the Loop</strong> — AI 코드를 한 줄씩 확인하고 직접 수정 (Copilot, Cursor)</span></div>
<div class="kv-item"><span class="kv-key">3단계</span><span class="kv-val"><strong>On the Loop</strong> — 가이드(하네스)를 설계하고 AI에게 자율 작업 위임 (Claude Code)</span></div>
<div class="kv-item"><span class="kv-key">4단계</span><span class="kv-val"><strong>Flywheel</strong> — AI가 스스로 하네스를 보강하며 진화 (연구 단계)</span></div>
<div class="tip-box"><div class="tip-label">핵심 전환</div><p>2단계에서는 <strong>코드를 고치지만</strong>, 3단계에서는 <strong>하네스를 고칩니다</strong>. CLAUDE.md, Skills, Hooks가 바로 그 하네스입니다.</p></div>`},
{title:'타임라인 (2025~2026)',title_en:'Timeline (2025–2026)',icon:'📅',iconClass:'blue',subtitle:'1년간의 폭발적 진화',subtitle_en:'One year of explosive evolution',content:`
<div class="timeline">
<div class="timeline-item"><span class="timeline-date">2025.02</span><div class="timeline-text">최초 출시 (Preview)</div></div>
<div class="timeline-item"><span class="timeline-date">2025.05</span><div class="timeline-text">GA 정식 출시 + Claude 4</div></div>
<div class="timeline-item"><span class="timeline-date">2025.10</span><div class="timeline-text">Skills, Plugins 도입</div></div>
<div class="timeline-item"><span class="timeline-date">2025.11</span><div class="timeline-text">Opus 4.5 — 코딩 특화</div></div>
<div class="timeline-item"><span class="timeline-date">2026.01</span><div class="timeline-text">v2.1 — Agent Teams, Teleport</div></div>
<div class="timeline-item"><span class="timeline-date">2026.02</span><div class="timeline-text">Opus 4.6 + 1M Context + Worktree 격리</div></div>
<div class="timeline-item"><span class="timeline-date">2026.03</span><div class="timeline-text">공식 문서 전면 개정 + Skills·Hooks 심화</div></div>
</div>`}
],
practice:{
summary:'Claude Code 공식 문서를 탐색하고 주요 기능을 정리해보세요.',
summary_en:'Explore the official docs and note the key features.',
steps:[
{title:'공식 사이트 방문',desc:'<a href="https://code.claude.com/docs" target="_blank">code.claude.com/docs</a>에 접속하세요.',expected:'Quickstart, Configuration, Hooks 등의 메뉴가 보입니다.'},
{title:'Quickstart 문서 읽기',desc:'Getting Started 섹션을 처음부터 끝까지 읽어보세요. 설치 방법, 로그인 방식, 첫 사용법을 파악합니다.',expected:'설치 명령어, 로그인 옵션(Claude.ai / Console / Bedrock), 기본 사용 흐름을 이해합니다.'},
{title:'핵심 개념 노트 작성',desc:'다음 질문에 답을 메모해보세요: (1) Claude Code는 무엇인가? (2) Copilot/Cursor와 어떻게 다른가? (3) 어떤 플랜이 필요한가?',expected:'자신만의 말로 Claude Code를 설명할 수 있게 됩니다.'}
],
checklist:['공식 문서 Quickstart 읽기 완료','Claude Code vs Copilot vs Cursor 차이점 정리','필요한 플랜(Pro/Max) 결정'],
checklist_en:['Read official docs Quickstart','Summarize Claude Code vs Copilot vs Cursor','Decide on needed plan (Pro/Max)']
}
},
{
id:'module1',num:'01',title:'설치 & 첫 실행',desc:'환경설정, 로그인, 첫 대화',time:'1시간',chapterUrl:'chapters/install.html',
title_en:'Install & First Run',desc_en:'Setup, login, first conversation',
goals:['OS별 Claude Code 설치 완료','로그인 및 첫 세션 실행'],
goals_en:['Install Claude Code for your OS','Login and run the first session'],
sections:[
{title:'설치 방법',icon:'⬇️',iconClass:'green',subtitle:'OS별 커맨드',content:`
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># macOS (추천)</span>
<span class="cmd">brew</span> <span class="flag">install</span> claude-code
<span class="comment"># Windows</span>
<span class="cmd">winget</span> <span class="flag">install</span> Anthropic.ClaudeCode
<span class="comment"># 업데이트</span>
<span class="cmd">claude</span> <span class="flag">update</span>
<span class="comment"># 버전 확인</span>
<span class="cmd">claude</span> <span class="flag">--version</span></pre></div>
<div class="warn-box"><div class="warn-label">⚠️ 주의</div><p><code>npm install -g @anthropic-ai/claude-code</code>는 더 이상 권장하지 않습니다.</p></div>`},
{title:'첫 실행 & 로그인',icon:'🚀',iconClass:'orange',subtitle:'프로젝트에서 claude 시작',content:`
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="cmd">cd</span> my-project
<span class="cmd">claude</span>
<span class="comment"># 유용한 첫 명령어</span>
<span class="cmd">/help</span> <span class="comment"># 명령어 목록</span>
<span class="cmd">/status</span> <span class="comment"># 모델 상태</span>
<span class="cmd">/model</span> <span class="comment"># 모델 변경</span></pre></div>
<p>로그인 옵션: <strong>Claude.ai 구독</strong>(추천) / Console API / Bedrock / Vertex AI</p>`},
{title:'IDE 연동',icon:'💻',iconClass:'purple',subtitle:'VS Code, JetBrains에서 사용하기',content:`
<p>Claude Code는 터미널 기반이지만, 익숙한 IDE 안에서도 바로 사용할 수 있습니다.</p>
<h4>VS Code</h4>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># VS Code 확장 설치</span>
<span class="cmd">code</span> <span class="flag">--install-extension</span> anthropic.claude-code
<span class="comment"># 또는 VS Code 내장 터미널에서 바로 실행</span>
<span class="cmd">claude</span></pre></div>
<p>설치 후 VS Code 사이드바의 Claude Code 패널을 사용하거나, 내장 터미널에서 <code>claude</code>를 실행하세요.</p>
<h4>JetBrains (IntelliJ, WebStorm 등)</h4>
<p>Settings → Plugins → Marketplace에서 <strong>"Claude Code"</strong>를 검색하여 설치합니다. 내장 터미널에서도 바로 사용 가능합니다.</p>
<div class="tip-box"><div class="tip-label">팁</div><p>IDE 연동의 장점: 파일 탐색기와 Claude Code를 나란히 보며 작업할 수 있고, Claude가 수정한 파일이 즉시 에디터에 반영됩니다.</p></div>`}
],
practice:{
summary:'실제로 Claude Code를 설치하고, 빈 프로젝트에서 첫 대화를 나눠보세요.',
steps:[
{title:'Node.js 확인',desc:'터미널에서 <code>node --version</code>을 실행하세요. v18 이상이어야 합니다. 없다면 <a href="https://nodejs.org" target="_blank">nodejs.org</a>에서 설치하세요.',expected:'<code>v18.x.x</code> 이상의 버전이 출력됩니다.'},
{title:'Claude Code 설치',desc:'macOS는 <code>brew install claude-code</code>, Windows는 <code>winget install Anthropic.ClaudeCode</code>를 실행하세요.',expected:'설치 완료 후 <code>claude --version</code>으로 버전 확인이 가능합니다.'},
{title:'빈 프로젝트 생성',desc:'<code>mkdir claude-test && cd claude-test</code>로 테스트 폴더를 만드세요.',expected:'빈 디렉토리가 생성됩니다.'},
{title:'Claude Code 시작 & 로그인',desc:'<code>claude</code>를 실행하고 로그인하세요. Claude.ai 구독이 가장 간편합니다.',expected:'웰컴 스크린이 표시되고 프롬프트 입력이 가능합니다.'},
{title:'첫 번째 대화',desc:'다음을 입력해보세요: <code>"이 폴더에 간단한 HTML 페이지를 만들어줘. Hello World를 표시하는 페이지."</code>',expected:'Claude가 index.html 파일을 생성합니다. 파일 생성 전 승인을 요청할 수 있습니다 (Normal Mode).'},
{title:'결과 확인',desc:'<code>ls</code> 명령어나 파일 탐색기로 생성된 파일을 확인하세요. 브라우저에서 열어보세요.',expected:'index.html이 생성되어 있고, 브라우저에서 "Hello World"가 표시됩니다.'}
],
checklist:['Claude Code 설치 완료','로그인 성공','첫 번째 파일 생성 확인','/help, /status 명령어 테스트','IDE(VS Code 또는 JetBrains)에서 Claude Code 실행']
}
},
{
id:'module2',num:'02',title:'기본 사용법 마스터',desc:'명령어, 권한 모드, 세션 관리',time:'2시간',chapterUrl:'chapters/basics.html',
title_en:'Master the Basics',desc_en:'Commands, permission modes, session management',
goals:['핵심 슬래시 커맨드 활용','3가지 권한 모드 이해','세션 관리와 비대화형 모드'],
goals_en:['Use core slash commands','Understand 3 permission modes','Session management and headless mode'],
sections:[
{title:'슬래시 커맨드',icon:'⌨️',iconClass:'blue',subtitle:'가장 많이 쓰는 10개',content:`
<table class="data-table"><thead><tr><th>커맨드</th><th>설명</th></tr></thead><tbody>
<tr><td>/help</td><td>모든 커맨드 목록</td></tr>
<tr><td>/model</td><td>모델 변경 (Opus 4.6, Sonnet 4.6)</td></tr>
<tr><td>/clear</td><td>대화 히스토리 초기화</td></tr>
<tr><td>/compact</td><td>대화 압축 (토큰 절약)</td></tr>
<tr><td>/resume</td><td>이전 세션 이어하기</td></tr>
<tr><td>/init</td><td>CLAUDE.md 자동 생성</td></tr>
<tr><td>/plan</td><td>Plan Mode 진입</td></tr>
<tr><td>/config</td><td>설정 변경</td></tr>
</tbody></table>`},
{title:'권한 모드',icon:'🔐',iconClass:'orange',subtitle:'Shift+Tab으로 순환 전환',content:`
<div class="kv-item"><span class="kv-key">Normal</span><span class="kv-val">파일 수정/bash 실행 시 매번 승인 (기본, 안전)</span></div>
<div class="kv-item"><span class="kv-key">Auto-Accept</span><span class="kv-val">모든 도구 자동 승인 ⚠️ 숙련자만</span></div>
<div class="kv-item"><span class="kv-key">Plan Mode</span><span class="kv-val">읽기 전용 — 분석/계획만 (가장 안전)</span></div>
<div class="tip-box"><div class="tip-label">추천 흐름</div><p>Plan Mode → 계획 수립 → Normal Mode → 실행. 초보자는 Auto-Accept 절대 금지!</p></div>`},
{title:'키보드 단축키',icon:'⚡',iconClass:'purple',subtitle:'필수 단축키',content:`
<table class="data-table"><thead><tr><th>단축키</th><th>기능</th></tr></thead><tbody>
<tr><td>Shift+Tab</td><td>권한 모드 전환</td></tr>
<tr><td>Shift+Enter</td><td>프롬프트 내 줄바꿈</td></tr>
<tr><td>Ctrl+C</td><td>작업 중단</td></tr>
<tr><td>Ctrl+B</td><td>백그라운드 전환</td></tr>
<tr><td>Ctrl+O</td><td>사고 과정 보기</td></tr>
</tbody></table>`},
{title:'비대화형 모드 (Headless)',icon:'🤖',iconClass:'green',subtitle:'스크립트/CI에서 활용',content:`
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># 질문 후 결과만 출력</span>
<span class="cmd">claude</span> <span class="flag">-p</span> <span class="string">"이 프로젝트 아키텍처를 분석해줘"</span>
<span class="comment"># 파이프 연결</span>
<span class="cmd">cat</span> error.log | <span class="cmd">claude</span> <span class="flag">-p</span> <span class="string">"이 에러를 분석해줘"</span>
<span class="comment"># JSON 출력</span>
<span class="cmd">claude</span> <span class="flag">-p --output-format json</span> <span class="string">"의존성 분석"</span></pre></div>`},
{title:'비용 & 토큰 관리',icon:'💰',iconClass:'orange',subtitle:'구독 vs API 과금 차이와 요금 폭탄 방지',content:`
<p>Claude Code를 사용하는 방법은 크게 두 가지입니다. <strong>과금 방식이 완전히 다르므로</strong> 반드시 이해하고 시작하세요.</p>
<h4>방법 1: Claude.ai 구독 (추천)</h4>
<p><strong>월 정액제</strong>로 사용량 한도 내에서 자유롭게 사용합니다. 한도 초과 시 속도 제한(Rate Limit)이 걸립니다.</p>
<table class="data-table"><thead><tr><th>플랜</th><th>가격</th><th>특징</th></tr></thead><tbody>
<tr><td>Pro</td><td>$20/월</td><td>Sonnet 중심, Opus 제한적. 가벼운 작업용</td></tr>
<tr><td>Max 5x</td><td>$100/월</td><td>Opus 사용 가능, 5배 사용량. 일반 개발자 추천</td></tr>
<tr><td>Max 20x</td><td>$200/월</td><td>Opus 넉넉히, 20배 사용량. 헤비 유저</td></tr>
</tbody></table>
<div class="tip-box"><div class="tip-label">구독의 장점</div><p>아무리 많이 써도 <strong>월 요금 이상 청구되지 않습니다.</strong> 한도 초과 시 속도만 느려질 뿐 추가 과금이 없어 초보자에게 안전합니다.</p></div>
<h4>방법 2: API (Console) 종량제</h4>
<p><strong>토큰 단위로 과금</strong>됩니다. 사용한 만큼 정확히 청구되므로 예산 관리가 필수입니다.</p>
<table class="data-table"><thead><tr><th>모델</th><th>입력 (1M 토큰)</th><th>출력 (1M 토큰)</th></tr></thead><tbody>
<tr><td>Opus 4.6</td><td>$15</td><td>$75</td></tr>
<tr><td>Sonnet 4.6</td><td>$3</td><td>$15</td></tr>
<tr><td>Haiku 4.5</td><td>$0.80</td><td>$4</td></tr>
</tbody></table>
<div class="warn-box"><div class="warn-label">API 과금 주의</div><p>Claude Code는 한 번의 작업에 수만~수십만 토큰을 사용할 수 있습니다. Opus로 큰 리팩토링을 하면 <strong>한 세션에 $5~$20</strong>이 나올 수 있습니다. 반드시 <a href="https://console.anthropic.com" target="_blank">Console</a>에서 <strong>월 예산 한도(Spend Limit)</strong>를 설정하세요.</p></div>
<h4>어떤 걸 선택해야 할까?</h4>
<div class="kv-item"><span class="kv-key">입문자/일반 개발자</span><span class="kv-val">→ <strong>Max 5x ($100/월)</strong> 추천. 예측 가능한 비용, Opus 사용 가능</span></div>
<div class="kv-item"><span class="kv-key">헤비 유저/팀</span><span class="kv-val">→ <strong>Max 20x ($200/월)</strong> 또는 API. 대량 작업 시 API가 더 저렴할 수 있음</span></div>
<div class="kv-item"><span class="kv-key">CI/CD 자동화</span><span class="kv-val">→ <strong>API 필수</strong>. 자동화 파이프라인은 구독으로 사용 불가</span></div>
<h4>사용량 확인 & 절약</h4>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># 현재 세션 토큰 사용량 확인</span>
<span class="cmd">/cost</span>
<span class="comment"># 대화 압축 (토큰 절약)</span>
<span class="cmd">/compact</span>
<span class="comment"># 커스텀 요약으로 압축</span>
<span class="cmd">/compact</span> <span class="string">"인증 관련 내용만 유지해줘"</span></pre></div>
<div class="tip-box"><div class="tip-label">절약 팁</div><p>대화가 길어지면 <code>/compact</code>로 압축하세요. 단순 질문은 Sonnet, 복잡한 작업은 Opus로 모델을 전환하면 비용을 크게 줄일 수 있습니다.</p></div>`},
{title:'모델 선택 전략',icon:'🤖',iconClass:'blue',subtitle:'Opus vs Sonnet vs Haiku, 언제 뭘 쓸까',content:`
<p><code>/model</code>로 언제든 모델을 전환할 수 있습니다. 작업 유형에 따라 적절한 모델을 선택하면 비용과 속도를 최적화할 수 있습니다.</p>
<table class="data-table"><thead><tr><th>모델</th><th>적합한 작업</th><th>특징</th></tr></thead><tbody>
<tr><td>Opus 4.6</td><td>복잡한 아키텍처 설계, 대규모 리팩토링, 어려운 버그 수정</td><td>최고 품질, 느림, 비쌈</td></tr>
<tr><td>Sonnet 4.6</td><td>일반적인 코딩, 파일 수정, 테스트 작성</td><td>빠르고 균형 잡힌 성능, 가성비 최고</td></tr>
<tr><td>Haiku 4.5</td><td>간단한 질문, 코드 설명, 한 줄 수정</td><td>가장 빠르고 저렴</td></tr>
</tbody></table>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># 모델 변경</span>
<span class="cmd">/model</span> <span class="comment"># 대화형 선택</span>
<span class="cmd">/model opus</span> <span class="comment"># Opus로 변경</span>
<span class="cmd">/model sonnet</span> <span class="comment"># Sonnet으로 변경</span></pre></div>
<div class="tip-box"><div class="tip-label">추천 전략</div><p>평소에는 <strong>Sonnet</strong>으로 작업하고, 복잡한 설계나 디버깅이 필요할 때만 <strong>Opus</strong>로 전환하세요. 이것만으로 비용 50% 이상 절약 가능합니다.</p></div>`}
],
practice:{
summary:'3가지 권한 모드를 직접 전환하며 차이를 체감하세요.',
steps:[
{title:'Plan Mode 실습',desc:'기존 프로젝트 폴더에서 <code>claude --permission-mode plan</code>으로 시작한 뒤 <code>"이 프로젝트의 구조를 분석해줘"</code>를 입력하세요.',expected:'Claude가 파일 구조를 읽고 분석 결과를 제시하지만, 어떤 파일도 수정하지 않습니다.'},
{title:'Normal Mode 전환',desc:'<code>Shift+Tab</code>을 눌러 Normal Mode로 전환하세요. <code>"README.md를 개선해줘"</code>를 입력합니다.',expected:'Claude가 파일 수정 전 "이 파일을 수정해도 될까요?" 같은 승인을 요청합니다.'},
{title:'키보드 단축키 테스트',desc:'<code>Shift+Enter</code>로 여러 줄 프롬프트를 작성해보세요. <code>Ctrl+O</code>로 사고 과정을 확인해보세요.',expected:'여러 줄 입력이 되고, Transcript 모드에서 Claude의 내부 사고 과정을 볼 수 있습니다.'},
{title:'비대화형 모드 테스트',desc:'별도 터미널에서 <code>claude -p "현재 디렉토리의 파일 목록을 알려줘"</code>를 실행하세요.',expected:'결과가 출력되고 자동으로 종료됩니다. 스크립트에서 활용 가능합니다.'},
{title:'세션 이어하기',desc:'<code>claude</code>를 실행하고 대화한 뒤 종료. 다시 <code>claude</code> 실행 후 <code>/resume</code>으로 이전 세션을 선택하세요.',expected:'이전 대화 목록이 보이고, 선택하면 컨텍스트가 복원됩니다.'}
],
checklist:['Plan Mode에서 분석 실행','Normal Mode에서 파일 수정','Shift+Tab 모드 전환 3번 이상','비대화형 모드 (-p) 실행','/resume로 세션 이어하기','/cost로 토큰 사용량 확인','/model로 Opus ↔ Sonnet 전환 테스트']
}
},
{
id:'module3',num:'03',title:'하네스 이해하기',desc:'에이전트 루프, 도구 디스패치, 컨텍스트 조립',time:'1.5시간',chapterUrl:'chapters/harness.html',
title_en:'Understanding the Harness',desc_en:'Agent loop, tool dispatch, context assembly',
goals:['하네스의 역할과 구조 이해','에이전트 루프 동작 원리 파악','컨텍스트 조립 과정 이해'],
goals_en:['Understand the role and structure of the harness','Learn how the agent loop works','Understand the context assembly process'],
sections:[
{title:'하네스란?',title_en:'What is a Harness?',icon:'🎯',iconClass:'blue',subtitle:'모델을 감싸서 동작하게 만드는 런타임',subtitle_en:'The runtime that wraps the model and makes it work',content:`
<p><strong>하네스(Harness)</strong>는 Claude 모델을 감싸서 실제로 동작하게 만드는 런타임 시스템입니다. 모델이 "두뇌"라면, 하네스는 두뇌가 세상과 상호작용할 수 있게 해주는 "몸체"입니다.</p>
<div class="kv-item"><span class="kv-key">에이전트 루프</span><span class="kv-val">모델 호출 → 도구 실행 → 결과 피드백 → 반복</span></div>
<div class="kv-item"><span class="kv-key">도구 디스패치</span><span class="kv-val">모델의 도구 호출 요청을 실제로 실행</span></div>
<div class="kv-item"><span class="kv-key">컨텍스트 조립</span><span class="kv-val">CLAUDE.md + 도구 정의 + 대화 히스토리를 하나로 합침</span></div>
<div class="kv-item"><span class="kv-key">권한 관리</span><span class="kv-val">Normal/Auto-Accept/Plan 모드에 따라 도구 실행 제어</span></div>
<div class="tip-box"><div class="tip-label">핵심</div><p>하네스를 이해하면 Claude Code의 모든 기능이 하나로 연결됩니다. "왜 CLAUDE.md를 짧게 써야 하는지", "왜 MCP가 많으면 느려지는지" 등의 이유를 정확히 알 수 있습니다.</p></div>`},
{title:'에이전트 루프',title_en:'The Agent Loop',icon:'🔄',iconClass:'green',subtitle:'하네스의 가장 중요한 역할',subtitle_en:'The most critical role of the harness',content:`
<p>하네스의 핵심은 <strong>에이전트 루프</strong>입니다. 여러분이 프롬프트를 입력하면 이 과정이 작업 완료까지 반복됩니다.</p>
<div class="kv-item"><span class="kv-key">1. 컨텍스트 조립</span><span class="kv-val">시스템 프롬프트 + CLAUDE.md + 도구 정의 + 대화 + 사용자 메시지를 묶어서 전송</span></div>
<div class="kv-item"><span class="kv-key">2. 모델 응답</span><span class="kv-val">Claude가 텍스트 응답 또는 도구 호출 요청을 반환</span></div>
<div class="kv-item"><span class="kv-key">3. 권한 확인</span><span class="kv-val">하네스가 권한 모드에 따라 승인/거부/질문</span></div>
<div class="kv-item"><span class="kv-key">4. 도구 실행</span><span class="kv-val">승인되면 실제 파일 읽기/쓰기/명령 실행 + Hooks 실행</span></div>
<div class="kv-item"><span class="kv-key">5. 결과 피드백</span><span class="kv-val">실행 결과를 모델에게 전달 → 완료 또는 2단계로 반복</span></div>`},
{title:'도구 & 권한',title_en:'Tools & Permissions',icon:'🛡️',iconClass:'orange',subtitle:'안전하게 실행하는 게이트키퍼',subtitle_en:'The gatekeeper for safe execution',content:`
<p>모델이 "이 도구를 쓰겠다"고 하면 하네스가 실제 실행을 담당합니다. 내장 도구(Read, Write, Bash 등)와 MCP 도구 모두 동일하게 관리합니다.</p>
<p>권한 시스템이 모델과 실제 실행 사이의 <strong>게이트키퍼</strong> 역할을 합니다. <code>settings.json</code>에서 도구별, 명령별로 세밀하게 허용/거부 규칙을 설정할 수 있습니다.</p>
<div class="warn-box"><div class="warn-label">MCP 도구 주의</div><p>MCP 서버를 연결하면 모든 도구 정의가 컨텍스트에 포함됩니다. 10개 이상 연결하면 컨텍스트 윈도우의 상당 부분을 차지하여 성능이 저하됩니다.</p></div>`}
],
practice:{
summary:'에이전트 루프의 동작을 직접 관찰하고, 하네스의 각 역할을 체험하세요.',
summary_en:'Observe the agent loop in action and experience each role of the harness.',
steps:[
{title:'에이전트 루프 관찰',title_en:'Observe the Agent Loop',desc:'Claude Code에서 <code>"이 프로젝트의 README.md를 개선해줘"</code>를 입력하고, Claude가 파일을 읽고 → 분석하고 → 수정하는 루프를 관찰하세요.',expected:'Claude가 여러 번의 도구 호출(Read → 분석 → Edit)을 반복하는 것을 볼 수 있습니다.'},
{title:'권한 모드 전환 체험',title_en:'Experience Permission Mode Switching',desc:'같은 요청을 Normal Mode와 Plan Mode에서 각각 실행해보세요. <code>Shift+Tab</code>으로 모드를 전환합니다.',expected:'Normal Mode에서는 도구 실행 전 승인을 요청하고, Plan Mode에서는 분석만 하고 수정하지 않습니다.'},
{title:'컨텍스트 사용량 확인',title_en:'Check Context Usage',desc:'대화를 5~10회 주고받은 후 <code>/cost</code>를 입력하여 토큰 사용량을 확인하세요.',expected:'입력/출력 토큰 수와 비용이 표시됩니다. 대화가 길수록 토큰이 증가하는 것을 확인할 수 있습니다.'},
{title:'/compact로 압축 체험',title_en:'Try /compact Compression',desc:'<code>/compact "README 관련 내용만 유지"</code>를 실행한 후 <code>/cost</code>로 다시 확인하세요.',expected:'토큰 사용량이 줄어들고, 지정한 키워드 관련 내용만 유지됩니다.'},
{title:'Hooks 이해하기 (관찰)',title_en:'Understanding Hooks (Observation)',desc:'<code>claude /settings</code>를 실행하여 현재 설정된 Hooks가 있는지 확인하세요. 없다면 챕터의 Hooks 섹션을 읽고 어떤 자동화가 가능한지 정리하세요.',expected:'Hooks의 4가지 시점(PreToolUse, PostToolUse, Notification, Stop)과 활용 사례를 이해합니다.'}
],
checklist:['에이전트 루프 동작 관찰 (도구 호출 반복 확인)','Normal vs Plan Mode 차이 체험','/cost로 토큰 사용량 확인','/compact로 대화 압축 실행','하네스의 4가지 핵심 역할 정리 (루프, 도구, 권한, 컨텍스트)'],
checklist_en:['Observe agent loop (confirm repeated tool calls)','Experience Normal vs Plan Mode difference','Check token usage with /cost','Compress conversation with /compact','Summarize 4 core harness roles (loop, tools, permissions, context)']
}
},
{
id:'module4',num:'04',title:'CLAUDE.md — 프로젝트 메모리',desc:'컨텍스트 설정의 핵심',time:'1.5시간',chapterUrl:'chapters/claude-md.html',
title_en:'Project Configuration File (CLAUDE.md)',desc_en:'Give Claude persistent instructions',
goals:['CLAUDE.md 역할과 작성법 이해','프로젝트 컨텍스트 설계'],
goals_en:['Write a CLAUDE.md that fits your project','Understand global vs local configuration'],
sections:[
{title:'CLAUDE.md 개념',icon:'🧠',iconClass:'purple',subtitle:'세션마다 자동 로드되는 프로젝트 설명서',content:`
<p>프로젝트 루트의 <code>CLAUDE.md</code>는 매 세션 시작 시 자동으로 로드됩니다. <code>/init</code>으로 자동 생성할 수 있습니다.</p>
<div class="kv-item"><span class="kv-key">~/CLAUDE.md</span><span class="kv-val">전역 — 모든 프로젝트 공통</span></div>
<div class="kv-item"><span class="kv-key">프로젝트/CLAUDE.md</span><span class="kv-val">프로젝트 레벨</span></div>
<div class="kv-item"><span class="kv-key">하위폴더/CLAUDE.md</span><span class="kv-val">디렉토리 레벨 (오버라이드)</span></div>`},
{title:'작성 예시',icon:'📝',iconClass:'blue',subtitle:'실전 CLAUDE.md 템플릿',content:`
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot md"></span>CLAUDE.md</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># MyApp</span>
<span class="keyword">## Quick Facts</span>
- <span class="flag">Stack</span>: Swift, SwiftUI, SwiftData
- <span class="flag">iOS</span>: 17+
- <span class="flag">Architecture</span>: MVVM + Clean Architecture
<span class="keyword">## Build & Test</span>
- <span class="cmd">swift build</span>
- <span class="cmd">swift test</span>
- <span class="cmd">swiftlint</span>
<span class="keyword">## Conventions</span>
- View body 200줄 이내
- public API에 /// 문서 주석
- @MainActor 명시적 표기
<span class="keyword">## DO NOT</span>
- main 브랜치 직접 커밋 금지
- Force unwrap (!) 금지
- print() 커밋 금지</pre></div>
<div class="tip-box"><div class="tip-label">핵심 원칙</div><p>간결하게! 토큰 예산은 컨텍스트의 ~2%입니다. 실행 가능한 명령어와 "하지 말 것" 목록이 가장 중요합니다.</p></div>`}
],
practice:{
summary:'자신의 프로젝트(또는 새 프로젝트)에 CLAUDE.md를 작성하고 효과를 검증하세요.',
steps:[
{title:'/init으로 자동 생성',desc:'프로젝트 폴더에서 <code>claude</code> 실행 → <code>/init</code> 입력. Claude가 프로젝트를 분석하고 CLAUDE.md 초안을 생성합니다.',expected:'프로젝트 루트에 CLAUDE.md가 생성됩니다. 스택, 구조, 빌드 명령어 등이 포함됩니다.'},
{title:'CLAUDE.md 커스터마이징',desc:'생성된 파일을 열어 위 템플릿을 참고하여 수정하세요. 특히 <strong>"코딩 컨벤션"</strong>과 <strong>"절대 하지 말 것"</strong> 섹션을 자신의 스타일에 맞게 작성합니다.',expected:'프로젝트에 맞는 맞춤형 CLAUDE.md가 완성됩니다.'},
{title:'효과 검증 — Before',desc:'CLAUDE.md 없이 <code>"새로운 API 엔드포인트를 만들어줘"</code>를 요청하고 결과를 기록하세요.',expected:'Claude가 자체 판단으로 코드를 생성합니다. 컨벤션이 맞지 않을 수 있습니다.'},
{title:'효과 검증 — After',desc:'CLAUDE.md를 작성한 후 같은 요청을 해보세요.',expected:'Claude가 CLAUDE.md의 컨벤션을 따르는 코드를 생성합니다. 명확한 차이를 체감할 수 있습니다.'},
{title:'전역 CLAUDE.md 작성 (선택)',desc:'<code>~/CLAUDE.md</code>에 모든 프로젝트에 공통으로 적용할 선호사항을 작성하세요. 예: "한국어로 응답해줘", "커밋 메시지는 영어로"',expected:'모든 프로젝트에서 자동으로 전역 설정이 적용됩니다.'}
],
checklist:['/init으로 CLAUDE.md 자동 생성','코딩 컨벤션 섹션 커스터마이징','CLAUDE.md 유무에 따른 결과 차이 확인','빌드/테스트 명령어 정확히 기재']
}
},
{
id:'module5',num:'05',title:'효과적인 프롬프팅',desc:'좋은 프롬프트, Plan Mode, 컨텍스트',time:'2시간',chapterUrl:'chapters/prompting.html',
title_en:'Prompting Strategies',desc_en:'Context management, effective instructions',
goals:['Claude Code 최적화 프롬프트 작성','Plan Mode 전략','@ 멘션과 컨텍스트 관리'],
goals_en:['Write context-rich prompts','Understand token economy'],
sections:[
{title:'프롬프트 패턴 5가지',icon:'✍️',iconClass:'orange',subtitle:'결과를 결정하는 프롬프트 품질',content:`
<h4>❌ 나쁜 프롬프트</h4>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot txt"></span>prompt</span></div><pre>로그인 만들어줘</pre></div>
<h4>✅ 좋은 프롬프트</h4>
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot txt"></span>prompt</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre>SwiftUI로 로그인 화면을 만들어줘.
- 이메일 + 비밀번호 입력 필드
- 로그인 버튼 (유효성 검증 후 활성)
- 에러 메시지 영역
- 비밀번호 표시/숨기기 토글
- MVVM 패턴으로 LoginViewModel 분리
- 유닛 테스트도 함께 생성</pre></div>
<div class="kv-item"><span class="kv-key">1. 구체적 요구</span><span class="kv-val">스택, 패턴, 제약조건 명시</span></div>
<div class="kv-item"><span class="kv-key">2. 단계적 지시</span><span class="kv-val">"먼저 ~하고, 그 다음 ~해줘"</span></div>
<div class="kv-item"><span class="kv-key">3. 출력 형식</span><span class="kv-val">"테스트 포함", "주석 달아줘"</span></div>
<div class="kv-item"><span class="kv-key">4. 컨텍스트</span><span class="kv-val">"@UserService.swift를 보면..."</span></div>
<div class="kv-item"><span class="kv-key">5. 부정 지시</span><span class="kv-val">"any 타입 사용 금지"</span></div>`},
{title:'Plan Mode 전략',icon:'🗺️',iconClass:'blue',subtitle:'먼저 계획, 그 다음 실행',content:`
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>workflow</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># 1단계: Plan Mode 분석</span>
<span class="cmd">claude</span> <span class="flag">--permission-mode plan</span>
<span class="prompt">> </span><span class="string">"인증 시스템을 분석하고 개선 방안 제안해줘"</span>
<span class="comment"># 2단계: 확인 후 Normal Mode</span>
<span class="comment"># Shift+Tab → Normal</span>
<span class="prompt">> </span><span class="string">"위 계획대로 실행해줘"</span></pre></div>`},
{title:'작업 분해 유도',title_en:'Task Decomposition',icon:'📋',iconClass:'purple',subtitle:'계획을 세운 에이전트의 완료율은 2배',subtitle_en:'Agents with plans have 2x completion rate',content:`
<p>복잡한 작업을 줄 때, Claude에게 <strong>먼저 계획을 세우게</strong> 하면 완료율이 크게 올라갑니다.</p>
<div class="kv-item"><span class="kv-key">나쁜 예</span><span class="kv-val">"인증, 결제, 알림 기능 한꺼번에 추가해줘" → 방향을 잃고 미완성</span></div>
<div class="kv-item"><span class="kv-key">좋은 예</span><span class="kv-val">"먼저 계획을 세워줘. 그 다음 단계별로 실행하고 각 단계마다 테스트 돌려줘"</span></div>
<div class="kv-item"><span class="kv-key">최고의 예</span><span class="kv-val">Plan Mode에서 계획 → 확인 → Normal Mode에서 실행</span></div>
<div class="tip-box"><div class="tip-label">내부 동작</div><p>Claude는 내부적으로 <strong>TodoWrite</strong> 도구로 태스크 리스트를 관리합니다. "먼저 계획을 세워줘"라고 하면 자체 체크리스트를 만들고 하나씩 완료합니다.</p></div>`},
{title:'3계층 컨텍스트 관리',title_en:'3-Tier Context Strategy',icon:'🗜️',iconClass:'green',subtitle:'긴 세션을 체계적으로 관리하는 전략',subtitle_en:'Systematic strategy for long sessions',content:`
<p><code>/compact</code>만 쓰지 말고, <strong>3계층 전략</strong>으로 체계적으로 관리하세요.</p>
<div class="kv-item"><span class="kv-key">1계층: 선제적 분리</span><span class="kv-val">큰 작업 전에 세션 자체를 나누기. "분석" → /clear → "구현"</span></div>
<div class="kv-item"><span class="kv-key">2계층: 선택적 압축</span><span class="kv-val"><code>/compact "결제 API 관련만 유지"</code>처럼 키워드 지정하여 핵심만 보존</span></div>
<div class="kv-item"><span class="kv-key">3계층: 자동 압축 대비</span><span class="kv-val">CLAUDE.md에 핵심 규칙 기재 — CLAUDE.md는 압축되지 않으므로 항상 생존</span></div>`},
{title:'컨텍스트 윈도우 이해',icon:'📊',iconClass:'green',subtitle:'대화가 길어지면 성능이 떨어지는 이유',content:`
<p>Claude Code는 매 요청마다 <strong>대화 전체 내용</strong>을 모델에 전송합니다. 대화가 길어지면 컨텍스트 윈도우가 차서 성능이 저하됩니다.</p>
<h4>컨텍스트 윈도우란?</h4>
<p>모델이 한 번에 처리할 수 있는 텍스트 양(토큰)의 한계입니다. 대화 + 파일 내용 + CLAUDE.md + MCP 도구 정의가 모두 이 안에 들어가야 합니다.</p>
<table class="data-table"><thead><tr><th>모델</th><th>컨텍스트</th></tr></thead><tbody>
<tr><td>Opus 4.6</td><td>200K (1M Beta)</td></tr>
<tr><td>Sonnet 4.6</td><td>200K</td></tr>
</tbody></table>
<h4>성능 저하 신호 & 해결법</h4>
<div class="kv-item"><span class="kv-key">이전 대화를 잊음</span><span class="kv-val"><code>/compact</code>로 압축 또는 <code>/clear</code> 후 새 세션</span></div>
<div class="kv-item"><span class="kv-key">응답이 느려짐</span><span class="kv-val">컨텍스트 가득 참 — <code>/cost</code>로 토큰 확인 후 압축</span></div>
<div class="kv-item"><span class="kv-key">엉뚱한 파일 수정</span><span class="kv-val">컨텍스트 혼잡 — 새 세션에서 작업 재시작</span></div>
<div class="tip-box"><div class="tip-label">핵심 원칙</div><p><strong>하나의 세션 = 하나의 작업.</strong> 기능 구현이 끝나면 새 세션을 시작하세요. 여러 작업을 하나의 세션에서 하면 컨텍스트가 오염됩니다. <code>/compact "요약 키워드"</code>로 필요한 맥락만 남길 수도 있습니다.</p></div>`}
],
practice:{
summary:'같은 기능을 다양한 프롬프트로 요청하여 결과 차이를 분석하세요.',
steps:[
{title:'나쁜 프롬프트 테스트',desc:'<code>"할 일 목록 앱 만들어줘"</code>를 입력하고 결과를 저장(스크린샷)하세요.',expected:'Claude가 자체 판단으로 기본적인 앱을 만듭니다. 구조와 기술 선택이 여러분의 기대와 다를 수 있습니다.'},
{title:'좋은 프롬프트 테스트',desc:'<code>/clear</code> 후 다음을 입력하세요:<br>"SwiftUI + SwiftData로 할 일 목록 앱을 만들어줘. MVVM 패턴, 완료/미완료 필터링, 우선순위(높음/중간/낮음), 스와이프 삭제 지원. 테스트 포함."',expected:'훨씬 구체적이고 정확한 결과물이 나옵니다. 요청한 모든 기능이 포함됩니다.'},
{title:'Plan Mode 실습',desc:'<code>/plan</code>으로 진입 후 <code>"이 프로젝트에 푸시 알림 기능을 추가하려면 어떤 단계가 필요한지 분석해줘"</code>를 요청하세요.',expected:'실행 없이 상세한 계획과 단계가 제시됩니다.'},
{title:'@ 멘션 활용',desc:'프로젝트 내 특정 파일을 <code>@파일경로</code>로 참조하며 수정을 요청하세요.',expected:'Claude가 해당 파일의 맥락을 정확히 이해하고 수정합니다.'},
{title:'결과 비교 정리',desc:'나쁜 프롬프트와 좋은 프롬프트의 결과를 비교하여 차이점을 3가지 이상 적어보세요.',expected:'프롬프트 품질이 결과물 품질에 직접적으로 영향을 미친다는 것을 체감합니다.'}
],
checklist:['나쁜 프롬프트 결과물 저장','좋은 프롬프트 결과물 저장','차이점 3가지 이상 정리','Plan Mode로 분석 실행','@ 멘션으로 파일 참조 사용','/compact로 대화 압축 실행','새 세션 시작으로 컨텍스트 리셋 체험']
}
},
{
id:'module6',num:'06',title:'MCP 서버 연결',desc:'GitHub, DB, API 등 외부 도구 통합',time:'2시간',chapterUrl:'chapters/mcp.html',
title_en:'MCP — External Tool Integration',desc_en:'Connect Slack, GitHub, databases and more',
goals:['MCP 개념 이해','외부 도구 연결 실습'],
goals_en:['Install and configure an MCP server','Use Claude Code with external services'],
sections:[
{title:'MCP 서버 추가',icon:'🔌',iconClass:'purple',subtitle:'외부 도구를 Claude Code에 연결',content:`
<div class="code-block"><div class="code-header"><span class="lang"><span class="dot bash"></span>bash</span><button class="copy-btn" onclick="copyCode(this)">copy</button></div><pre><span class="comment"># GitHub MCP 추가</span>
<span class="cmd">claude mcp add</span> <span class="flag">--transport stdio</span> github -- \\
npx -y @anthropic-ai/mcp-server-github
<span class="comment"># 관리 명령어</span>
<span class="cmd">claude mcp list</span> <span class="comment"># 목록</span>
<span class="cmd">claude mcp remove</span> github <span class="comment"># 제거</span>
<span class="cmd">/mcp</span> <span class="comment"># 세션 내 상태</span></pre></div>
<div class="warn-box"><div class="warn-label">⚠️ 컨텍스트 주의</div><p>MCP 10개 이상이면 컨텍스트가 급감합니다. 동시에 3~4개만 활성화하세요.</p></div>`}
],
practice:{
summary:'GitHub MCP를 연결하고 이슈 기반 개발 워크플로우를 실습하세요.',
steps:[
{title:'GitHub 토큰 준비',desc:'GitHub Settings > Developer settings > Personal access tokens에서 토큰을 생성하세요. repo 권한을 부여합니다.',expected:'<code>ghp_...</code>로 시작하는 토큰이 생성됩니다.'},
{title:'환경변수 설정',desc:'<code>export GITHUB_TOKEN=ghp_your_token</code>을 실행하세요 (.zshrc에 추가 추천).',expected:'환경변수가 설정됩니다.'},
{title:'GitHub MCP 추가',desc:'<code>claude mcp add --transport stdio github -- npx -y @anthropic-ai/mcp-server-github</code>를 실행하세요.',expected:'<code>claude mcp list</code>에서 github이 보입니다.'},
{title:'이슈 기반 작업',desc:'Claude Code에서 <code>"내 레포 username/repo의 이슈 목록을 보여줘"</code>를 요청한 뒤, 특정 이슈를 골라 <code>"이 이슈를 해결하는 코드를 작성해줘"</code>를 요청하세요.',expected:'Claude가 GitHub에서 이슈를 읽고, 코드를 수정하여 해결합니다.'},
{title:'MCP 상태 확인',desc:'<code>/mcp</code>를 입력하여 연결 상태를 확인하세요.',expected:'github MCP가 connected 상태로 표시됩니다.'}
],
checklist:['GitHub 토큰 생성','GitHub MCP 연결 성공','/mcp에서 상태 확인','이슈 목록 조회','이슈 기반 코드 수정']
}
},
{
id:'module7',num:'07',title:'서브에이전트 & 커스텀 에이전트',desc:'병렬 작업, 전문 에이전트',time:'2시간',chapterUrl:'chapters/agents.html',