플러터(Flutter)는 구글에서 개발한 프레임워크로, 구글 자체 언어인 다트(Dart)를 기반으로 합니다. 단일 코드 한 세트로 웹, iOS, 안드로이드, 리눅스, 윈도우는 물론 임베디드 기기용 애플리케이션까지 제작할 수 있습니다. 유사한 프레임워크로는 마이크로소프트의 MAUI, PHP 기반 NativePHP가 있습니다.
플러터는 오픈소스로, 하나의 코드베이스로 깔끔하고 네이티브 컴파일된 다중 플랫폼 앱을 만들 때 활용됩니다. 지금 많은 개발자들이 안드로이드 앱 개발에 이 툴을 쓰고 있습니다.
플러터는 네이티브 바이너리 코드로 빌드되기 때문에 제작한 프로그램이 역컴파일되기 어렵습니다. ARM 또는 인텔 머신 코드, 그리고 자바스크립트로 컴파일되어 어떤 기기에서도 빠른 성능을 보장합니다.
모바일, 웹, 데스크톱, 임베디드 모든 종류의 앱을 지원합니다
구글 자체 서비스들이 플러터에 통합되어 있어 매끄럽게 연동해 사용할 수 있습니다
파이어베이스, 구글 애드, 구글 플레이, 구글 페이, 구글 월렛, 구글 지도 등과 자연스럽게 연동되어 구글 앱 개발 생태계와 연결되며 개발 과정을 간소화하고 더 많은 사용자에게 다가갈 수 있습니다.
플러터는 다트 언어를 사용하는데, 이 언어는 모든 플랫폼에서 빠른 앱 제작에 최적화된 언어입니다
아래는 플러터 공식 홈페이지 링크입니다, Flutter – 모든 화면용 앱 제작
설치하기
플러터는 여러 운영체제에서 실행 가능하며, 아래 OS 환경 모두에서 개발할 수 있습니다
이 강의에서는 윈도우 환경을 기준으로 설명합니다
플러터 개발 환경을 구축하려면 먼저 선행 프로그램 몇 가지를 설치해야 합니다
- 윈도우용 깃(Git) 설치
독자분들은 깃 공식 사이트에서 설치 파일을 다운로드할 수 있습니다, Git – Windows용 설치 파일
본 저자 컴퓨터는 인텔 64비트 기기이기 때문에 아래 버전을 설치했습니다 Git for Windows/x64 설치 프로그램.
깃 설치 절차는 일반 프로그램 설치와 크게 다르지 않고, 대부분 Next 버튼만 계속 클릭하면 완료됩니다.
- 비주얼 스튜디오 코드 다운로드 및 설치
플러터는 VS Code와 안드로이드 스튜디오 둘 다 지원하니 본인 사용 습관에 맞춰 개발 툴을 고르면 됩니다. 저자는 안드로이드 스튜디오를 주로 사용하기 때문에 이 강의는 안드로이드 스튜디오 기준으로 진행합니다. 최신 버전은 안드로이드 스튜디오 공식 홈페이지에서 받을 수 있습니다 https://developer.android.com/studio
플러터 본체 설치
위에서 설치한 건 모두 선행 프로그램이고 이제 본격적으로 플러터 프레임워크 자체를 설치하는 단계입니다. 프레임워크를 먼저 깔아야 그 위에서 개발을 진행할 수 있습니다. VS Code로 개발하시는 분들은 다른 강의를 참고하시면 되는데, VS Code 자체에서 플러터 확장 기능을 간편히 설치할 수 있으니 VS Code 내에서 플러터를 설치하셔도 좋습니다.
VS Code에 플러터와 다트 확장을 설치하는 방식은 다른 VS Code 확장 프로그램 설치와 거의 동일하며, 확장 탭에서 Flutter와 Dart를 찾아 선택하면 됩니다.
VS Code에 Dart와 Flutter 확장을 추가하려면 플러터 마켓플레이스 페이지에 접속한 뒤 설치 버튼을 누릅니다. 브라우저에서 VS Code 실행 허용 팝업이 뜨면 승인해주시고, 자세한 공식 가이드는 여기서 확인하실 수 있습니다 플러터 빌드 및 테스트 가이드
하지만 이 강의에서는 VS Code를 사용하지 않기 때문에 수동으로 플러터를 설치하는 방식을 다룹니다.
플러터 수동 설치 방법
수동 설치 가이드는 아래 공식 문서를 참고했습니다 https://docs.flutter.dev/install/manual
위 링크에 접속한 뒤 본인 사용 OS 버전을 클릭합니다. 본 강의 기준은 윈도우입니다.
그리고 다운로드 버튼을 눌러 설치 압축 파일을 받습니다.
다운로드 완료 후 압축을 풀 폴더 경로에는 공백이나 특수문자가 포함되면 안 되니 간단한 경로를 추천드립니다, 예를 들어 C:\flutter
압축 해제 후 폴더 내부 구성은 아래와 같습니다:
그 안의 bin 폴더 경로 C:\flutter\bin을 복사해서 시스템 환경 변수 Path에 추가합니다.
윈도우 시작 메뉴에서 “환경 변수”를 검색해 설정 창을 엽니다.
복사한 bin 폴더 경로를 Path 항목 안에 추가합니다.
Dart 설치하기
플러터 설치가 끝나면 Dart SDK도 설치해야 하는데, 터미널을 열고 아래 명령어를 입력합니다.
flutter doctor명령 실행 과정에서 자동으로 Dart SDK가 다운로드됩니다.
C:\Users\Jack>flutter doctor
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...Code language: JavaScript (javascript)설치 정상 완료 여부를 확인하려면 CMD 터미널을 열고 아래 명령어를 실행합니다.
참고: 일부 국가 네트워크 환경에서는 다운로드가 실패할 수 있으므로 프록시나 미러 서버를 설정해야 합니다. CMD 또는 PowerShell을 열고 순서대로 아래 명령을 입력하세요
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter doctorCode language: JavaScript (javascript)
마지막에 입력하는 flutter doctor 명령은 플러터 개발 환경 전체 점검용 명령어입니다. doctor는 의사라는 뜻으로, 환경 상태를 진단한다고 생각하면 쉽게 이해할 수 있습니다.
저자가 명령을 실행했을 때 출력된 결과 예시는 다음과 같습니다.
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [ 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT LTSC 64비트, 21H2, 2009)
[X] Android toolchain - develop for Android 기기
X Android SDK 경로를 찾을 수 없음.
Android Studio를 여기서 설치하세요: https://developer.android.com/studio/index.html
첫 실행 시 안드로이드 SDK 구성 요소 설치 마법사가 실행됩니다.
(자세한 설명은 https://flutter.dev/to/windows-android-setup 참고).
Android SDK를 임의 경로에 설치했다면 `flutter config --android-sdk` 명령으로 경로를 갱신하세요.
[X] Chrome - 웹 앱 개발용 (.\Google\Chrome\Application\chrome.exe 실행 파일을 찾지 못함)
! 크롬이 설치되지 않았습니다. CHROME_EXECUTABLE 환경 변수에 크롬 실행파일 경로를 등록하세요.
[√] Visual Studio - 윈도우 앱 개발 (Visual Studio Community 2022 17.9.1)
[√] 연결된 기기 (2대 감지됨)
[!] 네트워크 리소스
X "https://github.com/" 접속 시 HTTP 오류 발생: 연결 시간 초과
! Doctor에서 총 3가지 환경 문제가 감지되었습니다.Code language: JavaScript (javascript)표시된 X는 설치가 누락된 부분을 의미합니다. 예를 들어 Android SDK가 없으면 안드로이드 버전 앱을 컴파일할 수 없고, 크롬이 없으면 웹 버전 디버깅이 불가능합니다. 다음 단계에서 안드로이드 스튜디오 설치 방법을 설명하며 크롬은 공식 사이트에서 별도 다운로드해 설치하면 됩니다. 단순 윈도우 데스크톱 앱만 개발한다면 둘 다 설치하지 않아도 무방합니다.
Android SDK 누락 (안드로이드 앱 컴파일 불가)
크롬 감지되지 않음 (웹 앱 실행 불가)
크롬 다운로드 링크 Google Chrome – 구글에서 제공하는 빠르고 안전한 브라우저 다운로드
안드로이드 스튜디오 설치하기
저자가 다운로드한 최신 설치 파일은 android-studio-quail1-patch1-windows.exe이며, 더블클릭해서 실행하면 설치 마법사가 시작됩니다.
설치 과정 역시 대부분 Next 버튼만 클릭하면 완료됩니다.
설치 완료 후 프로그램을 처음 실행할 때도 마찬가지로 Next를 계속 눌러 설정을 진행합니다.
모든 설정을 마치면 안드로이드 스튜디오로 새 프로젝트를 생성할 수 있습니다.
이제 다시 CMD 창을 열고 flutter doctor로 환경 상태를 재확인합니다.
[!] Android toolchain - develop for Android 기기 (Android SDK 버전 36.1.0)
X cmdline-tools 구성 요소가 없습니다.
Android Studio를 설치하거나 업데이트해보세요.
혹은 https://developer.android.com/studio#command-line-tools-only 에서 툴을 다운로드한 뒤 ANDROID_HOME 환경 변수를 등록하세요.
자세한 정보는 https://developer.android.com/studio/command-line 참고.
X Android 라이선스 동의 상태 확인 불가.
`flutter doctor --android-licenses` 명령으로 SDK 라이선스에 동의하세요.
자세한 설명은 https://flutter.dev/to/windows-android-setup 참고.Code language: JavaScript (javascript)안드로이드 스튜디오를 열고 File → Settings → Appearance & Behavior → System Settings → Android SDK 순서로 진입합니다.
SDK Tools 탭으로 전환한 뒤 아래 항목을 체크합니다:
Android SDK Command-line Tools (latest)
다시 한번 SDK Tools 탭으로 가서 해당 항목을 체크합니다:
Android SDK Command-line Tools (latest)
Apply 버튼을 누르고 다운로드 및 설치 과정이 완료될 때까지 기다립니다.
설치가 끝나면 다시 flutter doctor 명령을 실행합니다.
[!] Android toolchain - develop for Android 기기 (Android SDK 버전 36.1.0)
! 일부 Android 라이선스에 동의하지 않았습니다. 해결 방법: flutter doctor --android-licenses 실행Code language: CSS (css)이 문제는 안드로이드 SDK 사용 라이선스에 동의하지 않아 발생하는 오류입니다.
Android 라이선스 미동의 (Some Android licenses not accepted)
CMD 창에서 아래 명령을 입력합니다.
flutter doctor --android-licenses실행 후 모든 질문에 y를 입력하면 라이선스 동의가 완료됩니다.
라이선스 동의를 마치고 다시 명령 프롬프트에서 flutter doctor를 실행합니다.
C:\Users\Jack>flutter doctor
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.44.2, on Microsoft Windows [버전 10.0.19044.7417], locale zh-CN)
[√] Windows Version (10 IoT 엔터프라이즈 LTSC 64비트, 21H2, 2009)
[√] Android toolchain - develop for Android 기기 (Android SDK 버전 36.1.0)
[√] Chrome - 웹 앱 개발용
[√] Visual Studio - 윈도우 앱 개발 (Visual Studio Community 2022 17.9.1)
[√] 연결된 기기 (3대 감지됨)
[√] 네트워크 리소스
• No issues found!Code language: JavaScript (javascript)
이 단계까지 진행하면 플러터 개발 환경 설치가 모두 마무리되었습니다. 다음 시간에는 첫 번째 예제 프로젝트를 함께 만들어보겠습니다.