Flutter 개발 환경 구축 1 - SDK 설치와 환경변수 설정

플러터로 개발을 시작할 때 가장 기본적인 단계 세 가지는 IDE로 Android Studio 설치, 플러터 언어를 쓰기 위한 Flutter SDK 설치, 환경변수 설정입니다. 최종적으로는 flutter doctor를 실행해 빠진 부분이 있는지 점검할 수도 있습니다. 차근차근 첫 단계부터 진행해보도록 합시다.

Android Studio 설치

브라우저 상에서 https://developer.android.com/studio에 접속해 Download Android Studio 버튼을 클릭해 설치 파일을 다운로드하여 설치를 진행합니다. Android Studio 대안으로 VS Code도 있지만, 구글이 플러터를 지원하는 만큼, Android Studio를 사용하는 편이 개발 과정에서 사소하지만 생산성에 영향을 주는 요소들을 피해 가기 위해 좋다고 생각합니다. 안드로이드 에뮬레이터를 쓸 수도 있고, 그 밖에도 Android Studio가 플러터 개발에 필요한 최적화가 잘 되어 있겠죠? 

Flutter SDK 설치

Flutter SDK 역시 브라우저 상에서 설치 파일을 받아 설치를 진행합니다. https://docs.flutter.dev/get-started/install에 접속하면 Windows, macOS, Linux, Chrome OS 4가지 OS 이미지 버튼이 보입니다. 플러터 개발을 진행할 OS에 맞게 아이콘을 클릭하고 설치를 진행합니다. macOS 사용자 중 M1 맥북을 쓴다면 Apple Sillicon 링크의 설치 파일을 클릭하면 됩니다. 단, M1 환경에서는 https://docs.flutter.dev/get-started/install/macos 에서 얘기하는대로 터미널 상에서 Rosetta 환경을 먼저 설치해줍니다. Rosetta를 설치하는 이유는, 플러터 라이브러리 중 아직까지 M1 칩을 완벽하게 지원하지 않고 인텔 칩에서만 돌아가는 라이브러리들이 있기 때문입니다. 터미널에서 sudo softwareupdate --install-rosetta --agree-to-license를 입력합니다. 그 후에 홈 위치인 ~에서 mkdir development; cd development; unzip ~/Downloads/flutter_macos_arm64_3.3.3-stable.zip 커맨드를 실행해줍니다.

환경변수 설정 (Flutter SDK, Android Studio)

안드로이드 스튜디오와 플러터를 현재 설치된 경로 외에 다른 경로에서도 사용하려면 환경변수 등록이 필수입니다. 기본적으로 Android Studio SDK와 Flutter SDK가 설치된 위치를 찾고, 그 위치를 다른 경로에서도 파악할 수 있게 환경변수에 path로 등록해줍니다. Android Studio는 SDK 경로를 가리키는 SDK 변수 설정 후 SDK에 속한 emulator, tools, tools의 bin, platform-tools (adb용) 4가지 경로를 설정해주고, Flutter SDK는 Flutter SDK 경로 하나를 잡아줍니다. Android Studio의 경우, 등록해야할 경로가 많고 길기 때문에 먼저 Android SDK 경로를 ANDROID_SDK라는 변수에 저장하게 되는데요, 차근차근 진행해봅시다. (참고로 ANDROID-SDK, AND-SDK등 변수명은 본인의 마음에 드는 걸로 사용하면 됩니다.)

윈도우

Android Studio SDK 환경변수 설정

윈도우에서 Android Studio SDK 설치 경로는 대개 C:\Users\[Username]\AppData\Local\Android\Sdk 일겁니다. (이 경로는 Android Studio를 실행한 후 Settings 메뉴에서도 확인할 수 있습니다.) Android Studio SDK 경로 확인 후 UI를 통해 환경변수를 설정해 줍시다.

1. 윈도우 검색창에 환경변수를 검색해서 나오는 시스템 환경 변수 편집을 실행시킵니다.

2. 시스템 속성 창이 뜨면, 고급 탭 하단의 환경 변수 버튼을 눌러 환경 변수 창으로 들어갑니다.

3. 시스템 변수에 등록해도 상관없지만 일반적으로 로그인한 사용자에게 환경 변수를 설정해주면 되는데요, 사용자 변수 섹션에서 새로 만들기 버튼을 클릭해 변수 이름에 ANDROID_SDK, 변수값에 SDK 경로를 넣어준 뒤 확인 버튼을 누릅니다. 이후 PATH에서 사용할 환경 변수를 새로 만들어준거죠.

4. PATH 선택 후 편집 버튼을 클릭합니다. 그리고 새로 만들기를 클릭해

%ANDROID_SDK%\emulator

%ANDROID_SDK%\tools

%ANDROID_SDK%\tools\bin

%ANDROID_SDK%\platform-tools

를 입력한 뒤 확인 버튼을 클릭해줍니다.

Flutter SDK 환경변수 설정

https://docs.flutter.dev/get-started/install/windows에 기술된 대로 터미널에서 where flutter dart 명령어를 써서 Flutter SDK 위치를 찾아줍니다. 정확히는 C:\dev\src\flutter\bin\..와 같은 형식으로 출력되는 경로에서 실행 파일인 bin 경로까지 확인하시면 됩니다. 이제 Android Studio와 마찬가지로 환경변수를 설정할 차례입니다. 사용자 변수에서 Path 변수에 조금 전에 확인한 Flutter SDK bin 파일 경로를 입력해줍니다. 터미널 창에 출력된 C:\부터 bin까지 경로를 복사해 붙여넣기 한 뒤 확인 버튼을 클릭해 환경변수에 반영해줍니다.

맥OS

Android Studio SDK 환경변수 설정

맥에서 Android Studio SDK 설치 경로는 대개 /Users/[Username]/Library/Android/SDK 입니다. 그다음 환경변수 파일을 열어 경로를 설정해주면 되는데요, 터미널에서 open ~/.zprofile을 실행해 텍스트 편집기에서 파일을 열고 경로를 입력해줍니다. 혹시 .zprofile 파일을 찾지 못한다면, 터미널에서 echo $SHELL 입력 후 자신의 터미널이 어떤 쉘 기반인지 먼저 확인후 .zshrc 등 다른 환경 변수 파일을 입력하면 됩니다. 열린 파일에서 아래와 같이 입력한 뒤 저장해줍시다.

 

# Android Studio
export ANDROID_SDK=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK/emulator 
export PATH=$PATH:$ANDROID_SDK/tools
export PATH=$PATH:$ANDROID_SDK/tools/bin
export PATH=$PATH:$ANDROID_SDK/platform-tools

Flutter SDK 환경변수 설정

맥의 경우 터미널에서 which flutter를 치시면 Flutter SDK 설치 경로를 확인할 수 있습니다. /User부터 /bin으로 끝나는 경로를 확인해 둡니다. 플러터 경로를 넣어줄 때는 export PATH="$PATH: 뒤에 아까 찾은 flutter 경로를 넣어주면 됩니다. 예를 들어 현재 로그인한 유저 이름이 codeflow이고 ~/development 위치에 Flutter SDK를 설치했다고 가정해보겠습니다. 이 경우 which flutter를 쳤을 때 출력되는 위치 경로가 /Users/codeflow/development/flutter/bin이기 때문에 .zprofile에 export PATH="$PATH:/Users/codeflow/development/flutter/bin"라고 위치에 상관없이 한 줄 입력해주면 됩니다. 현재까지 설정된 PATH 변수의 값에 이어서 경로를 잡아준다는 의미이죠. 아니면  아예 사용자 이름을 $HOME으로 대체하고 export PATH="$PATH:$HOME/development/flutter/bin"로 입력해도 됩니다. 참고로 파일을 저장한 뒤 경로가 잘 입력되었나 보려면, 터미널에서 echo $PATH 명령어를 입력해 확인하실 수 있습니다.

Android Studio와 Flutter 경로를 PATH에 추가

Flutter 경로, 버전과 PATH 설정 확인

Flutter Doctor

모든 설정을 마친 후에는 터미널에서 flutter doctor를 입력해봅시다. 그러면 설치 상태에 따라서 권장 사항인데 설치가 안된 항목들을 설치해주는데요, 가능한 지적하는 사항이 없도록 지시하는 내용을 따라 추가적으로 필요한 패키지들을 설치해줍시다.

제가 실행했을 때는 Android SDK에서 cmdline-tools를 추가하라는 메시지가 나왔습니다. Android Studio가 설치되어 있는 상태이기 때문에 Android Studio를 실행해서 커맨드라인 툴을 추가로 설치해 줍니다.

남은 워닝을 flutter doctor --android-licenses 커맨드를 실행해 없애주고 다시 flutter doctor를 실행시키면 모두 체크 상태로 표시되는 걸 확인할 수 있습니다.

이제 모든 설정이 끝나고 flutter에 대한 가장 기본적인 설정은 끝난 상태가 됩니다!