한 줄 정의
단일 AI 도구에 의존하지 않고 리서치, 와이어프레이밍, 에셋 생성, 인터랙티브 프로토타이핑, 코드 생성, 유저 행동 분석의 5개 단계별 특화 AI 도구 10종을 매끄럽게 연결한 고효율 제품 개발 파이프라인이다.
핵심 요지
- 도구 만능주의 탈피: 단순히 “10배 빠른 도구”를 쫓는 대신, 실제 문제 해결 관점에서 리서치부터 배포·테스트까지 단계별 모듈화 워크플로우를 구축한다.
- 디자인 구조 보존(Auto Layout Export): Flowstep AI로 초도 UI 구조와 코드를 생성하고, Figma로 내보낼 때 오토 레이아웃을 100% 유지하여 편집 마찰을 최소화한다.
- AI 딜리버리 및 관찰성 융합: 코딩 지식이 부족해도 Google Antigravity 기반 빌드, Vercel/GitHub 배포, Microsoft Clarity 히트맵/세션 녹화 분석으로 실데이터 기반 디자인 피드백 루프를 완성한다.
상세
본 워크플로우는 제품 기획부터 론칭까지 다음과 같은 10가지 도구의 상호보완적 역할 분담으로 구성된다:
- 리서치 & 문서화:
- Claude: 문제 정의 및 인터뷰 구조화, 기획안 허점 검증 파트너.
- Notion AI: 산재된 리서치 노트 구조화 및 프로젝트 중앙 아카이빙.
- ChatGPT + FigJam Connector: 사용자 여정(User Flow) 시각화 및 정보 구조(IA) 조감.
- 디자인 & 에셋 생성:
- Flowstep AI: 리서치 맥락 기반 초기 UI 레이아웃 및 고품질 코드 생성.
- Figma AI: 레이어 정리(
Rename layers), 마이크로카피 재작성(Rewrite this), 에셋 일괄 교체 (Replace content). - Moonchild AI: 디자인 시스템 사전 정의 및 글로벌 라이브러리 연동 기반의 일관성 있는 프로덕션급 UI 및 프로토타입 설계. (raw/Designing Production-Ready UIs with Your Design System Using Moonchild AI.md)
- Gemini: 이미지 에셋 및 로고 베리에이션 대량 생성.
- Jitter AI: 스플래시 화면 및 로딩 모션 애니메이션 신속 생성.
- 프로토타이핑 & 구현 & 테스트:
- Figma Make: Figma 디자인 에셋과의 100% 연동 프로토타이핑.
- Google Antigravity: 자연어 기반 프로토타입의 라이브 웹 앱 파이프라인 구현.
- Microsoft Clarity:
<head>내 추락 코드로 히트맵, 클릭 추적, 세션 녹화를 분석하여 실제 유저 마찰 지점 추출.
예시
- Flowstep -> Figma 변환 연동: 기존 도구 내보내기 시 오토 레이아웃 파괴 현상을 해결하고, Flowstep에서 Figma로 프레임을 내보낼 때 레이아웃 구조가 깨지지 않아 즉시 시각적 보완 작업이 가능하다.
- Clarity 기반 유저 검증:
index.html태그 내 수동 추적 코드를 주입하여 Vercel 배포 후 사용자의 실제 이동 경로 및 탭/클릭 마찰 지점을 데이터로 포착해 2차 윤문을 실행한다.
충돌
- AI 전권 위임 vs 디자이너 의사결정: AI 생성 결과를 그대로 수용하면 개성 없고 정형화된 UI가 생성된다. 반드시 인간 디자이너가 프롬프트 조정과 수동 편집을 통해 최종 결정권을 유지해야 한다.
- 화려한 인터랙션 vs 제작 속도: 과도한 프로토타이핑 도구 도입은 속도를 저해하므로 디자인 연동성이 뛰어난 Figma Make으로 빠른 시나리오 검증에 집중한다.