usavetime의 등록된 링크

키자드에 등록된 총 18개의 포스트를 확인하실 수 있습니다.

Naver Blog

[FlutterFlow] 강의 오픈 기념 선착순 할인 이벤트!

안녕하세요, U진입니다! 얼마 전 "FlutterFlow 쉽게하는 노코드 앱 개발" 강의를 오픈했는데요, 벌써 많은 분들이 참여해주시고, 소중한 수강평도 남겨주셨습니다! 여러분의 관심과 응원에 진심으로 감사드립니다. "앱 개발을 배우고 싶은데, 강의 비용이 부담돼요…" "노코드 앱 개발을 꼭 배워보고 싶어요!" 이런 고민을 하시는 분들 위해 이벤트를 준비하였습니다. 강의 오픈 기념으로 선착순 50명에게만 특별 할인 쿠폰을 제공합니다. [선착순 50명] 수강생 특별 할인 이벤트! 더 많은 분들이 부담 없이 수강할 수 있도록, 선착순 50명 한정 30% 할인 쿠폰을 제공합니다! 이벤트 기간: 3/28 ~ 4/11 (2주간) 할인율: 30% 쿠폰 지급 방식: 아래 링크에서 즉시 발급 신청 방법 아래 링크를 클릭하여 쿠폰을 받으세요. 쿠폰 신청하기 선착순이므로 꼭 필요한 분만 신청해주세요! (선착순 50명, 마감 시 종료) 감사합니다!

Naver Blog

FlutterFlow 관련글 사이트맵

노코드 개요 노코드에 대하여 플러터플로우 시작하기 플러터플로우란 무엇인가? FlutterFlow 위젯 FlutterFlow 위젯종류 GRIDVIEW 위젯 LISTVIEW 위젯 PAGEVIEW 위젯 Firebase Firestore Firebase Data Type Firebase에서 Document Reference란? FlutterFlow Subcollection 알아보기 Firestore 권한 알아보기 Firebase에서 list 형식 알아보기 FlutterFlow 기능 FlutterFlow App Value 알아보기 FlutterFlow 로컬런 FlutterFlow 로컬런 실행 오류시 해결방법 FlutterFlow component 사용하기 FlutterFlow 다국어 설정 FlutterFlow 노코드 앱개발 강의 FlutterFlow 쉽게하는 노코드 개발 오픈 FlutterFlow 강의 오픈 기념 선착순 할인 이벤트!

Naver Blog

[FlutterFlow] 플러터플로우 노코드 앱개발 강의 오픈

당연한 이야기 겠지만 앱이나 웹을 만들기 위해서는 코딩을 해야합니다. 문법을 공부해야하고 버그도 잡아야 하고 많은 시간이 소요됩니다. 코딩에 대한 지식이 없으면 외주 대행업체에 의뢰를 하여 비용이 발생합니다. 전문 개발자의 영역이었던 개발이 노코드가 등장하면서 비전공자에게도 더이상 높은 문턱이 아니게 되었습니다. 언제부턴가 노코드라는 용어가 나오고 많은 도구들이 탄생했습니다. 인지도가 높은 버블, 웹플로우, 아달로.. 셀수 없을정도로 많죠. 모두 노코드 도구이지만 여기서 코딩을 일부 겸비할 수 있는것들은 로우코드로 분류하기도 합니다. 현존하는 노코드 도구는 어떤게 있으며 어떤게 가장 인기 있을까요? 2025년 3월 현재 기준으로 리서치를 해봤습니다. Upstack Studio의 블로그에 따르면, 2025년 최고의 노코드 모바일 앱 빌더는 다음과 같이 평가되었습니다: 15 No Code Mobile App Builders For 2025 [Ranked Best To Worst] God

Naver Blog

노코드에 대하여

너무도 당연한 이야기 겠지만 개발을 하기 위해서는 코딩을 해야합니다. 웹페이지를 만든다고 가정해보겠습니다. 웹서버를 올리고 HTML을 사용하여 웹상에 뿌려주는 페이지를 작성하여 퍼블리싱을 합니다. 기획자는 스토리보드를 만들고 디자이너는 HTML과 함께 만들어준 디자인이 잘 된 페이지를 만들어 놓으면 개발자는 서버단 언어를 이용하여 코드를 구현합니다. 규모가 큰 회사는 서버, DB, 개발 등 업무별 담당자가 각각 있겠지만 그렇지 않은 소규모 사업장에서는 개발자가 대부분 업무를 진행하죠. 이처럼 당연하게 생각했던 것들이 점차 변화하고 있습니다. 다름 아닌 노코드 때문입니다. 노코드 플랫폼의 등장으로 기획자나 디자이너도 별도의 개발 지식 없이 원하는 웹페이지나 애플리케이션을 만들 수 있는 세상이 오고 있습니다. 기존에는 여러 단계와 역할이 필요했던 개발 과정이 단순화되고, 사용자는 Drag&Drop만으로 원하는 결과물을 만들어낼 수 있습니다. 노코드 플랫폼은 개발에 대한 접근성을 높이고,

Naver Blog

[FlutterFlow] 플러터플로우란 무엇인가?

FlutterFlow를 소개하기전에 Flutter를 먼저 알아보겠습니다. Flutter는 구글에서 개발한 오픈소스입니다. 2018년 출시되었며 주로 모바일앱 개발을 지원했습니다. 특정 OS에 국한하지 않고 iOS, Android, WEB, Windows, MacOS, Linux 플램폿에 대한 애플리케이션 개발을 지원합니다. 즉, 크로스플랫폼 앱 개발을 지원합니다. 단일 코드베이스를 기반으로 여러 플랫폼을 위한 애플리케이션을 구축하는게 가능합니다. 반면 네이티브 앱 개발은 특정 플랫폼용으로 코드를 작성하기에 각각 OS별로 별도 코드를 작성해야 합니다. 크로스플랫폼 앱 개발에 비해 더 높은 성능을 낼수 있는 반면 더 많은 코드와 개발자를 필요로 합니다. 크로스 플랫폼 앱 개발은 네이티브 앱 개발 방식보다 비용과 시간을 효과적으로 줄일수 있습니다. 네이티브 웹 개발에 비해 성능 측면에서 단점이 있을수 있으나 Flutter는 괜찮은 성능을 보여줍니다. FlutterFlow는 Google F

Naver Blog

[FlotterFlow] 플러터플로우 시작하기

FlutterFlow는 별도 설치가 필요 없습니다. 인터넷 브라우저를 이용하여 사이트에 접속만 하시면 됩니다. 구글 크롬에 최적화 되어 있으며 PC는 IOS 13 이상 Windows 10 이상을 권장하고 있습니다. 해상도는 1280*1024 이상을 권장하고 있습니다. FlutterFlow 공식 홈페이지에 가시면 상세 메뉴얼 확인이 가능니다. FlutterFlow를 시작하려면 https://app.flutterflow.io/ 사이트에 방문하여 회원가입을 하시면 됩니다. FlutterFlow의 요금체계는 아래와 같습니다. 기본적으로 앱 빌드 및 테스트 환경은 무료로 제공되고, 소스코드를 다운로드하거나 모바일 기기에서 실행하려면 유료 요금제를 사용합니다. FlutterFlow 요금체계 즉 앱을 빌드하고 테스트할때는 무료로 사용이 가능하고 실제 모바일 기기에서 실행할때만 유료가 사용되니 앱을 개발하는 동안에는 무료 사용이 가능합니다. 회원 가입을 하고 나서 가장 먼저 해야할일은 프로젝트를

Naver Blog

[FlutterFlow] ListView 위젯

ListView 위젯은 수직이나 수평으로 스크롤을 할때 사용합니다. 이 기능은 화면에 보이는 항목만 렌더링 되므로 성능 향상에도 도움이 됩니다. 사용법을 알아보겠습니다. 리스트뷰 위젯에 text파일만 몇개로 추가해보았습니다. flutter 소스코드를 볼까요? ListView 위젯을 사용하여 자식위젯(children)으로 여러개의 Text위젯이 있는걸 볼 수 있습니다. 정렬 방식은 vertical(세로)로 되었고, shrinkWrap은 true임을 확인할 수 있습니다. shrinkWrap은 ListView 처럼 스크롤 가능한 위젯에서 사용하는 속성으로 해당 위젯의 크기를 스크롤 내용에 맞게 조정할지 여부를 결정합니다. true일 경우 ListView 위젯은 자식위젯의 크기에 따라 자체적으로 크기를 줄입니다. ListView( padding: EdgeInsets.zero, shrinkWrap: true, scrollDirection: Axis.vertical, children: [ Te

Naver Blog

[FlutterFlow] GridView 위젯

GridView 위젯은 사진 갤러리처럼 레이아웃을 만들때 유용하게 사용합니다. ListView 와 마찬가지로 보이는 항목만 렌더링하므로 컨텐츠가 많을 경우 성능을 효율적으로 사용 가능합니다. 아래 화면을 보시겠습니다. 컨테이너에 GridView 위젯을 추가하였고 자식으로 이미지를 6개 추가하였습니다. flutter 소스코드는 아래와 같습니다. GridView( padding: EdgeInsets.fromLTRB( 0, 10, 0, 10, ), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, childAspectRatio: 1, ), scrollDirection: Axis.vertical, children: [ ClipRRect( borderRadius: BorderRadius.circular(8), child: Image

Naver Blog

[FlutterFlow] firebase data type

flutterflow에서 사용하는 firebase db의 data type 정리 Data Type Description 예제 Integer 정수값 나이 및 카운터 Double 소수점 숫자 99.99 String 문자열 이름 등 텍스트에 사용 Boolen 참 혹은 거짓 boolen field에는 true 혹은 flase 둘중 하나만 사용됩니다. Color 색상코드 RBG 컬로 코드 기반 색상코드 입력 #FFFFFF Image Path 이미지 파일 저장 경로 Video Path 비디오 파일 저장 경로 Audio Path 오디오 파일 저장 경로 Document Reference 다른 collection 또는 Documents를 참조 회원정보, 게시글 정보 등 Date TIme 날짜 시간 2025-01-24T10:30:00Z Lat Lng 위도 / 경도 GPS 좌표 Data Type 동적 데이터 저장 Enum 제한된 값의 모음 주문완료, 배달중, 배달완료 등

Naver Blog

[FlutterFlow] 위젯 종류

FlutterFlow에서는 위젯 유형에 따라 총 4가지 카테고리로 위젯을 분류하고 있습니다. 각 위젯 종류별로 자주 사용하는 위젯에 대해 설명을 하겠습니다. Base Elements Layout Elements Page Elements Form Elements Base Elements flutterflow는 UI의 모든 구성을 위젯으로 시각화 합니다. 그중 가장 기본이 되는 위젯은 Base Elements로 분류합니다. text, image, button, icon 위젯이 해당합니다. 이름 설명 Text 텍스트 문자열을 표시하는 데 사용됩니다. 가장 기본적으로 널리 사용됩니다. Icon 아이콘을 표시하는 데 사용됩니다. Button 버튼 모양을 표시하는데 사용됩니다. Image 이미지를 표시하는 데 사용됩니다. 네트워크 URL 및 업로드된 파일을 이미지 소스로 지원합니다. Layout Elements Basic 위젯인 Text, Button, Image , Icon 을 이용하여 기본

Naver Blog

[FlutterFlow] Firebase에서 Document Reference란?

Document Reference는 Firebase Firestore에서 특정 문서를 가리키는 경로입니다. FlutterFlow에서 Firestore와 연동할 때 특정 문서를 참조하고 데이터를 읽거나 수정하려면 Document Reference를 사용해야 합니다. Document Reference 개념 Firebase Firestore는 Collection > Document > Field 구조로 데이터를 저장합니다. Document Reference는 특정 문서의 위치를 가리키는 주소와 같은 역할을 합니다. 활용처는 다양합니다. 게시글을 수정하거나 댓글 기능, 채팅룸 기능 등에서 주로 사용합니다. 간단한 개념도를 그려보면 아래와 같이 각각의 Document의 주소를 가리키는 데이터라고 이해 하시면 쉽겠습니다. firebase document reference

Naver Blog

[FlutterFlow] App Value 알아보기

App Value는 앱에서 현재 상태를 저장하는 local 변수 입니다. 앱의 모든 페이지에서 사용할수 있고 외부와 통신은 불가능합니다. API KEY, 이미지 저장 경로, 인증토큰 등 앱 전체에서 사용할 변수를 선언함으로써 코드를 보다 깔끔하고 편리하게 구현할 수 있으며 아래 그림과 같이 모든 페이지에서 사용이 가능합니다. 사용 가능한 Data Type은 아래와 같습니다. Data Type 설명 예제 String 텍스트 데이터를 저장 사용자 이름, 이메일 주소 Int 소수점 없는 숫자 나이, 조회수 Double 소수점을 포함한 숫자 가격, GPS 좌표 Boolean 참/거짓 값을 저장 다크 모드, 이메일 인증 여부 Color 색상 값을 저장 브랜드 색상, 버튼 배경색 Timestamp 날짜 및 시간을 저장 가입 날짜, 예약 시간 JSON JSON 형식의 객체 저장 사용자 정보, 설정 값 Document Reference Firestore 특정 문서 참조 사용자 데이터, 게시글 데이

Naver Blog

[FlutterFlow] Subcollection 알아보기

Sub Collection은 Firestore에서 Document 내부에 존재하는 또 다른 Collection을 의미합니다. 즉, 계층적인 데이터 구조를 만들 때 사용됩니다. 예를 들어 게시글 안에 각 게시글에 대한 댓글 을 만들때 유용하게 사용할 수 있습니다. <개념도> sub collection <예시> posts (Collection) post123 (Document) title: "FlutterFlow 튜토리얼" author: "홍길동" comments (sub collection) comment456 (Documents) user: "김철수" message: "좋은 정보 감사합니다!" FlutterFlow에서는 현재 1-depth sub collection 까지만 지원을 하고 2-depth는 지원하지 않고 있습니다. sub collection 하위에 reply collection을 생성하여 댓글에 대한 대댓글 기능도 구현할수 있습니다. sub co

Naver Blog

[FlutterFlow] Firebase에서 List 형식 알아보기

Firebase Data Type에는 List Type이 있습니다. Database Type을 is_list로 선택하면, 해당 필드는 여러 개의 값을 포함할 수 있는 형태로 저장됩니다. 즉, 단일 값이 아니라 여러 개의 데이터를 배열처럼 관리할 수 있습니다. 아래와 같이 배열 형태로 저장됩니다. { "tags": ["Flutter", "Dart", "Firebase"] } 이 리스트는 쿼리를 통해 추가, 삭제 등의 작업을 할수 있으며 FlutterFlow에서 아래와 같은 작업을 할 수 있습니다. 타입 설명 예시 Add 기존 리스트를 변경하지 않고, 새로운 항목을 끝에 추가합니다. 중복을 허용할 수도 있고, 중복된 값을 제거하는 방식으로 사용할 수도 있습니다. ["Apple", "Banana"] -> ["Apple", "Banana", "Cherry"] Remove 리스트에서 특정 값을 찾아서 삭제하는 기능입니다. 존재하지 않는 값을 삭제하려 하면 아무 변화가 없습니다. 특정 인덱스가

Naver Blog

[FlutterFlow] Firestore 권한 알아보기

Firesotre의 권한에 대해 알아보겠습니다. Firesotre에는 4가지의 권한이 있습니다. create: 사용자가 컬렉션 내에서 새 문서를 만들 수 있도록 허용합니다. read: 사용자가 컬렉션 내의 문서를 읽을 수 있도록 허용합니다. write: 사용자가 컬렉션의 문서를 업데이트할 수 있도록 허용합니다. delete: 사용자가 컬렉션의 문서를 삭제할 수 있도록 허용합니다. 각각의 액션별로 어디까지 권한을 허용할지를 지정해줄 수 가 있습니다. 지정 가능한 옵션은 아래와 같습니다. 구분 설명 No one 아무도 문서를 생성/읽기/쓰기/삭제할 수 없습니다. Everyone 인증 여부에 관계없이 모든 사용자에게 액세스 권한을 부여하여 문서를 만들고, 읽고, 쓰고, 삭제할 수 있도록 허용합니다. Tagged User 사용자가 해당 문서에 태그가 지정된 경우 해당 문서를 읽고/업데이트하고/삭제할 수 있도록 허용합니다. 예를 들어, created_by게시물을 만든 사용자를 나타내는 필드가

Naver Blog

[FlutterFlow] 로컬런

FlutterFlow 데스크톱 앱에서 제공되는 로컬 실행 기능을 사용하여 실제 기기에서 앱을 테스트할 수 있습니다. 로컬 실행은 FlutterFlow 프로젝트의 변경 사항을 자동으로 추적하고, 코드를 로컬에 다운로드하며, Flutter의 Hot Reload 또는 Hot Restart를 사용하여 기기에서 변경 사항을 즉시 볼 수 있는 옵션을 제공합니다. 로컬런을 실행하기 위해서는 코드를 다운로드해야하고 FlutterFlow 유료플랜이 필요합니다. pricing 정책 권장사양은 cpu 8core + 메모리 16GB 이상입니다. 애플 실리콘에서 실행하기 위한 rosetta 설치 sudo softwareupdate --install-rosetta --agree-to-license ios기기: xcode 다운로드 & 설치 https://docs.flutter.dev/get-started/install/macos/mobile-ios?tab=download#configure-ios-develop

Naver Blog

[FlutterFlow] 로컬런 실행 오류시 해결방법

flutter가 실행될때 버전 이슈로 오류가 발생하는 케이스가 종종 있습니다. error message 일부: [!] This is likely due to a known bug in Android Gradle Plugin (AGP) versions less than 8.2.1, when ... https://issuetracker.google.com/issues/294137077 https://github.com/flutter/flutter/issues/156304 message에 있는 링크를 들어가보면 글들이 많은데. Android Gradle Plugin (AGP) 버전이 8.2.1 미만이고, Java 21 이상을 사용할 때 발생하는 알려진 버그입니다. 즉. Java 17버전을 사용하고 AGP 8.2.1 버전을 사용하라고 정리할 수 있습니다. 1. AGP 버전 확인 및 업데이트 FlutterFlow 프로젝트가 있는 폴더를 Android Studio에서 엽니다.

Naver Blog

[FlutterFlow] component 사용하기

Flutterflow의 component는 재사용 가능한 위젯입니다. 위젯을 한 번 디자인하고 앱 전체에서 사용하여 시간을 절약하고 일관성을 유지하며 유지 관리를보다 쉽게 할 수 있습니다. 페이지에 component를 추가하면 해당 페이지의 위젯 트리의 일부가됩니다. 이를 통해 구성 요소는 다른 위젯과 상호 작용하고 속성을 상속하며 페이지 구조의 일부로 상태 변경에 응답 할 수 있습니다. 글이 좀 어려울 수 있는데 자주 사용하는 형식(텍스트나 버튼, 포맷 등)을 사전에 지정해두어서 필요한곳에 재사용 한다고 보시면 됩니다. 아래와 같이 프로필 수정하는 화면이 있다고 가정해볼게요. Resset Password와 Delete Account 동일한 포맷의 텍스트가 있습니다. 또한 버튼의 스타일도 동일하죠. 이렇게 동일하게 포맷을 적용할때 component를 사용합니다. flutterflow 템플릿 프로필 화면 사용법은 그리 어렵지 않습니다. 아래 3가지만 기억해주세요. 1. 재사용할 com

1