Claude Code로 Anthropic의 Harness 설계 패턴을 시도해 본 이야기

3월에 Anthropic이 Harness 설계에 관한 기사를 발표했다.

"Generator와 Evaluator를 나누어 디자인을 반복적으로 개선한다"는 내용이었는데, 읽으면서 내 프로젝트에 직접 시도해보고 싶다는 생각이 들었다. 마침 가지고 있던 FIRE 계산기(FIRE Calculator)의 UI가 평범했기에 딱 좋은 실험대가 될 것 같았다.

결론부터 말하자면, 4라운드를 돌려 48점에서 90점까지 점수를 올렸다. 다만 완벽하지는 않다 (마지막에 기술한다).

원문 기사에서 지적하는 점은 두 가지다.

• 장시간 태스크의 경우 Agent가 "이제 그만 끝내고 싶다" 모드가 되어 품질이 떨어진다 (Context Anxiety)
• 스스로 만들고 스스로 평가하게 하면 "좋네요!"라고 하기 쉽다

해결책은 GAN(Generative Adversarial Networks)적인 발상으로, 만드는 역할과 평가하는 역할을 별도의 Agent로 나누는 것이다.

직접 만든 FIRE 계산 도구.

• Next.js 16 + TypeScript
• Tailwind v4 + DaisyUI v5
• 커스텀 CSS 변수 (oklch, 라이트/다크 모드 대응)
• 폰트: DM Sans + Space Mono
• Recharts

리포지토리: https://github.com/Cyoukakitsu/fire--calculator--v1.1

"작동은 하지만 디자인이 평범하다"라는 흔한 상태였다. 배색은 청보라 계열, 레이아웃은 중앙 정렬로 특별한 개성이 없었다.

Claude Code에 전달한 Prompt. Generator와 Evaluator를 교대로 최대 5라운드까지 돌리도록 지시했다.

당신은 지금, 이 FIRE 계산기 프로젝트에 대해
"디자인 개선 루프"를 실행한다.
Generator와 Evaluator 두 가지 역할을 교대로 수행하며,
...

고안한 점은 다음과 같다.

• 종료 조건을 동적으로 설정 (85점 도달 또는 4라운드 완료)
• 건드리면 안 되는 파일을 명시 (로직 보호)
• "AI스러운" 느낌을 구체적인 예시로 정의 (보라색 그라데이션 + 흰색 카드 등)
• git으로 매 라운드 저장 (되돌릴 수 있도록)
• design-log.md를 Agent 간의 핸드오프(Handoff) 문서로 사용

라운드	Design	Original	Craft	Func	합계
초기	10	8	16	14	48
...

각 라운드에서 대략적으로 일어난 일들.

R1 (48→70): 색상과 타이포그래피 재정립

청보라색이었던 Primary 컬러를 호박색(Amber)으로 변경. 배경을 순백색에서 따뜻한 느낌의 아이보리색으로 변경. "FIRE." 헤드라인을 크게 키우고 mono 폰트의 작은 라벨을 곁들여 에디토리얼(Editorial) 스타일의 레이아웃으로 변경. 중앙 정렬된 Hero 문구를 버린 것이 컸다.

이 단계에서 "AI가 만들 법한 배색"에서 탈출했다는 느낌이 들었다.

R2 (70→82): 레이어와 정보 추가

body에 옅은 도트 배경 텍스text를 추가. 금융 티커(금융 종목 표시, 호박색 배경에 가로 스크롤되는 mono 폰트 문구)를 상단에 삽입. SituationCard에는 호박색 왼쪽 보더를, StrategyCard에는 초록색 왼쪽 보더를 적용하여 색상으로 구분.

ResultSection을 전체 너비의 반전 밴드(검은 배경에 흰 글씨)로 만든 것도 이 라운드였다. 나중에 이것이 문제가 된다.

R3 (82→85): 기술적 버그 수정

R2에서 다크 모드의 Tooltip이 깨져 있던 점(CSS 변수 문자열을 hex로 해석하지 못함)을 R3에서 발견하여 수정. MutationObserver를 사용하여 다크 모드를 감지하고 Tooltip 스타일을 전환하는 코드를 추가했다.

또한 "Years to FIRE"라는 지표가 표시되지 않고 있어서 추가했다.

R4 (85→90): Freedom Timeline

가장 예상치 못했던 부분이다. Generator가 멋대로 "Freedom Timeline"이라는 컴포넌트를 만들었다. 가로형 타임라인으로, 현재 나이 → FIRE 나이 → 시뮬레이션 종료 시점까지를 표시한다. 달성된 구간은 호박색으로 채워지고, 마일스톤은 45도 회전한 정사각형(마름모) 모양이다.

design-log.md는 꽤 유용해서, 나중에 "왜 이 색상을 선택했었지?"를 추적할 수 있다. 또한 라운드가 진행될수록 Generator가 대담해지는 점이 흥미롭다. R1~R3은 안정적이지만, R4에서 갑자기 변화구를 던진다. 원문 기사에서도 그런 경향을 언급했던 것 같다.