AI 기반 코딩 도구가 디자인 영역까지 건드리기 시작했다. 대화형 명령만으로 인터페이스를 만들어주는 클로드 코드(Claude Code)와 UI·UX 설계의 표준 도구로 자리 잡은 피그마(Figma)가 결합한 것이다. ‘바이브 디자인(Vibe Design)’ 시대가 도래했다.
피그마는 지난 2월 17일(현지시간) 앤트로픽(Anthropic)과의 파트너십을 공식 발표하며 ‘코드 투 캔버스(Code to Canvas)’ 기능을 출시했다. 피그마 공식 블로그에 따르면, 이 기능은 클로드 코드 환경에서 구현된 작동 가능한 인터페이스를 피그마 캔버스 위의 완전한 편집 가능 디자인 레이어로 직접 변환해 준다. 두 서비스는 피그마의 모델 컨텍스트 프로토콜(MCP, Model Context Protocol)을 통해 연결된다. 기존에도 피그마 MCP 연결 기능이 있었으나, 클로드가 실시간으로 생성한 코드가 ‘완전히 편집 가능한’ 피그마 GUI 위에 올라간다는 차이점이 있다.
사용 방법 역시 적응하기 어렵지 않다. 클로드 코드에서 인터페이스를 완성한 뒤 “Send this to Figma”라고 입력하면, 브라우저에 렌더링된 화면 상태가 곧바로 피그마 프레임으로 넘어간다. 결과물은 단순한 스크린샷이나 와이어프레임이 아니다. 레이어와 컴포넌트가 살아있는 온전한 피그마 파일이다. 프로덕션 환경, 스테이징 서버, 로컬호스트 등 어떤 상태의 화면이든 캡처해 변환할 수 있으며, 멀티스텝 플로우처럼 여러 화면을 순서대로 한 번에 가져오는 것도 가능하다.
이 변화가 디자인 현장에 던지는 메시지는 분명하다. 기존 웹 디자인 워크플로우는 기획자가 요청을 전달하면 디자이너가 작업하고, 그 결과물을 개발자가 코드로 구현하는 순차적 3단계 구조였다. 문제는 이 구조에서 “조금 더 모던하게”, “클래식하면서도 화려하게”처럼 모순된 지시가 끼어들기 일쑤였다는 점이다. 아직도 기억한다. 밤새 PPT를 고치던 그날을. 본인을 섬세하다고 말하던 어떤 이는 1픽셀 옮기기를 밤새 수천 번 요청했고 결과물은 기업 외부에 공개할 수 없는 산업폐기물이 되었다. 지구상에서 단 한 명만 만족하는 결과물이었다.
이처럼 디자인 기준 없이 의사결정권자의 기분에 따라 1픽셀 이동, 폰트 크기 1pt 조정 같은 주관적인 수정 요청이 반복되면서 파일명이 ‘수정_최종_최종2_진짜최종.psd’가 되는 악순환은 디자인 업계의 오랜 고질병이었다.
코드 투 캔버스는 이 구조 자체를 바꾼다. 피그마 공식 블로그에 따르면, 개발자가 AI로 먼저 인터페이스를 구현하고 나면 디자이너와 기획자가 피그마 캔버스 위에서 함께 주석을 달고, 불명확한 부분을 짚고, 여러 화면을 나란히 놓고 비교하며 협업할 수 있다. 개발자가 코드 파일을 직접 열지 않아도 되고, 다른 팀원들이 맥락을 새로 파악하기 위해 환경을 전환할 필요도 없다. 디자이너는 마음에 들지 않는 부분이 있을 경우 피그마 안에서 마우스로 직접 수정할 수도 있다. 내부에서는 코드가 실시간으로 돌아가지만, 사용자 입장에서는 포토샵을 다루듯 GUI(그래픽 사용자 인터페이스) 환경에서 편집이 가능한 것이다.
CNBC에 따르면, 피그마는 AI 코딩 도구의 등장이 디자인의 필요성을 줄인 것이 아니라 디자인을 더 중요하게 만들었다고 판단해 이번 파트너십을 추진했다. 코드는 빠르게 하나의 결과물로 수렴하는 데 강하지만, 캔버스는 여러 방향성을 동시에 펼쳐놓고 팀이 함께 방향을 조율하는 데 강하다는 논리다. 코드와 디자인은 경쟁 관계가 아니라 서로 다른 역할을 맡은 상호 보완적 도구라는 것이다.
이런 방향성이 완전히 새로운 것은 아니다. AI 기반 웹사이트 자동 생성 서비스는 이미 작년부터 여럿 등장했다. 캔바(Canva), 국내 서비스인 미리캔버스 같은 툴도 명령어를 입력하면 템플릿 기반의 디자인 결과물을 내놓는다. 그러나 이는 어디까지나 미리 만들어진 템플릿 중에서 가장 적합한 것을 골라주는 방식이었다. 코드 투 캔버스는 템플릿 없이도 제작이 가능하다는 점에서 근본적으로 다르다.
이번 코드 투 캔버스 출시는 피그마 입장에서도 중요한 전략적 행보다. 피그마는 이미 앞서 AI 화이트보드 협업 도구인 피그잼(FigJam)에 클로드를 통합해 다이어그램 자동 생성 기능을 선보인 바 있다. 피그마는 지난해 7월 IPO를 통해 주당 33달러로 약 12억 달러를 조달했고, 상장 첫날 주가가 250% 급등하며 시가총액 약 480억 달러를 기록했다. 하지만 CNBC에 따르면, 현재 피그마 주가는 상장 첫날 종가인 115.50달러 대비 약 77% 하락한 상태다. AI 코딩 도구의 부상이 기존 소프트웨어 서비스(SaaS) 기업들의 존재 이유를 위협한다는 이른바 ‘새스포칼립스(SaaSpocalypse)’ 우려가 피그마 주가에도 그대로 반영된 것이다. 코드 투 캔버스는 그런 피그마가 AI 시대에 자신의 역할을 재정의하려는 시도이기도 하다.
물론 지금 당장 디자이너의 자리가 위태롭다는 뜻은 아니다. AI가 만든 결과물은 여전히 사람이 검수해야 한다. 디자인은 단순한 심미적 취향이 아니라 규칙과 원칙의 영역이며, 그 규칙을 가장 잘 아는 사람은 디자이너다. 오히려 AI 도구를 능숙하게 다룰 수 있는 디자이너, 특히 기획 역량과 디자인 감각을 함께 갖춘 전문가라면 이 변화가 커다란 기회가 될 수 있다.
가장 두려워해야 하는 건 디자이너가 아니라 어도비다. 어도비는 1월 초, 준수한 실적을 선보였음에도 주가가 하락한 바 있다. 어도비는 코드와 연결로 이뤄지는 대화형 AI 세상에서 사실상 아무것도 못 하고 있다. 어도비는 현재도 생성형 채우기를 주력 AI 기능으로 홍보하고 있는데, 이 기능은 스마트폰에서 5년 전부터 쓸 수 있던 기능이다. 여전히 어도비는 디자인과 영상의 표준이지만, 파일 포맷 호환성 하나로만 먹고 살기엔 생성형 AI들의 커넥터 기능은 너무나도 매섭다.
바이브 코딩(Vibe Coding)에 이어 바이브 디자인까지 등장했다. 다음은 바이브 배포, 바이브 운영이 될지도 모른다. AI가 만들고 사람이 판단하는 이 새로운 워크플로우에 지금부터 익숙해져 두는 것이 중요한 이유다.
자세한 내용은 피그마 공식 블로그에서 확인할 수 있다.
📄 영상 스크립트 전문
새로운 시대가 도래했습니다. 바이브 디자인.
여러분 연휴 잘 보내셨나요? 연휴 동안에도 열심히 공부해서 돌아온 AI저씨의 AI되니? 오늘은 디자인 얘기를 한번 들려드리겠습니다.
연휴 동안 저도 맛있는 거 많이 먹고 돼지같이 집에 누워있었는데, 이틀 전 주목할 만한 소식이 등장했습니다. 클로드 코드 투 피그마.
간단하게 설명드릴게요. 클로드에서 만들고 싶은 걸 대화로 입력하면 그거를 코드로 만들어주는 기능이 클로드 코드입니다. 피그마는 포토샵 같은 디자인 툴이에요. 근데 포토샵처럼 사진 보정하는 것보다는 여러분이 들어가는 웹사이트 같은 거, 유저 인터페이스라고 그러거든요, 이걸 만드는데 주로 쓰죠. 이 두 개가 합쳐진 겁니다.
원래도 클로드에서 Figma를 쓸 수 있었어요. 근데 클로드 코드에서 Figma를 쓴다? 이거는 좀 얘기가 달라지죠.
제가 웹디자인 잡지에서 오래 일을 해왔는데, 웹디자인계에서는 이런 말이 있습니다. 클래식하면서도 모던하게. 단순하지만 화려하게. 이런 말도 안 되는 지침이 있을 때가 있는데, 보통은 이렇죠. 기획자가 디자이너한테 뭐 이렇게 해달라, 디자이너는 그걸 듣고 포토샵으로 작업을 합니다. 그래서 결과물이 나오면 빠꾸를 먹죠. 그래서 수정_수정_최종_최종_tlqkf.psd, 수정_수정_최종_최종2_tlqkf.psd, 이렇게 되는 겁니다. 의사결정권자의 마음에 안 들면 그렇게 되죠. 저도 그렇게 일을 해왔고요, 여러분도 마찬가지이실 거라고 생각합니다.
근데 이제 클로드가 디자인까지 만들어주는 시대가 된 겁니다. 여러분이 이러이러한 웹사이트를 만들고 싶다고 해요. 그러면 클로드 코드가 이렇게 이렇게 이렇게 만들어줍니다. 그 코드를 피그마에 복붙을 해요. MCP 서버를 연결해놨다면 복붙이 아니라 그냥 바로 갈 수가 있겠죠. 그러면 피그마가 그 사이트를 이렇게 만들어서 보여주는 겁니다.
근데 디자인했던 여러분 이거 아실 거예요. 의사결정권자들이 요만큼 옮겨라, 1픽셀 옮겨라, 글자 한 폰트 키워라, 이런 디자인과 아무 상관 없는 자기 기분을 위한 지침을 줄 때가 있죠. 저는 디자이너가 아닌데도 그걸 많이 당했습니다. 그거를 이제 클로드 코드가 대신해 주는 거예요. 1픽셀 키워라, 글자 폰트 하나 키워라.
이게 어떻게 가능하느냐. 사실은 원래부터 가능했어야 됐어요. 왜냐면 여러분이 만지는 이미지는 원래부터 코드입니다. 여러분이 포토샵에서 이렇게 이렇게 조정을 하시죠. 그게 우리 눈앞에는 안 보이지만 안에서 코드가 돌아가고 있는 거예요. GUI이기 때문에 우리가 느낄 수는 없지만, 내부에서는 코드가 실시간으로 변하고 있는 겁니다. 그러니까 코드로 원래 구현 가능한 거예요. 그것을 클로드 코드가 Figma에 구현을 한 겁니다.
이게 기본적으로 가능했는데도 왜 안 되고 있었냐면, AI가 코드 쓰는 속도가 그렇게 빠르지 않았어요. 그런데 이제 어도비를 실시간으로 조작하는 것만큼 AI가 코드 쓰는 속도가 빨라진 겁니다.
제가 연휴에 클로드 코드를 굉장히 많이 만졌는데요. 이유가 이미지 변환하고 싶은 게 있는데 이거를 한 40개를 한꺼번에 해야 했어요. 그러다 보니까 하나하나 하는데 너무 시간이 오래 걸려서 그냥 앱을 만들어버렸습니다. 배포할 수준은 아니지만 저 혼자 쓰기는 괜찮은 앱을 클로드 코드, 챗GPT 프로로 다 만들어서 씁니다.
여러분 카톡에서 챗GPT 프로 사셨죠? 그럼 Codex를 꼭 써보십시오. Codex 5.3 Spark라는 기능이 있는데요, 이거는 거의 저와 대화할 수 있는 속도로 코드를 빨리 씁니다. 야 이거 잘못됐는데? 이거 고쳐봐. 야 여기 안 돌아간다 여기 고쳐봐. 이러면 코드가 저랑 대화할 수 있을 정도로 빠르게 수정됩니다. 그리고 클로드는 원래 빨라요. 클로드는 회사 꺼 팀 플랜을 쓰고 있는데도 원래 빠르더라고요. 그래서 연휴 동안 제가 만들어서 쓴 앱이 두세 개 정도 됩니다. 하루에 하나 정도 만드는 거죠. 물론 제대로 작동하는 애들이 별로 없는데, 어쨌든 수정을 계속 반복하면 가능하다는 거죠. 그만큼 코드 쓰는 속도가 빨라졌습니다.
코드 쓰는 속도가 빨라지니까 이제 디자인도 실시간으로 적응할 수 있는 수준이 된 거죠.
이 바이브 디자인이 안 됐던 건 아니에요. 작년 4월에 젠스파크가 나왔죠. 젠스파크는 처음 나왔을 때부터 웹사이트를 만들 수 있었습니다. 그러니까 인터페이스를 만들 수 있었어요. 그게 이미 바이브 디자인이 되고 있었다는 뜻이죠. 근데 심미적으로 뛰어나진 않았습니다. 그냥 기능을 만들어주는 형태였죠. 근데 이게 실시간으로 디자인을 바꿀 수 있는 수준이 된 거예요.
그리고 이제 여러분 배너 만들 때 나노바나나 프로 많이 쓰셨죠. 나노바나나 프로 역시 코드로 치환 가능합니다. 처음의 나노바나나는 그게 안 됐었어요. 근데 나노바나나 프로, 제미나이 3가 나오면서 그게 가능하게 됐고요, 이 코드 역시 구글 스티치라는 서비스에서 디자인처럼 사용할 수 있었습니다. 근데 조금 다른 게, 클로드 코드 to 피그마는 완전한 디자인 툴이고, 구글은 이미지 생성에 조금 더 초점을 맞추고 있었죠.
앞으로는 클로드 코드에서 피그마로 디자인을 옮긴 다음에, 거기에 들어갈 이미지를 나노바나나 프로로 만들게 되겠죠.
그래서 여러분 이미 바이브 디자인을 해보셨을 거예요. 캔바 그리고 국내의 미리캔버스 사용해 보신 분들 계시죠. 거기에 맡기면 원하는 디자인을 어느 정도는 뽑아줘요. 근데 그거는 템플릿 기반입니다. 명령어를 내리면 거기에 맞는 템플릿을 갖고 찾아주는 거예요. 근데 요번에 나온 클로드 코드 투 피그마는 템플릿 없이도 제작이 가능한 겁니다.
그래서 클로드가 보여준 사례를 봤는데, 디자이너 여러분 아직도 안심하셔도 될 것 같습니다. 클로드가 굉장히 감성적인 툴이잖아요. 글도 잘 쓰고 코드도 잘 쓰고, 근데 디자인은 아직 응? 이런 수준입니다.
그래서 앞으로는 업무가 이렇게 변화할 거예요. 원래는 기획자가 뭐 해줘, 그러면 디자이너가 만들고, 그거를 개발자가 구현하고, 이런 세 단계가 전통적인 웹디자인이었죠. 근데 바이브 코딩 시대가 되면 이렇게 됩니다. 개발자가 먼저 AI 코딩으로 만들면, 디자이너가 검토하고 기획자가 검토하고 이렇게 됐었죠. 근데 원래 노션에서 일을 한꺼번에 리뷰하고 있었잖아요. 그거랑 똑같아지는 겁니다. 한꺼번에 만들고 한꺼번에 셋이 리뷰한다.
그래서 모던하지만 화려하게, 1픽셀 늘리자, 이런 의사결정권자의 헛소리 안 들릴 거고요. 만약에 그런 헛소리를 지금도 하신다면 AI한테 뒤에서 얘기하십시오. 저 toRl가 헛소리한다, AI 네가 꾸짖어줘, 이런 명령도 가능하겠죠.
그래서 원래 바이브 코딩으로 사이트를 만들면 수정이 쉽지는 않았거든요. 애초에 AI가 만드는 사이트는 기능만 돌아가면 되는 사이트가 많았어요. 근데 이제는 심미적으로도 그리고 인터페이스적으로도 수정이 가능하게 됐고요. 또 정 이게 별로다, 그러면 디자이너가 직접 피그마 안에서 이렇게 마우스 클릭해서 GUI로 수정이 가능해요. 물론 그 뒤에서 실시간으로 코드가 돌아가고 있겠지만, 포토샵 하듯이 또 수정이 가능한 겁니다.
이런 새로운 툴 나올 때마다 항상 하는 얘기가 있죠. 디자이너들 다 망했다. 저는 그렇게 얘기하고 싶지 않습니다. 저는 글 쓰고 유튜브 하는 사람인데, 글은 이미 AI가 사람보다 훨씬 잘 씁니다. 대부분의 사람들은 AI보다 글을 못 써요. 근데 저는 일을 하고 있잖아요. 여전히 글을 쓰고 있습니다, 글로 돈을 벌고요.
그래서 디자이너들이 망하는 건 아니고, 요런 거는 조금 주의하셨으면 해요. 시대에 적응할 필요는 조금 있겠죠. 디자이너분들도 이 클로드 코드 투 피그마, 이런 워크플로우에 적응을 하시고, AI와 함께하는 디자인 시대를 함께 가시면 조금 더 좋을 것 같습니다.
반면에 이렇게 생각할 수도 있어요. 기획을 잘하는 디자이너들 있잖아요. 이런 분들은 이제 클로드 코드와 함께하면 뭐든지 할 수 있는 시대가 되는 거죠. 그래서 이 시대에 조금 더 주목해 주시고, 기능이 지금 한국에 출시된 건 아닌 것 같은데, 출시되면 빨리 활용을 해보시고 업무에 적용을 해보시면 좋을 것 같습니다.
제가 과거에 웹디자인지에서 편집장까지 했었는데, 그때 웹디자이너들은 처음에 입사하면 다 누끼 따다가 끝났죠. 그리고 그때는 웹디자인이 굉장히 변화하고 있을 때예요. 그러니까 클라이언트들도 뭐가 좋은지 잘 모릅니다. 그러면 자꾸 1픽셀 옮겨줘, 폰트 크기 1 키워줘, 이런 자꾸 명령을 하게 되는 거예요. 그래서 디자이너분들이 집에 못 가시는 거 제가 많이 봤는데, 이제는 그냥 클라이언트와 함께 화면을 보면서 작업을 하실 수 있겠죠.
그럼 디자이너가 필요 없는 거 아니냐? 이렇게 생각하실 수도 있어요. 아닙니다. 디자인은 심미적인 것도 있는데 규칙이에요, 규칙. 이 규칙을 제일 잘 아시는 분들이 디자이너죠. AI가 만든 건 결국 사람이 검수를 해야 돼요. 그 검수를 하는 사람들이 여러분이 되는 겁니다.
자 이제 바이브 코딩, 바이브 디자인까지 나왔죠. 다음번엔 뭐가 될까요? 바이브 퍼블리싱, 바이브 배포, 바이브 운영, 뭐 이런 거 아닐까요? 하여튼 대부분의 것들이 AI가 만들고 있으니까, 역량이 있는 여러분들 이걸 충분히 받아들이셔서 여러분의 업무에 활용하시면 좋을 것 같습니다.
바이브 코딩도 제가 열심히 공부하고 있었는데, 갑자기 바이브 디자인이 나와서 디자인 공부도 오늘부터 다시 시작을 하도록 하겠습니다.
여러분 궁금하신 게 있으면 AI 매터스 채널에 댓글 남겨주시고요, 그 댓글을 기반으로 여러분이 필요하신 거 다시 공부해서 여러분께 알려드리도록 하겠습니다. 지금 좀 무서운 시대이기도 하지만 재밌는 시대이기도 하잖아요. 그래서 열심히 하셔서 우리 한번 다같이 해먹어 봅시다. AI 매터스가 함께 하겠습니다. 다음 시간도 기대해 주십시오. 여러분 구독 AI하니?
