Flutter 앱 개발후기
개발후기, Flutter, Dart, 세관이
제주에서 한달간 집중근무 프로젝트를 수행하러 내려가기 약 일주일전 한달간 무언가 공부해볼까 고민해보던 차에, 종종 같이 공부했던 친구에게 Flutter 강의를 하나 소개받았다. 서로 끝까지 공부할수 잇도록 학습에 대한 자극을 주면서 진행해보자고 이야기 하고 공부하기 시작했다.
아래 강좌이다. 구글의 지원으로 가격이 단돈 10달러!
한달반에 걸쳐 강좌를 다 본뒤( 힘들었... ) 첫 프로젝트로 어떤것을 해볼까 고민하다가
1년전 세관이 iOS버전을 런칭하고 안드로이드 버전 만들다가 포기한 것이 생각나서, 이번에야 말로! 플레이 스토어에 올려보자는 생각으로 세관이 앱을 포팅하기로 결심!
1. Flutter 생산성은?
생산성 체크도 해보고 싶어서 걸린 시간을 체크하면서 진행했다. 단순히 시간으로 생산성을 측정할순 없지만 참고할만한 객관적 지표정도는 될것 같다. 결과부터 공개해보자면 아래와 같다.
생산성 체크보이는 것처럼 UI를 짜는데에는 시간이 별로 걸리지 않았다.
레이아웃에 대한 개념을 이해하는게 어렵지 않았고, 문서도 많다.
수정한 코드에 대한 UI 변경을 즉시 볼수있다는 점이 시간단축에 많은 영향을 주지 않았나 싶다.
변경된 UI 코드를 시뮬레이터로 즉시 확인할수 있다.이외에 Android Studio 의 flutter 플러그인을 통해 많은 개발 편의성을 제공한다.
뷰 디버깅도 크롬을 통해 리얼타임으로 할수있기도 하고, extract widget 메뉴를 사용해 공용으로 사용할 뷰를 떼내는 것도 매우 쉽다.
테스팅도 최근에 수행한 테스트 이력를 남겨줘서 테스트를 짤때도 편리함을 느꼈다.
XCode 에서는 제공하지 않는 거라서 더 그렇게 느꼈을지도...
전체 테스트 ( tests in test ), 단일 단위 테스트 이력, 단일 파일 테스트 이력Dart 언어에서 async await 를 제공해서 비동기 작업들을 작성하는데 수월했다.
무엇보다 Kotlin으로 안드로이드 개발 시도, React Native 개발 스터디를 해본 입장에서 비교해보면,
Flutter 는 배우기 정말 쉽다.
* 서브 미션으로 테스트 부터 모두 짜고 UI를 짜는 방법으로 진행해봤다.
UI에 바인딩 하는 방법들만 테스트 해본뒤에 테스트를 작성하기 시작했고,
모든 BLoC 테스트를 모두 완성한뒤 Scene 을 만들었다.
때문에 UI작업을 할때에는 순수하게 UI를 그리기만 했다. ( 몇몇 놓친 BLoC 회귀테스트가 있긴했다 ㅎㅎ )
포팅한 결과
작업 결과물을 원본과 비교해서 스크린샷을 찍어봤다.
원본 프로젝트 -- Flutter iOS -- Flutter Android 순이다.
완전히 동일한 UI로 만들지는 못했지만 최대한 근접하게 만드려고 노력했다.
아이폰 스크린샷은 X 와 XR 인 차이를 감안하면 거의 비슷하다.
원본 iOS 세관이 앱 iPhone X --------------- Flutter iOS 세관이 iPhone XR ------------- Flutter Android 세관이
원본 iOS 세관이 앱 iPhone X --------------- Flutter iOS 세관이 iPhone XR ------------- Flutter Android 세관이
원본 iOS 세관이 앱 iPhone X --------------- Flutter iOS 세관이 iPhone XR ------------- Flutter Android 세관이 
원본 iOS 세관이 앱 iPhone X --------------- Flutter iOS 세관이 iPhone XR ------------- Flutter Android 세관이
원본 iOS 세관이 앱 iPhone X --------------- Flutter iOS 세관이 iPhone XR ------------- Flutter Android 세관이2. Flutter 유닛 테스트
테스트를 위한 패키지로는 Flutter 에서 테스팅 가이드에 나와있는데로
flutter 에서는 어떤 아키텍쳐를 사용하면 테스팅에 용이 할까 찾아보니, 구글에서는 BLoC(Business Logic Components) 패턴을 가이드하고 있어, 이것을 선택했다.
관련 링크는 아래에 있다. 자세한 내용은 아래에서...
BLoC 패턴BLoC과 뷰를 바인딩하는 방법으로는 stream controller 를 선택했고, 기본 StreamController 를 사용하진 않고 편의를 위해 RxDart 를 사용했다.
BLoC 유닛 테스트 2개를 발췌해봤다.
입력된 물품 리스트 데이터 소스, 아이템 삭제 유닛 테스트비동기 테스트도 위와같이 async, await 를 통해 간단하게 구현가능하다.
첫번째 테스트는 데이터 베이스에서 가져온 데이터를 리스트에서 보여질 데이터로 잘 가공되었는지를 테스트 한다.
두번째 테스트는 물품을 지울때 repository 에 전달하는 것을 테스트한다.
3. Flutter pakages ( 많은 오픈소스들 )
Flutter 에서 사용할수 있는 오픈소스들은 https://pub.dev/flutter 에서 검색할수 있다.
오픈소스의 객관적 지표 ( 얼마나 많이 쓰이고, 지원은 얼마나 되고있는지 등등)를 점수로 보여주므로 오픈소스 선택할때 도움이 된다. 설치도 매우 간단하다.
아직까지는 필요한 것들을 모두 여기서 찾을수 있었다.
샘플로 올리려고 들어갔는데 100점이라니...4. Flutter 앱 배포 과정
앱 배포 과정은 특별히 어려움이 없었는데 진행했던 것들을 나열해 보자면,
- 앱 아이콘 안드로이드, iOS 각 프로젝트에 설정.
- 앱 이름 각 프로젝트에 설정.
- (안드로이드) 난독화를 위한 프로가드 설정. ( 몇몇 앱 번들 빌드 과정에서 오류가 나는 부분은 처리가 필요)
- (안드로이드) 플레이 스토어 앱 사이닝 설정.
- (안드로이드) 플레이 스토어 업로드용 앱 번들 빌드.
- XCode쪽은 원래 하던 대로 직접 프로젝트를 열어서 했다.
5. 소감
Flutter 는 훌륭하다.
앱개발자로써 개인 프로젝트를 Flutter 로 해볼까 고민중인 분이라면 강력하게 추천하고 싶다.
아직 세달 정도밖에 경험해보지 않아서 큰, 복잡한 프로젝트에도 유용할지는 확신할수 없다.
새로운 언어 ( dart ) 를 통해 생각의 폭을 좀더 넓힐수 있을것도 기대되든 부분이다.
이번에 Flutter로 만든 세관이 안드로이드 앱 주소이다.
기존 아이폰 세관이 주소는 덤 :)
이제 다른 앱을 한번 또 만들어봐야지!
