구글 AI 스튜디오 바이브코딩으로 로그인까지 되는 앱 무료로 만들기 (초보자 가이드)

요즘 바이브코딩 많이 하시는데요. 바이브코딩은 코딩을 전혀 몰라도, 내가 원하는 것을 말로 설명하면 AI가 알아서 앱을 만들어주는 방식입니다.

구글 AI 스튜디오에서 원래도 무료로 바이브코딩을 할 수 있었는데, 최근에 풀스택 업그레이드가 되면서 로그인이나 데이터 저장 같은 뒷단 기능까지 한 번에 만들 수 있게 됐어요.

이번에 구글 AI 스튜디오로 직접 앱을 만들어봤는데요. 자세한 과정은 영상에 담았고, 여기에는 영상의 핵심 내용을 간단히 정리해봤습니다.

[영상 순서]

• (00:00) 인트로 - 구글 AI 스튜디오 뭐가 달라졌나
• (00:42) 이런 앱을 만듭니다 - 미니홈피 감성 아이디어 게시판
• (01:41) 구글 AI 스튜디오 접속하기
• (02:56) ① 기획하기 - 기획 문서 만들어서 퀄리티 높이기
• (04:09) ② 빌드하기 - AI한테 시키면 앱이 만들어집니다
• (08:03) ③ 수정하기 - 맘에 안 드는 부분 고치는 법
• (09:20) 로그인 안 될 때 해결법 - 파이어베이스 설정
• (12:46) ④ 배포하기 - 만든 앱을 링크로 공유하기
• (13:58) 알아두면 좋을 팁 4가지
• (16:05) 파이어베이스 무료 사용 안내
• (16:26) 마무리

---

구글 AI 스튜디오, 뭐가 달라졌나?

2026년 3월, 구글이 AI 스튜디오에 Antigravity라는 코딩 에이전트를 탑재했습니다. 여러 파일을 동시에 만들고, 기획부터 코딩, 배포까지 자동으로 처리해주는 AI 비서예요.

기존에도 간단한 앱은 만들어줬는데, 이번 업그레이드로 로그인, 데이터베이스, 서버 기능까지 한 곳에서 처리할 수 있게 됐습니다.

무엇보다 무료라는 게 큰 장점입니다. 구글 계정만 있으면 바로 시작할 수 있어요.

유료 바이브코딩 서비스와의 차이

Bolt.new, Lovable, Replit 같은 유료 바이브코딩 서비스들도 있습니다. 월 $20~25 정도인데, 유료 서비스들은 그만큼 장점이 있어요.

• 유료 서비스의 장점: 더 강력한 모델 사용, 안정적인 성능, 다양한 프레임워크 지원, 팀 협업 기능, 배포/호스팅 통합 관리
• 구글 AI 스튜디오의 장점: 무료로 풀스택 앱까지 가능, 파이어베이스 자동 연동, 구글 생태계(로그인/DB/호스팅) 한 번에 해결

바이브코딩을 처음 시작하는 분이라면 무료인 구글 AI 스튜디오로 경험을 쌓아보고, 더 복잡한 프로젝트가 필요할 때 유료 서비스를 검토하는 게 좋은 전략이에요.

---

실제로 이런 앱을 만들 수 있습니다

바이브코딩으로 어떤 앱을 만들 수 있는지, 실제 예시를 보여드릴게요.

아래는 구글 AI 스튜디오로 직접 만든 ‘행글라이터 아이디어 게시판’입니다. 싸이월드 미니홈피 감성으로 디자인했고, 이런 기능들이 들어가 있어요.

• 아이디어 제출 - 닉네임 입력 후 영상 주제 아이디어 남기기
• 공감 투표 - 다른 사람의 아이디어에 좋아요 누르기
• 모아보기 게시판 - 전체 아이디어 목록 (최신순/공감순 정렬, 카테고리 필터, 키워드 검색)
• “영상이 됐어요” 탭 - 채택되어 실제 만들어진 영상 확인
• 관리자 로그인 - 구글 계정으로 로그인하면 관리자 대시보드 활성화
• 관리 기능 - 게시글 삭제, 채택 표시, 답글 달기, CSV 데이터 다운로드

이 정도 기능을 갖춘 앱을 코딩 1줄 없이 만들 수 있다는 게 바이브코딩의 힘입니다. 이걸 잘 배워두면 모임 투표 페이지, 나만의 기록 앱, 고객 문의 게시판 등 다양한 앱을 직접 만들어볼 수 있어요.

---

바이브코딩 5단계 프로세스

① 기획하기 - 기획이 반이다

바이브코딩에서 가장 중요한 건 기획입니다. “게시판 만들어줘”라고 대충 말해도 앱이 만들어지긴 하지만, 기획을 탄탄하게 하면 결과물이 확 달라져요.

프롬프트 4줄 공식을 활용해보세요.

1. 뭘 만들 건지 - “유튜브 아이디어 게시판을 만들어줘”
2. 누가 쓸 건지 - “구독자들이 영상 주제를 제안하고 투표할 거야”
3. 어떤 기능 - “아이디어 등록, 공감 투표, 관리자 대시보드 필수”
4. 디자인 컨셉 - “싸이월드 감성의 레트로 UI로 해줘”

잘 모르겠는 항목은 비워두셔도 됩니다. “디자인은 3가지 정도 추천해줘, 내가 고를게”라고 적으면 AI가 알아서 제안해줍니다.

이 기획 문서를 텍스트 파일로 만들어서 첨부한 다음, 입력창에 이렇게 넣어보세요.

1) 우선 이 내용을 보고, 추가로 필요한 사항이 있다면 나에게 물어봐줘.
2) 그 내용을 바탕으로 PRD 문서부터 만들어서 저장한 후, 나에게 컨펌을 받아줘.
3) 그 후에 액션 플랜을 문서로 만들어서 저장한 후, 내가 컨펌하면 작업을 시작해줘.

이 3단계 요청이 핵심입니다.

• 1단계 “추가 사항 물어봐” → AI가 빠뜨린 부분을 스스로 질문
• 2단계 “PRD 문서 만들어 컨펌받아” → 기획서 먼저 확인
• 3단계 “액션 플랜 만들어 컨펌 후 시작” → 작업 계획 확인 후 진행

이렇게 하면 AI가 엉뚱한 방향으로 가는 걸 방지할 수 있어요.

PRD란 Product Requirements Document, 쉽게 말하면 “이 앱이 뭘 해야 하는지” 정리한 기획서입니다. AI가 알아서 만들어주고, 우리는 확인만 하면 돼요.

팁: 기획은 가장 좋은 모델로! 구글 AI 스튜디오 설정에서 모델을 선택할 수 있는데, 기획 단계에서는 가장 좋은 모델(현재 기준 Gemini 3.1 Pro)을 쓰는 게 좋습니다. 기획이 탄탄해야 이후 결과물도 좋아지거든요.

② 빌드하기 - AI한테 시키면 앱이 만들어집니다

기획이 끝나면 모델을 Flash 같은 가벼운 모델로 변경해서 사용량을 절약합니다. 좋은 모델로 기획하고, 가벼운 모델로 실행하는 게 퀄리티와 효율을 동시에 잡는 전략이에요.

AI가 PRD를 완성하면 몇 가지를 더 물어봅니다.

• 관리자 이메일 주소는 뭔가요?
• 중복 투표 방지 기능 넣을까요?
• 메인 컬러는 뭘로 할까요?
• 파이어베이스 사용할까요?

답변하고 “진행해”라고 하면 Antigravity 에이전트가 코드를 자동 생성합니다.

여러 파일을 동시에 만들면서 터미널에 진행 상황이 실시간으로 표시돼요. 간단한 앱은 금방, 메뉴가 여러 개면 시간이 좀 더 걸립니다.

③ 수정하기 - 맘에 안 드는 부분 고치기

완성된 앱을 테스트하다 보면 아쉬운 부분이 보이기 마련입니다. 수정하고 싶은 디자인이나 기능을 정리해서 입력창에 붙여 넣으면 돼요.

포커스 모드가 특히 편리합니다. 프리뷰 화면에서 수정하고 싶은 부분을 직접 클릭하면 입력창에 자동 반영돼서, “이 부분 폰트 크기 키워줘” 같이 부분 수정이 아주 쉬워요.

수정은 한 번에 끝나지 않는 경우가 많습니다. 1차 수정 후 아쉬운 부분을 또 요청하고, 점점 완성도를 높여가는 과정이에요.

④ 배포하기 - 만든 앱을 세상에 공개하기

상단의 Publish 버튼을 클릭하면 끝입니다.

• 내 채팅 기록과 코드는 나만 볼 수 있고, URL만 공개됨
• 방문자는 앱만 사용 가능 (내 프롬프트는 절대 안 보임)
• 배포 후에도 AI 스튜디오로 돌아와서 수정 → 다시 Publish 가능

첫 배포 시 결제 셋업이 나옵니다. 신용카드 등록이 필요하지만, 실제로 비용이 나가는 건 아닙니다. 구글이 “혹시 모르니 카드 등록은 해줘”라고 요구하는 것이고, 개인 프로젝트 수준에서는 무료 한도 안에서 충분히 사용할 수 있어요.

---

파이어베이스(Firebase)란?

로그인 기능을 넣으면 AI가 파이어베이스를 자동으로 연결해줍니다. 예전에는 개발자가 직접 설정해야 했는데, 이제 AI가 다 해줘요.

파이어베이스를 쉽게 비유하면 “앱의 뒷방 살림을 다 해주는 집사”입니다.

• 로그인 관리(Authentication) - 누가 들어왔는지 확인
• 데이터베이스(Firestore) - 글, 투표 등 정보를 저장
• 호스팅(Hosting) - 앱을 인터넷에 올려놓기
• 서버 함수(Cloud Functions) - 자동으로 처리해야 하는 작업 실행

이 모든 기능에 무료 한도가 넉넉하게 있어서, 개인 프로젝트나 소규모 서비스에는 충분합니다. 하루 방문자 수백~수천 명 수준까지는 무료로 감당 가능해요.

---

로그인이 안 될 때 해결법 (하얀 화면 문제)

바이브코딩으로 로그인 기능을 넣으면, 하얀 화면만 뜨고 작동이 안 되는 경우가 꽤 있습니다. 대부분 파이어베이스 승인된 도메인 설정이 빠져서 생기는 문제예요.

해결 방법:

1. AI에게 이렇게 말해보세요.

지금 구글 로그인 팝업이 하얀 화면으로 뜨고 작동을 안 해.
Firebase Authorized Domains 설정 문제인 것 같은데,
현재 배포된 도메인 주소를 파이어베이스 설정에 자동으로 추가하는 코드가 빠졌는지 확인해 줘.
아니면 내가 콘솔에서 수동으로 설정해야 하는 주소를 정확히 알려줘.

2. Firebase Console 접속 → 해당 프로젝트 선택 → 인증 메뉴 → 설정
3. “승인된 도메인”에 AI가 알려준 도메인 2개 추가 (앱 주소 + 공유용 주소)

도메인 추가 후에도 크롬 브라우저 캐시 때문에 바로 안 될 수 있습니다. 다른 브라우저에서 열어보면 바로 확인돼요.

영상 09:20~ 부분에서 이 문제를 처음부터 끝까지 해결하는 과정을 보여드렸습니다.

---

알아두면 좋은 팁

작업 이어하기

뒤로 가기 → 최근 작업 목록에서 이전 앱을 선택하면 이어서 작업할 수 있습니다. 연필 버튼으로 앱 이름을 수정해두면 나중에 찾기 편해요.

포커스 모드

프리뷰에서 수정하고 싶은 부분을 클릭하면 입력창에 자동 반영됩니다. 말로 설명하기 어려운 부분도 화면에서 직접 지적할 수 있어서 편리해요.

모바일 미리보기

상단 버튼으로 컴퓨터/모바일 사이즈를 전환할 수 있습니다. 모바일에서 깨지는 부분이 있으면 별도로 수정 요청하세요.

사용량 관리

AI 스튜디오 대시보드에서 사용량을 확인할 수 있습니다. 무료 한도는 모델마다 다르고, 한도를 초과해도 과금되지 않아요. 잠시 멈추고 다음 날 리셋됩니다. 구글 콘솔에서 월 예산 한도와 알림을 설정해두면 더 안심이에요.

---

주의사항

민감한 정보는 넣지 마세요. 무료 버전은 입력 내용이 AI 학습에 사용될 수 있습니다. 비밀번호, 주민번호, 카드번호, 회사 기밀 같은 정보는 절대 넣지 않는 게 좋아요.

---

바이브코딩으로 만들 수 있는 것들

구글 AI 스튜디오 하나로 이런 앱들을 직접 만들 수 있습니다.

• 업무용 - 고객 문의 챗봇, 사내 FAQ 게시판, 프로젝트 관리 도구
• 콘텐츠용 - 아이디어 투표 게시판, 뉴스레터 구독 페이지, 포트폴리오 사이트
• 개인용 - 가계부 앱, 할 일 관리, 독서 기록 앱
• AI 기능 - 이미지 생성 앱, 텍스트 요약 도구, 번역 도구

코딩 1줄 몰라도 됩니다. 중요한 건 “뭘 만들지” 아이디어예요. 만드는 건 AI가 해줍니다. 간단한 것부터 직접 만들면서 바이브코딩을 경험해보셨으면 좋겠습니다. 궁금한 점 있으시면 유튜브 영상에 댓글로 남겨주세요.^^

• 구글 AI 스튜디오 바로가기
• 행글라이터 아이디어 게시판 - 이 영상에서 만든 앱입니다. 직접 써보세요!