Claude Design에서 Vercel 배포 공부 정리 | 디자인에서 URL까지

Vercel 블로그에서 짧은 발표가 올라왔다. Claude Design에서 만든 디자인을 바로 Vercel로 배포해 라이브 URL을 받아올 수 있게 됐다는 내용이었다.

처음엔 “그게 얼마나 편해질까?” 정도의 반응이었다. 근데 발표를 한 번 더 읽어보면서, 이게 디자이너한테는 생각보다 의미 있는 변화일 수 있겠다 싶어서 좀 더 찾아봤다.

1️⃣ 이게 뭐냐?

Claude Design은 Claude 안에서 자연어로 UI를 생성하는 기능이다. 텍스트로 원하는 화면을 설명하면 그에 맞는 디자인이 캔버스에 나오는 방식인데, 이전까지는 그 결과물이 캔버스 안에서 끝났다. 실제로 공유하거나 라이브로 확인하려면 코드를 따로 가져다 Vercel 같은 플랫폼에 올려야 하는 단계가 별도로 필요했다.

이번 업데이트는 그 중간 단계를 없앤 것이다. ‘공유’ 메뉴에서 Vercel을 목적지로 선택하면, Claude Design이 연결된 Vercel 계정에 새 프로젝트를 자동으로 만들고 라이브 URL을 돌려준다. 캔버스를 떠나지 않고 배포까지 되는 구조다.

이 연결이 이뤄지는 방식이 MCP(Model Context Protocol)다. Vercel MCP 서버를 Claude에 연결해두면, Claude가 Vercel의 프로젝트 생성 기능을 직접 호출할 수 있게 된다. 문서를 공부하면서 MCP가 AI 모델이 외부 서비스를 도구처럼 호출할 수 있게 해주는 프로토콜이라는 개념을 이번에 좀 더 이해했다. 개별 도구끼리 직접 연결하는 게 아니라, 이 프로토콜이 사이에 끼는 구조라는 게 흥미로웠다.

2️⃣ 내가 든 생각

디자이너 입장에서 배포는 개발자한테 넘기는 단계였다. Figma에서 시안을 그리고, 코드는 개발자가 구현하고, 배포는 또 그다음 이야기였다. 그 흐름이 워낙 당연했다 보니, 디자인 도구에서 배포까지 연결된다는 게 처음엔 살짝 낯설게 느껴졌다.

조금 더 생각해보니, 이건 “배포를 편하게” 했다기보다는 “프로토타입을 라이브로 검증하는 흐름”을 만든 쪽에 가까운 것 같았다. 디자인 단계에서 URL이 하나 생기면, 개발 전에 이해관계자에게 링크만 공유할 수 있고, 모바일에서 직접 열어볼 수도 있다. 피드백을 훨씬 앞에서 받을 수 있는 구조다.

디자이너로서 눈에 들어온 게 또 하나 있었다. 이 발표가 Vercel이 “배포 플랫폼”에서 “디자인 워크플로우의 일부”로 들어오는 방향을 보여준다는 점이었다. 어디까지 자연스럽게 연결될 수 있는지가 앞으로 계속 궁금해질 것 같았다.

👉🏻 이번 발표에서 가장 흥미로웠던 건, 도구들이 점점 ‘맥락 안에서 끝나도록’ 붙어가고 있다는 점이었다. 디자인이 완성되는 그 흐름 안에서 배포까지 이어진다는 게, 컨텍스트 전환을 최소화하는 설계처럼 보였다.

💡 여기서 드는 질문? Vercel에 올라간 뒤, 코드 수정이나 재배포 흐름은 어떻게 될까? 그 이후 유지보수 단계도 같은 캔버스 안에서 이어질 수 있을까?

⭐️ 마지막으로, 디자인-배포 연결 관점에서 공부하며 느낀 점

이런 류의 통합 발표를 볼 때 자꾸 같은 질문이 따라오는 것 같다 — 디자인이 라이브가 된 뒤, 그 이후 흐름은 어디서 이어지는 걸까. 공부한 내용 기준으로는 배포까지의 연결은 매끄러워 보이는데, 그다음 유지보수 단계가 이 통합의 실질적인 완성도를 결정할 것 같다는 인상이었다.

---

참고 원문: Deploy from Claude Design to Vercel