티스토리 뷰

맥 OS에 플러터(flutter)를 설치해 보자. 

현재 내 개발환경은 다음과 같다.

 

macOS Monterey version 12.6.1

Mac Studio(2022)
Apple M1 Max
Memory 32GB

 

플러터 설치방법은 공식 사이트에 잘 나와 있다. 하지만 초보자에게는 생략된 몇몇 부분으로 인해서 설치가 힘든 것이 사실이다.

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

 

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

만일 자신의 CPU가 맥 실리콘이면 터미널에 다음 명령을 실행해서, 로제타 변환 환경이 가능하도록 해야 한다.
sudo softwareupdate --install-rosetta --agree-to-license

 

 

 

1. Flutter SDK 설치하기

현재 맥의 CPU는 인텔이거나 맥 실리콘(M1, M2)가 된다.

SDK도 두 종류로 나뉘어 있으니, 자신의 CPU가 무엇인지 참고해서 공식 사이트에서 다운로드하자.

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

 

macOS install

How to install on macOS.

docs.flutter.dev

 

 

나는 맥 실리콘이니 flutter_macos_arm64_3.310-stable.zip으로 다운로드하였다. 

다운로드한 zip 파일은 ~/Donwloads에 있다.

터미널에 다음 명령을 실행해서  ~/developments에 zip파일을 압축 해제한다.

cd ~/development
unzip ~/Downloads/flutter_macos_arm64_3.3.10-stable.zip

위의 명령으로 ~/developments/flutter에 Fluter SDK 파일이 생성된다.

 

이제 플러터 툴을 쉘 패치에 추가해야 한다. 

Monterey는 zshell이 기본으로 설치되어 있으니, zshell의 .zshrc에 패치를 추가한다.

터미널에 다음 명령을 실행해서 .zshrc 파일을 텍스트 편집기로 연다.

open ~/.zshrc

그러면 최상단에 path에 관련된 정보가 있다.

기존의 export PATH 아래에 다음 코드를 추가해서 플러터 툴 패치를 추가한다.

export PATH="$PATH:$HOME/development/flutter/bin"

터미널을 다시 실행하거나, 다음 명령을 터미널에 입력해서 추가한 패치를 적용한다.

source ~/.zshrc

 

 

 

2. flutter doctor 실행하기

터미널에 다음 명령을 실행해서 flutter doctor를 실행해 보자.

flutter doctor

이 명령은 사용자 환경을 확인하고, 터미널에 결과를 표시한다. Dart SDK는 Flutter와 함께 번들로 제공되니 따로 설치할 필요가 없다. 설치해야 할 다른 소프트웨어나 수행해야 할 추가 작업이 표시된다.  만일 잘되던 플러터 작업이 안된다면, flutter doctor를 실행해서 확인할 수 있으니 잘 기억해 주다.

 

 

 

3. iOS 설정

macOS는 iOS, Android, macOS, web용 플러터 앱 개발을 지원한다. 모두 플랫폼을 설정하거나, 자신이 필요로 하는 플랫폼만 설정해도 된다.

 

3.1. xcode 설치

플러터 앱을 iOS용으로 개발하려면 Xcode를 설치해야 한다. Xcode를 사용하면 iOS 기기나 시뮬레이터에서 플러터 앱을 실행할 수 있다.

 

1. 앱 스토어에서 Xcode를 설치한다. (웹 사이트를 이용하는 방법도 있지만, 이게 더 간단한다.)

2. 터미널에 다음 명령을 실행하여, 설치된 Xcode를 사용하도록 Xcode 명령줄 도구를 구성한다.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

3. Xcode를 한번 실행한 후, 터미널에 다음 명령을 실행해서 Xcode 라이선스 계약을 동의해야 한다.

sudo xcodebuild -license

 

라이선스의 내용이 길기 때문에 'space'를 눌러서 서명을 끝까지 다 읽은 후, 아래와 같이 동의를 할 것인지에 대한 답변으로 agree를 입력하자.

By typing 'agree' you are agreeing to the terms of the software license agreements. 
Type 'print' to print them or anything else to cancel, [agree, print, cancel]

 

3.2. iOS 시뮬레이터 설정하기

터미널에 다음 명령을 실행한다.

open -a Simulator

시뮬레이터가 64비트 장치(iPhone 5S 이상)를 사용하고 있는지 확인하자.

File > Open Simulator에서 현재 사용하는 디바이스에 대한 정보를 확인할 수 있다.

 

3.3 간단하게 플러터 앱 만들고 실행하기

다음 단계를 통해서 첫 플러터 앱을 만들고 실행시켜 보자.

1. 터미널에 다음 명령을 입력하여 데스크톱으로 이동한 후 새로운 플러터 앱을 만들자.

cd ~/Desktop
flutter create my_app

2. 플러터의 시작 앱이 포함된 my_app 디렉터리가 만들어졌다. 디렉터리로 이동하자.

cd my_app

3. 시뮬레이션이 실행된 상태에서 다음 명령을 실행해서 시뮬레이션에 앱을 실행시켜 보자.

flutter run

터미널에 실행되는 정보가 나타나면서 시뮬레이션에 앱이 실행되는 것을 확인할 수 있다!

3.4. iOS 디바이스에 배포하기

플러터 앱을 실제 아이폰 또는 아이패드에 배포하려면 Xcode 및 애플 개발자 계정에서 실제 장치 배포를 설정해야 한다.

1. iOS 개발에 연결할 실제 장치를 맥에 처음 연결하면 장치에 신뢰하는 장치인지 대화상자가 나타난다. 신뢰를 선택하자.

2. 프로젝트에 Xcode 서명을 추가한다.

a. 플루터 프로젝트 위치에서 다음 명령을 실행한다.

open ios/Runner.xcworkspace

b. Runner 상단에 실행할 장비를 선택한다.

c. 왼쪽 탐색 패널에서 Runner 프로젝트를 선택한다.

d. Runner 대상 설정 페이지의 Signing & Capabilities > Team에서 개발팀이 선택하고, Bundle identifier에 자신의 도메인에 맞게 수정한다. 도메인은 자신의 블로그 주소나 웹 사이트와 같이 유일한 도메인이 되어야 한다. 

개발팀은 Apple ID로 Xcode에 로그인해야 선택할 수 있다.

모든 Apple ID는 제한된 기능으로 개발과 테스트를 지원한다. 하지만 앱을 앱스토어에 배포하려면 Apple 개발자 프로그램에 유료로 등록해야 한다. 지금은 무료 기능만으로도 충분한다.

 

e. 이제 Runner의 왼쪽 상단의 화살표 아이콘을 클릭해서 실제 장비에 잘 실행이 되는지 확인해 보자.

 

처음 플러터 앱 프로젝트를 생성하고 iOS 기기에 테스트하기 위해서는 위의 a~d 단계를 한번 진행해야 한다. 이후에는 e단계 대신 안드로이드 스튜디오에서 실행시킬 수 있다.

 

 

 

4. 안드로이드 설정

플러터는 Android Studio를 설치해야 Android 플랫폼을 사용할 수 있다. 그러나 vscode와 같은 다른 편집기로도 플러터 앱을 작성할 수도 있다. vscode에서 플러터 앱을 작성하는 방법은 다른 문서에서 설명하도록 하겠다.

 

4.1. Android Studio 설치하기

1. 안드로이드 스튜디오 공식사이트에서 안드로이드 스튜디오를 다운로드하고 설치한다. 

https://developer.android.com/studio

 

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

2. 설치를 완료하고, 터미널에 flutter doctor를 실행해서 안드로이드 스튜디오가 잘 설치되었는지 확인하자.

이 문서의 순서대로 설치를 진행했는데, 내 맥에서는 안드로이드 스튜디오에 내장된 자바 버전을 찾을 수 없다고 나온다.

구글링을 하니 안드로이드 스튜디오의 버전업이 되면서 발생한 이슈라고 한다.

터미널에 다음 명령을 실행하면 해결이 된다.

cd /Applications/Android\ Studio.app/Contents
ln -s jbr jre

 

3. 이제 Android toolchain을 설치하자.

우선 안드로이드 스튜디오의 SDK Manger를 실행한다.

그리고 Android SDK > SDK Tools에서 Android SDK Command-line Tools를 체크하고 OK를 클릭한다.

그리고 터미널에 다음 명령을 실행해서 라이선스에 동의를 한다.

flutter doctor --android-licenses

flutter doctor를 실행해 보자. 그러면 Xcode에 Cocoapods가 설치되지 않았다고 나온다.

 

Cocoapods는 Xcode 프로젝트의 라이브러리 의존성 관리도구라고 한다. 개발자가 편리하게 오픈소스 라이브러리를 사용할 수 있게 해주는 도구라고 한다. 그래서 플러터에서도 Cocoapods를 많이 사용한다고 한다.

 

Cocoapods 공식사이트에서는 gem을 사용한 설치법이 나와 있는데, 맥 실리콘에서는 제대로 설치가 되지 않았다.

그래서 구글링 해보니 맥 실리콘에서는 home brew로 설치가 쉽다고 한다.

만일 home brew가 설치되어 있지 않다면, 공식 사이트에 설명된 대로 터미널에 다음 명령을 실행한다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

home brew가 설치된 후 다음 명령으로 cocoapods를 설치하자.

brew install cocoapods

마지막으로 flutter doctor를 실행해 보자. 그럼 모든 설치가 완료된 것을 확인할 수 있다.

이제 즐겁게 플러터 앱을 만들면 된다!라고 생각했는데... 

안드로이드 스튜디오에 플러터 플로그인을 설치해야 정말로 끝이 난다.

 

 

 

5. 안드로이드 스튜디오에 플러터 플로그인 설치하기

1. 안드로이드 스튜디오를 실행하고 Plugins를 선택한다.

2. Marketplace에서 flutter를 검색하며 flutter.dev에서 배포하는 Flutter를 찾을 수 있다.

3. 이것을 설치한다. 그러면 Dart plugin도 설치할 것인지 대화창이 나타나면 Yes를 선택한다.

4. 안드로이드 스튜디오를 재시작하면 New Flutter 메뉴가 생긴 것일 확인할 수 있다.

이제 정말로 플러터 설치가 끝이 났다!

즐겁게 코딩하러 가보자.

댓글
공지사항