Paper: 요즘 다들 말하는 새로운 AI 디자인 앱

하이라이트

• Paper는 Figma와 유사한 UI를 가진 AI 기반 디자인 앱으로, Claude code 및 Cursor와 완벽하게 연동됩니다.

• MCP 서버 설정을 통해 터미널이나 에디터에서 프롬프트만으로 전문적인 수준의 디자인 시스템과 랜딩 페이지를 생성할 수 있습니다.

• 생성된 디자인은 단순한 이미지가 아니라 Tailwind CSS나 React 코드로 즉시 변환하여 실제 프로젝트에 복사 및 붙여넣기가 가능합니다.

• 세계 최초의 통합 컬러 피커를 통해 디자인 툴과 실제 웹 브라우저 간의 색상 불일치 문제를 해결했습니다.

• Nano Banana Pro 모델을 활용한 고성능 이미지 생성 기능과 이미지에 특수 효과를 입히는 'S' 키 기능을 제공합니다.

• 기존 코드베이스를 분석하여 디자인 시스템을 자동으로 구축하고, 디자인 수정 사항을 다시 코드로 반영하는 기능을 지원합니다.

타임라인

1. 00:00 - 01:00

   Paper 앱 소개 및 초기 설정 방법

   Paper는 기본적으로 Figma의 기능을 갖추고 있으면서도 Claude code나 Cursor와 같은 AI 도구에 최적화된 새로운 디자인 앱입니다. 사용자는 paper.design 사이트에서 데스크톱 앱을 다운로드한 후, MCP 서버를 설치하여 자신의 개발 환경과 연결해야 합니다. MCP 서버를 'user' 스코프로 설치하면 컴퓨터 내의 모든 프로젝트에서 Paper의 기능을 자유롭게 호출할 수 있는 권한이 생깁니다. 이 과정은 로컬 전송 방식을 사용하여 Paper 데스크톱 앱과 실시간으로 연동되는 구조를 가집니다. Vercel이나 Dub 같은 유명 기업들이 이미 도입하여 사용 중일 만큼 신뢰도가 높은 도구임을 강조합니다.

2. 01:00 - 02:18

   병렬 프롬프트를 활용한 다중 디자인 생성 데모

   발표자는 터미널에서 Claude code를 사용하여 지출 관리 앱, 금융 대시보드, 소셜 앱 디자인 시스템 등 여러 작업을 동시에 실행합니다. Tmux 스타일의 Ghosty 터미널을 활용해 여러 창에서 병렬로 프롬프트를 입력하며 AI가 디자인을 구축하는 과정을 시연합니다. Claude code가 Paper 앱 내에 직접 디자인 브리프와 팔레트를 추가하며 화면을 구성하는 모습이 실시간으로 나타납니다. 결과물로 나온 지출 입력 앱은 전문 디자이너가 만든 것처럼 탄탄한 완성도를 보여주며 사용자를 놀라게 합니다. 사용자는 복잡한 수작업 없이 오직 텍스트 명령만으로 고품질의 시각적 결과물을 얻을 수 있습니다.

3. 02:18 - 03:32

   Figma와 유사한 편집 환경 및 디자인 시스템 확인

   Paper의 사용자 인터페이스는 Figma와 매우 흡사하여 기존 디자이너들이 별도의 학습 없이도 즉시 적응하여 사용할 수 있습니다. AI가 생성한 디자인을 직접 수동으로 수정하거나, 다시 AI에게 특정 섹션을 삭제하고 변경해달라고 요청하는 상호작용이 가능합니다. 특히 생성된 디자인 시스템은 수천 달러의 가치가 느껴질 정도로 전문적이며 모든 컴포넌트는 개별적으로 수정 가능한 상태로 유지됩니다. 단순한 그림이 아니라 실제 레이어와 속성이 살아있는 디자인 데이터라는 점이 가장 큰 장점입니다. 이러한 워크플로우를 통해 기획부터 고도화된 디자인 완성까지 걸리는 시간을 획기적으로 단축할 수 있습니다.

4. 03:32 - 06:22

   디자인을 실제 React 및 Tailwind 코드로 변환

   생성된 컴포넌트를 우클릭하여 'Tailwind로 복사' 또는 'React CSS로 복사' 기능을 선택하면 즉시 실제 코드를 얻을 수 있습니다. 복사한 코드를 Cursor 에디터에 붙여넣기만 하면 브라우저에서 작동하는 실제 웹 페이지가 완성되는 놀라운 과정을 보여줍니다. Claude code가 직접 디자인을 분석하여 HTML 버전의 페이지를 빌드해주기도 하며, 이는 반응형 디자인의 기초가 됩니다. 발표자는 로컬호스트에서 실행 중인 실제 React 앱에 이 컴포넌트들을 적용하여 완벽하게 작동하는 모습을 직접 확인시켜 줍니다. 이는 디자인과 개발 사이의 장벽을 허무는 핵심적인 기능으로 평가받습니다.

5. 06:22 - 08:12

   AI 이미지 생성 및 특수 효과 기능

   Paper 내부에서 Command + I 단축키를 사용하여 Nano Banana Pro 모델 기반의 AI 이미지를 생성할 수 있습니다. 발표자는 'Inbox Zero'라는 이메일 서비스를 위한 광고 이미지를 생성하며, 로고와 텍스트가 조화롭게 배치된 고퀄리티의 결과물을 얻습니다. 생성된 이미지 위에 'S' 키를 누르면 물 효과나 액체 금속 효과 같은 독특한 비주얼 필터를 실시간으로 적용할 수 있습니다. 이러한 기능들은 랜딩 페이지에 들어갈 그래픽 자산을 별도의 외부 툴 없이 Paper 안에서 모두 해결할 수 있게 해줍니다. 한 번의 시도만으로도 전문 디자이너의 작업물에 버금가는 홍보용 이미지를 만들어내는 성능을 자랑합니다.

6. 08:12 - 10:28

   컬러 피커 혁신 및 코드베이스 분석 기능

   Paper는 세계 최초로 통합 컬러 피커를 도입하여 디자인 툴의 헥스 코드와 웹 브라우저의 실제 색상이 다르게 보이는 고질적인 문제를 해결했습니다. 또한 기존 프로젝트의 코드베이스를 분석하여 디자인 시스템을 추출하고, 반대로 디자인 수정 사항을 코드로 피드백하는 양방향 워크플로우를 지원합니다. 비록 시연 중 Pro 버전의 사용 제한에 걸려 상세 구현은 생략되었으나, 해당 기능이 가진 잠재적 가치에 대해 높게 평가합니다. 마지막으로 PNG나 JPEG로 결과물을 내보내는 기능과 실제 업무에서 스크린샷 편집용으로 활용하는 팁을 공유하며 영상을 마무리합니다. 사용자는 이 도구가 실제 코딩 방식에 큰 변화를 줄 것이라 확신하며 유료 버전 구독 의사를 밝힙니다.