27. Windows에서 Flutter로 Android 앱 개발 시작하기: 단계별 가이드 | Flutter

새벽 조명 스타일, dall-e

 

Windows에서 Flutter로 Android 앱 개발 시작하기: 단계별 가이드

 

01. 서론

1) Flutter와 Windows 환경에서의 개발

Flutter는 Google에서 개발한 오픈소스 UI 소프트웨어 개발 키트로, 단일 코드베이스를 통해 iOS, Android, 웹, 데스크톱 등 다양한 플랫폼에서 네이티브 애플리케이션을 개발할 수 있게 해줍니다. Flutter의 장점 중 하나는 직관적인 위젯 기반의 UI 개발 방식을 제공한다는 점입니다. 이를 통해 개발자는 복잡한 UI를 손쉽게 구현하고, 유지보수할 수 있습니다.

 

Windows 환경에서 Flutter를 사용하면 개발자들이 익숙한 도구와 환경을 활용할 수 있어 더욱 효율적으로 개발 작업을 진행할 수 있습니다. 특히, Windows 운영체제는 많은 개발자들에게 익숙한 플랫폼으로, Android 앱 개발에 필요한 다양한 도구와 호환됩니다.

2) Flutter로 Android 앱 개발의 중요성

Android는 전 세계적으로 가장 널리 사용되는 모바일 운영체제 중 하나로, 수많은 애플리케이션이 Android 플랫폼에서 실행되고 있습니다. 이러한 환경에서 Android 앱을 개발하는 기술은 매우 중요합니다. Flutter는 빠른 개발 사이클과 높은 성능, 다양한 위젯 라이브러리를 제공하여 Android 앱 개발을 더욱 효율적이고 즐겁게 만듭니다.

 

Flutter를 사용하면 네이티브 성능을 제공하는 동시에 코드의 재사용성을 극대화할 수 있습니다. 이는 개발 시간과 비용을 절감하는 데 큰 도움이 되며, 다양한 기기와 플랫폼에서 일관된 사용자 경험을 제공할 수 있게 해줍니다.

 

02. 준비 사항

1) 시스템 요구사항

하드웨어 요구사항

• 최소 요구사항:
  • CPU: x86_64 CPU 코어 4개
  • 메모리: 8GB RAM
  • 디스플레이 해상도: WXGA (1366 x 768)
  • 자유 디스크 공간: 11GB
• 권장 사양:
  • CPU: x86_64 CPU 코어 8개
  • 메모리: 16GB RAM
  • 디스플레이 해상도: FHD (1920 x 1080)
  • 자유 디스크 공간: 60GB

소프트웨어 요구사항

• 운영 체제: Microsoft Windows 10 (64비트) 이상
• 개발 도구: Git for Windows 2.27 이상, Android Studio 2023.2.1 (Iguana) 이상

2) 필요한 도구 설치

Git 설치

Git은 소스 코드를 관리하고 버전 관리를 수행하는 도구입니다. Windows에 Git을 설치하려면 Git for Windows 웹사이트에서 최신 버전을 다운로드하고 설치합니다.

 

설치 후, Git Bash를 열고 git --version 명령어를 실행하여 설치가 정상적으로 완료되었는지 확인합니다.

git --version

Android Studio 설치

Android Studio는 Android 애플리케이션을 개발하기 위한 통합 개발 환경(IDE)입니다. Android Studio 웹사이트에서 최신 버전을 다운로드하여 설치합니다.

 

설치 과정에서 Android SDK, Command-line Tools, Build-Tools, Platform-Tools, Emulator 등을 함께 설치합니다. 설치가 완료되면 Android Studio를 열고, SDK Manager를 통해 필요한 SDK와 도구들을 업데이트합니다.

Visual Studio Code 설치

Visual Studio Code(VS Code)는 경량의 소스 코드 편집기로, 다양한 확장 기능을 통해 강력한 개발 환경을 제공합니다. Visual Studio Code 웹사이트에서 최신 버전을 다운로드하여 설치합니다.

 

설치 후, Flutter와 Dart 확장을 추가하여 Flutter 개발 환경을 설정합니다. VS Code의 확장(Extensions) 메뉴에서 "Flutter"와 "Dart"를 검색하여 설치합니다.

 

설치 후, VS Code에서 Command Palette(명령 팔레트)를 열고(기본 단축키: Ctrl+Shift+P), "Flutter: New Project"를 선택하여 새로운 Flutter 프로젝트를 생성할 수 있습니다.

 

03. Flutter 설치 및 설정

1) Flutter SDK 설치

Visual Studio Code를 사용한 설치

1. Visual Studio Code 설치: Visual Studio Code 웹사이트에서 최신 버전을 다운로드하여 설치합니다.

2. Flutter와 Dart 확장 설치: Visual Studio Code의 확장(Extensions) 메뉴에서 "Flutter"와 "Dart"를 검색하여 설치합니다.

3. Flutter 설치: VS Code에서 Command Palette(명령 팔레트)를 열고(기본 단축키: Ctrl+Shift+P), "Flutter: New Project"를 선택합니다. 프로젝트 폴더를 지정하면 Flutter SDK가 자동으로 설치됩니다.

Flutter SDK 수동 설치

1. Flutter SDK 다운로드: Flutter SDK 웹사이트에서 Windows용 Flutter SDK를 다운로드합니다.

2. 압축 해제: 다운로드한 ZIP 파일의 압축을 풀고, 원하는 경로에 Flutter 폴더를 이동합니다. 예를 들어, C:\flutter 경로를 사용할 수 있습니다.

3. 환경 변수 설정: 시스템 환경 변수 설정을 통해 Flutter 명령어를 사용할 수 있도록 설정합니다.

• 시스템 환경 변수 열기: "시스템 속성" 창에서 "고급 시스템 설정"을 클릭한 후, "환경 변수" 버튼을 클릭합니다.
• Path 추가: 시스템 변수 목록에서 "Path"를 선택하고, "편집" 버튼을 클릭합니다. "새로 만들기" 버튼을 클릭하여 Flutter SDK 경로(예: C:\flutter\bin)를 추가합니다.

4. 설치 확인: 명령 프롬프트(cmd)를 열고 flutter --version 명령어를 실행하여 설치가 정상적으로 완료되었는지 확인합니다.

flutter --version

2) Flutter와 Android 개발 환경 설정

Android Studio 설정

1. Android Studio 설치: Android Studio 웹사이트에서 최신 버전을 다운로드하여 설치합니다.

2. SDK 설정: Android Studio를 열고, "Configure" 메뉴에서 "SDK Manager"를 선택합니다. 필요한 Android SDK와 도구들을 설치합니다.

3. Flutter 플러그인 설치: Android Studio의 플러그인 설정에서 "Flutter"와 "Dart" 플러그인을 검색하여 설치합니다.

4. Android SDK 경로 설정: Flutter가 Android SDK를 인식할 수 있도록 환경 변수를 설정합니다. 환경 변수 설정 방법은 다음과 같습니다.

• 시스템 환경 변수 열기: "시스템 속성" 창에서 "고급 시스템 설정"을 클릭한 후, "환경 변수" 버튼을 클릭합니다.
• 새 시스템 변수 추가: "새로 만들기" 버튼을 클릭하고, 변수 이름에 ANDROID_HOME, 변수 값에 Android SDK 경로(예: C:\Users\YourUsername\AppData\Local\Android\Sdk)를 입력합니다.

Android 기기 설정

1. 에뮬레이터 설정: Android Studio의 AVD Manager를 사용하여 가상 Android 기기를 설정합니다. 새로운 가상 장치를 생성하고, 원하는 API 레벨과 기기 유형을 선택하여 에뮬레이터를 구성합니다.

2. 실제 기기 설정: 실제 Android 기기를 사용할 경우, 기기에서 개발자 옵션을 활성화하고 USB 디버깅을 활성화합니다. 기기를 USB 케이블로 연결하고, adb devices 명령어를 사용하여 기기가 인식되는지 확인합니다.

Flutter Doctor 실행 및 문제 해결

1. Flutter Doctor 실행: 명령 프롬프트(cmd)를 열고 flutter doctor 명령어를 실행하여 Flutter 설치 상태를 확인합니다. Flutter Doctor는 설치된 도구와 환경을 점검하고, 필요한 설정이나 추가 설치 항목을 안내합니다.

flutter doctor

2. 문제 해결: Flutter Doctor에서 발견된 문제를 해결합니다. 각 문제에 대한 안내를 따르고, 필요한 도구나 설정을 완료합니다. 예를 들어, Android Studio 설정, Android SDK 설치, 환경 변수 설정 등이 포함될 수 있습니다.

3. 재확인: 모든 문제를 해결한 후, 다시 flutter doctor 명령어를 실행하여 모든 항목이 정상적으로 설정되었는지 확인합니다.

flutter doctor

 

04. Flutter로 첫 번째 Android 앱 만들기

1) 새로운 Flutter 프로젝트 생성

Flutter로 첫 번째 Android 앱을 만들기 위해 새로운 프로젝트를 생성합니다. 아래의 단계에 따라 진행합니다:

Visual Studio Code 사용 시:

1. Visual Studio Code를 열고, Command Palette(명령 팔레트)를 엽니다(기본 단축키: Ctrl+Shift+P).
2. "Flutter: New Project"를 선택하고, 프로젝트 유형을 선택합니다. 예를 들어, "Application"을 선택합니다.
3. 프로젝트 이름을 입력하고, 저장할 디렉토리를 선택합니다.
4. Visual Studio Code가 Flutter 프로젝트를 생성하고, 필요한 파일과 디렉토리를 설정합니다.

Android Studio 사용 시:

1. Android Studio를 열고, "Start a new Flutter project"를 선택합니다.
2. "Flutter Application"을 선택하고, "Next" 버튼을 클릭합니다.
3. 프로젝트 이름, Flutter SDK 경로, 프로젝트 위치 등을 입력하고, "Finish" 버튼을 클릭합니다.
4. Android Studio가 Flutter 프로젝트를 생성하고, 필요한 파일과 디렉토리를 설정합니다.

2) 기본 코드 작성 및 실행

새로운 Flutter 프로젝트를 생성한 후, 기본적으로 제공되는 코드를 사용하여 첫 번째 앱을 실행해봅니다.

기본 코드 예제:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

앱 실행:

1. Visual Studio Code에서는 F5 키를 눌러 디버그 모드에서 앱을 실행하거나, Command Palette에서 "Flutter: Run"을 선택하여 앱을 실행할 수 있습니다.

2. Android Studio에서는 상단 툴바의 실행 버튼(녹색 화살표)을 클릭하여 앱을 실행할 수 있습니다.

3. 연결된 에뮬레이터 또는 실제 Android 기기에서 앱이 실행되며, "Hello, Flutter!" 메시지가 화면에 표시됩니다.

3) 코드 변경 및 실시간 반영

Flutter의 Hot Reload 기능을 사용하면 코드 변경 사항을 실시간으로 반영할 수 있습니다. 이를 통해 개발자는 빠르게 피드백을 받고, 앱을 수정할 수 있습니다.

코드 변경 예제:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Hello, Flutter!'),
              Text('Welcome to your first app!'),
            ],
          ),
        ),
      ),
    );
  }
}

Hot Reload 사용:

1. 코드 변경 후, Visual Studio Code에서는 Command Palette에서 "Flutter: Hot Reload"를 선택하거나, 단축키 Ctrl+Shift+R을 사용합니다.

2. Android Studio에서는 Hot Reload 버튼(번개 아이콘)을 클릭하여 변경 사항을 반영합니다.

3. 변경된 내용이 즉시 에뮬레이터 또는 실제 기기에 반영됩니다.

 

05. Flutter 개발 시 주의사항 및 팁

1) 개발 중 자주 발생하는 문제 해결

• 문제: flutter doctor에서 Android Studio나 SDK 관련 오류가 발생할 경우
• 해결 방법: Android Studio에서 SDK Manager를 열어 필요한 SDK 컴포넌트와 도구들이 설치되어 있는지 확인하고, flutter config --android-sdk 명령어를 사용하여 Flutter가 올바른 SDK 경로를 인식하도록 설정합니다.
• 문제: 에뮬레이터가 느리게 작동하거나 응답이 없는 경우
• 해결 방법: 에뮬레이터 설정에서 AVD Manager를 열고, 하드웨어 가속화를 활성화하거나 에뮬레이터의 메모리 설정을 조정합니다.

2) 성능 최적화 방법

• 최소한의 위젯 사용: 불필요한 위젯 사용을 줄이고, 위젯 트리를 단순화합니다.
• 빌드 메소드 최적화: 가능한 한 많은 작업을 build 메소드 외부에서 수행하여 위젯의 리빌드 빈도를 줄입니다.
• 이미지 최적화: 이미지를 로컬에서 사용하거나, 네트워크 이미지를 캐시하여 로딩 시간을 단축합니다.
• 애니메이션 최적화: 애니메이션이 복잡할 경우, Flutter의 애니메이션 라이브러리를 사용하여 성능을 최적화합니다.

3) 추가 리소스 및 학습 자료

• 공식 문서: Flutter 공식 문서에서는 설치 가이드, 위젯 설명, 샘플 코드 등 다양한 정보를 제공합니다.
• 온라인 강좌: Udemy, Coursera, YouTube 등에서 제공하는 Flutter 관련 강좌를 수강하여 실전 기술을 습득할 수 있습니다.
• 커뮤니티: Stack Overflow, Reddit, GitHub 등에서 Flutter 관련 질문을 하거나, 다른 개발자들과 정보를 공유할 수 있습니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.06.26 - [Study] - 00. HTML 개요 및 기본 태그 학습: 웹 개발의 기초

00. HTML 개요 및 기본 태그 학습: 웹 개발의 기초

2024.07.01 - [Study] - 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)