12장. Figma Weave 입문 — 비주얼 캔버스에서 만드는 생성형 워크플로우

한 장을 만드는 사람에서, 흐름을 설계하는 사람으로

지금까지 살펴본 Figma AI 도구들은 대체로 아주 유용한 "한 번의 점프"를 도와줬다. 빈 화면에서 초안을 만들고, 문구를 바꾸고, 이미지를 생성하고, 레이어를 정리하는 일 말이다. 그런데 실무는 종종 한 번의 점프로 끝나지 않는다. 히어로 이미지를 하나 만들었더니 이번에는 같은 톤으로 배너도 필요하고, 모바일 비율도 필요하고, 소셜용 세로 포맷도 필요하고, 나중에는 모션까지 붙여야 한다. 바로 이 지점에서 생성형 작업은 자주 흐트러진다. 첫 결과물은 멋진데, 두 번째부터는 같은 브랜드처럼 보이지 않는 것이다.

Figma Weave는 이 문제를 "더 좋은 프롬프트 한 줄"로 해결하려 하지 않는다. 대신 생성 과정을 캔버스 위에 꺼내 놓는다. 공식 소개대로 Weave는 여러 AI 모델과 편집 도구를 하나의 노드 기반 플랫폼에서 연결해 쓰는 방식에 가깝다.¹ 쉽게 말해, 결과물을 만드는 도구가 아니라 결과물이 만들어지는 흐름 자체를 설계하는 도구다.

이 차이는 작아 보여도 실은 크다. 이제 디자이너는 "무엇을 생성할까?"뿐 아니라 "어떤 순서로, 어떤 맥락을 유지하며, 어디까지 자동화할까?"를 고민하게 된다. 단일 화면 생성에서 한 단계 더 나아가, 생성형 작업 자체를 디자인하는 감각이 필요해지는 이유다.

Weave를 한 문장으로 이해하기

Weave를 가장 짧게 설명하면 이렇다.

"프롬프트를 입력하는 창이 아니라, 생성 과정을 배치하는 비주얼 캔버스."¹

이 캔버스에는 입력 이미지, 텍스트 설명, 스타일 정의, 생성 모델, 편집 효과, 출력 비율 같은 단계가 각각 노드로 놓인다. 노드를 선으로 연결하면 하나의 워크플로우가 된다. 그리고 그 워크플로우는 눈에 보인다. 무엇이 먼저 들어가고, 어디서 스타일이 섞이고, 어느 지점에서 변형이 갈라지는지, 결과가 왜 그렇게 나왔는지를 사람도 이해할 수 있다.

여기서 중요한 것은 "보인다"는 점이다. 채팅형 AI는 과정을 머릿속에 숨긴다. Weave는 과정을 화면 밖에서 화면 안으로 꺼낸다. 그래서 팀이 함께 보고 고치고 다시 돌리기 좋다. 또 Figma Community에는 바로 열어 수정할 수 있는 ready-made 워크플로우들이 올라와 있어, 처음부터 모든 것을 새로 짜지 않아도 된다.²

Weave는 Make와 무엇이 다른가

이 장에서 헷갈리기 쉬운 이름이 하나 있다. 바로 다음 부의 주인공인 Figma Make다. 둘 다 생성형 AI와 연결되어 있지만, 성격은 꽤 다르다.

Figma Make가 프롬프트로 인터페이스와 프로토타입을 만들고 다듬는 쪽에 가깝다면, Weave는 이미지·영상·3D·효과를 여러 단계로 조합해 반복 가능한 미디어 워크플로우를 만드는 쪽에 더 가깝다.³¹ Make가 "앱이나 화면을 어떻게 만들까"에 강하다면, Weave는 "브랜드 비주얼과 모션 자산을 어떻게 일관되게 계속 만들어낼까"에 강하다고 보면 이해가 쉽다.

둘의 차이를 감각적으로 구분하면 이렇다.

• Make는 결과 화면을 빠르게 구현하는 데 초점이 있다.

• Weave는 결과가 나오기까지의 생성 파이프라인을 설계하는 데 초점이 있다.

• Make는 제품 인터페이스에 가깝고, Weave는 크리에이티브 생산 라인에 가깝다.

그래서 Weave는 Design를 대체하지 않고, Make와 경쟁하지도 않는다. 오히려 서로 역할이 다르다. Weave에서 브랜드 자산과 모션을 만들고, 그 결과를 다시 Figma Design나 프로토타입 흐름으로 가져오는 식의 연결이 더 자연스럽다.⁴

노드 기반 워크플로우는 어떻게 생각해야 할까

처음 Weave를 열면 사람에 따라 두 가지 반응이 나온다. "오, 자유롭다" 혹은 "오, 복잡하다." 둘 다 맞다. 그래서 노드 기반 작업을 기능 목록으로 외우기보다, 작업 사고방식으로 이해하는 편이 훨씬 낫다.

보통 하나의 워크플로우는 다음 요소들로 이뤄진다.

• 입력 노드: 참고 이미지, 텍스트, 스케치, 기존 결과물처럼 출발점이 되는 재료

• 해석 노드: 이미지를 설명문으로 바꾸거나, 스타일 특징을 언어로 추출하는 단계

• 생성 노드: 특정 AI 모델을 써서 새로운 이미지, 영상, 3D 결과를 만드는 단계

• 변형 노드: 확장, 인페인트, 업스케일, 왜곡, 배경 제거처럼 결과를 다듬는 단계

• 출력 노드: 채널별 비율, 파일 형식, 최종 전달 형태를 정리하는 단계

이 구조의 장점은 단순하다. 한 번 잘 나온 우연한 결과를 붙잡고 씨름하는 대신, 왜 잘 나왔는지 구조로 저장할 수 있다는 점이다. 다시 말해 Weave에서 진짜 자산은 최종 PNG 한 장이 아니라, 그 PNG를 안정적으로 다시 만들어내는 흐름이다.

Weave의 대표 예시: 스타일을 "한 번"이 아니라 "계속" 만들기

Weave의 가능성을 가장 잘 보여주는 사례는 Figma 팀이 공개한 다섯 가지 레퍼런스 워크플로우다.⁴ 이 예시가 좋은 이유는 화려해서가 아니다. 생성형 AI가 실무에서 어디서 무너지는지, 그리고 Weave가 그 지점을 어떻게 메우는지 보여주기 때문이다.

예를 들어 한 브랜드가 꽃 이미지와 바위 이미지 두 장을 레퍼런스로 삼는다고 해보자. 보통은 "이 느낌으로 더 만들어줘"라고 프롬프트를 넣고 결과를 뽑는다. 그런데 Weave에서는 먼저 각 이미지를 설명하는 노드를 거쳐, 색감·질감·조명·구도·분위기를 언어화한다. 그다음 두 설명을 섞어 새로운 스타일 정의를 만든다. 여기서 핵심은 스타일이 더 이상 감에 의존한 주문이 아니라, 수정 가능한 중간 산출물이 된다는 점이다.⁴

그 스타일 정의를 바탕으로 다른 피사체를 만들 수도 있다. 처음에는 꽃과 바위였지만, 다음에는 식물에 적용하고, 그다음에는 배너용 가로 비율, 앱 카드용 정사각형 비율, 스토리용 세로 비율로 확장할 수 있다. 이때 중요한 것은 단순 크롭이 아니라, 채널에 맞춘 새 구도를 생성한다는 점이다.⁴

더 나아가 왜곡 효과를 여러 갈래로 분기해 한 번에 비교하거나, 2D 참조로부터 3D 오브젝트를 만들고, 그 오브젝트를 다시 모션 작업으로 넘길 수도 있다. 결국 한 장의 이미지에서 시작한 탐색이 스타일 가이드, 자산 패밀리, 3D 오브젝트, 모션 결과물로 이어지는 셈이다.⁴

이 흐름을 보고 나면 Weave를 이렇게 이해하게 된다. "이미지를 생성하는 도구"가 아니라 "브랜드 언어를 생산 규모로 복제하는 도구"라고.

디자이너가 새로 배워야 할 감각

Weave를 잘 쓰려면 툴 사용법보다 먼저 사고방식이 바뀌어야 한다. 특히 세 가지 감각이 중요하다.

첫째, 프롬프트보다 관계를 설계하는 감각이다. 예전에는 문장을 잘 쓰는 사람이 유리했다면, Weave에서는 어떤 입력이 어떤 출력에 영향을 주는지 연결 구조를 잘 짜는 사람이 유리하다. 꽃 레퍼런스의 영향력을 키울지, 바위의 질감을 줄일지, 어떤 단계에서 분기해 비교할지를 설계하는 일이다.

둘째, 결과보다 중간 상태를 귀하게 여기는 감각이다. 이미지 설명문, 스타일 문장, 마스크, 왜곡 변형, 비율별 파생본은 모두 최종물이 아니다. 하지만 실무에서는 바로 이 중간 상태가 팀의 재사용성을 만든다. 나중에 다른 디자이너가 봐도 같은 흐름을 다시 돌릴 수 있기 때문이다.

셋째, 생성보다 선택을 디자인하는 감각이다. AI 시대의 디자이너는 만들어내는 사람인 동시에 고르는 사람이다. Weave는 옵션을 많이 만들어준다. 그래서 더 중요한 것은 "무엇을 더 뽑을까?"가 아니라 "어떤 기준으로 버리고 남길까?"다. 같은 캔버스 위에서 여러 결과를 나란히 놓고 비교하는 Weave의 장점도 결국 이 선택을 더 잘하게 해준다.⁴

이 감각을 익히기 위해서는 작업할 때 늘 네 가지 질문을 붙들면 좋다.

• 무엇을 고정하고, 무엇을 가변으로 둘 것인가?

• 어느 단계에서 스타일 일관성을 검사할 것인가?

• 어디서 여러 갈래로 분기해 비교할 것인가?

• 최종 결과를 언제 Figma Design로 넘길 것인가?

질문이 분명해지면 노드도 정리된다. 반대로 질문이 흐리면 워크플로우는 곧 스파게티가 된다.

제품 팀은 Weave를 어디에 쓰면 좋을까

처음부터 영화 같은 모션을 만들 필요는 없다. 제품 팀이 현실적으로 시작하기 좋은 장면은 의외로 익숙한 곳들이다.

브랜드 마케팅 팀은 같은 비주얼 언어를 유지한 채 랜딩 페이지 히어로, SNS 커버, 앱 스토어 스크린샷용 배경, 캠페인 배너를 한 흐름으로 묶을 수 있다. 이때 스타일 정의와 비율별 출력이 재사용 자산이 된다.²⁴

프로덕트 디자이너는 온보딩 일러스트, 빈 상태 비주얼, 프로모션 카드용 이미지 세트를 만들 때 Weave를 활용할 수 있다. 중요한 것은 예쁜 결과 하나가 아니라, 다음 스프린트에도 같은 톤으로 다시 생산할 수 있는 구조를 만드는 것이다.

모션이 필요한 팀에게는 더욱 유용하다. 정적인 화면 목업과 별개로, 앱 런치 영상이나 웹 히어로용 짧은 루프 애니메이션을 같은 맥락 안에서 만들 수 있기 때문이다. 이전에는 이미지 툴, 모션 툴, 편집 툴을 옮겨 다녀야 했다면, Weave는 그 왕복을 줄이려는 방향에 서 있다.¹⁴

처음 시작할 때는 템플릿을 뜯어보는 편이 낫다

Weave는 빈 캔버스에서 바로 잘하기 어려운 도구다. 오히려 잘 만든 워크플로우를 가져와 뜯어보는 방식이 훨씬 빠르다. Figma Community의 Weave 페이지에는 ready-made 워크플로우가 올라와 있고, 이를 열어 자신만의 입력과 스타일로 바꿔볼 수 있다.²

처음 연습은 아주 작게 시작하면 된다. 예를 들어 다음 순서면 충분하다.

• 템플릿 하나를 연다.

• 레퍼런스 이미지 두 장을 내 프로젝트 이미지로 교체한다.

• 설명 노드와 스타일 노드를 읽어보며 문장을 수정한다.

• 한 번에 여러 비율을 뽑아 채널별 차이를 본다.

• 가장 마음에 드는 결과를 Figma Design 파일에 가져가 실제 화면 위에 얹어본다.

이렇게 하면 Weave를 "신기한 AI 쇼케이스"가 아니라 "실제 산출물이 오가는 생산 흐름"으로 이해하게 된다.

Weave의 한계도 분명하다

물론 Weave가 만능은 아니다. 오히려 장점이 곧 진입 장벽이 되기도 한다.

첫째, 노드 기반 인터페이스는 자유로운 만큼 학습 비용이 있다. 채팅형 도구처럼 바로 한 줄 입력하고 끝나는 경험을 기대하면 어렵게 느껴질 수 있다. 둘째, 결과 품질은 단계마다 쓰는 모델과 설정에 영향을 많이 받기 때문에, 한 번에 완벽한 답이 나오지 않을 수 있다. 셋째, 현재 Weave는 별도 환경으로 접근하는 성격이 강하고, 메인 Figma 제품과는 과금과 크레딧 체계가 분리되어 이해될 여지가 있다.⁵

또 하나 기억할 점이 있다. Weave는 훌륭한 UI 화면 생성기라기보다, 멀티모달 생성 워크플로우 도구에 가깝다. 따라서 제품 인터페이스의 논리, 컴포넌트 구조, 접근성, 상호작용 설계는 여전히 Design와 Make, 그리고 디자이너의 판단이 맡아야 한다. Weave는 그 앞뒤를 풍성하게 만드는 도구이지, 제품 디자인의 모든 질문을 대신 답해주지는 않는다.

지금 Weave를 배워야 하는 이유

그럼에도 불구하고 지금 Weave를 배워둘 이유는 분명하다. 생성형 AI의 경쟁력은 더 이상 "누가 더 빨리 한 장을 뽑느냐"에 머물지 않기 때문이다. 앞으로의 차이는 "누가 더 일관되게, 더 많이, 더 재사용 가능하게, 더 팀 친화적으로 뽑느냐"에서 벌어진다.

Weave는 바로 그 질문에 대한 Figma식 답변이다. 하나의 멋진 결과보다, 좋은 결과가 반복해서 나오게 만드는 구조. 개인의 재주보다, 팀이 함께 다룰 수 있는 시각적 워크플로우. 우연한 성공보다, 다시 실행 가능한 생산 파이프라인. 그 방향을 이해하면 Weave는 낯선 도구가 아니라 아주 익숙한 디자이너의 일, 즉 구조를 설계하는 일의 연장선으로 보이기 시작한다.

마지막으로 이 장의 핵심을 한 문장으로 정리해보자.

Weave의 시대에 디자이너는 화면을 만드는 사람을 넘어, 생성이 일어나는 흐름을 설계하는 사람이 된다.

참고

¹Figma Weave  AI-Powered Design Workflows, Built for Creative Pros

²Figma Weave AI Powered Design Workflows  Figma

³AI UI generator in Figma Make

⁴Five Figma Weave workflows that supercharge AI-powered design

⁵Figma Weave Just Launched AI Workflows on Community — How to Build an Image-to-SVG Pipeline Without Leaving Figma

⁶Reintroducing Figma Weave with 20+ new workflows for AI-native design - iTWire