시작하기에 앞서...

이 시리즈에서는 Flutter 프로젝트에서 Shorebird 서비스를 사용하여 Code Push를 구현하는 방법과 CI/CD 서비스인 CodeMagic과 통합하여, 쉽게 릴리즈와 코드푸시를 CI/CD 프로세스에 통합시키는 법에 대해서 알아보겠습니다.

생각보다 관련된 문서들이 불친절해 여러 시행착오를 겪었기에 글로 정리해두면 다른 개발자분들께서 보시고 쉽게 따라하실 수 있으리라 생각하여 글을 쓰게 되었습니다.

글은 총 4부로 나뉘어져 있습니다.

• Flutter에서 Code Push 하기 (1) - ShoreBird
• Flutter에서 Code Push 하기 (2) - ShoreBird로 안드로이드 릴리즈 및 코드 푸시 하기
• Flutter에서 Code Push 하기 (3) - ShoreBird로 iOS 릴리즈 및 코드 푸시 하기
• Flutter에서 Code Push 하기 (4) - Codemagic CI/CD 프로세스에 ShoreBird 통합하기

Flutter!

Flutter는 하나의 코드 베이스로 모바일, 데스크탑은 물론 웹앱까지 만들 수 있는 크로스플랫폼 UI 프레임워크다.
React Native의 대항마로 나왔는데 JS 런타임과 Native 코드 사이에 Bridge가 반드시 있어야 하는 React Native에 비해, 자체 캔버스에서 UI를 모두 그려버리고, 바이너리 코드로 네이티브 컴파일이 가능한 Dart 언어를 사용하는 Flutter는 근본적으로 우월하다.
성능 면에서도 좋고, pixel-perfect하게 캔버스에 그려내는 기능도 좋다. 게다가 Dart 언어 자체가 최신 프로그래밍 언어의 트렌드를 많이 받아들이고 있고, JS에 비해 기능도 많고 안정성도 높다 보니 생산성도 매우 높다.

Flutter의 약점

Flutter에 하나의 약점이 있다. React Native로 만든 앱은 Code Push가 가능한데 Flutter는 그게 안 된다. 큰 변경사항은 React Native에서도 코드 푸시로 업데이트를 진행했다가는 스토어에서 퇴짜를 맞을 수 있다. 그러나 빨리 고쳐야 하는 코드가 있거나 자잘하게 버그를 수정할 일이 잦은 경우에 이걸 하나하나 스토어에서 심사를 받자니 울화통이 터진다.

한 프로젝트에서 이런 일이 많이 일어났는데, 프로젝트 매니저의 매니지먼트 스킬이 워낙 출중해서(반어법이다.) 일정 관리나 업무 관리가 전혀 되지 않아 코드 품질 관리가 이루어지기 힘들었다. 테스트 코드 작성은 커녕 손으로 하는 테스트도 잘 이루어지지 않아 스토어에 출시를 하고도 자잘한 버그들이 자꾸 나와 급히 심사를 다시 올리는 일이 비일비재했다.

어쩌겠는가? 나는 아무 권한이 없는 서글픈 코드 농노일 뿐인 것을....... Flutter에서 코드 푸시가 가능한지 찾아 보기 시작했다.

Shorebird

Shorebird는 Flutter를 위한 클라우드 기반 코드 푸시 서비스이다. Shorebird 말고도 다른 코드 푸시 서비스들이 있었는데 약간 미봉책 느낌이 강했다면 이 서비스 같은 경우에는 다른 사람도 아니고 Flutter 창시자이자 구글에서 Flutter와 Dart 프로젝트의 디렉터를 맡았던 사람과 Bloc 개발자가 만들고 있다!
다른 코드 푸시 서비스들이 Flutter 앱을 JS로 컴파일해 React Native처럼 JS 코드를 푸시하는 개념이었다면, Shorebird에서는 오리지널 Flutter Engine을 포크해 근본적으로 Dart 코드 푸시가 가능한 Flutter Engine을 따로 만들어서 코드 푸시를 구현하고 있다. 고로, 제대로 만든 코드 푸시 서비스다. 그래도 Dart Interpreter가 돌아가는 형태라 네이티브하게 컴파일 된 앱보다는 조금 느릴 것 같다.
긴 말 필요 없이 바로 들어가보자.

Shorebird 설치하기

터미널에서 shorebird를 설치해주자. 참고로 shorebird를 설치하기 전에 git이 설치되어 있어야 한다.

Max/Linux

curl --proto '=https' --tlsv1.2 https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh -sSf | bash

Windows

Set-ExecutionPolicy RemoteSigned -scope CurrentUser # Needed to execute remote scripts
iwr -UseBasicParsing 'https://raw.githubusercontent.com/shorebirdtech/install/main/install.ps1'|iex

그 다음

shorebird

를 터미널에 쳐보자. 다음과 같은 결과가 나와야 한다.

The shorebird command-line tool

Usage: shorebird <command> [arguments]

Global options:
-h, --help            Print this usage information.
    --version         Print the current version.
-v, --[no-]verbose    Noisy logging, including all shell commands executed.

Available commands:
  cache      Manage the Shorebird cache.
  doctor     Show information about the installed tooling.
  flutter    Manage your Shorebird Flutter installation.
  init       Initialize Shorebird.
  login      Login as a new Shorebird user.
  login:ci   Login as a CI user.
  logout     Logout of the current Shorebird user
  patch      Manage patches for a specific release in Shorebird.
  preview    Preview a specific release on a device.
  release    Manage your Shorebird app releases.
  upgrade    Upgrade your copy of Shorebird.

Run "shorebird help <command>" for more information about a command.

나오지 않는다면 터미널을 껐다 켜보거나 환경변수 설정이 되어 있는지 확인해보자.

Shorebird 초기화

일단 Shorebird를 사용하기 전에 로그인을 먼저해야 한다. 다음 명령어를 터미널에 친다.

shorebird login

그러면 터미널에 링크가 하나 나오는데 이 링크를 통해 Shorebird에 로그인을 하면 설정이 완료된다.

이제 우리는 Flutter 프로젝트를 Shorebird를 사용할 수 있도록 초기화 해야 한다. 터미널에서 내 Flutter 프로젝트 루트 폴더로 진입한 뒤에 다음 명령어를 친다.

shorebird init

그러면 Shorebird CLI에서 이 앱을 뭐라고 명명할 건지 물어보고(아무렇게나 해도 상관 없다.) 각종 설정을 자동으로 해준다. 다만 만약, AndroidManifest.xml에 INTERNET 권한을 주지 않았다면 이건 설정해줘야 한다.

마무리

이제 몇 가지 설정만 더 하면 Shorebird로 코드 푸시를 할 수 있다! 지금 Shorebird는 공식적으로 Android만 지원하고 iOS 지원은 알파버전이다. 알파버전이라고 해서 안 되지는 않지만, 앱 동작이 '느끼기 힘들 정도로' 조금 더 느리다고 한다. 새로운 Dart Runtime을 만들어서 극복해보려고는 하고 있지만 일단 지금 이 런타임은 크래시가 좀 발생하는 편이라 아직 적용은 못하고 있다고 한다.

2부에서는 Android에서 앱 릴리즈를 Shorebird로 하고 코드 푸시를 어떻게 하는지 알아 보겠다.