AI 디자인 도구 Paper, 피그마 꺾을까

AI 코딩 에이전트와 MCP로 연결되는 AI디자인도구 Paper(paper.design)가 개발자·디자이너 커뮤니티에서 빠르게 화제가 되고 있다. 피그마처럼 직접 UI를 편집할 수 있으면서도, Claude Code나 Cursor 같은 AI 에이전트와 양방향으로 연동된다는 점이 핵심이다. 캔버스 자체가 HTML/CSS 기반이라 디자인과 코드 사이의 변환 오차가 없고, 2026년 3월 공식 출시와 함께 24개 MCP 툴을 선보였다. 피그마를 대체할 수 있을지, 아니면 그 사이 어딘가를 채우는 툴인지 살펴봤다.

 

왜 지금 AI 디자인 툴인가, 피그마의 시대가 끝날까

솔직히 피그마 자체는 훌륭한 툴이다. 10년 넘게 다듬어온 생태계, 풍부한 플러그인, 팀 협업 기능까지. 그런데 AI 에이전트와 함께 코딩하는 시대가 되면서 한 가지 불편함이 수면 위로 올라왔다. 피그마에서 디자인한 시안을 코드로 옮길 때마다 어딘가 어긋난다는 것이다.

 

피그마의 캔버스는 독자적인 SVG 포맷을 기반으로 한다. AI 에이전트가 이 시안을 읽어 HTML/CSS 코드를 뽑아내는 과정에서 포맷 변환이 필요하고, 그 사이에서 스타일 오차가 생긴다. 전문 기술 미디어 SFAI Labs의 비교 분석에 따르면, 개발자들이 실제로 보고한 Figma MCP의 코드 변환 오차가 85~90% 수준에 달한다. 배치가 약간 달라지고, 폰트 렌더링이 달라지고, 간격이 어긋난다. 미세하게 손으로 다시 다듬는 작업이 반복된다.

 

Figma MCP와 Paper MCP의 격차는 수치로도 드러난다. Figma MCP는 핵심 툴이 3개이고 읽기 위주로 동작하는 데 비해, Paper의 MCP는 24개 툴을 제공하며 읽기와 쓰기를 모두 지원한다. AI 에이전트가 디자인을 읽는 것을 넘어 직접 아트보드를 생성하고 스타일을 수정할 수 있다는 뜻이다. Claude Code, Codex 같은 에이전트를 중심으로 워크플로우를 새로 구성하려는 개발자들이 Paper에 눈길을 돌리는 이유가 여기 있다.

 

Figma vs Paper 비교 표

Paper란 무엇인가: 코드 네이티브 AI 디자인 툴

Paper의 캐치프레이즈는 "A connected canvas for teams shipping with agents"다. AI 에이전트와 함께 제품을 출시하는 팀을 위한 연결된 캔버스라는 의미인데, 여기서 핵심은 캔버스 자체가 HTML/CSS 기반이라는 점이다. 디자인을 그리는 행위 자체가 곧 코드를 쓰는 것과 같다. 변환 과정이 없으니 오차도 없다.

 

창업자 Stephen Haney는 전 Modulz와 Radix UI 출신이다. EverydayUX 인터뷰에서 그는 "피그마를 대체하는 것이 아니라 보완하는 포지션"이라고 직접 말했다. 기존 피그마 생태계를 무너뜨리겠다는 게 아니라, 피그마가 잘 못하는 영역을 채우겠다는 접근이다. 2025년 2월 시드 라운드에서 Accel과 Basecase가 리드해 $4.2M을 투자받았고, 2026년 3월 10일 Paper Desktop과 MCP 서버를 공식 출시했다. 아직 Open Alpha 단계라는 점은 미리 알아두는 게 좋다.

 

주요 기능을 간략히 정리하면 네 가지다. 첫째, 코드 네이티브 캔버스다. "Copy as React" 기능으로 보이는 그대로의 JSX 코드를 복사할 수 있고, Tailwind CSS 내보내기(2025년 12월 추가)도 지원한다. 둘째, MCP 24개 툴이다. Claude Code, Cursor, VS Code, Zed 등과 연동되며, 에이전트가 캔버스를 읽고 쓸 수 있다. 셋째, 디자인 시스템 자동 생성이다. 컬러 팔레트, 타이포그래피, 컴포넌트, 스페이싱 규칙을 프롬프트 한 줄로 만들어낸다. 넷째, GPU 셰이더다. Halftone CMYK, Grain Gradient, Fluted Glass, Liquid Metal 등 10종이 넘는 셰이더를 지원하고, 모두 React 컴포넌트로 내보낼 수 있다.

 

Claude Code + Paper MCP 연동 방법, 명령어 한 줄이면 끝

Paper MCP를 쓰려면 먼저 Paper Desktop 앱을 설치해야 한다. macOS, Windows, 웹 브라우저 모두 지원하니 환경에 맞게 paper.design에서 내려받으면 된다. MCP 서버는 Desktop 앱이 실행 중인 상태에서만 활성화된다.

 

Claude Code 연동

Paper Desktop을 실행한 상태에서 터미널에 아래 명령어 하나를 입력하면 등록이 끝난다.

claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user

이후 Claude Code에서 /mcp를 입력해 Paper가 목록에 표시되면 연결 완료다. 처음 시도할 때 MCP 목록에 나타나지 않으면 Paper Desktop을 완전히 종료하고 다시 실행한 뒤 재시도하면 대부분 해결된다.

 

Claude Desktop 연동

Claude Desktop은 Settings > Developer > Edit Config 경로로 설정 파일에 진입한 다음, MCP 서버 JSON을 추가하고 앱을 재시작하면 된다. Paper 앱 내부의 MCP 설정 화면에서 Claude Desktop용 JSON을 바로 복사할 수 있어서 붙여넣기만 하면 끝난다.

 

24개 MCP 툴 개요

Paper MCP 툴은 역할에 따라 세 범주로 나뉜다. 공식 문서 기준으로 읽기 툴이 11개, 쓰기 툴이 8개, 유틸리티가 5개다.

 

범주	툴 수	대표 툴
읽기 (Read)	11개	get_screenshot, get_jsx, get_computed_styles, get_selection
쓰기 (Write)	8개	create_artboard, write_html, update_styles, rename_layer, duplicate_node
유틸리티	5개	파일 정보, 폰트 정보, 노드 속성 조회 등

알려진 제한 사항 (공식 문서 기준)
WSL 사용자는 mirrored 모드 네트워킹이 필요하다. 장기 세션에서 연결이 끊기는 문제가 발생할 수 있고, SVG 채우기는 이미지로 반환된다. Figma에서 코드가 연결된 컴포넌트는 변환이 불안정할 수 있다.

실전 시나리오: 프롬프트 한 줄로 SaaS 대시보드 만들기

1단계: MCP 연결 확인. Paper Desktop을 실행하고 Claude Code에서 /mcp로 Paper가 연결됐는지 확인한다.

 

2단계: 디자인 시스템 생성. Claude Code에 다음과 같이 입력한다.

"다크 테마로 SaaS 대시보드 디자인 시스템 만들어줘. Paper MCP 사용해봐"

그러면 Paper가 파일과 페이지 이름을 지어가며 작업을 시작한다. 컬러 팔레트, 타이포그래피, 컴포넌트, 스페이싱 규칙이 페이드인 애니메이션과 함께 실시간으로 캔버스에 등장한다. 영상에서 "So easy!"라는 반응이 나온 이유가 여기에 있다. 프롬프트 한 줄로 체계적인 디자인 시스템이 완성됐기 때문이다.

 

3단계: 페이지 시안 생성. 이어서 다음 프롬프트를 입력한다.

"방금 만든 디자인 시스템을 기반으로 대시보드 페이지 한 개를 만들어줘. 데스크탑 버전으로"

여기서 흥미로운 점은 앞에서 만든 디자인 시스템을 정확히 준수한다는 것이다. 색상, 모서리 둥글기, 테이블 스타일, 카드 스타일이 전부 디자인 시스템 기준에 맞게 들어간다. 시스템을 정의했으면 그걸 지키는 것은 AI가 더 잘한다.

 

4단계: Next.js 코드로 구현. 마지막 프롬프트다.

"create next app CLI 사용해서 Next.js 부트스트래핑하고 대시보드 시안을 홈페이지로 구현해줘"

Next.js를 굳이 선택한 이유가 있다. HTML/CSS/JavaScript로 구현하면 소스를 그대로 불러올 테니 당연히 같아 보일 것이다. Next.js의 정해진 프로젝트 구조 안에서 컴포넌트화하고 테마를 적용하는 과정에서도 시안과 동일하게 나오는지가 진짜 테스트다. 결과는 시안과 거의 동일하게 구현됐다. 캔버스 자체가 HTML/CSS 기반이라 별도 포맷 변환이 없기 때문이다.

 

로컬라이제이션 시나리오도 간략하게 확인됐다. 에이전트가 캔버스를 인식해 새 아트보드를 만들고 기존 콘텐츠를 복사한 뒤 번역을 자동으로 적용하는 흐름이다. 다국어 서비스를 운영하는 팀에게는 실용적인 활용처가 될 수 있다.

 

Stitch vs Pencil vs Paper, 나에게 맞는 AI 디자인 툴은?

Paper의 포지션을 "Stitch와 Pencil 사이"라고 평가하고 있다. 각각 어떤 상황에 맞는지 비교해봤다.

 

항목	Google Stitch	Pencil	Paper	Figma
AI 방식	완전 AI 네이티브	코드·캔버스 혼합	코드 네이티브 + MCP	레거시 + MCP 추가
직접 편집	불가	가능	가능	가능
MCP 툴 수	없음 (자체 통합)	있음	24개 (양방향)	3개 (읽기 위주)
코드 내보내기	제한적	HTML/CSS	React/Tailwind 직접	변환 오차 있음
가격	무료	무료 (Early Access)	무료 / $20/월	$15/좌석/월~
성숙도	Google 지원, 중간	Open Alpha	Open Alpha	10년+ 생태계
추천 대상	비개발자, 빠른 시안	개발자 중심 디자인	디자이너+개발자 겸업	전문 디자인팀

Stitch는 20분 만에 첫 시안을 뽑아낼 수 있는 빠른 아이디에이션이 강점이지만, 직접 수정 UI가 없어서 세부 조정이 어렵다. Pencil은 피그마와 유사한 UI 덕분에 진입 장벽이 낮고 멀티 에이전트 기능이 있지만, 아직 완성도 면에서 아쉬운 부분이 있다는 평이 많다. Figma는 10년 이상 검증된 생태계와 팀 협업 기능이 압도적으로 성숙해 있다. 반면 MCP 연동은 읽기 위주의 3개 툴에 그쳐, AI 에이전트와의 긴밀한 협업에는 한계가 있다.

 

Paper는 Stitch처럼 직접 수정이 불가능한 것도 아니고, Pencil처럼 완성도가 아쉬운 상태도 아니다. 다만 Open Alpha인 만큼 프로덕션 환경에 그대로 도입하기보다는 "새로운 AI 퍼스트 워크플로우를 실험하는" 용도에 더 어울린다고 보는 게 현실적이다.

 

Paper 가격과 무료 티어, 지금 바로 써볼 수 있다

요금제는 두 가지다. 공식 사이트 기준으로 정리하면 다음과 같다.

 

플랜	가격	MCP 호출	이미지 제한
무료	$0	주 100회	25MB
Pro	$20/월 (연 결제 시 $16/월)	주 100만 회	100MB

"주 100회면 단순한 디자인 수정이나 변경 정도는 충분하다"고 평가한다. 무거운 반복 작업보다 핵심 시안 생성이나 소규모 수정에 집중한다면 무료 티어로도 Paper가 어떤 툴인지 충분히 체험할 수 있다. 향후 SAML/SSO를 포함한 Organizations 플랜도 예정되어 있어, 팀·기업 단위 도입도 계획 중인 것으로 보인다.

 

다운로드는 paper.design에서 하면 된다. macOS, Windows, 웹 브라우저 모두 지원한다.

 

Paper 로드맵, 앞으로 뭐가 추가되나

공식 로드맵(paper.design/roadmap)과 빌드 로그를 통해 개발 방향을 꽤 투명하게 공개하고 있다. 단순히 기능을 나열한 게 아니라 현재 진행 중인 항목, 예정 항목, 장기 계획으로 나뉘어 구체적으로 정리되어 있다.

 

현재 개발 중: 코드 컴포넌트 임포트(GitHub/npm 직접 가져오기), 네이티브 Tailwind CSS 통합, 브라우저 확장 Paper Snapshot, 라이브 데이터 연동, 캔버스 인식 에이전트 어시스턴트

 

예정 항목: 펜 툴·벡터 편집, shadcn 파트너십 기반 아이콘 팩·컴포넌트 킷, Slots 포함 컴포넌트, 테마·토큰 시스템

 

장기 계획: CSS Grid, 비디오 생성, Three.js 아일랜드, 파티클 시스템, Lottie/Rive/YouTube 임베드

 

2025년 12월부터 2026년 3월까지 Tailwind CSS 내보내기, AI 이미지 생성 업그레이드, Filter 패널, HEIC/HEIF 지원, Paper Desktop + MCP 공식 출시까지 꾸준히 업데이트가 이어졌다. 아직 Open Alpha이고 정책이나 가격이 바뀔 여지가 있지만, 활발히 개발되고 있는 프로젝트라는 점은 분명하다.

 

 

정리하자면, Paper의 핵심은 세 가지다. 캔버스 자체가 HTML/CSS 기반이라 디자인과 코드 사이의 변환 오차가 없고, Claude Code와 24개 MCP 툴로 양방향 연동이 가능하며, 무료로 시작할 수 있다. 개발과 디자인을 함께 다루는 사람이라면 Paper, 빠른 아이디에이션이 목적이라면 Stitch, 기존 팀 협업 환경을 그대로 유지하고 싶다면 Figma가 현실적인 선택이다. Open Alpha 단계인 만큼 지금 당장 메인 도구로 전환하기보다는, 무료 티어로 워크플로우를 실험해보는 것부터 시작하면 충분하다.