Flutter - 개발환경 세팅하기
안녕하세요. 2022년 첫 글로 "Flutter 개발환경 세팅"을 주제로 하여 인사드리게 되었습니다.
저는 앱 개발에는 관심을 크게 두고 있지 않았지만 의도치 않게(?) 앱개발을 하게될 기회가 있어 Flutter를 접하게 되었습니다.
처음은 전산 동아리에서 진행하는 프로젝트 때문에 처음 접하게 되었고, 여기서 시작된 Flutter와의 인연이 지금까지 이어지게 되었습니다.
과거부터 현재까지, Flutter가 뿜어내는 많은 이슈들에 대응하면서 미운정 고운정이 쌓인? 그런 프레임워크가 된 것 같습니다.
그래서 이번 시간에는 Flutter를 시작하기 위해서 필요한 첫 단계인 개발환경 세팅에 대해서 정리해보도록 하겠습니다.
우선 해당 개발환경 세팅을 진행하는 저의 PC 환경은 다음과 같으니 참고해 주시기 바랍니다.
1. 기기 : Macbook Pro 2019, 15인치 고급형
2. OS : MacOS Monterey (version 12.1)
1. Flutter SDK 다운로드
우선 Flutter를 설치하기 위해서는 Flutter SDK를 다운로드 해야 합니다.
Flutter는 현재 Google의 전폭적인 지원을 받아 엄청 활발하게 개발이 이뤄지고 있고,
그만큼 업데이트 주기가 굉장히 빠른 편입니다.
우선 아래의 페이지로 이동해서 Flutter SDK 파일을 다운로드 합니다.
https://docs.flutter.dev/get-started/install/macos
macOS install
How to install on macOS.
docs.flutter.dev
해당 페이지는 단순히 SDK 파일만을 제공하는 것이 아니라 Flutter 개발환경 세팅에 대한 내용이
아주 잘 정리되어 있습니다.
해당 문서를 보시고 그대로 하셔도 개발환경을 세팅하시는 데 문제가 없습니다.
해당 문서를 보시고 따라하시다가 어려우신 경우, 이 글을 참고하시면 도움이 될 것 같습니다.
우선 Flutter SDK 파일의 경우 zip으로 압축된 파일이 다운되는 데 용량이 꽤 큽니다 (2.8.1 Stable 기준 1.1GB).
다운로드 시 네트워크 환경을 잘 확인하시고 진행하실 것을 권장 드립니다.
2. 원하는 path에 .zip 파일 이동 및 압축해제
이제 다운로드 한 SDK 파일 (.zip) 파일을 위치시키길 원하는 파일로 이동시킵니다.
여기서 SDK 파일을 위치할 path는 원하시는 경로로 자유롭게 지정하시면 됩니다.
저의 경우 home에 해당 파일을 위치시키도록 하겠습니다.
공식문서에는 파일 이동 및 압축해제의 과정을 터미널을 사용하고 있지만, 그냥 GUI로 드래그해서 이동하셔도 상관없습니다.
다음과 같이 압축해제를 완료하면, "flutter" 라는 폴더가 생성된 것을 확인할 수 있습니다.
Flutter SDK에 대한 파일들이 모두 이 폴더에 위치한다고 생각하시면 됩니다.
3. 환경변수 설정
하지만 이렇게 압축해제까지 했다고 해서 바로 flutter 개발환경을 사용할 수 있는 것이 아닙니다.
압축해제까지 완료했다면 환경변수를 설정해주는 과정이 필요합니다.
공식문서를 보시면 다음과 같은 커멘드를 입력해서 환경변수를 설정하라고 명시하고 있는 데
export PATH="$PATH:`pwd`/flutter/bin"
이렇게만 진행할 경우 설정한 환경변수가 영구적으로 사용자의 PC에 유지되지 않습니다.
즉, Session이 만료되면, 설정한 환경변수가 사라지기 때문에 사용자가 Flutter SDK를 사용할 때마다
위의 커멘드를 입력해서 활성화시켜줘야하는 비효율성이 존재하기 때문에 이를 영구적으로 유지할 수 있도록 설정해줘야 합니다.
환경변수를 설정하기 위해서는 현재 사용 중인 shell에 대한 rc 파일을 열어서 관련 코드를 입력해줘야 합니다.
MacOS의 경우 원래 bash shell을 사용했지만, 카날리나 버전 이후부터 기본 shell이 zsh로 변경되었습니다.
따라서 현재 제가 사용하는 shell은 zsh이기 때문에 우선 terminal을 여시고 home에서 다음과 같은 커멘드를 입력합니다.
vi .zshrc
(bash shell을 사용하시는 경우 "vi .bashrc"로 작성해주시면 됩니다.)
그리고 .zshrc 파일에 다음과 같은 형식으로 코드를 입력하고 저장해줍니다.
export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"
(여기서 [PATH_OF_FLUTTER_GIT_DIRECTORY] 부분의 경우 2에서 flutter 폴더를 위치시킨 path를 넣어주시면 됩니다.)
그리고 아래의 명령을 입력해서 현재의 shell을 업데이트 시켜줍니다.
(이 과정이 귀찮으시다면 그냥 shell을 완전히 종료 후 재실행하셔도 됩니다.)
source $HOME/.zshrc
이렇게 하면 환경변수 설정이 완료됩니다.
환경변수가 제대로 설정되었는 지 확인하기 위해서 다음의 코드를 terminal에 입력해줍니다.
echo $PATH
그래서 다음과 같이 설정한 path가 출력된다면 제대로 환경변수 주입이 완료된 것입니다.
그리고 flutter와 flutter의 근간이 되는 dart 언어에 대한 설정이 제대로 되었는 지 확인하기 위해
아래의 명령을 순서대로 입력해서 실행결과를 확인합니다.
which flutter
which flutter dart
다음과 같이 출력된다면 flutter SDK 설치가 완료된 것입니다.
그렇다면 현재 세팅된 flutter의 상태를 확인하는 목적으로 사용되는 다음 명령을 입력해줍니다.
flutter doctor
사용자의 PC 세팅상황에 따라서 실행결과는 위의 결과와 상이할 수 있습니다.
flutter doctor를 통해서 x로 표시되는 부분들은 해결해줘야 flutter를 사용한 정상적인 개발을 진행할 수 있습니다.
그렇다면 위에서 발생하는 이슈들에 대해서 하나씩 대응해보도록 하겠습니다.
Unable to locate Android SDK
우선 가장 위에 있는 다음 이슈에 대해서 대응해보겠습니다.
사실, 이슈라고 하기도 좀 그런게 현재 보시는 것처럼 terminal에 이미 해결책이 출력되어 있습니다.
위에 적혀있는 내용처럼 아래의 링크로 이동해서 Android Studio를 다운로드 후 설치하시면 됩니다.
https://developer.android.com/studio?hl=ko
Download Android Studio and SDK tools | Android Developers
<!-- hide description -->
developer.android.com
설치 후 안드로이드 스튜디오를 최초실행하면 다음과 같은 창이 나타납니다.
Next를 눌러서 다음으로 넘어갑니다.
다음으로 Standard를 선택 후, 본인이 개발 시 사용하고 싶은 테마를 선택합니다.
그러면 기본적인 개발을 위해서 설치가 필요한 컴포넌트들의 리스트가 나옵니다.
Finish를 클릭해서 설치를 진행해주시면 됩니다 (시간이 좀 걸리니 너그럽게 기다려주시면 됩니다).
이전에 우리가 터미널에서 본 오류는 이 컴포넌트들이 설치되지 않은 상태여서 발생했던 오류 입니다.
다음과 같이 나타난다면 정상적으로 설치가 완료된 것입니다.
그리고 다시 flutter doctor를 돌려보면 조금 다른 종류의 오류 메시지들이 나탄납니다.
cmdline-tools component is missing
cmdline-tools가 설치되어 있지 않아서 발생한 오류 입니다.
안드로이드 스튜디오 실행 후 Preferences -> System Settings -> Android SDK -> SDK Tools로 이동합니다.
확인해보면 Android SDK Command-line Tools가 설치되어 있지 않을 것을 확인할 수 있습니다.
(설치된 Tool의 경우 왼쪽의 체크박스에 체크가 되어 있습니다.)
Android SDK Command-line Tools을 체크 후 Apply를 클릭해줍니다.
그러면 다음과 같이 설치과정이 진행됩니다.
Android license status unknown
말그대로 현재 안드로이드 스튜디오에서 사용하는 android의 라이센스가 확인되지 않아서 발생한 경고 문구 입니다.
아래의 명령어를 입력해서 라이센스를 확인하는 과정을 진행합니다.
flutter doctor --android-licenses
여기까지 수행 후 flutter doctor를 다시 돌려보면 다음과 같이 Android toolchain에 대한 모든 이슈가 해결된 것을 볼 수 있습니다.
Xcode installation is incomplete;
말그대로 IOS 개발에 필요한 Xcode 설치가 완전히 이뤄지지 않았음을 의미합니다.
우선, App Store로 이동해서 Xcode 설치가 제대로 이뤄졌는 지 먼저 확인해 줍니다.
제대로 설치되어 있다면 터미널을 열어서 다음 명령을 순서대로 입력합니다.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
그 후 flutter doctor를 돌려보면 해당 이슈가 해결된 것을 확인할 수 있습니다.
CocoaPods not installed
"CocoaPods"는 iOS와 MacOS 앱 개발 시 사용되는 플러그인들을 사용하기 위해서 필요합니다.
이를 설치하지 않으면 iOS, MacOS와 관련된 플러그인들을 Flutter에서 사용할 수 없습니다.
터미널을 열어서 다음 명령을 입력합니다.
sudo gem install cocoapods
해당 명령을 입력하면 자동으로 cocoapods 설치가 진행됩니다.
설치완료 후 fluter doctor를 돌려보면 다음과 같이 모든 이슈가 해결된 것을 확인할 수 있습니다.
"flutter doctor" 의 경우 flutter 개발 간 오류 발생 시 근본적인 개발환경 세팅에 문제가 없는 지
확인하는 목적으로 자주 사용되는 명령이니 잘 기억해두시기 바랍니다.
4. Flutter 플러그인 설치
안드로이드 스튜디오를 사용해서 Flutter 개발을 하기 위해서는 flutter 및 dart 플러그인을 설치 해줘야 합니다.
Flutter 플러그인 설치 시 Dart 플러그인도 같이 설치되니 Flutter 플러그인 설치만 진행해주시면 됩니다.
5. 애뮬레이터 설치
iOS의 경우 Xcode를 설치하면 필수 애뮬레이터들이 설치되지만, 안드로이드의 경우 AVD Manager를 통해서 별도로 설치해야 합니다.
안드로이드 스튜디오 실행 후 "More Actions" -> "AVD Manager"를 선택해줍니다.
그리고 중앙에 있는 "Create Virtual Device" 버튼을 클릭해줍니다.
그리고 애뮬레이터를 실행하고 싶은 기기를 선택합니다.
이후 사용할 안드로이드 API 버전을 선택하여 설치를 진행해줍니다.
만약 Android API 30 이상 버전을 사용하고 싶은 경우 x86 images로 이동하여 적절한 버전 선택 후 설치해주시면 됩니다.
(이제 Andorid API 28 이하 버전의 경우로 개발된 앱의 경우 Play Store에 출시가 불가능해졌습니다. 참고하시기 바랍니다.)
설치가 완료되었다면, 세팅할 애뮬레이터에 대한 기본적인 설정을 마친 후 Finish를 클릭해주시면 됩니다.
여기까지 진행하셨다면, Flutter 개발환경에 대한 기본적인 구축이 완료된 것입니다.
이것으로 Flutter 개발환경 세팅 글을 마치도록 하겠습니다.
긴 글 읽어주셔서 감사드리며 2022년 한해도 행복한 일만 가득하시길 바라겠습니다.
감사합니다.