플러터(Flutter) 시작하기 — (1) 개발 환경 구축

12 min readDec 16, 2019

이 글은 Sebastian Eschweiler의 Getting Started With Flutter — (1) Setting Up The Development Environment를 번역/의역한 글입니다. 오역이 있거나, 수정해야 할 부분이 있다면 Private Note를 남겨주세요.
글 중간에 개인적으로 공부한 내용이 추가되었을 수 있습니다.

플러터 시작하기 시리즈 목차

플러터 시작하기 — (1) 개발 환경 구축 👈
플러터 시작하기 — (2) 프로젝트 구조

플러터(Flutter)는 하나의 코드 베이스로 모바일, 웹 및 데스크탑 애플리케이션을 개발할 수 있는 구글의 UI 툴킷입니다. 플러터는 다트(Dart) 프로그래밍 언어에 의존하고 있으며, 다양한 타겟 플랫폼에 적용되는 애플리케이션을 개발하기 위한 컴파일러를 사용합니다.

이 튜토리얼 시리즈는 플러터를 시작하고자 하는 모든 사람들을 위한 강좌입니다. 플러터 애플리케이션을 개발하는 데 필요한 모든 단계를 자세히 다룰 예정이기 때문에, 사전 지식은 필요하지 않습니다. 첫 에피소드는 플러터와 다트를 위한 개발 환경을 구축하고, 여러분의 첫 플러터 앱을 실행하는 방법을 다룰 것입니다.

자, 이제 시작해볼까요?

플러터 SDK 다운로드 및 설치

첫 단계는 플러터 개발 환경을 구축하는 것입니다. 플러터 SDK는 다음의 플랫폼에서 설치 및 실행이 가능합니다:

윈도우
맥OS
리눅스

설치 과정은 여러분이 개발하고자 하는 플랫폼에 따라 다릅니다. 이 강좌에서는 macOS를 기준으로 설명할 것입니다. 하지만, 윈도우와 리눅스 환경에서 설치하는 방법은 다음 링크에 자세하게 나와있으니, 참고하세요: https://flutter.dev/docs/get-started/install (한글 문서)

맥OS에서 플러터 SDK를 설치하려면, 먼저 다음 링크를 통해 SDK를 다운로드 받아야 합니다: https://flutter.dev/docs/get-started/install/macos (한글 문서)

추가 내용:

원문에는 나와있지 않지만, 플러터 공식 문서에 의하면 SDK 설치를 위해 아래의 최소 요구 사항을 충족해야 합니다:

운영 체제: 맥OS 64-bit
저장 공간: 2.8 GB (IDE, 개발 도구 용량은 별도)
커맨드 라인 도구: bash, curl, git 2.x, mkdir, rm, unzip, which

커맨드 라인 도구의 대부분은 기본적으로 설치된 도구들이며, git 의 경우에는 설치했던 이력이 없으면 새로 설치해야할 수 있습니다.

git 의 설치 여부는 git --version 명령어를 통해 확인할 수 있습니다.

git --version 명령어를 통해 설치가 되어 있지 않다는 사실이 감지되면, 도구를 설치하라는 팝업 창이 뜹니다. 이 때 “설치” 버튼을 눌러 설치를 진행할 수 있습니다.

플러터 공식 한국어 개발자 문서 — 현재 공식적으로 번역 진행 중으로 보입니다.

flutter_macos_v1.9.1+hotfix.6-stable.zip 버튼을 클릭하여 최신 스테이블 버전의 플러터 SDK .ZIP 파일을 다운로드 합니다.

설치할 컴퓨터의 원하는 위치에서 플러터 SDK 파일을 압축 해제합니다. 예를 들어, 사용자 디렉토리(맥 파인더에서 집 아이콘이 그려진 사용자명 디렉토리) 안에 development라는 이름의 폴더를 생성하고 플러터 SDK를 해당 위치에 압축 해제할 수 있습니다:

$ cd ~
$ mkdir development
$ cd development
$ unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip

아래 스크린샷은 원문에는 없는 제 터미널을 캡쳐한 이미지입니다. 저는 기존에 사용 중이던 dev 라는 이름의 폴더가 있어서, mv 명령어로 해당 폴더로 압축 파일 이동 후 unzip 하였습니다. 이후 글 내용에서는 헷갈리지 않기 위해 원문과 같이 development 폴더를 사용한 것을 기준으로 설명할 것입니다.

압축을 해제하고 나면, 해당 폴더(이 글에서는 development 혹은 dev 폴더) 안에 flutter 라는 폴더가 생성되고 그 안에 플러터 SDK 파일들이 들어가 있습니다.

플러터 SDK를 PATH에 추가하기

설치가 완료되었다면, 이제 flutter 명령어를 경로에 관계 없이 실행할 수 있도록 만들기 위해, /flutter/bin 폴더를 PATH 변수에 추가해야 합니다. flutter 폴더의 상위 폴더, 즉 development 폴더 내에서 다음 명령어를 수행하여 PATH에 추가할 수 있습니다:

$ export PATH="$PATH:`pwd`/flutter/bin"

export 명령어는 현재 터미널 세션(창)에서만 PATH를 설정합니다. 이는 다른 터미널 세션을 열 경우, 위의 export 명령어를 다시 실행해야 한다는 것을 의미합니다.

PATH를 영구적으로 설정하기

위 명령어와 같이 일시적으로 PATH를 설정하는 것보다는 영구적으로 설정하여 모든 터미널 창에서 flutter 명령어를 사용할 수 있게 하는 것이 편할 것입니다. PATH를 영구적으로 설정하는 것은 아래 과정을 통해 가능합니다.

사용자 폴더 내의 .bash_profile 파일을 열어 다음 명령어를 하단에 추가하세요:

export PATH="$PATH:~/development/flutter/bin"

터미널을 재시작하면 flutter 명령어를 어느 경로에서든 실행할 수 있는 것을 확인할 수 있습니다:

flutter 명령어의 위치를 확인하기 위해 다음과 같이 which 명령어를 사용할 수 있습니다:

$ which flutter

위와 같이 명령어를 실행하면, 아래와 같이 flutter 명령어의 경로가 나타납니다:

Flutter Doctor

이제 flutter를 PATH에 추가했으니, 다양한 목적으로 flutter 명령어를 사용할 준비가 되었습니다. doctor 옵션을 통해 추가적인 dependency를 설치해야할지 여부를 확인할 수 있습니다

$ flutter doctor

추가 내용:

doctor 옵션 실행 시, macOS Catalina 버전을 사용하는 분들은 다음과 같은 경고 창이 뜰 수도 있습니다:

두 가지 해결 방법이 있습니다.

시스템 환경설정 > 보안 및 개인 정보 보호(Security & Privacy) > 일반 탭에서 하단부의 “확인 없이 허용” 클릭
아래 명령어를 터미널에 입력:

$ sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/libimobiledevice/idevice_id

에뮬레이터 설정

iOS 또는 안드로이드 플러터 앱을 개발할 때, 시스템에 각 환경에 맞는 에뮬레이터를 먼저 설정해야 합니다. 이 가상 모바일 기기(즉, 에뮬레이터)를 사용하여 개발한 앱을 쉽게 실행해볼 수 있습니다.

iOS

iOS 환경을 위한 플러터 앱을 개발하고 iOS 에뮬레이터를 사용하려면 macOS 플랫폼을 사용해야 하며, XCode가 설치되어 있어야 합니다. XCode를 설치하고 에뮬레이터를 설정하려면 플러터 공식 문서에 나온 가이드를 차근차근 따라해보세요.

XCode를 설치하고 터미널 창에 아래 명령어를 실행하면 iOS 에뮬레이터가 실행될 것입니다:

$ open -a Simulator

안드로이드

안드로이드 환경을 위한 플러터 앱을 개발하려면, 시스템에 안드로이드 스튜디오를 설치해야 합니다. 이 설치 파일을 통해 안드로이드 SDK, 안드로이드 SDK 플랫폼 도구, 안드로이드 SDK 빌드 도구가 설치되며, 이들은 모두 플러터 안드로이드 앱을 개발할 때 필요합니다.

안드로이드 에뮬레이터를 설정하기 위해, 통합 AVD 매니저를 사용하여 안드로이드 가상 기기를 생성해야 합니다. 이를 통해 여러분의 시스템에서 에뮬레이터를 사용할 수 있게될 것입니다.

에뮬레이터 설정에 대한 자세한 가이드는 플러터 공식 문서를 참고하세요.

Visual Studio Code 설정하기

일반적으로 Dart로 플러터 애플리케이션을 개발할 때, 여러분이 원하는 에디터는 무엇이든 사용할 수 있습니다. 하지만, 아래 두 가지 데이터를 추천합니다:

Visual Studio Code
안드로이드 스튜디오 / IntelliJ

두 가지 모두 여러 가지 방법을 통해 Dart로 플러터 애플리케이션을 개발할 수 있게 해줍니다. 이 글에서는 Visual Studio Code를 사용하여 개발환경을 설정할 것입니다.

먼저, 최신 버전의 Visual Studio Code를 설치해야 합니다: https://code.visualstudio.com/

Visual Studio Code를 설치하고 나면, 플러터 확장 프로그램(extensions)을 에디터에 추가해야 합니다. 확장 프로그램 탭으로 이동하여 “flutter”를 검색하세요:

검색 결과 목록의 첫 번째 확장 프로그램이 우리가 설치하고자 하는 것입니다. 이 확장 프로그램을 설치하면, Dart 프로그래밍 언어뿐만 아니라, 플러터 애플리케이션을 개발, 리팩토링, 실행 및 리로딩에 대한 지원을 모두 추가할 수 있게 됩니다.

첫 플러터 앱 생성 및 실행

이제 개발환경 설정을 마쳤으니, 첫 플러터 프로젝트를 만들 준비가 되었습니다. 이 글에서는 두 가지 방법을 통해 앱을 만들고 실행해볼 것입니다.

터미널(Command-line) 사용하기

먼저 첫 번째 방법은 터미널(커맨드 라인)에서 flutter 명령어를 사용하는 방법입니다. 프로젝트를 생성하고자 하는 디렉토리로 이동한 뒤, 아래 명령어를 입력하여 프로젝트를 생성해주세요:

$ flutter create my_flutter_app

create 옵션을 사용하면, 플러터에게 새로운 프로젝트를 생성하라고 명령하게 됩니다. 새로운 프로젝트 폴더의 이름은 두 번째 파라미터 값을 사용하여 지정합니다. 프로젝트가 생성되면, 아래 명령어를 통해 새로운 프로젝트 폴더로 이동해주세요:

$ cd my_flutter_app

이 디렉토리(폴더) 안에서 flutter 명령어를 run 옵션과 함께 사용하여 기본 플러터 애플리케이션을 시뮬레이터로 실행할 수 있습니다 (시뮬레이터는 run 옵션을 실행하기 전에 이미 켜져 있는 상태여야 합니다):

$ flutter run

앱이 성공적으로 실행되면 터미널 창에서 아래와 같은 화면을 볼 수 있습니다:

또한, 시뮬레이터에서는 아래와 같은 결과를 볼 수 있습니다:

기본 플러터 앱은 아주 간단한 앱입니다. 이는 다음 네 가지 요소를 가지고 있습니다:

앱 최상단에 “Flutter Demo Home Page”라는 텍스트를 포함하고 있는 AppBar
중앙으로 정렬된 두 개의 텍스트 요소(element)
우측 하단의 액션(action) 버튼

우측 하단의 + 버튼을 클릭하면 화면 가운데 있는 숫자가 하나씩 증가합니다:

Visual Studio Code 사용하기

위의 모든 과정을 Visual Studio Code에서도 수행할 수 있습니다. 이미 Flutter 확장 프로그램을 설치했기 때문에, Visual Studio Code의 명령어 팔레트(단축키: ⇧⌘P)를 통해 다양한 flutter 명령어들을 사용할 수 있습니다. flutter와 관련된 명령어는 명령어 팔레트에서 flutter를 입력하면 찾을 수 있습니다: