디자이너가 Figma에서 넘긴 파일이 개발자 손에서 달라지는 걸 막을 방법이 없었습니다. 간격이 조금 달라지고, 폰트가 미묘하게 틀려지고, 컴포넌트 구조가 바뀝니다. 디자이너가 "이거랑 달라요"라고 말하면 개발자는 "최대한 비슷하게 했어요"라고 답하죠. 이 대화가 매번 반복돼요. Paper Desktop은 그 핸드오프 자체를 없애려고 만든 캔버스예요.
이게 뭔데?
Paper는 HTML/CSS로 작동하는 디자인 캔버스예요. Figma처럼 생긴 무한 캔버스 위에서 자유롭게 디자인하는데, 모든 요소가 진짜 HTML 엘리먼트와 CSS 속성으로 렌더링돼요. 진짜 flexbox 레이아웃, 진짜 CSS 프로퍼티, 진짜 폰트 렌더링이에요.
왜 이게 중요하냐면요. Figma는 자체 렌더링 엔진으로 작동해요. 개발자가 디자인을 코드로 옮기려면 Figma 포맷을 해석해서 HTML로 번역해야 하잖아요. 그 과정에서 간격이 달라지고, 폰트가 틀려지고, 컴포넌트 구조가 바뀌어요. Paper는 캔버스 자체가 HTML/CSS이기 때문에, 내보낼 때 번역이 필요 없어요. 캔버스에서 보이는 것과 브라우저에서 렌더링되는 것이 같아요.
Paper의 창업자 Stephen Haney가 밝힌 비전은 명확해요 — "Nothing gets lost in translation." 디자인 파일과 코드 사이에서 번역 과정이 없으니, 아무것도 사라지지 않는다는 거예요.
Paper의 핵심 기능은 크게 네 가지예요:
1. HTML/CSS 네이티브 캔버스. Figma처럼 프레임, 텍스트, 이미지를 배치하지만, 내부적으로는 HTML과 CSS로 구성돼요. Copy as React나 Copy as Tailwind로 바로 코드를 가져갈 수 있어요.
2. MCP 서버로 AI 에이전트 연결. Paper Desktop 앱을 열면 MCP 서버가 자동으로 시작돼요. Cursor, Claude Code, Codex, GitHub Copilot, OpenCode 어디서든 연결해서 에이전트가 캔버스를 읽고 쓸 수 있어요.
3. 실제 데이터 연동. Notion, Spotify API, CMS, 내부 DB — 에이전트에게 "이 프레임에 실제 데이터 채워줘"라고 하면 돼요. 더미 텍스트로 디자인하고 나중에 실제 콘텐츠 넣었을 때 레이아웃이 깨지는 상황이 없어져요.
4. 셰이더 라이브러리. 메시 그래디언트, 리퀴드 메탈, 하프톤 패턴, 유리 효과 등 GPU 가속 비주얼 이펙트를 캔버스에 바로 적용할 수 있어요. 영상 내보내기도 가능하고요.
LLM이 DOM을 잘 안다는 게 핵심
Paper가 HTML/CSS 기반인 이유는 단순히 코드 변환을 없애려는 게 아니에요. LLM은 DOM을 매우 잘 이해해요. Figma의 독자 포맷을 읽는 것보다, HTML 트리를 읽는 게 훨씬 정확하고 자연스럽거든요. 에이전트가 디자인을 읽을 때 Figma 포맷을 해석하는 게 아니라 DOM을 읽어요.
뭐가 달라지는 건데?
92%의 디자이너와 91%의 개발자가 핸드오프 과정에 개선이 필요하다고 말해요. 지금까지 이 문제를 풀려는 시도는 많았지만, 근본적인 원인 — 디자인 툴과 코드가 다른 언어를 쓴다는 것 — 을 건드리지는 못했어요.
| 기존 (Figma → 개발) | Paper Desktop | |
|---|---|---|
| 캔버스 엔진 | 독자 렌더링 엔진 (Figma 포맷) | HTML/CSS (웹 표준) |
| 코드 변환 | Figma → HTML 번역 필요 (핸드오프) | 번역 불필요, 캔버스 = 코드 |
| AI 에이전트 정확도 | 독자 포맷 해석 필요 | DOM 직접 읽기 (LLM 친화적) |
| 디자인↔코드 동기화 | 일방향 (디자인→코드) or 수동 업데이트 | 양방향 실시간 동기화 |
| 실제 데이터 | 더미 텍스트로 디자인 후 나중에 교체 | API/DB에서 실제 데이터 바로 연결 |
| 버전 관리 | Figma 자체 히스토리 | Git 브랜치/머지 |
비슷한 접근을 하는 도구들도 있어요. 어떻게 다른지 비교해볼게요.
| 도구 | 초점 | 강점 | 약점 |
|---|---|---|---|
| Paper | HTML/CSS 캔버스 + MCP | 캔버스=코드, 에이전트 양방향 연결, 셰이더 | 오픈 알파, 컴포넌트 시스템 미완성 |
| Figma + MCP | 디자인→코드 + Code to Canvas | 성숙한 생태계, 대규모 팀 지원 | 독자 포맷 → 번역 필요 |
| MagicPath | AI 디자인 생성 → 코드 | 텍스트/이미지로 UI 생성, Figma 임포트 | 캔버스가 코드 네이티브가 아님 |
| Subframe | 캔버스 → React 코드 | 프로덕션급 React 코드, CLI 동기화 | React 전용, 범용성 부족 |
Paper의 근본적 차별점은 "캔버스 자체가 웹 표준"이라는 점이에요. Figma가 최근 Code to Canvas, Figma Make 같은 AI 기능을 추가하고 있지만, 여전히 독자 포맷 위에 번역 레이어를 쌓는 방식이에요. Paper는 번역 레이어 자체가 없어요. 디자이너가 캔버스에서 카피를 수정하면 에이전트가 코드베이스로 돌려보내고, 개발자가 코드를 수정하면 캔버스에 반영돼요. 소스 오브 트루스가 하나예요.
반응형 레이아웃, 스타일 변형, 일관성 체크 같은 반복 작업은 에이전트한테 넘겨요. 디자이너는 에이전트가 판단할 수 없는 결정에만 집중하면 돼요. Paper가 이걸 "anti-slop"이라고 부르는데, 에이전트에게 보일러플레이트를 맡기고 사람은 창의적 결정에만 집중하자는 철학이에요.
아직 알아둘 것
Paper는 현재 오픈 알파 단계예요. 컴포넌트 시스템(슬롯, 프롭스 지원)은 아직 개발 중이고, CSS Grid도 계획 단계예요. Figma만큼 성숙한 도구는 아니에요. 하지만 거의 매일 프로덕션에 배포하고 있고, Tailwind 팀과 네이티브 통합을 준비 중이에요. "디자인→코드 왕복"이 가능한 새로운 워크플로우를 미리 경험해보고 싶은 분들에게 추천해요.
핵심만 정리: 시작하는 법
- Paper Desktop 다운로드
download.paper.design에서 데스크톱 앱을 설치해요. 무료 오픈 알파라 신용카드 필요 없어요. 웹 버전(app.paper.design)도 있지만, MCP 서버는 데스크톱 앱에서만 작동해요. - AI 에이전트 연결
Claude Code 사용자라면 터미널에서 한 줄이면 돼요.claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user
Cursor 사용자는 Paper 문서 페이지에서 원클릭 설치 버튼을 누르면 끝이에요. - 첫 디자인 만들기
Paper에서 파일을 열고, 에이전트에게 "Paper MCP 서버를 사용해서 랜딩 페이지 히어로 섹션을 디자인해줘"라고 요청해요. 에이전트가 캔버스에 직접 HTML 요소를 생성해요. - 캔버스에서 직접 편집
프레임, 텍스트, 색상, 레이아웃을 Figma처럼 시각적으로 수정해요. flexbox 컨테이너를 만들고 gap을 조절하고, 셰이더를 적용할 수도 있어요. 수정사항은 에이전트가 코드에 반영할 수 있어요. - 코드로 내보내기
에이전트에게 "선택한 디자인을 React + Tailwind로 만들어줘"라고 요청하면, Paper MCP가 디자인을 읽어서 코드를 생성해요. Git으로 커밋하고 브랜치 치고 머지하면 끝이에요.
