Paper, 이것까지 된다고? AI 시대 Figma의 대항마로 주목받는 이유

Paper는 데이터와 구현 흐름까지 연결해 설계할 수 있도록 만든 실무형 디자인 도구입니다. 디자인 시안에서 끝나는 것이 아니라, 실제 서비스에 반영되는 구조까지 고려하는 데 초점을 둔 것이 특징입니다.

기존 디자인 툴이 화면 중심으로 작업을 진행했다면, Paper는 데이터 구조와 컴포넌트 흐름을 함께 다루며 개발 단계까지 자연스럽게 이어지도록 설계되었습니다. 이 덕분에 기획자, 디자이너, 개발자 간 협업 과정에서 발생하는 해석 차이를 줄이는 데 도움이 됩니다.

이 글에서는 Paper가 어떤 구조로 동작하는지, 기존 디자인 툴과 무엇이 다른지, 그리고 실제 프로젝트에서 어떻게 활용할 수 있는지를 중심으로 정리해보았습니다.

Paper란?

Paper는 디자인, 공유, 배포를 하나의 흐름으로 연결하는 현대적인 디자인 툴입니다.

웹 기술 기반의 캔버스를 바탕으로 실제 레이아웃에 가깝게 작업할 수 있으며, MCP 서버를 통해 AI 에이전트와 연결해 디자인 파일을 읽고 수정하는 것도 가능합니다.

시안을 만드는 것에서 그치지 않고 실제 웹 코드로 바로 이어지거나 실제 콘텐츠와 연결된 화면을 설계할 수 있어, 기존 디자인 툴과는 다른 방향성을 제시합니다. 

현재는 오픈 알파 단계로 운영되고 있으며, 코드와 디자인의 간격을 줄이고 싶은 디자이너와 개발자에게 주목받고 있습니다.

디자인 툴의 강자 Figma를 위협하는 

신생 디자인 툴, ‘Paper’

개발을 넘어 디자인 영역까지 AI와 함께 작업하는 흐름이 확산되면서, AI와 자연스럽게 연동되는 디자인 툴에 대한 관심도 빠르게 커지고 있습니다. 

이런 변화 속에서 UX/UI 디자인 툴의 강자인 Figma를 위협하는 신생 디자인 툴이 있습니다. 바로 ‘Paper’입니다. 

기존 디자인 툴과는 다른 작업 구조와 실무 중심의 강점을 앞세운 Paper는 AI 시대 디자인 툴의 다크호스로 주목받고 있는데요. 지금부터 어떤 점이 다른지 함께 살펴보겠습니다.

1. AI 중심의 작업 방식을 지향하는 디자인 툴

Paper는 처음부터 AI 에이전트와 함께 작업하는 방식을 핵심 방향으로 삼고 있다는 점에서 기존 디자인 툴과 차이를 보입니다.

Cursor나 Claude Code, Antigravity 같은 도구와 연결해 디자인 파일을 읽고 수정하는 흐름을 지원하며, 반복적인 작업을 더 빠르게 처리할 수 있도록 설계되어 있습니다. 이 구조 덕분에 사용자는 단순 반복 작업보다 판단과 방향 설정에 더 집중할 수 있습니다. 

레이아웃 수정, 스타일 정리, 반응형 보정 같은 작업을 AI와 함께 진행할 수 있어 전체 작업 효율도 높아집니다.

2. 시안 제작을 넘어 코드까지 연결하는 디자인 툴

Paper에서 만든 결과물은 단순히 시안으로 끝나지 않습니다. 웹 표준 기반의 연결된 작업 환경을 지향하며, 디자인과 코드가 자연스럽게 이어질 수 있는 구조를 강조합니다. 

특히 HTML/CSS 기반 캔버스를 바탕으로 화면을 구성할 수 있어, 디자인 결과물을 실제 구현 단계와 더 가깝게 연결할 수 있다는 강점을 가지고 있습니다.

또한 실제 레이아웃 렌더링이나 React 코드 복사 같은 기능을 통해 보기 좋은 화면을 만드는 데서 그치지 않고, 프론트엔드 작업으로 자연스럽게 이어지는 흐름까지 고려하고 있습니다. 이 때문에 Paper는 시안 제작을 넘어 개발 단계까지 연결되는 디자인 툴로 주목받고 있습니다.

3. 실제 데이터 기반의 실무 흐름에 강한 디자인 툴

Paper가 주목받는 또 다른 이유는 실제 데이터와 실무 흐름을 중요하게 다룬다는 점입니다. 

더미 텍스트와 샘플 이미지로 목업을 만드는 수준이 아니라, 실제 콘텐츠와 작업 맥락을 반영한 상태에서 디자인을 검토하고 수정하는 흐름을 지향합니다. 

API나 Google Sheets 같은 외부 데이터 소스와 연결해 실제 데이터를 캔버스에 바로 불러올 수 있다는 점도 차별점입니다. 

이런 이유로 Paper는 단순한 디자인 툴을 넘어, 실제 데이터와 협업, 구현 흐름까지 고려한 실무형 디자인 툴로 평가받으며, AI 시대, Figma를 위협하는 차세대 디자인 툴로 주목받고 있습니다.

AI로 활용하는 Paper 사용법

Paper 설치 방법

* 이미치 출처: Paper 홈페이지

Paper를 사용하기 위해서는 먼저 Paper 데스크탑 앱을 다운받아야 합니다. Paper 홈페이지에서 Paper를 다운받아 설치합니다.

* 이미치 출처: Paper 홈페이지

Paper를 사용하려면 먼저 로그인이 필요합니다. 구글 계정으로 간편하게 로그인하거나, 이메일로 직접 회원가입할 수 있습니다.

회원가입 후 로그인을 하면 Paper의 작업창이 나오며, 디자인 작업을 할 수 있습니다.

Paper MCP를 Claude Code에 연동하는 방법

Claude Code에 Paper MCP를 연동하기 위해 아래 코드를 입력합니다.

Claude Code 용 Paper MCP 코드

Claude Code에 Paper를 HTTP 방식의 MCP 서버로 등록할지 묻는 화면이 나타납니다. Yes를 선택해 등록을 진행합니다.

Paper가 MCP 서버로 성공적으로 등록되었다는 메시지가 표시됩니다. 연동을 정상적으로 적용하려면 Claude Code를 재시작합니다.

Claude Code에서 /mcp를 입력하면 현재 연결된 MCP 서버 목록을 확인할 수 있습니다. 목록에 Paper가 표시되어 있다면 연동이 정상적으로 완료된 것입니다.

Paper MCP를 안티그래비티에 연동하는 방법

안티그래비티에 Paper MCP를 연동하려면 MCP Servers에 Paper를 직접 등록해야 합니다. 

우측 상단의 "..." 버튼을 클릭한 뒤 MCP Servers를 선택해 MCP Store를 열어줍니다.

MCP Store가 열리면 우측 상단의 Manage MCP Servers를 클릭하고, View raw config를 눌러 설정 파일을 엽니다. 

아래 코드를 입력한 뒤 Ctrl+S를 눌러 저장합니다.

안티그래비티 용 Paper MCP 코드

저장이 완료되면 상단 탭에서 ‘mcp_config.json’이 저장된 것을 확인할 수 있습니다. 이후 안티그래비티를 종료했다가 다시 실행하면 Paper MCP 서버가 등록됩니다. 

간혹 저장 위치가 올바르게 설정되지 않아 연동이 되지 않는 경우가 있는데, 그럴 때는 동일한 코드를 다시 입력하고 저장한 뒤 재시작합니다.

등록이 완료되면 Manage MCP Servers 화면에서 Paper가 목록에 나타난 것을 확인할 수 있습니다.

Claude code X Paper MCP,

병원 문의/상담 페이지 제작하기

Paper가 AI 시대 디자인 툴로 주목받는 이유 중 하나는 뛰어난 MCP 기능입니다. 24가지 도구를 읽고 쓰는 범위까지 모두 지원하고 있어, AI를 활용해 웹사이트를 빠르게 구축할 수 있습니다.

병원 홈페이지의 

디자인 시스템 페이지 생성하기

Claude Code에 연동된 Paper MCP를 사용해 병원 홈페이지를 제작해 보았습니다. 병원 홈페이지를 본격적으로 제작하기 전에 디자인 시스템 페이지 작성을 요청했습니다.

▶ 홈페이지 디자인 일관성을 높여주는디자인 시스템이 궁금하다면, 링크를 클릭하세요!

병원 홈페이지 디자인 시스템 생성 프롬프트

단 1번의 프롬프트로 수준급의 디자인 시스템 페이지가 완성되었습니다. Claude Code에서 Paper MCP를 통해 생성한 결과물은 Paper 작업창에 자동으로 연동되어 바로 확인하고 수정할 수 있습니다.

병원 문의/상담 페이지 생성하기

완성된 디자인 시스템을 바탕으로 병원 문의/상담 페이지를 생성했습니다. 사용한 프롬프트는 아래와 같습니다.

병원 문의 상담 페이지 생성 프롬프트

병원 문의/상담 페이지를 

홈페이지로 구현하기

생성된 문의/상담 페이지가 실제 홈페이지에서 제대로 구현되는지 확인하기 위해 아래 프롬프트로 작업을 요청했습니다.

Next JS 기반 홈페이지 구현 프롬프트

Paper 작업창에 생성된 시안 그대로 홈페이지가 구현되었습니다. 

AI를 사용하기 전에는 레이아웃을 잡고 위젯을 추가하고 테스트하는 데만 상당한 시간이 걸렸지만, 각 플랫폼 로그인 연동부터 지도, 예약 시스템 연동까지 까다로운 작업도 Paper MCP와 AI를 활용하니 1시간도 채 되지 않아 완료되었습니다.

Paper 요금제 안내

* Paper 요금제, 한 눈에 보세요!

Paper 사용 시 주의사항 3가지

1. 아직 오픈 알파 단계입니다.

Paper는 공식 로드맵에서 현재 오픈 알파 단계임을 밝히고 있습니다. 기능이 계속 추가·변경되고 있는 만큼, 완전히 안정화된 완성형 툴보다는 빠르게 개선 중인 단계로 보는 것이 맞습니다. 실무에 바로 전면 도입하기보다는 먼저 테스트하면서 적합성을 확인하는 것이 좋습니다.

2. MCP를 쓰려면 Desktop 앱과 열린 파일이 전제됩니다

Paper MCP는 웹에서 바로 연결되는 방식이 아니라, Paper Desktop 앱이 설치되어 있어야 하고 파일이 열려 있어야 백그라운드에서 MCP 서버가 시작되는 구조입니다. Desktop 앱을 켜지 않았거나 작업 파일이 제대로 열려 있지 않으면 Claude Code나 Cursor에서 연동이 되지 않을 수 있습니다.

3. 복잡한 구조는 한 번에 처리하지 않는 것이 좋습니다

Paper 사용시 디자인을 코드로 옮길 때 구조가 잘 잡힌 작은 단위부터 시작하는 것이 좋습니다. 큰 화면이나 깊게 중첩된 복잡한 디자인은 에이전트가 더 쉽게 틀릴 수 있어, 작은 파트로 나눠 단계적으로 작업하는 방식이 권장됩니다.

AI를 활용한 홈페이지 생성부터 업무 자동화까지 

Lovable 사용법 총정리, 5분 만에 웹사이트 만들기

구글 오팔(Google Opal) 사용법부터 자동화 한계까지 한 번에 정리했습니다

구글 AI 스튜디오(Google AI Studio) 사용법: 전문가들이 쓰는 방법은 따로 있습니다

AI 에이전트 시대, 

AI를 활용을 잘하는 IT 전문가를 찾으신다면

대한민국 최초, 최대 IT 프리랜서 매칭 플랫폼 이랜서

이랜서는 27년간 축적해온 노하우와 데이터베이스를 바탕으로, 프로젝트에 가장 적합한 IT 프리랜서를 연결하는 대한민국 대표 IT 프리랜서 매칭 플랫폼입니다. 

삼성, 현대, 롯데, 카카오 등 주요 대기업은 물론 중견기업, 중소기업, 스타트업까지 약 8만 건 이상의 프로젝트에 IT 프리랜서를 매칭하며, 프로젝트 재의뢰율 98%의 신뢰를 쌓고 있습니다.

• AI, 데이터, 개발, 디자인 등 최신 AI 프로젝트 경험을 갖춘 전문가 매칭
• 프로젝트 등록과 동시에 41만 명 규모의 IT 프리랜서 네트워크에 프로젝트 공개
• 27년의 데이터베이스를 바탕으로 가장 적합한 인재를 24시간 내 연결
• 프로젝트 특성과 AI 활용 역량을 함께 고려한 정밀 매칭

AI 에이전트 시대, 중요한 것은 AI를 제대로 다룰 줄 아는 전문가와 함께하느냐입니다. 프로젝트에 적합한 AI 전문 프리랜서를 24시간 내 매칭해 드립니다. 

▶ AI 에이전트 기반 개발 전문가 매칭받기