작성일: 2026년 2월 18일
조사 범위: 공식 문서, 기술 미디어, 커뮤니티, 학술 연구, 경쟁 환경
발표일: 2026년 2월 17일 (Figma-Anthropic 공동 발표)
목차
1. 개요
1.1 Code to Canvas란?
Code to Canvas는 2026년 2월 17일 Figma와 Anthropic이 공동으로 발표한 기능으로, Claude Code에서 구축한 실제 작동하는 UI를 브라우저에서 캡처하여 완전히 편집 가능한 Figma 프레임으로 변환하는 워크플로우이다.
단순한 스크린샷이 아닌, 편집 가능한 Figma 디자인 레이어로 변환된다는 점이 핵심이다. 이를 통해 개발자가 AI로 빠르게 만든 프로토타입을 디자이너 팀과 함께 캔버스에서 탐색하고, 비교하고, 의사결정할 수 있게 된다.
1.2 핵심 가치 제안
2. 기능 및 기술 구조
2.1 작동 프로세스 (4단계)
1. Build/Iterate → Claude Code로 UI 구축 또는 반복
2. Capture → 브라우저의 라이브 상태를 캡처
3. Paste into Figma → 편집 가능한 Figma 프레임으로 변환
4. Collaborate → 팀이 캔버스에서 주석, 비교, 탐색
2.2 핵심 특징
편집 가능한 디자인 아티팩트: 평면 이미지가 아닌 실제 Figma 프레임으로 캔버스에 배치
멀티 스크린 세션: 온보딩, 결제, 설정 등 전체 플로우를 한 세션에서 캡처 (시퀀스와 컨텍스트 보존)
클립보드 복사: 캡처된 화면을 클립보드로 복사하여 어떤 Figma 파일에도 붙여넣기 가능
요소 선택 캡처: 전체 페이지뿐 아니라 특정 UI 요소(카드, 버튼 등)만 선택하여 캡처 가능
2.3 기술적 메커니즘
이 기능은 Figma MCP 서버의 generate_figma_design 도구를 통해 동작한다.
2.4 사용 예시 프롬프트
"Start a local server for my app and capture the UI in a new Figma file"
"Send the My Pantry page to Figma"
"Capture the UI to [기존 Figma 파일 URL]"
2.5 요구 사항
항목요구 사항
Figma데스크톱 앱 (브라우저 버전 아님)
Figma 플랜Dev 또는 Full 시트 (유료)
AI 도구Claude Code (npm으로 설치)
MCP 설정Figma MCP 서버 연결 완료
2.6 설치 방법
# 리모트 서버 연결
claude mcp add --transport http figma https://mcp.figma.com/mcp
# 전역 설치 (모든 프로젝트)
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
# 데스크톱 서버 연결 (로컬)
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
2.7 Figma MCP 서버 지원 도구 (총 13개)
| 도구명 | 설명 |
| generate_figma_design | UI를 Figma 디자인 레이어로 변환 (Code to Canvas의 핵심) |
| get_design_context | 레이어의 디자인 컨텍스트 검색 |
| get_variable_defs | 변수와 스타일 반환 (색상, 간격, 타이포그래피) |
| get_code_connect_map | Figma 노드-코드 컴포넌트 매핑 정보 |
| add_code_connect_map | Figma-코드 연결 설정 |
| get_screenshot | 선택 항목 스크린샷 캡처 |
| create_design_system_rules | 디자인→코드 변환 규칙 파일 생성 |
| get_metadata | 레이어 ID, 이름, 유형 등 XML 표현 |
| get_figjam | FigJam 다이어그램을 XML 메타데이터로 변환 |
| generate_diagram | Mermaid 구문에서 FigJam 다이어그램 생성 |
| whoami | 인증된 사용자 정보 반환 |
| get_code_connect_suggestions | Code Connect 매핑 감지 및 제안 |
| send_code_connect_mappings | Code Connect 매핑 확인 |
2.8 알려진 제한 사항
시각적 반복 개선의 피드백 루프 부족 (시각적 조정은 코드 재작성 필요)
다중 프레임(캐러셀, 온보딩 시퀀스) 조합 시 개별 변환 후 수동 재조합 필요
터미널 기반 인터페이스로 인한 개발자 중심 워크플로우
3. 출시 배경과 전략적 맥락
3.1 Figma-Anthropic 파트너십 타임라인
| 시기 | 발표 내용 |
| 2024년 11월 | Anthropic, MCP 프로토콜 오픈소스 공개 |
| 2025년 10월 | Figma MCP 서버 베타 출시 (Design to Code) |
| 2025년 11월 | Schema 2025에서 MCP 서버 정식 출시(GA), 리모트 서버 지원 |
| 2026년 1월 | Claude 내 MCP 앱으로 FigJam 통합, 9개 인터랙티브 앱 출시 |
| 2026년 2월 17일 | Code to Canvas 발표 — Claude Code에서 Figma로의 역방향 워크플로우 완성 |
3.2 양방향 워크플로우의 완성
Code to Canvas 이전에는 Figma MCP 서버가 디자인→코드 (Design to Code) 방향만 지원했다. 이번 발표로 코드→디자인 (Code to Canvas) 방향이 추가되어, 양방향 워크플로우가 완성되었다:
3.3 Figma CEO Dylan Field의 비전
Dylan Field는 CNBC 인터뷰에서 AI 시대의 Figma 전략을 다음과 같이 설명:
*"AI가 빠른 개발을 가능하게 하는 세상에서 디자인, 관점(Point of View), 그리고 장인 정신(Craft)*이 핵심 차별화 요소로 남을 것이다. AI로 빠르게 만드는 것뿐 아니라, 올바른 것을 만드는 데 초점을 맞춰야 한다."
이는 "소프트웨어 대전환(Software Reckoning)"이라는 맥락에서, Figma가 AI를 적이 아닌 파트너로 포지셔닝하려는 전략적 판단을 반영한다.
3.4 Figma의 시장 상황
| 지표 | 내용 |
| 발표 당일 주가 변동 | +4.04% ($23.44) |
| 52주 최고가 대비 | 약 85% 하락 ($142.92 → $23.44) |
| 애널리스트 컨센서스 | Moderate Buy (매수 3, 보유 4, 매도 0) |
| 평균 목표 주가 | $42.17 (86.8% 상승 여력) |
| 시장 배경 | "SaaSpocalypse" — SaaS 주식 전반의 AI 우려 매도세 |
4. MCP 프로토콜의 이해
4.1 MCP란?
MCP(Model Context Protocol)는 Anthropic이 2024년 11월 공개한 개방형 표준 프로토콜로, AI 시스템이 외부 도구, 데이터 소스와 표준화된 방식으로 통합되도록 설계되었다. "AI 애플리케이션을 위한 USB-C"로 비유된다.
SON-RPC 2.0 기반 통신
Language Server Protocol(LSP)의 메시지 흐름 패턴을 재사용
OAuth 기반 인증
4.2 생태계 현황
| 지표 | 수치 |
| 월간 SDK 다운로드 | 9,700만 회 이상 |
| 등록된 MCP 서버 | 10,000개 이상 |
| MCP 클라이언트 | 300개 이상 |
| 주요 채택 기업 | OpenAI, Google, Microsoft, AWS, Block, Bloomberg 등 |
주요 이정표:
2025년 3월: OpenAI가 MCP 공식 채택
2025년 12월: Linux Foundation 산하 Agentic AI Foundation(AAIF)에 기부 (Anthropic, Block, OpenAI 공동 설립)
2025년 말 기준: 조직의 90%가 MCP 사용 예측
5. 미디어 보도 및 전문가 분석
5.1 주요 미디어 보도 요약
| 매체 | 핵심 내용 | 논조 |
| CNBC | Figma CEO 독점 인터뷰, "소프트웨어 대전환" 분석 | 심층 분석 |
| TechCrunch | Claude 인터랙티브 앱 출시, Opus 4.6 에이전트 팀 보도 | 기술 초점 |
| Seeking Alpha | 투자 관점에서 파트너십 분석, 주가 4.04% 상승 | 투자 분석 |
| TipRanks | 애널리스트 Moderate Buy, 목표가 $42.17 | 투자 분석 |
| Investing.com | "SaaSpocalypse" 속 전략적 포지셔닝 | 시장 분석 |
| GuruFocus | "인터페이스 디자인 접근 방식의 중대한 변화" | 긍정적 |
| Digg | Code to Canvas 기능 소개 | 뉴스 |
| MacRumors | Claude AI의 Figma 포함 외부 도구 통합 | 뉴스 |
5.2 디자인 전문 미디어 분석
| 매체/블로그 | 핵심 분석 |
| Muzli Blog | Code to Canvas 4단계 프로세스 상세 설명 |
| Builder.io | Claude Code + Figma MCP 튜토리얼, 디자인 시스템 이해 부족 한계 지적 |
| ADPList (Felix Lee) | 디자이너를 위한 실용 가이드, "핸드오프 지옥"에서 "바이브 코딩"으로 전환 |
| Nic Bertino | Claude Code는 Figma 대체재가 아닌 보완 도구라는 균형 잡힌 분석 |
| Jane Street | "Figma보다 Claude로 디자인하는 시간이 더 많다" — 실무 전환 사례 |
5.3 한국 미디어
| 매체 | 내용 |
| AI Matters | 클로드-피그마 외부 도구 연결 보도 |
| Brunch (ghidesigner) | Claude MCP+Figma 실무 가이드 3편 시리즈 |
| CIO Korea | Figma CPO 인터뷰 — AI 시대 디자이너 역할 변화 |
| 디지털투데이 | 앤트로픽 클로드 AI의 캔바/피그마 통합 보도 |
| AI Times | Claude Code의 에이전트 역량 분석 |
| DevOcean | Claude Code 기술 분석 |
참고: Code to Canvas 발표가 2월 17일(미국 시간)이라, 한국 주요 IT 미디어의 직접 보도는 조사 시점 기준 아직 제한적.
5.4 전문가 평가 종합
긍정적 평가
| 평가 | 내용 |
| 디자인의 필수성 강화 | "에이전틱 코딩 도구가 디자인의 필요성을 없앤 것이 아니라 더 필수적으로 만들었다" (CNBC) |
| 생태계 접근법 | "벽으로 둘러싸인 정원(walled garden) 대신, AI 코드가 여러 소스에서 원활하게 흘러야 한다는 인정" (GuruFocus) |
| 마찰점 제거 | "마지막 주요 마찰점 — 공유 공간으로 작업을 가져오는 것 — 을 제거" (TechBuzz.ai) |
| 실무 전환 | "부수적 작업(Figma 컴포넌트, 문서 포맷팅)이 사라지고 실제 아티팩트 개선에 집중" (Jane Street) |
우려와 비판
| 우려 | 내용 |
| 통제력 상실 | "Figma는 더 이상 통제하지 못하는 고속도로의 진입로를 개선하고 있다" (CNBC) |
| 디자인 단계 건너뛰기 | "AI 도구가 계속 개선되면 팀들이 디자인 다듬기 단계를 완전히 건너뛸 수 있다" (CNBC) |
| 일관성 문제 | "프롬프트마다 크게 다를 수 있어, 디자이너 검토 없이는 일관성 빠르게 저하" (Nic Bertino) |
| 디자인 시스템 이해 부족 | "기존 코드에 정밀한 업데이트를 만들기 어렵다" (Builder.io) |
6. 커뮤니티 반응
6.1 감성 분석 요약
| 감성 | 비율 | 설명 |
| 긍정적 | ~40% | AI 도구의 혁신성, 생산성 향상에 환호 |
| 중립/관망 | ~35% | 가능성은 인정하되 실용성과 성숙도에 관망 |
| 부정/우려 | ~25% | 일자리 위협, 보안 문제, 디자인 품질 저하 우려 |
6.2 플랫폼별 반응
Hacker News
가장 활발한 기술적 논의. 공식 MCP의 "읽기 전용" 제한에 대한 불만이 반복 제기
"공식 MCP는 Figma가 내러티브를 통제하기 위한 수단일 뿐" 이라는 비판적 시각
커뮤니티 주도 대안 프로젝트 다수 등장 (Figma-use CLI, Community Figma MCP Server 등)
보안 취약점(CVE-2025-53967)에 대한 기술적 분석
r/FigmaDesign, r/webdev, r/UI_Design 등에서 AI 디자인 워크플로우 논의 활발
"AI는 도구의 진화, 디자이너를 완전히 대체하지는 못한다"는 의견 다수
"바이브 코딩"과 디자인의 접점에 대한 관심 증가
Medium/블로그 — 양극화된 의견
| 관점 | 대표 글 | 핵심 주장 |
| Figma 불필요론 | "Forget Figma, AI is the new Design tool" | 6개월간 Figma 없이 3개 제품 디자인/출시 |
| Figma 대체 불가론 | "Claude Code, the Figma Replacement" | Figma는 샌드박스, Claude는 실제 코드 — 상호 보완적 |
| 역할 변화론 | "AI Is Flipping UX Upside Down" | "Figma는 타이타닉" — 디자이너 역할이 진화해야 함 |
| 필수 도구론 | "I Design with Claude More Than Figma Now" | Claude가 "필수불가결", 하지만 협업적 반복 감소 우려 |
Product Hunt
커뮤니티 MCP 서버에 "게임 체인저" 반응
"공식 MCP의 읽기 전용 제한이 항상 흥미를 죽였다"는 의견
6.3 주요 논쟁 구도
찬성: AI가 디자인을 혁신한다
| 논점 | 근거 |
| 프로토타이핑 속도 혁신 | 며칠/주 → 분 단위로 단축 |
| 핸드오프 제거 | 디자인이 끝나면 빌드도 끝남 |
| 기술적 장벽 해소 | 코딩 경험 없이도 실제 구현 가능 |
| 개발 시간 단축 | 적절한 디자인 시스템 팀 기준 50~70% 단축 |
| 디자이너 89%가 AI로 더 빨라짐 | Figma State of Designer 2026 |
반대: AI의 한계와 위험
| 논점 | 근거 |
| 디자인 시스템 거버넌스 불가 | AI는 생성은 잘하지만 일관성 유지에 취약 |
| 협업적 반복 감소 | 완성품 전달로 협업 기회 축소 |
| 보안 취약점 | Framelink MCP의 RCE 취약점(CVE-2025-53967) 발견 |
| 소규모 팀 부적합 | 설정 복잡성이 이점을 상회 |
| 창의적 사고 제약 | AI가 반복적 접근에 가두어 비전통적 탐색 제한 |
6.4 보안 이슈
Framelink Figma MCP Server에서 원격 코드 실행(RCE) 취약점(CVE-2025-53967)이 발견되어 보안 커뮤니티의 우려를 불러일으켰다:
GitHub 10,000+ 스타, 600,000+ 다운로드의 대규모 프로젝트에서 발견
child_process.exec에서의 입력 값 미검증으로 인한 커맨드 인젝션
2025년 9월 v0.6.3에서 수정 완료
AI 코드 생성 모델의 보안에 대한 통제력 부족이 최대 관심사 (커뮤니티 56%)
7. 경쟁 환경 분석
7.1 주요 경쟁 제품 비교
| 제품 | 주요 용도 | AI 모델 | 코드 품질 | 디자인 통합 | 배포 |
| v0 (Vercel) | UI 컴포넌트 생성 | Claude/Gemini/OpenAI | 프로덕션급 | Figma 이미지 입력 | Vercel |
| bolt.new | 풀스택 MVP | 다중 모델 | 프로토타입급 | 제한적 | 브라우저 내 |
| Cursor+Figma | IDE 기반 개발 | 다중 모델 | 프로덕션급 | MCP 양방향 연동 | 자유 선택 |
| Framer AI | 웹사이트 생성 | 자체 AI | 노코드 출력 | 자체 도구 | Framer CDN |
| GitHub Copilot | 코드 보조 | GPT-4 등 | 프로덕션급 | 이미지 입력 | 자유 선택 |
| Figma Make | 프로토타입/앱 | Claude 모델 | 프로토타입급 | 네이티브 통합 | Figma 내 |
7.2 Code to Canvas의 차별점
다른 경쟁 제품들이 텍스트/이미지 → 코드 방향에 초점을 맞추는 반면, Code to Canvas는 코드 → 디자인 방향을 제공한다. 이는 기존 경쟁 구도와 다른 차원의 가치를 제안한다:
v0, bolt.new: 코드를 생성하지만, 결과물을 디자인 도구로 되돌리는 워크플로우 없음
Cursor+Figma: MCP 양방향 연동이 가능하나, "캡처 후 탐색"이라는 Code to Canvas의 특유한 워크플로우는 없음
Figma Make: Figma 내에서 AI로 디자인을 생성하지만, 외부 코드 결과물을 가져오는 기능이 아님
7.3 Figma의 자체 AI 기능 포트폴리오
| 기능 | 설명 |
| Figma Make | 프롬프트-투-앱, Supabase 백엔드 통합 |
| Dev Mode | 디자인-코드 간극 해소 전용 워크스페이스 |
| Vectorize | AI로 정적 이미지를 편집 가능한 벡터로 변환 |
| Code Connect | 디자인 컴포넌트 ↔ 프로덕션 코드 직접 연결 |
| MCP 서버 | AI 코딩 에이전트와 직접 연결 |
| Code to Canvas | 코드 결과물을 편집 가능한 Figma 프레임으로 변환 (신규) |
8. 관련 학술 연구
8.1 UI 코드 자동 생성
| 연구 | 내용 | 출처 |
| DCGen (2024) | 분할 정복 기반 UI 코드 자동 변환 프레임워크. 요소 누락, 왜곡, 배치 오류 3가지 문제 식별 | arXiv:2406.16386 |
| pix2code | GUI 스크린샷에서 코드를 생성하는 선구적 연구 | GitHub |
| 고충실도 UI 코드 생성 (EMNLP 2025) | 멀티모달 접근법을 통한 고충실도 코드 생성 | ACL Anthology |
8.2 AI 지원 소프트웨어 개발
| 연구 | 내용 | 출처 |
| AI-Assisted Code Generation 리뷰 (2025) | ChatGPT, Copilot, CodeWhisperer 포괄적 리뷰 | 학술 저널 |
| GenAI for SE 연구 의제 (2025) | 11개 영역, 78개 미해결 연구 질문 도출 | Wiley |
| AI 코드 생성의 보안 영향 (2025) | AI 생성 코드의 취약점 분석 및 자동 보안 테스팅 | SSRN |
8.3 Apple의 UI 생성 연구 (2026)
Apple의 최신 연구는 181개의 디자이너 스케치 주석만으로 소형 모델이 대형 상용 LLM을 능가하는 UI 생성 성능을 달성할 수 있음을 보여주었다. 이는 소량의 고품질 전문가 피드백의 효과를 입증하며, Code to Canvas와 같은 도구에서 디자이너 피드백이 얼마나 중요한지를 학술적으로 뒷받침한다.
9. 산업 트렌드와 시사점
9.1 디자이너-개발자 협업 현황 (Figma 2025 리포트)
| 지표 | 수치 |
| 주 1회 이상 개발자와 협업하는 디자이너 | 84% |
| 핸드오프 프로세스 개선 필요 (개발자 응답) | 91% |
| 협업이 효과적이라 평가하는 디자이너 | 63% |
| 협업이 효과적이라 평가하는 개발자 | 67% |
핸드오프의 91%가 개선 필요하다는 개발자 응답은 Code to Canvas가 해결하려는 문제의 실재성을 보여준다.
9.2 "디자인 엔지니어" 역할의 부상
AI 도구의 발전으로 디자인과 개발의 경계가 허물어지면서, 양쪽 언어를 모두 구사하는 디자인 엔지니어(Design Engineer) 하이브리드 역할이 부상하고 있다:
미적 비전과 기술적 실행을 모두 갖춤
AI를 활용하여 비전을 "생각의 속도"로 현실화
기존의 순차적 핸드오프 대신 연속적 협업 모델 지향
9.3 워크플로우 패러다임 전환
병목의 이동: "이것을 어떻게 만들까?"에서 → "어떤 버전을 출시할까?"로
9.4 핵심 시사점
코드와 캔버스의 상호보완성: 코드는 솔루션에 수렴하는 데 강력하고, 캔버스는 발산, 탐색, 결정에 강력하다. 양쪽 모두 필요하다.
디자인의 역할 재정의: 디자인이 "실행"에서 "의사결정"의 도구로 진화. 어떻게 만들까가 아니라, 무엇을 만들까를 결정하는 단계로.
MCP 기반 생태계의 확산: 디자인 도구, 코드 에디터, 프로젝트 관리 도구가 MCP를 통해 상호 연결되는 생태계가 빠르게 확장 중.
보안의 중요성: MCP 서버 생태계 확장에 따른 보안 취약점 관리가 필수적.
소규모 팀 vs 대규모 팀: 적절한 디자인 시스템을 갖춘 대규모 팀에서 가장 큰 효과. 소규모 팀은 설정 복잡성 대비 이점을 신중히 평가해야.
10. 결론 및 전망
10.1 종합 평가
Code to Canvas는 단순한 기능 추가가 아니라, AI 시대 디자인 도구의 생존 전략이자 디자인-개발 워크플로우의 패러다임 전환을 상징한다.
강점:
양방향 워크플로우 완성 (Design↔Code)
AI 생성 코드를 팀 협업 자산으로 전환
디자인의 필수성을 강화하는 전략적 포지셔닝
MCP라는 산업 표준 프로토콜 기반
약점 및 리스크:
Figma가 통제하지 못하는 AI 생태계 위의 구축물
AI 개선 시 디자인 단계 자체를 건너뛸 가능성
개발자 중심 워크플로우 (터미널 기반)
MCP 서버 보안 취약점 관리 필요
10.2 미래 전망
단기 (3~6개월): Code to Canvas의 초기 채택과 실무 사례 축적. 디자인 팀의 AI 코딩 도구 활용도 증가.
중기 (6~12개월): 경쟁사들의 유사 기능 출시. MCP 생태계 더욱 확장. 디자인 엔지니어 채용 증가.
장기 (1~2년): 디자인-개발 경계의 더욱 희미화. AI 네이티브 디자인 도구의 등장. 실시간 양방향 디자인-코드 동기화 실현.
10.3 핵심 메시지
"코드는 빠르게 현실적인 결과물에 도달하게 해주지만, 캔버스는 탐색하고 방향을 결정하는 데 강력하다. 우리는 양쪽의 장점을 모두 활용하는 시대에 들어서고 있다."
Code to Canvas는 이 양쪽 세계를 연결하는 다리이자, AI 시대에 "무엇을 만들 것인가"라는 본질적 질문에 대한 Figma의 답변이다.
11. 참고 자료
공식 문서 및 블로그
The Future of Design Is Code and Canvas
Design Context, Everywhere You Build
Think Outside of the Box — Claude and FigJam
주요 미디어 보도
Seeking Alpha - Figma-Anthropic
디자인 전문 블로그/리뷰
Builder.io - Claude Code + Figma MCP
Nic Bertino - Claude Code, the Figma Replacement
Jane Street - I Design with Claude More Than Figma Now
ADPList - Claude Code x Figma MCP 가이드
한국 미디어
커뮤니티
Medium - Forget Figma, AI is the new Design tool
Medium - Why Are Designers Leaving Figma
Product Hunt - Community Figma MCP Server
보안
The Hacker News - Figma MCP 취약점
Dark Reading - Figma MCP 보안 위협
학술 연구
DCGen - UI 코드 자동 생성 (arXiv:2406.16386)
산업 분석
Figma State of the Designer 2026
'AI > AI 동향' 카테고리의 다른 글
| OpenAI, 'Codex' 출시 : 웹-클라우드 환경에서 사용하는 코딩 에이전트 (0) | 2025.05.17 |
|---|---|
| 구글, Agent2Agent (A2A) 프로토콜 전격 공개! 🚀 (1) | 2025.04.22 |
| 바이브 코딩 바이블: AI 에이전트 시대의 새로운 코딩 패러다임 (1) | 2025.04.22 |
