[Flutter] 설치 및 개요

Flutter

현재 모바일 앱 개발 시장은 애플의 iOS와 구글의 안드로이드로 양분화되어있습니다. 때문에 시장이 점점 발전하기도 하지만 한편 개발사 입장에서는 두 가지 플랫폼을 모두 적용하는 일이 만만치는 않습니다. 때문에 오래전부터 크로스 플랫폼 개발이 있어왔는데요. 이 또한 쉬운 일이 아닙니다. 모바일 환경은 아주 빠른 속도로 변화하고 있고 그에 따른 크로스 플랫폼의 진전은 더딜 수밖에 없기 때문이죠. 이는 거대 대기업이 참여해도 마찬가지입니다. 페이스북은 오래전부터 React Native라는 크로스 플랫폼을 만들어왔는데요. 실제 적용되는 사례는 많지는 않은 것 같습니다. 

 

구글은 Flutter 라는 프레임워크를 출시했는데요. 경쟁 프레임워크인 React Native와 크게 다른 점은 React Native의 경우 자바스크립트와 브릿지 된 OEM UI를 사용하며 Flutter의 경우 Skia 그래픽 엔진을 이용해 UI를 직접 렌더링 한다는 점입니다. 때문에 속도 적인 면에서 직접 렌더링 하는 Flutter가 더 우위에 있습니다. 마이크로소프트가 가지고 있는 Xamarin의 경우 위 두 플랫폼과 달리 서로 다른 렌더링 방식으로 이질감 있는 UI를 가질 수 있습니다. 때문에 현재 시점에 크로스 플랫폼 모바일 앱 개발을 선택하려면 React Native와 Flutter를 선택하는 게 좋아 보입니다.

 

Flutter는 구글이 개발한 Dart라는 언어를 사용하며 이 플랫폼 자체가 구글의 퓨시아의 메인 개발환경이 된다고 발표한 바 있습니다. 이밖에 웹을 대상으로 한 Hurmmingbird 프로젝트가 있습니다. 모바일 앱을 웹에서 사용할 수 있을까요? 지금부터 플러터 개발환경을 설정해보겠습니다.

 

1. 깃허브에서 최신소스를 받습니다. (stable 버전)

$ git clone https://github.com/flutter/flutter.git -b stable --depth 1

 

2. flutter의 실행 패스를 설정합니다.

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

 

3. flutter doctor를 이용해 개발 툴에 문제가 있는지 확인합니다.

$ flutter doctor

개발환경 설정이 끝난 적상적인 환경입니다. 이 모든게 정상적이지 않아도 됩니다. 아래 환경설정에서 필요한 부분만 설정해서 개발이 가능합니다. 하지만 Android Studio 또는 VS Code 둘중에 하나는 정상이여야 개발이 가능합니다.

---

개발환경 설정

실제 개발은 Dart언어로 작성하며 Visual Studio Code 또는 Android Studio 에서 가능합니다. Xcode의 경우 개발을 할 수는 없고 실행환경만 만들어서 쓸 수 있습니다. 하지만 Android Studio에서 실제 iOS 기기에 빌드하거나 아래 사진처럼 시뮬레이터에 직접 빌드도 가능합니다. 

1. 우선 안드로이드에서 빌드하기 위해서 Flutter 플러그인을 설치합니다. 플러그인을 설치하면 자동으로 Dart 언어 플러그인이 설치됩니다.

2. 설치후 재시작하면 Flutter 프로젝트를 생성할 수 있게됩니다.

---

iOS 개발환경 설정

iOS의 경우 단순히 실행만 하기 위함으로 디바이스에 직접 설치하려면 인증서 설정이 끝나야 합니다. 만약 그렇지 않더라도 시뮬레이터에서는 실행이 가능합니다.

 

1. 커맨드라인 도구 설정

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

2. 개발자 설정

 

---

Flutter

https://flutter-ko.dev/docs

Flutter 문서

https://flutter.dev/docs

Flutter documentation

Skia Graphics Library

https://skia.org/

Docs

Cupertino (iOS-style) widgets

https://flutter.dev/docs/development/ui/widgets/cupertino

Cupertino (iOS-style) widgets

Material Components widgets

https://flutter.dev/docs/development/ui/widgets/material

Material Components widgets