Claude Code로 리디자인 시안 10개 뽑기: spoonai + 커피챗 2세션 182 tool calls

스크린샷 한 장에서 시작됐다. 박스 문자(□□□□)로 깨진 한글 라벨. “이거 직접 제작한 이미지다 모두 지워”라는 짧은 지시 이후, 세션은 spoonai 전체 리디자인 탐색으로 이어졌다.

TL;DR 이틀 연속 리디자인 세션. spoonai 시안 10개, 커피챗 시안 5개를 Claude Code로 뽑았다. 핵심 패턴은 “브라우저에서 고를 수 있게 만들어”라는 단 하나의 지시로 병렬 에이전트를 여러 개 돌리는 것이다.

폰트 깨짐 버그: 직접 제작 이미지 탐지

스크린샷 분석 결과 원인이 명확했다. openai-deployment-company-tpg-10b-01.jpg — Claude가 직접 생성한 인포그래픽에 포함된 한글 텍스트가 폰트 없이 렌더링되면서 박스로 깨졌다.

외부 출처 이미지(CNBC, Anthropic, TechCrunch 크레딧)는 정상. credit: spoonai로 태깅된 것만 문제였다. spoonai 코드베이스 전체에서 직접 제작 이미지를 grep으로 찾아 단 1건임을 확인했다.

처리는 간단했다.

# 직접 제작 이미지 삭제
rm public/images/posts/2026-05-06/openai-deployment-company-tpg-10b-01.jpg

# 두 포스트 frontmatter에서 image 블록 제거
# 2026-05-06-openai-deployment-company-tpg-10b-ko.md
# 2026-05-06-openai-deployment-company-tpg-10b-en.md

커밋 8b55047 — chore: remove self-generated infographic image with broken Korean fonts. 3 files 변경, push 후 Vercel 자동 배포.

교훈은 단순하다. Claude가 생성한 이미지에 한글을 넣으면 폰트 임베딩이 보장되지 않는다. 인포그래픽 생성 시 한글 텍스트는 피하거나, 생성 후 실제 렌더링을 반드시 확인해야 한다.

spoonai 리디자인: 5개 → 10개 변주

버그 수정 후 사용자가 방향을 틀었다. “spoonai 리디자인할거야. 최소 5개 추려주고 내가 볼 수 있게 해줘.”

frontend-implementer 서브에이전트 여러 개를 병렬로 돌려 5개 HTML 파일을 ~/spoonai-redesign/에 생성했다. index.html은 비교 캔버스 — 5개 카드에서 “보기 →” 클릭하면 새 탭으로 열리는 구조다.

1라운드 결과는 각각 c/a/e/f/d/e/b/a/a/x/c/e 코드로 채점받았다. 가장 좋은 평가를 받은 시안은 05-brief.html이었다.

“이 톤 좋은 것 같아. 이거 근처로 더 고도화한거 5개.” 2라운드 디스패치. 05-brief.html의 톤(Brief 스타일, 텍스트 중심, 여백 넉넉한 뉴스레터 감)을 기반으로 세부 변주 5개를 추가 생성했다.

design-reviewer 에이전트가 두 라운드 모두 검증했다. SRI 해시 불일치(개발용 해시가 프로덕션 번들에 붙어있던 문제)를 codex cross-verify가 지적해서 즉시 수정했다.

커피챗 리디자인: 게임 업계 멘토링 플랫폼

두 번째 세션. “커피챗 사이트 리디자인할거야. 최소 5가지 결과물을 내고 내가 고를 수 있게 해줘.”

coffeechat.it.kr URL을 분석했다. 게임 업계 현직자와의 1:1 커피챗·이력서 리뷰·모의면접 플랫폼이었다. 단순 커피챗 앱이 아니라 교육/멘토링 서비스라는 컨텍스트가 디자인 방향을 결정한다.

5개 변주를 뽑았다. 피드백: “다 별로야. 하나도 전문성이 없어보여. 인프런이나 다른 교육기관 봐봐.”

맞는 지적이었다. 첫 라운드는 “커피챗”이라는 단어에 끌려 casual/social 방향으로 흘렀다. 실제 포지셔닝은 인프런·클래스101·패스트캠퍼스 계열 — 신뢰감을 주는 전문 교육 서비스다. 재분류 후 교육 플랫폼 레퍼런스를 베이스로 다시 작업했다.

이 세션에서 발견한 패턴: 리디자인 작업에서 브랜드/서비스 카테고리를 잘못 읽으면 변주를 아무리 많이 뽑아도 방향이 틀린다. “어떤 종류의 서비스인가”를 먼저 확정하지 않으면 첫 라운드 전체가 낭비된다.

병렬 에이전트 디자인 탐색 패턴

두 세션에서 공통된 작업 흐름이 있었다.

1. 컨텍스트 확정 (사이트 분석 또는 요구사항 명확화)
2. frontend-implementer 병렬 디스패치 (5개 독립 변주)
3. 비교 캔버스(index.html) 생성
4. 사용자가 브라우저에서 직접 선택
5. 선택된 방향 기반 2라운드 고도화

핵심은 3번이다. “파일 경로 알려줄게”가 아니라 “브라우저에서 클릭해서 볼 수 있게” — 비교 캔버스가 없으면 사용자가 5개를 직접 열어야 한다. 마찰을 없애는 것이 피드백 속도를 올린다.

Agent(46) 호출이 총 tool calls의 25%를 차지하는 것도 이 패턴 때문이다. 각 변주가 독립 에이전트로 병렬 실행됐다.

숫자

항목	수치
총 세션 수	2
총 소요 시간	~4시간
총 tool calls	182
Bash	92
Agent	46
Write	11
생성 시안 파일	12개 (spoonai 10 + 커피챗 2라운드)
수정 파일	3개
버그 수정 커밋	1개
design-reviewer 라운드	2