바이브 코딩으로 앱 하나를 하루 만에 만들었다는 이야기, 이제 흔하잖아요. 그런데 막상 결과물을 보면 — 기능은 돌아가는데 UI가 "AI가 만든 티"가 확 나요. 그 제너릭한 느낌. 디자이너가 보면 한숨부터 나오는 그 간격.
문제는 단순해요. AI는 코드를 잘 짜지만, "이 디자인을 정확히 따라 만들어"라고 하면 80%만 맞추고 나머지 20%에서 무너져요. 패딩이 틀리고, 컬러가 미묘하게 다르고, 레이아웃이 어긋나요. 그걸 고치려고 "여기 좀 더 넓혀줘" "아니 그거 말고 이거" 하며 티키타카하다 보면 AI가 절약해준 시간을 디자인 수정에 다 쓰게 되죠.
근데 이걸 해결한 사람들이 있어요. 배경 픽셀 일치율 99.8%까지 찍은 사례도 나왔고요. 핵심은 3가지 무기의 조합이에요.
이게 뭔데?
피그마 디자인을 AI 코딩 에이전트에 전달하는 방법은 크게 세 가지예요:
- 스크린샷을 직접 보여주기 — AI 비전으로 해석. 가장 흔하지만 부정확해요.
- 피그마 공식 MCP 사용 — 피그마 API로 디자인 데이터를 코드(React/Tailwind)로 변환해서 전달.
- Framelink MCP 사용 — 피그마 API로 디자인 데이터를 서술적 JSON으로 변환해서 전달.
여기서 2번과 3번의 차이가 결정적이에요.
피그마 공식 MCP는 디자인 노드를 읽어서 React + Tailwind 코드를 직접 생성해요. 문제는 이 코드가 leading-[22.126px] 같은 임의의 값으로 가득하다는 거예요. AI가 이걸 받으면 그대로 복사하거든요 — 여러분 코드베이스의 패턴은 무시하고.
Framelink MCP는 접근이 달라요. "이 요소는 1px 테두리와 16px 패딩을 가지고 있고, UI/Button - Large 스타일을 사용한다"는 식으로 서술적 데이터를 보내요. AI가 이 명세를 읽고, 여러분 프로젝트의 기존 컴포넌트와 디자인 시스템에 맞춰서 코드를 작성하는 거죠.
뭐가 달라지는 건데?
| 항목 | 피그마 공식 MCP | Framelink MCP |
|---|---|---|
| 출력 형식 | React/Tailwind 코드 (처방적) | 서술적 JSON (설명적) |
| 데이터 크기 | 더 큼, 장황함 | ~25% 더 작음 |
| 스타일 이름 | 소실됨 | 보존됨 (예: UI/Button - Large) |
| 중첩 컴포넌트 | 평탄화 (구조 오해 유발) | 정확하게 표현 |
| 중복 제거 | 컴포넌트만 | 스타일 + 자동 감지 중복까지 |
| AI 행동 | 코드를 복사 (임의값 포함) | 명세를 해석하여 프로젝트에 맞게 구현 |
Framelink은 Graham Lipsman이 만든 오픈소스 프로젝트로, GitHub에서 13,000개 이상의 스타를 받았어요. Cursor, Claude Code, Windsurf, VS Code 등 MCP를 지원하는 거의 모든 에디터에서 쓸 수 있고요.
그런데 Framelink만으로는 부족해요. 디자인 토큰을 정확하게 전달하는 건 절반의 해결책이에요. AI가 그 토큰으로 만든 결과물이 실제로 디자인과 똑같은지 검증하는 나머지 절반이 필요하죠.
| 항목 | 기존: 수동 피드백 루프 | 변경: 자동 픽셀 diff 루프 |
|---|---|---|
| 플로우 | 디자인 전달 → AI 구현 → 사람이 눈으로 비교 → 수정 요청 | 디자인 전달 → AI 구현 → 스크린샷 자동 캡처 → diff 히트맵 → AI 자동 수정 |
| 피드백 1회 | 5~10분 | 1~2분 |
| 반복 횟수 | 10회 이상 (수동) | 8회 이내 (자동) |
| 정확도 | 사람 눈 = 대략적 | 픽셀 단위 = 정밀 |
일본의 크리에이티브 개발자 Saqoosha는 이 접근법의 실전 사례를 공유했어요. Pencil에서 만든 대시보드 디자인을 Claude Code로 구현하면서 PIL로 픽셀 diff 히트맵을 만들었어요.
히트맵에서 동일한 부분은 검은 픽셀, 차이가 있는 부분은 빨간색으로 표시돼요. Claude가 이 히트맵을 보고 "사이드바 간격이 5px 틀렸네" "테이블 행 높이가 56px여야 하는데 57px이네" 같은 걸 자동으로 잡아내고 수정한 거예요.
나머지 0.2%는 뭐냐고요? 디자인 도구(Pencil)와 브라우저(Chrome)의 폰트 렌더링 엔진 차이예요. 안티앨리어싱 방식이 근본적으로 다르기 때문에, 텍스트 부분은 아무리 해도 100% 일치가 불가능해요. 레이아웃과 색상은 완벽하게 일치하되, 텍스트 렌더링 차이만 남는 거 — 이게 현실적인 "pixel perfect"의 상한선이에요.
핵심만 정리: 시작하는 법
가장 검증된 워크플로우를 5단계로 정리했어요.
- Framelink MCP 연결
Claude Code(또는 Cursor 등)에 Framelink MCP 서버를 추가해요. 피그마 Personal Access Token이 필요하고, 설정은 한 줄이에요:claude mcp add framelink-figma -- npx -y figma-developer-mcp --figma-api-key="토큰" - 섹션별로 나눠서 전달
전체 페이지를 한 번에 보내지 마세요. 헤더, 히어로 섹션, 카드 그리드처럼 섹션 단위로 피그마 프레임 링크를 전달해요. 피그마에서 해당 프레임을 선택하고 Cmd+L(링크 복사)하면 돼요. - 초기 구현 → 스크린샷 캡처
AI가 첫 구현을 마치면, Playwright나 브라우저 MCP로 구현 결과의 스크린샷을 정확히 같은 해상도(예: 1440x900)로 캡처해요. 피그마에서도 같은 프레임을 PNG로 내보내고요. - 픽셀 diff 히트맵으로 자동 수정
PIL(Python)이나 Pixelmatch(Node.js)로 두 스크린샷의 픽셀 diff 히트맵을 생성해요. AI에게 "이 히트맵에서 빨간 부분이 사라질 때까지 수정해"라고 지시하면 자동으로 반복 수정해요. 컴포넌트당 최대 8회 반복을 권장해요. - Computed Style 검증 (선택)
시각적 diff만으로 못 잡는 버그가 있어요. Playwright MCP로 실제 computed CSS 값을 측정하면 "보기엔 맞는데 동작이 다른" 버그까지 잡을 수 있어요.
피그마 디자인 없이 웹사이트를 복제하고 싶다면
AI Website Cloner(GitHub 8,900+ 스타)는 URL 하나만 넣으면 AI 에이전트가 사이트를 분석하고 React + Tailwind로 복제하는 오픈소스 템플릿이에요. 스크린샷 → 토큰 추출 → 병렬 빌드 → 시각 diff QA 파이프라인이 내장되어 있어요.
전용 스킬: Pix
Pix는 Claude Code 전용 스킬로, Figma MCP를 통해 디자인 토큰을 추출하고, 브라우저에서 렌더링한 결과를 자동으로 비교하며, 불일치를 스스로 수정하는 자율 피드백 루프를 실행해요. /pix 명령어 하나로 실행됩니다.
