※ 이 글에는 제휴 마케팅 링크가 포함될 수 있으며, 구매 시 수수료를 받을 수 있습니다.
디자이너가 그린 화면이 곧바로 움직이고, 클릭 한 번으로 디자인 레이어가 실제 동작하는 코드로 바뀐다면 어떨까요? 피그마(Figma)가 2026년 6월 24일 열린 Config 2026에서 발표한 신기능들은 바로 그 경계를 정조준합니다. 디자인과 코드를 별개의 단계로 나누던 기존 워크플로우를, 하나의 캔버스 위에서 합치겠다는 시도입니다.
이 글에서는 새로 추가된 코드 레이어(Code Layers), 네이티브 애니메이션, AI 스킬 등 핵심 기능을 정리하고, 동시에 솔직한 단점과 요금 구조까지 함께 살펴봅니다. 마케팅 문구가 아니라 실제로 무엇이 가능하고 무엇이 아직 안 되는지에 초점을 맞췄습니다.
핵심 기능: 디자인 캔버스에 들어온 코드와 모션
1. 코드 레이어 (Code Layers)
이번 업데이트의 핵심은 단연 코드 레이어입니다. 사용자는 캔버스 위의 어떤 디자인 레이어든 클릭 한 번 또는 프롬프트 입력만으로 인터랙티브한 코드 레이어로 변환할 수 있습니다 (출처: techcrunch.com). 피그마는 코드를 ‘여느 디자인 재료와 똑같이’ 다루겠다는 철학을 내세웠습니다. 즉, 정적인 목업이 아니라 실제로 동작하는 요소를 디자인 단계에서 바로 만질 수 있게 된 것입니다.
여기서 그치지 않습니다. 팀은 저장소(repository)를 클론해서 코드로부터 플로우를 추출하고, 이를 디자인 레이어로 가져와 멀티플레이어 공유 환경에서 함께 테스트할 수 있습니다 (출처: techcrunch.com). 디자이너와 개발자가 같은 화면에서 같은 동작을 보며 논의할 수 있다는 의미입니다.
다만 이 기능에는 분명한 한계가 있습니다. 피그마의 CPO 유키 야마시타(Yuhki Yamashita)에 따르면, 코드 레이어는 ‘프로덕션에 바로 쓸 수 있는 코드’가 아니라 빠른 탐색(rapid exploration)에 무게를 둔 기능입니다 (출처: techcrunch.com). 다시 말해 생성된 코드는 반복 실험과 테스트용이지, 그대로 배포하기 위한 것이 아닙니다. 또한 이 모든 기능이 AI 크레딧을 소비하기 때문에, 코드 레이어를 자주 생성하다 보면 플랜에 포함된 크레딧이 빠르게 소진될 수 있다는 점도 염두에 둬야 합니다.
2. 네이티브 애니메이션과 3D 변형 (Figma Motion)
그동안 디자이너들은 애니메이션을 만들려면 별도 소프트웨어에서 작업한 뒤 코드로 변환하는 번거로운 과정을 거쳐야 했습니다. 이제 피그마는 캔버스에서 애니메이션, 트랜지션, 3D 변형(transform)을 네이티브로 지원합니다 (출처: techcrunch.com). Figma Motion으로 불리는 이 기능은 타임라인과 키프레임 기반 편집, 다중 포맷 내보내기를 제공합니다.
이는 모션 디자인을 위해 애프터이펙트나 프로토파이 같은 별도 도구를 오가던 워크플로우를 단순화할 가능성이 있습니다. 그러나 단점도 존재합니다. 첫째, 전용 모션 도구에 익숙한 디자이너에게는 타임라인·키프레임 기반 인터페이스가 초기 학습 곡선을 요구할 수 있습니다. 둘째, 복잡한 고급 모션 그래픽(파티클, 정교한 이징 커브 조합 등)에서 전문 모션 소프트웨어 수준의 정밀도를 기대하기는 아직 이르다고 보는 편이 합리적입니다.
3. AI 셰이더 효과와 채우기
피그마는 AI로 셰이더(shader) 효과와 채우기(fill)를 생성하는 기능도 추가했습니다 (출처: techcrunch.com). 그라데이션 메시나 동적 시각 효과를 손으로 일일이 만들지 않고 프롬프트로 생성할 수 있어, 시각적 실험의 속도가 빨라집니다.
4. AI 스킬과 커스텀 플러그인
반복 작업을 자동화하고 싶을 때, 사용자는 텍스트 프롬프트만으로 재사용 가능한 AI ‘스킬(skills)‘을 만들 수 있습니다. 또한 레이아웃 생성기 같은 커스텀 플러그인도 프롬프트로 제작할 수 있습니다 (출처: techcrunch.com). 코딩 지식이 없는 디자이너도 자신만의 자동화 도구를 만들 수 있다는 점에서 의미가 큽니다.
5. 외부 도구 연결
피그마 AI 에이전트는 Notion, Excel, GitHub 같은 외부 도구를 연결해 더 풍부한 맥락(context)을 받아올 수 있습니다 (출처: techcrunch.com). 예를 들어 GitHub 저장소의 실제 코드 구조나 Notion 문서의 기획 내용을 참고해 AI가 작업하도록 만들 수 있습니다. 다만 이 통합 기능은 각 외부 서비스의 권한 설정과 데이터 연동에 의존하므로, 보안 정책이 엄격한 조직에서는 도입 전 검토가 필요합니다.
단점과 한계: 도입 전 반드시 알아야 할 것
기능이 화려한 만큼, 현실적인 한계를 명확히 짚는 것이 중요합니다.
1. 코드 레이어는 ‘배포용’이 아니다. 앞서 언급했듯, 코드 레이어로 생성된 코드는 빠른 탐색과 반복 실험을 위한 것입니다 (출처: techcrunch.com). 이 코드를 그대로 프로덕션에 올릴 수 있다고 오해하면 안 됩니다. 개발팀의 검수와 재작성이 여전히 필요하며, ‘디자인이 곧 완성된 코드’라는 기대는 현재로서는 과합니다.
2. AI 크레딧 소진과 추가 비용. AI 기능은 플랜과 시트(seat) 유형에 따라 정해진 월간 AI 크레딧을 소비합니다 (출처: figma.com/pricing). AI를 많이 쓰면 포함된 크레딧이 바닥날 수 있고, 2026년 3월 11일부터 피그마는 추가 크레딧을 별도 구매·구독 형태로 판매합니다 (출처: techcrunch.com). 즉, AI 의존도가 높은 팀은 표면 구독료 외에 변동 비용이 추가로 발생할 수 있습니다.
3. 일부 기능은 아직 미출시. 발표된 일부 역량, 예컨대 피그마가 인수한 Weavy 워크플로우 생성 도구는 아직 사용할 수 없으며 2026년 후반에 순차 출시될 예정입니다 (출처: techcrunch.com). 발표 시점의 데모와 실제 사용 가능 기능 사이에 시차가 있다는 점을 감안해야 합니다.
4. 학습 비용과 워크플로우 변화. 코드 레이어와 모션 기능을 제대로 활용하려면 디자이너와 개발자 모두 새로운 협업 방식에 적응해야 합니다. 도구가 강력할수록 팀 전체가 동일한 사용 규칙을 합의하는 데 시간이 필요합니다.
요금 및 AI 크레딧 한도
피그마의 모든 시트와 플랜에는 월간 AI 크레딧이 포함되며, 그 양은 플랜과 시트 유형에 따라 다릅니다 (출처: figma.com/pricing). 아래 수치는 모두 피그마 공식 가격 페이지 기준입니다.
- Starter (무료): $0 — 하루 150 AI 크레딧, 월 최대 500 크레딧 (출처: figma.com/pricing)
- Professional – Full seat: $16/월 — 월 3,000 AI 크레딧 (출처: figma.com/pricing)
- Professional – Dev seat: $12/월 — 월 500 AI 크레딧 (출처: figma.com/pricing)
- Organization – Full seat: $55/월 (연간 결제 기준) — 월 3,500 AI 크레딧 (출처: figma.com/pricing)
- Enterprise – Full seat: $90/월 (연간 결제 기준) — 월 4,250 AI 크레딧 (출처: figma.com/pricing)
무료 Starter 플랜으로도 AI 기능을 맛볼 수 있지만, 하루 150 크레딧이라는 제한 때문에 코드 레이어나 셰이더 생성을 자주 쓰면 금방 한도에 도달할 가능성이 큽니다. 본격적인 업무용이라면 Professional 이상이 현실적입니다. 가격과 크레딧 정책은 변동될 수 있으므로, 결제 전 반드시 공식 가격 페이지에서 최신 정보를 확인하시기 바랍니다.
비교표: 플랜별 핵심 차이
| 구분 | 월 요금 | 월 AI 크레딧 | 적합 대상 |
|---|---|---|---|
| Starter (무료) | $0 | 하루 150 / 월 최대 500 | 개인·학습·체험 |
| Professional (Full) | $16 | 3,000 | 소규모 팀, 프리랜서 디자이너 |
| Professional (Dev) | $12 | 500 | 개발자 시트, 코드 검수 중심 |
| Organization (Full) | $55 (연간) | 3,500 | 중대형 조직, 디자인 시스템 운영 |
| Enterprise (Full) | $90 (연간) | 4,250 | 대기업, 엄격한 보안·거버넌스 |
※ 모든 수치는 figma.com/pricing 기준이며 변동될 수 있습니다.
추천 대상
- 디자인-개발 협업에 마찰이 큰 팀: 같은 캔버스에서 동작하는 프로토타입을 보며 논의하고 싶다면 코드 레이어가 큰 도움이 될 수 있습니다.
- 모션 디자인을 자주 하는 디자이너: 별도 모션 도구를 오가는 번거로움을 줄이려는 경우 Figma Motion이 워크플로우를 단순화할 가능성이 있습니다.
- 반복 작업이 많은 디자인 시스템 운영자: AI 스킬과 커스텀 플러그인으로 정형화된 작업을 자동화하고 싶은 팀에 적합합니다.
- 반대로, 생성 코드를 그대로 배포하려는 팀: 코드 레이어는 프로덕션용이 아니므로, 이 기대를 가진 경우 도입 효과가 제한적입니다 (출처: techcrunch.com).
자주 묻는 질문 (FAQ)
Q1. 코드 레이어로 만든 코드를 그대로 서비스에 배포해도 되나요? 권장되지 않습니다. 피그마 CPO 유키 야마시타에 따르면 코드 레이어는 빠른 탐색에 초점을 둔 기능으로, 생성된 코드는 반복 실험과 테스트용입니다 (출처: techcrunch.com). 프로덕션 배포 전에는 개발팀의 검수와 재작성이 필요합니다.
Q2. 무료 플랜으로도 새 AI 기능을 쓸 수 있나요? 네, Starter(무료) 플랜에도 AI 크레딧이 포함되어 하루 150 크레딧, 월 최대 500 크레딧이 제공됩니다 (출처: figma.com/pricing). 다만 사용량이 많으면 한도에 빠르게 도달할 수 있어, 지속적인 업무용으로는 유료 플랜이 더 적합합니다.
Q3. 포함된 AI 크레딧을 다 쓰면 어떻게 되나요? 2026년 3월 11일부터 피그마는 추가 크레딧을 별도 구매 또는 구독 형태로 판매합니다 (출처: techcrunch.com). 따라서 AI 의존도가 높은 팀은 기본 구독료 외에 추가 비용이 발생할 수 있으니, 예산 계획 시 변동 비용을 고려하는 것이 좋습니다.
참고 링크
-(https://techcrunch.com/2026/06/24/figma-adds-code-layers-support-for-animations-more-ai-features-in-new-update/) -(https://www.figma.com/pricing/) -(https://www.figma.com/)
피그마의 이번 업데이트는 ‘디자인과 코드의 경계를 허문다’는 방향성을 분명히 보여줍니다. 코드 레이어와 네이티브 애니메이션은 디자이너와 개발자가 같은 언어로 대화할 수 있는 토대를 만들지만, 생성 코드가 배포용이 아니라는 점, AI 크레딧이 추가 비용으로 이어질 수 있다는 점, 일부 기능은 아직 출시 전이라는 점은 냉정하게 인식해야 합니다. 도구의 가능성과 한계를 함께 이해할 때, 새로운 워크플로우의 가치를 제대로 끌어낼 수 있습니다.