[Flutter] 개발환경 셋팅하기 for Mac

21. 9. 25.

 

Install

Flutter로 프로그래밍 공부를 막 시작하려는 사람이라면 이런 공식문서 보는게 익숙해져야 한다. 정말이다.

왜 그런지에 대해서는 칼럼을 써야할 판이므로 여기서는 자세한 설명을 생략한다.

 

일단 flutter로 개발을 해보겠다고 나도 mac을 산 입장이라 일단 mac부터 익숙하지가 않다. 그래서 mac이 익숙한 유저입장에서 저건 무슨 뻘짓이지 싶은 부분이 있을수 있다.

 

설치해야할 목록

1. flutter SDK
2. Android Studio
3. Android Emulator
4. Xcode

1. flutter SDK

이게 플러터의 메인이 되는 부분이다.

SDK는 Software Development Kit의 약자다. flutter를 이용해서 개발했다는 말은 이 Kit를 이용해서 개발했다는 이야기다.

설치는 크게 2부분으로 나눠진다. 공식문서는 유저가 터미널 사용에 익숙하다는 전제하에 작성되어 있어 터미널 사용이 익숙치 않은 사람들은 조금 난해하게 느껴질수도 있다.

(막상 터미널 말고 다른 방식으로 사용하려고 했는데 Mac이 익숙치 않아 윈도우가 그리워졌다. 차라리 터미널을 사용하는게 쉽다.)

 

1) SDK를 다운받아 특정경로에 넣어두기

공식문서에서는 development라는 폴더 안에 sdk 압축을 풀어 설치를 완료한다. 

cd ~/development
unzip ~/Downloads/flutter_macos_2.5.1-stable.zip

development 폴더가 없는 경우라면 아래 명령어를 통해 폴더를 만들어주자.

mkdir development

* 터미널 명령어 설명
cd 폴더명: change directory, 경로를 이동한다. 윈도우로 치면 폴더를 더블클릭해서 이동하는 거
mkdir 폴더명: make directory, 새폴더를 만든다. 새폴더 만들기이다. 

 

2) 터미널 사용을 위한 PATH 설정

터미널에서 flutter 명령어를 사용하기 위해서는 PATH를 설정해주어야한다. 터미널에게 flutter 폴더의 위치가 어디있는지 알려주는 작업이라고 생각하면 된다. vim이라는 문서편집기를 이용하게 되는데... 익숙하지 않은 사람들은 그냥 꾹 참고 따라하자. 한번만 하면 되고 두번다시 볼 일 없는 친구다.(물론 또 볼 수도 있다. 말이 그렇다는 거다.)

터미널을 켰을때 나오는 기본 경로에서 실행한다.

위에 적힌 명령어는 vim 으로 .zshrc파일을 열어라는 것이다. (탭을 활용한 자동완성기능을 사용하면 더 빨리 칠수 있다.)

그러면 창이 열리는데 거기에 아래 명령어를 입력해줘야 한다. 뒤에 `pwd` 이건 이대로 입력하라는게 아니라 위에 설치한 flutter의 경로를 입력하라는 이야기다. 일반적으로 /Users/유저명/development/flutter/bin 으로 입력하면 된다. (공식문서에서 시키는대로 했을때 가정이다.)

export PATH="$PATH:`pwd`/flutter/bin"

vim을 이용해서 저 내용을 작성하려면 익숙하지 않은 사람들한테는 이 무슨 거지 같은게 다있나 싶다. 진짜다. 왜냐면 단축키를 모르면 쓸 수가 없다. 그렇다고 이 잠깐 쓰기 위해 외우자 하기에도 거지같다. 개발자가 아닌 일반인이라면 vim이라는게 뭔지 알아두고, 필요할때마다 구글에 검색해서 단축키를 찾아보고 사용하자.

* vim 단축키 (요정도만 알면 위에 export 구문을 입력할 수 있다.)
i : 내용을 입력하기 위해서는 원하는 곳에 커서를 두고 i를 눌러보자. 맨 밑에 --insert--라는 표시가 뜨며 입력이 될거다.
esc : 명령모드. 단축키 입력상태로 돌아간다.
:w : 저장. 콜론하고 w가 단축키다. 말그대로 저장.
:q : vim 종료. 다시 터미널로 돌아간다.
:wq : 저장하고 종료. 

 

다 했다고 생각되면 터미널에 아래명령어를 입력해보자

flutter doctor

flutter를 찾을수 없다는 식의 메세지가 안나오면 성공이다.

* flutter doctor란?
flutter 개발 준비가 되었는지 확인해주는 명령어이다. 개발환경을 셋팅할때 설치해야할 항목이 한두개가 아니니까 이런 기능도 지원해준다. 나오는 항목들이 전부 체크표시가 되면 개발준비 완료다!

 

2. Android Studio

안드로이드 스튜디오는 그냥 문서편집기정도로 생각하자. 좋다. 혹여 vscode가 내 수족처럼 익숙하다면 vscode를 사용해도 좋다. 개인의 취향이 달린 문제이지만, 만약 강의를 듣는다면 강의자의 개발환경과 동일하게 맞추는 것이 쓸데없는 오류들로 부터 당신을 구원할 것이다. Vscode도 좋아하는 편집기지만, 개인적으로 flutter를 다룰때는 android studio 가 편한 느낌이다.

https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android Developers

설치는 별거 없다. 위 사이트가서 다운받고 설치해라.

설치가 다 되었다면 flutter 플러그인을 설치해줘야한다. 플러그인에서 flutter를 찾아 설치하자. 같은 방식으로 Dart도 찾아 설치해준다.

설치해주면 된다.

요건 필수는 아닌데 있으면 {} 구분을 좀더 쉽게 해준다. 추천.

3. Android Emulator

Mac에서 앱을 확인할 가상 안드로이드 기기다. 안드로이드 스튜디오 내에서 셋팅하면 된다.

저 위에 빨갛게 동그라미 친 부분 클릭. 스마트폰 모양에 안드로이드그림이 그려져있다.

누르고 사용할 가상기기를 만들어주면 된다.

 

4. Xcode

Xcode는 ios 개발을 위한 IDE이다. 구글이 안드로이드 스튜디오라면, 애플은 Xcode인 셈. flutter는 구글이 개발하고 있는 프레임워크라 안드로이드스튜디오를 사용한다. Xcode를 설치하는 이유는 ios 개발을 위해 애플에서 강제하고 있는 부분이 있기때문.

그래서 윈도우 사용자들은 flutter를 사용하더라도 Mac이 없다면, iOS앱을 만들 수 없다.

찾아서 설치해주고 flutter 공식문서에 따라 설정해주면 끝. 용량이 좀 커서 그런지 설치가 오래걸린다. 설치버튼 눌러놓고 커피한잔의 여유를 가지자.

 

설치를 모두 다 한거 같으면, 터미널을 켜서 flutter doctor를 입력해보자.

모두 체크표시가 나오고 별 문제 없다면 성공적으로 개발환경 셋팅을 끝마친거다.

만약 무언가 에러 메세지가 나온다면 구글링을 통해 해결하거나, 주변 아는 사람에게 물어보는 것이 답이다.