모바일 바이브 코딩25 min
2. 모바일 앱 개발 및 테스트 (Flutter Todo App)
Flutter 기반의 할 일 관리(Todo) 앱 생성 및 브라우저/스마트폰 실시간 테스트
학습 목표 (Objective)
Gemini로 Flutter 모바일 앱 전체 코드를 작성받고, 브라우저 DartPad에서 즉시 실행 및 모바일 환경에서 테스트하는 프로세스를 배웁니다.
단계별 실습 가이드(0/3 단계 완료)
STEP 01
Gemini에게 Flutter 앱 전체 코드 생성 요청
상태 관리(setState/Provider), 디자인(Material 3), 로컬 데이터 추가/삭제/완료 처리가 포함된 Flutter main.dart 코드를 요청합니다.
- •기능 정의: 할 일 추가 텍스트 필드, 완료 체크박스, 삭제 스와이프 버튼, 완료 항목 필터링 탭
- •디자인 스타일: Google Material 3 컬러 스킴 적용, Rounded Card 타일 디자인
STEP 02
웹 브라우저 기반 DartPad에서 코드 붙여넣기 및 즉시 테스트
별도의 SDK 설치 없이 웹사이트 dartpad.dev에 접속하여 Gemini가 작성한 main.dart 코드를 붙여넣고 Run 버튼을 누릅니다.
- •우측 화면에 가상의 스마트폰 스크린 레이아웃 출력
- •텍스트 입력 및 할 일 체크가 실제 스마트폰처럼 클릭 동작
STEP 03
스마트폰(Expo/웹 에뮬레이터)에서 실시간 작동 확인
DartPad 공유 URL 또는 Flutter Web 배포 URL을 스마트폰 QR 코드로 스캔하여 내 휴대폰 화면에서 앱을 시연합니다.
Gemini 추천 프롬프트 (클릭하여 복사)
Flutter 모바일 개발자로서 'Gemini Todo' 앱의 main.dart 전체 코드를 작성해줘.
요구사항:
1. Material 3 (Flutter 3.x) 프레임워크 적용
2. Todo Model 클래스 (id, title, isDone, priorityLevel) 포함
3. 메인 스크린:
- 상단 AppBar: 'Gemini Todo Master' & 완료률 프로그레스 바
- 입력 영역: TextField + Priority (Low, Med, High) 선택 Chip + 추가 버튼
- 리스트 영역: ListView.builder로 할 일 카드 타일 표시 (체크박스, 삭제 아이콘)
- BottomNavigationBar: [전체], [진행 중], [완료됨] 필터 탭
4. dartpad.dev에서 오류 없이 즉시 실행되도록 단일 main.dart 파일로 출력해줘!
개발 생산성 팁
Flutter SDK나 Android Studio를 PC에 설치하지 않아도 브라우저의 DartPad(dartpad.dev)를 활용하면 Gemini가 작성한 모바일 앱의 95% 이상을 즉시 검증할 수 있습니다.