🎯 들어가며
안녕하세요! 이전에 새로운 명함관리 앱 "ABC" 기획 하기~! 글에서 AwesomeBizCard 앱을 기획했던 내용을 공유드렸었는데요, 이번엔 그 후속편으로 실제 앱 구현 과정을 공유합니다! 🚀
왜 Genspark를 선택했나요?
처음엔 Claude Code로 앱을 빌드하려고 했습니다. 하지만 유료 사용자(PRO)임에도 불구하고 매번 토큰이 부족해서 작업이 중단되는 문제가 있었습니다. 😭
그래서 상대적으로 토큰 여유가 있는 Genspark를 이용하기로 결정했고, 결과적으로 Flutter Android 앱을 성공적으로 만들 수 있었습니다! 💪
📱 무엇을 만들었나요?
AwesomeBizCard - 단순한 명함 저장을 넘어, AI와 자동화로 만남의 전체 맥락을 기록하는 스마트 명함 관리 앱입니다.
핵심 차별점
📸 명함 스캔 & OCR: 카메라로 촬영하면 자동으로 정보 추출
📅 회의 일정 자동 매칭: Google Calendar 연동으로 어느 회의에서 만났는지 기록
📍 위치 정보 태깅: GPS 기반으로 만난 장소 자동 저장
👤 사진 속 인물 매칭: 회의 사진에서 얼굴 인식 후 연락처 매칭
🔍 컨텍스트 기반 검색: "작년 11월 코엑스"로 검색하면 해당 만남 즉시 검색
🛠 구현 과정
1단계: 프로젝트 준비
먼저 Google Stitch로 만든 디자인 파일과 상세한 PRD 문서를 업로드했습니다.
제공한 자료:
AwesomeBizCard_PRD_v1.0.md(39KB) - 상세 기획 문서ABC Design.zip(2.3MB) - 10개 화면 디자인
프롬프트:
안드로이드 명함관리 앱을 만들려고 해.
첨부된 디자인 이미지와 PRD를 활용해서 Flutter 프로젝트를 만들어줘2단계: 프로젝트 생성
Genspark AI Developer가 자동으로 다음을 생성해주었습니다:
✅ 완전한 Flutter 프로젝트 구조
awesome_biz_card/
├── lib/
│ ├── main.dart # 앱 진입점
│ ├── models/ # 3개 데이터 모델
│ │ ├── contact.dart
│ │ ├── meeting.dart
│ │ └── contact_photo.dart
│ ├── screens/ # 5개 화면
│ │ ├── splash_screen.dart
│ │ ├── home_screen.dart
│ │ ├── business_card_scan_screen.dart
│ │ ├── scan_result_screen.dart
│ │ └── contact_detail_screen.dart
│ └── services/ # 2개 서비스
│ ├── database_service.dart # SQLite DB
│ └── ocr_service.dart # ML Kit OCR
├── android/ # Android 설정
├── assets/ # 리소스
└── pubspec.yaml # 의존성✅ 주요 기능 구현
명함 스캔 화면
실시간 카메라 프리뷰
명함 가이드 오버레이
자동/수동 촬영
OCR 텍스트 인식
Google ML Kit 사용
이름, 회사, 직책, 전화번호, 이메일 자동 추출
한국어 패턴 인식
SQLite 데이터베이스
3개 테이블 (contacts, meetings, contact_photos)
CRUD 기능 완비
검색 및 인덱싱
Material Design 3 UI
Primary Blue (#1976D2) + Accent Orange (#FF9800)
다크모드 지원
Google Fonts (Noto Sans)
3단계: APK 빌드 준비
프로젝트 생성 후 "APK를 만들어서 설치하고 싶다"고 요청했더니,
✅ 자동 빌드 스크립트 생성
build_apk.sh(Linux/Mac용)build_apk.bat(Windows용)
#!/bin/bash
# 자동으로 Flutter 환경 확인
# 의존성 설치
# 이전 빌드 정리
# 릴리즈 APK 빌드
# Split APK 빌드 (최적화)✅ 자동 문서화
QUICK_START_APK.md- 3단계 빠른 시작APK_BUILD_GUIDE.md- 상세 빌드 가이드 (6,500자)APK_BUILD_COMPLETE.md- 완료 요약
✅ Android 설정 파일
android/build.gradleandroid/settings.gradleandroid/gradle.properties모든 필요한 권한 설정
📊 생성된 결과물
코드 통계
총 Dart 파일: 14개
총 코드 라인: ~1,800줄
데이터베이스 테이블: 3개
화면: 5개
모델: 3개
서비스: 2개
의존성: 26개
주요 의존성
Copydependencies:
# UI & Material Design
google_fonts: ^6.1.0
# State Management
flutter_riverpod: ^2.4.9
# Local Database
sqflite: ^2.3.0
# Camera & Image
camera: ^0.10.5+5
image_picker: ^1.0.4
# ML & AI
google_mlkit_text_recognition: ^0.11.0
google_mlkit_face_detection: ^0.9.0
# Google Services
googleapis: ^13.1.0
google_maps_flutter: ^2.5.0
# Location
geolocator: ^10.1.0
geocoding: ^2.1.1🎨 디자인 구현
Google Stitch 디자인을 Flutter 코드로 변환했습니다.
홈 대시보드
검색바: "이름, 회사, 회의, 장소로 검색"
연락처 카드 리스트
프로필 사진, 회사/직책, 만남 정보 표시
FAB 버튼으로 명함 추 가
명함 스캔 화면
카메라 프리뷰
명함 가이드 오버레이 (Custom Painter 사용)
실시간 안내 메시지
갤러리 선택 옵션
스캔 결과 화면
명함 이미지 미리보기
추출된 정보 확인 및 수정
모든 필드 편집 가능
저장/다시 촬영
연락처 상세 화면
대형 프로필 사진
통화/메시지/이메일 액션 버튼
만남 기록 타임라인
명함 이미지 표시
🚀 APK 빌드 방법
앞서 만들어준 자동 스크립트로 쉽게 빌드 하였습니다.
1단계: 프로젝트 압축 해제
Copytar -xzf awesome_biz_card_complete.tar.gz
cd awesome_biz_card2단계: 자동 빌드
Copy./build_apk.sh # Mac/Linux
# 또는
build_apk.bat # Windows3단계: APK 설치
Copyadb install build/app/outputs/flutter-apk/app-release.apk생성되는 APK:
app-release.apk(45MB) - 모든 기기app-arm64-v8a-release.apk(23MB) - 최신 기기 권장 ⭐app-armeabi-v7a-release.apk(22MB) - 구형 기기app-x86_64-release.apk(24MB) - 에뮬레이터
💡 사용 팁
1. 상세한 자료 제공이 핵심
디자인 이미지: Google Stitch로 만든 10개 화면
PRD 문서: 39KB 분량의 상세 기획서
구조화된 요구사항: 명확한 기능 정의
2. 단계별 진행
첫 프롬프트:
"첨부된 디자인 이미지와 PRD를 활용해서 Flutter 프로젝트를 만들어줘"두 번째 프롬프트:
"안드로이드에 설치할 수 있도록 apk 제작해줘"3. 토큰 사용량
전체 프로젝트 생성: ~79,000 토큰 사용
제한: 200,000 토큰
상대적 여유로운 작업 환경
타 바이브 도구로 했다면 여러 번 끊겼을 작업량 일듯 합니다. (연구비 나오면 바로 MAX로~!!!)
🎯 구현된 기능 (Phase 1 MVP)
✅ 완료된 기능
명함 스캔 & OCR (F1.1)
Google ML Kit Text Recognition
자동 필드 분류 (이름, 회사, 직책, 전화, 이메일)
연락처 관리
SQLite 데이터베이스
CRUD 기능
검색 기능
UI/UX
Material Design 3
다크모드 지원
5개 주요 화면
🔜 Phase 1 나머지 (추후 구현)
Google Calendar 연동 (F1.2)
GPS 위치 태깅 (F1.3)
얼굴 인식 & 매칭 (F1.4)
Android 전화번호부 동기화
📅 Phase 2 (계획)
옵시디언 스타일 관계 네트워크 그래프
LinkedIn 프로필 연동
스마트 재연락 제안
회의 전 브리핑 알림
📱 테스트 환경
개발 환경
Flutter SDK 3.0+
Android Studio
Google ML Kit
지원 기기
최소: Android 5.0 (API 21)
대상: Android 14 (API 34)
최적화: Galaxy Z Fold 시리즈
필요 권한
📷 카메라 (명함 촬영)
📍 위치 (만남 장소 기록)
📞 연락처 (전화번호부 저장)
📅 캘린더 (회의 일정 매칭)
💾 저장소 (파일 저장)
🔍 코드 품질
생성한 코드의 특징:
✅ 좋은 점
클린 아키텍처
MVVM 패턴
Repository Pattern
Service Layer 분리
타입 안전성
Null Safety 완벽 적용
강타입 모델 클래스
에러 처리
try-catch 블록
사용자 친화적 에러 메시지
로딩 상태 관리
주석 및 문서화
각 함수에 설명 주석
README, SETUP_GUIDE 등 상세 문서
최적화
데이터베이스 인덱싱
이미지 캐싱
비동기 처리 (Future, async/await)
🔧 개선 가능한 점
테스트 코드 없음
Unit Test 필요
Widget Test 필요
Integration Test 필요
상태 관리
Riverpod 설정만 되어 있음
Provider 구현 필요
에러 로깅
Firebase Crashlytics 연동 필요
로그 수집 시스템 필요
💰 비용 및 시간
바이브 코딩툴 사용
플랜: 무료/유료 (토큰 제한 있음)
사용 토큰: ~79,000 / 200,000
시간: 약 15분 (AI가 코드 생성)
비용: AI 구독료
직접 개발 시 예상
개발 시간: 2-3주 (1인 기준)
개발 비용: 300-500만원 (외주 시)
학습 시간: Flutter + ML Kit 학습 1-2주
🎯 결론
바이브 코딩으로 90% 이상 시간 절약! ⚡
🎓 배운 점
1. AI 코딩의 장점
속도: 15분만에 완전한 프로젝트
품질: 클린 코드 + 문서화
학습: 코드 읽으며 Flutter 패턴 학습
2. AI 코딩의 한계
완벽하지 않음: 일부 기능은 미구현
맥락 이해: 복잡한 로직은 수정 필요
테스트 필요: 실제 디바이스에서 검증 필수
3. 효과적인 프롬프트
✅ 상세한 기획서 제공
✅ 디자인 이미지 첨부
✅ 단계별 진행
✅ 명확한 요구사항
🚧 다음 단계
즉시 작업
실제 디바이스 테스트
APK 빌드
Galaxy/Pixel에서 테스트
OCR 정확도 검증
누락된 기능 구현
Google Calendar 연동
GPS 위치 태깅
얼굴 인식
버그 수정
에러 핸들링 개선
UI/UX 개선
📚 참고 자료
생성된 문서들
[README.md] - 프로젝트 개요
[SETUP_GUIDE.md] - 개발 환경 설정
[APK_BUILD_GUIDE.md] - APK 빌드 상세 가이드
[QUICK_START_APK.md] - 빠른 시작
[PROJECT_SUMMARY.md] - 프로젝트 요약
디자인 참고
design_reference/stitch_home_dashboard/- 10개 화면 디자인
빌드 스크립트
build_apk.sh(Linux/Mac)build_apk.bat(Windows)
🙏 감사합니다
긴 글 읽어주셔서 감사합니다!
궁금한 점이나 피드백은 댓글로 남겨주세요! 🙌
태그: #Genspark #Flutter #Android #AI코딩 #노코드 #명함관리앱 #앱개발 #프로토타입
관련 글:
새로운 명함관리 앱 "ABC" 기획 하기~! (이전 글)
