-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpreview-forge-proposal.html
More file actions
2136 lines (1973 loc) · 143 KB
/
preview-forge-proposal.html
File metadata and controls
2136 lines (1973 loc) · 143 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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preview Forge for Claude Code — 결재 제안서</title>
<meta name="description" content="한 줄 아이디어 → 26 프리뷰 → 10인 패널 다수결 → OpenAPI 잠금 → 풀스택 scaffold → 자기수정 → 499/500 freeze → 인간은 디자인·배포 두 번만 승인. Built with Opus 4.7 해카톤 출품 결재 제안서.">
<meta name="author" content="Claude (Opus 4.7) / for 사용자 결재">
<meta name="generator" content="Claude Code">
<style>
:root {
color-scheme: dark;
/* OKLCH 2026 palette — warmer, perceptually uniform */
--bg: oklch(0.13 0.012 270);
--bg-2: oklch(0.16 0.015 270);
--bg-3: oklch(0.19 0.018 270);
--bg-card: oklch(0.17 0.016 272);
--border: oklch(0.27 0.018 272);
--border-strong: oklch(0.34 0.024 272);
--fg: oklch(0.94 0.012 90);
--fg-dim: oklch(0.74 0.018 90);
--fg-mute: oklch(0.58 0.020 90);
/* Aurora accent system */
--accent: oklch(0.82 0.14 70); /* warm amber */
--accent-2: oklch(0.78 0.12 230); /* cool sky */
--accent-3: oklch(0.74 0.18 350); /* rose pink */
--accent-4: oklch(0.82 0.14 140); /* mint */
--good: oklch(0.82 0.14 145);
--warn: oklch(0.84 0.14 85);
--bad: oklch(0.72 0.18 25);
--info: oklch(0.78 0.12 230);
--code-bg: oklch(0.11 0.010 270);
--code-fg: oklch(0.95 0.008 90);
--shadow-sm: 0 1px 0 color-mix(in oklch, var(--fg) 4%, transparent);
--shadow-md: 0 8px 24px -8px color-mix(in oklch, black 80%, transparent),
0 2px 6px -2px color-mix(in oklch, black 60%, transparent);
--shadow-lg: 0 24px 64px -16px color-mix(in oklch, black 70%, transparent),
0 8px 24px -8px color-mix(in oklch, black 50%, transparent);
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--sans: "Geist", "Inter var", -apple-system, BlinkMacSystemFont, "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
--display: "Geist", "Inter Display", "Inter var", var(--sans);
}
/* Subtle grain — 2026 texture trend */
body::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.35;
mix-blend-mode: overlay;
}
.wrap > * { position: relative; z-index: 1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-size: 15px;
line-height: 1.7;
font-feature-settings: "ss01", "cv11", "calt";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap {
max-width: 1040px;
margin: 0 auto;
padding: 48px 32px 160px;
}
/* ── Cover hero — Aurora UI 2026 trend ── */
.cover {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 56px 48px 44px;
margin-bottom: 56px;
box-shadow: var(--shadow-lg);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(1200px 500px at 110% -30%,
color-mix(in oklch, var(--accent) 28%, transparent) 0%, transparent 55%),
radial-gradient(900px 420px at -15% 120%,
color-mix(in oklch, var(--accent-2) 22%, transparent) 0%, transparent 60%),
radial-gradient(600px 300px at 50% 120%,
color-mix(in oklch, var(--accent-3) 18%, transparent) 0%, transparent 65%),
linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.cover::after {
content: ""; position: absolute; inset: 0;
background:
conic-gradient(from 180deg at 120% 0%,
color-mix(in oklch, var(--accent-4) 10%, transparent) 0deg,
transparent 80deg,
color-mix(in oklch, var(--accent-3) 8%, transparent) 180deg,
transparent 300deg);
mix-blend-mode: screen;
pointer-events: none;
z-index: -1;
filter: blur(40px);
}
.cover .eyebrow {
color: var(--accent);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 16px;
font-weight: 500;
}
.cover h1 {
margin: 0 0 14px;
font-family: var(--display);
font-size: clamp(36px, 6vw, 56px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.035em;
background: linear-gradient(135deg,
var(--fg) 0%,
color-mix(in oklch, var(--fg) 85%, var(--accent)) 60%,
color-mix(in oklch, var(--fg) 75%, var(--accent-3)) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cover .sub {
color: var(--fg-dim);
font-size: 17px;
line-height: 1.6;
margin-bottom: 28px;
max-width: 720px;
}
.cover .meta {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 20px;
border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
padding-top: 24px;
margin-top: 28px;
}
.cover .meta div .k {
color: var(--fg-mute);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 6px;
font-family: var(--mono);
}
.cover .meta div .v {
font-family: var(--mono);
font-size: 13px;
color: var(--fg);
font-weight: 500;
}
.badges {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
border: 1px solid var(--border-strong);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
color: var(--fg-dim);
background: color-mix(in oklch, var(--bg-card) 80%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: border-color 200ms, color 200ms;
}
.badge:hover { border-color: var(--accent); color: var(--fg); }
.badge.good { border-color: rgba(132,201,132,0.4); color: var(--good); }
.badge.warn { border-color: rgba(229,183,105,0.4); color: var(--warn); }
.badge.bad { border-color: rgba(224,125,110,0.4); color: var(--bad); }
.badge.info { border-color: rgba(122,166,194,0.4); color: var(--info); }
.badge.accent { border-color: rgba(212,165,116,0.4); color: var(--accent); }
/* ── TOC ── */
.toc {
background: color-mix(in oklch, var(--bg-card) 75%, transparent);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 28px;
margin-bottom: 48px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.toc h2 {
margin: 0 0 14px;
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fg-mute);
font-weight: 500;
}
.toc ol {
margin: 0; padding-left: 0;
columns: 2; column-gap: 32px;
list-style: none;
counter-reset: toc-counter;
}
.toc li {
margin: 6px 0; break-inside: avoid;
counter-increment: toc-counter;
padding-left: 32px;
position: relative;
}
.toc li::before {
content: "§" counter(toc-counter);
position: absolute; left: 0; top: 0;
font-family: var(--mono);
font-size: 11px;
color: var(--accent);
opacity: 0.7;
}
.toc a {
color: var(--fg);
text-decoration: none;
font-size: 14px;
transition: color 200ms;
}
.toc a:hover { color: var(--accent); }
/* ── Section ── */
section {
margin-bottom: 56px;
scroll-margin-top: 32px;
}
section > h2 {
font-family: var(--display);
font-size: clamp(22px, 3vw, 28px);
font-weight: 600;
margin: 0 0 8px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
letter-spacing: -0.02em;
line-height: 1.2;
}
section > h2 .num {
color: var(--accent);
font-family: var(--mono);
font-size: 14px;
margin-right: 14px;
font-weight: 500;
opacity: 0.9;
}
section > .lede {
color: var(--fg-dim);
margin: 0 0 22px;
font-size: 15px;
line-height: 1.65;
max-width: 840px;
}
h3 {
font-family: var(--display);
font-size: 18px;
font-weight: 600;
margin: 32px 0 10px;
color: var(--fg);
letter-spacing: -0.01em;
}
h4 {
font-size: 12px;
margin: 22px 0 8px;
color: var(--accent-2);
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
p { margin: 10px 0 14px; }
ul, ol { padding-left: 24px; }
li { margin: 6px 0; }
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }
strong { color: var(--fg); font-weight: 600; }
a { color: var(--accent-2); text-decoration: none; transition: color 200ms; }
a:hover { color: var(--accent); }
/* ── Table ── */
.tbl {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 14px 0 22px;
background: color-mix(in oklch, var(--bg-card) 75%, transparent);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tbl th, .tbl td {
text-align: left;
padding: 11px 14px;
border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
vertical-align: top;
line-height: 1.55;
}
.tbl thead th {
background: color-mix(in oklch, var(--bg-3) 70%, transparent);
color: var(--fg-dim);
font-family: var(--mono);
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: color-mix(in oklch, var(--accent) 3%, transparent); }
.tbl td code, .tbl th code { background: var(--code-bg); padding: 2px 6px; border-radius: 6px; font-size: 12px; }
/* ── Code ── */
code {
font-family: var(--mono);
font-size: 13px;
background: var(--code-bg);
padding: 2px 7px;
border-radius: 6px;
color: var(--code-fg);
border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
font-feature-settings: "ss01", "calt";
}
pre {
background: var(--code-bg);
color: var(--code-fg);
padding: 18px 20px;
border-radius: var(--radius);
border: 1px solid var(--border);
overflow-x: auto;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.6;
margin: 14px 0;
box-shadow: var(--shadow-md);
}
pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
/* ── Callouts ── */
.callout {
margin: 18px 0;
padding: 16px 20px;
border-radius: var(--radius);
border: 1px solid var(--border-strong);
background: color-mix(in oklch, var(--bg-3) 70%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.callout .label {
font-family: var(--mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 8px;
font-weight: 500;
}
.callout.tldr { border-left: 3px solid var(--accent); }
.callout.tldr .label { color: var(--accent); }
.callout.warn { border-left: 3px solid var(--warn); background: color-mix(in oklch, var(--warn) 7%, var(--bg-3)); }
.callout.warn .label { color: var(--warn); }
.callout.danger { border-left: 3px solid var(--bad); background: color-mix(in oklch, var(--bad) 8%, var(--bg-3)); }
.callout.danger .label { color: var(--bad); }
.callout.info { border-left: 3px solid var(--info); }
.callout.info .label { color: var(--info); }
.callout.gate { border: 1px solid var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--bg-3)); }
.callout.gate .label { color: var(--accent); }
/* ── Architecture diagram ── */
.arch {
font-family: var(--mono);
font-size: 12px;
line-height: 1.5;
background: var(--code-bg);
padding: 18px;
border-radius: 10px;
border: 1px solid var(--border);
overflow-x: auto;
white-space: pre;
color: var(--fg);
}
/* ── Score grid (bento-style 2026 trend) ── */
.scores {
display: grid;
grid-template-columns: repeat(5, minmax(0,1fr));
gap: 12px;
margin: 14px 0 18px;
}
.scores .cat {
background: color-mix(in oklch, var(--bg-card) 85%, transparent);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
position: relative;
overflow: hidden;
transition: transform 200ms, border-color 200ms;
}
.scores .cat::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-3));
opacity: 0.6;
}
.scores .cat:hover { transform: translateY(-2px); border-color: var(--accent); }
.scores .cat .name {
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fg-mute);
margin-bottom: 8px;
}
.scores .cat .pts {
font-family: var(--display);
color: var(--accent);
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
}
/* ── Decision table (D1~D7) ── */
.decisions th, .decisions td { font-size: 13px; }
.decisions td:first-child { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.decisions tr td:nth-child(4) { color: var(--good); font-weight: 500; }
/* ── Source list ── */
.sources ul {
padding-left: 0;
list-style: none;
}
.sources li { margin: 8px 0; padding-left: 20px; position: relative; font-size: 14px; }
.sources li::before {
content: "→"; position: absolute; left: 0;
color: var(--accent); opacity: 0.6;
font-family: var(--mono);
}
.sources a {
color: var(--accent-2);
text-decoration: none;
transition: color 200ms;
}
.sources a:hover { color: var(--accent); }
.sources .group {
background: color-mix(in oklch, var(--bg-card) 75%, transparent);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 22px;
margin: 14px 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sources .group .title {
font-family: var(--mono);
font-size: 11px;
color: var(--fg-mute);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 8px;
font-weight: 500;
}
/* ── Footer ── */
footer {
margin-top: 80px;
padding-top: 24px;
border-top: 1px solid var(--border);
color: var(--fg-mute);
font-size: 12px;
text-align: center;
font-family: var(--mono);
letter-spacing: 0.04em;
}
/* ── Blockquote ── */
blockquote {
border-left: 3px solid var(--accent);
background: color-mix(in oklch, var(--accent) 6%, var(--bg-3));
margin: 16px 0;
padding: 12px 18px;
color: var(--fg);
border-radius: 0 var(--radius) var(--radius) 0;
}
/* ── Print — 라이트 테마 자동 전환 ── */
@media print {
:root {
color-scheme: light;
--bg: oklch(0.99 0.003 90);
--bg-2: oklch(0.98 0.004 90);
--bg-3: oklch(0.96 0.006 85);
--bg-card: oklch(0.99 0.003 90);
--border: oklch(0.86 0.008 85);
--border-strong: oklch(0.74 0.012 85);
--fg: oklch(0.20 0.010 270);
--fg-dim: oklch(0.38 0.012 270);
--fg-mute: oklch(0.52 0.012 270);
--accent: oklch(0.52 0.14 55);
--accent-2: oklch(0.48 0.12 240);
--accent-3: oklch(0.52 0.16 0);
--good: oklch(0.52 0.14 145);
--warn: oklch(0.56 0.14 85);
--bad: oklch(0.50 0.18 30);
--info: oklch(0.48 0.12 240);
--code-bg: oklch(0.96 0.008 85);
--code-fg: oklch(0.20 0.010 270);
--shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}
body { font-size: 10.5pt; }
body::before { display: none; }
.wrap { max-width: 100%; padding: 0 10mm; }
.cover {
border: 1px solid var(--border-strong);
box-shadow: none;
background: var(--bg-2);
}
.cover::after { display: none; }
.cover h1 { color: var(--fg); background: none; -webkit-text-fill-color: initial; }
.toc { break-after: page; backdrop-filter: none; }
section { break-inside: avoid-page; }
pre, .arch { font-size: 8.5pt; box-shadow: none; }
.badge { background: var(--bg-3); backdrop-filter: none; }
.callout, .sources .group, .tbl { backdrop-filter: none; }
}
/* ── Mobile ── */
@media (max-width: 760px) {
.wrap { padding: 24px 14px 80px; }
.cover { padding: 22px 18px; }
.cover h1 { font-size: 24px; }
.cover .meta { grid-template-columns: 1fr 1fr; }
.toc ol { columns: 1; }
.scores { grid-template-columns: 1fr 1fr; }
.tbl, .tbl thead, .tbl tbody, .tbl th, .tbl td, .tbl tr { font-size: 12.5px; }
}
</style>
</head>
<body>
<div class="wrap">
<!-- ─────────────────────── COVER ─────────────────────── -->
<div class="cover">
<div class="eyebrow">Introducing PreviewDD · v8.0 Final</div>
<h1>PreviewDD → SpecDD → TestDD</h1>
<p class="sub"><strong>TDD는 코드를 테스트로 주도했다. SpecDD는 코드를 스펙으로 주도했다. 우리는 그 앞에 PreviewDD를 놓는다.</strong> 26개의 다양한 시각 mockup이 스펙을 쓰기 전에 방향을 주도하여, 잘못된 것을 정확히 짓는 함정을 피한다. Claude Code plugin, 143 Opus 4.7 에이전트가 3개의 Driven-Development 사이클을 연쇄 실행. 인간은 사이클 사이 2 gate에만 개입.</p>
<div class="badges">
<span class="badge accent">v8.0 Final — 3-DD Methodology</span>
<span class="badge good">PreviewDD · SpecDD · TestDD</span>
<span class="badge good">All-Opus 4.7 (143/143)</span>
<span class="badge good">Claude Design + 내장 Studio</span>
<span class="badge good">Zero 제3자 의존</span>
<span class="badge good">Claude Code Plugin + Marketplace</span>
<span class="badge">1M context · Adaptive · xhigh</span>
<span class="badge">Cache 1h + Context editing + Compaction</span>
<span class="badge">Memory + Reflexion + LESSONS</span>
<span class="badge good">Apache-2.0</span>
</div>
<div class="meta">
<div><div class="k">작성일</div><div class="v">2026-04-22 (KST)</div></div>
<div><div class="k">제출 마감</div><div class="v">2026-04-26 20:00 EST</div></div>
<div><div class="k">배포 채널</div><div class="v">GitHub Plugin Marketplace</div></div>
<div><div class="k">라이선스</div><div class="v">Apache-2.0</div></div>
</div>
</div>
<!-- ─────────────────────── TOC ─────────────────────── -->
<div class="toc">
<h2>목차</h2>
<ol>
<li><a href="#s0">TL;DR — 30초 요약</a></li>
<li><a href="#s1">제품 비전</a></li>
<li><a href="#s2">Marketplace 저장소 구조 + Plugin 배포</a></li>
<li><a href="#s3">아키텍처 개요 + 엔지니어링 조직도 + Blackboard</a></li>
<li><a href="#s4">3-DD Cycles (PreviewDD · SpecDD · TestDD) + H1/H2 Gates</a></li>
<li><a href="#s5">에이전트 카탈로그 (143 agents) + Memory · AskUser · Replay</a></li>
<li><a href="#s6">기술 스택 + Opus 4.7 사용 매트릭스</a></li>
<li><a href="#s7">설치 + 데모 워크플로우</a></li>
<li><a href="#s8">4일 실행 일정</a></li>
<li><a href="#s9">심사 루브릭 매핑</a></li>
<li><a href="#s10">운영 리스크 및 미티게이션</a></li>
<li><a href="#s11">베스트 프랙티스 체크리스트</a></li>
<li><a href="#s12">출처 및 참고문헌</a></li>
</ol>
</div>
<!-- ─────────────────────── §0 TL;DR ─────────────────────── -->
<section id="s0">
<h2><span class="num">§0</span>TL;DR — 30초 안에 잡아야 할 것</h2>
<table class="tbl">
<tbody>
<tr><th>방법론 (핵심)</th>
<td><strong>3-DD Cycles</strong>: <strong>PreviewDD</strong> (26 mockup이 방향 주도, Stages 1–3) → <strong>SpecDD</strong> (OpenAPI lock이 구현 주도, Stages 4–5) → <strong>TestDD</strong> (테스트·점수가 freeze 주도, Stages 6–7). 각 사이클은 전 사이클 산출물을 <em>잠금</em>으로 받아 전진. 인간은 사이클 사이 2개 gate(H1/H2)에서만 개입. <strong>PreviewDD는 본 프로젝트가 신설한 개념</strong> — SpecDD 앞에 다양성 발산 단계를 놓아 "잘못된 것을 정확히 짓는" 함정 제거</td></tr>
<tr><th>배포</th>
<td><strong>Claude Code Plugin</strong>, marketplace 호스팅은 <code>Two-Weeks-Team/PreviewForgeForClaudeCode</code> 저장소 자체. 사용자는 <code>/plugin marketplace add</code> → <code>/plugin install preview-forge@two-weeks-team</code> 두 줄로 설치</td></tr>
<tr><th>무엇을 만드는가</th>
<td>한 줄 아이디어 → 143명 가상 엔지니어링 조직이 OpenAPI-first로 풀스택 앱을 freeze까지 자율 빌드 → 인간은 디자인·배포 2회 클릭만</td></tr>
<tr><th>조직 규모</th>
<td><strong>143 agents · 6-tier + Blackboard</strong>: Meta(3) · Ideation(29) · 4-Panel+MD(45) · Spec(9) · 5 Eng Teams(25) · QA(14) · SCC(5) · Judges(5) · Auditors(5) · Docs(3). 보고선은 위계, 정보 공유는 SQLite Blackboard 실시간</td></tr>
<tr><th>실수반복 방지</th>
<td><strong>4-layer Memory</strong>: LESSONS.md(실패 카탈로그) + PROGRESS.md(run 인덱스) + CLAUDE.md(세션 룰) + Anthropic Memory Tool(<code>memory_20250818</code>) + 각 agent의 Reflexion. M1 Run Supervisor가 새 run 시작 전 LESSONS를 모든 lead에 프리로드. Auto-retro critic이 run 종료 시 LESSONS 자동 append</td></tr>
<tr><th>Layer-0 정책</th>
<td><strong>AskUserQuestion 강제</strong>: 사용자에게 묻는 모든 케이스는 AskUserQuestion 필수(2–4지 구조화 옵션 + 설명 + 권장 1순위). 자유형 텍스트 질문은 PostToolUse 훅이 차단. <code>production_deploy</code> / <code>DROP DATABASE</code> / <code>force-push</code> 등 destructive 패턴은 PreToolUse 훅이 차단</td></tr>
<tr><th>디자인 통합 (Anthropic-native only)</th>
<td>Stage 2에서 26 advocate가 각자 <strong>self-contained mockup.html</strong>(inline CSS, 외부 CDN/폰트/이미지 0) 1장씩 생성. Gate H1은 <strong>Claude Design (2026-04-17 출시, Pro/Max 기본 포함) 메인 플로우</strong> + <strong>내장 Design Studio fallback</strong>. chosen preview를 Claude Design prompt로 패키징 → 사용자가 tweaks · edit으로 조정 → "Send to Claude Code" 번들로 Stage 5 scaffold-builder 소비. Pro/Max 미사용 또는 offline 시 내장 Studio(native HTML5 tweak panel)로 자동 대체. <strong>제3자 서비스(Figma 등) 0</strong></td></tr>
<tr><th>해카톤 부상 매핑</th>
<td>
<strong>Most Creative Opus 4.7 ($5k)</strong> — Opus 4.7을 143개 페르소나로 동시 운용 + Mitigation Designer + 자가학습 LESSONS<br>
<strong>Best Managed Agents ($5k)</strong> — 25명 Engineering Team이 Managed Agents 세션에서 long-running 빌드·테스트·자기수정<br>
<strong>Keep Thinking ($5k)</strong> — <strong>PreviewDD를 신설</strong>(SpecDD · TDD 앞에 위치). "첫 아이디어에 멈추지 않음"을 방법론 수준에서 강제<br>
<strong>Top 1–3</strong> — 143-노드 swarm live 시각화 데모 (89/100 자기평가)
</td></tr>
<tr><th>주요 산출물</th>
<td>① Marketplace repo(<code>.claude-plugin/marketplace.json</code>) ② Plugin(<code>plugins/preview-forge/</code>) ③ 143 subagent 정의 ④ 13 slash commands(<code>/pf:*</code>) ⑤ 3개 hook(<code>askuser-enforcement</code> · <code>factory-policy</code> · <code>auto-retro-trigger</code>) ⑥ Memory 시스템 ⑦ Blackboard SQLite schema ⑧ trace.jsonl replay ⑨ Next.js 143-노드 live 시각화 ⑩ Seed idea bank 10개</td></tr>
<tr><th>비용 정책</th>
<td><strong>Soft cap</strong> — Cost Monitor가 추적·경고만 하고 차단 안 함. e2e 1회 약 $25–40, $500 크레딧으로 12–20회 e2e + 데모 시연 마진</td></tr>
<tr><th>타임라인</th>
<td>4/22(수) PM ~ 4/26(일) 20:00 EST — 실질 4.5일, Day 2 시작</td></tr>
<tr><th>주요 리스크 대응</th>
<td>143-agent 오케스트레이션 복잡도 → M1 Run Supervisor kill switch + lead 단위 retry. Managed Agents 세션 중단 → 세션 resume API 활용, 진행률 영속화. API 비용 → M2 Cost Monitor가 임계 경보만</td></tr>
</tbody>
</table>
</section>
<!-- ─────────────────────── §1 비전 ─────────────────────── -->
<section id="s1">
<h2><span class="num">§1</span>제품 비전</h2>
<h3>1.0 방법론 정체성 — 3-DD Cycles</h3>
<blockquote>
<p><strong>TDD</strong>는 코드를 테스트로 주도했다.<br>
<strong>SpecDD</strong>는 코드를 스펙으로 주도했다.<br>
<strong>우리는 그 앞에 PreviewDD를 놓는다.</strong></p>
</blockquote>
<p>본 프로젝트는 <strong>PreviewDD → SpecDD → TestDD</strong> 3개 cycle이 스테이지 게이트로 연쇄되는 방법론을 구현합니다. 각 DD는 병렬 발산(다양성) → 집계(결정) → 잠금(산출물 해시) 3단계를 따르며, 인간은 cycle 사이 H1/H2 두 gate에만 개입합니다.</p>
<h3>1.1 한 문장 정의</h3>
<blockquote><strong>"Claude Code 사용자가 한 줄을 입력하면, 본인은 디자인 OK / 배포 OK 두 번만 누르고 production-ready 풀스택 앱이 freeze된 상태로 손에 떨어지는 도구."</strong></blockquote>
<h3>1.2 해결하는 통증</h3>
<ul>
<li>"GPT/Claude로 앱 만들기" 영상 99%는 <strong>첫 아이디어를 그대로 짠다</strong> → 진짜 더 좋은 4번 카드를 못 봄</li>
<li>스펙 없이 코드부터 짜면 <strong>drift</strong>가 누적 → "왜 안 되지?" 디버그 무한 루프</li>
<li>풀스택은 의사결정 100개 — 매번 "어떤 DB?", "어떤 인증?", "어떤 배포?" 묻는 게 사람 진을 뺌</li>
<li>테스트는 "나중에" 미루다 결국 안 만들어짐</li>
<li>결과: <strong>AI 코딩의 99%는 데모로 끝나고 freeze되지 않는다</strong></li>
</ul>
<h3>1.3 두 해카톤 문제 테마와의 매핑</h3>
<p>조준 테마: <strong>Build For What's Next (1순위)</strong> — "an interface that doesn't have a name yet. A workflow from a few years out."</p>
<p>사람이 의사결정에서 빠지고 <strong>다양성·검증·자기수정만 강제하는 파이프라인</strong>은 아직 이름이 없는 워크플로우입니다. 보조 테마는 <strong>Build From What You Know</strong> — 우리 자신(개발자)이 매일 쓰는 "AI한테 앱 시켜보기"의 통증을 정확히 알기 때문.</p>
</section>
<!-- ─────────────────────── §2 Marketplace + Plugin ─────────────────────── -->
<section id="s2">
<h2><span class="num">§2</span>Marketplace 저장소 구조 + Plugin 배포</h2>
<p class="lede">배포 표준은 OpenAI의 <a href="https://github.com/openai/codex-plugin-cc">openai/codex-plugin-cc</a> 레이아웃을 따릅니다 — 저장소 루트는 marketplace, <code>plugins/</code> 하위가 실제 plugin. 하나의 repo가 marketplace 역할을 겸하여 사용자는 <code>/plugin marketplace add <owner>/<repo></code> 한 줄로 접근 가능합니다.</p>
<h3>2.1 저장소 최상위 구조</h3>
<pre>Two-Weeks-Team/PreviewForgeForClaudeCode/
├── .claude-plugin/
│ └── marketplace.json ← marketplace 매니페스트
├── plugins/
│ └── preview-forge/ ← 실제 plugin (다음 §2.3 참조)
├── scripts/
│ ├── install-check.sh ← 설치 전 환경 점검
│ └── release.sh ← 버전 태깅 + changelog 자동화
├── tests/
│ ├── plugin-manifest.test.ts ← 매니페스트 schema 검증
│ ├── hooks.test.ts ← hooks.json round-trip
│ └── smoke/ ← e2e smoke test (mock API)
├── docs/
│ ├── plugin-demo.webm ← README에 임베드할 데모 영상
│ ├── architecture.svg ← 143-agent 조직도 그림
│ └── screenshots/ ← 대시보드 스크린샷
├── .github/
│ ├── workflows/
│ │ ├── ci.yml ← lint + test + manifest 검증
│ │ ├── release.yml ← 태그 push → GitHub Release
│ │ └── marketplace-validate.yml
│ └── ISSUE_TEMPLATE/
├── .gitignore
├── LICENSE ← Apache-2.0
├── NOTICE ← 라이선스 고지
├── CHANGELOG.md
├── README.md ← codex-plugin-cc 스타일
└── package.json ← monorepo 루트 (tests/scripts용)</pre>
<h3>2.2 Marketplace manifest — <code>.claude-plugin/marketplace.json</code></h3>
<pre>{
"name": "two-weeks-team",
"owner": {
"name": "Two-Weeks-Team"
},
"metadata": {
"description": "Preview Forge: 143-agent engineering swarm that builds frozen full-stack apps from a single idea.",
"version": "1.0.0"
},
"plugins": [
{
"name": "preview-forge",
"description": "한 줄 아이디어 → OpenAPI 잠금 → 풀스택 freeze. Claude Code에서 /pf:new 한 줄로 실행.",
"version": "1.0.0",
"author": {
"name": "Two-Weeks-Team"
},
"source": "./plugins/preview-forge"
}
]
}</pre>
<h3>2.3 Plugin 내부 구조 — <code>plugins/preview-forge/</code></h3>
<pre>plugins/preview-forge/
├── .claude-plugin/
│ └── plugin.json ← plugin 매니페스트 (§2.4)
├── agents/ ← 143 Subagent 정의
│ ├── meta/{run-supervisor,cost-monitor,chief-engineer-pm}.md
│ ├── ideation/
│ │ ├── {ideation-lead,idea-clarifier,diversity-validator}.md
│ │ └── advocates/P01-P26.md
│ ├── panels/
│ │ ├── {tp,bp,up,rp}/{lead,01-10}.md # 4 패널 × 11명 = 44
│ │ └── mitigation-designer.md
│ ├── spec/{lead,author,sc1-sc7}.md
│ ├── engineering/
│ │ ├── backend/{lead,controller,dto,service,repository,auth}.md
│ │ ├── frontend/{lead,app-router,component,state,tailwind,a11y}.md
│ │ ├── database/{lead,schema,migration,seed,query-opt}.md
│ │ ├── devops/{lead,docker,caddy,cicd,env}.md
│ │ └── sdk/{lead,nestia-gen,ts-client}.md
│ ├── qa/
│ │ ├── functional/{lead,unit,e2e,property,holdout}.md
│ │ ├── security/{lead,sast,secret-scan}.md
│ │ ├── performance/{lead,bundle,load}.md
│ │ └── a11y/{lead,axe,color-sr}.md
│ ├── scc/{lead,backend,frontend,type,dep}.md
│ ├── judges/{j1-j5}.md
│ ├── auditors/{au1-au5}.md
│ └── docs/{readme,changelog,demo-script}.md
├── skills/ ← model-invoked
│ ├── run-bootstrap/SKILL.md
│ ├── scaffold/SKILL.md
│ └── mitigation-design/SKILL.md
├── commands/ ← user-invoked slash commands (14개)
│ ├── pf:new.md · pf:status.md · pf:replay.md · pf:lessons.md
│ ├── pf:panel.md · pf:freeze.md · pf:gallery.md · pf:export.md
│ ├── pf:budget.md · pf:retry.md · pf:seed.md · pf:bootstrap.md
│ ├── pf:design.md ← Gate H1 내장 Design Studio 오픈
│ └── pf:help.md
├── design-studio/ ← Gate H1 내장 리뷰 UI (Next.js route)
│ ├── index.tsx ← 26 mockup grid + chosen tweak panel
│ ├── tweak-controls.tsx ← 슬라이더/컬러픽커/density/wireframe toggle
│ └── live-preview.tsx ← postMessage 기반 iframe 실시간 렌더
├── hooks/
│ ├── hooks.json
│ ├── askuser-enforcement.py ← AskUserQuestion 강제 훅
│ ├── factory-policy.py ← destructive bash 차단 (Layer-0)
│ └── auto-retro-trigger.py ← run 종료 시 LESSON 자동 추출
├── bin/
│ └── pf ← 헤드리스 CLI
├── methodology/
│ └── global.md ← Layer-0 7개 비협상 규칙
├── assets/
│ ├── docker-compose.template.yml
│ ├── Caddyfile.template
│ ├── install.sh.template
│ └── nestia.config.ts.template
├── memory/ ← 초기 seed (plugin install 후 ~/.claude로 복사됨)
│ ├── CLAUDE.md ← 세션 시작 룰
│ ├── PROGRESS.md ← run 인덱스 (빈 상태)
│ └── LESSONS.md ← 실패 카탈로그 (빈 상태)
├── schemas/
│ ├── preview-card.schema.json ← 5-tuple validation
│ ├── panel-vote.schema.json
│ └── score-report.schema.json
├── seed-ideas/
│ ├── 01-craft-studio-pos.md
│ ├── 02-infant-sleep-tracker.md
│ ├── 03-community-code-review.md
│ └── 04-10-*.md ← 총 10개 사전 검증 idea
├── monitors/
│ └── monitors.json ← cost + run-supervisor 이벤트 모니터
├── settings.json ← plugin 활성화 시 기본값
├── CHANGELOG.md
├── LICENSE
├── NOTICE
└── README.md ← plugin 로컬 README (선택)</pre>
<h3>2.4 Plugin manifest — <code>plugins/preview-forge/.claude-plugin/plugin.json</code></h3>
<pre>{
"name": "preview-forge",
"description": "한 줄 아이디어 → 143명 가상 엔지니어링 조직이 OpenAPI-first로 풀스택 앱을 freeze까지. 내장 Design Studio로 외부 디자인 서비스 의존 제거. Built with Opus 4.7.",
"version": "1.0.0",
"author": {
"name": "Two-Weeks-Team",
"email": "app.2weeks@gmail.com"
},
"homepage": "https://github.com/Two-Weeks-Team/PreviewForgeForClaudeCode",
"repository": "https://github.com/Two-Weeks-Team/PreviewForgeForClaudeCode",
"license": "Apache-2.0",
"keywords": ["opus-4-7", "multi-agent", "spec-first", "openapi", "nestia", "design-studio", "self-contained", "hackathon"]
}</pre>
<h3>2.4.1 "외부 의존" 정의 — 제3자 서비스만 의존으로 간주</h3>
<p>본 plugin의 의존성 원칙:</p>
<ul>
<li><strong>제3자 회사 서비스 = 제거</strong> — Figma, Vercel API (build만 사용, 배포는 optional), 기타 비-Anthropic SaaS 의존 없음</li>
<li><strong>Anthropic-native 기능 = 허용</strong> — Claude Code (Pro/Max), Claude Design, Managed Agents, Memory Tool, Batch API, Files API 등은 모두 Pro/Max 구독에 포함되므로 외부 의존이 아닌 <em>플랫폼 기본 기능</em>으로 간주</li>
<li><strong>플러그인 내부 자원 = 자체완결</strong> — 26 mockup은 inline-only HTML (CDN/외부 폰트/외부 이미지 0), 내장 Design Studio는 native HTML5만 사용</li>
</ul>
<p>Gate H1 디자인 승인은 <strong>Claude Design 메인 · 내장 Studio fallback</strong> 2-tier:</p>
<ol>
<li><strong>메인</strong>: <code>/pf:design</code> → chosen_preview를 Claude Design prompt로 패키징 → 사용자가 claude.ai/design에서 tweaks · edit · wireframe↔high-fi 토글 → "Send to Claude Code" → <code>runs/<id>/design-bundle/</code>에 수신</li>
<li><strong>Fallback</strong>: Claude Design 응답 실패·offline 또는 사용자 명시적 선택 시 → 내장 Design Studio(<code>plugins/preview-forge/design-studio/</code>) Next.js route 오픈 → 26 mockup iframe grid + native HTML5 tweak controls로 동등 UX 제공. 두 경로 모두 <code>design-approved.json</code>을 생성하여 Stage 5가 consume</li>
</ol>
<h3>2.5 README 구조 (codex-plugin-cc 스타일)</h3>
<p>저장소 루트 <code>README.md</code>는 다음 7개 섹션으로 구성:</p>
<ol>
<li><strong>Title + 한 줄 설명 + 데모 영상 (<code>docs/plugin-demo.webm</code> 임베드)</strong></li>
<li><strong>What You Get</strong> — 13 slash commands 리스트</li>
<li><strong>Requirements</strong> — Claude Code 최신 + Pro/Max 구독 (팀/엔터프라이즈 포함), Node.js 20, Docker (optional)</li>
<li><strong>Install</strong> — marketplace add → install → bootstrap 3 step</li>
<li><strong>Usage</strong> — 각 슬래시 명령 예시 + 옵션</li>
<li><strong>Typical Flows</strong> — 한 줄 idea → freeze까지의 표준 시나리오</li>
<li><strong>FAQ</strong> — 비용, 실패 복구, 데이터 위치, 오프라인 가능 여부</li>
</ol>
<h3>2.6 설치 절차 (사용자 관점)</h3>
<pre>## 1) Marketplace 등록
/plugin marketplace add Two-Weeks-Team/PreviewForgeForClaudeCode
## 2) Plugin 설치
/plugin install preview-forge@two-weeks-team
## 3) 세션 리로드
/reload-plugins
## 4) 메모리 초기화 (LESSONS/PROGRESS/CLAUDE.md 복사)
/pf:bootstrap
## 5) 실행
/pf:new "한 줄 아이디어"
## 확인
## → /agents 에 143 agents 등록 확인
## → /help 에 /pf:* 13개 명령 확인
## → Next.js 대시보드 자동 기동 (http://localhost:3000)</pre>
<h3>2.7 외부 의존</h3>
<table class="tbl">
<thead><tr><th>의존</th><th>요구 수준</th><th>용도</th></tr></thead>
<tbody>
<tr><td>Claude Code (최신)</td><td>필수</td><td>Plugin 시스템 자체</td></tr>
<tr><td>Claude Code 인증 (Pro/Max · Team · Enterprise 중 하나)</td><td>필수</td><td>Opus 4.7 · Claude Design · Managed Agents · Memory Tool 전부 Pro/Max에 기본 포함 — 별도 API 키 불필요</td></tr>
<tr><td>Node.js 20 LTS</td><td>필수</td><td>orchestrator + 생성된 앱 빌드</td></tr>
<tr><td>pnpm 9</td><td>필수 (plugin 후처리 자동 설치)</td><td>모노레포 패키지</td></tr>
<tr><td>Docker 24+</td><td>Stage 5 검증</td><td>생성된 앱 compose up 헬스체크</td></tr>
<tr><td>Playwright · axe-core</td><td>자동 lazy-install</td><td>QA 단계 — plugin이 <code>pnpm dlx</code></td></tr>
</tbody>
</table>
<h3>2.8 배포 파이프라인</h3>
<ul>
<li><strong>CI</strong>: PR마다 <code>marketplace.json</code>·<code>plugin.json</code> schema 검증, hooks round-trip 테스트, smoke e2e (mock API)</li>
<li><strong>Release</strong>: main에 semver 태그 push 시 GitHub Actions가 GitHub Release 생성 + CHANGELOG 자동 추가 + marketplace.json <code>version</code> 자동 bump</li>
<li><strong>버전 정책</strong>: SemVer. 1.x는 하위호환 API 유지, 2.x는 breaking change</li>
<li><strong>제출</strong>: 해카톤 제출 후 Anthropic 공식 마켓플레이스(<code>claude.ai/settings/plugins/submit</code>)에 등록 신청</li>
</ul>
</section>
<!-- ─────────────────────── §3 아키텍처 ─────────────────────── -->
<section id="s3">
<h2><span class="num">§3</span>아키텍처 개요</h2>
<p class="lede">Anthropic Managed Agents의 brain/hands/session 분리 철학을 차용한 3-layer 구조.</p>
<pre class="arch">┌──────────────────────────────────────────────────────────────────┐
│ Layer A — Brain (의사결정) │
│ Claude Opus 4.7 via Agent SDK │
│ · 26-Preview Generator │
│ · 10-Persona Panel (decision-panel) │
│ · Spec Locker (OpenAPI 작성자/비평가) │
│ · Score Judge (500점 채점관) │
│ · Self-Correction Critic (evaluator-optimizer 패턴) │
└──────────────────────────────────────────────────────────────────┘
↕ execute(name, input) → string
┌──────────────────────────────────────────────────────────────────┐
│ Layer B — Hands (실행) │
│ Claude Managed Agents 세션 (long-running, hours-OK) │
│ · Bash + File ops in cloud container │
│ · pnpm install / nestia sdk / nestia swagger / vitest 실행 │
│ · 자기수정 루프(반복 빌드·테스트) │
└──────────────────────────────────────────────────────────────────┘
↕ events (SSE)
┌──────────────────────────────────────────────────────────────────┐
│ Layer C — Session/UI (사람 인터페이스) │
│ Next.js 14 (App Router) 대시보드 │
│ · 한 줄 입력 폼 │
│ · 26-카드 매트릭스 + 26 advocate 동시 표시 │
│ · 4-패널(40인) 동시 투표 + meta-tally 실시간 차트 │
│ · 5 Engineering Team 칸반 (각 팀 진행률) │
│ · OpenAPI Swagger UI 임베드 + 🔒 lock 뱃지 │
│ · 500점 스코어 게이지(5 카테고리 미니게이지 포함) │
│ · "디자인 승인" / "배포 승인" 두 버튼만 │
└──────────────────────────────────────────────────────────────────┘</pre>
<div class="callout info">
<div class="label">왜 이 분리인가</div>
Anthropic 자신의 <a href="https://www.anthropic.com/engineering/managed-agents">"Scaling Managed Agents"</a> 블로그가 "brain/hands 분리로 p50 60%, p95 90% 빨라졌다"고 보고. 동일 철학 차용. Layer A는 단명·교체 가능, Layer B는 컨테이너 재시작에도 세션 유지, Layer C는 사용자 부재여도 백그라운드 진행.
</div>
<h3>3.2 핵심 디자인 원칙 (이 5개로 모든 트레이드오프 결정)</h3>
<ol>
<li><strong>사람의 클릭은 2번</strong> — 디자인 승인 + 배포 승인. 그 외 모든 묻기는 안티패턴</li>
<li><strong>모드 붕괴 방지</strong> — 1개 답이 아니라 26개 카드부터 + 4개 다른 시각의 패널. 다양성은 비싸도 산다 (Anthropic multi-agent 연구: +90.2% 성능, ~15× 토큰)</li>
<li><strong>스펙이 source of truth</strong> — 코드 → 스펙이 아니라 스펙 → 코드. nestia/typia로 타입이 곧 스펙</li>
<li><strong>책임 분리(SoR) + 위계 보고선</strong> — 143명이 무작위로 움직이는 게 아니라 모든 agent는 lead가 있고, 모든 lead는 개발총괄 PM(M3)이 있고, M3 위에는 Run Supervisor(M1) + Cost Monitor(M2) — 인간 조직처럼 작동</li>
<li><strong>499/500 = freeze</strong> — 자기수정은 무한이 아니라 점수가 멈출 때까지. 점수가 안 오르면 사람에게 에스컬레이션</li>
<li><strong>모든 destructive 행위는 Layer 0이 차단</strong> — software-factory의 7개 비협상 규칙 그대로</li>
</ol>
<h3>3.3 엔지니어링 조직도 — 143 agents · 6-tier 위계</h3>
<p class="lede">"Specialty Team → Team Lead → 개발총괄 PM(M3) → Run Supervisor(M1)" 보고선이 모든 agent에 적용됩니다.</p>
<pre class="arch"> ┌─────────────────────────┐
│ M1 · Run Supervisor │ ← 모든 watcher의 watcher
│ (kill switch, escalation)│ pause/resume/abort 권한
└────────────┬────────────┘
┌───────────────────────┼───────────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ M2 · Cost │ │ M3 · Chief │ │ Software-Factory │
│ Monitor │ │ Engineer / Dev PM│ │ Layer-0 Hooks │
│ (track only, │ │ (모든 lead 보고선│ │ (PreToolUse 차단)│
│ no block) │ │ + cross-team조정)│ │ │
└──────────────────┘ └────────┬─────────┘ └──────────────────┘
│
┌─────────────────┬─────────────────┬─┴─────────────────┬─────────────────────┐
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Ideation Dept │ │ 4 Decision │ │ Spec Dept │ │ 5 Engineering │ │ QA Dept │
│ (29) │ │ Panels (40+5) │ │ (9) │ │ Teams (25) │ │ + SCC + Judges │
│ │ │ + Mitigation │ │ │ │ │ │ + Auditors+Docs │
│ I_LEAD │ │ Designer (1) │ │ SPEC_LEAD │ │ BE_LEAD (6) │ │ (32) │
│ ├ I1 Clarifier│ │ │ │ ├ SPEC_AUTHOR │ │ FE_LEAD (6) │ │ │
│ ├ I2 Diversity│ │ TP_LEAD (10) │ │ ├ SC1 Security│ │ DB_LEAD (5) │ │ QA_LEAD (5) │
│ └ P01..P26 │ │ BP_LEAD (10) │ │ ├ SC2 Perf │ │ DO_LEAD (5) │ │ SECQA_LEAD (3) │
│ 26 Preview │ │ UP_LEAD (10) │ │ ├ SC3 A11y │ │ SDK_LEAD (3) │ │ PERFQA_LEAD (3) │
│ Advocates │ │ RP_LEAD (10) │ │ ├ SC4 i18n │ │ │ │ A11YQA_LEAD (3) │
│ 각자 다른 │ │ │ │ ├ SC5 Idemp │ │ 각 lead가 │ │ SCC_LEAD (5) │
│ 페르소나로 │ │ MD · Mitigation│ │ ├ SC6 ErrModel│ │ M3에 일일 │ │ J1..J5 Judges │
│ 1장씩 작성 │ │ Designer │ │ └ SC7 APIDsgn │ │ 진행률 보고 │ │ AU1..AU5 Audit │
│ │ │ (panel │ │ │ │ │ │ DOC1..DOC3 Docs │
└───────────────┘ │ dissent → │ └───────────────┘ └─────────────────┘ └─────────────────┘
│ action items)│
└───────────────┘</pre>
<p>각 Department의 상세 멤버 + 페르소나는 <a href="#s5">§5 에이전트 카탈로그</a> 참조.</p>
<table class="tbl">
<thead><tr><th>Tier</th><th>역할</th><th>인원</th><th>호출 빈도/run</th></tr></thead>
<tbody>
<tr><td>1 · Meta</td><td>Run Supervisor, Cost Monitor, Dev PM</td><td>3</td><td>지속 (이벤트 기반)</td></tr>
<tr><td>2 · Department Lead</td><td>I_LEAD, 4 panel chairs, SPEC_LEAD, 5 eng team leads, 4 QA leads, SCC_LEAD = 16</td><td>16</td><td>각 단계 1–N회</td></tr>
<tr><td>3 · Specialty Member</td><td>26 Advocates + 40 panelists + 7 spec critics + 20 eng + 10 QA + 4 SCC + 5 Judges + 5 Auditors + 3 Docs = 120</td><td>120</td><td>각 1–3회</td></tr>
<tr><td>4 · Cross-cutting</td><td>I1, I2, MD (전 단계 영향) = 3</td><td>3</td><td>2–5회</td></tr>
<tr><td>5 · Layer-0 Policy</td><td>software-factory PreToolUse 훅 (인간 작성, agent 아님)</td><td>—</td><td>전 bash/edit 호출마다</td></tr>
<tr><td>6 · External Tools</td><td>spectral, openapi-diff, secretlint, npm audit, playwright, axe (스크립트 아님)</td><td>—</td><td>Judge 호출 시</td></tr>
<tr><td><strong>합계 (agent)</strong></td><td>—</td><td><strong>143</strong></td><td>—</td></tr>
</tbody>
</table>
<div class="callout info">
<div class="label">왜 위계인가 (Anthropic 가이드와 정합)</div>
Anthropic <a href="https://www.anthropic.com/engineering/multi-agent-research-system">multi-agent research system</a>가 강조하는 핵심: "<em>orchestrator must specify objectives, output formats, and clear boundaries</em>". 143 agent를 평면으로 호출하면 prompt 토큰이 폭발하고 책임이 모호해집니다. <strong>위계 + lead</strong>는 (a) 각 lead가 자기 팀 prompt만 신경쓰면 됨 → 토큰 효율 (b) lead 단위 retry/replace 가능 → 신뢰성 (c) 데모에서 조직도가 그대로 시각화됨 → 인상적.
</div>
</section>
<!-- ─────────────────────── §4 파이프라인 ─────────────────────── -->
<section id="s4">
<h2><span class="num">§4</span>3-DD Cycles + H1/H2 Gates</h2>
<p class="lede">파이프라인은 <strong>8개 stage</strong>가 아니라 <strong>3개의 Driven-Development 사이클 + 2개의 Human Gate</strong>로 설계됩니다. 각 DD 사이클은 이전 사이클의 산출물을 "잠금"으로 받아 다음 사이클에 인도하는 스테이지 게이트 구조.</p>
<table class="tbl">
<thead><tr><th>사이클</th><th>주도 원리</th><th>포함 Stages</th><th>잠금 산출물 (다음 사이클 입력)</th></tr></thead>
<tbody>
<tr><td><strong>① PreviewDD</strong><br><em>(본 프로젝트 신설)</em></td><td>26개 시각 mockup이 방향 주도. 스펙 이전에 "다양한 해석" 먼저</td><td>Stage 1 (입력) · 2 (26 Advocate) · 3 (4-패널 다수결 + Mitigation)</td><td><code>chosen_preview.json</code> + <code>mockups/chosen.html</code> + <code>mitigations.json</code></td></tr>
<tr><td><strong>🔒 Gate H1</strong></td><td>인간 디자인 승인 (Claude Design 메인 / 내장 Studio fallback)</td><td>Stage 8 H1</td><td><code>design-approved.json</code> (OKLCH tokens + tailwind-compat)</td></tr>
<tr><td><strong>② SpecDD</strong><br><em>(기존 Spec-Driven Development 계승)</em></td><td>OpenAPI 스펙이 구현 주도. 타입이 source of truth (nestia)</td><td>Stage 4 (Spec Author + 7 critic) · 5 (5 Engineering Teams)</td><td><code>specs/openapi.yaml</code> + <code>.lock</code>(SHA-256) + <code>generated/</code></td></tr>
<tr><td><strong>③ TestDD</strong><br><em>(TDD 계승 + holdout + 500점 이중 게이트)</em></td><td>테스트·점수가 freeze 주도. overfit 방지 holdout, Judge↔Auditor 이중 검증</td><td>Stage 6 (4 QA 팀 + SCC 5) · 7 (5 Judge + 5 Auditor)</td><td><code>score/report.json</code> + <code>.frozen-hash</code> (코드 수정 봉인)</td></tr>
<tr><td><strong>🚀 Gate H2</strong></td><td>인간 배포 승인</td><td>Stage 8 H2</td><td>배포 확정 (localhost/Vercel/사용자 서버)</td></tr>
</tbody>
</table>
<div class="callout tldr">
<div class="label">Why PreviewDD — 신설 근거</div>
SpecDD는 "무엇을 짓느냐"가 정해진 뒤부터 작동합니다. 하지만 사용자가 제시한 한 줄 아이디어는 본질적으로 <em>under-specified</em> — 26가지 방식으로 해석 가능합니다. SpecDD에 바로 진입하면 모델은 가장 보편적인 1가지 해석만 채택하여 <strong>"잘못된 것을 정확히 짓는"</strong> 위험을 초래합니다. PreviewDD는 26 Advocate가 각자 다른 페르소나로 병렬 해석을 생성하고, 4-패널 다수결로 가장 방어 가능한 1개를 고르는 방식으로 이 문제를 해결합니다. Anthropic multi-agent 연구의 병렬 sectioning + voting 패턴을 <em>ideation 단계</em>에 적용한 것.