webgpu

Figma의 디자인 에이전트, 이제 맞춤형 도구와 더욱 풍부한 컨텍스트 지원 | Figma 블로그 (새 탭에서 열림)

Figma의 디자인 에이전트가 오픈 베타에서 더 많은 사용자에게 제공되며, 단순한 프롬프트를 넘어 사용자 정의 도구와 팀의 작업 맥락을 활용할 수 있게 됐다. 사용자는 에이전트에게 재사용 가능한 플러그인과 셰이더를 만들도록 요청해 Figma 캔버스 안에서 자신만의 디자인 워크플로를 구축할 수 있다. 이를 통해 에이전트는 결과물을 생성하는 도구를 넘어 사용자의 작업 방식을 이해하고 협업하는 파트너에 가까워진다. ## Figma 디자인 에이전트의 확장 - 에이전트는 Figma 캔버스에서 직접 작동하며, 디자인 작업의 유연성·정밀도·창작 제어력을 높인다. - 팀의 작업 방식과 실제 디자인 맥락을 이해할수록 단순히 결과물을 만드는 것을 넘어 협업할 수 있다는 점을 강조한다. - Figma는 에이전트와 사용자 정의 도구를 직접 시험할 수 있는 커뮤니티 플레이그라운드 파일도 제공한다. - 사용자의 요구를 자연어로 설명하면 에이전트가 도구 제작과 문제 해결 방법까지 제안한다. ## 프롬프트로 만드는 생성형 플러그인 - 기존에는 플러그인을 만들려면 개발 지식과 별도의 개발 환경이 필요했지만, 이제 에이전트에게 재사용 가능한 플러그인 제작을 요청할 수 있다. - 생성형 플러그인은 다음과 같은 작업에 활용될 수 있다. - HTML을 Figma 캔버스로 가져오기 - 대시보드 레이아웃 생성 - 데이터를 시각화하기 - 이미지 자산 자동 배치 - `PropsKit`을 사용하기 때문에 Figma의 기본 기능처럼 자연스럽게 동작한다. - 캔버스 안에서 직접 결과를 확인하고 반복 수정할 수 있어, 외부 도구를 오가는 번거로움이 줄어든다. - Figma 밖의 AI 서비스나 서드파티 API와 연동해야 하는 경우에는 기존 방식의 클래식 플러그인을 사용해야 한다. - 플러그인이나 셰이더 자체는 제작자, 팀원, 커뮤니티 사용자 모두 무료로 사용할 수 있지만, 에이전트에게 제작을 요청하는 기능은 일반 출시 후 AI 크레딧을 사용하게 된다. ## WebGPU 기반 셰이더 효과 - 에이전트는 픽셀이 렌더링되는 방식을 정의하는 작은 프로그램인 셰이더도 생성할 수 있다. - Figma의 WebGPU 기반 렌더러를 활용해 다음과 같은 시각 효과를 만들 수 있다. - 디더링 - 리퀴드 메탈 - 프랙털 노이즈 - 렌즈 왜곡 - 입자 늘이기 - 색상 외곽선 - 셰이더 효과는 네이티브 Figma 효과처럼 쌓아 사용할 수 있으며, 속성을 조절하거나 기본 효과와 결합할 수 있다. ## 셰이더 효과와 셰이더 필 - **셰이더 효과** - 레이어에 적용되는 사용자 정의 시각 효과다. - 입자 효과, 렌즈 왜곡, 컬러 아웃라인 등 다양한 효과를 만들 수 있다. - 여러 효과를 조합해 복합적인 결과를 만들 수 있다. - **셰이더 필** - 단색이나 일반 그라디언트를 넘어서는 동적·생성형 채우기다. - 수채화, 모아레, 패턴 그리드 등을 표현할 수 있다. - 디더 웨이브, 유체 하프톤, 파티클 웹, 마그네틱 필드 같은 프리셋으로 활용할 수 있다. - 사용자는 셰이더의 기능을 정의하고, 에이전트와 대화하며 UI와 조정 가능한 매개변수를 발전시킬 수 있다. - 사진에 콜라주, 마블링, 빛샘, 금속 엠보싱, 프리즘 효과를 적용하는 등 개인의 시각적 스타일을 재사용 가능한 워크플로로 만들 수 있다. ## 디자이너와 에이전트의 협업 방식 - 제품 디자이너 Edward Chechique는 과거 개발자 지원이나 여러 외부 도구가 필요했던 생성형 플러그인 제작을 Figma 안에서 직접 처리할 수 있게 됐다고 설명한다. - 크리에이티브 테크놀로지스트 Anna Zhang은 에이전트와 기능과 UI를 주고받는 과정을 “협상”에 비유한다. - 에이전트가 제안한 해결책과 생성 결과가 다음에 추가할 매개변수와 기능에 영향을 주면서, 일회성 생성보다 반복적인 공동 설계가 가능해진다. 자신만의 레이아웃·효과·데이터 시각화 도구가 필요하다면 에이전트로 생성형 플러그인이나 셰이더를 만들어 보는 것이 유용하다. 다만 외부 API 연동은 클래식 플러그인을 사용해야 하며, 에이전트 기반 제작 기능은 AI 크레딧 비용과 지원 범위를 확인하는 것이 좋다.

Figma 렌더링: Web (새 탭에서 열림)

Figma는 기존 WebGL 렌더러를 WebGPU 기반으로 확장해 GPU 병렬 처리와 더 명확한 오류 처리, 새로운 렌더링 최적화 기회를 확보했다. 다만 단순히 API를 교체하는 방식으로는 성능 향상을 보장할 수 없었기 때문에, WebGL 호환성을 유지하면서 그래픽 인터페이스와 셰이더·버퍼 처리 방식을 함께 재설계했다. 이 과정은 성능 회귀와 기능 중단을 피하기 위해 단계적으로 진행됐다. ## WebGL에서 WebGPU로 전환한 배경 - Figma는 2015년부터 브라우저에서 무한 캔버스를 구현하기 위해 WebGL을 사용했다. - 당시 WebGL은 3D 중심 API였지만, Figma는 이를 복잡한 2D 디자인 도구에도 적용할 수 있다고 판단했다. - 2023년 Chromium에 WebGPU 지원이 추가되면서 WebGL에서는 어려웠던 최적화가 가능해졌다. - 특히 컴퓨트 셰이더를 활용해 CPU 작업을 GPU의 대규모 병렬 처리로 옮길 수 있다. - WebGPU는 WebGL의 전역 상태 중심 구조보다 오류 처리가 명확하고, 상태 관리로 인한 버그도 줄일 수 있다. ## 드로 콜 인자를 명시적으로 관리 - 기존 WebGL 방식은 버텍스 버퍼, 텍스처, 머티리얼, 프레임버퍼 등을 전역 바인딩 지점에 먼저 연결한 뒤 `draw()`를 호출했다. - 바인딩된 리소스는 이후에도 유지되므로, 일부 입력을 갱신하지 않아 이전 상태가 남는 문제가 발생할 수 있었다. - Figma는 다음처럼 드로 콜에 필요한 리소스를 함수 인자로 직접 전달하도록 인터페이스를 변경했다. ```cpp context->draw(vertexBuffer, framebuffer, {texture}, material, …); ``` - WebGL 구현에서는 필요한 경우에만 실제 바인딩을 갱신하도록 지연 업데이트를 적용했다. - 이 변경은 WebGPU 도입 전에도 입력 누락으로 발생하던 WebGL 렌더러의 버그를 해결했다. - 각 드로 콜의 의존성이 코드에 명확히 드러나므로 유지보수성과 안정성도 향상됐다. ## GLSL과 WGSL을 함께 지원하는 셰이더 처리 - 셰이더는 GPU에서 실행되어 최종 픽셀을 생성하는 프로그램이다. - WebGL은 GLSL을 사용하지만 WebGPU는 WGSL을 사용하므로, 기존 GLSL 셰이더를 모두 WGSL로 수동 변환하면 두 버전을 중복 관리해야 했다. - Figma의 기존 셰이더는 WebGL 1용 구형 GLSL 형식이어서 일반적인 변환 도구만으로는 처리하기 어려웠다. - Figma는 자체 셰이더 프로세서와 오픈소스 도구 `naga`를 조합했다. - 기존 GLSL을 파싱한다. - 최신 GLSL 구조에 맞게 필요한 변환을 수행한다. - `naga`를 이용해 WGSL로 변환한다. - 최종적으로 GLSL과 WGSL을 모두 생성한다. - 변환 과정에서 셰이더 입력 타입과 데이터 레이아웃 같은 메타데이터도 추출해 애플리케이션에서 활용한다. - 파일 include 기능도 제공해 셰이더 코드의 모듈화와 재사용성을 높였다. ## WebGPU에 맞춘 유니폼 버퍼 설계 - 유니폼은 셰이더에 전달되는 전역 변수와 같은 데이터로, 색상이나 변환 행렬 등을 전달하는 데 사용된다. - WebGL에서는 각 유니폼을 개별적으로 설정할 수 있었다. ```javascript gl.uniform1f(locationAlpha, alphaValue); gl.uniformMatrix3fv(locationTransform, false, transformValue); ``` - Figma의 기존 인터페이스도 이 모델을 따라 유니폼을 하나씩 설정했다. - 그러나 WebGPU에서는 유니폼을 개별 호출로 전달할 수 없고, 여러 값을 하나의 유니폼 버퍼에 기록한 뒤 GPU에 한 번에 업로드해야 한다. - 따라서 WebGL API를 그대로 흉내 내 WebGPU를 구현하면 호출 오버헤드와 데이터 업로드 비용 때문에 성능이 오히려 저하될 수 있다. - WebGPU 전환의 핵심은 API 이름을 바꾸는 것이 아니라, 버퍼 레이아웃과 데이터 업로드 방식을 GPU 친화적으로 재설계하는 데 있다. ## 실용적인 결론 WebGPU 도입은 단순한 렌더링 API 교체가 아니라 상태 관리, 셰이더 컴파일, 유니폼 버퍼 구조까지 재설계하는 작업이다. 기존 API와의 호환성을 유지하되 드로 콜의 입력을 명시적으로 만들고, 셰이더 변환을 자동화하며, GPU 버퍼 단위로 데이터를 처리해야 성능과 안정성을 함께 확보할 수 있다.