진짜 웹 앱을 만들고 출시하는 방법 (Google AI + Firebase)

Google AI Studio에서 웹 앱 생성하기

Google AI Studio에 들어가서 “프리랜서·디자이너용 클라이언트 파일 관리 포털”이라고만 설명해도 기본 구조를 뚝딱 만들어줍니다. 제가 실제로 해봤을 때 가장 중요했던 건 프롬프트를 네 부분으로 나누는 거였어요.

첫째로 앱 이름과 한두 줄 요약, 둘째로 필요한 페이지와 버튼 목록, 셋째로 전체적인 분위기, 넷째로 “인증·DB·저장소·보안 규칙”을 명시하는 부분입니다. 특히 마지막 백엔드 부분을 처음부터 넣으면 AI Studio가 Firebase를 자동으로 활성화해 주더라고요.

이렇게 프롬프트를 구조화하니까 결과물 품질이 확 올라갔습니다. 그냥 “멋진 앱 만들어줘”라고 하면 엉뚱한 코드가 나오는데, 위 네 가지를 명확히 적으면 거의 80% 정도는 원하는 방향으로 나옵니다.

빌드 버튼을 누르면 오른쪽에 미리보기 패널이 뜨고, 중간에 Firebase 활성화 팝업이 나타납니다. 여기서 한 번만 클릭하면 프로젝트가 생성되고 인증, Firestore, Storage까지 자동 연결돼요. 제가 테스트할 때 이 단계에서 3분 정도 걸렸습니다.

이후 AI Studio가 준 초기 코드를 바로 수정하지 말고, Firebase 콘솔로 넘어가서 설정을 먼저 확인하는 걸 추천해요. 그래야 나중에 프론트엔드를 건드릴 때 백엔드가 꼬이지 않습니다.

Firebase 콘솔에서 백엔드 설정과 테스트

Firebase 콘솔에 들어가면 가장 먼저 Authentication → Sign-in method에서 Email/Password를 활성화해야 합니다. AI Studio가 Google 로그인은 자동으로 켜주지만, 이메일 가입은 수동으로 켜야 하더라고요.

다음으로 Storage로 가서 Blaze 요금제로 업그레이드합니다. 유료 구독이 아니라 사용량만큼만 과금되는 방식이라 학습용으로는 거의 비용이 안 나옵니다. 5GB 저장, 하루 5만 읽기 정도면 테스트할 때 충분하더라고요.

설정이 끝나면 AI Studio로 돌아가서 “방금 Firebase 콘솔에서 이메일 인증과 기본 버킷을 설정했다”고 알려주는 프롬프트를 보냅니다. 이렇게 맥락을 주면 AI Studio가 코드를 분석해서 실제로 연결이 잘 됐는지 확인해 줍니다.

이제 미리보기 패널을 최대화해서 직접 테스트합니다. 회원가입 → 로그인 → 파일 업로드 → 다운로드 → 삭제까지 하나씩 해보세요. 제가 겪은 문제는 업로드 후 화면에 파일이 안 보이는 거였는데, “파일 업로드가 안 된다”고 정확히 알려주니까 한 번에 고쳐주더라고요.

한 번에 여러 문제를 넣지 말고, 한 문제씩 해결하는 게 중요합니다. 그래야 다른 기능이 망가지는 걸 막을 수 있어요.

관리자 대시보드 추가와 실제 배포

일반 사용자는 자신의 파일만 볼 수 있게 하되, 관리자는 모든 사용자의 데이터를 한 화면에서 보고 싶을 때가 있습니다. 이때는 Firebase 콘솔에서 관리자 계정의 UID를 복사한 뒤, AI Studio에 “관리자 대시보드 추가” 프롬프트를 보내면 됩니다.

보안 규칙에 isAdmin 함수가 자동으로 생성되는데, Storage 규칙은 가끔 동기화가 안 되더라고요. 그래서 Storage 규칙은 수동으로 복사-붙여넣기해서 UID를 업데이트하는 걸 추천합니다.

이제 Hostinger로 배포할 차례입니다. GitHub 연동이 가장 편한데, AI Studio에서 변경 → GitHub에 stage and commit → Hostinger가 자동 배포하는 흐름이 정말 편하더라고요.

환경 변수에 Gemini API 키를 넣는 것도 잊지 마세요. 키를 넣지 않으면 배포 후 AI 기능이 동작하지 않습니다. 배포가 끝나면 커스텀 도메인으로 접속해서 관리자 계정으로 로그인해 보세요.

이제 진짜 운영 가능한 웹 앱이 완성됩니다. 이후 수정이 필요하면 AI Studio에서만 변경하고 GitHub에 푸시하면 Hostinger가 알아서 반영해 줍니다.