Flutter 앱 쉽게 만들기

2022년 6월 20일 작성 (2022년 8월 15일 수정)

cra1nbow 작성

읽는데 5분

플러터는 구글에서 직접 제작한 크로스플랫폼을 지원하는 프레임워크에요.
크로스플랫폼이란, 하나의 코드로 다양한 플랫폼에서 돌아가는 어플리케이션을 만들 수 있다는 것이에요.
코틀린(Android), Swift(iOS)등을 사용해서 개발하는 네이티브와 구분되는 개념이에요.
크로스플랫폼은 네이티브와 구분했을 때 훨씬 더 빠른 시간 내에 개발이 가능할 뿐더러 요즘 개발되고 있는 프레임워크는 성능이 잘 나와요.

또한 하이브리드와도 구분을 하는데, 하이브리드는 html과 css, js로 만들어진 웹을 앱상에 보여주는 방식입니다.

구분	네이티브	크로스플랫폼	하이브리드
레포지토리 개수	지원하고자 하는 플랫폼 당 1개	플랫폼이 여러개더라도 하나로 가능	크로스플랫폼과 동일
구현에 걸리는 시간	지원하고자 하는 OS에 따라 배로 듦	OS를 확장하는 데에 시간이 거의 들지 않음	크로스플랫폼과 동일
성능	마음대로 최적화 가능	네이티브에 비해 부족	크로스플랫폼에 비해 부족
구현 가능 범위	네이티브가 지원하면 뭐든지 가능	내장 기능으로 불가능 하면 구현 불가능*	웹으로 구현이 안 되면 불가능

* : 라이브러리가 있는 경우 그것을 사용하거나 NativeModule(React Native), MethodChannel(Flutter)를 사용해서 네이티브 단에 접근할 수 있어요!.

Flutter

크로스플랫폼 프레임워크 중 하나에요.
개인적으로 좋은 특징이라고 생각하는 것이,
ReactNative는 빌드를 하면 자바스크립트 번들파일이 만들어지는 것에 비해
플러터는 빌드를 했을 때 다트(플러터 프레임워크의 언어)가 컴파일 되어서 바이너리 파일 형태로 들어 간다는 것입니다.
그래서 ReactNative에 비해서 높은 성능을 기대할 수 있어요.

퍼포먼스 비교 자료 보러가기

플러터는 구글에서 만든 멀티플랫폼 프로그래밍 언어인 dart로 사용할 수 있어요.

install

개인적으로 모든 라이브러리들을 버전 매니저 툴인 asdf를 사용해서 설치하는 것을 선호해요.
(윈도우의 경우에는 WSL2를 사용해서 설치가 가능하다고 합니다.)

asdf

homebrew를 사용해서 설치합니다 (brew install asdf)
그리고 ~/.zshrc 파일에 . $(brew --prefix asdf)/libexec/asdf.sh줄을 추가합니다.
source ~/.zshrc 를 입력하거나 터미널을 새로 여시면 asdf를 활성화 할 수 있습니다.

plugin (flutter)

asdf plugin add flutter로 asdf플러그인을 추가합니다.
asdf list all flutter로 설치 가능한 버전들을 확인합니다.
asdf install flutter 버전이름로 설치를 합니다. (uninstall로 제거할 수 있습니다.)
asdf global flutter 버전이름으로 전역적인 기본 버전을 설정할 수 있습니다.
asdf local flutter 버전이름으로 디렉토리별 기본 버전을 설정할 수 있다.

additional plugin (dart)

원한다면 dart도 asdf에 올릴 수 있습니다.

asdf plugin add dart
asdf list all dart
asdf install dart 버전이름
asdf global dart 버전이름 또는 asdf local dart 버전이름

Getx

why?

물론 플러터 만으로도 굉장히 훌륭한 어플리케이션을 만들 수 있어요.
플러터에서는(리액트 네이티브와는 다르게) 자체적으로 네비게이션을 지원하고, 약간의 라이브러리 지원으로 쉽게 i18n(internationalization)도 지원한답니다.
플러터에서 지원하는 상태 관리 또한 우수해요.
하지만 플러터에서 지원하는 상태관리를 쓰게 되면 코드는 setState로 전부 덮어질 것입니다.
그리고 좋은 디자인 패턴을 위해서 비즈니스 로직과 뷰를 분리시켜야 하는데 이 또한 Getx를 사용해서 쉽게 처리할 수 있어요.

install

조금 더 getx를 편하게, 그리고 getx가 권장하는 방법으로 아키텍처를 구성하기 위해서 get_cli를 설치할 것입니다.
pub global activate get_cli 로 설치할 수 있습니다.

make project

get_cli가 설치 되었다면 get create project 명령어로 새 프로젝트를 생성할 수 있습니다.

전부다 엔터 눌러주세요!
맨 마지막에 어떠한 아키텍처를 사용할 것인지 묻는 창이 뜨는데, 두가지 아키텍처가 있습니다

GetX Pattern
CLEAN

저는 GetX Pattern이 더 손에 익는 것 같아요.
두가지 다 써보고, 편한 방식으로 하면 될 것 같습니다.

developing

이제 실제 개발 단계로 넘어가보도록 할게요.
플러터는 구글에서 만든 Android Studio와 마이크로소프트에서 만든 Visual Studio Code에서 개발 가능합니다. 저는 Visual Studio Code에서 개발하는 것을 선호해요.

원하시는 IDE로 해당 폴더를 연 다음에 기본 설정들을 마칩니다.

cli commands

그리고 get_cli를 사용해서 페이지를 만들고, 필요한 패키지가 있다면 설치도 합니다. 원래 dart의 pub 명령어를 사용하면 한번에 하나의 패키지만 설치 가능한데, get_cli에 있는 설치 명령어를 사용하면 여러개의 패키지를 연달아 설치해줘요.

아래는 제가 자주 사용하는 명령어에요. (GetX Pattern을 사용하는 경우에만 사용 가능한 명령어들도 있습니다)

get create project
get create page:페이지이름
get generate locales assets/locales
get install 패키지이름1 패키지이름2…
get install 패키지이름1 패키지이름2… –dev
get remove 패키지이름1 패키지이름2…

translations

assets/json 디렉토리에 ko_KR.json 파일을 만들고, 키에 따른 번역 값을 써둘게요.
그리고 get generate locales assets/locales를 터미널에 입력하면 lib/generated위치에 locales.g.dart 파일이 만들어져요.

그리고 translation_service.dart 파일을 만들어줄게요.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../generated/locales.g.dart';

class TranslationService extends Translations {
  static Locale? get locale => Get.deviceLocale;
  static const fallbackLocale = Locale('ko', 'KR');

  @override
  Map<String, Map<String, String>> get keys => {
        'ko_KR': Locales.ko_KR,
      };
}

지원하는 언어에 맞게 파일을 작성하면 돼요.

additional tools

앞서 설명드린 것처럼 GetX는 자체 translation을 지원합니다.
json 파일로 작성하면 자동으로 dart 파일을 만들어줍니다.

그런데 json파일을 수정할 때마다 generate명령어를 계속 실행시켜야 하는데, 개발하는 입장에서 이보다 더 비효율 적인 것은 없을거에요.

저는 watchexec를 사용해서 json파일이 수정될 때마다 generate를 해주게끔 자동화를 시켜요.

watchexec

install

맥, linuxbrew등에서 brew install watchexec로 설치할 수 있습니다.

usage

새 터미널을 열고 watchexec -r -e json -- get generate locales assets/locales를 입력하면 디렉토리 내 json파일이 수정될 때마다 get~~ 명령어가 실행돼요.

cra1nbow

spaghetti!