본문 바로가기

노코드19

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.
한 번에 채우는 데이터 + FlutterFlow 활용 ✦ Firestore 셋업 #5 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 보안 규칙까지 완성했죠. 이제 Firestore 셋업의 마지막 단계, 대량 데이터 업로드입니다! 실제 데이터는 수백 개인데 어떡하지? #3에서 손으로 카드를 넣으면서 Firestore의 데이터 구조와 타입의 구분을 익혔다면, 이제는 엑셀 데이터를 한 번에 올리는 방법을 배울 차례예요.이번 글에서는:✦ Firestore 업로드 방법 3가지 비교 ✦ FlutterFlow Content Manager로 CSV 업로드 (가장 쉬움!) ✦ Firebase Console과 양방향 동기화 확인 소요 시간은 최대 15분입니다. 수백 개의 데이터를 클릭 몇 번으로 올려봅시다! 1/ Firestore 데이터 업로드 방법 3가지Firestore에 데이터를 넣는 방법.. 2025. 12. 11.
DB의 문지기, 보안 규칙 작성 ✦ Firestore 셋업 #4 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 card_master 컬렉션을 만들고 데이터를 넣었는데요, 지금 이 데이터는 누구나 읽고 쓸 수 있는 상태예요. 프로덕션 모드면 안전하지 않아? 프로덕션 모드의 기본 규칙은 "모두 차단"이에요. 하지만 앱이 데이터를 읽으려면 보안 규칙을 작성해야 합니다. 보안 규칙이 없으면:❌ 앱에서 내부 데이터를 읽을 수 없음 ❌ FlutterFlow에서 데이터 연동 실패 ❌ 테스트조차 불가능 이번 글에서는: ✦ 보안 규칙의 기본 구조 이해하기 ✦ Static 데이터(card_master) 권한 설정 ✦ Gemini AI로 쉽게 규칙 작성하기 ✦ 시뮬레이터로 테스트 후 배포 복잡해 보이지만, Gemini가 도와주니까 디자이너도 충분히 할 수 있어요 💪소요 시간은.. 2025. 12. 8.
첫 데이터 넣기: Static 컬렉션 실습 ✦ Firestore 셋업 #3 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 Firestore Database를 만들었다면, 이제는 실제로 데이터를 넣어볼 차례입니다. 컬렉션? 문서? 필드?엑셀 데이터를 어떻게 넣지? Firestore의 구조는 간단해요. ⭐ 컬렉션(폴더) → 문서(파일) → 필드(셀)이번 실습에서는:✦ card_master 컬렉션 만들기✦ 필드 유형(타입) 설정 (string, number, array 등)✦ 샘플 카드 데이터 입력하기실습을 위한 준비물:엑셀 또는 구글 시트로 정리한 카드 데이터최소 2~3개 카드 샘플 (card_id, card_name, card_type 등)준비되었다면, 손으로 직접 데이터를 넣어보면서 Firestore 입력 감각을 익혀봅시다 🚀 Step 1. 핵심 컬렉션 구조 설계.. 2025. 12. 5.
Database 만들기와 버전/위치/모드 선택 ✦ Firestore 셋업 #2 안녕하세요! ARCOA 지안입니다. 👋지난 글에서 Firestore의 6가지 핵심 개념을 정리했다면 이제는 실제로 데이터베이스를 만들 차례입니다.Firebase는 앱의 집이자 엔진이고, Firestore는 앱의 ‘기억’과 ‘관계’를 담는 데이터베이스입니다. 그냥 버튼 클릭이면 되지 않나요? 맞아요, 클릭 몇 번이면 끝나요. 하지만 처음 선택한 버전, 위치, 모드가 앱의 성능과 보안을 결정합니다. 특히, 위치(리전)은 생성 후 절대 변경 불가하고, 테스트 모드는 30일 후 자동 차단되는 위험이 있습니다.이 글에서는: ✦ Standard vs Enterprise 버전 선택 기준 ✦ 서울 vs 미국 리전, 어떻게 결정할까? ✦ 프로덕션 모드를 처음부터 써야 하는 이유 실습은 5분이면 끝나지만 선택의 의미를 .. 2025. 12. 4.
설계·타입·관계·보안규칙 기본 개념 ✦ Firestore 셋업 #1 안녕하세요! ARCOA 지안입니다. 👋 Firebase 셋업을 끝내고 Firestore를 열면, 이런 생각이 떠오를 수 있어요. “이제 뭘 만들어야 하지?” Firestore는 UI가 눈에 보이지 않아서 더 막막할 수 있어요. 실습은 생각보다 쉽습니다. 정말 어려운 건 개발적인 개념이 없어서 혼란스럽다는 것이예요. 그래서 본격적으로 데이터를 넣기 전에, Firestore에 핵심 설계 개념 6가지를 정리했습니다. 이 글을 읽어두면 다음 실습(#2~#5)을 훨씬 편하게 진행할 수 있어요. 1/ Static과 Dynamic 데이터 구분데이터 설계의 첫 번째 기준은 ‘변하는가, 변하지 않는가’입니다.꼭 구분하고 기억해야 합니다. Static Data 잘 안 바뀌는 데이터예) 카테고리, 등급/레벨, 안내문.. 2025. 12. 3.
디자이너가 데이터로 말하는 법 ✦ 노코드 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 #3 안녕하세요! ARCOA 지안입니다. 👋 지난 글에서 정적 데이터가 앱의 “세계관”이라는 것을 살펴보았습니다. 동적 데이터는 그 세계 안에서 사용자가 만들어가는 “스토리”입니다.사용자가 어떤 화면을 보고, 무엇을 선택하고, 어떤 행동을 반복하는지, 이 모든 순간이 로그(Log)와 히스토리(History)로 남습니다.디자이너가 이를 이해해야 하는 이유는 단순합니다. 데이터의 흐름은 곧 UX의 흐름 화면에서 일어난 모든 행동은 결국 ‘데이터 관계’가 됩니다. 사용자의 흔적을 어떻게 구조화하느냐에 따라 서비스의 개선 속도, 개인화 품질, 장애 대응력이 완전히 달라지는 것이죠. 1/ 동적 데이터란?정적 데이터와 비교하면 차이가 명확합니다.정적 데이터가 기준을 세운다면, 동적 데이터는 그 기준이 실제로 .. 2025. 11. 27.
정적 데이터는 제품의 룰북이다 ✦ 노코드 DB #2 안녕하세요! ARCOA 지안입니다. 👋지난 글에서 ‘DB 설계는 UX 설계의 뒷면’이라는 이야기를 나눴다면, 오늘은 그 뒷면 중에서도 앱 세계를 떠받치는 뼈대—정적 데이터(Static Data)를 살펴보려고 합니다.UI만 다루던 디자이너가 실제로 앱을 만들기 시작하면 가장 먼저 맞닥뜨리는 질문이 있어요. 화면보다, 데이터부터 만든다고? 맞습니다.특히 정적 데이터는 ‘화면’보다 앞서 존재해야 하는 앱의 룰북(Rulebook)입니다. 1/ 정적 데이터란?정적 데이터는 앱의 ‘설정값’, ‘기준표’, ‘변하지 않는 규칙’을 담고 있는 기본 세계관입니다.동적 데이터: 매일 바뀌는 데이터(회원 정보, 기록, 로그, 검색 요청 등)정적 데이터: 앱의 로직과 기준을 정의하는 데이터(카테고리 구조, 옵션 목록, .. 2025. 11. 26.
DB 설계는 UX 설계의 뒷면이다 ✦ 노코드 DB #1 안녕하세요! ARCOA 지안입니다. 👋 디자이너가 앱을 만든다는 건, 아름다운 화면 이상의 여정입니다. 사용자의 흐름을 설계하고, 상태를 관리하고, 데이터가 어떻게 흐르고 저장되는지 이해해야 하죠. DB 설계는 개발자의 영역 아닌가요?현업에서는 서로의 역할을 존중하고, 디자이너가 모두 신경쓰기에 여유가 없기도 했습니다. 하지만 노코드 앱을 직접 만들며 깨달았어요. DB 설계는 UX 설계의 뒷면이라는 것을요. 사용자가 입력한 데이터가 어디에 저장되고, 어떻게 다시 불러와지는지 모르면 경험의 앞·뒤가 맞지 않습니다. 좋은 UX는 결국 데이터 구조 위에서 움직이기 때문이에요.이 시리즈는 코드를 모르는 디자이너가 데이터 구조를 어떻게 사고하고 설계하는지 실전 경험을 담았습니다. 1/ 왜 디자이너가 DB를.. 2025. 11. 26.
비개발자를 위한 노코드 DB 설계 ✦ 총 5편 안녕하세요! ARCOA 지안입니다. 👋 지금부터 비개발자(디자이너)에게 꼭 필요한 노코드 DB 설계에 대한 이야기를 총 5편으로 진행하겠습니다. 가장 기본적인 개념부터 예시까지 함께 읽으면서 왜 DB를 알아야 하는지 살펴봅시다. 디자이너가 DB까지 해요? 네, 했습니다. 그리고 이건 제 앱 개발에서 가장 중요한 전환점이었어요. 화면을 아무리 예쁘게 만들어도, 데이터 구조가 엉망이면 앱은 제대로 동작하지 않았거든요. 사용자가 남긴 기록이 어디에 저장되는지, 어떤 기준으로 다시 불러오는지, 이것을 이해하고 나서야 비로소 "경험을 설계한다"는 말이 진짜가 됐습니다. 그래서 이 시리즈는, “코드를 모르는 디자이너가 어떻게 데이터를 사고하고 설계하는가” 그 실전 경험을 담았습니다. 1/ 이 시리즈로 얻을 수.. 2025. 11. 24.
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.
Google Authentication 로그인 연결 ✦ Firebase 셋업 #3 안녕하세요, ARCOA의 지안입니다! 👋 지난 포스트에서 프로젝트 생성과 Blaze 요금제 설정을 마쳤죠. 이번 글에서는 Authentication(인증 서비스) 셋업과 Google 로그인 활성화을 진행하겠습니다. Firebase Auth 설정은 최대 5분 소요됩니다. Authentication이란?Authentication은 사용자가 앱이나 웹 서비스에 로그인하거나 회원가입할 때 본인 인증을 처리하는 Firebase의 핵심 서비스입니다. 이메일, 전화번호, SNS 계정(Google, Apple, Facebook 등)으로 손쉽게 인증 로직을 구현할 수 있어요. Step 1: Firebase Authentication 접속1-1. Firebase 접속https://console.firebase.go.. 2025. 11. 20.