5.11 실전 프로젝트: Flutter 모바일 앱 만들기 & APK 빌드

웹 게시판 실습에서 배운 바이브 코딩 패턴을 모바일 앱으로 확장합니다. Flutter를 사용하여 할 일 관리(Todo) 앱을 만들고, 실제 안드로이드 기기에 설치할 수 있는 APK 파일까지 빌드합니다.

전체 워크플로우

Step 1: 개발 환경 설정

Flutter 개발에 필요한 도구를 설치합니다. Claude Code에게 직접 요청할 수 있습니다.

Flutter 개발 환경을 설정해줘.

필요한 것:
1. Flutter SDK 설치 상태 확인
2. Android SDK 설치 상태 확인
3. flutter doctor로 환경 진단
4. 문제가 있으면 해결 방법 안내

# Flutter 설치 (Windows 기준)
# 1. Flutter SDK 다운로드: https://docs.flutter.dev/get-started/install

# 2. 환경 변수 설정 후 확인
flutter --version

# 3. 환경 진단 — 부족한 것 자동 안내
flutter doctor

# 4. 새 프로젝트 생성
flutter create todo_app
cd todo_app

# 5. Claude Code 시작
claude

Step 2: Todo 앱 설계 — 스킬 활용

Flutter로 만들 Todo 앱을 설계해줘.

기능 요구사항:
- 할 일 목록 보기 (체크박스 + 제목 + 날짜)
- 새 할 일 추가 (제목 입력, 우선순위 선택)
- 할 일 완료 처리 (체크 토글)
- 할 일 삭제 (스와이프 삭제)
- 완료/미완료 필터링
- 데이터는 로컬 저장 (SharedPreferences)

디자인 요구사항:
- Material Design 3 스타일
- 라이트/다크 테마 지원
- 부드러운 애니메이션
- FloatingActionButton으로 추가

화면 구성:
- 메인 화면: 할 일 목록 + 필터 탭
- 추가 다이얼로그: 제목 + 우선순위 입력

앱 화면 구조

Step 3: 바이브 코딩으로 구현 — Sub-Agent 활용

위 설계대로 Flutter Todo 앱을 구현해줘.

구현 지침:
1. lib/main.dart — 앱 진입점, 테마 설정
2. lib/models/todo.dart — Todo 데이터 모델
3. lib/screens/home_screen.dart — 메인 화면
4. lib/widgets/todo_item.dart — 개별 할일 위젯
5. lib/widgets/add_todo_dialog.dart — 추가 다이얼로그
6. lib/services/storage_service.dart — SharedPreferences 저장

Sub-Agent를 활용해서 모델/화면/위젯/서비스를 병렬로 만들어줘.

코딩 규칙:
- StatefulWidget 대신 가능하면 StatelessWidget + setState 패턴
- const 생성자 적극 활용
- 한글 주석으로 핵심 로직 설명

핵심 코드 구조 미리보기

// lib/models/todo.dart — 할 일 데이터 모델
class Todo {
  final String id;
  final String title;
  final Priority priority;
  final DateTime createdAt;
  bool isCompleted;

  Todo({
    required this.id,
    required this.title,
    this.priority = Priority.medium,
    required this.createdAt,
    this.isCompleted = false,
  });

  // JSON 변환 (SharedPreferences 저장용)
  Map<String, dynamic> toJson() => {
    'id': id,
    'title': title,
    'priority': priority.index,
    'createdAt': createdAt.toIso8601String(),
    'isCompleted': isCompleted,
  };

  factory Todo.fromJson(Map<String, dynamic> json) => Todo(
    id: json['id'],
    title: json['title'],
    priority: Priority.values[json['priority']],
    createdAt: DateTime.parse(json['createdAt']),
    isCompleted: json['isCompleted'],
  );
}

enum Priority { low, medium, high }

// lib/main.dart — 앱 진입점 (핵심 부분)
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

void main() => runApp(const TodoApp());

class TodoApp extends StatefulWidget {
  const TodoApp({super.key});

  @override
  State<TodoApp> createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  ThemeMode _themeMode = ThemeMode.system;

  void _toggleTheme() {
    setState(() {
      _themeMode = _themeMode == ThemeMode.dark
          ? ThemeMode.light
          : ThemeMode.dark;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo App',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: Colors.blue,
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      themeMode: _themeMode,
      home: HomeScreen(onToggleTheme: _toggleTheme),
    );
  }
}

Step 4: 에뮬레이터 테스트 & MCP 활용

# 에뮬레이터 실행 방법
# 1. 에뮬레이터 목록 확인
flutter emulators

# 2. 에뮬레이터 실행
flutter emulators --launch Pixel_7_API_34

# 3. 앱 실행 (Hot Reload 활성화)
flutter run

# 4. Hot Reload: 코드 수정 후 r 키 입력
# 5. Hot Restart: R 키 입력 (상태 초기화)

Todo 앱을 에뮬레이터에서 테스트해줘.

테스트 시나리오:
1. 앱 실행 → 빈 목록 화면 표시 확인
2. FAB(+) 버튼 클릭 → 추가 다이얼로그 표시
3. "Flutter 공부하기" 입력 + 높음 우선순위 → 추가
4. 할 일 체크박스 토글 → 완료 표시 (취소선)
5. 스와이프 삭제 → 목록에서 제거
6. 다크모드 토글 → 테마 전환 확인
7. 앱 종료 후 재실행 → 데이터 유지 확인

각 단계 결과를 PASS/FAIL로 정리해줘.

Todo 앱의 통합 테스트 코드를 작성해줘.

test/widget_test.dart에 다음 테스트 추가:
1. 앱 실행 시 빈 목록 표시 테스트
2. Todo 추가 후 목록에 표시 테스트
3. 완료 토글 동작 테스트
4. 삭제 동작 테스트

flutter test로 실행 가능하게 해줘.

// test/widget_test.dart — AI가 자동 생성하는 테스트 코드 예시
import 'package:flutter_test/flutter_test.dart';
import 'package:todo_app/main.dart';

void main() {
  testWidgets('빈 목록에서 Todo 추가 테스트', (tester) async {
    // 앱 실행
    await tester.pumpWidget(const TodoApp());

    // 빈 목록 확인
    expect(find.text('할 일이 없습니다'), findsOneWidget);

    // FAB 클릭 → 다이얼로그 열기
    await tester.tap(find.byType(FloatingActionButton));
    await tester.pumpAndSettle();

    // 제목 입력
    await tester.enterText(
      find.byType(TextField), 'Flutter 공부하기');

    // 추가 버튼 클릭
    await tester.tap(find.text('추가'));
    await tester.pumpAndSettle();

    // 목록에 표시 확인
    expect(find.text('Flutter 공부하기'), findsOneWidget);
  });
}

Step 5: APK 빌드 — 실제 기기에 설치

테스트가 완료되면 APK 파일을 빌드하여 안드로이드 기기에 설치할 수 있습니다.

Todo 앱을 APK로 빌드해줘.

빌드 전 확인:
1. pubspec.yaml에 앱 이름, 버전 정보 확인
2. 앱 아이콘 설정 (기본 Flutter 아이콘 → 커스텀)
3. 불필요한 권한 제거

빌드 옵션:
- Release 모드 (디버그 아님)
- APK 파일로 생성 (AAB 아님)
- 파일 크기 최소화

# APK 빌드 명령어
# 1. 의존성 정리
flutter clean
flutter pub get

# 2. Release APK 빌드
flutter build apk --release

# 빌드 완료 시 출력 위치:
# build/app/outputs/flutter-apk/app-release.apk

# 3. 파일 크기 확인
ls -lh build/app/outputs/flutter-apk/app-release.apk
# 예: 약 15~25MB

# 4. 연결된 기기에 직접 설치
flutter install

APK 빌드 과정 상세

APK 빌드 전 체크리스트

APK 빌드 전에 다음 설정을 확인하고 수정해줘:

1. pubspec.yaml:
   - name: todo_app
   - description: 바이브 코딩으로 만든 할 일 관리 앱
   - version: 1.0.0+1

2. android/app/build.gradle:
   - minSdkVersion: 21 (Android 5.0 이상)
   - targetSdkVersion: 34
   - versionCode, versionName 확인

3. android/app/src/main/AndroidManifest.xml:
   - 앱 이름을 한글로: "할 일 관리"
   - 불필요한 인터넷 권한 제거 (오프라인 앱이므로)

4. 앱 아이콘:
   - flutter_launcher_icons 패키지로 커스텀 아이콘 설정

# pubspec.yaml — 핵심 설정
name: todo_app
description: 바이브 코딩으로 만든 할 일 관리 앱
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.0    # 로컬 데이터 저장

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.0  # 앱 아이콘 생성

# 앱 아이콘 설정
flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

기기에 설치하기

웹 게시판 vs Flutter 앱 — 바이브 코딩 비교

Flutter 바이브 코딩 Tips

5.12 실전: 기존 프로젝트 소스 대규모 개선 — AI 네이티브 리팩토링

새로 만드는 것보다 기존 코드를 개선하는 것이 실무의 80%입니다. 수십~수백 개 파일을 수정해야 하는 대규모 개선 작업에서 Claude Code의 에이전트, 스킬, MCP를 총동원하여 안전하고 체계적으로 처리하는 방법을 학습합니다.

전체 워크플로우 — 7단계 안전 개선 프로세스

실습 시나리오: 레거시 웹 프로젝트 개선

Step 1: 코드베이스 분석 — 현황 파악

수정하기 전에 프로젝트의 전체 구조를 이해해야 합니다. Claude Code에게 코드를 읽고 분석하게 합니다.

이 프로젝트를 전체적으로 분석해줘.

분석 항목:
1. 프로젝트 구조 — 폴더/파일 트리와 각 역할
2. 기술 스택 — 사용 중인 언어, 프레임워크, 라이브러리 버전
3. 코드 규모 — 파일 수, 총 코드 줄 수, 언어별 비율
4. 의존성 현황 — package.json/requirements.txt 분석
5. 진입점 — 앱 시작 흐름, 라우팅 구조
6. 데이터 흐름 — DB 연결, API 호출 패턴

결과를 마크다운 표로 정리해줘.

Step 2: 영향도 분석 — 수정하면 어디가 깨지나?

대규모 수정에서 가장 중요한 단계입니다. "이 파일을 수정하면 다른 어떤 파일이 영향을 받는가?"를 사전에 파악해야 합니다.

다음 수정 작업의 영향도를 분석해줘.

수정 계획:
- utils.js의 formatDate() 함수 시그니처 변경
- api.js의 에러 핸들링 패턴을 try-catch에서 async/await로 변환
- 전체 CSS를 BEM 네이밍으로 통일

각 수정 항목별로:
1. 직접 영향 받는 파일 목록 (import/require 추적)
2. 간접 영향 받는 파일 목록 (연쇄 의존)
3. 수정 위험도 (상/중/하)
4. 추천 수정 순서 (의존성 역순)
5. 수정 후 필수 테스트 항목

의존성 그래프를 Mermaid로 시각화해줘.

영향도 분석 결과 예시

Step 3: 보안 점검 — 취약점 스캔

코드를 수정하기 전에 기존 보안 취약점을 먼저 파악합니다. 수정 과정에서 함께 해결할 수 있습니다.

이 프로젝트의 보안 취약점을 전수 검사해줘.

검사 항목 (OWASP Top 10 기준):
1. SQL 인젝션 — 사용자 입력이 쿼리에 직접 들어가는 곳
2. XSS (크로스사이트 스크립팅) — innerHTML, document.write 사용
3. 인증/인가 결함 — 토큰 관리, 세션 처리, 권한 검사
4. 민감 데이터 노출 — 하드코딩된 API 키, 비밀번호
5. 의존성 취약점 — 알려진 CVE가 있는 라이브러리
6. CSRF 보호 — 폼 제출 시 토큰 검증
7. 보안 헤더 — CSP, X-Frame-Options 등

각 취약점을 발견하면:
- 파일명:줄번호
- 위험 등급 (Critical/High/Medium/Low)
- 문제 코드 스니펫
- 수정 권고안

표로 정리해줘.

# Claude Code에서 보안 검사 실행 예시

> 이 프로젝트에서 eval(), innerHTML, document.write를 사용하는 곳을 모두 찾아줘

  검색 결과:
  ✗ src/utils/template.js:45   — eval(userInput)          [Critical]
  ✗ src/pages/comment.js:23    — el.innerHTML = data      [High]
  ✗ src/legacy/render.js:12    — document.write(html)     [High]
  ✓ src/pages/about.js:8       — el.innerHTML = '정적 텍스트' [Safe - 정적]

> npm audit

  found 3 vulnerabilities (1 critical, 2 high)
  ┌─────────────┬────────────────┬──────────┐
  │ Package     │ Vulnerability  │ Severity │
  ├─────────────┼────────────────┼──────────┤
  │ lodash      │ Prototype Poll │ Critical │
  │ express     │ Open Redirect  │ High     │
  │ jsonwebtoken│ Algorithm Conf │ High     │
  └─────────────┴────────────────┴──────────┘

Step 4: 소스 패턴 분석 — 코딩 컨벤션 파악

기존 코드의 스타일을 먼저 파악해야, 수정 후에도 일관성이 유지됩니다.

이 프로젝트의 코딩 패턴을 분석해줘.

분석할 패턴:
1. 네이밍 컨벤션 — camelCase? snake_case? 혼용?
2. 파일 구조 — 컴포넌트, 유틸, 서비스 분리 방식
3. 에러 처리 패턴 — try-catch? .catch()? 콜백?
4. 상태 관리 패턴 — 글로벌 변수? 모듈 패턴? 클래스?
5. 주석 스타일 — JSDoc? 인라인? 없음?
6. 불일치/혼용 패턴 — 같은 로직의 다른 구현 방식

패턴 분석 결과를 바탕으로 CLAUDE.md에 넣을
코딩 컨벤션 규칙을 제안해줘.

# CLAUDE.md — 기존 프로젝트 분석 후 작성 예시

## 프로젝트 컨텍스트
- 2년 된 사내 관리 시스템, jQuery → Vanilla JS 전환 중
- 파일 50개, 코드 15,000줄

## 코딩 컨벤션 (기존 패턴 유지)
- 변수명: camelCase (기존 코드와 통일)
- 함수명: camelCase, 동사로 시작 (getData, handleClick)
- 파일명: kebab-case (user-profile.js)
- CSS 클래스: BEM 전환 중 (block__element--modifier)

## 수정 규칙
- jQuery → Vanilla JS 전환 시 동일 동작 보장
- 기존 API 응답 형식 변경 금지 (하위 호환성)
- console.log 제거, 구조화된 로깅으로 교체
- var → const/let 전환 (const 우선)

Step 5: Sub-Agent 병렬 수정 — 대규모 코드 변경

분석이 끝나면 실제 수정에 들어갑니다. 파일이 수십 개일 때 Sub-Agent를 활용한 병렬 처리가 핵심입니다.

분석 결과를 바탕으로 프로젝트를 단계별로 개선해줘.

Phase 1 (위험도 낮음 — Sub-Agent 병렬):
- 전체 CSS 클래스를 BEM 네이밍으로 통일
- Sub-Agent를 pages/, components/, layouts/ 폴더별로 분배
- 각 Sub-Agent는 HTML의 클래스명과 CSS를 함께 수정
- Phase 1 완료 후 git commit

Phase 2 (위험도 중간 — Sub-Agent 병렬):
- var → const/let 전환 (const 우선)
- jQuery 선택자 → document.querySelector 전환
- 콜백 기반 → async/await 전환
- Phase 2 완료 후 git commit

Phase 3 (위험도 높음 — 순차 처리):
- formatDate() 함수 시그니처 변경 + 호출부 전체 수정
- 보안 취약점 수정 (eval 제거, innerHTML → textContent)
- Phase 3 완료 후 git commit

각 Phase 완료 후 반드시 변경사항을 커밋하고,
다음 Phase로 넘어가기 전에 기본 동작 확인해줘.

대규모 수정 시 필수 전략

Step 6: 검증 & 테스트 — 수정 후 안전성 확인

대규모 수정의 가장 중요한 단계입니다. 수정이 기존 기능을 깨뜨리지 않았는지 다층 검증합니다.

수정 결과를 다음 4단계로 검증해줘.

Layer 1 — 정적 분석:
- ESLint/TSC 실행하여 문법/타입 오류 확인
- 사용하지 않는 변수, import 정리

Layer 2 — Gap 분석:
- 수정 계획서 대비 실제 변경 파일 비교
- 빠진 수정 항목이 있는지 확인
- Match Rate 계산

Layer 3 — 기존 테스트 실행:
- 기존 테스트 코드가 있으면 전부 실행
- 실패하는 테스트가 있으면 원인 분석

Layer 4 — MCP 화면 테스트:
- 주요 페이지 접속하여 렌더링 확인
- 로그인, 목록, 상세, 폼 제출 시나리오 테스트
- 모바일 뷰포트에서 레이아웃 확인

각 Layer별 PASS/FAIL 결과를 표로 정리해줘.

검증 결과 예시

Step 7: 문서화 & 보고서 — 변경 이력 정리

이번 리팩토링 작업의 종합 보고서를 DOCX로 작성해줘.

보고서 구성:
1. 개요 — 프로젝트 정보, 작업 기간, 작업자
2. 수정 전 현황 — 코드 분석 결과 요약
3. 영향도 분석 결과 — 의존성 그래프, 위험도 분류
4. 보안 점검 결과 — 발견 취약점 및 조치 내역
5. 수정 내역 상세
   - Phase별 수정 파일 목록
   - Before/After 코드 비교 (주요 변경)
   - 수정 라인 수 통계
6. 검증 결과 — 4-Layer 검증 PASS/FAIL
7. 잔여 이슈 — 미처리 항목, 후속 작업 필요 사항
8. 성과 지표 — 코드 품질 Before/After 비교

파일명: refactoring-report-2026-04-09.docx

수정 성과 지표 예시

활용 도구 총정리 — 단계별 최적 도구

기존 수동 리팩토링 vs AI 리팩토링 — 생산성 비교

5.13 Claude Code 업무 능률 극대화 전략

지금까지 배운 스킬, MCP, 에이전트, PDCA를 실전 업무에서 최대 효율로 조합하는 방법을 정리합니다. 개별 기능을 아는 것과 이를 워크플로우로 엮어 쓰는 것은 전혀 다른 차원의 생산성을 만들어냅니다.

A. 골든 프롬프트 공식 — 10초 만에 최적 프롬프트 작성

프롬프트 품질이 결과 품질의 80%를 결정합니다. 다음 5요소 공식을 기억하세요.

상황별 최적 프롬프트 매트릭스

프롬프트 체이닝 — 복잡한 작업을 단계별로

하나의 긴 프롬프트보다 여러 프롬프트를 연결하는 것이 더 정확하고 빠릅니다.

B. 자동화 워크플로우 — 반복 작업을 제로로

CLAUDE.md 최적화 — 매번 반복 설명 제거

매 세션마다 "이 프로젝트는..."이라고 설명하는 시간을 CLAUDE.md로 제거합니다.

# CLAUDE.md — 업무 능률 최적화 버전

## 프로젝트
- Next.js 14 + TypeScript + Prisma + PostgreSQL
- 팀: 프론트 3명, 백엔드 2명, PM 1명

## 코딩 규칙 (AI가 자동 적용)
- TypeScript strict 모드 필수
- 함수형 컴포넌트 + React Hook 사용
- CSS: Tailwind CSS만 사용 (인라인 스타일 금지)
- API: RESTful 패턴, 에러는 try-catch + 커스텀 에러 클래스
- 테스트: Jest + React Testing Library, 커버리지 80% 이상

## 금지 사항
- any 타입 사용 금지
- console.log 커밋 금지
- 하드코딩된 문자열 금지 (상수 파일로 분리)

## 자주 쓰는 명령
- 개발 서버: npm run dev
- 테스트: npm test
- 빌드: npm run build
- 린트: npm run lint

Hooks 실전 레시피 — 자동 품질 관리

// .claude/settings.json — 능률 극대화 Hooks 설정
{
  "hooks": {
    "SessionStart": [{
      "command": "echo '=== 프로젝트 상태 ===' && git status --short && echo '=== 최근 커밋 ===' && git log --oneline -3"
    }],
    "PostToolUse": [{
      "matcher": "Write|Edit",
      "command": "npx eslint --fix \"$CLAUDE_FILE_PATH\" 2>/dev/null || true"
    }],
    "PreToolUse": [{
      "matcher": "Bash(git commit*)",
      "command": "npm test --silent 2>/dev/null || echo '⚠️ 테스트 실패! 커밋 전 확인 필요'"
    }]
  }
}

스킬 조합 워크플로우 — 파이프라인 패턴

개별 스킬을 순서대로 조합하면 완전한 자동화 파이프라인이 됩니다.

MCP 서버 조합 — 업무별 최적 세트

C. 대규모 작업 전략 — 큰 작업을 빠르고 안전하게

Plan Mode — 실행 전에 계획부터

복잡한 작업은 바로 코딩하지 말고, Plan Mode로 계획을 먼저 세우고 승인 후 실행합니다.

(Shift+Tab으로 Plan Mode 진입 후)

사용자 인증 시스템을 JWT 기반으로 전환해줘.

고려사항:
- 현재 세션 기반 인증 → JWT Access/Refresh 토큰
- 영향 받는 파일: auth.js, middleware.js, 모든 API 라우트
- 기존 로그인 사용자의 세션 호환성 유지
- 보안: 토큰 만료, 리프레시 로직, CSRF 보호

먼저 수정 계획을 세우고 보여줘. 승인 후에 실행할게.

Sub-Agent 최적 분배 전략

컨텍스트 관리 — 대화가 길어질 때

D. 하루 업무에 적용하는 Claude Code 루틴

E. 업무별 능률 비교 — Before & After