[Android] TIL 2일차

노코드로 수익형 AI 앱 만들기 강의

 

1-1 : 우리가 배울 것 

 

✓ 최소비용으로 최소 기능이 있는 제품 만들기

 
• 최소 비용이 중요한 이유는?
⇨ 개발을 시도할 때마다 감을 얻게 되는데 비용이 적으면 더 많은 시도를 할 수 있음

•  Micro SaaS란?
⇨ 특정 작은 문제만을 해결해 주는 소프트웨어(ex 궁금한 엑셀 공식을 알려주는 앱)
 
•  마인드와 프로세스란?
⇨ 가설을 세우고, 최소 비용으로 앱을 만들면서 감을 키우는 것을 의미(기술 자체의 완벽함이 중요한 게 아닌 시도를 통해 감을 키우고 대중들에게 반응이 있는지 확인하는 것이 중요)
 

1-2 : 플러터플로우(FlutterFlow)

 
•  플러터플로우란? 
⇨  드래그 앤 드롭 인터페이스를 사용하여 앱을 만드는 방식, 코드 없이 앱을 만드는 기능

앱 만드는 방법 3가지

1. 네이티브 : 가장 정석적인 방법 ex) iOS, Android
2. 크로스 플랫폼 : 코드를 하나만 작성해도 두 개의 플랫폼에 배포가 가능 ex) React Native, Flutter
3. 웹(HTML, CSS, JS)
 

	네이티브	크래스 플랫폼	웹
앱 기능	다 됨	일부분	아주 일부분
앱 속도	빠름	꽤 빠름	보통
관리 플랫폼	2개	1개	1개

⇨ 네이티브 관리 플랫폼이 2개인 이유는 ios, android 두 가지 버전으로 개발해야 하기 때문

 
•  Flutter란?
⇨  하나의 코드로 iOS, Android, Web, PC 앱까지 모두 가능
⇨  위젯으로 구성, 코드가 단순하고 예쁨

•  플러터플로우와 다른 노코드 툴(bubble, webflow 등) 과의 차이점은?
⇨ 노코드 기반으로 앱을 만들게 해주는 앱 빌더, 다른 노코드 툴들은 대부분 웹사이트 위주인 웹 빌더(웹앱 가능)
 
+ FlutterFlow를 사용하여 앱을 개발할 때, iOS와 안드로이드 플랫폼 모두를 지원하려면 Flutter 프레임워크를 이용해야 함

•  다른 앱 빌더와의 차이점 및 강점은? (Adalo draftbit Glide 등)
⇨ 이용자가 압도적으로 많음(현재 약 120만명 이상 추산)

	FlutterFlow	Adalo	drfatbit	Glide
난이도	중간	쉬움	중간	쉬움
코드 다운로드	가능	불가능	가능	불가능
자유도 및 개방성	높음(Flutter 기반)	낮음	높음 (React Native 기반)	낮음

•  플러터플로우가 Adalo와 대비되는 점
⇨ 플러터플로우는 만든 앱 화면 구성들을 자동으로 코드로 생성해 주고 다운로드가 가능하고 자기만의 코드나 함수를 추가할 수 있다. 그래서 앱을 만들다가 한계가 있다고 하더라도 코드를 복사하여 이어서 개발이 가능하다. 반면 코드 다운이 불가능한 Adalo 같은 경우 처음부터 다시 개발해야 함.
 

✓ 플러터 플로우 장점 및 단점

장점 : 쉽고 빠르고 편함, 유연하다(자기만의 동작과 코드 추가 가능), 친절함, 계속 발전하고 있음
단점 : 배우는 난이도가 있지만 자유도가 완전히 높지 않음 (notion, glide보단 자유도와 난도가 높고 Flutter보단 자유도와 난도가 낮음), 자체 버그 몇 가지 존재, 빌드가 2~4분 걸림(test mode에서는 바로보기 가능), 채팅 구현 오류, 한국에 최적화되지 않았음(카톡 로그인, 문자 인증 등)

•  유료 버전과 무료 버전 차이
무료 : 모든 구현, 웹 사이트 배포 가능
유료 : 코드 다운로드(27$), 앱스토어 쉽게 배포 가능(63$)
 

1-3 : FlutterFlow 둘러보기

플러터플로우 메인 화면

 
•  Widget Palette : 추가할 위젯 종류 나열(텍스트, 이미지 등)
•  Page Selector : 페이지 선택
•  Widget tree : 현재 페이지 위젯 구성(페이지 제목부터 그 외 등등), 우측 상단에 Stack Pages and Widget Tree Views 클릭 시 페이지와 위젯 트리 분할로 볼 수 있음
•  Story board : 각각의 페이지가 어떻게 연결되는지 확인하는 곳
•  Theme Settings : 색상 세팅
⇨ Design System : 해상도 설정, 로딩 상태 시 보이는 상태 설정, 스크롤바 설정, 새로고침 UI
⇨ Colors : 특정 테마마다 설정, 다크&라이트 모드 두 가지
⇨ Typography & Icons : 글씨체 설정 ⇨ custom fonts : 개인적인 폰트 추가 가능


•  Settings
⇨  App Details : 프로젝트명
⇨  App Assets : Splash, Icon 화면 등 설정
⇨  Nav Bar & App Bar : 화면 위(App) 아래(Nav) 바 설정, Nav 바는 두 개 이상의 페이지일 때만 적용 가능