Flutter 환경 세팅, 클로드코드로 반자동 설치하기!
소개
Flutter 스터디는 총 3단계로 진행되었습니다.
Flutter 설치 및 환경 설정
Android Studio 설치 및 연동
Google Stitch로 앱 UI 만들기
스터디장님이 제공해주신 가이드북이 있어서 전체적인 흐름은 걱정 없었어요.
저는 맥북을 사용하고 있었고, 설치는 클로드코드(Claude Code)에게 맡겨봤습니다. 😄새로운 Tool이 나오면 , 클로드코드에게 guide docs를 제공해서 진행했기 때문에 이번에도 스터디장님이 주신 가이드를 클로드코드에 복붙한후, 설치를 해달라고 했어요. 사실 어떻게 설치 되었는지 자세히 보지않았습니다. 계속 1. yes만 눌렀습니다. 결론적으로는 잘 설치가 되었답니다.
진행 방법
사용 환경: MacBook
사용 도구: Claude Code, Google Stitch
1️⃣ Flutter 설치 - 클로드코드 활용
가이드북 내용을 Claude Code에 붙여넣고 "설치해줘" 라고 요청했어요.
어떻게 설치가 진행됐는지는 정확히 보지 못했지만, 거의 자동으로 진행되었습니다.
이전에도 새로운 도구를 설치할 때 이렇게 했던 경험이 있어 익숙하게 접근했어요.
2️⃣ Stitch 프로젝트 세팅
Stitch에서 zip 파일을 받아 Flutter 프로젝트 폴더에 드롭
source_code폴더를 직접 생성APK 빌드를 시도함
⚠️ 문제 발생: 저장공간 부족
APK 빌드를 시도했는데 맥북 저장 용량 부족 오류 발생
크롬 브라우저가 자동 실행되면서 Stitch UI가 앱처럼 띄워졌어요
이후 빌드를 하려면 최소 3GB 이상의 여유 공간 확보가 필요하다는 걸 알게 됐어요.
저장공간을 만드는데 오히려 시간이 많이 걸렸습니다.
다음날 오후에 시간을내서 이어서 진행을 해보았습니다.
⏺ 여러 디바이스가 감지되었습니다. Chrome에서 실행하겠습니다. ⏺ Bash(flutter run -d chrome) timeout: 3m 0s ⎿ Running in the background (↓ to manage) ⏺ Read agent output b199e23 ⎿ Read 17 lines ⏺ 앱이 Chrome에서 실행 중입니다! 브라우저 창이 열리면서 Stitch 디자인 기반의 "Cute Monthly Overview" 앱이 표시됩니다. 실행 상태 - 플랫폼: Chrome (Web) - 모드: Debug - DevTools: http://127.0.0.1:53271 단축키 ┌─────┬─────────────┐ │ 키 │ 동작 │ ├─────┼─────────────┤ │ r │ Hot reload │ ├─────┼─────────────┤ │ R │ Hot restart │ ├─────┼─────────────┤ │ q │ 종료 │ └─────┴─────────────┘ 앱이 정상적으로 보이시나요? ✻ Crunched for 3m 24s ❯ 네. 잘보입니다. APK build해주세요 ⏺ 디스크 공간을 확인하고 APK 빌드를 진행하겠습니다. ⏺ Bash(df -h / | awk 'NR==2 {print $4}') ⎿ 8.1Gi ⏺ 디스크 공간 8.1GB 확보되었습니다. APK 빌드를 시작합니다. ⏺ Bash(flutter build apk --release) timeout: 10m 0s ⎿ Running Gradle task 'assembleRelease'... Checking the license for package NDK (Side … +56 lines (ctrl+o to expand) ⏺ APK 빌드 성공! 항목: APK 위치 값: build/app/outputs/flutter-apk/app-release.apk ──────────────────────────────────────── 항목: 파일 크기 값: 43.5MB ──────────────────────────────────────── 항목: 빌드 시간 값: 265.5초 설치된 SDK 컴포넌트 - NDK 28.2.13676358 - Android SDK Build-Tools 35 - CMake 3.22.1 APK 전체 경로 /Users/leomyung/flutter_test/source_code/cute_mon thly_app/build/app/outputs/flutter-apk/app-releas e.apk Android 기기에서 이 APK를 설치하여 테스트할 수 있습니다.
결과와 배운 점
Claude Code를 이용하면 설치 과정이 정말 간편하지만, 세부 설정을 스스로 알 수 없다는 점은 아쉬웠어요
Stitch 연동은 쉬웠지만, APK 빌드 과정에서 용량 이슈는 예기치 못한 문제였어요
다음 스텝으로는 어떤 앱을 만들지 기획부터 해보려고 해요 ✍️
도움 받은 글
스터디장님이 제공한 가이드북
