🚀 비개발자가 AI 2명과 협업해서 Flutter 앱을 만든 이야기
Phase 7까지 완성! 엔티 + 클로드 코드 역할 분담의 마법 ✨
안녕하세요 벨라입니다! 👋
이번에 텍스트용 외국인 위한 편리한 서비스를 Flutter로 개발하면서, AI 2명을 팀원처럼 역할 분담시켜서 작업했어요!
오늘은 어떻게 AI들과 협업했는지, 그리고 실제로 겪은 오류와 해결 과정을 공유할게요!
📌 목차
1. 프로젝트 소개
이번에 스터디 공부하는 것에 있어서 텍스트용 외국인 위한 편리한 서비스를 한번 규현 해보았습니다.
기술 스택
📱 모바일: Flutter + Riverpod 🌐 웹: React + Tailwind ⚙️ 서버: Express + tRPC 🗄️ DB: TiDB/MySQL + Drizzle ORM
서비스 구현 화면 텍스트중 ( 아직 언어 변환은 원활하지 않은 부분 수정 필요)
2. AI 협업 전략: 역할 분담
💡 핵심 발견: AI마다 잘하는 게 다르다!
처음에는 하나의 AI한테 모든 걸 시켰어요. 근데 문제가 생겼죠:
코드 분석하다가 구현 요청하면 맥락을 잃어버림
문서 작성하다가 디버깅 요청하면 혼란스러워함
에러 발생률 높음 😭
그래서 역할을 명확히 분리했어요!
🎯 역할 분담표
┌─────────────────────────────────────────────────┐
│ 나 (PM 역할) │
│ 작업 지시 / 리뷰 / 의사결정 │
└──────────┬──────────────────────┬────────────────┘
│ │
┌─────▼─────┐ ┌─────▼──────┐
│ 엔티 │ 문서 │ 클로드 코드 │
│ (기획/설계) │◄──────►│ (구현/실행) │
└───────────┘ 공유 └─────────────┘
AI 도구
역할
적합한 작업
엔티 (Antigravity)
🧠 기획자
계획 수립, 설계 문서, 코드 리뷰, 아키텍처, 리팩토링
클로드 코드
💪 개발자
Flutter 코드 구현, 빌드 실행, 디버깅, 테스트
왜 이렇게 나눴어요?
특성
엔티
클로드 코드
컨텍스트 유지
⭐⭐⭐ 대화 기억 잘함
⭐⭐ 작업 완료 후 초기화
코드 실행
❌ 터미널 없음
✅ 직접 실행 가능
분석 능력
⭐⭐⭐ 뛰어남
⭐⭐ 보통
문서 작성
⭐⭐⭐ 체계적
⭐⭐ 간단
💡 비유하자면: 엔티는 시니어 개발자 + PM, 클로드 코드는 주니어 개발자!
🔑 협업의 핵심: 공유 문서
두 AI가 AI_COLLABORATION_GUIDE.md 파일을 함께 읽고 쓰면서 작업 상태를 동기화해요!
[실제 협업 흐름]
1. 나 → 엔티: "Phase 6 설계해줘"
2. 엔티: RIVERPOD_ARCHITECTURE.md 작성 (설계 + 작업 분배)
3. 나 → 클로드 코드: "엔티가 설계한 대로 구현해줘"
4. 클로드 코드: 코드 구현 + AI_COLLABORATION_GUIDE.md 업데이트
5. 나 → 엔티: "구현 결과 리뷰해줘"
6. 엔티: 코드 리뷰 + 개선점 제안
7. 반복!
🙋♀️ 그럼 나는 뭘 했어요?
나는 "결정"하고 "전달"만 했어요!
내 역할
구체적으로 한 일
결정권자 🎯
"이 방향으로 할까요?" → "응" / "아니, 이렇게 해"
메신저 📨
진도 안 맞을 때 상대방 AI 내용 복붙해서 전달
동기화 🔄
"엔티가 문서 업데이트했어, 읽고 작업해" 알려주기
❌ 코드 작성 → 클로드 코드가 함
❌ 기획/분석 → 엔티가 함
❌ 문서 작성 → 둘 다 알아서 함
✅ 결정 + 복붙 전달 + 동기화 → 내가 함
3. 현재까지의 성과
📊 전체 진행률: Phase 7 / 10+
Phase 1 [##########] ✅ 완료 - 테마 시스템
Phase 2 [##########] ✅ 완료 - 18개 스크린 구현 (~11,000줄)
Phase 3 [##########] ✅ 완료 - 리팩토링 (공통위젯 7개)
Phase 4 [########--] 80% - i18n 다국어
Phase 5 [##########] ✅ 완료 - 추가 리팩토링
Phase 6 [##########] ✅ 완료 - Riverpod 상태 관리
Phase 7 [##########] ✅ 완료 - UI/UX 개선
Phase 8 [----------] 예정 - API 연동
Phase 9 [----------] 예정 - 인증/온보딩
Phase 10 [----------] 예정 - 배포
✅ 구현 완료된 것
카테고리
내용
수량
스크린
전체 앱 화면
18개
공통 위젯
재사용 UI 컴포넌트
7개
데이터 모델
Project, Milestone, Transaction 등
5개
상태 관리
Riverpod Provider
4개
다국어
영어/한국어/중국어
3개 언어
📱 완성된 18개 스크린
[프로젝트 흐름]
ProjectDetails → Kickoff → Contract → Submit → Review → Payout
[대시보드]
ClientDashboard, CollaborationDashboard, Wallet
[인재/인증]
FreelancerSearch, ProposalComparison, KndliCertification, CertificationSuccess
[커뮤니케이션]
Messaging, NotificationCenter, CulturalBridgeDetail
[프로필]
PortfolioProfile
4. 실제 오류 해결 과정 4가지
❌ 오류 1: i18n 빌드 실패
증상:
flutter gen-l10n 실행 후 빌드 에러
import 'package:flutter_gen/...' 경로를 찾을 수 없음
원인: Windows 환경 + 프로젝트 경로에 공 백 (D:\AI _coding_project_all)
해결:
# l10n.yaml 수정
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: false # ← 이거 추가!
output-dir: lib/l10n # ← 이거 추가!
💡
synthetic-package: false로 설정하면 생성된 dart 파일이 프로젝트 내부에 직접 위치해서 경로 문제 해결!
❌ 오류 2: bash 권한 문제
증상:
cd "D:\AI _coding_project_all\connect-k-platform"
# → Permission denied
원인: Claude Code의 bash에서 Windows D:\ 드라이브 접근 시 권한 문제
해결:
# bash 대신 PowerShell 사용
powershell.exe -Command "Set-Location '경로'; flutter analyze"
💡 CLAUDE.md에 이 패턴을 기록해두면 다음 세션에서도 바로 사용 가능!
❌ 오류 3: Riverpod ProviderScope 누락
증상:
ProviderScope 적용했는데도 ref.watch()에서 에러
원인: ProviderScope 위치가 잘못됨 + App 클래스가 ConsumerWidget 아님
해결:
// Before - 잘못된 구조
void main() => runApp(ConnectKApp());
class ConnectKApp extends StatelessWidget { ... }
// After - 올바른 구조
void main() => runApp(
ProviderScope( // ← 최상위 래핑!
child: ConnectKApp(),
),
);
class ConnectKApp extends ConsumerWidget { // ← ConsumerWidget으로!
@override
Widget build(BuildContext context, WidgetRef ref) {
final locale = ref.watch(localeProvider); // ← 이제 작동!
return MaterialApp(locale: locale, ...);
}
}
💡 핵심: ProviderScope는 반드시 위젯 트리 최상단에!
❌ 오류 4: 바텀 네비게이션 3종 혼재
증상:
화면마다 바텀 네비 메뉴가 다르게 나옴
Home:
[Home, Jobs, +, Messages, Profile]다른 화면:
[Home, Dashboard, +, Messages, Profile]또 다른 화면:
[Home, Browse, Profile, Inbox, Settings]
원인: 5개 스크린이 각자 독립적인 바텀 네비를 구현함
해결:
1. 5개 서브스크린에서 BottomNavigationBar 코드 삭제
2. MainScreen의 바텀 네비만 유지 (단일 소스)
3. 탭에 실제 스크린 연결
💡 핵심: 바텀 네비는 반드시 한 곳에서만 관리!
5. AI 협업에서 배운 점
💡 인사이트 5가지
1️⃣ 문서가 곧 인터페이스다
두 AI 사이의 소통은 오직 문서를 통해 이루어짐
문서 품질 = 협업 품질
2️⃣ AI 역할 분리의 효과
분석형 AI(엔티) + 실행형 AI(클로드 코드) 분리 → 각자 강점 극대화
한 AI가 만든 코드를 다른 AI가 검증 → 크로스 리뷰 가능
3️⃣ CLAUDE.md의 위력
프로젝트 루트의 CLAUDE.md = 매 세션의 브리핑 문서
AI가 이 파일 읽으면 즉시 프로젝트 컨텍스트 파악
4️⃣ 에러는 패턴화하여 기록
같은 에러 두 번 겪지 않도록 CLAUDE.md에 해결법 기록
예: bash 권한 문제 → powershell.exe 우회 패턴
5️⃣ 하루 작업량의 혁신
하루 5개 세션으로:
Phase 3개 완료
파일 25개+ 수정
문서 5건 작성
빌드 에러 3개 해결
AI 협업 없이는 불가능한 작업량!
7. 마무리
🎯 비개발자가 AI팀 운영하는 공식
1️⃣ 역할 분담: 기획 AI + 실행 AI 구분
2️⃣ 공유 문서: AI들이 직접 작성하게 하기
3️⃣ 내 역할: 결정 + 복붙 전달 + 동기화
4️⃣ 에러 기록: CLAUDE.md에 패턴화
5️⃣ 반복: 진도 맞춰가며 계속 돌리기
🚀 다음 작업 예정
Phase 8: API 연동 + 백엔드 통합 +오류 수정
Phase 9: 로그인/회원가입 + 온보딩
Phase 10: 배포 + 테스트
참고 문서
AI_COLLABORATION_GUIDE.md - AI 협업 가이드
RIVERPOD_ARCHITECTURE.md - Riverpod 설계 문서
walkthrough.md - 전체 워크스루
모두 즐거운 AI 코딩 되세요! 😊
#20기안드로이드앱 #Flutter #AI협업 #Antigravity #ClaudeCode #비개발자코딩 #앱개발 #Riverpod