코드없이 한달안에 앱을 만든다? 플러터플로우의 솔직한 장단점

왠만한 앱도 한 달이면 만드는 플러터플로우, 장점도 있지만 단점도 있습니다.

2024.01.19 | 조회 1.17K |
0
|

피어낫프로덕

좋은 프로덕트가 피어날 수 있는 인사이트를 공유합니다. Fear Not Product.

 

요약

- 플러터플로우 장점 : 쉽고 직관적이어서 빠르게 앱을 만들 수 있습니다. 코드 삽입도 가능하여 향후 코드 전환도 됩니다. 돈도 시간도 지식도 없는 상황에서, MVP를 만들기에 적합합니다. 

- 플러터플로우 단점 : 배우기엔 그렇게 쉽지 않지만, 그렇다고 자유도가 코드처럼 높지는 않습니다. 플러터플로우 자체의 버그도 있으며, 한국 문화에 최적화되진 않았습니다.  

 

 


플러터플로우?

플러터플로우 앱을 코드 없이 만들어주는 서비스입니다.

하이브리드 앱인 플러터로 만들어지며, 코드전환도 할 수 있죠. 

2022년부터 시작해 빠르게 성장해 현재 노코드 앱빌더 중 1위이며, 버블과도 순위가 크게 차이 나지 않습니다. 

 

개인적으로, 지금까지 플러터플로우를 이용해 5개 정도의 앱을 만들었는데요. 

그렇다면, 어떤 순간에 플러터플로우를 사용하게 되었을까요? 

그리고 솔직한 장단점은 무엇일까요?

여러분의 시간과 비용을 아끼기 위해 모든 것을 솔직하게 공유 드립니다.

 

 돈도, 시간도, 기술도 없었기 때문에  

 

<사례1 : AI 초상화 서비스>

당시 인공지능 업체인 알레시오에 프로덕트 컨설팅을 하고 있었고, 새로운 이미지변환 AI 서비스를 통해 수익화를 꾀하고 있었습니다.

이를 위해서는 최신 이미지 생성 앱인 Lensa를 벤치마킹하여, AI 초상화 앱을 만들고자 했습니다. 

다만, 당시 회사에서는 개발자 모두 앱에 대한 제작 경험이 없었습니다. 외주를 쓸 자금도 있지 않았죠. 무엇보다도, AI 초상화는 유행을 타고 있었기 때문에, 빨리 출시를 했어야 했습니다. 즉, 돈도 없고 시간도 없고 기술도 없었습니다.

이 때 떠올린 것이 플러터플로우 였습니다. 노코드이기 때문에 빨리 배우고 만들 수 있었고, 향후 플러터 코드 베이스로 넘어갈 수 있었으니까요.  

그리고 앱 개발 경험이 없는 상태에서 빠르게 배우고 만들어, 결과적으로는 5주 정도 만에 앱을 런칭할 수 있었습니다.

(글은 이렇게 쉽게 썼지만, 실제로는 인앱결제를 위해 별도의 코드를 억지로 넣느라 시행착오가 있었고, 그 영향은 향후 길게 이어졌습니다. 이는 향후 기회가 되면 언젠가 자세히 다루겠습니다....) 

 

<사례2 : 개인 사이드 프로젝트>

개인적으로 사이드 프로젝트를 하다가도 비슷한 상황에 직면했습니다.

품앗이 앱을 실험하고 싶었는데, 저 개인으로서는 돈도 없고 시간도 없었고, 앱개발 기술도 없었습니다.

결국 플러터플로우를 사용해서 만들었습니다.

회원가입과 글쓰기, 품앗이 기록하기, 채팅 등의 기능이 들어갔습니다. 이 역시 처음 만들기부터 최종 배포까지 5주 정도 걸렸습니다. 

위 두 사례 모두, 결과적으로는 첫 출시시 성공하지 못했습니다. 

그래서 더 다행이었다고 생각합니다. 

하지만, 만약 위 두 사례에서 바로 개발을 했다면...

* 외주로 했다면 최소 2천만원 이상의 비용이 들었을 것입니다.

* 직접 플러터를 배워서 했다면, 문법을 익히는 데만 두달, 구현하는 데에 두달 이상이 걸렸을 것입니다.  

그래서 실패를 했다면, 더 큰 비용을 썼겠죠. 

노코드를 통해 MVP 런칭 및 검증까지 최소 비용으로 실패를 할 수 있었습니다.. 😅 

 

 

자, 그럼 실제로 사용한 플러터플로우는 어땠을까요?

직접 배포까지 해보면서 느낀 플러터플로우의 장단점들을 솔직하게 공유합니다. 

장점1. 엄청나게 직관적이다! 코드가 아닌, 그래픽이기 때문에

플러터플로우는 모든 요소들이 코드가 아닌, 그래픽 입니다.

드래그&드랍을 통해 레이아웃을 만들고, 버튼으로 옵션값을 입력합니다.

왼쪽에 Widget Tree가 나오고 오른쪽에 각 위젯별 설정을 할 수 있다.
왼쪽에 Widget Tree가 나오고 오른쪽에 각 위젯별 설정을 할 수 있다.

모든 것이 직관적으로 보이고, 변수도 자동으로 연동되기 때문에 변수 이름을 규정할 필요가 없습니다. 

그래서 개발 속도가 엄청나게 빨라집니다. 향후 QA할 때도 속도가 엄청나게 빨랐는데, 버그 하나당 리포트 후 5분 안에 고치기도 했습니다.

 

장점2. 최적의 세팅과 연동을 도와준다. 

플러터플로우에서는 앱 개발을 위해 ‘이렇게 세팅해서 쓰세요’ 하는 설정값을 제공합니다.

예를 들어 디자인 시스템이나 색상을 선택할 때, 쉽게 세팅할 수 있을 뿐만 아니라, Figma나 Cooler같은 서비스와 연동하여 가져올 수도 있습니다. 

Figma에서 만든 디자인시스템(예: 텍스트와 컴포넌트)를 바로 가져올 수 있습니다. 
Figma에서 만든 디자인시스템(예: 텍스트와 컴포넌트)를 바로 가져올 수 있습니다. 
색상도 직관적으로바로 고를 수 있습니다. 또한, Cooler에서 가져오거나, AI로 생성할 수도 있습니다.
색상도 직관적으로바로 고를 수 있습니다. 또한, Cooler에서 가져오거나, AI로 생성할 수도 있습니다.

 

또한 서버 세팅시, 클릭 한번에 바로 Firebase를 만들어 연동할 수도 있습니다. 이를 통해 별도의 백엔드 연동 절차를 줄여줍니다. 

최근에 생긴 Firebase Project 만들기 기능. 
최근에 생긴 Firebase Project 만들기 기능. 

또한, API를 주고 받는 것도 가능합니다.  

플러터플로우로 chatGPT API를 주고 받을 수 있습니다. 
플러터플로우로 chatGPT API를 주고 받을 수 있습니다. 

그 외 Google Analytics와 연동하여 추적을 할 수 있고, Github와 연동하여 코드 Push도 가능하며, AdMob과 연동하여 광고도 달 수 있습니다. 또 구글플레이/앱스토어에 배포시에도 CodeMagic을 이용하여 클릭 한 번에 배포가 되기도 합니다.

 

그래서 앱 개발 환경과 세팅에 대해 잘 모르는 사람도 큰 어려움 없이 세팅을 해 나갈 수 있습니다.

 

장점3. 코드 삽입과 활용이 매우 유연하다.

노코드 앱은 드래그앤드랍을 이용하지만, 그에 따라 코드 만큼 자유롭지는 않을 수 있습니다. 

플러터플로우는 플러터로 만들어져 있으며, 플러터 코드와 오갈 수 있게 하여 그 단점을 커버합니다.

 

우선, 모든 페이지에서 자동으로 생성된 코드를 볼 수 있으며, 코드 다운로드가 가능합니다.  

기본적으로 제공하는 코드 보기 기능 
기본적으로 제공하는 코드 보기 기능 

 

이를 통해, 플러터플로우로 디자인하고, 코드를 다운로드 후 코드로 개발 로직을 쓰는 방식도 해외에서 사용되기 시작했으며, 꽤 효율적이라고 들었습니다

 

또, 플러터플로우에 없는 기능들에 대해서는 직접 코드를 삽입하여 만들 수도 있습니다.

Custom Code, Custom Widget, Custom Action을 통해 별도의 코드가 가능합니다. 

Custom Function을 통해 코드를 삽입한 경우 
Custom Function을 통해 코드를 삽입한 경우 

 

장점4. 친절하다.

전반적으로 플러터플로우는 노코드툴이지만 로우코드에 가까운 만큼, 쉽게 진입하고 배우게 하기 위해 노력을 많이 했습니다.

일단, 튜토리얼이 좋습니다. 이것만 잘 따라가도 기본적인 기능은 익힐 수 있습니다. 또한, 예제 프로젝트도 꽤 좋습니다. 이것만 잘 참고하고 복사해도 어느정도까지의 디자인은 따라할 수 있습니다.

나름 풍부한 예제 프로젝트들
나름 풍부한 예제 프로젝트들

 

특히 마켓플레이스를 통해 다른 사람이 구현해놓은 것을 참고할 수도 있습니다. 아직 수가 많지는 않습니다.

마켓플레이스에서 유료/무료로 서로가 만든 프로젝트를 공유할 수 있습니다.
마켓플레이스에서 유료/무료로 서로가 만든 프로젝트를 공유할 수 있습니다.

 

문서화도 잘 되어 있습니다. 플러터플로우 문서 페이지에 가면 개발에 필요한 사항들을 매우 세부적으로 써 놓았을 뿐만 아니라, 영상으로까지 제작해 놓았습니다. 그래서 별도의 강의가 없어도 혼자서 배우기 용이합니다.

유튜브와 함께 있는 문서화 페이지
유튜브와 함께 있는 문서화 페이지

 

심지어 커뮤니티도 있다. 이슈가 되는 부분 찾아보면 답변이 있는 경우도 없는 경우도 있습니다. 솔직히 충분하진 않지만, 어느정도 참고는 됩니다.

커뮤니티. 봇이 먼저 답을 다는 케이스 ㅋ
커뮤니티. 봇이 먼저 답을 다는 케이스 ㅋ

 

 

장점5. 업데이트가 빠르다.

지난 글에서 다룬 것이지만, 플러터플로우는 3년 사이 전혀 다른 툴이 되었습니다.

거의 2주~4주 단위로 업데이트가 되는데, 중요한 기능들이 추가됩니다.

플러터플로우 업데이트 뉴스 페이지. 2주일에 한번 정도 업데이트 하는듯?
플러터플로우 업데이트 뉴스 페이지. 2주일에 한번 정도 업데이트 하는듯?

 


 

위에는 장점만 적어서 아주 이상적으로 보이지만, 실제로 해보면 현실적인 단점과 한계도 꽤 많습니다. 

글을 읽는 분들께 최대한 도움이 되기 위해 솔직히 공유 드리자면 다음과 같습니다. 

 

 

단점1 : 배우는 것이 다른 노코드대비 쉽지 않다. 

플러터플로우는 노코드 툴이지만, 생각보다 어렵습니다.

직관적인 것은 사실이지만, 어쨌든 그 자체로 배워야 할 것이 많습니다. 

 

우선, 플러터플로우는 복잡한 로직까지 구현이 가능한 만큼, 플러터플로우 자체의 구현 방식을 익혀야 합니다.

체크박스의 Default 체크여부를 설정하는 방식. 플러터플로우 특유의 방법을 배워야 한다.
체크박스의 Default 체크여부를 설정하는 방식. 플러터플로우 특유의 방법을 배워야 한다.

또한, 플러터플로우는 하이브리드플랫폼인 '플러터'를 노코드로 구현하는 것인 만큼, 플러터 자체의 특징을 익혀야 합니다. 

예를 들어 여러 위젯을 Tree형태로 구성하는 것이 플러터의 기본 방식인데, 이 방식을 익혀야 합니다. 그리고 이를 위해 Column이 무엇인지, Row가 무엇인지 별도로 익혀야 하죠. 

Widget Tree가 왼쪽에 표시되어 있다. 
Widget Tree가 왼쪽에 표시되어 있다. 

처음에 간단한 것은 만들기 쉽지만, 복잡한 것을 만들다 보면, 생각대로 잘 안만들어 집니다. 

레이아웃 설정을 잘못하여 Overflow(화면 넘침)가 생긴 예
레이아웃 설정을 잘못하여 Overflow(화면 넘침)가 생긴 예

 

단점2 : 코드 만큼 자유롭진 않다. 

배우기가 쉽지 않지만, 다 배우면 모든 것을 구현할 수 있을까요?

그렇지 않습니다. 

 

예를 들어 플러터플로우에서 제공하는 Calendar 위젯을 살펴봅시다.

이 위젯은 캘린더의 색상을 바꿀 수 있고, 시작요일을 일요일이나 월요일로 설정할 수는 있습니다. 또 한 주만 보여줄 것인지, 한 달을 보여줄 것인지 설정할 수 있습니다.  

플러터플로우 캘린더위젯 설정하면
플러터플로우 캘린더위젯 설정하면

그런데, 영어를 한글로 바꾸고 싶다고 합시다. 또, 날짜 밑에 이벤트의 숫자를 표시하고 싶다고 합시다. 하지만, 그런 옵션은 없습니다. ㅎㅎ 별도로 자신만의 Calendar를 만들어야 합니다. 

 

그렇다면, 별도로 만드는 것이 쉬울까요?  화면 구성은 쉬운데, 세부적인 동작까지 다 만들기는 쉽지 않습니다. 

가장 큰 이유는 구현 가능한 로직이 제한적이기 때문입니다. 

예로 들어보면, 동작(Action)의 종류가 한정적입니다.

다른 노코드 툴에 비해 많긴 하지만, 일반적인 코딩에 비하면 턱없이 부족합니다. 코딩을 할 때 흔히 쓰는 length 같은 함수도 없습니다. 

Action은 오른쪽에 보이는 카테고리가 전부입니다. 100개 정도 될까요?
Action은 오른쪽에 보이는 카테고리가 전부입니다. 100개 정도 될까요?

이미 있는 동작 조차도 어느 정도 제약이 있습니다.

예를 들어, 푸시알림은 플러터플로우 설정상 로그인이 되어 있어야만 가능합니다.

하지만 로그인이 없는 앱에서 알림을 하는 동작은 없습니다. 

 

결국은, 진짜로 원하는 것을 구현하려면 Custom Function을 통하여 코드로 구현해야 하는데요.

코드와 편집기를 왔다갔다 하면 오히려 코드보다 더 구현이 복잡해지거나, 때로는 불가능하기도 합니다. ㅎㅎ

 

결국, 단점 1과 2를 종합하면 아래와 같은 그림이 나옵니다.

배우기는 그렇게 쉽지 않지만, 구현의 자유도는 그렇게 높진 않은 ㅎㅎ 

 

배우기는 어렵지 않지만, 자유도는 그렇게 높지 않습니다. 
배우기는 어렵지 않지만, 자유도는 그렇게 높지 않습니다. 

 

 

단점3. 플러터플로우 자체의 불안정적인 면이 있다.

앞서 말했듯, 플러터플로우는 2주에 한번씩 업데이트 되고, 문서가 친절하긴 합니다.

하지만 문서대로 했는데도 되지 않거나, 문서가 현재 플러터플로우 설명과 다른 경우도 있습니다. 

예를 들어, 구글 로그인의 경우, 문서대로 그대로 구현했음에도, 테스트모드에서 작동하지 않습니다. 그래서 매번 실제로 빌드하여 해야하며, 2~4분 정도의 빌드시간이 소요됩니다. 

그렇다고 이런 버그에 대한 인터넷 상의 문서도 그렇게 많은 편이 아닙니다. 상담원도 모를 때가 많구요. 

그러면 결국 혼자 알아내야 할 때가 있는데요. 

그러다보면, 내가 잘못 짠 것인지, 플러터플로우의 버그인지 알아내며 시간을 보내야 할 때가 많습니다. 

 

 

 

단점4. K-Culture에 최적화되지 않았다.

실명인증, 공동인증서 인증, 각종 페이를 통한 결제 등은 해외에서는 잘 사용되지 않는, 한국 만의 서비스들 입니다.

이 때 버블 같은 경우는 여러 노하우가 한국 커뮤니티에서 쌓였습니다. 

하지만 플러터플로우 같은 경우는 노하우가 아직 쌓이지 않아서, 그런 모듈을 붙이는 데에 시행착오가 있습니다.  

이 점은 시간이 지나면서 해결이 될 수 있겠네요. 

 


 

플러터플로우는 장점이 많지만, 아직 단점도 많은 툴입니다.

위와 같은 점을 참고하셔서 플러터플로우가 현재 상황에 최적의 툴인지 고민하면 좋을 것 같습니다.  

 

 

 

* 플러터플로우를 배우고 싶은가요? 인프런에서 플러터플로우 입문강의를 들을 수 있습니다.   무료강의만 들어도 감을 잡을 수 있을 거에요!

* 플러터플로우에 관해 궁금한 점은 채팅으로 물어보세요!

 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

피어낫프로덕 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !

© 2024 피어낫프로덕

좋은 프로덕트가 피어날 수 있는 인사이트를 공유합니다. Fear Not Product.

자주 묻는 질문 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관 | 070-8027-2840