Last updated on 4월 17th, 2025 at 06:18 오후
Firebase Studio First Look:
9 Features AI Developers Will Love
Firebase Studio: AI 앱 만들기? 이젠 5분 컷!
🎥 Firebase Studio 등장!
안녕하세요 여러분! 구글이 드디어 Firebase Studio를 새로 출시했어요. 이걸 사용하면 완전 무료로, 전체 스택 AI 애플리케이션을 ‘vibe code’ 방식으로 빠르게 만들어낼 수 있어요. 말하자면, 구글이 이제 Bolt, Cursor, Lovable 같은 에이전트 기반 개발 회사들과 본격적으로 경쟁하게 된 거죠.
그런데 구글은 아주 강력한 이점을 갖고 있어요. Firebase Studio는 기존의 Firebase 위에 구축되어 있기 때문에, 여러분이 여기서 만들게 될 모든 애플리케이션은 Firebase 인증, 데이터베이스 툴, 그리고 구글이 계속해서 내놓고 있는 새로운 AI 기능들과 아주 쉽게 통합할 수 있어요.
자, 오늘 이 영상에서는 제가 직접 Firebase Studio를 테스트하면서 발견한 아주 멋진 기능 아홉 가지를 소개해드릴 거예요. 이걸 보면 여러분도 이 도구로 개발을 시작할 때 큰 도움을 받을 수 있고, 프로처럼 앱을 뚝딱 만들어낼 수 있을 거예요.그럼 지금부터 Firebase Studio로 가서 빠르게 애플리케이션을 하나 띄워보고, 이 놀라운 기능들을 하나씩 알아보도록 하죠!
아, 그리고 잠깐! 만약 여러분이 AI 프로젝트에 도움이 필요하거나, 비슷한 관심사를 가진 AI 개발자들을 만나고 싶다면, 제가 운영하는 무료 커뮤니티 ‘AI Developer Accelerator’를 꼭 한 번 확인해 보세요. 지금 회원 수는 6,000명이 넘어요!
이 커뮤니티에서는 매주 무료 코칭 세션도 열리고 있어서, 저나 다른 개발자들과 영상통화를 통해 프로젝트 진행 상황을 공유하고 조언도 들을 수 있어요. 정말 좋은 기회니까, 아래 설명란에 있는 링크로 꼭 들어가보세요!
자, 그럼 다시 영상 본론으로 돌아가볼게요.
👨💻기능1 : 블루프린트 설계
자, 여러분! 이제 Firebase Studio에 오신 걸 환영합니다. 오늘 우리는 vibe coding 방식으로, 아무것도 없는 상태에서 전체 스택 AI 애플리케이션을 하나 만들어볼 거예요. 그리고 그 과정을 통해 Firebase Studio 안에 숨겨진 9가지 놀라운 기능들을 하나씩 보여드릴게요.
먼저 본격적으로 기능을 살펴보기 전에, 애플리케이션을 하나 만들어야 하니까, AI가 자동으로 앱을 생성해볼 수 있게 간단한 프롬프트부터 입력해볼게요.
제가 작성한 프롬프트는 이런 거예요:
“간단한 할 일 목록 앱을 만들어주세요. 사용자가 설명을 입력하면 AI가 이 설명을 분석해서 ‘쉬움’, ‘중간’, ‘어려움’ 중 하나로 분류해주세요. 쉬운 작업은 초록색, 어려운 작업은 빨간색으로 표시해주세요.”
그리고 AI에게 좀 더 명확한 지침을 주기 위해, 제가 예전에 그려놓은 아주 간단한 레이아웃 스케치를 함께 첨부했어요. 거기에는 입력창과 각 작업의 난이도를 표시하는 방식이 그려져 있어요. 아주 직관적이죠.
자, 이제 프로토타이핑을 시작해봅시다! 이 과정에서 Firebase Studio의 첫 번째 놀라운 기능이 등장할 거예요. 바로 ‘앱 블루프린트’ 기능이에요.
이게 뭐냐면요, 애플리케이션을 실제로 생성하기 전에, Firebase Studio가 전체 계획을 세워서 보여줘요. 마치 “이 방향으로 앱을 만들 건데, 괜찮으신가요?” 하고 먼저 확인해주는 거죠.
이 블루프린트는 두 가지 방식으로 수정할 수 있어요. 먼저 그걸 보여드리기 전에, 이 도구가 뭘 하고 있는지부터 간단히 설명드릴게요.
지금 이 화면에서는, Firebase Studio가 앞으로 만들 핵심 구성요소들을 한눈에 정리해주고 있어요. 예를 들어, 사용자가 작업을 입력할 수 있는 입력 영역, 생성 버튼, 그리고 작업 난이도를 판별하는 AI 랭커 등이 포함되어 있죠.
이 전체 계획은 앱을 생성하기 전에 사용자가 편집할 수 있어요. 수정 방법은 두 가지가 있어요:
- 상단의 연필 아이콘을 클릭해서, 직접 블루프린트를 수정하거나 주요 기능을 바꿔 입력할 수 있어요. AI가 의도를 더 잘 이해할 수 있도록 세세한 조건을 추가하는 거죠.
- 혹은 아래쪽에 프롬프트를 더 추가해서 “이 부분은 이렇게 바꿔주세요”라고 요청할 수도 있어요.
예를 들어, 저희는 이렇게 요청해볼게요:
“기본 색상은 밝고 생기 있는 파란색으로 설정해 주세요. 전체 사이트는 모던한 디자인이어야 하고, 다른 색상은 검정, 회색, 흰색만 사용해주세요. 작업 난이도는 각각 빨강(어려움), 주황(중간), 초록(쉬움)으로 표시해주세요. 그리고 앱은 다크 모드에 최적화되어야 해요.”
이렇게 요청하면, Firebase Studio가 이 요구사항을 스타일 가이드에 반영해서 블루프린트를 업데이트해줘요. 그리고 그 결과로, 각 난이도별 색상 정의도 깔끔하게 보여주죠. 정말 멋지지 않나요?
이제 우리가 원하는 방향대로 애플리케이션을 만들어볼 준비가 끝났어요. 다음 파트에서는 본격적으로 앱을 프로토타입해서 실제로 생성하는 과정, 그리고 두 번째 기능부터 이어서 보여드릴게요!
✨기능2 : 클릭 앤 포인트 편집
자, 이제 우리가 설정한 블루프린트를 기반으로, Firebase Studio가 실제 스택 AI 애플리케이션을 만들어내기 시작할 거예요. 여기에는 페이지 생성, 스타일 시트 작성, 테스트 패키지 설치 등, 일반적으로 우리가 코드를 일일이 작성해서 구성해야 하는 모든 작업들이 포함돼요. 그런데 이 모든 걸 자동으로 해주니까 정말 마법 같죠!
이 작업은 몇 초 정도 걸릴 수 있어요. 내부적으로는 이렇게 돌아갑니다:
‘기능 생성 → 에러 확인 → 에러 수정 → 다시 체크’…
이런 식으로 계속 반복해서, 완성된 상태로 앱을 보여줄 때까지 자동으로 고쳐나가는 거예요. 그래서 지금처럼 다크 모드도 적용된 화면이 뜨는 거고요. 물론 아직은 몇 가지 명령어가 반영이 덜 되었지만, 곧 수정하는 방법도 알려드릴게요.
먼저, 앱이 제대로 작동하려면 자동으로 API 키를 생성해야 해요. 화면에서 버튼을 누르면 Google Gemini API 키가 생성되고, 이 키를 통해 AI 기능, 예를 들면, 작업 난이도 분석 같은 걸 사용할 수 있게 되는 거예요. 이 작업은 잠깐이면 끝나요!
이제 두 번째 멋진 기능, 바로 클릭 앤 포인트(Edit by Click and Select) 기능을 소개할게요. 이 기능은 에디터 안에서 특정 UI 요소를 직접 선택해서 바로 편집할 수 있게 해줘요.
예를 들어, 제가 지금 버튼의 색상이 마음에 들지 않다고 할게요. 이럴 땐 ‘선택 도구’를 활성화하고, 원하는 버튼을 클릭해서 변경 요청을 직접 입력하면 돼요. 예를 들어 이렇게:
“모든 버튼은 지정된 기본 파란색(primary blue)을 사용해주세요.”
이 요청을 입력하면, Firebase Studio는 이 피드백을 기반으로 버튼 색상을 자동으로 업데이트해줘요. 실제로 적용된 걸 보면, 훨씬 더 생기 있고 쨍한 파란색으로 바뀌는 걸 확인할 수 있어요!
물론 아직 Gemini가 완벽하진 않아요. 다른 AI 툴보다는 약간 느리거나 똑똑하지 않을 수 있지만, 충분히 작동하고 있고, 가끔은 약간의 수동 조정이 필요하긴 해도 꽤 훌륭하게 일해줘요.
✨기능3 : 롤백(Rollback)
다음은 정말 유용한 세 번째 기능, 바로 롤백 기능이에요. 이 기능은 내가 방금 적용한 변경사항이 마음에 들지 않을 때, 아주 손쉽게 이전 상태로 되돌릴 수 있게 해줘요.
예를 들어, 다음과 같은 요청을 해볼게요:
“하단에 ‘Brandon이 사랑을 담아 만들었습니다. 구독과 좋아요 부탁드려요!’ 라는 내용의 푸터(footer)를 추가해주세요.”
Firebase Studio는 이 요청을 몇 초 만에 처리해줄 거예요. 실제로 화면을 보면, 요청한 푸터가 앱 하단에 생성된 걸 확인할 수 있어요. 그런데, 혹시라도 이 변경이 마음에 들지 않으면?
그럴 땐 그냥 ‘되돌리기(restore)’ 버튼을 클릭하기만 하면 돼요. 그러면 마치 아무 일도 없었던 것처럼 원래 상태로 복원됩니다. 많은 개발자들이 vibe coding을 하다 보면 “앗, 다 망가졌어…!” 같은 상황을 자주 겪는데요, 이 롤백 기능 덕분에 마음 편히 실험할 수 있어요. 아주 쓸모있는 기능이죠!
✨기능4 : 낙서 기능, 애노테이트(Annotate)
이번에는 네 번째 기능, 즉 애노테이트(annotate), 혹은 스크리블(scribble) 기능을 소개할게요. 이건 Firebase Studio 안에서 직접 그림을 그리거나 낙서하듯 UI 구조를 설명할 수 있는 기능이에요.
사용 방법은 간단해요. ‘annotate’ 버튼을 누르면 화이트보드처럼 낙서할 수 있는 창이 뜨고, 여기서 자유롭게 그리면서 피드백을 줄 수 있어요. 마치 Excalidraw처럼 말이죠. 예를 들어, 아까 추가했던 푸터를 다시 넣고 싶다고 해봐요. 그러면 바닥에 네모를 하나 그려서 푸터 영역을 표시하고, 안에 텍스트를 써서 이렇게 말할 수 있어요:
“Brandon Hancock이 사랑을 담아 만들었습니다. 구독과 좋아요 부탁드려요.”
그 위에 작게 구분선도 그려 넣고 나서, 추가 설명도 입력할 수 있어요:
“이미지처럼 푸터를 추가해주세요. 텍스트는 가운데 정렬해주시고, 푸터는 화면 하단에 고정되게(sticky) 해주세요.”
이렇게 그리면, Firebase Studio는 그 낙서 내용을 분석해서 실제 앱에 반영해요. 물론 아직 완벽하게 텍스트를 ‘love’ 대신 ‘heart’로 바꿔버리는 등 오차는 있지만, 낙서 하나로 앱을 변경할 수 있다니 정말 신기하지 않나요?
✨기능5 : 실시간 모바일 프리뷰
자, 이제 다섯 번째 기능입니다. 이건 휴대폰에서 실시간 프리뷰를 볼 수 있는 기능이에요. 앱 상단의 링크 버튼을 누르면 QR코드 또는 링크가 생겨요. 이걸 스마트폰으로 스캔하면, 지금 작업 중인 웹앱이 실시간으로 모바일 화면에 뜨는 거예요. 지금 제가 보여드리는 것처럼 말이죠! 즉, 데스크탑 화면에서 개발하고 있는 걸 바로바로 스마트폰에서 확인할 수 있는 거죠. 사용자 반응을 테스트하거나 모바일 UI를 점검할 때 아주 유용해요.
💻기능6 : 코드 에디터 & Gemini 통합
자, 이제 개발자분들이 정말 좋아하실 깊이 있는 기능들을 소개할 차례예요. 지금까지는 에디터의 겉모습만 봤다면, 이제부터는 코드에 직접 접근해볼 거예요. 먼저, 상단 오른쪽에 있는 코드 아이콘을 클릭하면, 프로토타입 뷰에서 코드 뷰로 전환돼요. 이 작업은 잠깐 시간이 걸릴 수 있어요. 왜냐면, 이때 Firebase Studio가 두 개의 추가 창을 띄우거든요:
- 웹 뷰 – 지금 작성 중인 웹사이트를 실시간으로 볼 수 있는 창
- Gemini 코드 에디터 – AI와 상호작용하며 코드 작성 및 수정을 도와주는 창
이제부터는 마치 Cursor 같은 환경이 만들어지는 거예요. 코드도 작성하고, AI한테 말로 명령해서 문서를 수정하거나 기능을 추가할 수 있어요. 예를 들어, 이렇게 요청할 수 있죠:
“README 문서에 Firebase Studio에 대한 설명을 더 추가해주세요.”
그러면 AI는 관련 파일을 찾아서, 변경하려는 파일이 맞는지 확인한 뒤, 수정 내용을 미리 보여줘요. 여러분은 그걸 확인하고, ‘파일 업데이트’를 누르기만 하면 돼요. 정말 놀랍죠?
🖱️ 사이드바 서브기능: 코드에 직접 명령 내리기
이 코드 뷰 안에는 아주 유용한 추가 기능도 있어요. 예를 들어 page.tsx 같은 주요 파일을 열어서 특정 코드를 직접 선택한 다음, 우클릭하거나 상단의 Gemini 버튼을 눌러 다음과 같이 요청할 수 있어요:
“이 코드에 ‘ultra hard’ 난이도 색상으로 검정(black)을 추가해주세요.”
그러면 Gemini가 자동으로 필요한 수정 사항을 찾아 코드에 반영해주고, 여러분에게 최종 승인 요청을 해요. 예를 들어, AIState 파일을 먼저 수정한 다음, 다른 관련 파일도 순차적으로 업데이트하는 방식이에요. 물론 아직 완벽하진 않아서, 가끔은 Ctrl + Z(되돌리기)를 몇 번 눌러야 할 수도 있어요. 그래도 기능 자체는 굉장히 유용하고, 앞으로 점점 더 좋아질 거라고 확신해요.
🧪기능7 : 터미널 통합
다음으로 소개할 일곱 번째 기능은 통합 터미널이에요. 이건 말 그대로 Firebase Studio 안에서 직접 명령어를 입력해 패키지를 설치하고 개발을 이어갈 수 있는 기능이에요.
예를 들어 이렇게 입력할 수 있어요:
npm i axios
그러면 package.json과 package-lock.json 파일이 자동으로 업데이트되고, 필요한 패키지가 설치돼요. 마치 로컬 개발 환경에서 하던 걸 Firebase Studio 안에서 그대로 할 수 있는 거죠. 이건 정말 개발자 입장에서 엄청난 장점이에요.
🛠️기능 8: 인라인 수정 & 에이전트 기반 코드 자동수정
다음은 여덟 번째 기능이에요. 이건 앞에서 설명했던 코드 수정 기능과 조금 겹치긴 하는데요, Firebase Studio 안에서는 에이전트가 직접 코드 오류나 제안을 잡아서 수정해주는 기능이 포함되어 있어요.
예를 들어, 코드 위에 마우스를 올리면 자동으로 에러를 감지하고 “이걸 이렇게 바꾸는 게 어때요?” 하고 제안하는 식이에요. 혹은 아예 AI에게 “이 코드가 잘못된 것 같아요, 고쳐주세요” 하고 요청할 수도 있어요. 이런 자동화된 코드 수정 기능은 생산성을 정말 많이 끌어올려줄 수 있어요.
🧠 아홉 번째 기능: Gemini 모델 변경하기
마지막으로 소개할 아홉 번째 기능은 Gemini 모델 설정이에요. Firebase Studio는 기본적으로 Google의 Gemini 모델을 사용하는데요, 여기서 더 똑똑한 모델로 교체할 수 있어요.
예를 들어, 기본 모델이 원하는 작업을 제대로 못한다면 이렇게 요청해보세요:
“Gemini 2.5 Pro 모델을 사용해주세요.”
그러면 Firebase Studio가 Google AI Studio로 연결해주고, 여러분은 거기서 API 키를 생성하면 돼요. ‘API 키 생성하기’ 버튼을 누르면 키가 생성되고, 그걸 복사해서 Firebase Studio에 붙여넣으면 끝이에요.
이제 더 강력한 AI가 여러분의 요청을 이해하고 반응할 수 있게 되는 거죠!
예를 들어, 새 모델을 설정한 뒤 다시 요청해보면, 이전에 실패했던 작업도 정확히 처리되기 시작해요. 예를 들면, “검정색을 ultra hard 작업에 적용해줘” 같은 요청이 이제는 매끄럽게 작동하는 거예요. 코드도 정확히 수정되고, 페이지에도 반영돼요.
물론 아직 전체적으로 봤을 땐, Firebase Studio는 B- 정도의 완성도지만, 앞으로 몇 달 안에 A+까지 끌어올릴 수 있을 만큼 잠재력이 엄청나요.
🚀 앱 배포 & 최종 테스트
자, 이제 마지막으로 앱을 실제로 배포하는 단계로 넘어갈 거예요.
이 부분은 간단하지만 중요한 절차이니 천천히 따라오시면 됩니다.
먼저 Firebase Studio 상단에서 ‘Rollout 생성(Create Rollout)’ 버튼을 클릭하세요. 만약 여러분이 처음으로 배포하는 거라면, 어떤 요금제를 사용할지 선택하라는 메시지가 뜰 거예요.
하지만 걱정 마세요. 기본 옵션은 실질적으로 무료입니다. ‘사용한 만큼 과금(pay-as-you-go)’ 방식이긴 하지만, 기본 사용은 $0에 가까워요. 이 과정을 시작하면 Firebase Studio는 실제로 앱을 완전히 배포할 수 있도록 백엔드에서 준비를 시작해요. 걸리는 시간은 약 10분 정도이고, 영상에서도 말하듯 실제로 10분 정도 소요되니 참고하시면 돼요. 배포가 완료되면, 여러분은 이제 taskranker.com 같은 진짜 웹사이트 주소를 갖게 되고, 그 주소를 통해 언제든 어디서든 접속 가능한 실제 AI 웹앱을 보유하게 되는 거죠!
🧪 실전 테스트: AI가 작업 난이도 평가하기
이제 앱이 완전히 배포되었으니, 마지막으로 우리가 만든 기능을 실제로 테스트해볼 시간이에요.
예시 1:
- 입력: “쓰레기 버리기”
- 결과: 생성 → “쉬움(Easy)”으로 평가됨 → 초록색으로 표시됨
예시 2:
- 입력: “올해 세금 정리하기”
- 결과: 생성 → “어려움(Hard)”으로 평가됨 → 빨간색으로 표시됨
(*영상 속 화자: “나는 세금 정리 정말 싫어해요”라고 농담도 덧붙임 😅)
예시 3:
- 입력: “우주선 발사하기”
- 결과: 생성 → 당연히 “어려움”으로 평가됨!
이렇게 우리가 만든 앱이 실제로 AI를 활용해서 사용자 입력을 받아 작업 난이도를 평가하고, 해당 난이도에 맞는 색깔로 시각화하는 걸 확인할 수 있어요. 작동도 잘 되고, 다크 모드도 적용되어 있고, 전반적으로 만족스러운 결과예요. 이걸로 전체 9가지 Firebase Studio의 기능을 활용해 완전한 AI 앱을 만들어내는 여정을 마무리했어요!
🎉 마무리하며
이제 여러분은 Firebase Studio의 놀라운 아홉 가지 기능을 다 체험하셨어요.
직접 애플리케이션을 만들어보는 과정을 통해 얼마나 간단하고 강력한 도구인지 느끼셨을 거예요. 혹시 오늘 영상 보시면서 궁금한 점이 있다면, 아래 댓글에 자유롭게 남겨주세요. 그리고, 다시 한 번 말씀드리지만 6,000명 이상의 AI 개발자들과 함께하는 무료 커뮤니티 ‘AI Developer Accelerator’에도 꼭 참여해보세요! 매주 무료 코칭 세션이 열리고, 서로 도움을 주고받을 수 있는 공간이에요. 여러분을 그곳에서 만나뵐 수 있으면 정말 기쁠 거예요.
그동안 제 채널에 올려둔 다른 AI 관련 영상들도 꼭 한 번 둘러보시고요, 지금 화면에 뜨는 추천 영상들도 확인해보세요!
그럼 오늘도 함께해주셔서 감사합니다.
다음 영상에서 또 만나요~ 안녕! 👋
.
.
AI 시대, 가장 확실한 대비를 위해
지금 바로 배울 수 있는 [ AI ] 관련 강의가 준비되어있어요.
지금 바로 아래에서 관심을 끄는 강의를 눌러 확인해보세요.
 Computer Vision Signature초격차 패키지 Online. |
 AI로 코딩하는 시대! 비개발자도 할 수 있는Cursor.AI 실전 웹 제작 |
가장 먼저 만나는 Google Gemini |
 초격차 패키지:15개 프로젝트로 실무까지 끝내는Dart & Flutter 앱 개발 |
[출처]Firebase Studio: 9 Must See Features (FREE to Use)
