미드저니(Mid-journey)와 달리(Dall-E) 같은 도구들은 영감을 주는 데는 탁월했지만, 픽셀 단위의 정교함이 요구되는 UI 디자인 실무, 특히 개발팀과 협업하는 ‘핸드오프(Hand-off)’ 단계에서는 여전히 한계가 있었습니다. 예쁜 그림을 그려주기는 했지만, 결과물의 레이어 구조가 엉망이거나 우리 회사 디자인 시스템과는 전혀 맞지 않는 경우가 많았기 때문입니다.

하지만 Figma와 Gemini 3.0의 통합은 이 게임의 규칙을 완전히 바꿉니다. 이번 통합의 핵심은 AI가 단순한 아웃풋 생성 보조를 넘어, 디자인 시스템을 이해하고 코드 기반의 인터랙티브 프로토타입을 정확하게 생성하는 ‘시스템 인식 파트너’로 바뀌었다는 점입니다.

이제 AI는 텍스트를 입력하면 화면을 뱉어내는 자판기가 아닙니다. 디자인 시스템을 이해하기 시작했고, 내 의도를 파악하며, 우리 팀의 레거시 코드를 이해해 실제로 작동하는 제품을 함께 만들 동료가 되었습니다. Figma의 AI 기능들이 Gemini 3.0의 멀티모달 추론 능력을 만나 어떻게 실무 현장을 혁신하는지, 그리고 디자이너와 개발자의 일하는 방식은 구체적으로 어떻게 달라질지, 직접 구현한 결과물과 함께 단계별로 살펴보겠습니다.

실시간 인터랙티브 프로토타이핑

기존의 피그마 프로토타이핑은 일종의 눈속임이었죠. 클릭하면 화면이 넘어가는 트랜지션 정도만 보여줄 뿐, 데이터는 가짜였고 개발 로직은 존재하지 않았습니다. 하지만 Gemini 3.0이 탑재된 Figma는 디자인 툴 안에서 백엔드 로직이 포함된 실제 앱을 만듭니다. 이제 상상이 아니라, 실제를 테스트할 수 있는 것입니다.

실제 데이터 연동으로 완성하는 경험

올해 7월, 피그마는 Supabase와 같은 서비스형 백엔드(BaaS) 플랫폼과의 연동 기능을 공개했습니다.

기존 방식에서는 로그인 실패 화면을 디자인하기 위해 디자이너가 ‘비밀번호 입력 전’, ‘입력 중’, ‘오류 발생’, ‘성공’이라는 4개의 정적 프레임을 각각 따로 그려야 했습니다. 그리고 개발자에게 “이때는 빨간색 테두리가 나와야 해요”라는 주석을 덧붙였죠.

이제 Gemini 3.0을 탑재한 Figma의 AI 기반 UI 생성 기능, Figma Make를 활용하면 간단한 명령으로 실제 데이터 연동까지 완료된 프로토타입을 만들 수 있습니다. 디자이너가 프롬프트 창에 “Supabase의 user_auth 테이블과 연동해서 실제 로그인 로직이 작동하는 폼을 만들어줘. 에러 시 토스트 메시지를 띄워”라고 입력하면, Gemini는 Supabase API를 이해한 다음 Figma 캔버스 안에서 실제로 작동하는 인풋 필드와 로직을 생성합니다.

그 결과, 프로토타입 뷰 모드에서 실제 이메일을 입력하면 데이터베이스를 거쳐 로그인이 되거나, 비밀번호가 틀리면 실시간으로 오류 메시지를 띄울 수 있습니다.

명령어 하나로 Supabase 연동 후 로그인 에러 토스트를 띄운 화면 <출처: 작가>

말로 설계하는 복잡한 로직

지금까지 디자이너들이 구현하기 가장 어려웠던 영역은 실시간, 그리고 조건부 인터랙션이었습니다. 비밀번호를 타이핑하는 화면을 만들거나 “장바구니가 비었으면 A 화면, 채워져 있으면 B 화면으로 가라”는 로직을 설계하려면 복잡한 변수 설정이 필요했기 때문입니다.

하지만, 이제 더는 인터랙션 설계에 시간을 과도하게 들이지 않아도 좋습니다. Figma가 자연어로 복잡한 로직까지 이해하고 구현하며 이 장벽을 허물고 있습니다. 디자이너가 “사용자가 스크롤을 50% 이상 내리면 상단 바 색상을 반전시키고, ‘맨 위로 가기’ 버튼을 페이드인 시켜줘”라고 말하면, Gemini 3.0 Pro는 이를 실제 실행할 수 있는 코드로 변환해 인터랙션 패널에 적용합니다. 곧 디자이너는 복잡한 인터랙션 프로토타이핑 노드를 연결할 필요 없이, 자연어로 로직을 설명해 고도의 상호작용을 구현할 수 있습니다.

스크롤을 내리면 상단 바 색상이 반전되고 버튼이 페이드 인 되는 인터랙션 <출처: 작가>

이에 따라 실무에서 디자이너는 더 이상 경우의 수마다 아트보드를 복제할 필요가 없습니다. 상태별 화면을 그리는 데 쓰이던 시간은 줄어들고, 데이터의 흐름과 예외 처리 로직을 설계하는 데 더 집중하게 됩니다. PM이나 기획자 역시 개발이 완료되기 전, 기획 단계에서도 기능을 실제에 가깝게 테스트할 수 있습니다. “이 로직이 사용자에게 어색하지 않을까요?”라는 질문을 회의실에서의 상상이 아니라, 작동하는 프로토타입으로 검증하는 것입니다.

모션 디자인의 자동 일치와 유지보수

지금까지 인터랙션 디자인 수정은 디자이너에게 가능하다면 피하고 싶은 어려운 숙제와 같았습니다. 버튼의 위치를 바꾸거나 전체적인 톤 앤 매너를 변경하면, 그에 딸린 호버 효과와 클릭 애니메이션, 페이지 트랜지션까지 처음부터 다시 손봐야 하는 번거로움이 컸기 때문입니다.

이제 Figma에 들어온 Gemini 3.0이 화면 안 객체들의 맥락을 인식해 이런 번거로운 작업을 자동으로 처리해 줍니다. 디자이너가 “전체적인 무드를 좀 더 활동적이고 아기자기한 감성으로 바꿔줘”라고 요청하면, 디자인 시스템 전반을 기준에 맞춰 체계적으로 수정합니다. 버튼 애니메이션의 계수를 조정해 묵직했던 모션을 통통 튀는 움직임으로 자동 변환하거나, 호버 시 반응 속도와 그림자 확산 범위까지, 입력받은 자연어 키워드에 맞게 미세하게 조정합니다.

핸드오프의 종말

그동안 디자이너가 Figma에서 오토 레이아웃을 아무리 완벽하게 잡아도, 개발 단계에서는 디자인 구조를 그대로 코드로 옮기기 어려워 결국 다시 구현해야 했습니다. 이 과정에서 디자이너가 의도한 여백과 정렬, 미세한 인터랙션 같은 섬세한 표현이 누락되거나 왜곡되는 일이 흔했죠. 그래서 이를 맞추기 위해 디자인 QA를 여러 차례 반복할 수밖에 없었습니다. Gemini 3.0은 이런 ‘번역 오류’를 제로에 가깝게 만듭니다.

충실하게 만든 코드 생성 SVG 애니메이션

이제 단순한 HTML/CSS 변환을 넘어섭니다. 복잡한 그래픽이나 유기적인 형태의 UI 요소까지 Figma가 코드로 바꿔줍니다.

예를 들어 디자이너가 크리스마스 캘린더 앱의 배경으로 루돌프가 뛰어다니는 모양의 패턴을 원할 때, Figma Make에 “첨부한 루돌프 이미지를 SVG 코드로 애니메이션을 넣어 뛰어다니는 배경을 생성해줘”라고 명령하면 Gemini 3.0은 이미지 파일(PNG/JPG)을 만드는 대신 즉시 렌더링할 수 있는 SVG Path와 애니메이션 로직 코드를 생성해 캔버스에 적용합니다. 이 코드는 개발자가 복사해 붙여넣기만 해도 웹과 앱에서 동일하게 작동합니다.

물리 작용을 적용한 No-Code 애니메이션

기존에는 물리 엔진이 적용된 애니메이션, 예를 들어 카드를 벽에 던졌을 때의 효과 같은 것을 구현할 때, 개발자가 라이브러리를 써 직접 수학적 계산을 해야 했습니다.

하지만 이제는 디자이너가 자연어로 명령하면 구현까지 이어집니다. 이를테면 “이 카드를 스와이프할 때 마찰력 20, 텐션 180 정도의 느낌으로 튕겨 나가게 해줘”라고 입력했을 때, Gemini는 이를 물리 연산 코드로 변환해 프로토타입에 적용합니다. 디자이너는 수치를 조절하며 디테일을 확인할 테고, 그렇게 확정된 물리 상수는 그대로 개발 코드로 추출됩니다.

디자인 캔버스가 곧 라이브 서버

코드 생성에서 한 걸음 더 나아가, 이제는 배포까지 Figma 안에서 이루어지기도 합니다. Figma Site는 디자인 결과물을 즉시 라이브 웹사이트로 전환해 주는 기능입니다. “Publish” 버튼만 누르면 Figma Site로 바로 접속할 수 있는 URL이 생성됩니다.

실무에서는 이를 바탕으로 마케팅 랜딩 페이지나 이벤트 페이지를 개발팀 리소스를 거의 쓰지 않고도 디자이너 단독으로 런칭하고 운영할 수 있습니다. 더 이상 퍼블리셔나 프론트엔드 개발자에게 “이건 구현 못 해요”, “구현하려면 3일 걸려요”라는 말을 들을 필요가 없어지는 것입니다. 디자이너가 넘긴 결과물이 이미 ‘작동하는 코드이자 배포된 사이트’이기 때문입니다.

개발 지식이 없는 디자이너도 고급 인터랙션을 구현하고 서비스를 런칭할 수 있기에, 표현과 실행 사이의 한계는 사실상 사라집니다. 개발자 역시 UI 구현보다 데이터 바인딩과 비즈니스 로직 최적화에 집중할 수 있습니다.

시안 A, B, C를 넘어 Z까지

디자인 콘셉트를 잡는 날, 디자이너는 보통 안정적인 시안, 트렌디한 시안, 실험적인 시안까지 세 가지 정도를 준비합니다. 다양한 시안을 바탕으로 구성원 간 서비스 방향성을 맞추고, 더 높은 완성도로 발전시키기 위해서입니다. 다만 채택 여부도 모르는 불확실한 상황에서 시안을 꼼꼼하게 잡는 일은 실무자에게 스트레스로 다가옵니다. 그렇다고 러프하게 시안 작업을 하자니, 디자이너의 자아로 완성도를 완전히 내려놓기도 쉽지 않았죠.

이번 변화로 효율적인 Lo-Fi 화면을 만들자던 접근은, 완성도 높은 콘셉트를 다양하게 직접 고를 수 있는 단계로 넘어갑니다.

레이아웃 파괴 없는 스타일 유연성

Gemini 3.0의 강력한 지점은 구조 레이아웃과 스타일을 분리해 인식한다는 점입니다. 즉, 현재 작업 중인 대시보드 화면을 띄운 상태에서 “소프트 UI 형식으로 미니멀하게 콘셉트 잡아줘”, “다크 모드의 네온 글래스모피즘, 리퀴드 글래스 스타일로 바꿔줘”라고 요청할 수 있다는 뜻입니다. 그 결과 버튼 위치와 정보 위계는 그대로 유지하며, 전혀 다른 시각적 스타일을 가진 고퀄리티 시안이 즉시 생성됩니다. 텍스트 가독성이나 색상 대비 접근성까지 고려된 상태로 말이죠.

이로 인해 실무에서 디자이너의 시안 작업 시간은 획기적으로 단축됩니다. 대신 의사결정(Curation) 능력이 더욱 중요해집니다. AI가 제안한 수많은 스타일 가운데 우리 브랜드 정체성에 가장 부합하는 방향을 골라내고 디벨롭하는 안목이 실력의 기준이 될 것입니다.

협업 효율 역시 크게 높아집니다. 회의실에 Figma 화면을 띄워놓고, 클라이언트나 이해관계자의 피드백을 즉시 반영해 스타일을 바꾸는 라이브 디자인 미팅이 가능해지며 의사결정 단계를 최소화할 수 있습니다.

레이아웃을 유지한 상태로 만든, 전혀 다른 Hi-fi 디자인 시안 3가지 <출처: 작가>

디자인 시스템을 이해하는 AI 조수

많은 조직이 일관된 사용자 경험과 효율적인 협업을 위해 디자인 시스템을 구축하지만, 시간이 흐를수록 파편화되거나 레거시가 쌓여 운영이 점점 어려워지곤 합니다. Gemini 3.0은 이러한 디자인 시스템을 단순한 라이브러리가 아니라, 스스로 이해하고 업데이트하는 살아 있는 유기체처럼 관리합니다.

팀 라이브러리를 Export to Figma Make 하는 화면 <출처: 작가>

시스템 컴포넌트의 이해와 지능적 활용

기존 AI 생성 도구는 버튼을 그려달라고 하면, 프로젝트와 무관한 독자적인 버튼을 만들었습니다. 하지만 Figma Make에 들어온 Gemini 3.0은 우리 회사 디자인 시스템 라이브러리에 있는 컴포넌트를 끌어다 씁니다.

예를 들어 “감정 기록 앱을 만들어줘”라고 요청했을 때, 새로운 Figma Make는 인터넷에 있는 레퍼런스를 단순히 따라 만드는 수준에 머무르지 않습니다. 먼저 현재 프로젝트에 연결된 팀 라이브러리를 스캔하고, 헤더·푸터·카드 UI처럼 이미 정의된 자산(Assets)을 조합해 화면을 구성합니다. 화면 구성에 필요하지만 라이브러리에 아직 등록되지 않은 컴포넌트가 있다면, 기존 시스템의 규칙인 토큰, 타이포그래피, 스페이싱을 분석해 새로 생성합니다. 나아가 마치 처음부터 존재했던 것처럼 자연스러운 신규 컴포넌트까지 제안하기도 합니다.

Figma로 30분 만에 만든 랜덤 게임

지금까지 설명한 Gemini 3.0과 Figma의 시너지가 단순한 가설이 아님을 보이기 위해, 직접 작은 프로젝트를 수행해 보았습니다. 크리스마스 시즌을 겨냥한 ‘산타 경기 랜덤 순서 추첨 게임’을 만들었습니다.

기존 방식이라면 기획부터 에셋 제작, 복잡한 인터랙션 로직 설계와 개발까지 최소 며칠은 필요했을 작업입니다. 하지만 Gemini 3.0의 도움을 받아 단 30분 만에 기획부터 실제 작동하는 게임의 프로토타입까지 완성할 수 있었습니다.

백문이 불여일견입니다. AI가 실무의 속도를 어떻게 압도적으로 끌어올리는지, 아래 결과물을 통해 직접 확인해 보시기 바랍니다.

마치며

우리가 맞이할 변화는 분명합니다. 속도와 창의성을 동시에 얻는 새로운 업무 방식은 이미 시작되고 있습니다.

Figma와 Gemini 3.0의 결합 같은 변화들이 디자인과 개발 사이에서 반복되던 작업과 소통 비용을 크게 줄여줄 것입니다. 예전처럼 기획부터 디자인, 프로토타입, 전달, 개발, 검수까지 길게 이어지던 과정은 점차 짧아지며, 아이디어가 떠오르면 곧바로 AI와 함께 실제로 작동하는 화면을 만들고, 확인하고, 수정하는 흐름으로 바뀌고 있습니다.

이제 화면이 어떻게 구현되는지, 그 기본 원리를 이해하는 실무자일수록 AI를 더 잘 활용할 수 있습니다. 따라서 앞으로는 픽셀을 다듬는 능력보다 문제를 정의하고 해결 방식을 설계하는 역량이 더욱 중요해집니다. AI를 일을 빼앗는 존재가 아니라, 반복 작업과 소통 오류를 대신 맡아주는 동료에 가깝다고 여겨야 합니다.

AI의 발전은 디자이너를 단순한 화면 제작자에서 실제 제품을 만들어내는 사람으로 확장시킬 것입니다. 이 변화는 미래의 이야기가 아니라, 지금 우리 앞에서 이미 진행 중입니다.