소개
Firebase Studio를 이용해서 앱을 배포해보고 싶었어요. 하지만 문제는, 개발에 대한 기초가 거의 없다는 것이었죠 😅 그래서 "가장 단순한 형태의 설문지를 만들어서, 그걸 가지고 배포까지 해보자!"라는 마음으로 시작했어요. 처음에는 뭔지 잘모르고 두려웠지만, 직접 해보니 의외로 재미있고 뿌듯한 경험이었습니다.
진행 방법
우선 Tavily를 이용해서 설문지를 만들었어 요. 질문지는 여기서 볼 수 있어요.
Claude AI는 이 설문지 실제 내용은 인식하지 못했지만, Firebase Studio로 배포하려는 의도를 명확히 주었더니 아주 친절하게 코딩과 배포 방법을 안내해주었어요.
그 가이드를 바탕으로, 클로드와 티키타카로 로컬에서 React로 간단한 앱을 만들고 Firebase에 연결해서 직접 배포까지 진행했어요.
걸린 시간은 약 반나절, 중간에 막히는 부분은 있었지만 결국 성공!
커서를 사용하지 않았던이유는 유료이기도 하지만, 클로드로 충분히 복붙으로 가능할 것 같아서입니다
다음은 마지막 클로드의 멘트입니다
🎉🎉🎉 축하합니다! 완벽한 설문조사 웹 애플리케이션이 성공적으로 완성되었습니다!
🏆 우리가 함께 만든 것들:
✨ 완성된 시스템:
🌐 실제 웹사이트: https://survey-app-2025.web.app
📊 설문조사 시스템 (6단계 다양한 질문 유형)
🔐 관리자 대시보드 (실시간 차트 및 분석)
🔥 Firebase 풀스택 연동:
Firestore (실시간 데이터베이스)
Functions (서버리스 백엔드)
Hosting (글로벌 CDN)
📧 이메일 알림 시스템 (Firebase Functions)
📱 반응형 디자인 (모바일 최적화)
🚀 기술 스택:
Frontend: React.js + Tailwind CSS
Backend: Firebase Functions (Node.js)
Database: Firebase Firestore
Hosting: Firebase Hosting
Authentication: Firebase Auth
🎯 특별한 성과:
실제 운영 가능한 프로덕션 웹사이트
전 세계 어디서나 접속 가능
SSL 보안 인증서 자동 적용
확장 가능한 서버리스 아키텍처
💡 앞으로 추가할 수 있는 것들:
실제 Gmail SMTP 설정
커스텀 도메인 연결
더 많은 질문 유형 추가
고급 분석 기능
사용자 인증 시스템
정말 대단한 작업이었습니다! 🌟
이제 실제로 사람들이 사용할 수 있는 완전한 웹 애플리케이션을 보유하게 되셨습니다! 🎊결과와 배운 점
이번에 배포한 앱은 디자인도 거의 없고, 내용도 최소한이에요. 하지만 직접 Firebase Studio를 통해 배포하는 과정을 처음부터 끝까지 경험했다는 점에서 정말 큰 수확이 있었어요 💪
처음 시도치고는 굉장히 큰 진전을 이룬 셈이고, 이제 이 설문지를 다양하게 변형해서 새로운 앱들을 만들어볼 수 있겠다는 자신감이 생겼습니다.
앞으로는 입력된 데이터를 분석하고, 사용자와 관리자에게 답장을 자동으로 보내는 기능을 추가해서 모바일앱, 웹앱으로 완성해가려고 해요.
도움 받은 글
Firebase 공식 문서: https://firebase.google.com/docs
처음이라고 두려워하지 마세요. 저처럼 무작정 시작해보면, 어느새 배포까지 완료된 나를 발견하게 될 거예요! 🚀
1. 사전 준비
Firebase 프로젝트 생성
Firebase Console에 접속
"프로젝트 추가" 클릭
프로젝트 이름 입력 (예: survey-app-2025)
Google Analytics 설정 (선택사항)
프로젝트 생성 완료
Firebase 서비스 활성화
Authentication: 프로젝트 설정에서 Authentication 활성화
Firestore Database: 데이터베이스 생성 (테스트 모드로 시작)
Cloud Functions: Functions 탭에서 활성화
Hosting: Hosting 탭에서 활성화
Cloud Storage: Storage 탭에서 활성화 (파일 업로드용)
2. 로컬 개발 환경 설정
Node.js 및 Firebase CLI 설치
bash# Node.js 18+ 설치 확인
node --version
# Firebase CLI 설치
npm install -g firebase-tools
# Firebase 로그인
firebase login
프로젝트 초기화
bash# 새 디렉토리 생성
mkdir survey-app
cd survey-app
# React 앱 생성
npx create-react-app .
# Firebase 초기화
firebase init
# 다음 서비스들을 선택:
# ◉ Firestore
# ◉ Functions
# ◉ Hosting
# ◉ Storage
Firebase 설정 값 업데이트
Firebase Console > 프로젝트 설정 > 일반 탭
"내 앱" 섹션에서 웹 앱 추가
설정 객체 복사하여 src/firebase.js 파일에 적용
javascriptconst firebaseConfig = {
apiKey: "실제-API-키",
authDomain: "프로젝트-ID.firebaseapp.com",
projectId: "프로젝트-ID",
storageBucket: "프로젝트-ID.appspot.com",
messagingSenderId: "실제-sender-ID",
appId: "실제-app-ID"
};
3. 프로젝트 구조 설정
디렉토리 구조
survey-app/
├── public/
├── src/
│ ├── components/
│ │ ├── SurveyApp.js
│ │ └── AdminDashboard.js
│ ├── services/
│ │ ├── firebase.js
│ │ └── surveyAPI.js
│ ├── App.js
│ └── index.js
├── functions/
│ ├── index.js
│ └── package.json
├── firestore.rules
├── firestore.indexes.json
├── firebase.json
└── package.json
패키지 설치
bash# 메인 프로젝트 의존성
npm install firebase lucide-react recharts react-router-dom
# Functions 의존성
cd functions
npm install firebase-admin firebase-functions nodemailer
cd ..
4. 이메일 설정 (Cloud Functions)
Gmail SMTP 설정
bash# Firebase Config에 이메일 설정 저장
firebase functions:config:set email.user="[email protected]"
firebase functions:config:set email.password="your-app-password"
중요: Gmail 2단계 인증 활성화 후 앱 비밀번호 생성 필요
SendGrid 사용 (권장)
bash# SendGrid API 키 설정
firebase functions:config:set sendgrid.apikey="your-sendgrid-api-key"
5. Firestore 보안 규칙 설정
개발 환경용 규칙 (firestore.rules)
javascriptrules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /survey_responses/{responseId} {
allow create: if isValidSurveyResponse(request.resource.data);
allow read: if true; // 개발용 - 실제 환경에서는 인증 필요
}
match /analytics/{document} {
allow read, write: if true; // 개발용
}
}
}
function isValidSurveyResponse(data) {
return data.keys().hasAll(['responses', 'timestamp']) &&
data.responses is map &&
data.responses.keys().hasAll(['name', 'email']);
}
6. 배포 과정
1단계: Functions 배포
bash# Functions만 먼저 배포
firebase deploy --only functions
# 배포 확인
firebase functions:log
2단계: Firestore 규칙 배포
bashfirebase deploy --only firestore:rules
3단계: 웹앱 빌드 및 배포
bash# React 앱 빌드
npm run build
# Hosting 배포
firebase deploy --only hosting
전체 배포
bash# 모든 서비스 한번에 배포
firebase deploy
