4.png클릭하여 확대
나도 앱 개발을 시작할 수 있다.
-
목표: Gemini CLI 이용하여 앱 개발
-
참여자: 김정민, 골든필드, 최고기, 오지우, 나라바람 (총 5명)
-
장소: 구미생활문화센터 2층 미술공작실
-
시간: 2025년 10월 16일(목) 오후 7시
-
지난 수업 소감
- 김정민
- 골든필드
- 최고기
- 오지우
- 나라바람
-
결과
도움
3줄 마무리
개요
image.png클릭하여 확대
image.png클릭하여 확대
이 튜토리얼에서는 Flutter와 Gemini CLI를 활용하여 사다리 타기 앱을 만드는 방법을 학습합니다. Flutter의 기본 구조를 이해하고, AI의 도움을 받아 효율적으로 앱을 개발하는 과정을 경험해보세요.
사전 준비
- ✅ Windows 환경에서 Flutter 설치 완료
- ✅ Android 에뮬레이터 정상 실행 가능
- ✅ Gemini CLI 설치 완료
https://www.gumicoding.co.kr/posts/GExvfQMJXbRaWHVwKibB
1. Flutter 기본 개념 이해
1.1 Starter App이란?
Flutter에서 새 프로젝트를 생성하면 기본적으로 제공되는 템플릿 앱입니다.
flutter create my_app
명령어로 생성되며, Material Design을 기반으로 한 기본 UI 구조를 포함합니다.
1.2 Counter App 소개
Flutter의 기본 예제인 Counter App은 다음과 같은 기능을 포함합니다:
- 중앙에 숫자 표시
- 하단에 FloatingActionButton (+ 버튼)
- 버튼을 누를 때마다 숫자가 1씩 증가
- Flutter의 핵심 개념인 State Management를 보여주는 간단한 예제
주요 학습 포인트:
StatefulWidget: 상태가 변하는 위젯setState(): 화면을 다시 그리도록 하는 함수- Widget Tree: Flutter의 UI 구조
2. Gemini CLI 사용 경험
2.1 Gemini CLI란?
Google의 Gemini AI 모델을 명령줄에서 직접 사용할 수 있는 도구입니다.
2.2 기본 사용법
# 간단한 질문하기
gemini "Flutter에서 랜덤 숫자 생성하는 방법"
# 코드 생성 요청
gemini "Flutter에서 1-45 사이의 랜덤 숫자 6개 생성하는 함수 작성해줘"
# 파일 내용과 함께 질문
gemini -f lib/main.dart "이 코드를 개선할 방법은?"
2.3 사용 후기
장점:
- 빠른 코드 생성 및 문제 해결
- IDE를 벗어나지 않고도 AI 도움을 받을 수 있음
- Flutter 관련 질문에 정확한 답변 제공
활용 팁:
- 구체적인 요구사항을 명시할수록 더 정확한 답변
- 에러 메시지와 함께 질문하면 해결책을 빠르게 얻을 수 있음
3. 사다리 타기 앱 개발
3.1 프로젝트 생성
# flutter app 만들기
flutter create ladder_climbing_game
# 경로 이동
cd ladder_climbing_game
# emulator 실행
flutter emulators --launch Pixel_6a
# flutter app 실행
flutter run
- flutter app 생성
- emulator 실행 및 생성된 app 실행
image.png클릭하여 확대
image.png클릭하여 확대
ERROR
flutter emulators --launch Pixel_6a
The Android emulator exited with code -11 during startup
Android emulator stderr:
I1015 15:35:28.440691 69778 opengles.cpp:291] android_startOpenglesRenderer: gpu info
I1015 15:35:28.440716 69778 opengles.cpp:292] MESA: error: dri3_alloc_render_buffer:1634 xcb_dri3_pixmap_from_buffer[s] failed MESA: error: X error: 11
Address these issues and try again.
# 시도 1
cd C:\Users\%USERNAME%\.android\avd\Pixel_6a.avd
notepad config.ini # Notepad로 열기
# 시도 2
$Env:LIBGL_ALWAYS_SOFTWARE=1 # 소프트웨어 강제 (세션 한정)
flutter emulators --launch Pixel_6a --emulator-opts "-gpu swiftshader_indirect"
# 시도 3
& "C:\Users\%USERNAME%\AppData\Local\Android\Sdk\emulator\emulator.exe" -avd Pixel_6a -gpu swiftshader_indirect
3.2 Gemini CLI로 코드 생성
현재 경로에서 android용 flutter project 생성했어.
Flutter로 사다리 타기 앱 만들어줘. 참가자 이름과 결과를 입력받아서 사다리를 그려주고, 각 참가자가 어떤 결과를 받게 되는지 보여주는 앱이야.
image.png클릭하여 확대
3.3 앱 실행
flutter run
image.png클릭하여 확대
4. 코드 설명
4.1 주요 구성 요소
- LadderApp: 앱의 전체 구조를 정의하는 StatelessWidget
- LadderGame: 실제 사다리 타기 로직을 담당하는 StatefulWidget
- generateLadder(): 랜덤하게 사다리 가로선을 생성하는 함수
- tracePath(): 각 참가자의 경로를 추적하여 결과를 매칭하는 함수
4.2 핵심 로직
void generateLadder() {
setState(() { // 화면 업데이트를 위한 setState
ladder.clear(); // 기존 사다리 초기화
int rows = 8; // 사다리 가로선 개수
for (int i = 0; i < rows; i++) {
List<bool> row = [];
for (int j = 0; j < participants.length - 1; j++) {
row.add(random.nextBool()); // 랜덤하게 가로선 생성
}
ladder.add(row);
}
results = tracePaths(); // 경로 추적하여 결과 매칭
});
}
5. 추가 기능 개발 (Gemini CLI 활용)
5.1 기능 추가 아이디어
# 참가자 수 동적 변경
gemini "Flutter에서 사다리 타기 앱의 참가자 수를 사용자가 입력할 수 있도록 기능 추가해줘"
# 애니메이션 추가
gemini "Flutter에서 사다리 타기 결과를 보여줄 때 경로를 따라가는 애니메이션 효과 추가하는 방법"
# 결과 기록 저장
gemini "Flutter SharedPreferences를 사용해서 사다리 타기 게임 결과를 저장하는 방법"
6. 학습 정리
6.1 배운 내용
- Flutter의 기본 구조 (StatefulWidget vs StatelessWidget)
- State Management의 기본 개념
- 랜덤 사다리 생성 및 경로 추적 로직
- Gemini CLI를 활용한 효율적인 개발 방법
6.2 다음 단계
- UI 개선: Material 3 디자인 적용, 사다리 경로 애니메이션
- 기능 확장: 참가자/결과 동적 추가, 게임 기록 저장, 공유 기능
- 상태 관리: Provider, Riverpod 등 고급 상태 관리 라이브러리 학습
- 배포: Google Play Store에 앱 출시
마무리
이 튜토리얼을 통해 Flutter의 기본 개념을 이해하고, Gemini CLI의 활용법을 경험했습니다. AI의 도움을 받으면 더 빠르고 효율적으로 앱을 개발할 수 있으며, 복잡한 로직도 쉽게 구현할 수 있습니다.
계속해서 다양한 기능을 추가하며 Flutter 개발 실력을 향상시켜보세요!