Flutter(플러터) 란? Flutter 의 특징에 대해..
1. 개요
Flutter(플러터) 는 안드로이드 스튜디오와 VSCode, IntelliJ 등 다양한 IDE 를 사용할 수 있다.
보통 안드로이드 스튜디오와 VSCode 를 많이 사용하는데 서로 장단점이 있겠지만 개인적으로 안드로이드 스튜디오에 비해 더 가볍고 UX가 편리한 VSCode 기반으로 Flutter 설치 강좌를 작성한다.
또한 지난 강좌에서는 윈도우(Windows) OS 에서의 개발 환경 구축을 다루었으니 이번에는 맥(Mac) OS 에서 셋팅 하는 방법을 살펴 보겠다.
맥에서 Flutter 앱을 개발하면 윈도우에서는 불가능했던 IOS 기반의 앱 빌드가 가능해진다.
*VSCode (Visual Studio Code) : 마이크로소프트에서 개발한 소스코드 편집기로 Windows, Mac, Linux 용 버전을 제공한다. 수많은 플러그인을 통해 거의 대부분의 주요 프로그래밍 언어 편집과 빌드, 디버깅을 지원한다. 깃허브에 오픈소스로 등록되어 있어 모든 기능이 무료로 제공된다. 다른 소스코드 편집기들에 비해 가볍고 빠른 편이다.
2. 기본 환경
필자의 맥 개발 환경은 2019년 구입한 MacBook Pro 13' 모델이며 OS 는 카탈리나 이다.
Flutter 의 IOS 빌드를 위해 기본적으로 XCode 가 설치 되어 있어야 한다.
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
맥에서는 별도의 설치 없이 다운로드 받은 VSCode.app 파일을 Application(응용프로그램) 폴더에 던져 주기만 하면 된다.
이제 VSCode 에서 Flutter 를 편집할 수 있도록 추가 플러그인을 설치해 줘야 한다.
VSCode 를 실행시킨 후 좌측의 블록 처럼 생긴 메뉴를 클릭하여 확장 플러그인을 다운 받는 마켓 플레이스로 들어간다.
검색 창에 flutter 를 입력하면 관련 플러그인들이 쭈욱 뜬다.
이중 첫번째에 있는 Flutter 플러그인을 설치한다.
만약 원하는 추가 기능이 있다면 함께 설치해 줘도 된다.
4. Flutter SDK 설치
이제 Flutter SDK 를 설치할 차례이다.
https://flutter.dev/docs/get-started/install/macos 에 접속해 zip 압축 파일을 다운로드 한다.
macOS install
flutter.dev
2019년 12월 23일 현재 최신 버전은 v1.12.13+hotfix.5-stable 이다.
이 압축 파일을 적당한 위치에 풀어준다.
저는 ~/Dev/SDKs 경로에 저장했다.
5. 환경변수 등록
이제 Flutter 명령어를 언제든 호출 할 수 있도록 flutter 폴더를 bash_profile 에 등록한다.
이는 윈도우의 환경변수 등록과 동일한 기능이다.
이를 위해 터미널을 실행하고 아래 명령을 입력한다.
vi ~/.bash_profile이를 통해 vi나 vim 등을 이용해 Home 에 있는 bash_profile 을 수정한다.
편집창이 뜨면 i 를 눌러 insert 모드로 전환하여 기존 내용 바로 다음에 아래의 값을 추가한다.
export PATH=$PATH:$HOME/Dev/SDKs/flutter/bin
자신이 flutter sdk 를 저장한 경로에 맞게 지정해 주면 된다.
이후 esc 키를 눌러 편집 모드를 종료 한 후 :wq 를 입력하여 저장 및 종료를 시킨다.
그리고 아래 명령어로 변경된 bash_profile 을 적용 한다.
source ~/.bash_profile
이렇게 환경변수를 수정 한 후 기존 열려있던 터미널과 VSCode를 종료 후 다시 실행해준다.
6. Flutter Doctor 실행
flutter 에는 설치 상태를 점검해주는 doctor 라는 명령어가 있다.
터미널에서 직접 flutter doctor 를 실행해 줘도 되지만 VSCode 에서 실행하는 방법으로 알아보겠다.
VSCode 를 실행한 후 View -> Command Palette... 라는 메뉴를 선택 한다.
그러면 VSCode 에 위와 같은 검색바가 뜬다.
이곳에 Flutter: Run Flutter Doctor 를 찾아서 입력하면 현재 내 맥에 Flutter 개발 환경 상황을 일목요연하고 보여준다.
현재 Flutter 와VSCode는 깔끔하게 설치가 완료 되어 V 체크표시가 떠 있다.
이중 X 표시와 ! 표시로 되어 있는 항목들을 하나하나 해결해 보자.
현재 파악되는 문제는 Android toolchain 과 Xcode, Android Studio 로 요약된다.
7. Android SDK
Android Toolchain 과 Android Studio 두가지 문제의 해결을 위해 구글의 안드로이드 스튜디오를 설치하자.
https://developer.android.com/studio?hl=ko
Download Android Studio and SDK tools | Android Developers
developer.android.com
위 경로에서 안드로이드 스튜디오를 다운로드 한다.
안드로이드 스튜디오에도 flutter 플러그인을 설치해 줘야 한다.
우선 안드로이드 스튜디오를 실행해 보자.
우측 하단에 Configure 버튼을 클릭한 후 Preferences 를 선택한다.
좌측 Plugins 를 선택한 후 우측의 검색바에 flutter 를 입력한 후 첫번째로 보이는 Flutter 플러그인을 설치하면 Flutter와 Dart 플러그인이 함께 설치 된다.
설치를 마치고 다시 flutter doctor 를 실행해 보자.
이전에는 Android Toolchain 에 SDK 를 찾을 수 없다고 나왔었는데 이제는 licenses 문제로 바뀌었다.
그리고 run: flutter doctor --android-licenses 로 해결하라고 친절하게 알려준다.
또한 아래 Android Studio 미설치 경고 부분은 체크 표시로 변경 되었다.
알려준 명령어를 터미널 창에 입력해 주고 몇차례 물어보는 Y/N 에서 모두 Y 를 눌러주면 된다.
8. XCode
이제 XCode 문제를 살펴보자.
CocoaPods 가 설치 되지 않았다는 메세지와 함께 마찬가지로 설치를 위한 명령어를 친절하게 알려준다.
해당 명령어를 터미널 창에 입력해 준다.
sudo gem install cocoapods
해결 완료!
이제 모든 준비가 끝났다.
설치 절차도 어렵지 않고 무엇을 해야 할지 Flutter doctor 가 친절하게 알려주기 때문에 따라 가기만 하면 금방 설치를 마칠 수 있다.
다만 몇몇 자동화 가능해 보이는 수작업 요소들이 살짝 귀찮을 뿐...
언젠가 패키지 형태로 간단하게 설치를 마칠 수 있는 날이 오기를 바라며 이번 설치기를 마친다.
댓글