백엔드 개발자의 flutter 개발기

‘피커부’ 라는 애플리케이션을 flutter로 개발한 후기입니다.

🙋 그래서 할까 말까?

안녕하세요! 이전에 flutterbased.studio 를 개발 했고 지금은 2021 오픈소스 컨트리뷰션 아카데미라는 대회의 FOSSLight 팀에서 스프링 부트 기반 백엔드 프로젝트를 컨트리뷰트하고 있습니다. 이번 프로젝트는 기획자와 저 둘이서 한 토이 프로젝트이고, 이야기를 나누다가 ‘결정 장애를 위한 대리 결정 앱’ 을 만들면 재밌을 것 같아 가볍게 시작하였습니다.

😁 flutter로 개발!

flutter는 하나의 코드로 안드로이도, iOS, 웹, 데스크탑앱까지 다양한 플랫폼에 맞는 애플리케이션을 제작할 수 있는 프레임워크 입니다. 2018년 flutter가 처음으로 세상을 나온 이후, 끊임없이 발전하고 있으며 현재는 안드로이드, iOS, web(웹 프론트엔드)가 정식 버전으로 지원되고 있습니다. 안드로이드, iOS를 동시에 배포하면 좋을 것 같다는 의견을 수렴하여 이번 프로젝트는 flutter로 제작하였습니다.

flutter 프레임워크는 dart라는 언어 위에서 동작합니다. dart는 객체지향 언어로 java, kotlin과 매우 흡사하며 러닝커브가 낮아 배우기 용이합니다. 제 경우 자바기반 스프링 프레이워크를 다루고 있는데, 자바라는 언어를 알다 보니 dart 언어를 사용하는데 큰 어려움이 없었습니다. flutter에 대해 더 알고 싶으신 분이 계시다면 제가 이전에 쓴포스트를 확인해주세요!

🙏 이번 프로젝트에서 적용해보고자 한 것

지난번 flutterbased.studio라는 flutter web 프로젝트를 개발했을 때는 github actions 를 이용한 배포 자동화를 주안점에 두고 개발을 했습니다. 이번 프로젝트 에서는 github actions는 당연히 적용하고, 다음의 것들을 적용해 보았습니다.

1. 테스트 주도 개발

예전에는 어떻게든 돌아가는 코드를 작성하고자 했다면, 요즘 들어서는 앞으로의 수정이 용이한 코드를 만들고자 합니다. 앞으로의 코드 변경을 위해서는 이미 작업했던 코드에 대한 확신이 있어야 하고 테스트는 이를 해결해 준다고 생각합니다. 이번 프로젝트에서는 아직 식견이 부족하여 view 부분에는 테스트를 적용하지 못하였고 핵심 비즈니스 로직에 테스트 주도 개발 방법론을 적용하였습니다. 밑의 코드는 테스트 코드 중 일부입니다.

테스트 코드 중 일부이다

2. 애니메이션

제 목표는 제 글을 읽고, 또 제가 만든 것들을 사용하여 많은 사람들이 flutter에 관심을 가지게 하는 것입니다. 그렇기에 비교적 가벼운 서비스임에도 애니메이션을 열심히 적용하였습니다. 애니메이션 시연은 아래 동영상에서 확인하실 수 있습니다.

피커부 애니메이션 시연

3. 상태관리

이전에 provider 패키지를 정말 잘 써왔는데, 요즘 GetX라는 패키지가 상태관리의 끝판왕이라는 이야기를 듣고 적용해보았습니다. 매우 만족하는 패키지 였습니다. 무엇보다 provider에 비해 getx는 객체의 context를 사용하지 않기 때문에 비교적 문법이 간단하고 적용범위가 넓었습니다.

4. 패키지 개발

생각보다 flutter 의 패키지들을 모아둔 pub.dev에 애니메이션 관련한 패키지가 많지 않습니다. 이번 프로젝트에서 앱바(appbar)를 직접 커스텀 하여 사용하였습니다. 원래는 비슷한 패키지가 있으면 쓰려 했지만 존재하지 않았고, 충분히 공유할 가치가 있는 것 같아 직접 패키지로 만들어서 배포하였습니다. animated_appbar라는 패키지 이며, 패키지를 만드는 방법에 대해서는 다음 포스트에서 작성하겠습니다.

animated_appbar 패키지. 다음과 같은 애니메이션 기능을 가진 appbar를 제작하여 pub.dev 에 배포하였다.

5. 개인정보 처리 방침과 오픈소스 라이선스

솔직히 앱을 출시하기 전까지는 두 항목에 대해 크게 관심이 없었습니다. 하지만 출시과정에서 해당 사유로 리젝을 당하면서 찾아보게 되었고 다음과 같이 개인정보 처림방침과 더불어 오픈소스 라이선스를 제작하게 되었습니다. (그중 오픈소스 라이선스는 fosslight를 사용하여 손쉽게 제작할 수 있었습니다)

전화기 화면에서 다음과 같이 여러 정보를 확인할 수 있다.

🚷 나 왜 리젝이야?(또르르…)

프로젝트 개발은 2주가 채 되지 않아 완료하였습니다. 그만큼 flutter는 린하고 빠르게 개발이 가능하며 프로토타입 제작에는 매우 특화된 프레임워크라고 생각합니다. 하지만 이번 애플리케이션을 안드로이드, ios스토어에 제출하고 계속 리젝(심사 거부)를 당하면서 심사를 통과하는데 2주 정도 더 걸린 것 같습니다. 꽤 여러번 리젝을 당했는데 몇가지 케이스를 소개해 드리도록 하겠습니다.

1. 로딩 버튼이 현재 로딩중임을 분명하게 표시하지 않는다. (앱스토어)

초기 프로젝트에서는 rounded_loading_button 이라는 패키지를 사용하였습니다. 아래 첫번째 사진과 같이 부드럽게 움직이는 애니메이션이었고 두번째 사진과 같이 구현하여 심사에 제출하였습니다.

출처 : https://pub.dev/packages/rounded_loading_button#rounded_loading_button
초기 구현했던 화면. 해당 버튼이 로딩중임을 명확하게 표시하지 않는다는 이유로 리젝당했다.

애플 앱스토어의 리젝사유는 다음과 같습니다.

your app displayed an indefinite loading gear and did not respond when we tapped on “친구에게 공유하기.”

pub.dev에서 나름 유명한 패키지를 가져와서 그대로 적용하였는데 리젝을 당했고, 정품을 구매해서 쓰는데 알고보니 가품인 그런 느낌이 들긴 했지만, 아래 사진과 같이 로딩 방식을 바꾸었고 해당 부분은 더 이상 문제가 되지 않았습니다.

결국 이 방식으로 로딩화면을 바꾸었습니다.

2. 인스타 그램 공유 관련 리젝 (플레이 스토어)

다음은 구글 플레이스토어의 리젝입니다. 현재 저희 앱에서는 나온 결과를 인스타그램 스토리로 공유하는 기능을 가지고 있습니다. 편의를 위해 flutter_social_content_share 라는 패키지를 사용했습니다. 하지만 구글에서 다음과 같은 리젝 사유를 보내어왔습니다.

Make appropriate changes to your app based on the information provided above. For additional help, you can review the Permissions policy and the Play Console Help Center article, which describes intended uses, exceptions, invalid uses, and alternative options for use of Call Log or SMS permissions.

즉 해당 앱에서 권한 설정을 미숙하게 한 부분이 있다고 지적하였습니다. 하지만 프로젝트에서는 관련 권한을 사용하지 않았고, 확인 결과 해당 패키지에서 권한을 사용한 것으로 나타났습니다. 해당 패키지를 대체할 수 있는지 검토한 결과, 써야 하는 기능에 비해 코드가 비효율적으로 작동하고 있었고, social_share 라는 패키지로 변경 후에는 같은 문제가 반복되지는 않았습니다.

🙏 결국 출시

그렇게 스토어와의 몇 차례 밀당 끝에 앱을 출시할 수 있게 되었습니다. 플레이 스토어앱스토어 에서 모두 앱을 확인하실 수 있습니다. 궁금하신 사항은 lak9348@gmail.com 이메일 주시면 답장 열심히 해드리겠습니다. 감사합니다!

--

--

--

contact : lak9348@gmail.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
NAMKYU PARK

NAMKYU PARK

contact : lak9348@gmail.com

More from Medium

Flutter Katha Part3 : Some basic understandings with first App

How to Create a Plugin in Flutter?

Flutter 2.10: Flutter Stable Support for Windows and Other Updates

Building Android Widgets In Flutter: Remember these Simple Points