FlutterFlow 01 : 인터페이스 탐색
FlutterFlow란 무엇인가?
FlutterFlow는 코딩 없이 앱을 개발할 수 있는 강력한 도구로, 복잡한 코드 작성 없이 시각적 UI 디자인과 앱의 기능을 구현할 수 있어 개발자가 아니어도 앱 개발을 시작할 수 있는 매력적인 도구입니다.
FlutterFlow의 장점:
- 빠르고 쉽게 앱 제작: 비전문가도 앱을 디자인하고, Firebase와 연동하여 데이터를 처리할 수 있습니다.
- 직관적인 UI 디자인: 다양한 위젯을 드래그 앤 드롭하여 화면을 꾸미고, 기능을 추가할 수 있습니다.
- 클라우드 기반: 앱을 실시간으로 테스트하고 업데이트할 수 있어 편리합니다.
- 앱 배포 및 유지 관리 용이: FlutterFlow에서 바로 앱을 배포하고, 필요한 기능을 손쉽게 업데이트할 수 있습니다.
FlutterFlow 대시보드 탐색하기
FlutterFlow에 로그인하면 가장 먼저 대시보드 화면을 만나게 됩니다. 이곳은 프로젝트 관리와 설정을 손쉽게 할 수 있는 공간으로, FlutterFlow를 사용하는 첫 단추라고 할 수 있습니다.
1. 알림 센터 : 다양한 프로젝트에서의 커뮤니케이션을 편리하게 확인
2. 다크/라이트 전환 : 스위치를 이용하여 다크/라이트 모드 선택 가능
3. 검색 : 프로젝트의 갯수가 많을 경우 검색으로 빠르게 탐색
4. 프로젝트 필터링 : 개인 정보 보호 설정에 따라 프로젝트를 필터링하는 기능 (비공개, 본인이 공유, 본인과 공유)
5. 태그 : 프로젝트에 태그를 만들어 추가하면 프로젝트의 특성, 목적 또는 상태에 따라 프로젝트를 분류하고 식별하는 빠르고 체계적인 방법을 제공
6. 새 프로젝트 : 새 프로젝트를 만들 때 이용하는 버튼
7. 내 조직 : 팀 사용자와 프로젝트 간에 사용자 정의 코드, 자산, 디자인 시스템 및 API를 공유
8. 마켓플레이스 : 다른 사용자가 만든 사전 구축된 구성 요소와 템플릿에 액세스하여 새로운 기능을 원활하게 통합
9. 리소스 : 앱을 빌드하는 데 도움이 되는 다양한 유용한 링크 확인 가능
10. 커뮤니티 : 다른 FlutterFlow 빌더와 아이디어를 공유하고, 질문을 하고, 문제를 해결할 수 있는 정보 공유
11. 계정 : 계정 정보 확인
12. 플랜 정보 : 현재 플랜 정보 확인
FlutterFlow 앱 빌더 인터페이스 이해하기
FlutterFlow에서 앱 빌더는 실제로 앱을 설계하고 동작을 정의하는 핵심 영역입니다. UI 빌더, 데이터 설정, 로직 추가 등을 직관적으로 작업할 수 있습니다. 앱 빌더는 네비게이션 메뉴, 도구 모음, 속성패널, 캔버스 영역 4개 주요 섹션으로 구성되어 있습니다.
- 네비게이션 메뉴: 프로젝트 대시보드, 위젯, 설정 등을 관리할 수 있는 메뉴
- 툴바 : 다양한 도구와 기능에 쉽게 액세스할 수 있는 툴 모음
- 중앙 캔버스: 실제 앱 화면을 디자인하는 공간
- 속성 패널 : UI 요소의 시각적 모양과 대화형 동작 수정
네비게이션 메뉴
좌측에 있는 네비게이션 메뉴에서 접근할 수 있는 기능 목록을 먼저 알아보겠습니다
1. 대시보드 (Dashboard) : 프로젝트를 관리하고, 계정 정보 및 FlutterFlow 리소스에 액세스
2. 위젯 팔레트 (Widget Palette) : 앱의 모든 위젯에 액세스
3. 페이지 선택기 (Page Selector) : 페이지와 구성 요소를 관리하고 필요에 따라 폴더 생성
4. 위젯 트리 (Widget Tree) : 선택한 페이지의 모든 위젯에 대한 개요를 확인
5. 스토리보드 (Storyboard) : 앱의 디자인과 탐색을 시각화
6. 파이어스토어 (Firestore) : 컬렉션을 만들고 Firestore 관련 설정을 조정하여 데이터베이스와 스토리지 연동
7. 데이터 타입 (Data Types) : 앱에 맞는 데이터 타입 설정
8. 앱 값 (App Values) : 앱 상태 변수와 상수 관리
9. API 호출 (API Calls) : 외부 서버와 통신되도록 설정, API 호출을 정의
10. 미디어 에셋 (Media Assets) : 서버와 상관없이 이미지 미디어 자산 업로드
11. 사용자 정의 기능 (Custom Functions) : 사용자 정의 기능, 위젯, 동작 추가
12. 클라우드 함수 (Cloud Functions) : Firebase를 위한 클라우드 함수를 작성하고 배포
13. 테스트 (Tests) : 자동화된 테스트 추가
14. 테마 설정 (Theme settings) : 시각적 모양을 사용자 정의
15. 설정 및 통합 (Settings and Integrations) : 앱 관련 설정 및 통합에 액세스
툴바
툴바에서는 프로젝트 리소스를 검색하고, 캔버스 크기를 변경하고, 프로젝트 기록, 분기, 최적화 및 개선 사항을 확인하고, 코드를 보고 다운로드하고, 앱을 실행할 수 있습니다. 다양한 기능에 쉽게 액세스할 수 있도록 도움을 주는 툴바 도구들에 대해서도 알아보도록 하겠습니다.
1. 도움말 (Help Menu) : 커뮤니티포럼, 피드백, 버그 보고, 튜토리얼, FAQ 및 문서 등의 앱을 구축하는 동안 유용한 필수 리소스 링크 접속 경로
2. 키보드 숏컷 (Keyboard shortcuts) : 단축키 안내
3. 커먼트 파렛트 (Command Palette) : 앱 빌더 빠른 탐색
4. Al Tools : 인공 지능을 활용하여 앱 개발 속도를 높이기 위해 설계된 강력한 기능 세트. 관련 위젯이 자동으로 채워진 페이지, 구성 요소, 심지어 전체 페이지 레이아웃과 같은 앱 요소를 빠르게 생성
5. 캔버스 사이즈 (Canvas size) : 모바일, 태블릿 등의 캔버스 사이즈를 정의
6. 프로젝트 히스토리 (Project history) : 프로젝트 버전을 저장 및 확인
7. 코멘트 (Comments) : 생각과 의견, 피드백을 남길 수 있는 기능
8. 프로젝트 제안 (Project Suggestions) : 앱 디자인과 속도를 높이기 위한 개선 사항을 스캔하고 제안
9. 프로젝트 이슈 (Project issues) : 앱의 문제와 경고를 안내하고 해결법 제시
10. 디벨로퍼 메뉴 (Developer menu) : 코드 확인, 깃허브 연결, 프로젝트 소스 다운로드 기능
11. 프로젝트 공유 (Share project) : 프로젝트 공유 기능
12 .프리뷰 (Preview APP) : 가상 기기에서 미리보기
13. 실행 및 테스트 (Testing)
지금까지, FlutterFlow의 기본적인 인터페이스를 익혀보았습니다
