본문 바로가기

flutterflow12

Apple Authentication 로그인 연결 ✦ Firebase 셋업 #5 안녕하세요! ARCOA 지안입니다. 👋지난 글에서 Firebase의 Google Authentication을 설정하고 Google 로그인 기능을 활성화했습니다. 이번 글에서는 Apple Authentication 연결을 진행하겠습니다.iOS 앱 출시 시 소셜 로그인을 제공하면 Apple 로그인은 필수입니다. Apple 로그인이 어렵다는 얘기 많은데, FlutterFlow 네이티브 앱이면 Google보다 쉽습니다. 단, Apple Developer 계정(연 $99)이 필요하고, 개인사업자는 앱스토어에 본명으로 표시됩니다.전체 소요 시간은 최대 15분입니다. 시작해볼까요? Step 1: Apple Developer 설정1-1. Apple Developer 접속https://developer.apple.. 2025. 12. 26.
파일의 문지기, Storage 보안 규칙 ✦ Storage 셋업 #2 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 Storage를 생성하고 첫 이미지를 업로드했죠. 프로덕션 모드로 시작했다면 지금은 모든 접근이 차단된 상태예요. Firestore와 마찬가지로, 프로덕션 모드의 기본 규칙은 "모두 차단"이에요. 앱이 이미지를 읽으려면 보안 규칙을 작성해야 합니다. 이번 글에서는:✦ Firestore와 Storage 규칙의 차이점✦ Storage만의 파일 크기/타입 제한✦ 폴더별 권한 설정 실습 만약, 보안 규칙이 처음이라면, DB의 문지기, 보안 규칙 작성 ✦ Firestore 셋업 #4을 먼저 시작해보세요! 소요 시간: 15분 ⏱️ Step 1. Storage 보안 규칙 접근1-1. Firestore vs Storage 규칙 차이점구조는 거의 같지만, Sto.. 2025. 12. 26.
Storage 설정과 첫 이미지 업로드 ✦ Storage 셋업 #1 안녕하세요! ARCOA 지안입니다. 👋 Firestore 셋업을 완료했다면, 서비스에 사용할 데이터는 준비되었을 거예요. 하지만 아직 한 가지가 남았죠. 이미지는 Firestore에 못 넣네? Firestore에 정보(이름, 수수료, 혜택)를 넣었다면, 이제는 이미지 파일을 저장할 차례입니다.Firestore와 Storage, 뭐가 다를까요?구분 Firestore Storage 저장텍스트, 숫자 (데이터)이미지, 동영상, PDF (파일)예시카드명:MyLife, 카드사:신한card_mylife.webp용도앱 로직, 검색, 필터링화면에 표시할 비주얼 콘텐츠 아래와 같이 비교할 수 있어요:Firestore = 엑셀 (데이터)Storage = 구글 드라이브 (파일)이번 글에서는 Firebase Storage.. 2025. 12. 21.
디자이너(비개발자)를 위한 Storage 셋업 ✦ 총 2편 안녕하세요! ARCOA 지안입니다. 👋 Firestore 셋업 시리즈를 완료하셨다면, 이제 카드(또는 본인의 주요 아이템) 데이터는 준비되었을 거예요. 그런데 한 가지 남았죠. 이미지는 어디에 저장하지? Firestore는 데이터(텍스트, 숫자)를 저장하는 곳이고, 이미지, 동영상 같은 파일은 Firebase Storage에 저장해야 합니다. ARCOA의 앱을 예로 들면:Firestore: 카드 이름, 수수료, 혜택 (데이터)Storage: 카드 이미지, 아이콘 (파일)이 둘이 연결되어야 앱이 완성됩니다.이번 시리즈는 단 2편으로 Firebase Storage를 빠르게 마스터합니다!시작해 봅시다 ✦ 1/ 이 시리즈로 얻을 수 있는 것✅ Firebase Storage 설정과 구조 이해Storage가 .. 2025. 12. 16.
한 번에 채우는 데이터 + FlutterFlow 활용 ✦ Firestore 셋업 #5 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 보안 규칙까지 완성했죠. 이제 Firestore 셋업의 마지막 단계, 대량 데이터 업로드입니다! 실제 데이터는 수백 개인데 어떡하지? #3에서 손으로 카드를 넣으면서 Firestore의 데이터 구조와 타입의 구분을 익혔다면, 이제는 엑셀 데이터를 한 번에 올리는 방법을 배울 차례예요.이번 글에서는:✦ Firestore 업로드 방법 3가지 비교 ✦ FlutterFlow Content Manager로 CSV 업로드 (가장 쉬움!) ✦ Firebase Console과 양방향 동기화 확인 소요 시간은 최대 15분입니다. 수백 개의 데이터를 클릭 몇 번으로 올려봅시다! 1/ Firestore 데이터 업로드 방법 3가지Firestore에 데이터를 넣는 방법.. 2025. 12. 11.
디자이너가 데이터로 말하는 법 ✦ 노코드 DB #5 안녕하세요! ARCOA 지안입니다. 👋노코드 DB 시리즈의 마지막 글에서는 튜토리얼을 잠시 내려두고, 왜 디자이너가 데이터를 알아야 하는가, 그리고 데이터가 디자인을 어떻게 더 단단하게 만드는가에 대해 이야기해 보려 합니다. 4편 동안 우리는 DB라는 세계를 “보는 법”을 익혔습니다.정적 데이터로 제품의 룰을 만들고, 동적 데이터로 사용자의 흔적을 기록하고, Firestore 구조를 통해 서비스의 신경망을 세웠습니다. 이제 마지막 퍼즐 조각입니다. 디자이너는 데이터를 통해 사용자를 더 깊이 이해하고,더 나은 결정을 만들 수 있다.1/ 왜 디자이너가 데이터 구조를 이해하죠?UI는 눈에 보이고, DB는 보이지 않습니다.그래서 많은 디자이너가 “개발의 영역”이라고 선을 긋곤 하죠. 하지만 앱의 품질은 보이지.. 2025. 12. 1.
Firestore 매핑으로 프로덕트 신경망 구축 ✦ 노코드 DB #4 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 우리는 정적 데이터(Static Data)로 ‘세계관’을 만들고, 동적 데이터(Dynamic Data)로 ‘사용자의 흔적’을 설계했습니다. 이제 두 세계가 실제로 앱 안에서 살아 움직이기 위해서는 Firestore 구조 설계가 필요합니다. Firestore은 프로덕트의 신경망 엑셀 시트에서 만든 표는 ‘설계도’일 뿐이고, Firestore는 그 설계도가 프로덕트의 신경망으로 연결되는 순간입니다. Firestore는 단순한 DB가 아니라, 노코드 프로덕트의 신경망인 것이죠. 1/ Firestore 매핑의 핵심은 “엑셀 → 구조”디자이너는 보통 엑셀이나 구글 시트에서 데이터를 정리합니다. 하지만 Firestore는 시트처럼 2차원 구조가 아니라 계층.. 2025. 11. 28.
DB 설계는 UX 설계의 뒷면이다 ✦ 노코드 DB #1 안녕하세요! ARCOA 지안입니다. 👋 디자이너가 앱을 만든다는 건, 아름다운 화면 이상의 여정입니다. 사용자의 흐름을 설계하고, 상태를 관리하고, 데이터가 어떻게 흐르고 저장되는지 이해해야 하죠. DB 설계는 개발자의 영역 아닌가요?현업에서는 서로의 역할을 존중하고, 디자이너가 모두 신경쓰기에 여유가 없기도 했습니다. 하지만 노코드 앱을 직접 만들며 깨달았어요. DB 설계는 UX 설계의 뒷면이라는 것을요. 사용자가 입력한 데이터가 어디에 저장되고, 어떻게 다시 불러와지는지 모르면 경험의 앞·뒤가 맞지 않습니다. 좋은 UX는 결국 데이터 구조 위에서 움직이기 때문이에요.이 시리즈는 코드를 모르는 디자이너가 데이터 구조를 어떻게 사고하고 설계하는지 실전 경험을 담았습니다. 1/ 왜 디자이너가 DB를.. 2025. 11. 26.
Google Auth FlutterFlow 연동 준비 ✦ Firebase 셋업 #4 안녕하세요, ARCOA의 지안입니다! 👋 지난 글에서 Firebase에서 Google Authentication을 설정하고 Google 로그인 기능을 활성화했습니다. 지금부터는 FlutterFlow와 연동하기 위한 Firebase 작업을 보너스 1편으로 진행하겠습니다. 소요 시간은 최대 10분입니다. 시작합시다! Step 1: FlutterFlow 편집자 추가1-1. Firebase 접속https://console.firebase.google.com에서 프로젝트 선택 1-2. FlutterFlow 편집자 추가왼쪽 메뉴의 톱니바퀴(⚙️) → (그림 1) ✦① 프로젝트 설정 → ✦② 사용자 및 권한 → ✦③ 구성원 추가 클릭 (그림 1) ✦④ 이메일 주소에 firebase@flutterflow.io 입.. 2025. 11. 21.
디자이너(비개발자)의 Firebase 셋업 ✦ 총 5편 안녕하세요! ARCOA 지안입니다. 👋지난 글에서 Firebase를 선택한 이유를 공유했는데요, 이제 본격적으로 Firebase 셋업 5편을 통해 설명해 보겠습니다. 개발자 없이도 앱을 만들 수 있을까? 저도 처음엔 막막했습니다. 하지만 직접 하나하나 진행해보니, Firebase는 비개발자도 단계별로 따라 하면 충분히 세팅할 수 있는 구조였어요. 디자이너 관점에서 Firebase를 가장 빠르고 안전하게 세팅하는 방법을 정리했습니다. 1/ 이 시리즈로 얻을 수 있는 것✅ Firebase Console 기본기프로젝트 생성, Blaze 플랜, 결제/예산 세팅 ✅ Google Authentication 셋업로그인 구축 + FlutterFlow 연동 준비까지 ✅ 비개발자도 이해할 수 있는 언어로 구성막힐 수.. 2025. 11. 17.
디자이너가 Firebase를 선택한 이유 ✦ ft. Supabase 안녕하세요! ARCOA 지안입니다. 👋이전 글에서 FlutterFlow(FF)와 Firebase(Fb) 기반의 노코드 앱 개발에 도전한다고 말씀드렸는데요. 본격적인 세팅에 들어가기 전에, 많은 분이 궁금해하시는 "왜 Firebase인가?"에 대한 이야기를 먼저 나누려고 합니다. 스타트업은 Supabase,Firebase는 비싸다 처음 찾아본 정보들은 위와 같이 요약할 수 있었습니다. 특히 개발자 커뮤니티에서는 Supabase의 SQL 기반 구조와 오픈소스 철학을 높이 평가하더군요. 그래서 저도 자연스럽게 Supabase를 먼저 고려했지만, Firebase를 선택했습니다.
 1/ Firebase vs Supabase. 디자이너 관점저는 MVP(Minimum Viable Product)를 빠르게 만들고.. 2025. 11. 15.
디자이너의 노코드 앱개발 일기 ✦ 안녕하세요 🤗 15년 차 프로덕트(UX/UI) 디자이너이자 ARCOA(아르코아)의 Founder 지안입니다. 그동안 여러 디지털 제품을 기획하고 디자인했지만 바이브코딩을 경험하고 한 가지 생각이 더욱 강해졌습니다. 직접, 나의 제품을 만들고 싶다.웹 제품을 만드는 바이브코딩 툴은 정말 많지만, 저는 언제 어디서나 접근할 수 있고 사용자와 더 깊이 연결되는 “앱” 제품을 만들고 싶었습니다. 그래서 바이브코딩보다는 앱(Android/iOS) 개발을 위한 FlutterFlow(이하 FF)와 Firebase(이하 Fb) 기반의 노코드 개발을 도전하게 되었습니다.이 블로그는 제가 실제로 앱을 만들며 배우는 모든 과정과 시행착오, 해결책, 그리고 디자이너 관점의 실전 팁까지 모두 기록하려고 합니다. 단순 후기나 .. 2025. 11. 13.

티스토리툴바