00:00:00안녕하세요, 오늘 영상은 Paper에 대한 내용입니다. Paper는 기본적으로 Figma와 같지만, Claude code나
00:00:05Cursor를 위한 도구라고 보시면 됩니다. 여기 예시가 있는데요. 현재 Paper 데스크톱 앱이 실행 중인데,
00:00:10지금 보시는 것처럼 Claude code를 통해 모든 것을 제어할 수 있습니다. 또한
00:00:14컴포넌트와 코드 사이를 매우 쉽게 전환할 수 있다는 점이 정말 좋습니다.
00:00:19Vercel, Z, Dub 같은 기업들이 이미 사용하고 있죠. 많은 멋진 제품들이 이 도구를 쓰고 있습니다.
00:00:24앱을 처음 시작하면 이런 모습입니다. 처음 접속하면 보게 될 데모 프로젝트고요.
00:00:28이 앱은 paper.design/downloads에서 다운로드할 수 있습니다.
00:00:31그다음 단계로 해야 할 일은 MCP 서버를 설치하는 것입니다.
00:00:35Cursor에 설치하고 싶다면 이 버튼을 클릭하면 되는데, 전 이미 완료했습니다.
00:00:40하지만 지금은 실제로 Claude code에서 한번 시도해 보겠습니다. 이걸 복사해 올게요.
00:00:43이렇게 하면 paper MCP 서버를 user 스코프로 추가하게 되는데, 이는 컴퓨터의
00:00:47모든 프로젝트에서 접근할 수 있다는 뜻입니다. 보통 MCP 서버를 추가할 때는
00:00:53해당 프로젝트로 스코프를 제한하곤 하죠. 여기서 전송 방식은 로컬입니다.
00:00:57이 설정이 Paper 데스크톱 앱과 연결될 것입니다. 이제 여기서 설치를 진행하고,
00:01:01설치가 완료되었으니 Claude를 열어보겠습니다. 저는 지금 Cmux에
00:01:06창을 네 개 열어두었습니다. Tmux 스타일로 실행되는 Ghosty라고 보시면 되는데,
00:01:11네 개의 창이 있으니 몇 가지 다른 데모를 진행해 보겠습니다.
00:01:17창이 여러 개인 편이 낫겠더라고요. 다음으로 할 일은 이 프롬프트를
00:01:19터미널로 복사하는 것입니다. Paper에서 지출 관리 앱을 만들어보죠.
00:01:22결과가 어떻게 나올지 한번 보겠습니다. 이런 식의 데모가 나올 텐데,
00:01:28실제로 어떻게 구현되는지 보시죠. 그동안 다른 작업들도 몇 개 더 돌려놓겠습니다.
00:01:33Paper로 나를 깜짝 놀라게 할 만한 멋진 데모 랜딩 페이지를 만들어달라고 하고,
00:01:36금융 앱을 위한 대시보드도 만들어보겠습니다. 그리고
00:01:40트위터 같은 소셜 앱의 디자인 시스템도 만들어달라고 하죠. 이 작업들을
00:01:44모두 병렬로 실행하겠습니다. 결과가 어떻게 나올지 저도 모르니 한번 지켜보죠.
00:01:48여기 이전에 실행했던 내역이 보이네요. 디자인 브리프와 팔레트가 있습니다.
00:01:53이건 Claude code가 내용을 고민하며 실행 중인 Paper 앱에 추가하는 과정입니다.
00:01:56맨 아래로 내려가 볼까요? 좋습니다, 끝났네요. 결과물이 어떤지 봅시다.
00:02:00화면을 축소해서 어디 있는지 찾아보죠. 아, 다른 앱들도
00:02:04현재 제작되고 있는 게 보이네요. 그리고 여기 정말 멋진 지출 입력 앱이 있습니다.
00:02:08디자인이 꽤 탄탄하네요. 사실 이전에 실행했을 때는
00:02:13약간 다른 형태의 앱이 나왔었습니다. 지금 다른 작업들도 병렬로
00:02:17모두 돌아가고 있는 걸 볼 수 있습니다. 이 Paper 앱의 멋진 점은
00:02:22기본적으로 Figma와 같다는 것입니다. Figma에서 익숙했던 모든 기능들을
00:02:25매우 비슷하게 사용할 수 있습니다. 여기서 제가 직접 수정을 할 수도 있고,
00:02:30다시 돌아가서 편집을 요청할 수도 있습니다. 업로드 섹션을 삭제하고 다른 걸 넣어달라고 해보죠.
00:02:34그렇게 하면 어떻게 되는지 봅시다. 다른 작업들은 여전히
00:02:39백그라운드에서 돌아가고 있습니다. 다시 여기로 돌아와 보면,
00:02:43업로드 섹션이 삭제될 것입니다. 랜딩 페이지도 꽤 괜찮아 보이네요.
00:02:53"의도를 담은 디자인, 한계 없는 창조". 참고로 여기 다른
00:02:56컴포넌트들도 완성되어 가고 있습니다. 디자인 시스템이 정말 멋지고 전문적입니다.
00:03:00이런 결과물을 얻으려면 전문 디자이너에게 수천 달러는 줘야 했을 것 같네요.
00:03:04정말 훌륭합니다. 당연히 Figma에서처럼 완전히 수정 가능하고요.
00:03:09이게 최종적인 랜딩 페이지의 모습입니다. 잠시 후에 이걸
00:03:12Tailwind를 사용한 React 코드로 옮겨보겠습니다. 여기 대시보드가 있고,
00:03:16다른 작업도 완료되었습니다. 너비 분할 기능도 조정이 되었네요.
00:03:20이렇게 전문적인 디자인이 완성되었습니다. 우리는 그저 프롬프트를 입력했을 뿐이죠.
00:03:24이 모든 과정에서 Claude code나 Cursor가 이미 제공하는
00:03:28기존 생태계의 스킬들을 활용할 수 있습니다. 원한다면 프런트엔드 디자인 스킬을 사용해
00:03:33이 모든 것을 설계할 수도 있습니다. 이제 이 디자인을 바탕으로 브라우저에서 볼 수 있는
00:03:36HTML 페이지를 요청해 보겠습니다. 어떻게 되는지 보죠. 다시 Paper로 돌아가서
00:03:42몇 가지 더 보여드리겠습니다. 여기 이 컴포넌트가 있는데,
00:03:46제가 할 수 있는 건 "Tailwind로 복사"나 "React CSS로 복사"입니다. 보통은
00:03:50그냥 복사해서 붙여넣으면 되지만, 잠시 후에 보시겠지만
00:03:54Claude code가 직접 이걸 불러와 줄 수도 있습니다. 그래서 브라우저에서 바로 열 수 있죠.
00:03:58와, 정말로 해냈네요. 이건 정말 놀랍습니다. 여기 버튼도 있고,
00:04:03정말 훌륭하네요. 페이지 검사를 해서
00:04:08실제로 어떤 코드가 나왔는지 확인해 봅시다. 여기 보시다시피
00:04:13단순히 HTML과 CSS만 사용했지만, React와
00:04:17Tailwind로도 만들 수 있습니다. Figma에서처럼 직접 결과물을 빌드할 수 있는 것이죠.
00:04:20완전히 똑같습니다. 여기 측면에서 설정을 바꿀 수도 있고,
00:04:24색상을 변경할 수도 있습니다. 기본적으로 Figma와 동일한 경험입니다. 하지만
00:04:29전 이 컴포넌트를 직접 구성해 보기도 했습니다. 일반 앱에
00:04:35복사해서 붙여넣었을 때 어떤 모습일지 궁금했거든요. 보시다시피
00:04:40정확히 제가 원했던 대로 구현되었습니다. 그리고 여기
00:04:44복사해서 붙여넣은 코드가 있습니다. 이건 배경 컴포넌트인데,
00:04:48방금 했던 과정을 다시 보여드릴게요. "Tailwind로 복사"를 클릭하고,
00:04:51Cursor로 가서 그대로 붙여넣기만 하면 됩니다. 그럼 이렇게 코드가 들어오죠.
00:04:55이제 실행 취소를 좀 하고요. 이건 제가 이전에
00:05:00지출 관리 앱을 위해 붙여넣었던 컴포넌트입니다. 상단 바, 금액 표시 등이 보이네요.
00:05:05이건 방금 했던 것과 거의 같지만 React와 Tailwind로 구성된 것입니다.
00:05:10우리 앱에 들어있는 실제 React 코드입니다. 이건 또 다른 버전인데요.
00:05:1420분 전에 프롬프트를 입력했던 결과물입니다. 이게 첫 번째 버전이고,
00:05:20이건 일반 HTML과 CSS로 작업한 다른 버전입니다.
00:05:26둘 다 결과가 아주 잘 나왔네요. Claude code에서 다른 앱들은
00:05:29어떻게 나왔는지 보고 싶습니다. 방금 설계한 모든 화면에 대해
00:05:34HTML 버전을 요청하겠습니다. 그리고 방금 제가 한 일은
00:05:40우클릭 후 "React CSS로 복사"를 하고 Cursor에 붙여넣은 것입니다. 이건 실제 앱입니다.
00:05:44로컬호스트 3001번에서 실행 중이고요. Inbox Zero의 일부인 데모 페이지에
00:05:49추가한 것인데, 보시다시피 완벽하게 작동합니다. 정말 좋네요.
00:05:53처음에는 반응형이 아니었지만, 그 점을 제외하면
00:05:58상당히 견고합니다. 반응형이 되려면 손을 좀 봐야겠지만, 적어도
00:06:04이 개념 자체는 정말 멋지다고 생각합니다. 이건 방금 불러온
00:06:09HTML 버전입니다. 아까 우리가 요청했던 것이죠.
00:06:13이건 좀 더 반응형에 가깝네요. 여기서는 조금 깨지기 시작하지만,
00:06:18그래도 이전 버전보다는 낫습니다. 정말 멋지네요.
00:06:22이제 이미지 생성 기능도 보여드리고 싶습니다. Command + I를 눌러보죠.
00:06:26이미지 생성을 요청해 보겠습니다. 제가 작성한 프롬프트는
00:06:33AI 이메일 비서인 Inbox Zero를 위한 아름다운 광고를 만들어달라는 것입니다. 이 서비스는
00:06:36받은 편지함을 빠르게 정리해 줍니다. 여기 사용할 수 있는 다양한 모델들이 있는데, Nano Banana
00:06:41Pro를 써보죠. 우선 다양하게 한번 뽑아보겠습니다. 가능하길 바라고요.
00:06:46네, 네 개의 이미지를 만들기 시작했습니다. 그리고
00:06:50한 번 더 시도해 보고 싶네요. Nano Banana Pro로 하면 어떻게 될지 궁금하거든요.
00:06:54이미지 생성을 눌렀고, 곧 결과가 나올 것입니다.
00:06:59오, 광고 이미지들이 나오기 시작했네요. 보시다시피 꽤 괜찮습니다.
00:07:05물론 수정이 더 필요하겠지만, 첫 번째 시도치고는
00:07:10정말 멋지네요. 이 'Inbox Zero' 이미지를 보시죠. 이보다 못한 디자인을
00:07:14내놓는 디자이너들도 있을 정도니까요. 그리고 이 네 개 중에서 전
00:07:19이게 가장 마음에 드네요. 한 번에 나온 결과라는 점을 생각하면
00:07:25앞으로 훨씬 더 많이 발전시킬 수 있을 것입니다. Nano Banana Pro 결과도 보죠.
00:07:29이게 아마 가장 인상적일 것 같습니다. "평온함으로 향하는 지름길, AI 이메일 비서".
00:07:35솔직히 한 번에 뽑아낸 그래픽치고는 정말 훌륭합니다. 흥미로운 건
00:07:39AI가 로고를 알고 있는 것 같다는 점입니다. Inbox Zero의 로고를 학습한 건지,
00:07:43아니면 우리 로고 텍스트와 우연히 비슷하게 나온 건지 모르겠네요.
00:07:47마무리하기 전에 두 가지만 더 보여드리겠습니다. 이 이미지를 클릭하고
00:07:51S를 누르면 다양한 효과를 줄 수 있습니다. 여기 보시면
00:07:55이미지에 이런 물 효과가 적용되죠. S를 다시 누르면 액체 금속 효과가 나타납니다.
00:08:00이게 어떻게 작동하는지, 우리 이미지와 관련이 있는지는 잘 모르겠지만
00:08:04이런 멋진 효과들을 만들 수 있다는 건 확실합니다. 랜딩 페이지에 바로 사용할 수도 있죠.
00:08:09우리가 만든 이미지의 또 다른 버전도 있고요. 그리고 한 가지 더 좋은 점은
00:08:13색상이 일관되고 정확하다는 것입니다. Paper는 세계 최초의
00:08:18통합 컬러 피커를 갖추고 있어 색상 작업이 매우 쉽습니다.
00:08:21모르는 분들을 위해 설명하자면, Figma에서의 색상과 실제 웹사이트에서의 색상이
00:08:24일대일로 매칭되지 않아 짜증 나는 경우가 많습니다. 저희 웹사이트의 파란색도 그랬죠.
00:08:27Figma에서는 한 가지로 보이는데 웹사이트에서는 다르게 보였습니다.
00:08:33분명히 같은 헥스 코드를 사용했는데도 말이죠. 그래서
00:08:37저희처럼 이런 문제를 겪어본 분들에게는 정말 반가운 기능일 것입니다.
00:08:41마지막으로 하나 더 보여드리고 싶은 것은 기존 코드베이스를 바탕으로
00:08:45Paper에서 디자인 시스템을 만드는 기능입니다. 코드베이스를 분석하기 시작했네요.
00:08:48이건 일반적인 Claude code 작업입니다. 폰트 정보를 가져왔네요.
00:08:52아, 그런데 지금 문제가 생겼습니다. 이번 주 Paper Pro의
00:08:56MCP 도구 사용 제한에 걸린 것 같네요. 그래서 실제 결과까지는 보여드리지 못할 것 같습니다.
00:08:59요약하자면, 기존 코드베이스를 분석해서 Paper에서 시각적으로 확인하고,
00:09:04Paper에서 편집한 내용을 다시 프로젝트 코드로 돌려보낼 수 있다는 뜻입니다.
00:09:08정말 훌륭한 기능이라고 생각합니다. 이 기능이 특히 유용할 때는
00:09:12랜딩 페이지를 위한 데모 디자인 컴포넌트나 스크린샷 작업을 할 때입니다.
00:09:17보통은 그냥 스크린샷을 찍는 게 편하지만, 가끔은 조금 편집하고 싶을 때가 있죠.
00:09:20텍스트를 수정하거나 실제 이메일 주소를 가려야 할 때 말입니다.
00:09:23그럴 때 Figma나 Paper에 있으면 훨씬 편합니다. 바로 타이핑해서 수정할 수 있으니까요.
00:09:28그러고 나서 단순 스크린샷이 아닌 실제 PNG나 JPEG 이미지로 내보낼 수 있습니다.
00:09:32여기 아까 만들던 트위터 같은 소셜 앱이 있네요.
00:09:35이것도 디자인이 아주 멋집니다. 어쨌든 오늘 영상 즐거우셨기를 바랍니다.
00:09:39내용이 너무 정신없지 않았으면 좋겠네요. 여러 작업을 병렬로 진행했는데,
00:09:43요즘 제가 실제로 코딩하는 방식이라 영상에도 조금 묻어난 것 같습니다.
00:09:47도움이 되셨기를 바랍니다. 여러분은 Paper로 무엇을 만드실지 알려주세요.
00:09:50정말 유용한 도구라고 생각합니다. 저도 조만간 유료 버전으로
00:09:55업그레이드하게 될 것 같네요. 다음 영상을 위해 구독 잊지 마세요.
00:09:58PNG나 JPEG 같은 이미지로 내보낼 수도 있습니다. 여기 아까 만들던 트위터 소셜 앱이 있네요.
00:10:03이것도 정말 멋진 디자인이지만, 어쨌든 오늘 영상 즐겁게 시청하셨기를 바랍니다.
00:10:07내용이 너무 정신없지 않았으면 좋겠네요. 여러 작업을 동시에 병렬로 진행했는데,
00:10:10요즘 제가 실제로 코딩하는 방식이라 영상에도 그런 모습이 조금 묻어난 것 같습니다.
00:10:14도움이 되셨기를 바랍니다. 여러분은 Paper를 활용해 무엇을 만드실지 알려주세요.
00:10:17정말 유용한 도구라고 생각합니다. 저도 조만간 유료 버전인 Pro 버전으로
00:10:20업그레이드하게 될 것 같네요. 그럼 다음 영상을 위해 잊지 말고
00:10:24구독 부탁드립니다.