[Flutter] (2) 애뮬리이터 설치하기, 앱 빌드 및 웹 빌드

이번 글에서는 Flutter에서 개발한 코드를 안드로이드 애뮬레이터, 실제 스마트폰, 그리고 웹에서 빌드해볼 수 있는 세팅을 진행 할 것이다. 

 

지난번 글에서 Flutter SDK를 설치하고 VScode에서 Flutter을 사용할 수 있도록 세팅을 해주는 과정을 진행했으니, 아직 이 세팅을 진행하지 못하였다면 아래 글을 따라서 설치와 세팅을 마치고 오길 바란다. 

 

https://hwanho-log.tistory.com/6

[Flutter] (1) 시작하기, SDK설치 및 VScode에서 Flutter세팅

 

첫번째 글에서 이야기 한 것 처럼, Flutter는 여러 플랫폼에서 사용될 수 있는 서비스를 한번에 개발하는 Cross-flatform 프레임워크이다. 

그런만큼 flutter는 여러가지 플랫폼에서 앱을 빌드할 수 있다. 이번 글에서는 크게 웹, 애뮬레이터, 스마트폰 앱, 이렇게 3가지 플랫폼에서 빌드를 진행해보려고 한다. 

 

1) 웹 빌드

 

웹 빌드는 여러 방법들 중 가장 간단하게 빌드를 진행할 수 있는 방법이다. 

우선 Command Palette를 열어주고, Flutter: Select Device를 입력하여 빌드할 플랫폼을 선택해준다. 

 

현재 우리는 웹 빌드를 하고 있으니, Chrome (web) 빌드를 선택해준다. 

 

 

이렇게 플랫폼을 선택해준 다음, F5 (디버깅 모드) 혹은 ctrl+F5 (노 디버깅 모드)를 눌러서 빌드를 시작 할 수 있다. 

아래 빌드는 Flutter에서 제공해주는 기본 빌드인데, 오른쪽 아래 + 버튼을 누르면 카운트 중간에 숫자가 올라가는 간단한 기능을 구현하고 있다. 

 

 

 

2) 애뮬레이터 앱 빌드

 

우선, 스마트폰 빌드와 애뮬레이터 빌드는 안드로이드를 기반으로 하기 때문에, 안드로이드 앱을 빌드해주는 안드로이드 스튜디오의 설치가 필수적으로 필요하다. 

 

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

 

Andriod Studio Setup Wizard에 따라서 Andriod Studio를 다운로드 해준다. 

다른 것들은 크게 문제가 되지 않지만, Install Type은 Standard로 해주는 것이 나중에 우리의 수고를 덜어주기 떄문에, Custom으로 모든 세팅을 맞출 자신이 없다면 Standard 타입으로 다운로드를 추천한다. 

 

 

다운로드가 모두 완료되면 아래와 같은 화면이 나올텐데, 이 화면에서 More Actions-SDK Manager을 클릭한다. 

 

 

이후 SDK Tools를 상단 바에서 선택하고, 아래의 Andriod SDK Command-line Tools (lastest)를 선택하여 Apply를 클릭하면 자동적으로 어떤 파일들이 다운로드 된다. 

 

 

이후 VScode를 한번 껏다가 킨 다음 command palette에서 다시한번 Flutter: Select Device를 선택해주면 아래와 같이 mobile emulator가 옵션에 있을 것 이다. 

 

해당 옵션을 클릭하면 아래 화면과 같이 안드로이드 애뮬레이터 하나가 실행되게 된다. 

 

 

나의 경우 아래와 같은 Can't use Java 19.0.1 and Gradle 7.5 to import Gradle project andriod 라는 에러 메세지가 떴었는데, 이는 아래에 있는 Upgrade Gradle to 7.4.2 버튼을 눌러서 Gradle을 업그레이드 해주고  "Gradle for Java"라는 extention을 하나 설치해주면 간단하게 해결 할 수 있다. 

 

 

만약 해당 문제를 무시하고 해결하지 않는다면 정상적으로 빌드가 진행되지 않을 것이다. 

 

이후 F5 (디버깅 모드) 혹은 ctrl+F5 (노 디버깅 모드)를 눌러서 빌드를 시작해주면, 아래와 같이 애뮬레이터에서 정상적으로 방금 웹에서 본 것과 비슷한 페이지가 빌드되는 것을 확인할 수 있다. 

 

 

3) 스마트폰 앱 빌드

 

스마트폰 앱 빌드는 우선적으로 위에서 한 애뮬레이터 빌드가 완료된 후에 진행 할 수 있다. 

(나는 갤럭시 핸드폰을 기준으로 설명하겠다)

 

우선 자신의 스마트폰에서 설정 -> 휴대전화 정보 -> 소프트웨어 정보에 들어가서 "빌드 번호"라는 버튼을 연타하고 비밀번호를 입력해주면 개발자 옵션이라는 것을 활성화 시킬 수 있다. 이는 "설정"탭 맨 아래에 ("휴대전화 정보" 아래) 위치해있다. 

 

이후 해당 개발자 옵션이라는 탭에 들어가서 아래로 내리다 보면 "USB 디버깅"이라는 옵션이 있는데, ,해당 옵션을 켜주면 된다. 

이후 컴퓨터에 본인의 핸드폰을 USB를 통하여 연결해주면 본인의 핸드폰에 "USB디버깅을 허용하시겠습니까?"라는 안내 메세지가 나올 것이다. 이 메세지에 동의를 하고 VScode에서 Flutter: Select Device 를 입력해 기기 목록을 확인해주면 아래와 같이 본인의 스마트폰 모델이 보이는 것을 알 수 있다. 

 

 

이제 본인의 핸드폰을 선택하고, F5 (디버깅 모드) 혹은 ctrl+F5 (노 디버깅 모드)를 눌러서 빌드를 해주면 본인의 핸드폰에서 같은 화면이 빌드되는 것을 확인할 수 있을 것이다. 

 

 

이렇게 자신이 개발한 Flutter코드를 빌드해볼 수 있는 방법 3가지에 대해서 정리해보았다. 

다음 글에서는 Flutter의 기본 구조에 대해서 알아보도록 하겠다. 

 

 

[Flutter] (3) Dart의 기본 구조 알아보기