문제: 큰 틀은 맞는데 디테일이 안 맞다

Figma MCP 연동해서 UI 구현하면 레이아웃은 꽤 잘 나와요. 근데 자세히 보면:

padding이 2~3px 어긋나 있고
gap이 미묘하게 다르고
그림자 값이 근사치로 들어가 있고
색상이 비슷하지만 다른 값으로 들어가 있어요

결국 "저기 간격 16px로 맞춰줘", "이 색 원본이랑 비교해봐"를 반복하게 돼요.

한두 번이면 괜찮은데, 컴포넌트 10개 만들면 이 작업을 10번 해야 해요. 이건 자동화해야 해요.

왜 틀어질까?

원인을 짧게 정리하면 다섯 가지예요.

1. MCP가 응답을 요약한다

Figma 노드 트리를 그대로 보내면 수십만 토큰이에요. MCP는 응답을 만들 때 중첩된 하위 노드의 세부 스타일을 축약하고, 1~2px 차이는 반올림해요. 데이터가 존재한다 ≠ Claude에게 정확히 전달된다.

2. LLM attention은 균등하지 않다

큰 프레임 하나에 수십 개 요소가 섞이면, Claude는 전체 구조 파악에 자원을 먼저 써요. 하위 요소의 세밀한 디테일에는 상대적으로 적게 쓰고요. 결과: 큰 틀은 맞고 자잘한 게 틀리다.

3. 생성 중 누적 오차

한 파일 안에서 20개 요소를 동시에 쓰면 스타일 결정이 수백 번 일어나요. 각 결정마다 미세한 드리프트가 생기고, 범위가 넓을수록 오차가 파일 전체로 퍼져요.

4. 프로젝트 컨벤션에 맞추려다 멀어진다

MCP 지침에 "프로젝트 토큰/컨벤션에 맞춰라"라고 돼 있어요. 그래서 Figma의 15px를 Tailwind gap-4(16px)로 자발적으로 반올림하는 경우가 있어요. 디자인 시스템 일관성엔 맞지만, 원본과는 달라져요.

5. Figma 원본이 정밀하지 않을 수 있다

디자이너가 Auto Layout을 안 쓰면 절대 좌표 + 고정 크기로 저장돼요. MCP가 이걸 flex/gap으로 추론하는 과정에서 손실이 생겨요.

해결: 서브에이전트로 자기 검증

핵심 아이디어는 간단해요. 한 번의 요청 안에 "생성 → 검증 → 패치"를 넣는 거예요.

Claude Code에는 서브에이전트 기능이 있어요. 메인 Claude가 별도의 Claude 인스턴스를 띄워서 특정 작업만 시키는 구조예요.

왜 서브에이전트인가:

컨텍스트 보호: 검증 로그가 메인에 안 쌓여요
역할 전문화: 절차, 규칙, 출력 형식을 고정할 수 있어요
독립된 attention: 검증에만 집중하니까 디테일을 잘 잡아요

만드는 법

.claude/agents/ 폴더에 마크다운 파일 하나면 돼요.

figma-verifier 전체 코드

실제로 HANUI 프로젝트에서 쓰고 있는 에이전트 전문이에요.

포인트는 "표로 비교"를 강제하는 거예요. "스타일 맞나 봐줘" 같은 서술형 검증은 드리프트를 못 잡아요. 표 형식으로 강제하면 LLM이 자기 오차를 숫자로 인식해요.

사용법

기본 사용

Figma로 컴포넌트 구현 후 바로 검증:

구현 + 검증 한 번에

메인 Claude가 코드를 쓰고, figma-verifier 에이전트를 자동으로 호출해서 검증까지 해요. 흐름은 이래요:

dry-run (검증만, 수정 안 함)

diff 표만 출력하고 코드는 건드리지 않아요. 어디가 틀어졌는지 먼저 확인하고 싶을 때 써요.

실전 팁

1. 컴포넌트 단위로 쪼개서 요청해요

큰 페이지를 통째로 주면 원인 분석에서 말한 attention 분산이 그대로 일어나요. 카드, 폼, 헤더 등 컴포넌트 단위로 나눠서 요청하면 정밀도가 확 올라가요.

2. 디자이너에게 Auto Layout + 변수 사용을 부탁해요

근본적인 해결이에요. Auto Layout이 있으면 MCP가 flex/gap을 정확히 뽑아내고, Figma 변수가 있으면 토큰 매핑이 자동으로 돼요. 디자이너에게 "이거 써주면 코드 퀄리티가 확 올라간다"고 설명하면 대부분 수용해줘요.

3. 검증 에이전트를 다른 에이전트와 조합해요

HANUI 프로젝트에서는 이런 순서로 쓰고 있어요:

한 번의 요청으로 세 단계를 자동으로 돌릴 수 있어요.

4. 허용 오차를 프로젝트에 맞게 조정해요

위 기준표는 HANUI 기준이에요. 프로젝트 성격에 따라:

픽셀 퍼펙트가 중요한 프로젝트: 오차 0~1px
프로토타입 단계: 오차 4~5px
디자인 시스템 구축 중: font-size, color만 0 오차, 나머지 느슨하게

마무리

정리하면:

Figma MCP로 구현하면 큰 틀은 맞지만 디테일이 틀어진다
원인은 MCP 요약, attention 분산, 누적 오차 등 여러 레이어
서브에이전트로 "생성 → 표 비교 → 패치"를 한 턴에 돌리면 반복 수정이 사라진다
.claude/agents/figma-verifier.md 파일 하나면 된다

"Claude에게 두 번 말하는 건 자동화가 덜 된 거다"라는 생각으로 만들었어요. 한 번 세팅하면 이후로는 검증 요청 없이도 알아서 돌아가요.

다음 편에서는 이 에이전트들을 **훅(Hook)**으로 연결해서 파일 저장만 하면 자동으로 검증이 돌아가게 만드는 방법을 다룰게요.