플러터 플로우(FlutterFlow)-노코드 툴로 코드 한줄 없이 앱 개발하기

최근에 주위에서 이걸로 노코드 앱개발을 많이 하길래 찾아보았다.

플러터플로우(FlutterFlow)란?

---

플러터플로우를 알기 위해선 먼저 플러터(Flutter)에 대해서 알아야 한다.

🤔플러터?

구굴에서 개발한 크로스 플랫폼 프레임워크이다. 안드로이드와 IOS앱을 동시에 호환되는 앱을 만들수 있다.

 

😎플러터 플로우

플러터를 기반으로 만들어진 노코드, 로우코드 프레임워크다. 플러터는 코드를 직접 작성해야 되서 진입장벽이 높다. 하지만 플러터 플로우는 이 플러터를 코드한줄 없이 직관적인 UI로 사용해 앱을 만들수 있게 한다. 코딩은 못하는데 아이디어는 넘쳐나는 사람이나 그림쟁이들이 사용하면 좋다. (플러터 dart코드를 직접 작성할수도 있어서 날먹하고 싶은 기존 개발자들도 사용가능)

 

https://www.flutterflow.io/ <-링크

장단점

---

👍장점

내가 한번 써봤는데 정말 쉽다! 모든게 시각적인 UI로 되어있어 공식 문서도 안읽고 바로 들어가서 버튼 몇번 눌러보면 사용법을 알수 있었다. 복잡한 기능같은 경우에서 다 미리 구현되어있어 그냥 버튼하나 만들고 얘가 무슨기능 하는지 지정만 해주면 된다.(기본 기능 파트에서 자세히) 코딩의 개념조차 모르는 사람도 블럭조립하듯 앱을 만들수 있다. 

👎단점

한국어 지원이 안된다. 기본적으로 영어고 관련 문서나 정보도 다 영어로 작성되어 있을 경우가 크다. (이래서 영어공부는 어딜가나 필수) 써보면서 느낀점으로 아직 많이 쓰는사람이 적어서 그런지 정보가 적은 편이다. gpt도 몰라서 안도와준다.  룰렛 만드는데 하루걸렸다.

 

기본 기능

---

1. 시각적 UI 빌더

-드래그 앤 드롭 방식으로 위젯 배치
-수천 개의 Flutter 위젯 제공 (Text, Image, ListView, Stack 등)
-페이지 간 네비게이션 설정 가능 (화살표로 이어진 그림으로 볼수있다.)
-다크모드/라이트모드 지원
-반응형 디자인 지원 (모바일/태블릿/웹)

2. 컴포넌트 재사용

-여러 페이지에서 사용할 공통 UI를 컴포넌트로 저장하고 재사용 가능
-사용자 정의 위젯 추가 가능

3. Firebase 통합

-Firestore: 실시간 데이터베이스
-이메일, 구글, 애플 등 로그인 기능 (인증이 겁나쉽다.)
-이미지/파일 업로드
-Firebase Functions 호출 가능

4. API 연결 기능

-외부 REST API 연결 가능 (GET, POST 등)
-JSON 응답을 바인딩하여 앱 내 데이터로 사용 가능
-API 인증 (Token, Header 설정 등) 지원

5. 앱 로직 & 액션 빌더

-조건문, 변수 설정, 반복문 등 기본적인 앱 로직 구성 가능
-버튼 클릭 시 실행되는 액션(예: 페이지 이동, 데이터 저장 등)을 버튼 옵션으로 설정 가능

6. 로컬 상태 관리

-앱 내에서 사용하는 변수(상태)를 설정하고 관리 가능 (기본적인 데이터 타입만 알아도 충분)
예: 로그인 상태, 토글 상태, 텍스트 입력 값 등

7. 애니메이션 및 트랜지션

-다양한 기본 애니메이션 제공 (Fade, Slide 등)
-페이지 전환 애니메이션 설정 가능

8. 테스트 및 미리보기

-실시간 앱 프리뷰 가능
-iOS, Android 기기에서 테스트 가능
-Web 브라우저에서 앱 시뮬레이션 가능

9. Flutter 코드 자동 생성

-디자인한 앱의 Flutter 코드 전체를 자동 생성
-GitHub 연동하여 코드 관리 가능
-직접 코드를 수정하고 커스텀 위젯 삽입 가능

10. 앱 빌드 및 배포

-Android (APK, AAB), iOS (IPA) 빌드
-Web 빌드도 지원
-Firebase Hosting 연동 가능
-TestFlight 및 Play Store 배포 지원

 

//다음 글에선 플러터의 기본 사용법을 다뤄볼 예정이다.