Figma, AI 모션 그래픽 및 WebGPU 셰이더 도구 공개
Figma는 핵심 캔버스에 고급 AI 기능을 직접 통합함으로써 디자인과 개발 사이의 가교를 근본적으로 변화시키고 있습니다. 연례 Config 컨퍼런스에서 이 디자인 거물은 복잡한 크리에이티브 워크플로우를 자동화하기 위해 설계된 AI 기반 모션 그래픽 및 셰이더 효과를 포함한 고정밀 도구 모음을 발표했습니다.
Code Layers와 풀스택 최적화를 통한 격차 해소
Figma 생태계의 가장 중요한 변화 중 하나는 풀스택 개발에 최적화되도록 재설계된 캔버스입니다. "Code Layers"의 도입으로 디자이너와 엔지니어는 통합된 환경에서 작업할 수 있게 되었으며, 시각적 목업과 실제 코드베이스 사이의 경계가 효과적으로 허물어졌습니다.
개발자는 이제 저장소(repository)를 클론하고, Figma의 AI 에이전트를 사용하여 새로운 디자인 방향을 생성하며, 복잡한 흐름을 편집 가능한 디자인 레이어로 추출할 수 있습니다. 결정적으로, 이러한 업데이트는 변경 사항을 코드로 다시 동기화할 수 있는 양방향 워크플로우를 지원합니다. AI 에이전트와 코딩 도구를 단일 공간으로 가져옴으로써, Figma는 단순한 프로토타이핑 도구를 넘어 전체 제품 개발 라이프사이클의 중심 허브로 진화하고 있습니다.
생성형 모션 및 AI 기반 애니메이션
Figma는 UI/UX 디자인에서 가장 많은 시간이 소요되는 측면 중 하나인 모션 문제를 해결하고 있습니다. 새로운 Motion 도구를 통해 팀은 플랫폼 내에서 직접 애니메이션, 트랜지션, 3D 변형(transform)을 협업하여 디자인할 수 있습니다.
모든 움직임을 수동으로 키프레임 작업하는 대신, 사용자는 챗봇 인터페이스를 활용하여 애니메이션을 "프롬프트"로 생성할 수 있습니다. 이러한 AI 기반 방식은 크리에이터가 특정 바운스(bounce)나 슬라이드(slide)와 같은 트랜지션을 설명하면 소프트웨어가 자동으로 애니메이션을 생성할 수 있게 해줍니다. 이러한 모션 에셋은 디자인 시스템과 연결되어 있고 코드로 뒷받침되기 때문에 즉시 "배포 가능한(ready to ship)" 상태이며, 디자인과 프론트엔드 엔지니어링 간의 핸드오프 마찰을 크게 줄여줍니다.
WebGPU 셰이더를 통한 고정밀 비주얼
시각적 충실도의 한계를 넓히기 위해, Figma는 WebGPU 기반의 새로운 셰이더 도구를 도입했습니다. 이를 통해 이전에는 도구의 제약으로 인해 불가능했던 커스텀 비주얼 처리 및 채우기(fill) 효과를 생성할 수 있습니다.
이제 사용자는 프롬프트를 사용하여 디더링(dithering), 픽셀화(pixelation), 정교한 블러(blur) 유형과 같은 복잡한 셰이더 효과를 캔버스에 직접 구축할 수 있습니다. 이 기능은 디자이너가 현대적인 웹 표준에 기반한 고성능의 하이엔드 비주얼 효과를 구현할 수 있도록 지원합니다. 이에 더해, 복잡하고 다단계인 AI 워크플로우를 단순하고 직관적인 캔버스 작업으로 전환하도록 설계된 20개 이상의 통합 AI 도구 모음인 "Figma Weave"가 함께 제공됩니다.
이것이 AI 환경에서 중요한 이유
Figma의 진화는 업계의 더 넓은 트렌드, 즉 "조력자로서의 AI"에서 "통합 엔진으로서의 AI"로의 이동을 시사합니다. 모션 및 셰이더 수학과 같은 전문 영역에 생성형 기능을 내장함으로써, Figma는 LLM과 생성형 AI가 어떻게 고도로 기술적인 전문 워크플로우에 적용될 수 있는지를 보여주고 있습니다. 이러한 발전은 크리에이티브 소프트웨어가 단순히 단순하고 반복적인 작업을 자동화하는 것을 넘어, 어떻게 인간의 전문성을 증강할 수 있는지에 대한 새로운 기준을 제시합니다.
핵심 요약
- 통합된 워크플로우: 새로운 Code Layers를 통해 개발자는 디자인 변경 사항을 코드와 직접 동기화할 수 있어 핸드오프 프로세스가 간소화됩니다.
- 생성형 모션: 디자이너는 이제 자연어 프롬프트를 사용하여 복잡하고 코드로 뒷받침되는 애니메이션 및 3D 변형을 생성할 수 있습니다.
- 고급 비주얼: WebGPU 기반 셰이더의 통합으로 간단한 AI 프롬프팅을 통해 디더링 및 픽셀화와 같은 고정밀 효과를 구현할 수 있습니다.