디자인 툴을 찾고 있다면? Paper is Hype Boy
📺 원본 영상: 디자인 툴을 찾고 있다면? Paper is Hype Boy 🎙️ 채널: 코드팩토리 📅 정리 일자: 2026-03-24 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(차트, 코드, 슬라이드 등)는 포함되지 않을 수 있습니다.
개요
AI 기반 디자인 도구의 춘추전국시대가 열렸다. Figma의 아성에 도전하는 오픈소스·AI 네이티브 툴들이 쏟아지는 가운데, 코드팩토리 채널에서는 Paper.design이라는 새로운 디자인 툴을 소개한다. 이 영상은 Paper.design을 Claude의 MCP(Model Context Protocol)와 연동하여 다크 테마 디자인 시스템을 생성하고, 이를 Next.js 코드로 변환하는 전 과정을 실습 형태로 보여준다. 영상 첫머리에 제시되는 결과물 미리보기—디자인 시스템 생성부터 시안 완성, 그리고 실제 웹사이트 구현까지—는 이 워크플로가 얼마나 강력한지를 단적으로 보여주는 일종의 훅(hook) 역할을 한다.
00:01 - Color Palette, Typography, Component, Spacing, Effect가 포함된 완성된 디자인 시스템 전체 화면
00:07 - 디자인 시스템을 그대로 반영하여 생성된 UI 시안 화면
00:10 - 시안을 기반으로 구현된 실제 웹사이트 화면
AI 디자인 툴 생태계의 지각변동
AI가 본격적으로 개발·디자인 워크플로에 편입되면서 Figma의 독주 체제에 균열이 생기기 시작했다. 코드팩토리는 이 흐름을 “다들 피그마를 잡아먹지 못해서 아주 난리”라고 표현하는데, 이는 단순한 과장이 아니다. AI와 함께하는 코딩이 일반화되면서 디자인 소스 코드의 가치 자체가 크게 하락했고, 그 결과 Figma의 UI와 기능을 그대로 모방한 오픈소스 프로젝트들이 우후죽순 등장하게 되었다. 이 흐름은 사용자 입장에서는 반가운 일이다. 상용 도구에 묶이지 않고도 Figma에 준하는 디자인 경험을 무료로 또는 저렴하게 누릴 수 있는 가능성이 열렸기 때문이다.
이 생태계를 이해하려면 현재 주요 플레이어들의 포지션을 먼저 파악해야 한다. Stitch는 완전한 AI 네이티브를 지향하는 디자인 툴로, 사용자가 직접 편집하는 전통적인 캔버스 UI 없이 AI가 모든 작업을 처리하는 방식을 택하고 있다. Stitch 2.0 업데이트를 통해 AI 기반 디자인의 체계성을 한층 끌어올렸다는 평가를 받는다. 반면 Penpot은 Figma의 인터페이스를 거의 그대로 복제한 오픈소스 툴로, 여기에 MCP 서버를 붙인 형태라고 볼 수 있다. 최근 업데이트가 이루어지긴 했지만, 아직 완성도 면에서 아쉬운 부분이 남아 있다는 것이 코드팩토리의 평가다. Paper.design은 바로 이 두 툴 사이의 공백을 정확히 노리는 포지션으로 등장했다.
Paper.design이란?
Paper.design은 Penpot보다 완성도가 높은 Figma 대안 디자인 툴로, MCP 연동을 통해 Claude와 긴밀하게 협업할 수 있다는 점이 가장 큰 차별점이다. 코드팩토리는 “해외에서도 굉장히 많이 다룬 내용”이라며 이 툴이 이미 글로벌 개발자 커뮤니티의 주목을 받고 있음을 시사한다.
가격 측면에서 Paper.design은 무료 티어를 제공하는데, 무료 플랜에서도 일주일에 100회 MCP 호출이 가능하다. 간단한 디자인 수정이나 변경 작업에는 이 정도 호출 횟수로 충분하다는 것이 코드팩토리의 견해다. 이미지 사이즈는 25MB로 제한되어 있으며, 유료 플랜으로 업그레이드하면 제한이 완화된다. macOS 앱으로 다운로드가 가능하며, 공식 사이트는 paper.design이다. 또한 로드맵을 공개적으로 공유하고 있으며 최근 메이저 릴리스(major release)가 이루어질 정도로 활발하게 개발이 진행 중이라는 점도 장기적 신뢰도를 높이는 중요한 요소다.
💡 [영상 참조] 강연자는 이 시점에서 Paper.design의 앱 UI와 가격 플랜 화면을 직접 보여주며 설명합니다. 📺 원본 영상에서 확인하세요.
Claude MCP 연동 방법
Paper.design을 Claude와 연결하는 방법은 놀랍도록 간단하다. Paper.design 앱 내부의 설정에서 MCP 메뉴로 이동하면 Claude Desktop용과 Claude Code용 MCP 설정 정보가 바로 제공되며, 이를 복사해서 Claude의 설정에 붙여넣기만 하면 등록이 완료된다.
02:09 - Paper.design 앱 실행 및 데모 프로젝트 캔버스 UI
연동 확인은 Claude 내에서 /mcp 명령어를 입력했을 때 Paper가 목록에 표시되는지 여부로 판단할 수 있다. 또한 Claude 실행 시 Dangerous Permissions 모드를 활성화해야 MCP 도구들이 별도 승인 없이 원활하게 동작한다는 점을 주의해야 한다. 이 설정 없이는 MCP 호출마다 사용자 승인을 요구하게 되어 자동화된 워크플로가 번거로워질 수 있다.
💡 [영상 참조] 강연자는 이 시점에서 Paper.design 앱 내 MCP 설정 화면과 Claude 설정에 붙여넣는 과정을 실시간으로 보여줍니다. 📺 원본 영상에서 확인하세요.
실습 1 - 다크 테마 디자인 시스템 생성
MCP 연동이 완료되면 Claude에게 자연어로 디자인 작업을 요청하는 것만으로 Paper.design 캔버스에 직접 결과물이 생성된다. 코드팩토리가 입력한 프롬프트는 단 한 문장이었다.
“다크 테마로 디자인 시스템 만들어줘, Paper MCP를 사용해봐”
이 한 문장의 요청만으로 Claude는 Paper MCP를 활용하여 세일즈 대시보드(Sales Dashboard) 전용 다크 테마 디자인 시스템을 즉시 구성하기 시작했다. 파일명은 “Welcome to Paper”, 페이지명은 “Sales Dashboard”로 자동 지정되었다. 결과물은 단순한 색상 팔레트 수준이 아니었다. Color Palette, Typography, Component, Spacing, Effect까지 체계적으로 갖춘 완전한 디자인 시스템이 만들어진 것이다. 코드팩토리는 “진짜 한마디만 했는데 진짜 체계적인 디자인 시스템이 나왔다”고 감탄하며, 디자인이 생성되는 과정의 애니메이션도 페이드 인(fade-in) 방식으로 시각적으로 잘 구현되어 있어 사용 경험 자체도 우수하다고 덧붙였다. 전문 디자이너 기준에서는 부족한 점이 있을 수 있으나, 그 경우에도 추가 프롬프팅을 통해 얼마든지 보완할 수 있다는 점을 강조했다.
03:22 - Claude MCP를 통해 다크 테마 Sales Dashboard 디자인 시스템이 실시간으로 생성되는 화면
실습 2 - 디자인 시스템 기반 대시보드 페이지 생성
디자인 시스템이 완성된 후 코드팩토리가 가장 중점적으로 검증한 것은 디자인 시스템의 일관성 유지 여부였다. Claude가 새 페이지를 만들 때 앞서 정의한 색상, 컴포넌트, 스타일을 그대로 준수하는지가 핵심 검증 포인트였다. 이를 위해 다음과 같이 요청했다.
“방금 제작한 디자인 시스템을 기반으로 대시보드 페이지 한 개를 만들어줘, 데스크탑 버전으로 만들어줘”
결과는 기대를 충족했다. 생성된 대시보드 페이지는 이전에 기획했던 디자인 시스템의 색상, 둥글기(Border Radius), 테이블 스타일, 카드 컴포넌트까지 그대로 반영되었다. 테이블 내에 어떤 종류의 데이터가 들어가야 하는지를 스스로 판단하여 플레이스홀더를 구성해줄 정도로 완성도가 높았다. 코드팩토리는 이를 두고 “우리가 미리 기획해둔 디자인 시스템을 굉장히 잘 유지하면서 디자인을 뽑아준다”고 평가했다. 디자인 시스템과 실제 화면의 일관성이 보장된다는 것은, 특히 팀 단위로 작업할 때 브랜드 가이드라인 준수 여부를 걱정하지 않아도 된다는 의미이기도 하다.
04:14 - 디자인 시스템 기반으로 생성된 데스크탑 버전 Sales Dashboard 페이지 완성 화면
실습 3 - Next.js 코드 변환과 시안 일치 검증
디자인의 완성도를 넘어, 실무에서 가장 중요한 질문은 “이 디자인이 실제 코드로 얼마나 정확하게 구현되는가”이다. 코드팩토리는 이를 검증하기 위해 Next.js를 사용한 코드 변환을 요청했다.
“create-next-app CLI 사용해서 Next.js 부트스트래핑(bootstrapping)해주고, Sales Dashboard 데스크탑 시안을 홈페이지로 구현해줘”
Plain HTML/JavaScript로 요청하지 않고 굳이 Next.js를 선택한 이유는 명확하다. 단순 HTML 파일이라면 디자인 소스를 그대로 복사하면 되므로 검증의 의미가 없다. 반면 Next.js는 컴포넌트 기반 구조, 파일 시스템 라우팅, 테마 시스템 등 프레임워크 고유의 아키텍처를 갖고 있기 때문에, Claude가 이 구조 속에서 디자인 시스템의 색상 변수와 컴포넌트 분리를 올바르게 처리해줄 수 있는지를 실질적으로 검증할 수 있다.
결과는 예상을 상회했다. 생성된 Next.js 앱은 디자인 시안과 거의 동일한 화면을 렌더링했다. 시안의 레이아웃, 색상 테마, 컴포넌트 구조가 그대로 코드로 변환된 것이다. 코드팩토리는 이를 “MCP의 역할을 완전 정확하게 해주고 있다”고 평가하며, 디자인 시스템 정의부터 UI 기획, 그리고 프로덕션 코드 생성까지 이어지는 전체 워크플로가 실질적으로 동작한다는 사실을 확인했다.
05:39 - Paper.design 시안과 Next.js 구현 결과를 나란히 비교한 화면
Paper.design의 전략적 포지셔닝
코드팩토리가 내린 Paper.design의 포지션 분석은 명쾌하다. 현재 AI 디자인 툴 시장의 주요 플레이어를 정리하면 다음과 같다.
| 도구 | 특징 | 단점 |
|---|---|---|
| Figma | 풍부한 생태계, 산업 표준 | 유료, AI 네이티브 아님 |
| Stitch | 완전한 AI 네이티브 | 사용자 직접 수정 불가 |
| Penpot | Figma UI 복제, MCP 지원 | 아직 완성도가 아쉬움 |
| Paper.design | 직접 수정 가능 UI + MCP AI 협업 | 신규 툴, 생태계 미성숙 |
Stitch는 AI가 모든 것을 처리하는 대신 사용자가 세밀하게 수정할 수 없고, Penpot은 익숙한 UI를 제공하지만 완성도 면에서 아쉬움이 있다. Paper.design은 이 두 가지 단점을 동시에 해소하는 접근을 택했다. 직접 수정이 가능한 친숙한 캔버스 UI를 유지하면서도, MCP를 통한 AI 협업으로 설계부터 코드 변환까지의 워크플로를 자동화한 것이다.
코드팩토리는 “이미 피그마를 쓰고 있다면 계속 쓰면 되지만, Stitch와 Penpot 양쪽에서 불만을 느끼던 사람이라면 Paper.design이 그 중간 포지션을 정확히 채워줄 것”이라고 정리한다. 무료 티어가 있는 만큼 직접 써보고 판단하는 것이 최선이며, 마음에 든다면 유료 전환도 고려해볼 만하다고 권장한다.
마무리 - Hype Boy가 된 이유
Paper.design이 “Hype Boy”라는 수식어를 얻은 것은 단순히 기능이 뛰어나서가 아니다. AI 코딩의 확산으로 디자인과 개발의 경계가 무너지는 바로 이 시점에, 디자인 시스템 생성 → 페이지 디자인 → 실제 코드 변환이라는 전체 워크플로를 하나의 도구 안에서 자연어 명령만으로 처리할 수 있다는 것이 핵심 가치다. 무료 티어로 시작할 수 있고, 로드맵이 공개된 액티브한 프로젝트라는 점은 장기적으로 투자할 가치가 있는 도구인지를 판단하는 데 유리한 조건이다. 지금 당장 paper.design에서 시작해볼 수 있다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | 디자인 툴을 찾고 있다면? Paper is Hype Boy |
| 채널 | 코드팩토리 |
| 리포트 작성 | 2026-03-24 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.