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

• •AI는 잘못된 방향으로 개발했을 때 발생하는 수정 비용을 획기적으로 절감했다
• •엔지니어링 속도의 변화가 디자인 프로세스의 변화를 강제했다
• •장기적인 비전보다 3-6개월 단위의 빠른 실행이 중요해졌다

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

• •기능 나열보다 시스템과 상호작용하는 Actor 정의가 우선이다
• •PRD 생성 프롬프트를 통해 구조화된 요구사항 파일을 자동 생성한다
• •프로토타입 단계에서는 기술적 제약보다 사용자 경험 확인에 집중한다

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

• •PRD를 페이지와 사용자 흐름 단위로 분해하여 architecture.md를 생성한다
• •프론트엔드 프로토타입은 Mock 데이터를 사용하여 빠르게 구현한다
• •구조화된 문서 제공으로 에이전트의 작업 정확도를 높인다

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

• •에이전트가 프론트엔드 코드를 기반으로 API 스펙을 역으로 추출한다
• •Supabase MCP를 통해 SQL 작성 없이 DB 스키마와 마이그레이션을 자동화한다
• •프론트엔드와 DB 간의 통합 복잡성을 획기적으로 낮춘다

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

• •Cloud Agent를 활용하여 복잡한 백엔드 API 레이어를 독립적으로 구축한다
• •작업 리스트(Task List)를 통해 에이전트의 작업 진행 상황을 관리한다
• •Stripe 및 Google Auth와 같은 외부 서비스 연동으로 최종 제품을 완성한다

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