피어낫프로덕
코드없이 한달안에 앱을 만든다? 플러터플로우의 솔직한 장단점
본 글은 피어낫프로덕 뉴스레터에 발행되었습니다.
피어낫프로덕은 정신없는 디지털 세상을 균형잡고 살아가기 위한 인사이트를 나눕니다. (구독하기)
요약
플러터플로우는 코드 없이 플러터 앱을 만들어주는 노코드 툴입니다.
장점으로는 : 쉽고 직관적이어서 빠르게 앱을 만들 수 있습니다. 코드 삽입도 가능하여 향후 코드 전환도 됩니다. 돈도 시간도 지식도 없는 상황에서, MVP를 만들기에 적합합니다.
단점으로는 : 배우기엔 그렇게 쉽지 않지만, 그렇다고 자유도가 코드처럼 높지는 않습니다. 또한, 플러터플로우 자체의 버그도 있으며, 한국 문화에 최적화되진 않았습니다.
플러터플로우?
플러터플로우 앱을 코드 없이 만들어주는 서비스입니다.
하이브리드 앱인 플러터로 만들어지며, 코드전환도 할 수 있죠.
2022년부터 시작해 빠르게 성장해 현재 노코드 앱빌더 중 1위이며, 버블과도 순위가 크게 차이 나지 않습니다.
개인적으로, 지금까지 플러터플로우를 이용해 5개 정도의 앱을 만들었는데요.
왜 플러터플로우를 사용하게 되었고, 장단점은 무엇일까요?
모든 것을 솔직하게 공유 하자면 다음과 같습니다.
돈도, 시간도, 기술도 없었기 때문에
우선, 어떤 순간에 플러터플로우를 채택해서 쓰게 되었을까요?
두 가지 저의 경험을 다뤄봅니다.
<사례1 : AI 초상화 서비스>
당시 인공지능 업체인 알레시오에 프로덕트 컨설팅을 하고 있었고, 새로운 이미지변환 AI 서비스를 통해 수익화를 꾀하고 있었습니다.
이를 위해 최신 이미지 생성 앱인 Lensa를 벤치마킹하여, AI 초상화 앱을 만들고자 했습니다.
다만, 당시 회사에서는 개발자 모두 앱에 대한 제작 경험이 없었습니다. 외주를 쓸 자금도 있지 않았죠.
무엇보다도, AI 초상화는 유행을 타고 있었기 때문에, 빨리 출시를 했어야 했습니다.
즉, 돈도 없고 시간도 없고 기술도 없었습니다.
이 때 떠올린 것이 플러터플로우 였습니다.
노코드이기 때문에 빨리 배우고 만들 수 있었고, 향후 플러터 코드 베이스로 넘어갈 수 있었으니까요.
결과적으로, 앱 개발 경험이 없는 상태에서 빠르게 배우고 만들어, 5주 정도 만에 앱을 런칭할 수 있었습니다.
(글은 이렇게 쉽게 썼지만, 실제로는 인앱결제를 위해 별도의 코드를 억지로 넣느라 시행착오가 있었고, 그 영향은 향후 길게 이어졌습니다. 이는 향후 기회가 되면 언젠가 자세히 다루겠습니다....)
<사례2 : 시간품앗이 사이드 프로젝트>
개인적으로 사이드 프로젝트를 하다가도 비슷한 상황에 직면했습니다.
품앗이 앱을 실험하고 싶었는데, 저 개인으로서는 돈도 없고 시간도 없었고, 앱개발 기술도 없었습니다.
결국 플러터플로우를 사용해서 만들었습니다.
회원가입과 글쓰기, 품앗이 기록하기, 채팅 등의 기능이 들어갔습니다.
처음 만들기부터 최종 배포까지 5주 정도 걸렸습니다.
안타깝게도, 위 두 사례 모두, 결과적으로는 첫 출시시 성공하지 못했습니다. ㅎㅎ
하지만, 그래서 더 다행이었다고 생각합니다.
만약 위 두 사례에서 바로 개발을 했다면...
* 외주로 했다면 최소 2천만원 이상의 비용이 들었을 것입니다.
* 직접 플러터를 배워서 했다면, 문법을 익히는 데만 두달, 구현하는 데에 두달 이상이 걸렸을 것입니다.
그래서 실패를 했다면, 더 큰 비용을 썼겠죠.
노코드를 통해 MVP 런칭 및 검증까지 최소 비용으로 실패를 할 수 있었습니다.. 😅
자, 그럼 실제로 사용한 플러터플로우는 어땠을까요?
직접 배포까지 해보면서 느낀 플러터플로우의 장단점들을 솔직하게 공유합니다.
장점1. 엄청나게 직관적이다! 코드가 아닌, 그래픽이기 때문에
플러터플로우는 모든 요소들이 코드가 아닌, 그래픽 입니다.
드래그&드랍을 통해 레이아웃을 만들고, 버튼으로 옵션값을 입력합니다.
모든 것이 직관적으로 보이고, 변수도 자동으로 연동되기 때문에 변수 이름을 규정할 필요가 없습니다.
그래서 개발 속도가 엄청나게 빨라집니다. 향후 QA할 때도 속도가 엄청나게 빨랐는데, 버그 하나당 리포트 후 5분 안에 고치기도 했습니다.
장점2. 최적의 세팅과 연동을 도와준다.
플러터플로우에서는 앱 개발을 위해 ‘이렇게 세팅해서 쓰세요’ 하는 설정값을 제공합니다.
예를 들어 디자인 시스템이나 색상을 선택할 때, 쉽게 세팅할 수 있을 뿐만 아니라, Figma나 Cooler같은 서비스와 연동하여 가져올 수도 있습니다.
또한 서버 세팅시, 클릭 한번에 바로 Firebase를 만들어 연동할 수도 있습니다. 이를 통해 별도의 백엔드 연동 절차를 줄여줍니다.
또한, API를 주고 받는 것도 가능합니다.
그 외 Google Analytics와 연동하여 추적을 할 수 있고, Github와 연동하여 코드 Push도 가능하며, AdMob과 연동하여 광고도 달 수 있습니다. 또 구글플레이/앱스토어에 배포시에도 CodeMagic을 이용하여 클릭 한 번에 배포가 되기도 합니다.
그래서 앱 개발 환경과 세팅에 대해 잘 모르는 사람도 큰 어려움 없이 세팅을 해 나갈 수 있습니다.
장점3. 코드 삽입과 활용이 매우 유연하다.
노코드 앱은 드래그앤드랍을 이용하지만, 그에 따라 코드 만큼 자유롭지는 않을 수 있습니다.
플러터플로우는 플러터로 만들어져 있으며, 플러터 코드와 오갈 수 있게 하여 그 단점을 커버합니다.
우선, 모든 페이지에서 자동으로 생성된 코드를 볼 수 있으며, 코드 다운로드가 가능합니다.
이를 통해, 플러터플로우로 디자인하고, 코드를 다운로드 후 코드로 개발 로직을 쓰는 방식도 해외에서 사용되기 시작했으며, 꽤 효율적이라고 들었습니다.
또, 플러터플로우에 없는 기능들에 대해서는 직접 코드를 삽입하여 만들 수도 있습니다.
Custom Code, Custom Widget, Custom Action을 통해 별도의 코드가 가능합니다.
장점4. 친절하다.
전반적으로 플러터플로우는 노코드툴이지만 로우코드에 가까운 만큼, 쉽게 진입하고 배우게 하기 위해 노력을 많이 했습니다.
일단, 튜토리얼이 좋습니다. 이것만 잘 따라가도 기본적인 기능은 익힐 수 있습니다. 또한, 예제 프로젝트도 꽤 좋습니다. 이것만 잘 참고하고 복사해도 어느정도까지의 디자인은 따라할 수 있습니다.
특히 마켓플레이스를 통해 다른 사람이 구현해놓은 것을 참고할 수도 있습니다. 아직 수가 많지는 않습니다.
문서화도 잘 되어 있습니다. 플러터플로우 문서 페이지에 가면 개발에 필요한 사항들을 매우 세부적으로 써 놓았을 뿐만 아니라, 영상으로까지 제작해 놓았습니다. 그래서 별도의 강의가 없어도 혼자서 배우기 용이합니다.
심지어 커뮤니티도 있다. 이슈가 되는 부분 찾아보면 답변이 있는 경우도 없는 경우도 있습니다. 솔직히 충분하진 않지만, 어느정도 참고는 됩니다.
장점5. 업데이트가 빠르다.
지난 글에서 다룬 것이지만, 플러터플로우는 3년 사이 전혀 다른 툴이 되었습니다.
거의 2주~4주 단위로 업데이트가 되는데, 중요한 기능들이 추가됩니다.
위에는 장점만 적어서 아주 이상적으로 보이지만, 실제로 해보면 현실적인 단점과 한계도 꽤 많습니다.
글을 읽는 분들께 최대한 도움이 되기 위해 솔직히 공유 드리자면 다음과 같습니다.
단점1 : 배우는 것이 다른 노코드대비 쉽지 않다.
플러터플로우는 노코드 툴이지만, 생각보다 어렵습니다.
직관적인 것은 사실이지만, 어쨌든 그 자체로 배워야 할 것이 많습니다.
우선, 플러터플로우는 복잡한 로직까지 구현이 가능한 만큼, 플러터플로우 자체의 구현 방식을 익혀야 합니다.
예를 들어, 아래 그림처럼 체크박스의 Default 체크여부를 설정하는 방식은 플러터플로우 특유의 방법을 배워야 합니다.
또한, 플러터플로우는 하이브리드플랫폼인 '플러터'를 노코드로 구현하는 것인 만큼, 플러터 자체의 특징을 익혀야 합니다.
예를 들어 여러 위젯을 Tree형태로 구성하는 것이 플러터의 기본 방식인데, 이 방식을 익혀야 합니다. 그리고 이를 위해 Column이 무엇인지, Row가 무엇인지 별도로 익혀야 하죠.
처음에 간단한 것은 만들기 쉽지만, 복잡한 것을 만들다 보면, 생각대로 잘 안만들어 집니다. 아래는 레이아웃 설정을 잘못하여 Overflow(화면 넘침)가 생긴 예입니다.
단점2 : 코드 만큼 자유롭진 않다.
배우기가 쉽지 않지만, 다 배우면 모든 것을 구현할 수 있을까요?
그렇지 않습니다.
예를 들어 플러터플로우에서 제공하는 Calendar 위젯을 살펴봅시다.
이 위젯은 캘린더의 색상을 바꿀 수 있고, 시작요일을 일요일이나 월요일로 설정할 수는 있습니다. 또 한 주만 보여줄 것인지, 한 달을 보여줄 것인지 설정할 수 있습니다.
그런데, 영어를 한글로 바꾸고 싶다고 합시다. 또, 날짜 밑에 이벤트의 숫자를 표시하고 싶다고 합시다. 하지만, 그런 옵션은 없습니다. ㅎㅎ 별도로 자신만의 Calendar를 만들어야 합니다.
그렇다면, 별도로 만드는 것이 쉬울까요? 화면 구성은 쉬운데, 세부적인 동작까지 다 만들기는 쉽지 않습니다.
가장 큰 이유는 구현 가능한 로직이 제한적이기 때문입니다.
예로 들어보면, 동작(Action)의 종류가 한정적입니다.
다른 노코드 툴에 비해 많긴 하지만, 일반적인 코딩에 비하면 턱없이 부족합니다. 코딩을 할 때 흔히 쓰는 length 같은 함수도 없습니다.
아래 이미지는 Action을 나타내는데, 오른쪽에 보이는 카테고리가 전부입니다. 대충 100개 정도 되는 듯?
이미 있는 동작 조차도 어느 정도 제약이 있습니다.
예를 들어, 푸시알림은 플러터플로우 설정상 로그인이 되어 있어야만 가능합니다.
하지만 로그인이 없는 앱에서 알림을 하는 동작은 없습니다.
결국은, 진짜로 원하는 것을 구현하려면 Custom Function을 통하여 코드로 구현해야 하는데요.
코드와 편집기를 왔다갔다 하면 오히려 코드보다 더 구현이 복잡해지거나, 때로는 불가능하기도 합니다. ㅎㅎ
결국, 단점 1과 2를 종합하면 아래와 같은 그림이 나옵니다.
배우기는 그렇게 쉽지 않지만, 구현의 자유도는 그렇게 높진 않은 ㅎㅎ
단점3. 플러터플로우 자체의 불안정적인 면이 있다.
앞서 말했듯, 플러터플로우는 2주에 한번씩 업데이트 되고, 문서가 친절하긴 합니다.
하지만 문서대로 했는데도 되지 않거나, 문서가 현재 플러터플로우 설명과 다른 경우도 있습니다.
예를 들어, 구글 로그인의 경우, 문서대로 그대로 구현했음에도, 테스트모드에서 작동하지 않습니다. 그래서 매번 실제로 빌드하여 해야하며, 2~4분 정도의 빌드시간이 소요됩니다.
그렇다고 이런 버그에 대한 인터넷 상의 문서도 그렇게 많은 편이 아닙니다. 상담원도 모를 때가 많구요.
그러면 결국 혼자 알아내야 할 때가 있는데요.
그러다보면, 내가 잘못 짠 것인지, 플러터플로우의 버그인지 알아내며 시간을 보내야 할 때가 많습니다.
단점4. K-Culture에 최적화되지 않았다.
실명인증, 공동인증서 인증, 각종 페이를 통한 결제 등은 해외에서는 잘 사용되지 않는, 한국 만의 서비스들 입니다.
이 때 버블 같은 경우는 여러 노하우가 한국 커뮤니티에서 쌓였습니다.
하지만 플러터플로우 같은 경우는 노하우가 아직 쌓이지 않아서, 그런 모듈을 붙이는 데에 시행착오가 있습니다.
이 점은 시간이 지나면서 해결이 될 수 있겠네요.
플러터플로우는 장점이 많지만, 아직 단점도 많은 툴입니다.
위와 같은 점을 참고하셔서 플러터플로우가 현재 상황에 최적의 툴인지 고민하면 좋을 것 같습니다.
* 플러터플로우를 배우고 싶은가요? 인프런에서 플러터플로우 입문강의를 들을 수 있습니다. 무료강의만 들어도 감을 잡을 수 있을 거에요!
* 플러터플로우에 관해 궁금한 점은 채팅으로 물어보세요!
* 플러터플로우 가입시 활용하면 좋을 레퍼럴 링크입니다.
* 피어낫프로덕 뉴스레터에서 프로덕트 인사이트를 받아보세요. (구독하기)
1. 22. (월) 대전 시작점에서 대전 청년창업사관학교 오프라인 1회차 사업 설명회를 진행합니다.
