Flutter 개발환경 구축
안드로이드와 애플 iOS 앱을 하나의 코드로 만들 수 있는 크로스 플랫폼인 플루터 flutter를 설치하는 방식은 일반 어플리케이션을 설치하는 방식과 차이가 있습니다. 플루터를 이용하여 앱을 개발하는 환경을 구축하기 위해서는 아래의 프로그램 설치가 필요합니다.
- Flutter
- VSCode
- Android Studio
- Xcode
각각의 프로그램들의 설치방법과 링크는 아래에 이어서 설명하겠습니다.
대략적으로 플루터를 활용하여 앱을 개발하는 환경을 구축하기 위해서는 먼저 Android와 iOS 앱을 하나의 코드로 구현할 수 있도록 해주는 프레임워크인 Flutter의 설치가 필요합니다. 그리고 코드를 작성하는 에디터(편집기)로 VSCode가 필요하고, 안드로이드와 애플 iOS앱을 스마트폰이 아닌 PC에서 바로 실행해서 볼 수 있도록 에뮬레이터 Android Studio와 Xcode를 설치해 주겠습니다.
안드로이드앱 개발을 위해서는 Andriod Studio로, 애플 iOS앱 개발을 위해서는 Xcode로 가능한데요. 우리는 통합 플랫폼인 Flutter로 개발할 예정이므로 에뮬레이터로만 사용합니다. 참고로 저의 개발 환경은 M1 맥북이라 주로 맥OS/아이폰 애뮬레이터를 중심으로 설명 하겠지만 Windows 설치 방법에 대해서도 마지막에 남겨두겠습니다.
프레임워크 Flutter 설치 – M1 맥OS
앞에서 설명한 것과 같이 플루터는 일반 프로그램처럼 .dmg(맥)/.exe(윈도우)와 같은 설치 파일로 설치가 진행되지 않고 아래의 절차로 진행됩니다.
- 프레임워크 .zip파일 다운로드 받아서 압축 해제
- 압축 해제한 flutter 폴더 경로를 환경변수에 등록
Rosetta 번역기 설치
Apple Silicon(M1, M2) 맥 환경에서 플루터 사용하기 위해서 Rosetta 번역기를 설치해야 합니다. 처음 Apple Silicon이 나왔을 때 Arm 기반 어플리케이션이 아닐 경우 Rosetta 번역기를 통해 자연스럽게 구동되는 것으로 알고 있었는데 플루터를 위해서 별도로 설치해야 하는 이유는.. 잘 모르겠네요.
sudo softwareupdate --install-rosetta --agree-to-license
터미널을 열고 위 명령어를 실행시켜 Rosetta 번역기를 설치합니다.
Flutter 다운로드
플루터 프레임워크 .zip 파일을 내려받기 전에 파일을 저장할 경로를 먼저 지정해 주겠습니다.
프레임워크 .zip 파일의 저장 위치는 ‘사용자명’이 있는 최상위 폴더에 둡니다. 저의 사용자명은 ‘ryu’ 입니다. 여기에 development라는 폴더를 만들어두고 여기에 프레임워크 .zip 파일을 저장하겠습니다.
이제 링크를 클릭해서 나오는 페이지’에서 아래로 조금 스크롤 하면 나오는 아래와 같은 화면에서 프레임워크 .zip 파일을 내려받습니다.
맥의 경우 인텔 CPU 모델, 애플실리콘 모델로 나눠져 있습니다. 사용중인 모델에 맞는 파일을 다운로드하여 앞에서 만든 폴에 압축을 풀어 준비합니다.
환경변수에 폴더 경로 추가
다운로드 받은 flutter 실행 파일이 컴퓨터 어디에서든지 접근 가능하도록 환경변수에 flutter가 위치한 폴더경로를 추가해 주겠습니다.
환경변수에 폴더 경로를 추가하는 방법은 맥OS 버전에 따라 차이가 있습니다.
Catalina(10.15.7) 이후부터 최근 버전을 사용중이라면 터미널에서 아래 명령어를 통해 경로를 추가해 줍니다.
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc && source ~/.zshrc
만일, Mojave(10.14.6) 이전 버전으로 사용중이라면 아래의 명령어를 터미널에 입력하여 경로를 추가해 줍니다.
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bash_profile && source ~/.bash_profile
버전에 따라 명령어에 차이가 있는 이유는 사용하는 쉘이 각각 bash, zsh로 차이가 있기 때문입니다. 저는 이 부분에서 환경변수 수정권한이 root로 되어있어 권한을 변경해서 편집기로 수정을 했습니다.
vim ~/.zshtc
위 화면은 zshrc 환경변수를 열어서 마지막에 export로 지작하는 flutter 경로를 추가해준 것으로 위 명령어로 이 과정을 수행하는 것입니다. 참고로 봐주세요.
설치완료 및 버전 확인
flutter --version
위 명령어를 실행해서 버전 확인이 되면 설치가 완료된 것입니다. 제가 확인한 시점에 새로운 버전에 있었네요.
개발에 필요한 항목 진단 및 설치
flutter doctor
위 명령어를 터미널에서 실행하면 flutter를 이용하여 개발하기 위해 필요한 프로그램들의 설치여부를 확인할 수 있는 목록을 출력해서 보여 줍니다. 저는 모든 프로그램들의 설치를 마쳤기 때문에 모두 초록색 체크가 뜨는데요. 설치가 필요한 프로그램을 확인하여 하나씩 설치해 줍니다.
VSCode(visual studio code) 익스텐션 설치
코드를 작성/편집하는 VSCode는 다양한 개발을 할 수 있도록 만들어진 통합 에디터 입니다. 따라서 VSCode로 Flutter를 이용하기 위해서 확장팩(Extension)을 설치해 주어야 합니다.
위 그림과 같이 VSCode > Extension 설치에 가서 flutter를 검색한 다음 설치해 줍니다. 통상 flutter extension을 설치하면 dart extension도 함께 설치가 되는데 만약 설치되지 않았다면 동일한 방법으로 검색해서 설치해 줍니다.
설치완료 확인
다시 flutter doctor를 실행하여 위 화면과 같이 모든 프로그램 설치가 확인되면 flutter를 이용하여 앱을 개발하기 위한 모든 준비를 마친것입니다.
프레임워크 Flutter 설치 – Windows
윈도우 환경에서 플루터를 설치하는 과정은 스파르타 코딩클럽 자료를 참고하여 설명드리겠습니다.
Flutter 다운로드
윈도우에서 설치도 맥에서 처럼 일반적인 설치파일 .exe로 설치되지 않고 특정 경로에 프레임워크를 저장하는 방식으로 진행됩니다. 윈도우는 최상위 경로인 C:에 src 폴더를 생성하여 링크에서 다운받은 압축파일을 넣어줍니다.
윈도우 설치 시 유의할 점은 설치 경로에 한글을 포함한 특수문자가 있으면 안되고, 응용프램이 설치되는 Program Files 아래에 설치하면 안됩니다.
해당 경로에 압축풀기를 하면 압축파일과 동일한 이름으로 하위폴더를 생성하게 되는데 위 그림과 같이 압축파일이 풀어지는 경로를 src 상위 폴더로 지정하여 줍니다.
환경변수에 폴더경로 추가
이제 flutter 실행파일이 있으므로 해당 경로에서 flutter를 실행할 수 있습니다. 환경변수에 폴더경로를 추가해 주는 이유는 flutter를 실행하기 위해서 이 경로로 찾아가지 않고 시스템 어디서든지 flutter를 실행할 수 있게 해주기 위해서 입니다.
맥을 2011 아이맥부터 10년정도 사용했지만 이런 내용은 아직도 윈도우가 이해하기가 쉽네요.
위 그림과 같이 윈도우 시스템 속성에서 환경변수를 클릭해 줍니다.
사용자 변수에 path를 선택한 다음 ‘편집’을 클릭해 줍니다.
그리고 flutter의 실행파일이 있는 경로인 아래의 경로를 추가해 줍니다.
C:\src\flutter\bin
이와같이 환경변수에 flutter 경로를 설정해준 다음 cmd 명령프롬프트에서 flutter 버전이 확인 가능하다면 정상적으로 설치된 것입니다.
flutter --version
기타 에뮬레이터 및 Extension 설치
Flutter 이외에 Visual Studio Code, VSCode, Android Studio 설치는 일반 프로그램 설치와 동일하므로 생략하겠습니다. 참고로 Xcode는 맥에서만 사용가능하므로 윈도우에서는 아이폰 에뮬레이터를 사용할 수 없습니다.
댓글 남기기