피그마 화면을 캡처해서 AI에게 던져줬더니, 여백도 다 틀리고 엉뚱한 CSS 클래스만 잔뜩 만들어내서 결국 손으로 다시 짰습니다.
AI로 프론트엔드 코드를 짜보려던 디자이너와 기획자들이 겪는 공통된 좌절입니다. 이미지는 시각적인 그림일 뿐, 버튼의 패딩 값(Padding)이나 오토레이아웃의 반응형 규칙, 컴포넌트 간의 종속성을 AI에게 온전히 전달하지 못하기 때문입니다.
하지만 최근 글로벌 디자인 커뮤니티인 레딧 r/FigmaDesign과 테크 유튜브에서 **“프론트엔드 개발 핸드오프의 패러다임이 완전히 뒤집혔다”**며 극찬받는 조합이 등장했습니다.
바로 피그마(Figma)와 앤트로픽의 터미널 에이전트인 클로드 코드(Claude Code)를 공식 MCP(Model Context Protocol)로 연결하는 바이브 코딩(Vibe Coding) 워크플로우입니다.
스크린샷 없이 피그마 링크 하나로 픽셀 단위로 일치하는 리액트/테일윈드 코드를 뽑아내 주말 만에 실제 서비스를 배포하는 실전 노하우를 정리해 드립니다.
한눈에 보는 과거 스크린샷 방식 vs Figma MCP 직접 연동 비교
| 비교 항목 | 과거 방식 (스크린샷 / 단순 이미지 프롬프트) | 최신 방식 (Figma MCP + Claude Code) |
|---|---|---|
| 디자인 전달 방식 | 화면 캡처 이미지(.png) 업로드 | 피그마 프레임 URL 직접 입력 (API 노드 파싱) |
| 오토레이아웃 반영 | 겉모습만 흉내 내며 절대 좌표(Absolute) 남발 | Flexbox 및 Grid 제약조건을 반응형으로 100% 변환 |
| 디자인 토큰 일치도 | 임의의 색상 코드(Hex)와 마진을 제멋대로 생성 | 피그마에 등록된 컬러·폰트·간격 시스템 완벽 재사용 |
| 코드 재사용성 | 페이지 통짜 덩어리 코드로 생성 | Header, Button, Card 단위의 재사용 모듈로 자동 분할 |
| 실행 주체 | 웹 브라우저 채팅창에서 복사·붙여넣기 | 터미널에서 내 로컬 소스코드 폴더에 직접 파일 작성 |
1단계: 환경 세팅 — Figma MCP 서버 1분 만에 연결하기
클로드 코드(Claude Code)가 내 피그마 디자인을 직접 들여다볼 수 있도록 ‘다리’ 역할을 하는 공식 MCP(Model Context Protocol) 서버를 연결합니다.
- 터미널을 열고 클로드 플러그인을 설치합니다.
claude plugin install figma@claude-plugins-official- 플러그인 메뉴에서 Figma를 선택하고 엔터를 누르면 브라우저가 열리며 피그마 계정 권한 승인 창이 뜹니다.
- 승인을 완료하면 이제 클로드 코드는 단순 텍스트 프롬프트뿐만 아니라, 피그마 캔버스 상의 모든 레이어 속성을 직접 읽을 수 있는 권한을 얻게 됩니다.
2단계: 피그마 시안 작업 시 반드시 지켜야 할 ‘골든 룰’
바이브 코딩으로 쓰레기 코드가 나오는 가장 큰 원인은 피그마 파일 자체가 엉망으로 정리되어 있기 때문입니다. AI에게 넘기기 전 피그마에서 아래 3가지만 확인하세요.
- 무조건 오토레이아웃(Auto-layout)으로 묶을 것: 레이어들이 절대 좌표(X: 120, Y: 340)로 떠 있으면 AI는 이를
position: absolute로 코딩해 화면 크기가 바뀌면 레이아웃이 와르르 깨집니다. Shift + A로 감싸진 오토레이아웃 프레임이어야만 완벽한 반응형flex코드로 변환됩니다. - 컴포넌트 이름 명확히 짓기:
Frame 29384같은 기본 이름 대신,HeroSection,PricingCard,PrimaryButton처럼 시맨틱한 네이밍을 붙여두면 클로드 코드가 해당 이름 그대로 깔끔한 컴포넌트 파일(.tsx)을 생성합니다. - 디자인 토큰 통일: 색상과 폰트 스타일을 피그마 로컬 변수(Variables)나 스타일에 등록해 두면, 클로드가 멋대로 새 CSS 클래스를 날조하지 않고
tailwind.config에 정의된 색상 토큰을 재사용합니다.
3단계: 실전 프롬프트 — “추상적인 형용사를 버려라”
피그마 프레임 우측 상단에서 **[Copy link to selection]**을 눌러 링크를 복사한 뒤, 클로드 코드에 명령을 내립니다. 이때 “더 예쁘게”, “고급스럽게” 같은 추상적인 단어는 금물입니다.
[Claude Code 실전 지시 프롬프트]
"방금 복사한 피그마 링크의 [HeroSection] 프레임을 Next.js 15와 Tailwind CSS 컴포넌트로 구현해 줘.
1. 링크: https://www.figma.com/design/... (피그마 프레임 링크)
2. 피그마의 오토레이아웃 간격(Gap)과 패딩을 Tailwind 스케일(p-4, gap-6 등)로 정확히 매핑할 것.
3. 버튼 컴포넌트는 `components/ui/button.tsx`의 기존 컴포넌트를 import해서 재사용해 줘.
4. 모바일 화면(375px)에서는 2열 그리드가 1열 세로 스택으로 부드럽게 감싸지도록 반응형 브레이크포인트(md:)를 적용해 줘."클로드 코드는 피그마 API를 통해 프레임 내부의 텍스트, 색상, 아이콘 SVG를 실시간으로 추출해 내 프로젝트의 components/HeroSection.tsx 파일로 즉시 작성해 넣습니다.
4단계: 바이브 코딩 실패를 막는 ‘점진적 3단계 빌드’
전체 랜딩 페이지를 한 번에 다 짜라고 시키면 맥락이 꼬여 반드시 버그가 납니다. 아래 순서대로 쪼개서 지시하는 것이 레딧 고수들의 핵심 노하우입니다.
- 1차: 정적 뼈대(Scaffolding): 텍스트와 이미지, 레이아웃 배치만 피그마와 100% 똑같이 잡기
- 2차: 인터랙션 상태(State): 버튼 호버(Hover) 효과, 드롭다운 메뉴, 탭 전환 로직 추가
- 3차: 데이터 연결(Props/API): 하드코딩된 더미 텍스트를 props나 동적 데이터로 연결하기
마치며
과거의 개발이 디자이너가 준 시안을 눈대중으로 보며 CSS 픽셀을 1px 단위로 맞추던 지루한 노동이었다면, 이제는 **“피그마로 의도를 설계하고, 클로드 코드로 즉시 배포하는 시대”**로 진화했습니다.
아이디어는 있지만 개발자가 없어서 런칭을 망설이고 계셨다면, 오늘 피그마에 오토레이아웃으로 단 한 장의 랜딩 페이지를 그려보세요. 그리고 클로드 코드에 링크를 건네보시길 바랍니다. 주말 이틀 만에 내 디자인이 살아 움직이는 진짜 웹 앱으로 탄생하는 마법을 경험하실 수 있습니다.
