[Flutter 공부하기] Flutter 개발 환경 설정하기

지난 시간까지 Flutter의 개념과 Dart 언어 기초에 대해 알아보았는데요. 이번에는 Flutter 개발을 시작하기 위한 환경 설정 방법을 알아보겠습니다. 운영체제별로 설치 과정이 다르므로, Windows, macOS, Linux 각각의 환경에 맞는 설정 방법을 자세히 설명해 드리겠습니다.

Windows에서 Flutter 설정하기

1. 시스템 요구사항 확인

• 운영체제: Windows 7 SP1 이상
• 디스크 공간: 최소 1.64GB (Flutter SDK만)
• 도구: Windows PowerShell 5.0 이상, Git for Windows

2. Flutter SDK 설치

1. Flutter 공식 사이트에서 최신 버전의 Flutter SDK를 다운로드합니다.
2. zip 파일을 다운로드 받은 후, 원하는 위치에 압축을 풀어줍니다(예: C:\src\flutter).
   • 주의: 특수 문자나 공백이 포함된 경로, Program Files 폴더 등은 피하는 것이 좋습니다.

3. 환경 변수 설정

Flutter 명령어를 어디서든 실행할 수 있도록 환경 변수를 설정합니다.

1. 시작 메뉴에서 '환경 변수'를 검색하여 '시스템 환경 변수 편집' 실행
2. '환경 변수' 버튼 클릭
3. '시스템 변수' 섹션에서 'Path' 변수를 찾아 '편집' 클릭
4. '새로 만들기' 버튼을 클릭하고 Flutter SDK의 bin 폴더 경로를 추가(예: C:\src\flutter\bin)
5. 모든 대화 상자에서 '확인' 버튼 클릭

4. Flutter 설치 확인

명령 프롬프트(CMD)나 PowerShell을 열고 다음 명령어를 실행합니다.

flutter --version

5. Android 개발 환경 설정

1. Android Studio 공식 사이트에서 최신 버전을 다운로드합니다.
2. 다운로드한 설치 파일을 실행하고 화면의 지시에 따라 설치를 완료합니다.
3. Android Studio를 실행하고 초기 설정 마법사를 통해 Android SDK, Android SDK Platform-Tools, Android SDK Build-Tools를 설치합니다.

6. Android 에뮬레이터 설정

1. Android Studio를 실행합니다.
2. 메뉴에서 Tools > AVD Manager를 선택합니다.
3. Create Virtual Device 버튼을 클릭합니다.
4. 원하는 기기 모델을 선택하고 Next를 클릭합니다.
5. 시스템 이미지를 선택하고(API 레벨 30 이상 권장) Next를 클릭합니다.
6. 에뮬레이터 이름과 기타 설정을 확인한 후 Finish를 클릭합니다.
7. 생성된 에뮬레이터를 실행하려면 AVD Manager에서 Play(▶) 버튼을 클릭합니다.

7. Android 라이센스 동의

Flutter를 사용하기 전에 Android SDK 라이센스에 동의해야 합니다.

flutter doctor --android-licenses

8. Windows 데스크톱 개발 지원 활성화

1. Flutter SDK가 Windows 데스크톱 지원을 활성화했는지 확인합니다.

   flutter config --enable-windows-desktop

2. Visual Studio 2019 이상 버전과 C++ 데스크톱 개발 워크로드가 설치되어 있어야 합니다.

9. Flutter 웹 개발 환경 설정

1. Flutter SDK가 웹 지원을 활성화했는지 확인합니다.

   flutter devices

   명령어 실행 후 'Chrome' 또는 'Web server'가 목록에 있어야 합니다. 없다면 다음 명령어로 웹 지원을 활성화합니다.

   flutter config --enable-web

2. Chrome 브라우저가 설치되어 있는지 확인합니다. 설치되어 있지 않다면 Chrome 다운로드 페이지에서 설치합니다.

10. IDE 설정 (Android Studio)

1. Android Studio를 실행합니다.
2. File > Settings를 선택합니다.
3. Plugins를 선택하고 마켓플레이스에서 'Flutter'를 검색합니다.
4. Install 버튼을 클릭하여 Flutter 플러그인을 설치합니다. Dart 플러그인도 함께 설치됩니다.
5. 설치가 완료되면 IDE를 재시작합니다.

11. IDE 설정 (Visual Studio Code)

1. Visual Studio Code를 실행합니다.
2. 왼쪽 사이드바에서 Extension 아이콘을 클릭하거나 Ctrl+Shift+X를 눌러 확장 마켓플레이스를 엽니다.
3. 검색 창에 'Flutter'를 입력합니다.
4. Flutter 확장을 선택하고 Install 버튼을 클릭합니다. Dart 확장도 함께 설치됩니다.
5. 설치가 완료되면 VS Code를 재시작합니다.

12. Flutter Doctor 실행

Flutter SDK를 설치한 후에는 flutter doctor 명령어를 실행하여 Flutter 개발에 필요한 추가 구성 요소를 확인하고 설치할 수 있습니다.

flutter doctor

13. 첫 번째 Flutter 프로젝트 생성

명령줄에서 프로젝트 생성

1. 명령 프롬프트를 열고 프로젝트를 저장할 디렉터리로 이동합니다.
2. 다음 명령어를 실행하여 새 Flutter 프로젝트를 생성합니다.

   flutter create my_first_flutter_app

3. 프로젝트 디렉터리로 이동합니다.

   cd my_first_flutter_app

4. 에뮬레이터나 연결된 디바이스에서 앱을 실행합니다.

   flutter run

 

macOS에서 Flutter 설정하기

 

1. 시스템 요구사항 확인

• 운영체제: macOS 10.14 (Mojave) 이상
• 디스크 공간: 최소 2.8GB (Flutter SDK와 기본 iOS 도구)
• 도구: bash, curl, git, mkdir, rm, unzip, which

2. Flutter SDK 설치 (두 가지 방법)

방법 1: Homebrew 사용 (권장)

Terminal을 열고 다음 명령어를 실행합니다.

brew install --cask flutter

방법 2: 수동 설치

1. Flutter 공식 사이트에서 최신 버전의 Flutter SDK를 다운로드합니다.
2. 다운로드한 zip 파일을 원하는 위치에 압축 해제합니다(예: ~/development/flutter).

3. 환경 변수 설정 (수동 설치 시)

Terminal을 열고 다음 명령어를 실행합니다.

# zsh 사용 시 (macOS Catalina 이상 기본값)
echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

# bash 사용 시
echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.bash_profile
source ~/.bash_profile

4. Flutter 설치 확인

Terminal에서 다음 명령어를 실행합니다.

flutter --version

5. Xcode 설치 (iOS 개발용)

1. Mac App Store에서 Xcode를 검색하여 설치합니다.
2. 설치가 완료된 후 Xcode를 최소한 한 번 실행하여 추가 구성 요소 설치 및 라이센스 동의를 완료합니다.
3. Xcode 명령줄 도구를 설정합니다.

   sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
   sudo xcodebuild -runFirstLaunch

6. iOS 시뮬레이터 설정

1. Terminal에서 다음 명령어를 실행하여 iOS 시뮬레이터를 엽니다.

   open -a Simulator

2. 시뮬레이터가 실행되면 메뉴에서 File > Open Simulator를 선택하고 원하는 iOS 기기를 선택합니다.

7. CocoaPods 설치

iOS 개발에는 CocoaPods가 필요합니다.

sudo gem install cocoapods

macOS Mojave 이상에서는 다음 명령어를 사용합니다.

sudo gem install cocoapods -n /usr/local/bin

8. Android Studio 설치 (Android 개발용)

1. Android Studio 공식 사이트에서 최신 버전을 다운로드합니다.
2. 다운로드한 설치 파일을 실행하고 화면의 지시에 따라 설치를 완료합니다.
3. Android Studio를 실행하고 초기 설정 마법사를 통해 Android SDK, Android SDK Platform-Tools, Android SDK Build-Tools를 설치합니다.

9. Android 에뮬레이터 설정

1. Android Studio를 실행합니다.
2. 메뉴에서 Tools > AVD Manager를 선택합니다.
3. Create Virtual Device 버튼을 클릭합니다.
4. 원하는 기기 모델을 선택하고 Next를 클릭합니다.
5. 시스템 이미지를 선택하고(API 레벨 30 이상 권장) Next를 클릭합니다.
6. 에뮬레이터 이름과 기타 설정을 확인한 후 Finish를 클릭합니다.
7. 생성된 에뮬레이터를 실행하려면 AVD Manager에서 Play(▶) 버튼을 클릭합니다.

10. Android 라이센스 동의

Flutter를 사용하기 전에 Android SDK 라이센스에 동의해야 합니다.

flutter doctor --android-licenses

11. macOS 데스크톱 개발 지원 활성화

1. Flutter SDK가 macOS 데스크톱 지원을 활성화했는지 확인합니다.

   flutter config --enable-macos-desktop

12. Flutter 웹 개발 환경 설정

1. Flutter SDK가 웹 지원을 활성화했는지 확인합니다.

   flutter devices

   명령어 실행 후 'Chrome' 또는 'Web server'가 목록에 있어야 합니다. 없다면 다음 명령어로 웹 지원을 활성화합니다.

   flutter config --enable-web

2. Chrome 브라우저가 설치되어 있는지 확인합니다. 설치되어 있지 않다면 Chrome 다운로드 페이지에서 설치합니다.

13. IDE 설정 (Android Studio/IntelliJ IDEA)

1. Android Studio 또는 IntelliJ IDEA를 실행합니다.
2. Android Studio > Preferences를 선택합니다.
3. Plugins를 선택하고 마켓플레이스에서 'Flutter'를 검색합니다.
4. Install 버튼을 클릭하여 Flutter 플러그인을 설치합니다. Dart 플러그인도 함께 설치됩니다.
5. 설치가 완료되면 IDE를 재시작합니다.

14. IDE 설정 (Visual Studio Code)

1. Visual Studio Code를 실행합니다.
2. 왼쪽 사이드바에서 Extension 아이콘을 클릭하거나 Cmd+Shift+X를 눌러 확장 마켓플레이스를 엽니다.
3. 검색 창에 'Flutter'를 입력합니다.
4. Flutter 확장을 선택하고 Install 버튼을 클릭합니다. Dart 확장도 함께 설치됩니다.
5. 설치가 완료되면 VS Code를 재시작합니다.

15. Flutter Doctor 실행

Flutter SDK를 설치한 후에는 flutter doctor 명령어를 실행하여 Flutter 개발에 필요한 추가 구성 요소를 확인하고 설치할 수 있습니다.

flutter doctor

16. 첫 번째 Flutter 프로젝트 생성

명령줄에서 프로젝트 생성

1. Terminal을 열고 프로젝트를 저장할 디렉터리로 이동합니다.
2. 다음 명령어를 실행하여 새 Flutter 프로젝트를 생성합니다.

   flutter create my_first_flutter_app

3. 프로젝트 디렉터리로 이동합니다.

   cd my_first_flutter_app

4. 에뮬레이터나 연결된 디바이스에서 앱을 실행합니다.

   flutter run

 

Linux에서 Flutter 설정하기

1. 시스템 요구사항 확인

• 운영체제: 64비트 Linux
• 디스크 공간: 최소 600MB (Flutter SDK만)
• 도구: bash, curl, git, mkdir, rm, unzip, which, XZ 유틸리티
• 라이브러리: libGLU.so.1, libc++1, libgtk-3-0

2. Flutter SDK 다운로드

Terminal을 열고 다음 명령어를 순서대로 실행합니다.

# SDK를 설치할 디렉터리 생성
mkdir -p ~/development

# SDK 다운로드 및 압축 해제
cd ~/development
wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.16.0-stable.tar.xz
tar xf flutter_linux_3.16.0-stable.tar.xz

3. 환경 변수 설정

Terminal에서 다음 명령어를 실행합니다.

echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.bashrc
source ~/.bashrc

4. Flutter 설치 확인

Terminal에서 다음 명령어를 실행합니다.

flutter --version

5. 의존성 패키지 설치

필요한 의존성 패키지를 설치합니다.

sudo apt-get install clang cmake ninja-build pkg-config libgtk-3-dev

Ubuntu 20.04에서는 다음 패키지도 필요합니다.

sudo apt-get install libblkid-dev liblzma-dev

6. Android Studio 설치 (Android 개발용)

1. Android Studio 공식 사이트에서 최신 버전을 다운로드합니다.
2. 다운로드한 설치 파일을 실행하고 화면의 지시에 따라 설치를 완료합니다.
3. Android Studio를 실행하고 초기 설정 마법사를 통해 Android SDK, Android SDK Platform-Tools, Android SDK Build-Tools를 설치합니다.

7. Android 에뮬레이터 설정

1. Android Studio를 실행합니다.
2. 메뉴에서 Tools > AVD Manager를 선택합니다.
3. Create Virtual Device 버튼을 클릭합니다.
4. 원하는 기기 모델을 선택하고 Next를 클릭합니다.
5. 시스템 이미지를 선택하고(API 레벨 30 이상 권장) Next를 클릭합니다.
6. 에뮬레이터 이름과 기타 설정을 확인한 후 Finish를 클릭합니다.
7. 생성된 에뮬레이터를 실행하려면 AVD Manager에서 Play(▶) 버튼을 클릭합니다.

8. Android 라이센스 동의

Flutter를 사용하기 전에 Android SDK 라이센스에 동의해야 합니다.

flutter doctor --android-licenses

9. Linux 데스크톱 개발 지원 활성화

1. Flutter SDK가 Linux 데스크톱 지원을 활성화했는지 확인합니다.

   flutter config --enable-linux-desktop

10. Flutter 웹 개발 환경 설정

1. Flutter SDK가 웹 지원을 활성화했는지 확인합니다.

   flutter devices

   명령어 실행 후 'Chrome' 또는 'Web server'가 목록에 있어야 합니다. 없다면 다음 명령어로 웹 지원을 활성화합니다.

   flutter config --enable-web

2. Chrome 브라우저가 설치되어 있는지 확인합니다. 설치되어 있지 않다면 Chrome 다운로드 페이지에서 설치합니다.

11. IDE 설정 (Android Studio/IntelliJ IDEA)

1. Android Studio 또는 IntelliJ IDEA를 실행합니다.
2. File > Settings를 선택합니다.
3. Plugins를 선택하고 마켓플레이스에서 'Flutter'를 검색합니다.
4. Install 버튼을 클릭하여 Flutter 플러그인을 설치합니다. Dart 플러그인도 함께 설치됩니다.
5. 설치가 완료되면 IDE를 재시작합니다.

12. IDE 설정 (Visual Studio Code)

1. Visual Studio Code를 실행합니다.
2. 왼쪽 사이드바에서 Extension 아이콘을 클릭하거나 Ctrl+Shift+X를 눌러 확장 마켓플레이스를 엽니다.
3. 검색 창에 'Flutter'를 입력합니다.
4. Flutter 확장을 선택하고 Install 버튼을 클릭합니다. Dart 확장도 함께 설치됩니다.
5. 설치가 완료되면 VS Code를 재시작합니다.

13. Flutter Doctor 실행

Flutter SDK를 설치한 후에는 flutter doctor 명령어를 실행하여 Flutter 개발에 필요한 추가 구성 요소를 확인하고 설치할 수 있습니다.

flutter doctor

14. 첫 번째 Flutter 프로젝트 생성

명령줄에서 프로젝트 생성

1. Terminal을 열고 프로젝트를 저장할 디렉터리로 이동합니다.
2. 다음 명령어를 실행하여 새 Flutter 프로젝트를 생성합니다.

   flutter create my_first_flutter_app

3. 프로젝트 디렉터리로 이동합니다.

   cd my_first_flutter_app

4. 에뮬레이터나 연결된 디바이스에서 앱을 실행합니다.

   flutter run

트러블슈팅 및 일반적인 문제 해결

Flutter Doctor가 문제를 보고할 경우

flutter doctor -v 명령어를 실행하여 자세한 문제점과 해결 방법을 확인합니다.

Android SDK 라이센스 문제

라이센스 동의에 문제가 있다면 다음 명령어를 실행합니다.

flutter doctor --android-licenses

Flutter 명령어를 찾을 수 없는 경우

환경 변수 설정이 올바르게 되었는지 확인합니다. 터미널이나 명령 프롬프트를 다시 시작해보세요.

iOS 빌드 실패 (macOS만 해당)

CocoaPods가 올바르게 설치되었는지 확인합니다.

pod --version

버전이 표시되지 않으면 CocoaPods를 다시 설치합니다.

sudo gem install cocoapods

Android 에뮬레이터 성능 문제

Intel HAXM을 설치하여 에뮬레이터 성능을 향상시킬 수 있습니다. Android Studio를 통해 SDK Manager에서 설치할 수 있습니다.

Flutter 웹 지원이 작동하지 않는 경우

Flutter를 최신 버전으로 업데이트합니다.

flutter upgrade
flutter config --enable-web

정리

이 글에서는 Flutter 개발 환경을 설정하는 방법을 운영체제별로 알아보았습니다. Flutter SDK 설치부터 Android와 iOS 개발 환경 설정, IDE 설정, 웹 및 데스크톱 지원 활성화까지 Flutter 개발을 시작하기 위한 모든 과정을 다루었습니다.

이제 개발 환경이 준비되었으니, 다음 글에서는 첫 번째 Flutter 앱을 만들어보는 과정을 자세히 살펴보겠습니다.

---

이 포스팅은 Flutter 공식 문서와 개인 개발 경험을 바탕으로 작성되었습니다.