플러터 개발 준비

 

이번 시간에는 플러터의 장점과 특징을 알아보고, 안드로이드 스튜디오를 이용하여 앱 개발 환경을 준비한다. 플러터를 올바르게 이해하고 개발환경을 준비해보자. 

01-1 플러터에 주목하는 이유

플러터를 상징하는 3가지 특징이라면 높은 개발 효율, 역동적이고 유연한 사용자 인터페이스, 네이티브 앱 만큼 빠른 속도를 들 수 있다.

구글이 개발한 오픈 소스 크로스 플랫폼 프레임워크인 플러터(Flutter)는 하나의 코드로 안드로이드와 iOS 모두를 보기 좋고 빠르게 개발할 수 있다. 추가로 웹, 데스크톱, 임베디드까지 지원한다. 즉, 하나의 코드로 안드로이드, iOS, 윈도우, 맥OS, 리눅스, 웹 애플리케이션 모두를 개발할 수 있다.

다음은 사람들이 플러터로 개발하는 이유 3가지이다.

높은 개발 효율

플러터를 이용해 코드를 작성하면 안드로이드와 iOS 모바일 앱 모두 한 번에 개발할 수 있어서 효율적이다. 이렇게 개발한 앱은 어떤 운영체제에서도 똑같은 UI/UX를 제공한다. 또한 플러터의 핫 리로드 기능을 통해 개발자가 UI를 실시간으로 확인하고 수정하여 앱의 상태를 유지하면서 코드를 변경하는 등 생산성을 높일 수 있다.

역동적이고 유연한 사용자 인터페이스

플러터는 다양한 위젯을 제공하므로 사용자 맞춤형 앱을 쉽게 만들 수 있다. 플러터의 위젯을 활용하면 iOS에서 구글의 디자인을, 안드로이드에서 iOS 스타일의 앱을 개발할 수 있는 장점이 있다.

플러터에서는 iOS스타일 위젯을 쿠퍼티노(cupertino) 스타일이라고 한다.

네이티브 앱 만큼 빠른 속도

플러터는 전체 화면을 그릴 때 스키아(skia)엔진을 사용한다. 그리고 플러터 3.10 버전에서는 임펠러(Impeller)엔진을 새로 발표하여 더 빠르게 렌더링할 수 있는 환경을 만들었다.

플러터의 최종 목표는 플러터의 SDK를 모바일 앱에서 웹으로 확장함에따라 플러터를 이용해 웹과 데스크톱 앱까지 만드는 것이다. 웹 지원은 상당히 안정화되었으며 실제로도 많은 앱에서 사용한다고 한다. 또한 “구글I/O 2023”에서는 게임 엔진을 선보이면서 플러터로 게임을 만들 수 있다는 것도 보여주었다. 이제는 전 세계적으로 RN(React Native)보다 플러터(Flutter)의 관심도가 더 높아졌고, 이번 기회를 통해 플러터 공부를 본격적으로 시작해보려 한다.

 

01-2 플러터 개발 환경 준비하기

플러터를 이용해 모바일 개발을 하려면 VS Code, IntelliJ, Android Studio 등의 IDE가 필요하며, 맥과 윈도우 모두 설치가 가능하다. 이번 시간에는 안드로이드 스튜디오로 진행해보겠다.

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

안드로이드 스튜디오 웹 사이트에서 Android 스튜디오 Panda 4를 설치한다.

`

약관에 동의하여 설치를 진행한다.

모든 설정을 기본값으로 두고 [Next] → [Install]을 차례로 클릭한다.

플러터 앱 개발을 위해서 Plugin은 설치해야 한다. [Plugins] 에서 Flutter를 검색하여 [Install] 해준다.

안드로이드 스튜디오를 다시 실행해서 다음과 같이 나오면, 준비가 완료된 것이다.

플러터 SDK 설치하기

SDK란, Software Development Kit로 프로그램을 만들 때 도움이 되는 개발 도구를 모은 것이다. 플러터 SDK는 네이티브 앱 수준의 성능을 제공하고 하나의 코드로 안드로이드와 iOS를 동시에 지원한다.

 

윈도우에 설치하기

플러터 설치 사이트에서 [windows]를 선택하여 [flutter_windows_3.44.0-stable.zip]을 눌러 설치한다.

설치된 플러터 SDK파일을 압축해제한다. 나는 D:\에 압축을 해제하였다.

이제 환경변수에 해당 경로를 추가한다. [시스템 환경 변수 편집] - [고급] - [환경 변수] - [Path]에 SDK의 bin폴더 위치를 추가한다.

맥에 설치하기

플러터 설치 사이트에서 [macOS]를 선택한다. 인텔 프로세서, 애플 실리콘 M 시리즈 등 자신의 CPU에 맞는 SDK를 설치한다.

내려받은 플러터 SDK 설치 파일의 압축을 해제하고 안드로이드 스튜디오의 [SDK Manager] → [Languages & Frameworks] → [Flutter] 항목에 위치를 지정한다. 여기에서는 ~/Documents에 압축을 해제하였다.

터미널에서 flutter 명령어를 사용하려면 PATH에 경로를 추가해야 한다. 터미널을 열고 ~/.zshenv 에 플러터 SDK의 bin 디렉터리 위치를 추가하고 터미널을 다시 시작한다. 환경 설정이 끝나면 flutter 명령어를 사용할 수 있다.

export PATH=$HOME/Documents/flutter/bin:$PATH

01-3 플러터 프로젝트 시작하기

첫 번째 플러터 프로젝트를 시작해보자. 플러터는 새 프로젝트를 시작하면 기본 구조를 갖춘 데모 앱을 만들어준다.

플러터 프로젝트 생성하기

안드로이드 스튜디오를 실행하고 [New Flutter Project]를 선택한다.

다음 New Project 창이 나타나면 [Flutter]를 선택하고 Next한다. 이때 플러터 SDK 경로도 함께 지정해준다.

다음 화면에서 프로젝트 이름을 설정하고, 프로젝트를 저장할 위치도 함께 설정해준다. 프로젝트 설명을 포함하여 나머지 값들은 기본값 그대로 둔다. 모두 입력했으면 Create버튼을 클릭한다.

프로젝트가 생성되면 다음과 같이 나온다.

이제 플러터 앱을 개발할 준비를 마쳤다.

에뮬레이터에서 앱 실행하기

에뮬레이터란 앱을 실행할 수 있는 가상 장치로, 이를 사용하면 스마트폰에서 실행하는 것처럼 컴퓨터에서 앱을 쉽게 테스트할 수 있다. 또는 USB케이블로 스마트폰을 컴퓨터에 직접 연결해서 테스트를 진행할 수도 있다.

안드로이드 스튜디오에서 오른쪽 끝에 있는 가상 장치 관리자 아이콘을 클릭하여 +버튼을 클릭해 새로운 장치를 생성한다.

Create Virtual Device를 눌러 목록에서 원하는 기종을 선택하여 설치한다.

다음은 안드로이드 가상 장치에 설치할 시스템 이미지인 안드로이드 SDK를 설치한다. 다음의 항목에서 선택하여 설치한다. 이후 Finish를 클릭한다.

이로써 안드로이드 가상 장치를 만드는 과정도 끝이났다. AVD 관리자에서 실행 버튼을 눌러 에뮬레이터를 실행할 수 있다.

실행중인 에뮬레이터를 선택하여 main.dart를 실행하면 설치된 가상 머신에서 해당 앱을 테스트해볼 수 있다.