FlutterFlow의 도움으로 AI로 구동되는 모바일 앱을 만드세요. 계정 생성부터 앱 디자인, 머신러닝 추가에 이르기까지 단계별 가이드를 따르세요.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: FlutterFlow 계정 생성
우선 FlutterFlow에서 계정을 만들어야 합니다. FlutterFlow 웹사이트를 방문하고 "Get Started for Free"를 클릭하세요. 가입 페이지로 이동하여 Google 또는 GitHub 계정을 이용해 계정을 생성하거나, 이름, 이메일, 비밀번호를 입력한 후 "Create New Account"를 선택하여 계정을 생성할 수 있습니다.
2단계: 새 프로젝트 생성
로그인 후에 대시보드로 이동하게 됩니다. 새로운 Flutter 앱을 만들려면 대시보드 오른쪽 상단에 있는 "Create App" 버튼을 클릭하세요. 프로젝트의 이름을 입력하라는 메시지가 표시됩니다. 적절한 이름을 입력한 후 "Create"를 클릭하세요.
3단계: 앱 디자인
FlutterFlow는 직관적인 인터페이스 레이아웃 빌더를 제공하여 애플리케이션을 디자인할 수 있습니다. 왼쪽 사이드바의 "Design" 탭으로 이동하세요. 여기에서 화면을 추가하고, 네비게이션을 설정하고, 앱의 레이아웃을 디자인할 수 있습니다.
"+ Add Screen"을 클릭하여 앱의 메인 화면을 생성하세요. 템플릿을 선택하거나 처음부터 사용자 정의 화면을 생성할 수 있습니다. 화면에 요소를 추가한 후 각 요소를 클릭하고 설정 사이드바를 사용하여 사용자 정의 할 수 있습니다.
4단계: Firestore 데이터베이스 설정
앱의 인터페이스를 설정한 이제 Firestore 데이터베이스와 통합해야 합니다. 이를 위해 사이드바의 "Backend" 탭으로 이동한 다음 "Firestore DB"를 클릭하세요.
"Add Collection"을 클릭하여 새 컬렉션을 생성하세요. 각 컬렉션 별로 앱의 정보를 저장할 문서와 필드를 생성해야 합니다. 저장할 데이터에 따라 각 필드의 이름과 유형을 설정하세요.
FlutterFlow는 데이터베이스의 보안 규칙을 설정할 수 있습니다. "Database Rules"를 클릭하면 데이터베이스에서 데이터를 읽거나 쓰거나 업데이트 또는 삭제할 수 있는 사람을 설정할 수 있습니다.
5단계: 기계학습 또는 AI 통합
FlutterFlow는 기계 학습 모델을 직접 생성하는 기능을 제공하지 않지만, Firebase의 기계 학습 API, 예를 들어 ML Kit와 통합할 수 있습니다. 이것은 텍스트 인식, 얼굴 검출, 바코드 스캔, 이미지 라벨링 등의 기기 내 API를 제공합니다.
이러한 API를 통합하려면 "Backend" 탭으로 이동한 다음 "Firebase"를 클릭하세요. 프로젝트에 필요한 Firebase ML API를 지정하세요.
예를 들어 이미지 인식을 위한 기계 학습 모델을 학습시키려면 Google Cloud의 AutoML을 사용하여 모델을 학습시킨 후 Firebase에 모델을 업로드해야 합니다.
6단계: 사용자 상호작용 추가
기계 학습 모델이 준비되면, 모델과 상호작용하는 앱 내 상호 작용 요소를 생성하는 것이 다음 단계입니다. 이미지를 캡처하는 버튼이나 입력 텍스트를 받는 텍스트 필드 등이 될 수 있습니다.
사이드바의 "Design" 탭에서 인터페이스 요소를 클릭하고 설정 사이드바의 "Actions"로 이동하세요. 다른 화면으로 이동하거나 백엔드 쿼리를 만들거나 기계 학습 모델과 상호작용하는 등 다양한 상호작용을 추가할 수 있습니다.
7단계: 앱 생성 및 출시
AI 기능을 설정하고 애플리케이션의 인터페이스를 디자인하면 이제 사이드바 하단의 "Generate Code" 버튼을 클릭하여 앱의 Flutter 코드를 쉽게 생성할 수 있습니다. 이렇게 하면 애플리케이션의 전체 클린 Flutter 코드가 포함된 zip 파일이 생성됩니다.
파일을 압축 해제하고, 선호하는 코드 편집기(예: Visual Studio Code 또는 Android Studio)에서 열고, 에뮬레이터에서 애플리케이션을 실행하여 작동하는지 확인하세요. 모든 것이 완벽하게 작동하면 iOS 또는 Android용 애플리케이션을 빌드할 수 있습니다.
또한 Flutter는 웹 애플리케이션을 만들 수 있으므로 동일한 코드 베이스로 웹에 애플리케이션을 배포할 수 있습니다.
8단계: 반복
애플리케이션을 테스트하면서 특정 기능이나 디자인을 변경해야 할 수 있습니다. FlutterFlow는 FlutterFlow 인터페이스에서 컴포넌트를 변경하거나 추가하거나 제거하여 반복할 수 있는 기능을 제공하고, 그런 다음 새 코드를 생성합니다.
이 단계를 완료하면 기계학습 또는 인공지능으로 구동되는 모바일 애플리케이션을 FlutterFlow로 성공적으로 생성한 것입니다.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.