읽을거리 · AI 디자인
움직이는 배경을 PNG로 내보내면 멈춘다, 피그마 셰이더는 4096px까지 뽑고 코드 레이어로도 넘어간다
11월 2일자 피그마 릴리스 노트와 도움말 두 편에서 확인한 것을 적었다. 셰이더 정식 제공, 최대 4096px 내보내기, 코드 레이어에서 재생 버튼을 눌러야 하는 이유. 브라우저 조건이 두 문서에서 다르게 적힌 부분과 11월 4일 이후 크레딧도 함께 적었다.
카드 배경에 움직이는 그라데이션을 얹은 시안을 보냈더니 "PNG로 받으면 이건 안 움직이는 거죠"라는 답이 왔다. (가정해서 그린 장면이다. 내가 겪은 일은 아니다.) 시안 파일에서는 돌아가던 효과가 내보내는 순간 멈춘 그림 한 장이 되고, 개발 쪽에는 "이 효과는 어떻게 구현하나요"라는 질문만 남는다.
11월 2일자 피그마 릴리스 노트에 이 사이에 걸치는 항목이 올라왔다. 제목은 "Export shaders at higher resolutions and bring them into code layers". 셰이더(그림 위에 질감이나 움직임을 입히는 효과)를 더 큰 해상도로 내보내고, 코드 레이어로도 가져간다는 내용이다. 이 글은 직접 써 본 후기가 아니다. 릴리스 노트, 셰이더 도움말, 코드 레이어 도움말을 열어 확인한 것만 적었다. 노트 개별 주소는 확인하지 못해 목록 페이지를 출처로 달았고, 내 계정에서 4096px 내보내기를 해 보지는 못했다.
노트에서 읽은 다섯 줄
노트는 짧다. 바뀐 점을 아래처럼 요약할 수 있다.
| 항목 | 노트에 적힌 내용 |
|---|---|
| 제공 상태 | 셰이더가 모든 사용자에게 정식 제공(GA)된다 |
| 내보내기 해상도 | 렌더링과 내보내기가 최대 4096px |
| 코드 레이어 | "build this with code"를 쓸 때 셰이더가 같이 들어간다 |
| 브라우저 | 코드 레이어 쪽은 크롬 157에서만, 그 주에 배포 중 |
| 재생 | 코드 레이어에서 셰이더를 보려면 레이어 오른쪽 위 Play를 누른다 |
출처: Figma 릴리스 노트 2026-11-02자 항목 (2026-11-03 확인). 표는 노트의 문장을 요약한 것이다.
셰이더가 무엇인지부터
도움말에 따르면 셰이더는 레이어에 입히는 시각 효과다. 두 종류가 있다. 셰이더 채우기는 패턴, 그라데이션, 노이즈, 질감을 만든다. 셰이더 효과는 이미 있는 모습을 바꾼다. 색 이동, 일그러짐, 필름 입자, 하프톤, 흐림 같은 것이다.
정지된 것도 있고 움직이는 것도 있다. 마우스를 올리면 반응하는 것도 있다고 한다. 채우기와 선 항목, 효과 항목에 다른 채우기나 효과와 겹쳐 쓸 수 있고, 조합을 스타일로 저장해 팀 라이브러리에 올릴 수도 있다.
쓰는 조건은 이렇다. 스타터, 프로페셔널, 교육, 오가니제이션, 엔터프라이즈 요금제에서 파일 편집 권한이 있어야 한다. 셰이더를 쓰는 것 자체로는 AI 크레딧이 나가지 않는다. 피그마 에이전트로 셰이더를 만들거나 고칠 때는 나간다. 셰이더는 WebGPU(브라우저가 그래픽 칩을 쓰는 방식)가 필요하고, 호환 모드에서는 안 된다고 적혀 있다.
4096px로 뽑는다는 것
노트의 해상도 문장은 하나다. 셰이더를 최대 4096px로 렌더링하고 내보낼 수 있고, 그래야 시각적 디테일이 유지된다는 취지다.
질감이 고운 셰이더, 예를 들어 필름 입자나 하프톤은 작게 뽑으면 점이 뭉개진다. 큰 화면 배경이나 인쇄용 시안에서 먼저 눈에 띄는 부분이다. 4096px는 가로세로 중 어느 쪽 기준인지, 어떤 파일 형식으로 나오는지는 노트 요약에서 확인하지 못했다. 도움말에도 내보내기 형식과 해상도 한도는 나오지 않는다.
그리고 움직이는 셰이더를 내보내면 무엇이 나오는지는 따로 말하지 않았다. 처음 장면의 질문, 즉 PNG로 받으면 안 움직이는지에 대한 답은 노트에 없다. 움직임을 보여 줘야 하면 아래 코드 레이어 쪽이 그 자리를 노린 것으로 읽힌다.
코드 레이어로 넘길 때 누르는 곳
코드 레이어는 캔버스 위에 놓이는, 실제 코드로 돌아가는 프로토타입이다. 도움말은 이것을 오픈 베타라고 적고 있고, 순차적으로 풀리고 있다고 한다. 앞서 코드 레이어 오픈 베타 글에서 만드는 방법을 다뤘다.
셰이더를 가져가는 순서는 노트에 세 단계로 적혀 있다.
- 셰이더를 넣은 프레임을 시안 안에 둔다.
- 코드 레이어 만들기에서 "build this with code"를 쓴다. 도움말 기준으로는 프레임을 고르고 툴바의 Code에서 Build selection을 누르는 길이다.
- 코드 레이어의 셰이더가 움직이지 않으면, 레이어 오른쪽 위의 Play를 누른다.
3번이 눈에 걸린다. 셰이더 도움말도 같은 말을 한다. 움직이는 셰이더는 선택한 레이어 위의 Play를 눌러야 돌고, 한 페이지에서는 움직이거나 반응하는 셰이더가 한 번에 하나만 돈다. 그러니 한 화면에 움직이는 배경을 여러 개 깔아 둔 시안은 하나씩 켜서 봐야 한다. 이 "한 번에 하나" 제한이 코드 레이어 안에서도 그대로인지는 확인하지 못했다.
브라우저 조건이 두 문서에서 다르다
노트는 이 흐름이 브라우저에서만, 크롬 157에서 된다고 하고 그 주에 배포한다고 적었다. 코드 레이어 도움말은 조금 다르게 쓴다. 크롬이어야 하고 HTML-in-Canvas 플래그(chrome://flags/#canvas-draw-element)가 필요하다고 한다. 피그마 데스크톱 앱과 다른 크로미움 계열 브라우저는 지원하지 않는다고도 한다.
두 문장이 같은 조건을 다른 시점에 쓴 것인지, 크롬 157부터는 플래그가 필요 없어지는 것인지는 문서에 나오지 않는다. 지금 쓰는 크롬 버전은 주소창에 chrome://version을 넣으면 보인다.
11월 4일에 끝나는 것
코드 레이어 도움말 기준으로, 유료 요금제에서 코드 레이어를 만들고 고치는 일은 11월 4일까지 무료다. 같은 프롬프트에 섞인 다른 에이전트 작업은 크레딧을 쓴다. 11월 4일 이후에는 코드 레이어 작업도 다른 에이전트 기능처럼 AI 크레딧으로 나가고, 쓰는 양은 작업이 복잡할수록 달라진다고 적혀 있다.
MCP(피그마와 AI 코딩 도구를 잇는 연결)로 프로젝트를 가져올 때는 크레딧이 안 들지만, 그 뒤에 메이크 에이전트가 고치면 든다. 이 가져오기는 풀 시트(Full seat)가 필요하다. MCP 가져오기는 10분 넘게 걸릴 수 있고, 일부 프로젝트는 고쳐야 돌아간다고 한다.
크레딧이 어떻게 나가는지는 Weave 모델 크레딧 글에서 따로 짚었다.
아직 모르는 것
- 4096px의 기준. 긴 변인지, 가로인지, 정사각형 기준인지 적혀 있지 않다.
- 내보내기 형식과 용량. 큰 해상도에서 파일이 얼마나 커지는지 문서에 없다.
- 움직이는 셰이더의 내보내기 결과. 정지 이미지인지 다른 것인지 나오지 않는다.
- 정식 제공의 범위. 영문 셰이더 도움말에는 베타 표시가 없다. 검색 결과에 잡힌 다른 언어 도움말 요약은 오픈 베타라고 한 것 같았는데, 그 문서를 내가 열어 보지는 않았다.
- 크롬 조건. 위에 적은 대로 두 문서가 다르다.
그래서 지금은
내려받을 해상도를 정하고 한 장만 뽑는다. 질감이 고운 셰이더 하나를 4096px로 내보내 100% 확대로 본다. 같은 셰이더를 작은 크기로도 뽑아 비교하면 큰 해상도가 필요한 장면이 어디인지 알 수 있다. 용량은 직접 확인해야 한다.
무료 기간을 쓸 거면 11월 4일 안에 한 파일만. 셰이더를 넣은 프레임 하나로 Build selection을 눌러 본다. 움직이지 않으면 Play부터 누르고, 그래도 안 되면 크롬 버전과 플래그를 본다. 크레딧이 걸리는 건 그다음부터이니 한 파일로 가늠해 보면 된다.
움직이는 배경은 한 페이지에 하나씩. 한 번에 하나만 도는 제한이 있으니, 시안 한 장에 하나만 두고 나머지는 정지 셰이더로 둔다. 셰이더를 고치다 이전 모습이 그리워지면 버전 기록이 있다.
출처: Figma 릴리스 노트, Shaders in Figma Design (도움말), Code layers in Figma Design (도움말)