Flutter(플러터) 란? Flutter 의 특징에 대해..
1. 개요
Flutter(플러터) 는 안드로이드 스튜디오와 VSCode, IntelliJ 등 다양한 IDE 를 사용할 수 있다.
보통 안드로이드 스튜디오와 VSCode 를 많이 사용하는데 서로 장단점이 있겠지만 개인적으로 안드로이드 스튜디오에 비해 더 가볍고 UX가 편리한 VSCode 기반으로 Flutter 설치 강좌를 작성한다.
*VSCode (Visual Studio Code) : 마이크로소프트에서 개발한 소스코드 편집기로 Windows, Mac, Linux 용 버전을 제공한다. 수많은 플러그인을 통해 거의 대부분의 주요 프로그래밍 언어 편집과 빌드, 디버깅을 지원한다. 깃허브에 오픈소스로 등록되어 있어 모든 기능이 무료로 제공된다. 다른 소스코드 편집기들에 비해 가볍고 빠른 편이다.
2. 기본 환경
필자의 데스크탑 OS는 Windows10 Pro 64bit 이다.
현재 Windows10 에는 Windows PowerShell 5.0 이상 버전이 기본 설치 되어 있는데 그 이하 버전이라면 업데이트를 해줘야 한다.
Mac 이나 Linux 에서 사용하는 터미널과 같은 용도로 Flutter 설치를 위한 작업들을 이 파워쉘을 통해 진행해야 한다.
3. VSCode 설치
우선 Visual Studio Code 사이트에서 윈도우 버전의 프로그램을 다운 받는다.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2019년 12월 3일 현재 최신 버전은 1.40.2 이다.
간단한 과정을 거쳐 설치를 마치고 프로그램을 실행하면 아래와 같은 기본창이 뜬다.
앞으로 Flutter 를 이용한 개발은 이 VSCode 를 사용할 것이다.
4. Git 설치
다음은 Flutter SDK 를 다운로드 하기 위한 버전관리 소프트웨어 Git 을 설치 하겠다.
Git for Windows 홈페이지에 들어가서 최신 버전의 Git 을 다운로드 한다.
현재 최신 버전은 2.24.0.2 이다.
설치 과정 중 대부분은 그냥 Next 를 눌러주면 되지만 그중 스크린샷 마지막 2장의 항목을 주의하자.
Git 을 사용할 기본 에디터 선택은 기본은 Vim 으로 되어 있는데 VSCode 로 바꿔 주는 것을 추천 한다.
물론 Nodepad++나 Sublime Text, Atom 등등 자신이 사용하는 다른 에디터로 지정해도 상관 없다.
그리고 터미널 에뮬레이터는 Use Windows' default console window 를 체크해 주자.
5. Flutter SDK 설치
이제 Flutter 를 설치 하기 위한 기본 준비가 끝났다.
Flutter SDK 는 방금 설치한 Git 으로 다운로드를 받아야 한다.
또한 Flutter SDK 는 인스톨 패키지 형태가 아닌 Git 에 저장되어있는 파일들 전체를 flutter 라는 이름의 폴더 속에 포함한 채로 다운받으므로 미리 이 Flutter SDK 를 담을 폴더를 만들어 둔다.
필자는 D:/Develop/ 로 경로를 잡았다.
다음은 Flutter SDK 를 다운로드 하기 위해 PowerShell 를 실행한다.
탐색기에서 방금 만든 SDK 폴더로 간 후 Shift + 마우스 오른쪽 버튼을 눌러 여기에 PowerShell 창 열기 를 선택해 주자.
git clone -b stable https://github.com/flutter/flutter.gitPowerShell 프롬프트에 위의 Git 명령어를 입력해서 Flutter SDK 파일들을 Clone 한다.
이렇게 출력되면 성공이다.
해당 폴더에 가보면 flutter 라는 이름의 폴더 안에 SDK 파일들이 들어가 있는 것을 볼 수 있다.
6. Path 설정
이제 다운로드 받은 flutter SDK 를 환경 변수에 입력해 주자.
제어판의 시스템 속성에서 환경변수의 Path 를 편집해 준다.
방금 다운받은 flutter의 bin 폴더를 입력하고 확인은 눌러 적용시킨다.
7. Flutter Doctor 실행
이제 PowerShell 창을 새로 띄우면 방금 입력한 flutter/bin 경로가 적용되어 아무 곳에서나 flutter 명령어를 수행할 수 있으므로 PowerShell 을 새로 실행한 후 flutter doctor 명령어를 실행한다.
flutter doctor 명령어는 flutter 의 셋팅에 빠진 항목이 있는지 검사해 주는 기능이다.
doctor 명령어의 결과를 통해 추가로 무엇을 더 해줘야 하는지 한눈에 확인 할 수 있다.
초록색은 체크 표시는 성공적으로 설정된 항목을, 빨간색 X표시는 추가로 설치해 줘야 할 항목을, 그리고 흰색 느낌표는 꼭 설치 할 필요는 없는 항목을 뜻한다.
현재 Flutter 는 v1.9.1 에 핫픽스6 까지 설치 되었으며 안드로이드 툴 체인과 VS Code 의 Flutter extension 을 설치하라고 알려주고 있다.
또한 안드로이드 스튜디오가 설치 되지 않았고 디바이스가 연결 되지 않았다는 정보도 보여주고 있다.
이를 차례대로 처리해주면 된다.
참고로, Flutter 관련 명령어 들은 PowerShell 이 아니라 VSCode 의 메뉴에서도 실행가능하다.
단, 이를 위해서는 VSCode 에 Flutter extension 을 설치해야 한다.
8. VSCode 에 Flutter extension 설치
위에서도 언급했듯이 VSCode 는 매우 가벼우면서도 대부분의 프로그래밍 언어를 지원하는 에디터인 대신 자신이 필요한 프로그래밍 언어를 다루기 위해 별도의 확장 플러그인을 설치해 줘야 한다.
Flutter 도 마찬가지로 Flutter extionsion 을 설치해 줘야 한다.
VSCode 의 좌측 아이콘 중 빨간 표시를 한 아이콘이 각종 확장 플러그인들을 다운 받을 수 있는 Extension Marketplace메뉴이다.
검색창에 flutter 를 입력하면 다양한 플러그인 들이 뜨는 데 그 중 Flutter 를 설치 한다.
그외 여러가지 편리한 Flutter 관련 플러그인들이 있으니 본인 취향에 맞는 걸 추가로 설치해 줘도 좋다.
이후 PowerShell 을 새로 띄우고 다시 flutter doctor 를 실행해 보면 VS Code 가 초록색 체크표시로 변경된 것을 확인할 수 있다.
또한 Flutter extension 을 설치하고 나면 위에서 언급했듯이 Flutter 관련 명령어들을 VSCode 에서 더 간단하게 실행할 수 있다.
VSCode 의 View 메뉴에 Command Palette... 를 클릭한다.
그러면 위와 같은 팝업이 뜨는데 여기에서 Flutter: 로 시작하는 명령어를 선택하면 바로 실행이 가능하다.
여기에서 Run Flutter Doctor 를 선택하면 PowerShell 에서 했던 것과 동일한 처리를 수행해 준다.
이 입력창에 Flutter 라고 입력하면 수행할 수 있는 Flutter 관련 다양한 명령어들이 보여진다.
앞으로 VSCode를 사용하면서 자주 사용하게 될 것이다.
9. 안드로이드 툴체인 (Android ToolChain) 설치
다음은 안드로이드 에뮬레이터를 실행하기 위한 Android SDK 를 설치 하겠다.
그런데 Android SDK 를 실행하려면 JDK 를 설치해야 한다.
참고로 안드로이드 스튜디오를 설치하면 JDK 와 Android SDK 모두 자동으로 설치되며 다음 단락에서 설명할 안드로이드 에뮬레이터 까지 한큐에 설치 및 셋팅이 가능하므로 가급적 이쪽을 권한다. (안드로이드 스튜디오가 무겁다고 해도 설치만 해두고 코드 에디터는 VSCode를 사용하면 된다.)
하지만 안드로이드 스튜디오를 설치하기 싫은 사람을 위해(굳이!) 이 문서에서는 수동으로 각각 설치하는 방법을 다루겠다.
JDK 는 아래 github 에서 openjdk 최신 버전을 다운로드 받으면 된다.
https://github.com/ojdkbuild/ojdkbuild
ojdkbuild/ojdkbuild
Community builds using source code from OpenJDK project - ojdkbuild/ojdkbuild
github.com
현재 최신 버전은 1.8.0_232-1 이므로 java-1.8.0-openjdk-1.8.0.232-1.b09.ojdkbuild.windows.x86_64.zip 파일을 다운받는다. (위의 Github 링크에서 최신버전을 받자)
이후 flutter SDK 를 다운받았던 D:\Develop 폴더에 JDK 파일을 압축 해제한 후 폴더명을 jdk 로 바꿔 주었다.
사용자 환경 변수에 새 사용자 변수를 위와 같이 추가해 준다.
이제 Android SDK 를 설치해 보자.
Android SDK tools 다운로드 사이트에 들어가서 스크롤을 페이지 맨 아래로 내리면 Command line tools only 라는 항목이 있다.
여기에 있는 Windows 버전의 zip 파일을 받으면 된다.
이 파일의 압축을 풀면 tools 라는 폴더가 생긴다.
Develop 폴더 안에 android-sdk 폴더를 만들고 그 안에 넣었다.
tools 의 상위 폴더를 환경변수에 추가해 준다.
이제 Flutter 에 필요한 Android SDK 의 구성요소를 설치한다.
방금 다운로드 한 android-sdk\tools\bin 폴더에서 Shift + 마우스 오른쪽 버튼을 눌러 PowerShell 을 실행하고 아래 명령어를 그대로 입력해 준다.
.\sdkmanager "platforms;android-28" "build-tools;28.0.3" "platform-tools" "extras;google;usb_driver"
이처럼 Accept? 를 물어보면 y 키를 입력해 주면 알아서 필요한 파일들을 다운받아 준다.
여기까지 하면 flutter 에 필요한 툴체인 작업은 끝이다.
마지막으로 Android SDK 라이센스를 수락해 주기만 하면 말이다.
flutter doctor --android-licensesPowerShell 에 이 명령어를 입력하면 Yes or No 를 5~6회 정도 물어보는데 모두 y 키를 눌러주면 된다.
flutter doctor 를 수행했더니 이처럼 빨간색 X 표시가 모두 사라졌다.
마찬가지로 VSCode 의 Command Palette 에 flutter doctor 를 선택했을 때 보이는 화면이다.
동일한 결과를 보여준다.
10. 안드로이드 에뮬레이터 설정
이제 VSCode 에서 flutter 앱을 개발할 때 띄울 안드로이드 에뮬레이터를 설정해 줘야 한다.
만약 안드로이드 스튜디오를 설치한 경우는 안드로이스 스튜디오 내에 에뮬레이터가 기본 내장되어 있기 때문에 이 작업은 할 필요가 없다. (VSCode 에서 안드로이드 스튜디오로 만든 에뮬레이터도 불러올 수 있기 때문이다.)
다음은 에뮬레이터를 추가하는 작업이다.
android-sdk\tools\bin 폴더에서 Shift + 마우스 오른쪽 버튼을 눌러 PowerShell 을 실행하고 아래 명령어를 그대로 입력해 준다.
.\sdkmanager "system-images;android-27;google_apis_playstore;x86"이 작업이 완료되면 아래의 명령어도 수행해 준다.
flutter emulators --create flutter_emulator이로써 개발 시 사용할 에뮬레이터 생성까지 완료 했다.
에뮬레이터가 정상적으로 작동하는지 확인하기 위해 다음 명령어를 사용하여 위에서 생성한 에뮬레이터를 실행해 보자.
flutter emulators --launch flutter_emulator
이와 같은 Android Emulator 창이 뜬다면 성공이다.
이로써 Windows 에서 VSCode 를 이용한 Flutter 개발 환경 설정이 모두 끝났다.
11. VSCode 로 새 프로젝트 생성하기
모든 준비가 끝났으니 새 Flutter 프로젝트를 만들어 보자.
VSCode 의 View -> Command Palette.. 를 선택한 후 위 스크린샷에 보이는 입력창에 FlutterL New Project 를 선택한다.
새 프로젝트의 이름을 입력한다.
이후 이 프로젝트를 저장할 경로를 고르면 해당 위치에 프로젝트가 자동으로 생성되며 VSCode에 프로젝트가 로드 된다.
이제 필요한 부분을 고치며 작업을 하다가 에뮬레이터를 통해 앱을 확인하려면 F5를 눌러 디버그 모드로 들어간다.
위에서 PowerShell 로 생성했던 flutter emulator 를 실행할 수 있으며 만약 안드로이드 스튜디오로 만든 에뮬레이터가 있다면 그 또한 여기에 뜰 것이다.
필요하다면 이 메뉴에서 또다른 에뮬레이터를 추가로 생성하는 것도 가능하다.
에뮬레이터를 실행한 후 잠시 기다리면 방금 생성했던 hello_world 앱이 실행되는 것을 볼 수 있다.
다음은 Mac 에서의 VSCode 기반 Flutter(플러터) 설치 방법을 알아보겠다.
댓글