[Flutter] 플러터 설치 | 윈도우/맥 개발환경 구축하기, 설치 문제 해결하기

윈도우, macOS에 플러터(Flutter) 개발 환경을 설정하는 방법입니다. 운영체제 별 개발 환경 구축 방법 및 안드로이드 스튜디오 설치, 설치 중 발생하는 문제 해결하기까지 플러터를 시작하기 위한 모든 내용을 정리했습니다.

테스트 환경은 아래와 같습니다.

• 플러터 SDK : 3.13.9(윈도우), 3.13.9(macOS)
• 안드로이드 스튜디오 : 2022.3.1 Giraffe
• 운영체제 : 윈도우 10 / macOS Sonoma 14.1

환경 설정은 동영상 강의로도 확인할 수 있습니다.

• windows 환경 설정 : https://www.youtube.com/watch?v=CedR_QZnUBM
• macOS 환경 설정 : https://www.youtube.com/watch?v=DDCqlDrWsXU

1. 윈도우 개발 환경 구축하기

플러터 SDK(Software Development Kit, 소프트웨어 개발 도구)를 내려받고 환경 변수를 설정하겠습니다.

1.1 플러터 SDK 내려받기

[Todo 01] ① 플러터 홈페이지(https://docs.flutter.dev/get-started/install)에 접속해 [Windows]를 클릭해주세요.

[Todo 02] Android를 클릭해주세요.

[Todo 03] ‘Download then install Flutter’에 있는 [flutter_windows_{버전}.zip] 버튼을 클릭합니다(버전은 계속 최신 버전으로 바뀝니다).

[Todo 04] 내려받은 압축 파일을 원하는 위치에 풀어줍니다.

* ‘Flutter SDK archive(https://docs.flutter.dev/release/archive)’에 접속하면 운영체제/버전별 SDK를 내려받을 수 있습니다.

1.2 환경 변수 설정

플러터 SDK를 사용해서 모든 플러터 명령을 실행하려면 윈도우에 플러터 SDK 위치를 등록해줘야 합니다. 이 과정을 ‘환경 변수 설정’이라고 부릅니다.

[Todo 01] ① 윈도우 검색창에 ‘환경’이라고 검색하고 → ②‘시스템 환경 변수 편집’을 클릭합니다.

[Todo 02] [환경 변수(N)…] 버튼을 클릭해주세요.

[Todo 03] Path라는 변수가 존재하는지 확인합니다. Path 변수가 존재하지 않으면 Todo 04로 건너뛰세요. Path 변수가 존재하면 ① Path 변수를 선택하고 → ② [편집(E)…] 버튼을 클릭합니다. 팝업창에서 ③ [찾아보기(B)…] 버튼을 눌러서 압축을 푼 [flutter] 폴더 안의 [bin] 폴더를 선택해주세요. 그러면 ④ 플러터 SDK의 환경 변수가 생성됩니다. 모든 설정이 끝났으니 ⑤와 ⑥ [확인] 버튼을 연이어 클릭해 환경 변수 설정을 마칩니다. Todo 05로 이동해주세요.

[Todo 04] Path 변수가 없으니 Path 변수를 새로 생성해줘야 합니다. ① [새로 만들기(w)…] 버튼 클릭 → 팝업창에서 ② 변수 이름으로 Path 입력 → ③ [디렉터리 찾아보기((D)…] 버튼 클릭 후 팝업창에서 압축을 푼 [flutter] 폴더 속의 [bin] 폴더를 선택합니다. ④와 ⑤ [확인] 버튼을 연이어 클릭해 환경 변수 설정을 마무리합니다.

이제 3. ‘안드로이드 스튜디오 설치하기’로 건너뛰어 진행해주세요.

2. macOS 개발 환경 구축하기

플러터 SDK를 내려받고 환경 변수를 설정하겠습니다. 플러터는 iOS와 안드로이드 앱을 하나의 소스 코드로 개발할 수 있습니다. iOS 특성상 iOS를 포함한 애플 관련 기기를 대상으로 개발 또는 배포하려면 macOS가 필요합니다. 윈도우 컴퓨터에서는 안드로이드 개발만 가능하니 iOS 개발을 하고 싶다면 꼭 맥 컴퓨터를 준비해주세요.

2.1 SDK 내려받기

[Todo 01] ① 플러터 홈페이지(https://docs.flutter.dev/get-started/install)에 접속해 [macOS]를 클릭해주세요.

[Todo 02] iOS를 클릭해주세요.

[Todo 03] ‘Download then install Flutter’에 두 가지 SDK가 보입니다. 인텔 기반 CPU를 장착한 맥이라면 [Intel Processor]을, M1 등 M으로 시작하는 계열의 CPU를 장착한 맥이라면 [Apple Silicon]을 클릭해 내려받습니다.

2.2 환경 설정

[Todo 01] macOS에 플러터 SDK 위치를 알려줘야 합니다. macOS에 기본으로 제공되는 터미널 앱을 실행해서 다음 명령어를 실행해주세요.

cd $HOME/Documents
unzip $HOME/Downloads/flutter_macos_3.30.5-stable.zip

첫 번째 명령은 현재 로그인한 OS 유저의 [Documents] 폴더로 이동합니다. 두 번째 명령은 [Downloads] 폴더에서 flutter_macos_(버전)-stable.zip이라는 압축 파일을 현재 위치에 압축 해제합니다. 내려받기를 다른 위치에 했거나 다른 버전의 플러터 SDK를 내려받았다면 해당 위치 및 이름을 적용해주세요.

[Todo 02] macOS는 기본적으로 2가지 종류의 셸(Shell)을 사용하는데 다음 명령어를 실행해서 어떤 셸을 사용하는지 알아냅니다.

echo $SHELL

/bin/bash라는 출력이 나오면 Bash를 사용 중이고 /bin/zsh라는 출력이 나오면 Z Shell을 사용 중입니다.

[Todo 03] 시스템 PATH 변수에 플러터 SDK의 위치를 등록할 차례입니다. 본인의 셸 환경에 맞는 명령을 실행합니다.

• Bash를 사용 중일 때는 다음 두 명령 중 하나를 실행해주세요.

vi ~/.bash_profile
vi ~/.bashrc

• Z Shell을 사용 중일 때 다음 명령을 실행하세요.

vi ~/.zshrc

[Todo 04] 이제 vi 환경에서 프로필 파일을 수정합니다. j를 눌러서 커서를 가장 아래로 움직인 다음에 i를 눌러서 insert 모드로 변경한 후 파일의 가장 아래에 다음 코드를 추가해주세요.

export PATH="$PATH:{압축을 푼 플러터 폴더 위치}/bin"

(Note) export PATH = “”처럼 = 좌우로 빈 공간을 두면 안 됩니다! 빈 공간 없이 입력해주세요. 예를 들어 $HOME/Documents 폴더에 압축을 풀었다면 다음과 같은 코드를 작성해줍니다.

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

모두 완료를 했으면 Esc 키를 눌러서 insert 모드가 나오면 :wq를 실행해서 파일을 저장해줍니다.

2.3 Xcode 설치하기

Xcode는 애플에서 제공하는 iOS 개발 툴입니다. 플러터 앱을 iOS용으로 빌드하려면 꼭 Xcode가 필요합니다.

[Todo 01] 앱 스토어에 접속해서 Xcode를 검색 후 설치를 진행해주세요. 설치 시간이 다소 오래 걸릴 수 있습니다.

[Todo 02] 설치가 완료되면 설치한 Xcode 버전을 시스템에서 사용할 Xcode 버전으로 설정해야 합니다. 다음 명령어를 실행해주세요.

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

명령어 실행 후 안내에 따라 설치를 완료해주세요.

2.4 Brew 및 CocoaPods 설치하기

Xcode는 애플에서 제공하는 iOS 개발 툴입니다. 플러터 앱을 iOS용으로 빌드하려면 꼭 Xcode가 필요합니다.

1. https://brew.sh/로 접속합니다. 중앙의 ‘Install Homebrew’ 바로 아래 설치 스크립트를 복사합니다.

2. 복사한 스크립트를 터미널에 그대로 붙여넣기 합니다.

3. 비밀번호를 물어보면 컴퓨터를 로그인할 때 사용한 비밀번호를 입력한 후 [Enter]를 누릅니다. 보안상의 이유로 비밀번호를 입력할 때 입력값이 터미널에 보이지는 않습니다.

4. ‘Press RETURN/ENTER to continue or any other key to abort’라는 문자가 나오면 Enter 를 눌러서 설치를 실행합니다.

5. 이제 터미널에서 실행해서 환경 변수에 brew 위치를 등록해줍니다. bash 터미널을 사용 중이라면 다음 명령어를 입력하여 실행합니다.

echo 'PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile

z shell을 사용 중이라면 다음 명령어를 터미널에서 실행합니다.

echo 'PATH="/usr/local/bin:$PATH"' >> ~/.zshrc

만약 어떤 터미널을 사용 중인지 모르는 경우 둘 다 실행해도 괜찮습니다.

6. 터미널을 재시작한 후 다음 명령어를 실행해서 CocoaPods를 설치해줍니다.

brew install CocoaPods

3. 안드로이드 스튜디오 설치하기

안드로이드 스튜디오는 플러터를 개발하는 IDE(통합 개발 환경)입니다. 안드로이드 스튜디오를 내려받는 과정은 운영체제와 상관없이 같습니다.

[Todo 01] 안드로이드 스튜디오 개발자 홈페이지에 접속합니다.

• https://developer.android.com/studio

[Todo 02] [Download Android Studio]를 클릭하여 다운로드 후 설치 파일을 실행해서 기본값으로 설치해주세요.

(Note) 인텔 칩과 애플 실리콘 환경에 따른 설치

애플 맥은 크게 두 가지의 칩 규격을 사용합니다. 인텔 CPU를 사용하는 맥과 ARM 아키텍처의 애플 실리콘(Apple Silicon)을 사용하는 맥입니다. M1, M2 칩을 장착한 맥은 애플 실리콘(Apple Silicon) 또는 애플 칩(Apple Chip) 관련 소프트웨어를 다운받아야 더욱 빠르고 리소스 사용에 최적화된 프로그램을 실행할 수 있습니다. 애플 실리콘을 사용하는 맥이 아니라면 인텔 칩 기반의 소프트웨어를 다운받으면 됩니다. 아래 안드로이드 스튜디오 다운로드 창에서도 볼 수 있는 것처럼 인텔 기반의 맥은 ① [Mac with Intel Chip] 버튼 그리고 애플 실리콘 기반의 맥은 ② [Mac with Apple Chip] 버튼을 눌러서 하드웨어에 최적화된 버전의 안드로이드 스튜디오를 다운받습니다.

3.1 다트/플러터 플러그인 설치

[Todo 01] 안드로이드 스튜디오 설치가 끝나면 안드로이드 스튜디오를 실행해주세요. 만약에 다음과 같은 창이 나오지 않고 프로젝트가 바로 실행된다면 모든 프로젝트를 닫으면 됩니다.

[Todo 02] 왼쪽 ① [Plugins] 버튼 클릭 → [[Marketplace] 탭 → ② 검색창에 Flutter를 검색합니다. ③ 검색된 플러터 플러그인의 [Install] 버튼을 눌러서 설치합니다.

[Todo 03] 플러그인 설치 후 [Restart IDE]를 클릭해 안드로이드 스튜디오를 재실행해야 플러그인이 반영됩니다.

4. 설치 문제 해결하기

위 과정을 모두 잘 따라왔다면 큰 문제가 없어야 하나 예상치 못한 문제가 생길 수 있습니다. 구글에서는 환경 설정의 어려움을 최소화할 플러터 닥터(Flutter Doctor)를 제공합니다. 문제를 어떻게 해결해야 하는지 개발자에게 알려주는 도구입니다.

4.1 플러터 닥터로 문제 확인하기

[Todo 01] 터미널을 열어서 ‘flutter doctor’를 입력 후 Enter 를 쳐보세요(윈도우는 명령 프롬프트, macOS/리눅스는 터미널입니다. 터미널로 통칭해 부르겠습니다).

문제가 없으면 좋겠지만 대개는 두세 가지 문제가 보고될 겁니다. 이 책에서는 안드로이드 스튜디오만을 사용하므로 Chrome, IntelliJ IDEA, VS Code 옵션은 전혀 상관이 없습니다. 하지만 ① Flutter, Android toolchain은 모두 초록색 체크 박스여야 합니다(macOS라면 Xcode 옵션 역시 초록색 체크 박스여야 합니다). 플러터 doctor가 제공하는 방법으로 문제를 해결할 수 있습니다. 여기서는 ‘Android toolchain’에 생긴 두 가지 문제를 모두 해결하겠습니다.

4.2 ‘cmdline-tools component is missing’ 문제 해결하기

Android SDK Command Line Tools가 설치되지 않아서 생기는 문제입니다. Android Studio에서 몇 번의 클릭으로 간단하게 설치할 수 있으니 다음 과정을 따라해주세요.

[Todo 01] ① [Customize] → ② [All settings…]를 클릭합니다.

[Todo 02] ① [Languages & Frameworks] → [Android SDK] 클릭 → ② [SDK Tools] 탭 클릭 → ③ [SDK Command-line Tools(latest)] 체크 박스 선택 → ④ [Apply] 클릭 → ⑤ 팝업창에서 [OK]를 클릭해 안내에 따라 설치를 완료합니다. 설치를 마쳤으면 ⑥ [OK]를 클릭해 빠져나오세요.

4.3 ‘Android license status unknown.’ 문제 해결

안드로이드 스튜디오를 사용하려면 라이선스 동의를 해야 합니다. 다음 과정을 진행해서 안드로이드 스튜디오 라이선스에 동의해주세요.

[Todo 01] 터미널에서 ‘flutter doctor –android-licenses’ 명령을 실행합니다.

> flutter doctor --android-licenses

[Todo 02] 이후 나오는 모든 물음에 ‘y’를 입력하세요. 그러면 라이선스 문제가 해결됩니다.

이로써 환경 설치 방법 안내를 마칩니다.