플러터 - 윈도우에서 개발 환경 만들기

본 글은 [Do it! 깡샘의 플러터&다트 프로그래밍] 의 내용을 발췌한 것입니다.

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

 

플러터로 만든 앱을 실행해 보려면 안드로이드 가상 기기(이하 AVD)나 iOS 시뮬레이터를 이용해야 합니다. AVD는 윈도우든 macOS든 상관없지만, iOS 시뮬레이터는 macOS에서만 실행할 수 있습니다.
먼저 윈도우에서 플러터 개발 환경을 어떻게 만드는지 알아보고, 이어서 다음 절에서는 macOS에서 개발 환경을 만들 때 윈도우와 차이 나는 부분을 위주로 정리해 보겠습니다.

 

플러터 SDK 내려받기
플러터로 앱을 개발하려면 플러터 SDK를 설치해야 합니다. 플러터 SDK는 플러터 개발자 사이트(flutter.dev)에서 내려받을 수 있습니다.

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

 

 

플러터 개발자 사이트에 접속한 후 오른쪽 위에 있는 <Get started>를 클릭하면 SDK를 내려받을 수 있는 페이지로 이동합니다. 여기서 내 컴퓨터에 설치된 운영체제를 선택합니다. 그리고 이어지는 화면에서 중간에 설치 파일을 내려받는 버튼을 클릭합니다. 그러면 최신 버전의 플러터 SDK를 내려받습니다. 플러터 SDK 설치 파일을 내려받았으면 적절한 디렉터리에 압축을 풉니다. 이때 한글이 포함되었거나 관리자 권한이 필요한 디렉터리는 피하는 것이 좋습니다.

 

SDK 경로 설정하기
안드로이드 스튜디오 같은 전문 도구에서 플러터를 개발하면 그래픽 사용자 인터페이스를 이용해 빌드와 실행 등 대부분의 작업을 마우스 클릭으로 할 수 있습니다. 그런데 명령 프롬프트에서 플러터 SDK가 제공하는 명령어를 직접 작성해서 실행해야 할 때도 종종 있습니다. 따라서 플러터 SDK의 bin 디렉터리가 있는 경로를 시스템이 인식할 수 있도록 설정해 주어야 합니다.

윈도우 작업 표시줄에 있는 검색 창에서 ‘계정의 환경 변수 편집’을 입력한 후 Enter를 눌러 환경 변수 창을 실행합니다. 변수 목록에서 Path를 더블클릭하면 오른쪽 그림과 같은 편집 창이 열립니다. 여기서 플러터 SDK가 설치된 곳의 bin 디렉터리를 추가합니다. 그리고 열려 있는 모든 창에서 <확인>을 눌러 환경 변수 편집을 마칩니다.

 

안드로이드 스튜디오 설치하기
안드로이드 스튜디오는 안드로이드 개발자 사이트(developer.android.com)에서 내려받을 수 있습니다. 안드로이드 개발자 사이트의 메뉴 가운데 [Android Studio]를 클릭한 후 다운로드 페이지에서 <Download Android Studio>를 클릭해 설치 파일(.exe)을 내려받습니다.

 

설치 파일을 내려받았으면 실행합니다. 설치 과정은 기본값을 유지한 채 <Next>나 <Install>을 클릭하면 됩니다. 마지막 설치 완료 화면에서 [Start Android Studio] 체크 박스가 선택된 상태로 <Finish>를 클릭합니다.

 

안드로이드 스튜디오를 처음 실행하면 다음 그림처럼 기존 설정을 불러오는 창이 실행됩니다. 여기서 [Do not import settings]를 선택하고 <OK>를 클릭합니다.

 

그러면 안드로이드 스튜디오 설정 마법사가 시작됩니다. 먼저 다음 그림처럼 안드로이드 스튜디오를 개선하는 데 필요한 데이터를 구글에 전달할 것인지 묻는 화면이 나옵니다. 여기서 원하는 버튼을 클릭하면 되는데, 필자는 [Don't send]를 클릭해 구글에 데이터를 전달하지 않도록 했습니다.

 

그다음 설정 작업은 기본값으로 진행합니다. 그러면 안드로이드 스튜디오 사용자가 주로 설정하는 옵션으로 설치됩니다.

 

안드로이드 스튜디오 설정 마법사의 마지막 단계는 라이선스에 동의하는 것입니다. 다음 화면이 나오면 왼쪽의 라이선스 목록에서 각 항목을 선택해 [Accept]를 클릭합니다. 그러면 <Finish>가 활성화되는데 이 버튼을 클릭하면 설정을 마치고 안드로이드 스튜디오가 실행됩니다.

 

플러터 플러그인 설치하기
안드로이드 스튜디오에서 플러터 프로젝트를 만들려면 플러터 플러그인을 설치해야 합니다. 안드로이드 스튜디오가 실행되면 다음과 같은 시작 화면이 나오는데 여기서 [Plugins]를 클릭하고 검색 창에 ‘flutter’를 입력합니다. 목록에서 ‘Flutter’라는 이름의 플러그인을 찾은 후 <Install>을 클릭합니다.

 

플러그인을 설치할 때 ‘Third-Party Plugins Privacy Note’라는 창이 나오면 <Accept>를 클릭하고, 다트Dart 플러그인까지 함께 설치할지를 묻는 창이 나오면 <Install>을 클릭합니다. 플러터 프로젝트는 다트 언어로 작성합니다.
설치를 마치면 플러터 플러그인에 <Restart IDE>가 나타납니다. 이 버튼을 클릭해 안드로이드 스튜디오를 다시 시작하면 플러터 플러그인이 적용됩니다.

 

플러터 프로젝트 생성하기
플러터 플러그인까지 설치했으면 이제 플러터 프로젝트를 만들 수 있습니다. 안드로이드 스튜디오 시작 화면에서 [Projects]를 클릭하고 [New Flutter Project]를 클릭합니다.

 

플러터 프로젝트를 만들면 가장 먼저 플러터 SDK 위치를 지정해야 합니다. 새 프로젝트 창의 왼쪽 메뉴에서 [Flutter]를 선택하고 플러터 SDK가 있는 위치를 지정합니다. 앞서 1단계에서 내려받아 압축을 해제한 플러터 SDK 경로를 지정한 후 <Next>를 클릭합니다.

 

그다음 화면에서 프로젝트를 만드는 데 필요한 정보를 입력합니다. 여기서는 프로젝트 이름을 ‘flutter_lab’으로 입력하고 플랫폼에서 [Android]와 [iOS]만 선택한 후 나머지는 해제합니다. 그리고<Finish>를 클릭합니다.

 

플러터 프로젝트를 만들 때 입력하는 정보는 다음과 같습니다.

•Project name: 프로젝트 이름으로 알파벳 소문자와 밑줄만 입력할 수 있습니다.
•Project location: 프로젝트를 저장할 위치입니다. 기본 위치 외에 변경할 수 있습니다.
•Description: 프로젝트를 설명하는 글을 작성합니다.
• Project type: 프로젝트 유형으로 Application, Plugin, Package, Module 가운데 하나를 선택할 수 있습니다. 모바일 앱을 만들 목적이라면 Application을 선택합니다.
• Organization: 개발사를 고유하게 식별할 수 있는 ID를 입력합니다. 일반적으로 도메인을 역순으로 나열합니다.
•Android language: 안드로이드 네이티브 코드의 기본 언어를 선택합니다.
•iOS language: iOS 네이티브 코드의 기본 언어를 선택합니다.
•Platforms: 앱이 동작할 플랫폼을 선택합니다.

프로젝트 이름에는 알파벳 소문자와 밑줄만 입력할 수 있습니다. 이는 이후에 나오는 다트 파일명도 마찬가지인데 다트 파일명에는 알파벳 대문자를 입력할 수 있지만 소문자와 밑줄로만 작성하는 것이 좋습니다.
플랫폼 옵션에서 [Android], [iOS]를 선택하면 안드로이드와 iOS 프로젝트를 위한 구성이 포함됩니다. 또한 [Web]이나 플랫폼별 구성을 포함할 수도 있지만 이 책에서는 모바일 앱만 개발하므로 생략합니다.

 

안드로이드 가상 기기(AVD) 만들기
프로젝트가 만들어지면 안드로이드 스튜디오가 열립니다. 이제 AVD를 만들고 플러터 앱을 실행해 보겠습니다. AVD는 Android Virtual Device의 줄임말로 안드로이드 에뮬레이터를 말합니다.
AVD를 실행하려면 먼저 개발자 컴퓨터에 Android Emulator Hypervisor Driver나 Intel x86 Emulator Accelerator - HAXM 같은 SDK 도구를 설치해야 합니다. 전자인 에뮬레이터 드라이버는 AMD CPU가 탑재된 컴퓨터에, 후자인 에뮬레이터 가속기는 Intel CPU가 탑재된 컴퓨터에 설치해야 합니다. 보통은 안드로이드 스튜디오를 설치할 때 함께 설치되지만 만약 설치되지 않았다면 직접 설치합니다.
에뮬레이터 드라이버나 가속기가 제대로 설치됐는지 확인하려면 SDK 관리자를 실행해 보면 됩니다. 안드로이드 스튜디오의 오른쪽 위에 있는 아이콘 모음에서 SDK Manager()를 클릭합니다.

 

SDK 관리자에서 위쪽에 [SDK Platform], [SDK Tools], [SDK Update Sites]라는 탭이 보이는데, 이 가운데 [SDK Tools]를 클릭하면 다음과 같은 화면이 나옵니다. 여기서 각 CPU에 맞는 도구가 설치되었는지 확인할 수 있습니다. 필자의 컴퓨터는 Intel CPU이므로 HAXM이 설치되었습니다. 만약 설치되지 않았다면 해당 도구의 체크 박스를 선택하고 <Apply>를 클릭해 설치합니다.

 

이제 안드로이드 스튜디오에서 AVD를 구성하고 실행해 보겠습니다. AVD 구성은 장치 관리자에서 합니다. 위쪽 아이콘 모음에서 를 클릭하거나 오른쪽 탭에서 [Device Manager]를 클릭합니다. 다음처럼 장치 관리자 창에 아무것도 없으면 <Create device>를 클릭합니다.

 

가상 기기 구성 창이 실행되면 하드웨어를 선택하는 화면이 나오는데 적절한 장치를 선택하고 <Next>를 클릭합니다. 필자는 기본인 [Pixel 2]를 선택했습니다.

 

그다음으로 AVD에 탑재할 시스템 이미지를 선택해야 하는데, 이 선택에 따라 AVD를 몇 버전의 안드로이드폰으로 설정할지가 결정됩니다. 시스템 이미지 목록에서 원하는 버전을 선택합니다. 만약 원하는 버전이 설치되지 않았다면 [Download]를 클릭해 설치한 후 선택합니다. 필자는 [x86 Image] 탭에서 API 레벨 33을 선택했습니다. <Next>를 클릭합니다.

 

그다음 화면에서는 AVD 이름을 비롯해 기타 설정을 할 수 있는데 기본값으로 <Finish>를 클릭해 AVD 만들기를 완료합니다.

 

AVD를 만들었으면 오른쪽 그림처럼 장치 관리자 목록에 나타납니다. 여기서 오른쪽 [Actions] 그룹에 있는 실행 아이콘()을 클릭해 에뮬레이터를 실행합니다. 에뮬레이터가 보이는 창의 크기는 오른쪽 아래에 나타나는 도구를 이용해 조절할 수 있습니다.

 

플러터 앱 실행하기
에뮬레이터를 구동했으면 이제 플러터 프로젝트를 에뮬레이터에 설치해 실행할 수 있습니다. 안드로이드 스튜디오의 위쪽에는 앱을 실행할 장치를 고르는 부분이 있습니다. 여기서 에뮬레이터를 선택하고 그 오른쪽에서 실행할 다트 파일을 선택합니다. 그런 다음 (이하 실행 버튼)을 클릭합니다.

 

이렇게 앱을 실행하면 에뮬레이터에 설치되어 자동으로 실행됩니다. 데모 앱은 플러스 버튼을 클릭하면 화면의 숫자가 올라가는 간단한 프로그램입니다. 만약 실행을 종료할 때는 를 누릅니다.

 

핫 리로드 테스트하기
핫 리로드hot reload란 처음에 한 번만 앱을 실행해 놓으면 소스 코드가 변경될 때 자동으로 반영되는 기능입니다. 처음 실행할 때는 앱을 빌드하고 설치하느라 시간이 걸리지만, 이후에는 핫 리로드가 동작해 빠르게 테스트할 수 있습니다.
기본으로 작성된 코드를 수정해 핫 리로드 기능을 테스트해 보겠습니다. 에뮬레이터에 데모 앱을 실행하고 프로젝트 창에서 lib 디렉터리에 있는 main.dart 파일을 엽니다. main.dart 파일에 작성된 코드의 의미는 02장에서 살펴보기로 하고, 여기에서는 코드 중간에 있는 'You have pushed the button this many times:'라는 문자열을 'HelloWorld'로 수정한 후에 저장합니다. 에뮬레이터에 앱이 실행되고 있었다면 파일을 저장하는 순간 자동으로 핫 리로드 기능이 동작해 바뀐 코드가 적용되는 것을 볼 수 있습니다.

 

return Scaffold(
	appBar: AppBar(
		title: Text(widget.title),
	),
	body: Center(
		child: Column(
			mainAxisAlignment: MainAxisAlignment.center,
			children: <Widget>[
				const Text(
					'HelloWorld',
				),
				Text(
					'$_counter',
					style: Theme.of(context).textTheme.headline4,
				),
			],
		),
	),
	floatingActionButton: FloatingActionButton(
		onPressed: _incrementCounter,
		tooltip: 'Increment',
		child: const Icon(Icons.add),
	),
);

 

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.