[Flutter #6] 첫번째 플러터 앱

첫 플러터 앱 실행해 보기

VS코드와 안드로이드 스튜디오에서 플러터 앱을 각각 만들 수 있습니다. 우리는 VS코드를 주로 사용을 할 것이지만 처음에는 두 가지 방법을 각각 이용해서 첫 플러터 앱을 만들어 보고 실행을 해 볼 것입니다. 우선 VS코드에서 만들어 보겠습니다. VS코드에서 View→ Palette를 선택하고 Flutter를 입력하면 다음 그림과 같이 “Flutter:New Project”가 나타납니다. 클릭을 하고 첫 애플리케이션 이름 myapp을 입력합니다.

 

 

애플리케이션을 저장할 폴더를 선택하라는 창이 나타납니다. 프로젝트를 저장할 위치로는 플러터가 설치된 폴더에  flutter_project를 만들었습니다. 그 경로는 C:\MyDev\flutter_project와 같습니다. 그러면 VS코드 우측 하단에 진행사항이 표시되면서 프로젝트 생성이 진행이 됩니다. 모든 프로젝트 관련 사항들이 만들어진 화면은 다음과 같습니다.

 

 

좌측에는 폴더와 파일들이 보이고 중앙에는 소스코드가 보입니다. 첫 프로그램이 자동으로 생성이 되었는데요. 화면의 하단을 보면 $cd . 그리고 $flutter run을 실행하면 애플리케이션이 실행이 된다는 메시지를 볼 수 있습니다.

 

하지만 그 위를 보면 문제점이 레포팅 되고 있습니다. 

 

[!] Connected device : is not available 

 

이라는 이슈가 있다는 문구가 보입니다. 에뮬레이터가 연결이 되지 않아서 생긴 문제입니다.

flutter doctor 명령어를 이용해 개발 환경을 체크해 봅니다. 살펴본 메시지는 OUTPUT에 나타난 메시지입니다. 그 오른쪽에 있는 TERMINAL이라는 탭으로 이동을 해서 flutter doctor 명령으로 어떤 문제가 있는지 확인을 해 보겠습니다. 

 

 

3개의 이슈 카테고리가 있다고 나옵니다. 우선 처음에 있는 느낌표를 보면 안드로이드 라이센스를 수락하지 않았다고 하는데 해결을 위해서는

 

flutter doctor --android-licenses

 

를 입력이 필요하다고 합니다. 명령을 입력하고 나면 라이센스에대한 안내가 나타나고 그 다음에는 항상 (y/N)로 라이센스에 대해 동의를 할 것이냐고 물어볼 것입니다. 그냥 Enter를 치면 대문자로 표시된 N(No)이 선택이 되기 때문에 꼭 y를 입력해 줘야 합니다. 이와 같이 라이센스를 확인하는 과정이 대여섯번 나타나는데 모두 y를 선택하면 

 

All SDK package licenses accepted

 

라는 메시지를 볼 수 있습니다. 확인을 위해서 flutter doctor를 입력해 보면 몇 개의 문제가 남았는지를 알 수 있습니다. 하나의 문제가 이어지는 문제와 연관이 있을 수 있기 때문에 문제 하나를 해결 할 때마다 flutter doctor를 이용해 잔여 이슈를 재 확인하는 과정을 거치도록 하는 것이 좋겠습니다. 저의 설치 과정과 같은 문제가 나타날 수도 있고 다른 문제가 나타날 가능성도 있기 때문에 꼭 하나의 이슈를 해결하고 나면 flutter doctor를 이용해 재 확인하도록 합니다.

두 개의 잔여 문제는 다음과 같습니다.

 

[!] Android Studio (version 4.0)

     X Flutter plugin not installed; this adds Flutter specific functionality.

     X Dart plugin not installed; this adds Dart specific functionality.

[!] Connected device

     ! No devices available

 

해결을 위해서는 안드로이드 스튜디오를 열어 File → Settings에서 Plugins를 선택해 Flutter를 검색합니다. 다음과 같은 화면이 나타나면 우측 상단의 Install을 선택해 설치를 합니다. 안드로이드 스튜디오가 플러터를 지원해야 하고, 플러터를 지원하는 안드로이드 스튜디오의 기능을 VS코드에서 불러서 사용할 것이기 때문에 이런 문제가 나타난 것으로 생각됩니다. VS코드에서 개발을 하지만 엄밀히 말하면 VS코드는 에디터입니다. 

 

 

다시 확인을 해 보면 남은 이슈는 디바이스가 없다는 것 하나만 있다는 것을 알 수 있습니다.

 

[!] Connected device

     ! No devices available

안드로이드 스튜디오를 재시작하고 file → New 메뉴에서 New Flutter Project를 선택하고 보면 Flutter SDK가 다음의 그림처럼 공란으로 되어 있는 것을 볼 수 있습니다. 우리가 설치한 Flutter의 경로를 설정하고 프로젝트를 만듭니다. 

 

 

안드로이드 스튜디오가 아니라 VS코드에서 디바이스나 에뮬레이터가 없다고 에러가 나면 안드로이드 스튜디오에서 에뮬레이터를 실행하면 해결이 되기도 합니다만, 기본적으로 VS코드에서 실행을 하면 자동적으로 에뮬레이터가 실행이 됩니다. 

 

안드로이드 스튜디오에서 File → New → New Flutter Project를 선택해서 빌드를 하고 오류가 없다면 다음과 같이 실행이 될 것입니다. 그리고 에디터 창에서 Title을 변경하면 바로 우측에 별도의 컴파일 없이 나타난다. 코드 변경이 바로 바로 앱에 반영이 되어 나타나는  핫 로디드 기능이라고 합니다. 

안드로이드 스튜디오에서는 플러터 첫 앱이 에뮬레이터에서 잘 실행되는 것을 확인했습니다. 같은 방법으로 앞서 비주얼 스튜디오 코드에서 만든 프로젝트를 실행해 보겠습니다. 

 

 

비주얼 스튜디오에서 나오는 에러 메시지는 다음과 같이 나타나는데 잘 보면 build-tools의 버전이 28.0.3입니다. 왜 툴의 버전을 의심하게 되었는가 하면  

소스코드는 자동 생성 된 것이기 때문에 코드에 오류가 있는 것은 아닐 것이라 생각을 했습니다. 

수정은 안드로이드 스튜디오에서 합니다. 상단 메뉴의 Tools → SDK Manager를 선택합니다. 그리고 좌측에서 Appearance → System Settings → Android SDK를 선택하고 우측의 테이블 위해서 SDK Tools를 선택합니다. 상세 내역을 보기 위해서 우측 하단의 Show Package Details를 클릭하고 Android SDK Build-Tools에서 체크되어 있는 28.0.3를 해제합니다.

그리고 비주얼 스튜디오 코드의 Terminal에서 빌드를 하면 문제 없이 잘 빌드가 되는 것을 알 수 있습니다. 참고로 선택 해제된 28.0.3은 빌드를 하는 순간 다시 설치가 되었습니다. 이 문제는 설치상의 문제로 보여집니다.  

 

이로써 안드로이드 스튜디오와 비주얼 스튜디오 코드에서 각각 플러터 애플리케이션을 만들었습니다. 

 

이로서 스텝 0에서 계획을 했었던 내용을 모두 다뤘습니다. 이번 장에서는 프로그래밍에 대한 기본 컨셉을 이해해 보려고 노력을 했습니다. 스텝2에서는 구글 디벨로퍼에도 올라와 있고 http://flutter-ko.dev/ 에서도 첫 Flutter 애플리케이션으로 소개하고 있는 애플리케이션 제작 방법을 소개할 것입니다.  드디어 플러터에서 사용을 하는 Dart라는 언어로 실제 코딩을 할 것입니다.

 

예전에 윈도우에서 하나의 언어에 대한 개발 환경을 꾸미기 위해서는 setup.exe을 실행하는 것이 전부였으나 개발 환경이 다양하고 필요한 라이브러리나 많아 설치도 꽤 힘들었습니다. 하지만 전에 프로그래밍 언어를 배워본 사람이라면 스텝1를 마치고 나면 생각만큼 어렵지 않은데 하는 생각을 할 수도 있을 것 같다는 생각이 듭니다. 

 

앞에서 본 소설에 빗대어 생각하자면 이제 마술사가 마술을 보여줄 스테이지가 완성 되었다고 보면 되겠습니다.