한 번에 채우는 데이터 + FlutterFlow 활용 ✦ Firestore 셋업 #5

안녕하세요! ARCOA 지안입니다. 👋

지난 글에서 보안 규칙까지 완성했죠.

이제 Firestore 셋업의 마지막 단계, 대량 데이터 업로드입니다!

 

실제 데이터는 수백 개인데 어떡하지?

 

#3에서 손으로 카드를 넣으면서 Firestore의 데이터 구조와 타입의 구분을 익혔다면, 이제는 엑셀 데이터를 한 번에 올리는 방법을 배울 차례예요.

이번 글에서는:
✦ Firestore 업로드 방법 3가지 비교
✦ FlutterFlow Content Manager로 CSV 업로드 (가장 쉬움!)
✦ Firebase Console과 양방향 동기화 확인

 

소요 시간은 최대 15분입니다. 

수백 개의 데이터를 클릭 몇 번으로 올려봅시다!

 

 

 

1/ Firestore 데이터 업로드 방법 3가지

Firestore에 데이터를 넣는 방법은 3가지예요.
초보자는 FlutterFlow Content Manager가 압도적으로 쉽습니다!

방법	특징 및 장단점	언제 쓸까요?
Firebase Console  (수동 추가)	- 첫 데이터 넣기 #3의 방법 - 클릭으로 하나씩 추가 - 소규모 데이터에 가장 빠름 - 10개 이상 작업 시 비효율적	- 테스트용 샘플 데이터 2~3개 - 급하게 1개만 추가할 때 - 간단 테스트
Firebase Extensions  (고급)	- CSV→ Cloud Storage 업로드→ 자동 import  - 대량 데이터, 자동화에 적합 - 셋업 복잡, Blaze 요금제 필요	- 1,000개 이상 대량 데이터 - 정기적 자동 업데이트 필요
FlutterFlow  Content Manager  (추천⭐)	- CSV 업로드, UI 친화적 - 코드 필요 없음 - 실수 적고 가장 빠름	- 10~500개 데이터 업로드 - 노코드 개발 환경 - MVP 프로젝트

💡 이 글에서는 "FlutterFlow Content Manager" 중심으로 설명합니다.

아직 FlutterFlow 연동이 안 됐다면?
→ 1-1. Firebase Console 수동 방법으로 진행 가능 (#3 참고)
→ 나중에 FlutterFlow 연동 후 1-3. 방법으로 업그레이드

TIP. 실제로 '수동 추가' 방식을 써서 샘플 데이터 3개로 개발하다가 'FlutterFlow'로 데이터를 채웠습니다.

 

 

 

2/ FlutterFlow 준비 확인

2-1. FlutterFlow-Firebase 연동 확인

• FlutterFlow (https://app.flutterflow.io) 프로젝트 접속:
  왼쪽 메뉴에서 (그림 1) ✦① Firestore 아이콘 확인
• (그림 1)처럼 화면이 비었다면 → 2-2.로 이동
• 만들어 놓은 컬렉션 목록이 나온다면 → 연동 완료! Step 2로 바로 이동

그림 1. FluterFlow의 Firestore 메뉴

 

2-2. FlutterFlow 연동하고 돌아오기

• FlutterFlow? 프로젝트? 부터 모르겠다면:
  ⇒ FlutterFlow 프로젝트 생성 ✦ FlutterFlow 기초 #1 (12월 말 발행 예정)
• Firebase 연동 방법은 다음 가이드 참고:
  ⇒ Firebase 연동 ✦ FlutterFlow 기초 #2 (12월 말 발행 예정)

 

 

Step 1. CSV 파일 준비

1-1. card_master 필드 구조 확인

첫 데이터 넣기 #3에서 만든 card_master 필드 구조를 다시 확인하세요:

필드	유형(타입)⭐	샘플 값	설명
card_id	string	SH_01	카드 고유 번호
card_name	string	Mr.Life	카드 이름
card_type	string	신용	카드 분류
card_company	string	신한	카드사
card_brand	array	국내;S&;VISA	브랜드
image_url	string	https://...	이미지 URL
fee_kr	number	15000	연회비 국내
fee_global	number	18000	연회비 해외
is_active	boolean	true	활성 여부

TIP. '필드'는 Firestore와 정확하게 일치해야 해요!

 

1-2. 엑셀/구글 시트로 데이터 정리

Card 시트 예시:

card_id	card_name	card_type	card_company	... (생략)
SH_01	Mr.Life	신용	신한	...
SH_02	처음(ANNIVERSARY)	신용	신한	...
SH_03	Discount Plan+	신용	신한	...

 

1-3. CSV 파일로 저장

Google Sheets:

• 파일 → 다운로드 → 쉼표로 구분된 값(.csv)
• 한 번에 하나의 시트만 저장되니, 모든 시트에서 반복 실행

Excel:

• 파일 → 다른 이름으로 저장 → 파일 형식: CSV UTF-8 (쉼표로 구분)
• 한글이 깨지지 않으려면 UTF-8 선택 필수
• 한 번에 하나의 시트만 저장되니, 모든 시트에서 반복 실행

📌중요! CSV 작성 3대 원칙 

1. 첫 행 = 반드시 필드명
⭕ card_id,card_company,card_name,fee_kr BSH_001,신한,Mr.Life,1.5
→ 첫 줄: card_id (필드명)
→ 둘째 줄부터: 데이터

2. 숫자 = 따옴표 없이
⭕ fee_kr: 15000
❌ fee_kr: "15000"

3. UTF-8로 저장
⭕ 저장 시 UTF-8 인코딩 필수!

PLUS. 빈 값은 그냥 비워두고, Boolean은 소문자(true/false)

 

 

 

Step 2. FlutterFlow에서 CSV 업로드

2-1. Content Manager 열기

• (그림 2) ✦② Firestore →  ✦③ card_master 컬렉션 선택
• (그림 2) ✦④ Manage Content 버튼 클릭

그림 2. FlutterFlow Firestore의 Manage Content 버튼

 

2-2. CSV 업로드 시작

• (그림 3) ✦⑤와 같이 미리 입력했던 데이터가 있을 수 있지만, 삭제하거나 그대로 두어도 됨
• (그림 3) ✦⑥ Upload CSV 버튼 클릭

그림 3. Manage Content의 Upload CSV 버튼

 

2-3. 업로드 옵션

• (그림 4) ✦⑦과 같이 CSV 파일이 첨부됨
• (그림 4) ✦⑧ Separator Type → Comma (쉼표로 구분된 파일)
• (그림 4) ✦⑨ Number of Rows to Upload → 비워두면 전체 행, 만약 50 입력하면 50줄 업로드
• (그림 4) ✦⑩ Text Delimiter → Default (문자열을 감싼 기호 설정)
  • 문자열이 따옴표 없이 작성된 CSV →  Default 선택
  • 문자열 안에 쉼표가 들어 있는 경우 → 문자열을 따옴표로 감싸고, 따옴표 옵션 선택
  • 문자열 안에 따옴표가 들어 있는 경우 → 내부 따옴표 "예"를 ""예""로 연속 쓰고, Default 선택
• (그림 4) ✦⑪ Upload CSV 버튼 클릭

그림 4. Import CSV File 모달

 

2-4. 미리보기 & Import 실행

• 10줄의 Preview File 화면에서 매핑이 정확한지 (그림 5) ✦⑫ 스크롤하여 확인
• 문제가 없으면, (그림 5) ✦⑬ Validate & Import 버튼 클릭
• 문제가 있으면:
  • 유형(타입)이 잘못 인식되었다 → 드롭다운으로 수동 변경 가능
  • records(CSV 줄수 = 문서 개수)가 다르다 → 빈 셀이라면 임포트 후, 삭제 가능

그림 5. 업로드 파일 미리보기

 

 

 

Step 3. 데이터 확인하기

3-1. FlutterFlow에서 확인

• (그림 6) ✦⑮ 문서 개수 확인 (CSV 100줄 = 문서 100개)
• (그림 6) ✦⑭ 문서 내용 검수
  • 필드 값, 한글 깨짐, 숫자 타입, 빈 문서 확인
  • 수정 또는 삭제 버튼을 사용하여 검수 완료

그림 6. 맵핑된 card_master

 

3-2. Firebase Console에서 동기화 확인

• Firebase Console → Firestore Database → card_master
• 업로드 된 문서 확인

 

3-3. 데이터 검증 체크리스트

체크	내용	수정
[  ] 개수	CSV 행 수 = Firestore 문서 개수	CSV 첫 줄 확인/재업로드 또는 Manage Content 개별 수정
[  ] 필드	필드명 매칭, 오탈자, 대소문자 차이	CSV 수정/재업로드 또는 Manage Content 개별 수정
[  ] 타입	숫자는 integer (string 아님)	CSV 수정/재업로드 또는 Manage Content 개별 수정
[  ] 한글	깨진 한글	CSV를 UTF-8로 다시 저장 후 재업로드
[  ] 빈 값	빈 셀인데, null 또는 "", "없음" 문자	CSV 수정/재업로드 또는 Manage Content 개별 수정

 

 

 

 

✅ 완료 체크리스트

[  ] FlutterFlow-Firebase 연동 확인
[  ] CSV 파일 준비 (UTF-8, 필드명 확인)
[  ] CSV Import 및 필드 매핑 확인

[  ] Firestore 데이터 확인
[  ] 데이터 개수·타입·한글 확인

 

 

디자이너를 위한 요약

Firestore 데이터는 '한땀한땀'이 아니라 '한 번에 업로드'다.
CSV 형식만 제대로 준비하면 FlutterFlow가 나머지를 해결한다.
손으로 익힌 감각이 자동화의 기준이 된다.

 

 

 

🎉 Firestore 셋업 완료!

✦ 디자이너(비개발자)를 위한 Firestore 셋업

├ 1 ✦ 설계·타입·관계·보안규칙 기본 개념 완료
├ 2 ✦ Database 만들기와 버전/위치/모드 선택 완료
├ 3 ✦ 첫 데이터 넣기: Static 컬렉션 실습 완료
├ 4 ✦ DB의 문지기, 보안 규칙 작성 완료
└ 5 ✦ 한 번에 채우는 데이터 + FlutterFlow 활용 완료

 

다음 시리즈

Firestore에 카드 데이터를 넣었다면, 카드 이미지를 어디에 저장할까요?

다음 시리즈에서 확인해봅시다 ✦

 

디자이너(비개발자)를 위한 Storage 셋업

├ 1 ✦ Storage 설정과 첫 이미지 업로드
└ 2 ✦ 파일의 문지기, Storage 보안 규칙

디자이너(비개발자)를 위한 Storage 셋업 ✦ 총 2편