← 블로그로 돌아가기

Figma의 다음 전장은 디자인이 아니라 실행이다

AI가 화면 초안과 코드를 동시에 만드는 순간, 예쁜 캔버스만으로는 부족해진다. 디자인 도구의 다음 경쟁은 의도를 코드·모션·배포·검증까지 얼마나 손실 없이 옮기느냐에 달렸다. Figma가 캔버스 밖의 실행을 붙잡으려는 이유를 살펴보자.

TL;DR

  • Figma의 기존 해자는 멀티플레이어 캔버스였다.
  • AI 시대의 다음 해자는 코드, 모션, 셰이더, 에이전트 워크플로를 붙이는 실행력이다.
  • 디자인 툴은 더 이상 그림을 그리는 곳만이 아니라 의도 → 구현 → 검증을 연결하는 작업장이 되어야 한다.
  • 작은 제품 팀은 디자인-투-실행 템플릿과 검증 체크리스트부터 이 흐름을 시험할 수 있다.

왜 지금 중요한가

최근 디자인 도구와 AI를 같이 보면 같은 메시지가 반복된다.

캔버스는 여전히 강력하다. 하지만 AI가 디자인 의도와 실행 사이의 간극을 점점 줄이고 있다. 그 순간부터 제품의 중심은 캔버스 안이 아니라, 캔버스에서 무엇을 바로 실행할 수 있느냐로 이동한다.

이건 디자인 툴만의 이야기가 아니다. AI가 강해질수록 많은 소프트웨어가 같은 질문을 받는다.

사용자가 만든 의도를 어디까지 자동으로 실행으로 바꿔줄 수 있는가?

핵심 흐름

1. Figma가 처음 이긴 방식

Figma가 처음 시장을 먹은 이유는 단순히 예쁜 인터페이스 때문이 아니었다.

Figma는 브라우저에서 디자인 협업이 가능하다는 걸 증명했다.

  • 멀티플레이어 편집
  • 링크 하나로 공유되는 협업 공간
  • 피드백과 수정을 한 화면에서 반복하는 구조
  • 파일 버전 싸움 대신 실시간 동기화

즉, Figma는 디자인 파일을 정적인 산출물에서 살아 있는 협업 환경으로 바꿨다.

그때 Figma의 해자는 분명했다.

디자인을 만드는 방식 자체를 바꿨다.

2. 그런데 AI가 그 전제를 흔든다

AI는 지금 또 다른 층을 바꾸고 있다.

예전에는 디자이너가 캔버스에서 픽셀을 다듬고, 개발자가 그걸 코드로 옮겼다.

지금은 점점 이런 일이 가능해진다.

  • 디자인 의도를 텍스트로 설명한다.
  • 에이전트가 초안을 만든다.
  • 코드로 렌더링한다.
  • 모션과 인터랙션을 붙인다.
  • 검증하고 다시 고친다.

이렇게 되면 캔버스는 목적지가 아니라 중간 인터페이스가 된다.

중요한 질문은 더 이상 이것이 아니다.

  • 누가 더 좋은 캔버스를 만드나?

대신 이것이 된다.

  • 누가 의도에서 실행까지 가장 짧은 경로를 제공하나?

3. 캔버스는 여전히 필요하지만 충분하지 않다

캔버스는 시각적 의도를 정리하는 데 강하다.

문제는 AI가 더 잘하게 된 일이 많아졌다는 점이다.

코드가 캔버스 안으로 들어온다

AI 시대의 새로운 디자인 툴은 단순한 목업 툴이 아니다.

코드가 캔버스에 들어오면 의미가 바뀐다.

  • 정적인 시안이 아니라 실행 가능한 구성요소가 된다.
  • 디자이너가 픽셀만 만지는 게 아니라 구조와 상태를 본다.
  • 엔지니어와 디자이너의 대화가 덜 번역적이 된다.

캔버스는 이제 코드와 분리된 독립 세계가 아니라, 코드로 이어지는 더 큰 시스템의 입구다.

모션이 더 이상 별도 작업이 아니다

AI 시대에는 인터랙션이 후처리가 아니다.

모션은 단순한 장식이 아니라 이해를 돕는 실행 레이어다.

  • 상태 변화가 어떻게 보이는지
  • 사용자가 어디서 막히는지
  • 전환이 어떤 맥락을 설명하는지

이걸 캔버스 밖으로 미루면 제품은 여전히 그럴듯한 그림에 머문다.

모션이 안으로 들어오면 비로소 제품은 살아 있는 시나리오가 된다.

에이전트 워크플로가 붙는다

가장 큰 변화는 이거다.

AI는 이제 캔버스를 편집하는 사람이 아니라, 캔버스 주변의 반복 업무를 대신하는 쪽으로 간다.

예를 들면:

  • 여러 버전의 화면 초안 생성
  • 레이아웃 차이 비교
  • 컴포넌트 규칙 체크
  • 접근성/일관성 검토
  • 개발 핸드오프 패키징

이제 경쟁력은 “누가 더 예쁜 UI를 만드나”보다 “누가 더 적은 마찰로 실행 가능한 워크플로를 연결하나”로 이동한다.

실전 활용 팁

1. 의미가 보이는 프로젝트가 왜 중요한가

AI 시대에는 코드가 싸졌다. 하지만 구조를 잘 잡는 일은 여전히 어렵다.

이 말은 디자인 툴에도 그대로 적용된다.

AI가 기능을 쉽게 붙일수록 오히려 더 중요한 건 무엇을 구조화할지다.

아무거나 그려주는 툴은 많아진다.

하지만 진짜 강한 툴은 이런 질문에 답해야 한다.

  • 이 화면은 어떤 상태를 가진 프로젝트인가?
  • 이 버튼은 어떤 조건에서 살아나야 하나?
  • 이 인터랙션은 어떤 데이터 모델을 전제하나?
  • 이 프로토타입은 실제 실행으로 어디까지 이어지나?

즉, 의미가 보이는 프로젝트가 중요해진다.

겉모양을 빨리 찍는 건 쉽다.

진짜 어려운 건 의미 있는 구조를 유지한 채 실행 가능한 결과로 바꾸는 것이다.

2. 라이브 데이터는 이제 콘텐츠의 원재료가 된다

또 다른 흐름도 같은 방향이다.

정적인 편집 파일이 아니라, 계속 갱신되는 데이터를 자동으로 공유 가능한 결과물로 바꾸는 사례가 늘고 있다.

핵심은 이거다.

파일을 만드는 게 아니라, 계속 바뀌는 데이터를 공유 가능한 실행 결과로 바꾸는 것.

디자인 툴도 같은 질문을 받는다.

  • 캔버스에 머무를 것인가?
  • 아니면 배포, 공유, 검증, 반복까지 이어질 것인가?

AI 시대의 제품은 점점 만드는 도구에서 돌아가는 도구로 바뀐다.

3. 작은 제품 팀이 먼저 만들 수 있는 것

이 흐름은 작은 제품 팀에도 직접적인 기회를 준다.

  • Design-to-Execution 템플릿
  • Prototype-to-Workflow Generator
  • Live Content Pipeline
  • Execution Checklist for AI Products

핵심은 하나다.

“멋진 화면 생성”이 아니라 “실행 가능한 구조 생성”

바로 해볼 실험

오늘 당장 화면 하나로 시험할 수 있다.

  1. Figma에서 실제 상태가 있는 화면 하나를 고른다.
  2. 기본·로딩·오류·성공 상태를 명시한다.
  3. 디자인 토큰과 컴포넌트 규칙을 붙인다.
  4. AI로 실행 가능한 프로토타입이나 코드를 만든다.
  5. 원본 의도와 달라진 지점을 diff로 기록한다.
  6. 접근성·반응형·상호작용을 별도 체크리스트로 검증한다.

목표는 코드를 빨리 얻는 것이 아니다. 디자인 의도가 실행 과정에서 어디서 손실되는지 찾는 것이다.

리스크 / 반론

물론 반론도 있다.

  • Figma는 결국 캔버스로 계속 먹지 않나?
  • AI가 캔버스를 더 강화하면 실행까지 굳이 붙일 필요가 있나?
  • 구조를 너무 앞세우면 오히려 속도가 죽지 않나?

맞다. 그래서 답은 캔버스를 버리는 게 아니다.

캔버스는 여전히 강하다. 특히 협업과 비평, 탐색, 디자인 리뷰에는 중심 역할이 있다.

하지만 장기적으로는 두 가지 압박이 있다.

  1. 실행 비용 하락

    • AI가 코드와 초안을 더 빨리 만든다.
  2. 의도 번역 비용 하락

    • 디자이너의 설명이 바로 실행으로 이어질 수 있다.

이 둘이 합쳐지면, 캔버스는 계속 필요하지만 중심축은 흔들린다.

그래서 중요한 건 캔버스를 버리는 게 아니라, 캔버스를 실행 파이프라인의 한 단계로 재정의하는 것이다.

결론

Figma의 첫 번째 해자는 캔버스였다.

AI 시대의 다음 해자는 실행이다.

정확히 말하면:

  • 캔버스에서 시작하고
  • 코드와 모션으로 이어지고
  • 에이전트 워크플로로 반복되고
  • 검증 가능한 결과로 끝나는 구조

이 구조를 가장 잘 잡는 제품이 다음 시대의 디자인 도구가 된다.

디자인 도구를 고를 때도 질문을 바꿔야 한다. 예쁜 시안을 얼마나 빨리 만드는지가 아니라, 그 시안의 상태·규칙·의도가 실제 제품까지 얼마나 온전히 이어지는가를 보자.

그 연결을 가장 짧고 검증 가능하게 만드는 도구가 다음 디자인 워크플로의 중심이 된다.