AI 요약
Figma의 디자이너 Gui Seiz와 엔지니어 Alex Kern은 기존의 선형적인 '폭포수(Waterfall)' 워크플로우를 타파하는 새로운 협업 모델을 제시했습니다. 이들은 Figma MCP(Model Context Protocol)를 활용해 실제 실행 중인 웹 앱의 프로덕션 코드를 Figma 파일로 직접 불러와 편집 가능한 디자인 객체로 변환하는 과정을 시연했습니다. 디자인 수정 후에는 Claude Code를 통해 수동 CSS 조정 없이 변경 사항을 코드베이스에 즉시 반영하며, 이를 통해 디자인과 실제 구현물의 차이인 '디자인 드리프트'를 근본적으로 해결했습니다. AI의 도입으로 단순 실행 단계가 단축되면서 디자이너와 엔지니어의 역할은 상위 기획(Planning)과 세밀한 장인정신(Craft) 영역으로 재편되었습니다. 결과적으로 팀은 회원가입 플로우의 5가지 상태와 같은 복잡한 프로덕션 환경을 실시간으로 동기화하며 제품 개발 속도를 극대화하고 있습니다.
핵심 인사이트
- 실시간 양방향 워크플로우: 2026년 3월 11일 발표된 이 모델은 Figma MCP를 통해 프로덕션 코드를 Figma로 가져오고, Claude Code로 다시 푸시하는 '비디렉셔널 루프'를 완성했습니다.
- AI 코드 생성 효율성: 코드베이스 구조를 최적화함으로써 AI가 전체 코드의 약 90%를 더 효과적으로 작성할 수 있는 환경을 구축했습니다.
- 디자인 드리프트 제거: 정적인 디자인 파일 대신 실제 코드를 기반으로 작업하여 디자인과 개발 결과물 간의 불일치를 완전히 제거했습니다.
- 직무 역할의 변화: AI가 실행(Execution) 단계를 맡으면서 인간의 업무는 업스트림 기획과 다운스트림 크래프트로 이동했습니다.
주요 디테일
- MCP 기술 활용: Figma MCP를 사용해 라이브 웹 앱의 상태를 디자인 도구로 즉시 임포트할 수 있습니다.
- 다중 상태 내보내기: 회원가입 플로우의 5가지 서로 다른 상태를 한꺼번에 Figma로 추출하여 실제 운영 환경과 동일한 맥락에서 디자인 작업이 가능합니다.
- 자동화된 커스텀 스킬: Pre-flight 체크, Lint 수정, CI 모니터링을 자동화하는 커스텀 스킬을 생성하여 코드 푸시 전 안정성을 확보합니다.
- 도구 생태계 통합: Claude Code, Buildkite, Codex, Optimizely 등 최신 개발 및 협업 도구와의 긴밀한 통합을 지원합니다.
- 협업 방식의 혁신: 디자이너가 실제 코드 기반의 컴포넌트를 직접 조작함으로써 엔지니어와의 소통 비용을 획기적으로 줄였습니다.
향후 전망
- 정적 파일의 종말: 앞으로의 UI/UX 디자인은 정적 파일 전달이 아닌 '코드-디자인 동기화'가 표준이 될 것으로 보입니다.
- AI 중심 개발 가속화: AI 에이전트가 코드의 대부분을 작성함에 따라 개발자와 디자이너의 경계가 더욱 모호해지는 '풀스택 크리에이터'의 시대가 올 것입니다.
출처:lennys_newsletter