Figma, Claude로 아이디어를 인터랙티브 소프트웨어로 전환

산업:

소프트웨어

기업 규모:

대기업

제품:

Claude Platform

위치:

북아메리카

몇 분 만에 작동하는 프로토타입

디자이너, 개발자, 제품 관리자가 코드 작성 없이 프로토타입이나 앱을 제작

Claude Opus 4.6

Figma Make에서 복잡하고 인터랙티브한 앱 및 프로토타입 생성

Introducing Claude Opus 4.6

We’re upgrading our smartest model. The new Claude Opus 4.6 improves on its predecessor’s coding skills. It plans more carefully, sustains agentic tasks for longer, and features a 1M token context window.

Introducing Claude Opus 4.6

Video caption

Introducing Claude Opus 4.6

Claude Code 소개

아이디어 구상에서 커밋까지 이어지는 단일 워크플로우에서 Claude Code의 실제 작동 모습을 확인하세요.

Claude Code 소개

아이디어 구상에서 커밋까지 이어지는 단일 워크플로우에서 Claude Code의 실제 작동 모습을 확인하세요.

Video caption

Claude Code 소개

아이디어 구상에서 커밋까지 이어지는 단일 워크플로우에서 Claude Code의 실제 작동 모습을 확인하세요.

Figma는 팀이 초기 컨셉부터 출시 경험까지, 디지털 제품을 함께 만드는 협업 디자인 및 개발 플랫폼입니다. Figma는 Claude로 구동하는 Figma Make를 통해 팀이 아이디어와 멈춰 있는 시안을 실제 작동하는 인터랙티브 소프트웨어로 신속하게 구현하여 상상이 현실이 되는 과정을 가속화합니다.

Claude 도입의 주요 성과:

디자이너, 개발자, 제품 관리자가 코드 작성 없이 단 몇 분 만에 작동하는 프로토타입 또는 앱을 제작
시간이 많이 소요되는 작업을 자동화하여 팀이 더 많은 디자인 및 제품 아이디어를 탐색
디자이너가 아닌 사람도 아이디어를 시각화할 수 있어 더 많은 인원이 디자인 과정에 참여
Claude Sonnet이 코드 품질, 디자인 의도, 속도에서 일관되게 우수한 성능을 제공

디자인의 진화

Figma는 AI의 등장으로 디자인의 역할이 급변하고 있음을 인지했습니다. 업계 선두 디자인 플랫폼으로서 Figma는 디자이너가 디자인에 생명력을 불어넣으며 창의적 영향력을 넓히는 동시에 더 많은 사람을 디자인 과정에 참여할 수 있는 기회를 포착했습니다.

AI는 간단한 프롬프트만로 디자인 아이디어를 신속하게 시각화하고, 고정된 시안을 인터랙티브 경험으로 전환하는 새로운 길을 열어주었습니다. 팀은 이러한 기능을 Figma에 도입함으로써 프로토타입을 손수 제작하거나 코드를 작성하지 않고도 다양한 방향을 탐색할 수 있습니다.

이러한 발전은 업계 전반의 변화와도 맥을 같이 합니다. Figma의 제품 관리자인 Alex Mullans는 "기존에는 디자인과 개발 사이 전달 과정에서 마찰이 발생했습니다. 개발자가 '여기 제가 만든 것입니다'라고 내놓은 결과물이 원래 기획안과 맞지 않아 재작업이 반복되곤 하기 때문입니다"라고 지적했습니다. Figma의 협업 플랫폼은 디자인과 개발 사이의 간극을 좁혀 전체 프로세스에서 완성도와 품질을 유지합니다.

기술적 역량과 디자인 감각을 갖춘 Claude 선택

Figma는 AI 모델을 평가할 때 디자인 의도와 미학을 이해하면서도 고품질 코드를 생성할 수 있는 솔루션을 찾았습니다.

Mullans는 평가 과정을 설명하며 "저희는 정기적으로 다양한 모델을 평가합니다. 그중 Claude는 속도, 정확성, 사용자 의도 파악에서 꾸준히 최적의 조합을 보여주었습니다"라고 말했습니다.

팀은 Claude의 남다른 디자인 감각도 차별점으로 꼽았습니다. Figma Make의 엔지니어는 "Anthropic이 등장하기 전에는 AI 모델이 똑똑하긴 했어도, 확실히 미적 감각과 개성이 부족했습니다. 디자인을 만들어 달라고 하면 다소 밋밋한 결과가 나왔죠. 그러다 나온 Anthropic은 지능과 미적 감각을 모두 갖춘 모델을 선보였습니다."라고 설명했습니다.

Figma Make의 제품 관리자인 Holly Li 역시 Claude의 능력을 직접 체험했습니다. "전 웹사이트를 만들려고 React를 독학하는 데 30시간을 썼습니다. 그런데 Claude를 쓰니 하루 만에 그 모든 코드를 리팩토링하고 개선했으며, 항상 원했지만 직접 구현할 수 없었던 기능까지 추가할 수 있었죠."

팀은 Claude Sonnet을 만난 순간을 '돌파구'라고 평가했습니다. 코드 생성 품질이 Figma Make의 비전을 실현할 수 있는 수준에 도달했기 때문입니다.

자연어 기반 인터랙티브 구현

Figma는 아이디어를 코드 기반 소프트웨어로 바꿔주는 두 가지 혁신적인 제품에 Claude를 통합했습니다. 첫 번째는 Figma Sites 를 사용하는 디자이너가 원하는 것을 설명하여 기존 웹사이트 디자인에 인터랙티브 요소를 추가할 수 있게 해줍니다. 요소를 선택하고 "마우스를 올리면 기울어지는 호버 효과 추가"와 같은 자연어 프롬프트를 입력하면, Claude가 원본 디자인의 세부 사항을 유지하면서 고품질 코드를 신속하게 생성합니다.

두 번째 제품인 Figma Make는 설명이나 기존 Figma 디자인을 바탕으로 인터랙티브 프로토타입이나 앱을 생성합니다. Li는 "Figma Make는 아이디어 실제 소프트웨어로 전환하는 방법입니다. 처음부터 새로 시작하거나 Figma에서 만든 기존 디자인으로 시작할 수도 있습니다"라고 설명했습니다. 원하는 것을 설명하는 프롬프트를 입력하거나 Figma Design에서 픽셀 단위까지 완벽한 목업을 복사해 넣으면, Claude가 이를 복잡한 로직, 애니메이션, 반응형 동작을 갖추어 완전히 기능하는 프로토타입으로 전환합니다.

Li는 디자인 철학을 설명하며 "AI는 디자이너가 작업하던 방식에 맞춰야 합니다. 이미 완벽한 디자인을 만들었다면 처음부터 다시 시작할 필요가 없어야 하죠. Claude는 사용자가 배치한 모든 픽셀을 그대로 존중하면서 그 위에 인터랙티브 요만를 더해줍니다"라고 말했습니다.

팀은 Claude가 업데이트될 때마다 눈부신 개선을 목격했습니다. Li는 "이제 프롬프트 하나로 그라데이션, 다양한 타이포그래피, 세심한 모션이 적용된 정교한 디자인이 생성됩니다. 한 디자이너는 ‘Claude가 너무 뛰어나서 울고 싶다’고까지 말했죠"라고 전했습니다.

신규 모델로 비전 가속화

Figma 팀은 최신 Claude 모델을 지속적으로 테스트하며 기술의 최전선을 지키고 있습니다.

Figma CEO Dylan Field는 "Sonnet 4.5는 매우 인상적인 모델입니다. 얼마나 앞서 계획할 수 있고, 복잡한 코드베이스를 얼마나 잘 추론할 수 있는지에 매우 감명받았습니다."라고 말했습니다. Field는 이 모델이 어떻게 Figma 디자인을 기능적인 코드로 전환하는지 설명하며 Figma Design과 Make 간의 개선된 왕복 워크플로우를 강조했습니다. 디자인을 복사하여 작동하는 프로토타입을 생성한 후, 다시 디자인 캔버스로 가져와 추가 작업을 반복하고 탐색 결과를 나란히 비교하는 방식입니다. 그는 "Sonnet 4.5로 이 과정이 얼마나 더 좋아질지 전혀 몰랐는데... 정말 기분 좋은 놀라움이었습니다"라고 언급했습니다. Field는 이 경험을 '다루는 즐거움이 있다'고 표현하며, 이 모델이 "Figma Make의 기능에서 이미 상당한 차이를 보여주고 있다"고 덧붙였습니다.

Figma는 또한 실험적 모델 설정을 도입하여, 새로운 Claude Opus 4.6을 포함한 최신 릴리스를 Figma Make에서 출시 즉시 이용할 수 있도록 했습니다. Figma의 최고 디자인 책임자(CDO)인 Loredana Crisan은 "Claude Opus 4.6은 Figma Make에서 인상적인 창의적 범위를 바탕으로 복잡하고 인터랙티브한 앱과 프로토타입을 생성합니다. 이 모델은 세부적인 디자인과 다층적인 작업을 한 번만에 코드로 변환해 주어, 팀이 아이디어를 탐색하고 구축하는 강력한 출발점이 됩니다."라고 말했습니다. 이 실험적 설정을 통해 팀은 Claude가 계속 발전함에 따라 새로운 기능으로 한계를 넓힐 수 있습니다.

새로운 모델이 출시될 때마다 팀이 만들 수 있는 새로운 가능성이 열립니다. Field는 "AI 모델이 더 발전할수록 Figma도 더 발전합니다"라고 전했습니다.

누구나 디자인과 소프트웨어를 제작할 수 있는 기회 창출

Claude는 기술적 장벽을 낮춤으로써 어떤 Figma 사용자든지 아이디어를 더 빨리 검증하고, 더 많은 창의적 방향을 탐색하며, 제품 개발 과정에 다양한 관점을 반영할 수 있게 합니다.

속도는 가능성을 변화시킵니다. Li는 자신의 경험을 예로 들며 "Figma Make로 5분 만에 새로운 제품 플로우를 프로토타입했습니다. 이전에는 디자인과 엔지니어링 지원 없이 제품 관리자로서 혼자 해내는 것은 말 그대로 불가능했을 것입니다"라고 말했습니다.

이러한 가속화는 완전히 새로운 워크플로우를 가능하게 합니다. 초기 사용자들은 인상적인 사례를 공유했습니다. 한 디자이너는 주말 동안 Figma Make로 프로토타입을 만들어 VC에 스타트업 아이디어를 제안했고, 실제 작동하는 데모로 투자자에게 깊은 인상을 남겼습니다. 또 다른 사용자는 Make를 사용하여 오래 묻어두었던 컨셉에 생명력을 불어넣었고, 인터랙티브하게 만든 결과물을 본 회사는 이 아이디어를 다시 논의하기 시작했습니다.

개인 생산성을 넘어, Claude는 제품 개발에 기여할 수 있는 사람의 범위를 넓힙니다. Mullans는 다음과 같이 관찰했습니다. "스프레드시트와 데이터 테이블로 생각하던 제품 관리자가 이제는 시각적 프로토타입을 만들어 자신의 아이디어를 전달할 수 있습니다. 엔지니어는 CSS에 시간을 들이지 않고 빠르게 인터페이스를 목업할 수 있죠. 조직 전체의 모든 구성원이 디자인 과정에 더욱 효과적으로 기여할 수 있게 되었습니다."

이러한 변화는 도구를 넘어, 팀이 제품 개발에 접근하는 방식 자체를 바꾸고 있습니다. 이제 엔지니어가 디자인하고, 제품 관리자가 프로토타입을 만들며, 디자이너가 소프트웨어를 출시할 수 있습니다. Figma Make는 서로 다른 역할 간의 경계를 허물어, 누구나 아이디어를 시각화하고, 디자인 과정에 참여하며, 제품에 생명력을 불어넣도록 도와줍니다.

"Claude Opus 4.6은 Figma Make에서 인상적인 창의적 범위를 바탕으로 복잡하고 인터랙티브한 앱과 프로토타입을 생성합니다."

Loredana Crisan

최고 디자인 책임자(CDO), Figma

Video caption