macOS에 Flutter와 Android Studio 설치하기

macOS에 Flutter와 Android Studio 설치하기

 

이번 학기부터 모바일프로그래밍(2) 강의가 시작되었다.

 

원래라면 코틀린을 사용하여 안드로이드 앱을 개발할 예정이였지만

안드로이드와 iOS, 웹앱 등 다양한 디바이스에 대응가능한 앱을 만들 수 있는 플러터(Flutter)를 사용하여 강의를 진행하신다고 하셨다.

 

 

따라서 이번글에서는 Flutter와 Android Studio를 macOS에 설치하여 개발환경을 세팅해보려 한다.

 

 

목차

 

 

 

Flutter SDK 설치

 

먼저 플러터를 사용하기 위해서는 Flutter SDK를 설치해야 한다.

 

Flutter SDK 설치 방법은 Flutter 공식 문서에 안내되어 있어 필자는 해당 문서를 보며 설치를 진행해보려 한다.

 

 

 

필자는 M2 프로세서(Apple Silicon)을 사용하고 있으므로 오른쪽 install 버튼을 클릭하여 SDK를 다운로드 했다.

 

 

* 만약 다른 OS를 사용하고 있거나 다른 OS의 앱을 개발하고 싶다면 아래 링크로 들어가서 원하는 환경을 선택 후 다운로드 받으면 된다.

https://docs.flutter.dev/get-started/install

 

 

그리고 다운받은 압축파일을 압축 해제 후, 본인이 원하는 폴더로 이동시켜주면 된다.

필자는 /Induk 폴더 밑에 옮겨 놓았다.

 

 

 

Flutter PATH 추가

 

터미널에서 Flutter 명령어를 실행하려면 PATH 환경변수에 Flutter를 추가해야 한다.

 

 

 

공식문서의 설명대로, terminal을 열고 아래 명령어를 통해 .zshrc 파일로 이동하자.

 

만약 .zshrc 파일이 없다면 자동으로 생성된 후 파일 편집기로 들어가게 된다.

 

(공식문서에선 .zshenv 파일로 설정하지만 .zshrc 파일로 설정해야 새 터미널 창을 띄우거나 기존 터미널 창에서 zsh 명령으로 zsh 쉘을 띄울 때 로딩된다고 한다.)

vi ~/.zshrc

 

 

 

그리고 .zshrc 파일 안에 아래처럼 PATH를 추가하자.

(필자는 Induk 폴더 안에 Flutter SDK를 설치해서 아래처럼 경로를 설정해줬다.)

export PATH=~/Induk/flutter/bin:$PATH

 

 

 

 

Android Studio 설치

 

Android Studio는 Android Developer에 들어가서 다운로드 받을 수 있다.

 

 

 

 

 

마찬가지로 본인의 개발 환경에 맞추어 다운로드 해주면 된다.

 

 

 

Android Studio를 실행한 후 Plugins 탭에서 Flutter를 찾아서 다운로드하고 재실행 하자.

 

 

그리고 More Actions를 누르고 SDK Manager에 들어가자.

 

 

 

 

 

그럼 아래처럼 Android SDK 위치를 설정해달라고 뜨는데 Edit 버튼을 눌러 설정해주자.

 

 

따로 경로를 바꾸지 않고 자동으로 설정된 그대로 설정했다.

 

Next를 눌러 SDK를 설치하자.

 

 

마지막으로 SDK Tools 탭으로 이동해서 아래 components들을 선택하고 OK를 눌러 설치를 진행하자.

 

 

Android SDK Platform, API 35.0.1은 Setup과 동시에 설치했으므로 아래 4개만 체크하면 된다.

 

 

 

 

Android device 설정

 

이제 Android device 설정을 해보자.

 

Android Studio를 실행하고 New Flutter Project를 눌러 새 플러터 프로젝트를 생성하자.

 

 

Flutter SDK path를 처음에 설치한 Flutter SDK의 경로와 일치한지 확인하고 Next를 누르자.

 

 

 

디바이스 세팅을 위해 프로젝트를 만드는 것이므로 이름은 test1으로 하고 플렛폼은 Android만 활성화하자.

 

프로젝트 경로는 본인이 원하는 경로로 맞춰주면 된다.

 

설정이 완료되었으면 Create를 눌러 프로젝트를 생성하자.

 

 

프로젝트가 생성되면 아래처럼 IDE 화면이 나오게 된다.

 

 

 

여기서 Shift 키를 두 번 눌러 검색창을 띄우고 device manager를 검색하여 클릭하자.

 

 

 

이제 우측 Device Manager 창에서 + 버튼을 누르고 Create Virtual Device를 클릭하자.

 

 

 

원하는 디바이스를 클릭하고 Next를 눌러 다음으로 넘어가자.

 

 

 

원하는 시스템 이미지 버전 옆에 다운로드 버튼을 눌러 이미지를 다운로드하자.

 

 

설치가 완료되면 해당 이미지를 선택하고 Next를 클릭하자.

 

 

그 다음 장치 이름을 정하고 Finish를 누르면 된다.

 

 

 

개발환경 설치 확인

 

아래와 같이 명령어를 입력하면 플러터가 제대로 설치되어 있는지 확인할 수 있다.

 

flutter doctor

 

Android toolchain에서 경고가 뜨는데 가이드대로 명령어를 입력하면 해결된다.

flutter doctor --android-licenses

 

 

라이센스 관련 동의여부가 몇번 뜰텐데 걔속 y를 눌러 허용해주면 된다.

 

 

다시 flutter doctor 명령어를 입력해보면 이제 이슈없이 정상적으로 설치된 것을 확인할 수 있다.

 

 

샘플 코드 실행해보기

 

이제 샘플 코드를 다운받아서 에뮬레이터가 정상적으로 실행되는지 테스트해보자.

 

Android Studio에서 다시 Shift키를 두번 누르고 검색창에 import sample을 검색한 후 Import an Android Code Sample을 클릭하자.

 

 

 

필자는 Jetnews sample을 선택하여 프로젝트를 생성해보겠다.

 

 

 

아까와 같은 방법으로 device manager를 열고 아까 생성한 디바이스 옆에 실행버튼을 누르자.

 

 

 

그러면 아래처럼 안드로이드 에뮬레이터가 실행된 것을 볼 수 있다.

 

 

 

마지막으로 상단에 있는 실행 버튼을 눌러 앱을 실행시켜보자.

 

(처음에 상단에 실행버튼이 비활성화 되어있었는데 좀 기다리니까 갑자기 활성화되었다..! 만약 비슷한 상황이라면 좀 기다려보거나 Android Studio를 다시 실행하면 해결되는거 같다.)

 

 

 

 

샘플 코드가 정상적으로 실행된 모습이다.

 

 

 

참고 문서

 

https://docs.flutter.dev/get-started/install/macos/mobile-android#install-the-flutter-sdk

Start building Flutter Android apps on macOS

 

https://peterica.tistory.com/519

[Flutter] Flutter 맥북 개발환경 세팅하기