«내 화면에서만 돌아가는 앱»을 벗어납니다
1부에서 설문 앱을 만들었습니다. 그런데 거기까지는 응답이 내 브라우저에만 저장됩니다. 다른 사람이 쓰면 그 사람 브라우저에 따로 쌓이고, 내가 창을 지우면 사라집니다. 진짜 설문으로는 못 씁니다.
필요한 것은 «모두의 응답이 한곳에 모이는 창고»입니다. 그게 데이터베이스이고, AI 스튜디오는 Firebase라는 구글 서비스를 버튼 한 번으로 붙여 줍니다.
말로만 설명하지 않았습니다. Firebase를 붙이고 → 설문을 직접 제출하고 → 관리자 화면에 숫자가 뜨는 것까지 확인했습니다. 그 화면을 그대로 싣습니다.
| 1부까지 (브라우저 저장) | 2부 이후 (Firebase) | |
|---|---|---|
| 어디에 쌓이나 | 내 브라우저 안 | 구글 서버 |
| 여러 명이 쓰면 | 각자 따로 쌓임 | 한곳에 모임 |
| 창을 지우면 | 사라짐 | 남아 있음 |
| 돈 | - | 무료로 시작 (뒤에 한도 설명) |
1단계 — «Firebase 붙여 줘»라고 말하면 됩니다
1부에서 만든 앱을 열고, 아래 입력칸에 이렇게 적으십시오. 설정 화면을 뒤질 필요가 없습니다.
Firebase Firestore를 연동해서 설문 응답이 실제로 저장되게 해 줘. - 응답은 surveys 컬렉션에 저장 - 각 응답에 교육명, 응답자 이름·부서, 제출 시각을 함께 저장 - 관리자 대시보드는 Firestore에서 읽어오게 해 줘 - 저장에 실패하면 사용자에게 알려주고 다시 시도할 수 있게 해 줘
약관 동의가 뜹니다. Firebase 이용약관에 동의하는 절차입니다. 동의하면 AI가 «Firebase terms accepted, continue setting up database»라고 스스로 적고 다음 단계로 넘어갑니다.
2단계 — 기다립니다. 2~3분 걸립니다
AI가 스스로 정리해 준 내용이 화면 왼쪽에 나옵니다. 요약하면 이렇습니다.
| 한 일 | 내용 |
|---|---|
| 저장 위치를 만듦 | 응답을 surveys 창고에 넣도록 설정. 제출 시각도 함께 저장 |
| 실시간 반영 | 관리자 화면이 새로고침 없이 새 응답을 받아 옵니다 |
| 오류 처리 | 저장에 실패하면 화면에 알려주고 다시 시도할 수 있게 |
| 보안 규칙 | firestore.rules 파일을 만들어 누가 읽고 쓸 수 있는지를 정해 둡니다 |
보통 이 작업은 개발자가 반나절 걸립니다. 프로젝트 만들고, 키 발급받고, SDK 설치하고, 보안 규칙 쓰고… 그걸 2분 30초에, 한국어 한 문단으로 끝냈습니다.
3단계 — 진짜로 저장되는지 직접 넣어 봅니다
가장 중요한 단계입니다. 만들었다고 끝이 아니라, 넣어 보고 나오는지 확인하셔야 합니다.
이렇게 해보십시오
- 오른쪽 미리보기에서 직접 설문을 작성합니다 (이름·부서·문항 전부)
- «설문 제출하기»를 누릅니다 → «설문이 제출되었습니다» 화면이 나오면 성공
- 상단 «관리자 통계»로 넘어가 숫자가 올라갔는지 봅니다
저는 «홍길동 / 인재개발팀»으로 한 건 넣었고, 관리자 화면에 응답 1명 · 평균 4.00이 떴습니다. 이게 뜨면 서버에 저장된 것입니다.
안 되면 — 화면에 빨간 오류가 뜨면 그 문장을 그대로 복사해서 아래 입력칸에 붙여넣고 «이 오류 고쳐 줘»라고 하십시오. 대부분 보안 규칙 문제라 AI가 바로 고칩니다.
설문을 제출했더니 아래 오류가 납니다. 고쳐 줘. (여기에 오류 문장을 붙여넣으세요)
4단계 — 내 데이터가 어디에 있는지
Firebase는 구글 계정 안에 «프로젝트»를 하나 만들어 거기에 창고를 둡니다. console.firebase.google.com 에서 직접 보실 수 있습니다.
«연결 정보가 코드에 그대로 노출되는 것 아니냐»는 걱정을 하십니다. 실제 파일을 열어 보면 그렇지 않습니다.
그래도 반드시 하실 일 — Firebase API 키는 Firebase 서비스에만 쓰이도록 제한해 두는 것이 원칙입니다. 사내에 배포하기 전에 정보시스템 부서에 firestore.rules 파일을 보여주십시오. «누가 읽고 쓸 수 있는가»가 거기 적혀 있습니다.
얼마나 쓸 수 있나 — 무료 한도
결제 수단 없이 시작합니다. 구글이 공개한 무료 한도는 아래와 같습니다.
| 항목 | 무료 한도 |
|---|---|
| 저장 데이터 | 1GiB |
| 하루 쓰기(응답 저장) | 40,000회 |
| 하루 읽기(대시보드 조회) | 50,000회 |
| 월 네트워크 사용량 | 10GiB |
설문 응답 한 건이 «쓰기 1회»입니다. 하루 4만 건이면 사내 전 직원이 하루에 다 제출해도 남습니다. 돈 걱정은 안 하셔도 됩니다. 한도는 매일 자정(태평양 시간)에 초기화됩니다.
저희가 실제로 겪은 문제와 해결
| 증상 | 해결 |
|---|---|
| «An internal error occurred»가 계속 뜬다 | ① 모델을 Flash-Lite로 바꾸십시오(1부 참고) ② 그래도 나면 10분쯤 쉬었다가 다시 하십시오. 짧은 시간에 요청을 많이 보내면 막힙니다 — 저희는 15번쯤 보내고 막혔다가, 쉬고 나니 한 번에 됐습니다 |
| 한 번 실패한 앱에서 계속 실패한다 | 그 앱은 버리고 새로 만드십시오. 첫 빌드가 깨지면 이후 요청이 전부 깨집니다 |
| 작업이 오래 걸린다 | Firebase 붙이는 데 2~3분은 정상입니다. «Running for ○○s»가 돌면 건드리지 마십시오 |
| 콘솔에 데이터가 안 보인다 | 프로젝트가 여러 개면 다른 프로젝트를 보고 계신 겁니다. 앱이 쓰는 프로젝트 이름을 AI에게 물어보십시오 |
이 앱이 지금 쓰고 있는 Firebase 프로젝트 이름과 데이터베이스 이름을 알려 줘. 콘솔에서 어디로 들어가면 응답을 볼 수 있는지도 알려 줘.
3부에서 할 일
2부까지 하시면 응답이 서버에 쌓입니다. 그런데 교육담당자에게는 아직 하나가 빠졌습니다 — 결과를 엑셀로 보는 것입니다.
| 편 | 하는 일 | 끝나면 |
|---|---|---|
| 1부 | 말로 앱 만들기 | 설문 앱이 돌아갑니다 |
| 2부 이 자료 | Firebase 연결 | 응답이 서버에 쌓입니다 |
| 3부 | 구글 시트 연동 · 배포 | 응답이 시트로 들어오고, 주소만 주면 직원들이 씁니다 |
언제 무엇으로 확인했나
- 화면 캡처
- 2026-09-16, 실제로 연동하고 설문을 제출하며 촬영
- 연동 소요
- 149초 (firestore.rules · src/firebase.ts · src/App.tsx 생성)
- 검증
- 설문 1건 직접 제출 → 관리자 화면에 «응답 1명 · 평균 4.00» 집계 확인
- 무료 한도
- Firebase 공식 문서 (저장 1GiB · 일 쓰기 4만 · 일 읽기 5만)
화면과 버튼 이름은 자주 바뀝니다. 안내와 달라 보이면 «Firebase», «데이터베이스», «Firestore» 라는 말이 있는 버튼을 찾으십시오.