본문으로 건너뛰기
AI LABS조회 8

AI 에이전트 기반의 새로운 디자인-코드 워크플로우: Figma 핸드오프의 종말

기존의 복잡한 디자인-개발 핸드오프 과정을 AI 에이전트 기반의 PRD 작성, 자동 프로토타이핑, 백엔드 생성 워크플로우로 대체하여 개발 속도를 혁신하는 방법을 다룹니다.

챕터별 상세

00:00

기존 디자인 프로세스의 붕괴와 AI의 역할

과거의 디자인 프로세스는 요구사항 정의, Figma 목업, 프론트엔드 핸드오프 순으로 진행되었으며 이는 잘못된 제품을 만드는 리스크를 방지하기 위한 리추얼이었다. AI 에이전트의 등장으로 이러한 실수를 수정하는 비용이 매우 낮아지면서 기존의 엄격한 단계들이 무의미해졌다. Anthropic의 Jenny Wen은 디자인 시간의 60-70%를 차지하던 프로토타이핑 비중이 30-40%로 줄어들었음을 확인했다. 결과적으로 비전 타임라인은 과거 2-5년 단위에서 현재 3-6개월 단위로 단축되었다.

Figma 핸드오프는 디자이너가 만든 정적 결과물을 개발자가 코드로 옮기는 과정을 의미하며, 이 과정에서 많은 커뮤니케이션 비용이 발생한다.

02:33

Actor 중심의 새로운 빌드 파이프라인 설계

새로운 프로세스는 기능(Feature)이 아닌 사용자(Actor) 정의에서 시작한다. 시스템에 누가 접속하는지, 그들의 목적이 무엇인지, 무엇을 할 수 없는지를 먼저 정의한다. 이를 위해 인터뷰 형식의 프롬프트를 사용하여 PRD(Product Requirements Document)를 마크다운 파일로 생성한다. 이 단계에서 기술 스택이나 API 스펙을 먼저 정하지 않고, 실제 제품처럼 느껴지는 프로토타입을 만드는 데 집중한다.

Actor 중심 설계는 시스템의 기능을 나열하기보다 실제 사용자의 여정과 권한을 먼저 정의하는 방식이다.

03:49

Layer 프롬프트를 통한 아키텍처 구조화

생성된 PRD를 바탕으로 Layer 프롬프트를 실행하여 페이지, 모달, 사용자 흐름을 포함하는 architecture.md 파일을 생성한다. 이 파일은 에이전트가 전체 시스템 구조를 이해하는 지도가 된다. 에이전트는 이 구조를 바탕으로 Next.js 프론트엔드 코드를 작성하며, 초기에는 백엔드 연결 없이 Mock 데이터를 사용하여 UI를 구현한다. 이 방식은 에이전트의 컨텍스트 윈도우를 효율적으로 관리하고 환각 현상을 방지한다.

architecture.md는 에이전트가 코드 작성 시 참고할 수 있는 최상위 설계 문서 역할을 한다.

07:03

Supabase MCP를 활용한 데이터베이스 자동화

프론트엔드 승인 후 에이전트는 작성된 코드와 PRD를 분석하여 API 스펙을 정의한다. 이후 Supabase MCP(Model Context Protocol) 서버를 사용하여 데이터베이스 프로젝트 생성, 스키마 정의, 마이그레이션을 자동화한다. 개발자가 수동으로 SQL 쿼리를 작성하거나 DB 콘솔을 조작할 필요 없이 에이전트가 직접 DB 환경을 구축한다. 이는 프론트엔드와 백엔드 간의 데이터 정합성을 완벽하게 유지하게 한다.

MCP(Model Context Protocol)는 AI 모델이 외부 도구나 데이터베이스와 직접 상호작용할 수 있게 해주는 표준 프로토콜이다.

08:07

백엔드 레이어 통합과 에이전트 오케스트레이션

결제 처리, 알림, 분석 등 복잡한 로직이 필요한 경우 전용 백엔드 API 레이어를 추가한다. Oz와 같은 클라우드 에이전트 오케스트레이션 플랫폼을 사용하여 독립적인 백엔드 에이전트를 실행한다. 에이전트는 약 15분 만에 전체 백엔드 레이어를 구축하며, 마지막으로 Google 인증 및 Stripe 결제 연동과 같은 세부 사항을 수정하여 제품을 완성한다. 이 모든 과정은 에이전트의 작업 지속성(Task Persistence) 덕분에 가능해졌다.

에이전트 오케스트레이션은 여러 AI 에이전트가 협력하여 복잡한 작업을 수행하도록 관리하는 것을 의미한다.

언급된 리소스

AI 분석 전체 내용 보기

AI 요약 · 북마크 · 개인 피드 설정 — 무료

출처 · 인용 안내

원문 발행 2026. 03. 10.수집 2026. 03. 10.출처 타입 YOUTUBE

인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.