최근에 사이드 프로젝트를 진행하게 되면서 앱서비스를 만들어 보고 싶었습니다. 그래서 많이들 사용하시는 Flutter를 이용해서 개발해보기로 했는데요, 이 포스트에서는 Flutter 개발 환경을 구축하고 첫 번째 프로젝트를 생성해서 실행하는 전체 과정을 단계별로 알아보겠습니다.
Flutter란?
Flutter는 Google에서 개발한 오픈소스 UI 프레임워크로, 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있게 해줍니다. Dart 언어를 사용하며, 뛰어난 성능과 아름다운 UI를 제공합니다.
1. 사전 준비사항
Flutter 개발을 시작하기 전에 다음 요소들이 필요합니다:
공통 요구사항
- Flutter SDK: Flutter 개발의 핵심
- Dart 언어 지원: Flutter SDK에 포함되어 있음
- 코드 에디터: VS Code, Android Studio, IntelliJ IDEA 등
플랫폼별 요구사항
Android 개발을 위해:
- Android Studio 설치
- Android SDK
- 에뮬레이터 또는 실제 Android 기기
iOS 개발을 위해:
- Xcode (macOS에서만 가능)
- iOS 시뮬레이터 또는 실제 iPhone/iPad
2. Flutter 프로젝트 생성하기
기본 프로젝트 생성
터미널에서 다음 명령어로 새 Flutter 프로젝트를 생성할 수 있습니다:
flutter create my_app_name
cd my_app_name
특정 플랫폼만 지원하는 프로젝트 생성
iOS와 Android만 타겟으로 하는 경우 (웹, 데스크톱 제외):
flutter create my_app --platforms=android,ios
이 명령어로 웹이나 데스크톱 플랫폼 없이 모바일만 지원하는 깔끔한 프로젝트를 생성할 수 있습니다.
3. 개발 환경 설정
Flutter Doctor로 환경 확인
프로젝트를 시작하기 전에 개발 환경이 올바르게 설정되었는지 확인해봅시다:
flutter doctor
이 명령어는 Flutter 개발에 필요한 모든 구성 요소의 상태를 체크하고, 누락된 부분이 있다면 해결 방법을 알려줍니다.
필요한 패키지 설치
flutter pub get
4. 시뮬레이터/에뮬레이터 설정
Android 에뮬레이터 설정
-
Android Studio 설치
- Android Studio 다운로드
- 설치 시 Android Virtual Device(AVD) 포함 선택
-
AVD Manager에서 에뮬레이터 생성
# 사용 가능한 에뮬레이터 확인
flutter emulators
# 에뮬레이터 실행
flutter emulators --launch <emulator_name>
iOS 시뮬레이터 설정 (macOS만 가능)
-
Xcode 설치
- Mac App Store에서 Xcode 다운로드
- 설치 후 한 번 실행하여 추가 컴포넌트 설치
-
시뮬레이터 실행
# 시뮬레이터 열기
open -a Simulator
# 또는 Flutter 명령어로
flutter run
5. Flutter 앱 실행하기
실행 가능한 기기 확인
먼저 연결된 기기나 실행 중인 시뮬레이터를 확인합니다:
flutter devices
앱 실행 방법
방법 1: 기본 실행
flutter run
방법 2: 특정 기기에서 실행
# 기기 ID 확인 후
flutter run -d <device_id>
# 예시
flutter run -d iPhone_14 # iOS 시뮬레이터
flutter run -d emulator-5554 # Android 에뮬레이터
방법 3: 에디터에서 실행
lib/main.dart파일 열기- 에디터의 "Run" 또는 "Debug" 버튼 클릭
- 또는 F5 키 (디버그 모드로 실행)
6. 개발 중 유용한 기능들
Hot Reload와 Hot Restart
Flutter의 가장 강력한 기능 중 하나는 빠른 개발 사이클입니다:
- r: Hot Reload - 코드 변경사항을 즉시 반영
- R: Hot Restart - 앱을 완전히 재시작
- q: 앱 종료
- p: 성능 오버레이 표시
- o: iOS/Android 모드 전환
프로젝트 구조 이해
생성된 Flutter 프로젝트의 주요 폴더 구조:
my_app/
├── lib/
│ └── main.dart # 앱의 진입점
├── android/ # Android 관련 설정
├── ios/ # iOS 관련 설정
├── pubspec.yaml # 패키지 의존성 관리
└── test/ # 테스트 파일들
7. 문제 해결
자주 발생하는 문제들
에뮬레이터가 없는 경우:
# Android 에뮬레이터 생성
flutter emulators --create
# iOS 시뮬레이터 실행 (Mac만)
open -a Simulator
빌드 오류가 발생하는 경우:
# 클린 빌드
flutter clean
flutter pub get
flutter run
성능 모드로 실행:
flutter run --release
마무리
이제 Flutter 개발 환경이 완전히 구축되었습니다!
다음 단계로는:
- Flutter 위젯에 대해 학습하기
- 상태 관리 방법 익히기
- UI 디자인 패턴 적용하기
- 네이티브 기능 연동하기
Flutter의 강력한 기능들을 활용해서 멋진 모바일 앱을 만들어보세요.
궁금한 점이나 문제가 발생하면 Flutter 공식 문서를 참고하거나 커뮤니티의 도움을 받아보세요.
이 글이 Flutter 개발을 시작하는 데 도움이 되었기를 바랍니다.