Figma Make란? — AI가 코드를 짜주는 프로토타이핑 혁명

Figma Make는 2025년 Figma Config 컨퍼런스에서 처음 공개된 AI 기반 프로토타이핑 도구입니다. 기존 Figma의 디자인 파일 기반 워크플로우와 달리, Make는 마치 채팅하듯 자연어 프롬프트를 입력하면 실제로 클릭하고 입력하고 화면 전환까지 되는 인터랙티브 웹앱을 생성해 줍니다. 핵심 차이점은 ‘이미지처럼 생긴 목업’이 아니라 진짜 HTML·CSS·JavaScript로 구동되는 ‘살아있는 프로토타입’이라는 점입니다.

2026년 2월 기준 Figma Make는 대폭 업그레이드되었습니다. 이제 AI 모델 선택창이 프롬프트 입력 화면에 직접 붙어 있어, 톱니바퀴 설정창까지 들어가지 않아도 Gemini 3 Pro, Claude, 기본 모델 중 하나를 즉시 전환할 수 있습니다. 또한 Claude Code와의 양방향 MCP 연동이 완성되어, Claude Code에서 만든 코드 결과물을 Figma 캔버스로 바로 옮기는 ‘클코 to Figma’ 워크플로우도 가능해졌습니다.

▲ 목차로 돌아가기

요금제 완전 비교 — 무료로 얼마나 쓸 수 있나?

Figma Make는 기존 Figma 요금제 안에 포함됩니다. 별도 구독 없이 현재 쓰는 Figma 계정으로 바로 접근할 수 있다는 점이 장점입니다. 무료 Starter 플랜에서도 Make를 사용할 수 있지만, 팀 라이브러리 스타일 불러오기나 Supabase 백엔드 연동 같은 고급 기능은 유료 플랜에서만 쓸 수 있습니다.

AI 크레딧은 프롬프트를 보낼 때마다 소진됩니다. Starter 플랜의 경우 하루 150 크레딧 한도 때문에 하루에 약 5~10회 정도 만족스러운 프로토타입 생성이 가능합니다. 개인 학습용이나 간단한 기획 검증 목적이라면 무료 플랜으로도 충분합니다. 다만 팀 단위로 디자인 시스템을 연동해야 하거나 실제 데이터와 연결하려면 Professional 플랜($20/월) 이상이 현실적입니다.

▲ 목차로 돌아가기

5분 실전 가이드 — 처음부터 웹앱 완성까지

Figma Make를 처음 실행하는 분들을 위해 단계별 흐름을 정리합니다. 화려한 사전 지식 없이도 이 순서만 따라가면 5분 안에 동작하는 앱 화면을 뽑아낼 수 있습니다.

▲ 목차로 돌아가기

AI 모델 선택 전략 — Gemini 3 Pro vs Claude

2026년 2월 업데이트의 가장 큰 실질적 변화는 Make 내 모델 피커 추가입니다. 이전에는 설정 메뉴 깊숙이 숨어 있던 모델 변경 기능이 이제 프롬프트 창에 직접 붙어 있어, 작업 흐름을 끊지 않고 전환할 수 있습니다. 어떤 모델을 언제 써야 할지 명확하게 구분해 드립니다.

Gemini 3 Pro (Experimental)

현재 Make에서 가장 높은 수준의 UI 생성 품질을 보여줍니다. 복잡한 화면 구성이나 멀티탭 레이아웃, 데이터 시각화가 포함된 대시보드 형태의 프로토타입을 만들 때 특히 강합니다. 와이어프레임 이미지를 첨부했을 때 레이아웃 의도를 가장 잘 파악하는 모델이기도 합니다. 단, Experimental 딱지가 붙은 만큼 결과가 가끔 불안정할 수 있습니다.

Claude (기본 / MCP 연동 시)

코드 품질 면에서 Claude가 앞섭니다. 생성된 코드를 개발자가 직접 수정하거나 Cursor, VS Code에서 이어받아 개발을 계속할 계획이라면 Claude로 생성한 코드가 더 깔끔하고 예측 가능합니다. 또한 Claude Code MCP를 연결했다면 Claude Code에서 빌드한 컴포넌트를 Figma 캔버스로 바로 옮기는 ‘역방향 워크플로우’를 활용할 수 있어, 코드 우선 개발자에게 특히 유리합니다.

▲ 목차로 돌아가기

Supabase 연동 — 데이터가 살아있는 앱 만들기

Figma Make가 단순 ‘목업 생성기’와 차별화되는 결정적 기능이 바로 Supabase 백엔드 연동입니다. Supabase는 오픈소스 Firebase 대안으로, 실시간 데이터베이스, 사용자 인증, 파일 스토리지를 무료로 제공합니다. Figma Make와 Supabase를 연결하면 프로토타입이 실제 데이터를 읽고 쓰는 진짜 웹앱이 됩니다.

연동 방법 요약

Make 프롬프트 창 하단의 ‘백엔드 추가’ 버튼을 클릭하면 Supabase 연결 옵션이 나타납니다. Supabase 프로젝트 URL과 anon key를 입력하면 Make가 자동으로 테이블 구조를 파악하고, 이후 프롬프트에서 “사용자가 입력한 메모를 저장해줘”처럼 요청하면 실제 DB에 데이터를 읽고 쓰는 코드를 생성합니다.

실전 활용 시나리오

쇼핑 리스트 앱을 예로 들면, Supabase 연동 없이는 페이지를 새로고침하면 데이터가 사라집니다. 하지만 Supabase를 연결하면 로그인 기능, 개인별 데이터 저장, 실시간 동기화까지 구현됩니다. 스타트업 창업자라면 MVP 제품을 검증하는 데 사용할 수 있고, 기획자라면 실제 데이터가 들어가는 프로토타입으로 사용자 테스트를 바로 진행할 수 있습니다.

▲ 목차로 돌아가기

프롬프트 고수되기 — 결과물 품질을 2배 높이는 전략

Figma Make에서 결과물 품질의 80%는 프롬프트 작성 방식에서 결정됩니다. 막연하게 “쇼핑몰 앱 만들어줘”라고 입력하면 평범한 템플릿 수준이 나오지만, 구체적이고 단계적으로 요청하면 놀라운 결과가 나옵니다. 공식 문서와 실제 사용 경험을 바탕으로 검증된 전략 6가지를 정리합니다.

▲ 목차로 돌아가기

한계와 대안 — 솔직한 장단점 평가

도구를 제대로 쓰려면 한계도 알아야 합니다. Figma Make를 몇 달간 써온 사용자들의 피드백과 공식 문서를 기반으로, 있는 그대로 장단점을 정리했습니다.

✅ 진짜 잘하는 것들

초기 아이디어를 빠르게 구체화하는 속도는 독보적입니다. 와이어프레임 스케치를 붙여넣으면 1~3분 만에 실제로 클릭되는 화면이 나옵니다. 팀원·클라이언트에게 공유하는 클릭 가능한 데모를 당일 완성할 수 있다는 것은 기획자와 PM에게 매우 강력한 무기입니다. 화면 간 전환, 버튼 클릭 이벤트, 폼 입력 검증 같은 기본 인터랙션이 프롬프트 한 줄에 구현되는 것도 인상적입니다.

❌ 아직 아쉬운 것들

복잡한 앱에서는 생성 속도가 느려지고 불안정해집니다. 수동으로 세부 요소를 수정했는데 다음 프롬프트 실행 후 원래대로 돌아가는 경우가 종종 발생합니다. 모바일 최적화 출력이 아직 완벽하지 않아 PC 화면 기준으로 만들어진 결과물이 모바일에서 깨지는 경우도 있습니다. 커스텀 폰트는 지원하지 않고 Google Fonts만 사용 가능합니다.

🔄 대안 도구 비교

복잡한 다중 화면 앱이나 팀 협업이 핵심이라면 Lovable이나 Bolt.new도 고려해 볼 수 있습니다. 이미 Figma Design을 쓰는 팀이라면 Make가 워크플로우 통합 면에서 압도적이지만, Figma를 쓰지 않는 팀은 Bolt.new가 진입 장벽이 낮습니다. 개인적으로는 아이디어 검증과 내부 기획 공유에는 Figma Make, 실제 서비스 출시에 가까운 수준이 필요하면 Lovable을 혼용하는 전략을 권장합니다.

▲ 목차로 돌아가기

Q&A — 자주 묻는 질문 5가지

▲ 목차로 돌아가기

마치며 — 총평

Figma Make는 2026년 현재 가장 실용적인 ‘AI 프로토타이핑 도구’입니다. 이미 Figma를 쓰는 디자이너나 기획자라면 추가 구독 없이 바로 도입할 수 있고, 무료 플랜으로 핵심 기능을 충분히 맛볼 수 있습니다. Gemini 3 Pro와 Claude 모델 선택, Supabase 백엔드 연동, Claude Code 양방향 MCP까지 — 개인적으로는 2026년 1분기 기준 가장 조용하게 강력해진 도구라고 평가합니다.

아직 아쉬운 점도 분명합니다. 복잡한 앱에서의 불안정성, 모바일 최적화 미흡, 커스텀 폰트 미지원은 실제 업무 투입 전 반드시 테스트해보아야 합니다. 하지만 도구는 늘 완벽하지 않습니다. 지금 당장 무료 플랜으로 시작해서, 내가 맡은 프로젝트에서 어떻게 활용할 수 있는지 30분만 실험해 보시길 권장합니다. 좋은 도구를 남보다 먼저 쓰는 것이 가장 현실적인 경쟁 우위입니다.

▲ 목차로 돌아가기