FlutterFlow를 사용하여 iOS와 Android 장치 모두에서 사용할 수 있는 크로스 플랫폼 모바일 앱을 어떻게 만들 수 있나요?

1단계: 새 FlutterFlow 프로젝트 생성

FlutterFlow로 모바일 앱을 생성하기 위해 공식 FlutterFlow 웹사이트로 이동하고 Google 계정으로 로그인합니다. 로그인한 후 대시보드에서 새 프로젝트 생성 옵션을 클릭합니다.

2단계: 프로젝트 이름 및 플랫폼 선택

_새 프로젝트 생성_을 클릭하면 새 팝업 창이 나타납니다. 여기에서 프로젝트 이름을 입력하고 프로젝트의 유형을 _Mobile_로 선택합니다.

3단계: 프로젝트 템플릿 선택

프로젝트 설정을 입력하면 템플릿 페이지로 이동하게 됩니다. 여러분은 프로젝트를 아예 처음부터 시작하거나 FlutterFlow 미리 정의된 템플릿 중에서 선택할 수 있습니다. 편리함을 위해, 개발하고자 하는 앱 유형에 가장 근접한 템플릿을 선택할 수 있습니다. 선택한 후, 화면 하단에서 프로젝트 생성 을 클릭합니다.

4단계: FlutterFlow 작업공간 이해하기

프로젝트 생성이 완료되면 FlutterFlow 작업공간으로 이동하게 됩니다. 이 작업공간은 여러 부분으로 나뉩니다:

• 왼쪽 패널: 여기에서는 _디자인_과 백엔드 옵션을 찾을 수 있습니다. 디자인 옵션은 앱의 인터페이스를 디자인하는 곳이고 백엔드 옵션은 앱의 기능을 구현하는 곳입니다.
• 메인 캔버스: 여기에서는 화면에 위젯을 드래그 앤 드롭하여 앱의 UI를 디자인합니다.
• 오른쪽 패널: 이 패널에는 선택된 위젯의 속성을 사용자 정의하는 다양한 옵션이 있습니다.

5단계: 앱의 UI 디자인하기

왼쪽 패널의 디자인 탭에서 UI 빌더 옵션을 클릭합니다. 이제 캔버스에 원하는 위젯을 드래그 앤 드롭하여 앱의 첫 페이지를 생성할 수 있습니다. 위젯을 추가하려면 먼저 클릭하여 선택합니다. 그런 다음, 위젯을 더블 클릭하거나 캔버스에 드래그 앤 드롭합니다. 오른쪽 패널에서 위젯의 속성을 원하는 대로 조정합니다.

6단계: 추가 페이지 생성

앱에 더 많은 페이지를 만들려면 왼쪽 패널의 페이지 섹션 옆에 있는 + 기호를 클릭합니다. 그런 다음 5단계와 동일한 절차로 위젯을 추가합니다.

7단계: 위젯에 액션 추가

위젯에 액션을 추가하면 이벤트가 발생했을 때 선택한 작업을 수행하게 됩니다. 위젯을 선택하고 On Tap 섹션의 오른쪽 패널에서 액션 추가 버튼을 클릭합니다.

8단계: 백엔드 연결

UI 디자인을 완료하면 앱의 백엔드 개발로 이동할 수 있습니다. 왼쪽 패널의 백엔드 탭을 클릭하고, FlutterFlow에서 제공하는 백엔드인 _Firestore_를 선택합니다. 여기에서 Firestore의 클라우드 기반 NoSQL 데이터베이스를 사용해 앱의 데이터 구조를 정의할 수 있습니다.

9단계: 백엔드와 앱의 통합

백엔드를 앱과 통합하려면 다시 디자인 탭으로 이동합니다. 여기에서 위젯 옆의 오른쪽 패널에서 _ellipsis icon (…)_을 클릭하여 백엔드 함수에 접근합니다. 그런 다음 적절한 액션을 선택하고, 해당 Firestore 함수에 연결합니다.

10단계: FlutterFlow와 Firebase 설정

앱을 출시하기 전에 Firebase와 FlutterFlow를 연결하게 되어야 합니다. 왼쪽 패널의 설정 탭으로 이동합니다. Firebase 구성 옵션을 찾기 위해 아래로 스크롤하고, Firebase 프로젝트 자격 증명을 입력합니다.

11단계: 앱 출시

Firebase 구성이 완료되면 FlutterFlow 작업공간 오른쪽 상단에 있는 _출시_를 클릭합니다. iOS 앱 또는 Android 앱, 또는 둘 다 빌드할 수 있습니다. 선택 후 _빌드 시작_을 클릭합니다. 그러면 FlutterFlow는 프로젝트를 컴파일하고 Android는 APK, iOS는 IPA 파일을 생성합니다.

12단계: 앱 설치

이제 앱은 Android 또는 iOS 기기에 설치할 준비가 완료되었습니다. 앱을 설치하려면 APK 또는 IPA 파일을 다운로드하고 각 플랫폼에 대한 표준 앱 설치 절차를 따르세요. FlutterFlow로 iOS와 Android에서 모두 작동하는 십자 플랫폼 모바일 앱을 성공적으로 만들었습니다.