개요

image.pngimage.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 create lotto_generator
cd lotto_generator
  • flutter app 생성

image.pngimage.png클릭하여 확대

  • emulator 실행 및 생성된 app 실행

image.pngimage.png클릭하여 확대

image.pngimage.png클릭하여 확대

3.2 Gemini CLI로 코드 생성

gemini 

"
현재 경로에서 android용 flutter project 생성했어.
Flutter로 로또 번호 생성기 앱 만들어줘. 1-45 사이의 중복되지 않는 6개 숫자를 생성하고, 버튼을 누르면 새로운 번호를 생성하는 앱이야."

image.pngimage.png클릭하여 확대

image.pngimage.png클릭하여 확대

3.3 앱 실행

flutter run

image.pngimage.png클릭하여 확대

4. 코드 설명

4.1 주요 구성 요소

  • LottoApp: 앱의 전체 구조를 정의하는 StatelessWidget
  • LottoGenerator: 실제 로또 번호 생성 로직을 담당하는 StatefulWidget
  • generateLottoNumbers(): 1-45 사이의 중복되지 않는 6개 숫자 생성
  • getNumberColor(): 숫자 범위에 따라 다른 색상 적용

4.2 핵심 로직

void generateLottoNumbers() {
  setState(() {  // 화면 업데이트를 위한 setState
    lottoNumbers.clear();  // 기존 번호 초기화
    while (lottoNumbers.length < 6) {
      int number = random.nextInt(45) + 1;  // 1-45 랜덤 숫자
      if (!lottoNumbers.contains(number)) {  // 중복 체크
        lottoNumbers.add(number);
      }
    }
    lottoNumbers.sort();  // 오름차순 정렬
  });
}

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 다음 단계

  1. UI 개선: Material 3 디자인 적용, 더 예쁜 애니메이션
  2. 기능 확장: 번호 저장, 통계 기능, QR 코드 생성
  3. 상태 관리: Provider, Riverpod 등 고급 상태 관리 라이브러리 학습
  4. 배포: Google Play Store에 앱 출시

마무리

이 튜토리얼을 통해 Flutter의 기본 개념을 이해하고, Gemini CLI의 활용법을 경험했습니다. AI의 도움을 받으면 더 빠르고 효율적으로 앱을 개발할 수 있으며, 복잡한 로직도 쉽게 구현할 수 있습니다.

계속해서 다양한 기능을 추가하며 Flutter 개발 실력을 향상시켜보세요!