비개발자가 AI 2명과 협업해서 Flutter 앱을 만든 이야기

🚀 비개발자가 AI 2명과 협업해서 Flutter 앱을 만든 이야기

Phase 7까지 완성! 엔티 + 클로드 코드 역할 분담의 마법 ✨


안녕하세요 벨라입니다! 👋

이번에 텍스트용 외국인 위한 편리한 서비스를 Flutter로 개발하면서, AI 2명을 팀원처럼 역할 분담시켜서 작업했어요!

오늘은 어떻게 AI들과 협업했는지, 그리고 실제로 겪은 오류와 해결 과정을 공유할게요!


📌 목차

  1. 프로젝트 소개

  2. AI 협업 전략: 역할 분담

  3. 현재까지의 성과

  4. 실제 오류 해결 과정 4가지

  5. AI 협업에서 배운 점

  6. 마무리

    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 코딩 되세요! 😊


#20기안드로이드앱 #Flutter #AI협업 #Antigravity #ClaudeCode #비개발자코딩 #앱개발 #Riverpod

2
2개의 답글

뉴스레터 무료 구독