AI로 웹사이트 자동화 만들기, 12번 싸운 두 AI가 만든 결과물

Photo by S O C I A L . C U T on Unsplash

AI로 웹사이트 자동화 만들기를 두 AI가 서로 싸우는 구조로 구현한 사람이 있어 — 코드 한 줄 안 쓰고, 3시간 20분 만에 마케팅 사이트를 완성했거든.

어쩌다 이 실험을 시작했냐면

Reddit 유저 killerexelon은 AI 코딩 에이전트용 영구 메모리 도구 Mnemo를 만들고 있었어. 문제는 프로젝트 소개 사이트가 필요한데, 만들기 귀찮다는 거였지. 그러다 Anthropic이 공개한 멀티에이전트 아키텍처 문서를 보고 — "이걸로 사이트 자체를 만들어보자"고 마음먹은 거야.

AI로 웹사이트 자동화 만들기 — 구조가 핵심이었어

구조는 단순해. Planner → Generator ↔ Evaluator, 이렇게 세 역할이야.

• Planner: 딱 한 번 실행. 설계 방향을 spec.md에 적어둠
• Generator: 코드를 만들어서 파일로 넘김
• Evaluator: Playwright MCP로 실제 브라우저에서 사이트를 직접 열어보고 eval-report.md에 혹평을 적어서 돌려줌

핵심은 두 에이전트가 공유 컨텍스트가 없다는 거야. 파일로만 소통해. 서로 뭘 기억하는지 모르니까 편견 없이 비판하고, 편견 없이 다시 만들거든. 이게 Anthropic이 말한 "컨텍스트 불안" 문제를 막는 방식이야.

12라운드 동안 벌어진 일

1라운드 결과물은 예상 그대로였대 — 평범하고 잊힐 디자인. 근데 4라운드에서 Generator가 갑자기 "Terminal Noir" 컨셉으로 확 틀었어. IBM Plex Mono 폰트, 검은 배경에 앰버 색상, 스캔라인 텍스처. 한 번에 생성했으면 절대 안 나왔을 결과물이라는 거야. 5~12라운드는 접근성, 반응형, 모션 최적화 같은 다듬기 작업이었고.

최종 스펙: Next.js + Tailwind + Framer Motion + TypeScript. 수동으로 쓴 코드 0줄. (약간의 시각적 수정은 사후에 직접 했대.)

따라할 수 있는 포인트

1. Playwright MCP를 Evaluator에 붙여봐 — 코드 리뷰가 아니라 실제 브라우저 테스트야. 시각적 버그를 코드만 봐서는 절대 못 잡아.

2. 반복을 "실패 시 재시도"가 아니라 "무조건 N회"로 설계해봐 — 실패 안 해도 계속 개선되거든.

3. 디자인 페널티 프롬프트를 넣어봐 — "Inter 폰트, 보라색 그라디언트, 카드 레이아웃 금지" 같은 식으로. AI 특유의 뻔한 패턴을 강제로 피하게 만드는 거야.

AI로 웹사이트 자동화 만들기, 결국 모델보다 그 주변의 구조와 제약이 결과물의 수준을 결정한다는 게 이 실험의 핵심이야.

🔗 참고 링크

• 원본 출처: I replicated Anthropic's Generator-Evaluator harness to build a website through 12 adversarial AI iterations - here's the result and what I learned
• 관련 AI 툴: Mnemo · Anthropic · Playwright MCP · Next.js · Tailwind · Framer Motion · TypeScript