AI가 만든 웹사이트는 왜 다 비슷할까 — 하네스 디자인으로 해결한 이야기

“랜딩페이지 만들어줘.”

AI에게 이 한 줄을 던지면, 어떤 모델이든 거의 같은 결과를 내놓습니다. 히어로 섹션, 3단 기능 카드, 그라디언트 CTA 버튼. 기술적으로는 완벽한데, 어딘가 본 것 같은 느낌. 이 현상에 이름이 붙었습니다 — AI 슬롭(AI Slop).

왜 이런 일이 생기는지, 그리고 Anthropic의 하네스 디자인 논문에서 출발해 어떻게 해결했는지 이야기합니다.

문제: AI 코딩 에이전트의 3가지 구조적 한계

Anthropic 엔지니어링 팀이 2026년 3월에 발표한 Harness Design for Long-Running Application Development는 AI 코딩 에이전트로 앱을 빌드하면서 발견한 실패 패턴 세 가지를 보고합니다.

1. 자기평가 편향 (Self-Evaluation Bias)

자기평가 편향의 구조 Generator 코드 작성 자기 평가 “잘 했어!” 결과: 평범한 UI를 “훌륭하다”고 자평 프롬프팅으로 해결할 수 없는 구조적 문제
에이전트가 자기 결과물을 평가하면, 자신감 있게 칭찬합니다

2. 컨텍스트 불안 (Context Anxiety)

컨텍스트 윈도우가 차오르면 모델이 조기에 작업을 마무리합니다. 검증을 건너뛰고, 기능을 반만 구현하고, “완료”를 선언합니다. 대화 요약(Compaction)으로는 해결되지 않습니다 — 모델이 “컨텍스트가 부족하다”는 인식 자체를 유지하기 때문입니다.

3. 제네릭 AI 슬롭

AI 슬롭이 만들어지는 5가지 원인 학습 데이터 수렴 — 통계적 중심값 디자인 브리프 부재 — 미학적 방향 없음 자기평가 실패 — 피드백 신호 없음 IA 사고 부재 — 콘텐츠 계층 없이 레이아웃 디자인 토큰 부재 — 모든 AI가 고르는 값 = 히어로 + 3단 카드 + 그라디언트 CTA (AI 슬롭)
다섯 가지 원인이 연쇄적으로 작용해 제네릭 출력을 만듭니다

해결책: 3-에이전트 하네스

논문의 핵심 아이디어는 GAN(적대적 생성 신경망)에서 빌려온 것입니다. 만드는 역할과 평가하는 역할을 분리합니다.

3-에이전트 하네스 아키텍처 사용자 브리프 PLANNER spec.md (13섹션) 디자인 토큰 + IA + a11y GENERATOR Design System First Mobile-First Build EVALUATOR 9축 루브릭 Playwright + axe critique.md / REDIRECT 각 에이전트는 독립 컨텍스트에서 실행. 파일로만 소통. 대화 공유 금지.
GAN에서 영감을 받은 역할 분리 — 만드는 자와 평가하는 자의 분리

스킬 개발: 논문에서 실전 도구로

“이걸 웹사이트/앱 디자인에 특화시키면, AI 슬롭 문제를 진짜 해결할 수 있지 않을까?”

논문의 한계 — UI/UX 방법론 부재

논문 커버리지 vs 누락 영역 ✓ 논문이 커버하는 것 ✓ 역할 분리 (GAN-style) ✓ 컨텍스트 리셋 + 스프린트 계약 ✓ 루브릭 채점 (4축) ✓ Evaluator 튜닝 + 파일 핸드오프 ✓ V1 / V2 진화 ✗ 누락된 UI/UX 영역 ✗ 정보 아키텍처 / 디자인 토큰 ✗ 반응형 전략 + 접근성 (WCAG) ✗ Nielsen 10원칙 ✗ 인터랙션 디자인 / 비주얼 계층 ✗ 상태 인벤토리 / 캘리브레이션 앵커
하네스 아키텍처는 견고하지만, 웹 디자인 방법론은 직접 채워야 했습니다

패치 1: 9축 루브릭 + Few-shot 캘리브레이션

9축 평가 루브릭 + 캘리브레이션 앵커 2x 가중 Design Quality — 1: 브라우저 기본값 / 3: 테마 있지만 템플릿 / 5: 강한 정체성 Originality — 1: 히어로+3단 AI 슬롭 / 3: 비기본 선택 일부 / 5: 템플릿 불가 1x 가중 Craft — 타이포, 스페이싱, 컬러 하모니 Functionality — 스텁이 아닌 실제 작동 Responsive — 375 / 768 / 1280px Accessibility — WCAG AA, 키보드, 스크린리더 Interaction / Visual Hierarchy / UX Heuristics 차등 하드 임계값 (v1.1.0) 2x 가중 < 4 = FAIL 1x 가중 < 3 = FAIL 모든 점수에 증거(스크린샷) 필수 Few-shot 캘리브레이션 앵커 (v1.1.0 추가) 기준별 점수 1/3/5 구체 예시 제공 — Evaluator 첫 실행부터 채점 기반 확보 “좋다/나쁘다” 추상 앵커가 아닌 “브라우저 기본값 = 1, 강한 정체성 = 5” 도메인 현실적 앵커
2배 가중 + 차등 임계값 + Few-shot 앵커로 Evaluator의 첫 실행부터 캘리브레이션

패치 2: Generator에 “디자인 시스템 퍼스트” 규칙

Generator 작업 순서 1단계 디자인 시스템 구축 (CSS Custom Properties / Tailwind Config) –color-primary: #1a1a2e; –font-size-xl: 1.5rem; –spacing-4: 1rem; 2단계 컴포넌트 구현 (토큰만 사용, 하드코딩 금지) 모든 컬러, 폰트, 스페이싱은 토큰을 참조 3단계 모바일 퍼스트 + 전 상태 구현 (hover/focus/loading/empty/error/success)
코드 작성 전 디자인 시스템부터 — 비주얼 일관성의 기반

패치 3: Evaluator 3계층 프로브

Evaluator 검증 3계층 프로브 1계층: 반응형 Playwright 375 / 768 / 1280px 수평 스크롤? 오버플로? 터치 타겟 ≥44px? 각 뷰포트 스크린샷 증거 2계층: 접근성 Tab 순서, 포커스 인디케이터 대비비 WCAG AA (4.5:1) alt, ARIA, Escape 닫기 axe-core 자동 검사 3계층: UX 휴리스틱 시스템 상태 가시성 사용자 제어 (뒤로/취소) 일관성, 에러 방지/복구 Nielsen 10원칙 체크
기능 검증을 넘어 반응형, 접근성, UX 휴리스틱까지 체계적 프로브

논문 경험에서 배운 것들

10회차의 창의적 도약

네덜란드 미술관 웹사이트를 반복 빌드하는 실험에서, 반복 1-9회차는 깨끗한 다크 테마 랜딩페이지를 만들었습니다. 그런데 10회차에서 모델이 접근 방식을 완전히 버리고, CSS 퍼스펙티브로 체커플로어 3D 공간을 렌더링하는 공간 경험으로 재설계했습니다.

이 경험에서 추가한 안전장치가 REDIRECT 프로토콜입니다 — Generator는 Evaluator의 명시적 REDIRECT 승인 없이는 디자인 방향을 바꿀 수 없습니다. 컨텍스트 리셋 시에는 design_memo.md로 현재 방향과 선택 이유를 전달해 기억상실 피벗을 방지합니다.

중간 반복이 더 나은 경우

“후기 반복이 전체적으로 나았지만, 중간 반복을 선호한 경우가 종종 있었다.” — 그래서 Generator는 매 작동 증분마다 git commit하고, Evaluator는 이전 반복의 장점이 사라졌을 때 이를 기록합니다.

프롬프팅이 캐릭터를 결정한다

“the best designs are museum quality”라는 문구를 평가 기준에 넣었더니, 모든 출력이 미술관 웹사이트처럼 생기기 시작했습니다. 루브릭은 품질(일관성, 의도적 선택)을 기술해야지, 참조(museum quality, Apple-like)를 기술하면 안 됩니다.

급진적 간소화는 실패한다

V1에서 V2로 진화할 때, 저자들은 처음에 여러 하네스 컴포넌트를 한꺼번에 제거했습니다. 결과는 품질 저하. Anthropic의 “Building Effective Agents”가 말하듯 — “가장 단순한 해결책을 찾되, 필요할 때만 복잡성을 추가하라.” 하나씩 제거해서 무엇이 핵심인지 파악하는 것이 올바른 방법입니다.

비용 대비 효과

구성 시간 비용 결과
단독 에이전트 ~20분 ~$9 핵심 기능 고장
전체 하네스 (V1) ~6시간 ~$200 완성도 높은 결과물
간소화 하네스 (V2) ~3시간 50분 ~$125 2시간+ 일관 세션

마무리: 하네스의 모든 부품은 가정을 인코딩한다

“모든 하네스 컴포넌트는 모델이 혼자서는 할 수 없는 것에 대한 가정을 인코딩한다. 그 가정들은 스트레스 테스트할 가치가 있다.”

모델이 발전하면 일부 컴포넌트는 더 이상 필요하지 않습니다. V1에서 V2로 오면서 스프린트 분해가 사라진 것처럼. 하지만 하네스는 단순히 줄어드는 것이 아니라 이동합니다 — 불필요해진 복잡성을 더 어려운 과제로 재배치하는 것입니다.

이 스킬은 현재 시점에서 AI가 혼자 잘 못하는 것들 — 디자인 정체성, 반응형 검증, 접근성, UX 휴리스틱 — 을 하네스로 보완합니다.

GitHub: greeun/harness-design (v1.1.0, MIT License)

설치: harness-design/ 폴더를 ~/.claude/skills/에 복사하면 됩니다.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤