AI 요약
2026년 3월 16일 발행된 'How I AI' 시리즈에서 Figma의 디자이너 Gui Seiz와 엔지니어 Alex Kern은 AI를 활용한 협업 방식의 근본적인 변화를 공유했습니다. 이들은 Claude Code와 MCP(Model Context Protocol)를 결합하여 프로덕션 코드를 Figma로 가져와 편집 가능한 프레임으로 변환하고, 수정된 디자인을 다시 코드로 즉시 반영하는 '디자인 ↔ 코드 루프'를 완성했습니다. 특히 엔지니어인 Alex Kern은 AI 에이전트가 코드를 더 잘 이해하고 수행할 수 있도록 전체 업무 시간의 약 20%에서 30%를 코드 구조 최적화에 투자하고 있다고 밝혔습니다. 이는 AI가 단순한 보조 도구를 넘어, 디자인과 개발 사이의 간극을 메우고 생산 공정을 자동화하는 핵심 인프라로 자리 잡았음을 시사합니다.
핵심 인사이트
- 디자인 핸드오프의 종말: 정적인 디자인 문서를 전달하는 대신, AI를 통해 프로덕션 코드와 Figma 간의 '연속적 동기화(Continuous Sync)'가 가능해졌습니다.
- AI를 위한 코드 최적화: 엔지니어 Alex Kern은 AI 에이전트가 더 적은 프롬프트로 더 나은 결과를 낼 수 있도록 업무 시간의 20%~30%를 코드 가독성 개선에 사용합니다.
- 직접 조작의 중요성: 정밀한 디자인 작업(예: 특정 헥스 코드나 노란색의 음영 조정)은 AI 프롬프팅보다 Figma의 컬러 피커와 드래그 방식을 사용하는 것이 여전히 효율적입니다.
- SOP의 기술화: 기존의 텍스트 기반 운영 매뉴얼(SOP)을
/ship과 같은 실행 가능한 AI 스킬로 변환하여 PR 체크 및 CI 모니터링을 자동화했습니다.
주요 디테일
- MCP(Model Context Protocol) 활용: 프로덕션, 스테이징, 로컬호스트의 라이브 인터페이스를 Figma 디자인 프레임으로 즉시 변환하여 '디자인 드리프트(Drift)' 현상을 방지합니다.
/ship커스텀 스킬: PR 전 체크리스트 실행, Git 푸시, CI 모니터링, 마이너 린트 오류 수정을 자동으로 수행하며, 오류 발생 시 최대 5회 재시도(1시간 타임아웃) 기능을 포함합니다.- 양방향 워크플로우: 디자이너가 Figma에서 실제 프로덕션 데이터를 기반으로 작업하고, 그 변경사항을 Claude Code를 통해 실제 코드베이스에 직접 푸시할 수 있습니다.
- AI 에이전트 친화적 설계: 인간 엔지니어를 위한 코드 작성을 넘어, AI가 맥락을 더 쉽게 파악할 수 있도록 코드 구조를 재설계하여 프롬프트 효율성을 극대화합니다.
향후 전망
- 통합 협업 환경: 디자인과 개발의 경계가 무너지며, 모든 팀원이 동일한 최신 프로덕션 상태를 공유하며 작업하는 실시간 협업이 표준이 될 것입니다.
- 엔지니어링 역할의 변화: 단순 코딩보다 AI 에이전트가 작업하기 좋은 환경을 구축하고, 자동화 스킬을 설계하는 시스템 아키텍트로서의 역할이 더욱 중요해질 전망입니다.
출처:lennys_newsletter