Flutter 앱 시작하기 - Windows 10 + VS Code 환경

하이브리드 앱 시장에서 핫한 Flutter에 대해서 알게 되었습니다. 구글에서 만들었고 Dart라는 새로운 스크립트 언어를 통해 만들 수 있는 기술입니다. 본인은 C# 유저이기 때문에 마이크로소프트가 만든 자마린을 활용했지만, 사용 예시 및 안내가 부족했습니다. 거기에 환경 구축이 어려우며, 컴파일 시 에러가 많았습니다.

그런 상황에서 유튜브 탐방 중 Flutter를 보았고, 많은 예시 코드와 자료를 보면서 하이브리드 앱 공부를 시작하게 되었습니다.

 

가장 어려운 것이 환경 설정과 처음 앱을 만드는거 아니겠습니까?

그래서 Flutter 문서 보면서 처음 만든 하이브리드 앱! 시작해보도록 하겠습니다.

먼저 환경 설정 및 프로젝트 셋팅 정보를 보겠습니다.

제 컴퓨터는 윈도우 노트북이며, Windows 10 환경에서 진행했습니다.

Flutter 공식 문서로 가서 Install에 가면, 각 OS 별로 환경 설정을 따라갈 수 있습니다.

저는 윈도우이기 때문에 윈도우로 가보겠습니다. 크롬 OS도 눈에 띄는군요!

공식문서에서는 아래와 같은 요구사항을 제시합니다.

1. Windows 7 SP 1 이상 버전
2. 디스크 공간 400MB 이상
3. Windows PowerShell 5.0 이상 설치
4. Windows 버전 Git 설치 (2.x 이상)

위 조건을 충족 시킨 뒤, Git 명령어를 통해 Flutter SDK를 설치해봅시다.

 

git clone -b stable https://github.com/flutter/flutter.git

 

설치 경로를 지정할 때 주의 사항은 C:\Program Files에 설치하면 안 됩니다. 다른 곳에 설치하시는 것을 권장합니다. (예시 → C:\src\flutter) SDK 설치이기 때문에 C 드라이브에 설치하는 것이 좋다고 생각됩니다.

Git Clone까지 완료하셨으면, 설치한 곳에서 flutter_console.bat를 실행합니다.

그러면 flutter command가 열리게 됩니다.

 

자, 그러면 이제 시스템에 환경설정(Path)를 추가해 봅시다.

Windows 10 기준으로 내컴퓨터 오른쪽 클릭 -> 속성을 누릅니다.

그리고 아래 순서대로 고급 시스템 설정 → 환경변수를 누릅니다.

그리고 나서 시스템 변수에 Path에 아래와 같이 링크를 추가합니다.

그리고 나서 모든 창을 종료한 뒤 다시 windows console를 열어줍니다.

flutter 설치 경로로 이동해서 아래와 같이 입력합니다.

 

flutter doctor

 

해당 명령어는 현재 flutter 설치를 위한 상태를 보여주는 명령어입니다.

이 명령어를 통해 현재 필요한 설치 파일이 무엇인지 보여주며, 제대로 설치되었는지 검증해 줍니다.

 

추가 정보) flutter 툴은 구글 analytics로 정보를 전송합니다. 이 기능을 원하지 않으시다면 아래 코드를 입력해 주세요.

flutter config —no-analytics

 

여기까지 왔으면 아마도 안드로이드 스튜디오가 없다고 나올 것입니다. 물론 기존에 안드로이 개발자라면 해당 부분은 넘어가셔도 됩니다. 없으신 분들은 아래 방법을 참고하세요!

 

먼저 안드로이드 스튜디오를 다운로드합니다. 안드로이드 스튜디오 설치법은 따로 설명드리지 않습니다! 안드로이드 스튜디오를 설치하는 이유는 가상 디바이스 환경을 구축하기 위함입니다. 그래서 테스트용 안드로이드 기기가 있다면, flutter devices 명령어를 통해 기기와 연결하여 테스트할 수 있습니다. 하지만 테스트 기기가 없다면 안드로이드 스튜디오를 설치해야 합니다.

 

설치가 완료되었다면, 가상 디바이스를 설치합시다.

안드로이드 스튜디오를 열어서 Tools > AVD Manager를 선택하고 Create Virtural Device를 선택합니다. 기존에 있는 것은 무시하고 Flutter용 Device를 만들어 봅시다.

설치 시 주의 사항으로는 가장 최신 Android SDK를 설치하게 되면 빌드가 안될 수 있습니다. 저도 그 문제로 빌드가 안되었는데, 한 단계 밑인 Pie버전(API Level 28)을 설치하고 문제없이 실행되었습니다.

 

가상 디바이스를 설치했다면 다음으로 넘어갑니다.

제가 사용 중인 에디터는 VSCode입니다. VSCode는 다양한 언어 및 플랫폼을 지원하고 있습니다. 그중 Flutter도 지원합니다. VSCode 기준으로 설치해야 할 Plugin을 알려드리겠습니다.

 

VSCode에서 View → Command Palette... 를 선택합니다.

그다음 Extentions: Install Extentions. 을 입력합니다.

사실 이 방법 말고도 Extentions을 설치하는 메뉴를 누르면 됩니다.

위를 보시면 하얀색으로 활성화되어 있는 아이콘입니다.

그다음 검색 창에 flutter를 입력합니다. 그리고 나오는 Flutter를 설치하시면 Dart 설치를 묻습니다. 함께 설치해서 VSCode에서 빌드할 수 있는 환경을 구축합니다.

 

그다음 위에서 사용한 Doctor를 VSCode에서 실행하기 위해 View → Command Palette... 를 선택합니다. 그리고 Flutter:Run FlutterDoctor를 입력 후 엔터를 칩니다. 그러면 Output(출력)에 아까와 같은 상태 값들이 출력됩니다.

이제 테스트용 앱을 만들어 봅시다. VSCode에서 Command 창을 열고 Flutter: New Project를 입력합니다. 프로젝트 명을 임의로 지은 다음 엔터를 칩니다. 그러면 자동으로 Flutter 프로젝트가 생성됩니다.

오른쪽 아래에 Status 창을 보면 이렇게 나올 겁니다.

가운데를 보시면 Dart 옆에 Flutter가 있고, Android SDK가 있습니다. 미리 설정을 하지 않았다면 이 부분이 None으로 출력됩니다. None으로 출력된다면 선택 후 앞서 설치한 가상 Device를 누르면 위와 같이 세팅이 완료됩니다.

혹시나 잘못 선택했을 때는 명령 팔레트에서 아래 명령어를 치시면 바꿀 수 있습니다.

 

Flutter: Launch Emulator

 

설정이 완료되었다면, F5를 눌러 Debugging을 시작합니다. Console에 상태가 출력이 되면서 가상 디바이스에 app이 실행됩니다.

이렇게 말이죠!!

축하합니다!! 이제 Flutter를 활용하여, 다양한 프로젝트를 진행할 수 있습니다.

끝내기 전에 Flutter의 가장 큰 장점을 보고 가시죠.

 

위에 보시면 'You Have pushed the button this many times.' 란 문장이 있습니다. 아 글자 좀 바꾸고 싶은데 이걸 바꾸면 또 빌드를 돌려야 할 것 같네요. 시간이 오래 걸리죠.. 하지만 Flutter는 조금 다릅니다.

 

Flutter는 코드를 바꾸고 저장하면 바로 app에 반영되는 Hot Reload 시스템을 도입했습니다. 여기까지 오신 분들은 main.drat 파일에서 위에 있는 문장을 조금 바꾸고 저장을 해봅니다. 그러면 바로 앱에 있는 문장도 따라 바뀌게 됩니다. 이 기능은 섬세한 UI 작업을 할 때, 엄청난 장점이 됩니다. 여러분도 하이브리드 앱으로 좋은 아이디어 펼치시길 바랍니다!

 

감사합니다.

 

※ https://www.youtube.com/watch?v=6gS0_s2K_gk → 가상 디바이스 설정 문제 해결법

요약 : HttpExcption: Connection closed before full header was received 에러 발생 시, 가상 디바이스를 Pixel 디바이스로 설정하시면 문제가 해결됩니다.