[Flutter #4] 개발 환경 꾸미기

Flutter 개발 환경 꾸미기

개발 환경은 하나를 다운로드 받아서 설치를 하는 간단한 방법은 아닙니다. 예전을 생각하면 setup 파일을 하나 다운로드 받아 설치를 하면 한 번에 모든 것이 끝이났는데 플러터 뿐만 아니라 ionic이나 React Native 모두 설치를 하려면 여러 단계를 거쳐야 했습니다.

플러터라는 개발툴을 설치하고 플러터가 안드로이드 개발툴 안드로이드 스튜디오나 애플용 개발툴을 이용해서 플러터로 만든 소프트웨어를 변환하기 때문에 별도의 툴을 설치해야 했습니다. 윈도우 기반이기 때문에 윈도우용 안드로이드 스튜디오를 설치했습니다. 플러터로 개발을 할 때에는 안드로이드 스튜디오에서 제공을 하는 에뮬레이터를 플러터에서 사용을 하게 됩니다. 그리고 소스를 관리하는 툴인 git 설치를 추천을 했고 소스코드를 편집을 할 에디터도 별도의 설치가 필요했습니다. 그래서 우리가 설치해야 할 것은 플러터, 안드로이드 스튜디오, git과 비주얼 스튜디오 코드라는 에디터까지 총 4가지를 설치해야 했습니다.

설치를 하면서 안드로이드 폰과 에뮬레이터에서 각각 애플리케이션을 실행하는 방법도 살펴보겠습니다.

 

플러터 설치하기

“Flutter(플러터)는 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일 되는 구글의 아름다운 UI 툴킷입니다.” 라는 소개를 flutter 공식 한국어 페이지인 https://flutter-ko.dev/에서 찾을 수 있습니다.

 

이제 플러터를 설치해 보도록 하겠습니다.

 

현 시점에서 안정적인 개발툴의 버전은 flutter_windows_1.22.1-stable.zip이라고 하여 다운로드 받았습니다. 압축을 풀면 바이러스가 의심된다고 안전 폴더에 압축이 풀리는데 안심하고 일반 폴더로 전환을 하면 됩니다. 그리고 한가지 주의 사항은 zip 파일의 압축을 풀고 flutter를 C:\Program Files\와 같이 권한이 필요한 위치 말고 C:/MyDev와 같은 폴더에 넣어야 한다고 합니다. 소스코드를 저장할 C:\MyDev  폴더에 압축을 풀어 놓았습니다.

 

 

다음은 커맨드 라인에서 Flutter를 이용하기 위해서는 환경 변수에 Path를 설정해 주어야 합니다. 이를 위해서는 설정을 열고 “시스템 환경 변수”로 검색을 해서 시스템 속성을 열과 하단의 “환경 변수”를 클릭해서 

 

Path의 편집을 클릭하고 

 

환경 변수 편집 창에서 새로 만들기를 클릭해서 압축을 풀어 놓은 Flutter/bin 경로를 아래와 같이 입력을 해 줍니다.

이렇게 설정을 해 줘야지만 윈도우의 어디서나 플러터 명령을 사용할 수 있습니다.

 

환경 변수의 편집까지 끝나고 확인 버튼을 눌러 빠져 나왔다면 컴퓨터를 재 부팅합니다. 그리고 Ctrl + R을 cmd를 입력하고 엔터를 치면 커맨드 창이 나오는데 거기서 Flutter를 입력해서 다음과 같은 결과가 나오면 제대로 환경변수가 설정이 된 것입니다.

 

 

플러터의 명령어를 사용하는 것까지 설정이 완료 되었다면 Flutter가 설치된 디렉토리까지 커맨드 창에서 이동을 하고 flutter doctor를 실행합니다.

 

“이 명령은 당신의 환경을 체크하고 Flutter 설치 상태에 대한 보고서를 보여줍니다. 출력된 내용을 꼼꼼히 보고 설치해야 할 다른 소프트웨어가 있는지 또는 수행해야 할 추가 작업이 있는지(굵은 글씨로 표시됨) 확인하세요”

 

라고 알려주고 있습니다.

 

[x]로 표시된 부분을 잘 살펴 봐야 합니다. 앞을 보시면 Android Studio를 다음의 https://developer.android.com/studio/index.html에서 설치하라고 알려주고 있습니다. 안드로이드 스튜디오를 설치하고 다시 flutter doctor로 다시 확인을 해 보는 것이 좋겠습니다.

 

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

플러터는 자체 안드로이드 개발환경을 사용하는 것이 아니라 안드로이드 전용 앱 개발툴 안드로이드 스튜디오를 사용을 합니다. 그리고 안드로이드 스튜디오에서 제공하는 에뮬레이터를 사용하기 때문에 별도로 안드로이드 스튜디오를 설치해 줘야 하는 것입니다.

 

안드로이드 디벨로퍼 사이트 (https://developer.android.com/studio)에서 다운로드를 하고 설치를 합니다. 최신 버전인 4.0.2 버전을 다운로드 했습니다. 

 

 

다운로드를 하면서 앞의 디벨로퍼 사이트를 스크롤 해 보면 다양한 안드로이드 스튜디오의 기능들을 살펴볼 수 있습니다. 이 중에서 우리가 가장 많이 사용하게 될 환경은 안드로이드 에뮬레이터가 될 것입니다.

 

그리고 실제로 안드로이드 폰에서 플러터로 개발한 애플리케이션을 테스트 하기 위해서는 Android 4.1 (API 16) 이상에서 동작하는 Android 기기가 필요합니다. 

안드로이드 스튜디오 시작

안드로이드 스튜디오의 설치가 완료되고 처음 시작이 될 때, “Import Android Studio Settings From...”이라는 창이 뜨는데 default로 선택이 되어 있는 “Do not import settings”를 선택하고 OK를 클릭합니다. 처음으로 안드로이드 스튜디오를 사용한다는 가정하에 설명을 할 것입니다.  

첫 시작에서 여러가지 물어보는 사항은 default로 두고 Next로 진행을 했습니다. 그러고 나면 안드로이드 개발에 필요한 에뮬레이터 등을 자동으로 다운로드 받아 설치를 합니다. 많은 양의 컴포넌트와 툴을 설치하기 때문에 꽤 오랜 시간이 소요됩니다. 중간에 Windows command 관련한 모듈을 설치할 때 설치 여부를 묻는데 OK를 눌러 설치를 하기 바랍니다.

 

설치 완료 후에 “Create New Project”를 선택하면 다음과 같이 프로젝트들을 선택할 수 있는 창이 뜨는 것을 볼 수 있습니다. “

 

“Bottom Navigation Activity”를 선택하고 Finish를 선택합니다. 프로젝트를 로딩하는데는 10분 이상의 시간이 소요되니 기다려 주시기 바랍니다.

 

폰에서 애플리케이션 실행

프로그램을 기기에서 실행을 시켜보기 위해서는 가지고 계신 안드로이드 기기에서  개발자 옵션과 USB 디버깅을 활성화 해야 합니다. 그런데 각 폰마다 옵션을 선택하는 방법이 다르므로 폰 제조사에 따라서 구글링을 통해 활성화 시키기 바랍니다. 제 경우에는 LG전자 V35 모델로 다음과 같이 설정을 했습니다. 

 

스마트폰에서 개발자 옵션을 켜기 위해서는 

설정→ 시스템→ 휴대폰 정보→ 소프트웨어정보

로 이동을 해서 빌드 번호를 8번 이상 계속 클릭해 주면 개발자 모드로 변경이 되었다는 토스트(메시지가 잠시 떴다가 사라짐)를 볼 수 있습니다.

개발자 모드로 변경이 되고 난 후에는 시스템 메뉴에 다음의 두 번째 그림과 같이 개발자 옵션이 생성된 것을 볼 수 있습니다. 개발자 옵션을 허용해 주고 스크롤 해서 USB 디버깅을 설정해 줍니다. 처음 폰이 PC에 연결이 되면 다음의 맨 우측 그림과 같이 USB 디버깅의 허용을 묻는데 허용을 클릭해 줍니다. 

 

그리고 나서 https://www.lge.co.kr/lgekor/download-center/downloadCenterList.do 에서 다음의 LG United Mobile Driver를 설치합니다. 스마트폰을 개발용으로 사용하기 위한 드라이버가 포함되어 있다고 합니다. 개발용으로 스마트폰을 설정해도 기존과 일반적인 용도로 사용할 때와 다른점은 크게 없습니다. 

 

 

드라이버 설치까지 끝이나면 폰을 컴퓨터의 USB 포트에 연결을 합니다. 그러면 안드로이드 스튜디오의 우측 중간 상단에 폰 이름이 뜨는 것을 볼 수 있습니다. 

 

 

앞의 그림에서 LGE LM-V350N이 제가 사용하는 폰 모델입니다. 그리고 폰 이름 다음의 실행 버튼을 클릭해 봅니다. 컴퓨터 성능 때문인지 원래 안드로이드 스튜디오가 시간이 오래 걸려서인지 약 3분 후에 폰에 다음과 같이 선택을 했었던 “Bottom Navigation Activity”가 뜨는 것을 확인 할 수 있었습니다.

 

 

에뮬레이터 설정 및 실행

앞에서 실제 폰에서 애플리케이션을 실행해 봤지만 항상 폰을 통하기 보다는 에뮬레이터를 많이 사용하게 됩니다. 여기서는 에뮬레이터를 설정해 보도록 하겠습니다.

 Tools > Android > AVD Manager에서 에뮬레이터를 만들것입니다. 

 

 

화면 사이즈가 가장 큰 Pixel 3XL을 선택을 했고 Next를 클릭합니다. 스마트 폰의 화면이 점점 더 커지는 추세라 가장 큰 화면 사이즈의 에뮬레이터를 선택했습니다. 원한다면 추가로 다양한 안드로이드 폰 에뮬레이터를 만들 수 있고 만들어 놓은 각각의 에뮬레이터에서 우리가 만든 앱을 실행해 볼 수 있습니다.

 

앞의 시스템 이미지 중에서 폰과 동일한 안드로이드 버전을 선택합니다. 그런데 시스템 이미지가 없기 때문에 Download를 클릭하면 우측과 같은 창이 뜹니다. OK를 클릭해 주고 다운로드를 받아 설치를 합니다. 다음은 계속 default로 설정을 합니다.

 

설정이 끝났다면 안드로이드 스튜디오의 우측 중간 상단에서 에뮬레이터를 선택합니다. 기존의 폰 이름이 있는 실행 기기 선택창에서 기기 대신에 지금 만든 에뮬레이터로 변경을 하고 실행을 시켜봅니다. 다음과 같이 실제 폰에서 실행이 되었던 애플리케이션이 그대로 에뮬레이터에서 실행이 됨을 볼 수 있습니다.

개발을 할 때에는 에뮬레이터를 끄지 말고 그대로 남겨 두면 개발하던 애플리케이션을 보다 빨리 실행을 시켜 볼 수 있습니다.

 

비주얼 스튜디오 코드 설치

어느 유튜브를 봐도 비주얼 스튜디오 코드(VS코드)를 에디터로 사용을 하고 있습니다. 

https://code.visualstudio.com/에 접속을 하면 스테이블 버전을 다운로드 받아 설치를 할 수 있습니다. 설치가 완료되면 VS코드의 View→ Command Palette를 실행합니다. 검색창에 install을 입력하면 몇 개의 선택할 수 있는 아이템이 나타나는데 거기서 Extensions: Install Extensions을 선택합니다. VS코드의 좌측에서 Flutter를 입력하고 맨 위에 나타난 flutter를 설치해 주면 flutter의 개발 언어인 Dart 관련 사항도 같이 설치가 됩니다.

 

 

좌측에서 Install을 선택했을 때의 화면이며 설치되는 과정이 우측에 나타나고 우측 하단에 설정 관련 사항이 팝업으로 나타납니다. 

 

버전 컨트롤위한 Git 설치

https://git-scm.com/download/win을 접속해서 컴퓨터 OS에 맞는 파일을 선택해서 설치를 합니다. 설치 중에는 기본 에디터를 비주얼 스튜디오 코드로 다음과 같이 변경을 해 줍니다. 그 외에는 Default로 선정이 되어 있는 항목을 그대로 뒀습니다. 다만  “Use Git from the Windows Command Prompt” 옵션은 꼭 선택하라고 플러터 설치 사이트에서 이야기를 하니 설치 중에 살펴보시기 바랍니다. 제가 설치한 버전은 default로 설정이 되어 있습니다.

Git은 소스코드를 저장하고 관리하는 툴입니다. 회사에서는 Git 서버를 사용하는데 개인적인 용도로 사용을 하기 위해서 서버를 설정하는 것보다는 무료 git 서비스를 해주는 gitHub를 많이 이용합니다.

 

 

 

Git의 설치를 마쳤습니다. 단축키 Ctrl + R을 누르고 cmd를 입력해서 커맨드 창을 엽니다. 그리고 git을 입력해서 오류가 나타나지 않고 다음과 같은 결과가 나타난다면 플러터 설치에서 원하는 대로 설치가 된 것입니다.

 

 

이로서 플러터로 앱을 개발하기 위한 환경이 모두 갖춰졌습니다. 환경은 갖추어졌지만 프로그래밍에 대한 컨셉을 이해하는 것이 중요합니다. 처음 프로그램을 개발하시는 분들이 무턱대고 따라하실 수는 있지만 프로그래밍의 컨셉을 조금만 더 이해를 하면 재미있게 개발에 임할 수 있습니다. 그래서 단편 소설을 다음과 같이 준비했습니다.