소개
GTPers에 처음 글씁니다!
게으름때문에.. 계속 미루다가 간단하게라도 써야겠다 싶어서 핵심만 써봅니다 ㅎㅎ
MVP개발을 위한 노코드 툴 중에 국내에서는 아직 많이 쓰지 않는 flutterflow 간단히 소개하고,
의외로(?) 쓸만한 AI기능들 소개합니다.
간단하게 많은 노코드툴 중 flutterflow를 선택한 이유는 노코드로 만들어도 코드를 보고 싶고,
확장성도 좋은 툴이 있으면 좋겠다 했는데 flutterflow가 딱이었어요!
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
노코드 소개도 많아서 flutterflow를 꼼꼼하게 소개하진 않을께요 ㅎㅎ
flutter개발을 visual로 할 수 있는 플랫폼이라고 생각하시면 됩니다!
아이콘들을 화면에 배치해서 내가 원하는 앱을 구현하면 flutter코드가 되는거죠!
근데 요즘 AI로 개발하는 내용들을 보면 여전히 높은 문턱은 역시 코드를 봐야한다!
였습니다..
chatGPT, claude 등등 뭔지 모르겠고 돌아가는 코드라니까 실행은 해보는데..
심지어 돌아도 가는데.. 왜 돌아가는지는 모르는거죠 ㅠㅠㅎㅎ
그래서 코드를 모르는 사람도 좀더 쉽고 편하게 쓰면 좋겠다 싶었는데,
flutterflow에서 그 기능을 제공하고 있습니다!
(라는 글을 10월 정도에 쓰려다가 해를 넘겨버렸습니다 ㅠㅠ 게으름..)
스크린샷 정리하다보니 화면이 적지 않으니 ㅠ 빠르게 본문으로..
flutterflow를 하시는 분들도 의외로(왜?!) 잘 안쓰시는 기능인거 같은데..
저 메뉴를 통해서 AI기능을 빠르게 사용해볼 수 있습니다.
* 대신 여러 기능들이 한번에 우르르 나오진 않아요!
사용법은 간단합니다.
만들고 싶은 페이지에 대한 내용을 입력해주면 되요! 끝!!
페이지 생성됩니다.. 두구두구
요렇게 만들어주네요! 제가 보기엔 엄청 훌륭하다 까지는 아니어도 꽤 무난(?)한데? 정도는 되보여요!
제가 디자인 DNA는 없어서 저정도 뽑으려면 최소 환생은 해야겠네요 ㅠ
적당히 마음에 드시면 페이지 이름 넣고 저장해주시면 됩니다!
그럼 flutterflow에 코드가 아닌 기능icon의 tree형태로 저장되는걸 보실 수 있습니다.
생성된 페이지가 통째로 마음에 안들면 프롬프트를 수정해야겠지만,
세세하게 수정이 필요할 경우에는 이게 더 낫겠더라고요!
만들어진 페이지에 특정 요소가 더 들어가면 좋겠다 싶을때도 있을텐데요
그럴때 사용하기 좋은 기능이 "Page Autocomplete"입니다.
이 메뉴고요..
Page의 설명을 좀 더 붙여주고 실행하면 구체적인 결과로 나타내줍니다.
(심지어 아무 입력이 없어도 알아서 만들어주기도 해요!)
저는 제품의 리뷰관련 내용을 더 넣어달라고 해봤어요!
또 일합니다 AI..
처음에 생성했을때 없었던 제품 리뷰 화면이 구성되었어요!
Page Creation과 다른 부분을 눈치채셨나요?
슬라이더가 생긴 것을 보실 수 있어요!
실제로 화면을 구성할때 시간순으로 만들어져서 too much하면 줄일 수도 있습니다!
그런데 디자인이 뭔가 마음에 들지않아!
figma에도 그려놨는데 말야!
이럴때는 디자인된 요소를 시간들여 맞춰주는 것대신 이 기능도 써보세요!
"Sketch to Component"
이게 Sketch라고 써있어서 Figma도 아니고 언제적 Sketch를 연동하는거지? 하시는 분도 봤어요 ㅎㅎ
하지만 그 Sketch 아니고 이미지 전반이라고 읽도록 하죠 ㅎㅎ
Figma에서 그려놓은거 통째로 한번 넣어보죠..
네.. 뭐 적당히 비슷하게 나온거 같긴 합니다 (그렇지 않나요?)
역시 tree로 세부수정할 수 있습니다!
그리고 디자인 만들지 않았는데 손으로 그려서 뭐 이런 화면 있자나요?
그런건 손으로 그리면 됩니다!
이렇게 개떡같이 그려도..
어휴 못그렸네 ㅠㅠ
이정도로 적당히는 뽑아줍니다 ㅎㅎㅎ
간격이나 기타 등등 조절할거 있으면 프롬프트 없이 직접 하시면 됩니다 🙂
App 만드는데 시간 걸리는 작업들을 AI가 많이 도와줘서 좋긴한데, 결국 기능을 붙여야 하자나요?
그 기능도 역시!! 발표는 했지만 아직 공식 배포되진 않은 상태입니다 ㅠ
저도 제일 기다리는 기능인데 아직 좀 기다려야될거 같아요 ㅠㅠㅎㅎ
(빨리 나와라)
동작하는 데모를 보고 싶으시면
https://www.youtube.com/live/3-OggW44lHc?si=JFhrJtiRqffWUFAg&t=4222
노코드의 단점 중 하나가 제한된 기능 안에서 구현할 수 있다는 점인데,
flutterflow는 제공되지 않는 기능은 custom code로 붙일 수 있습니다.
vscode, cursor랑도 연동할 수 있으니 노코드로 MVP구현하고
flutterflow에서 지원되지 않는 기능들 구현이 필요하게 되면 custom code로 붙이면 됩니다 ㅎㅎ
결과와 배운 점
전 아름아름 기능들 잘 쓰고 있는데 모르시거나 안쓰시는 분들이 꽤 있는거 같아서
조금 길게 기능 소개를 했습니다.
그리고 처음 하시는 분들께도 속도향상 측면에서는 도움이 되지 않을까 싶어요!
*그래도 디테일까지 잘 만지려면 어느정도 공부는 필요한 것 같습니다 ㅎㅎ
물론 기능 도입 초기라 동작하지 않을때도 있고,
원하는 결과가 나오지 않는 경우도 있죠 ㅠ
이건 프롬프트 요령을 좀더 익혀야 될 것 같아요!
개인적으로 개발 아이디어가 좀 많아서 ㅠㅠ
엄청 간단한 기능의 App은 디자이너 없이 몇개 만들어보려고 해요!
이건 자주 가는 작은 도서관 재고 파악하면서 내가 읽고 싶은 책 찜해둘 수 있는 기능을 만들고 있는거애요!
하지만 이놈의 게으름..
멱살잡고 끌어주실 분 있으면 더 좋긴 하겠습니다 ㅎㅎ
(이 글도 올려놓고 3일만에 올리는건데.. 잘 올라가겠지..??)
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)