https://youtu.be/Rd6F5wHIysM?si=MZruJS1cWiJ14Dgc
파이어베이스 스튜디오를 직접 사용해봤습니다. 그래서 제가 지난 몇 주간 배우고 테스트하는 데 들인 시간을 절약해줄 간략한 요약본을 여기 드리겠습니다. 파이어베이스 스튜디오는 구글이 개발한 웹 기반 AI 앱 빌더로, 러버블, 레플릿, 볼트 같은 다른 웹 기반 AI 앱 빌더들과 경쟁하기 위해 만들어졌습니다. 파이어베이스 스튜디오가 처음 나왔을 때 평가는 매우 엇갈렸습니다. 어떤 사람들은 "파이어 스튜디오가 다른 모든 코드 없는 AI 빌더 앱들을 쓸모없게 만들었다"고 말했고, 다른 사람들은 "파이어베이스 스튜디오에 시간을 낭비하지 마세요. 망했습니다. 혼란스러웠어요"라고 말했습니다.
그래서 저는 대체 무슨 일인지 모르겠어서 직접 사용해봐야겠다고 생각했습니다. 그리고 솔직히 말씀드리자면, 빙빙 돌려 말하지 않고 바로 제 평가를 드리겠습니다. 파이어베이스 스튜디오가 다른 모든 AI 앱 빌더들을 쓸모없게 만들지는 못했지만, 그렇다고 완전히 쓸모없는 것도 아닙니다. 저는 7점 만점에 5점 정도, 괜찮다고 평가하고 싶습니다. 파이어베이스 스튜디오가 볼트나 레플릿, 러버블보다 약간 더 높은 학습 곡선을 가지고 있는 것은 사실입니다.
그러나 일단 익숙해지면 괜찮고, 무료라는 큰 장점도 있습니다. 그래서 저는 배울 가치가 있다고 생각합니다. 게다가 이것은 초기 출시 버전이며, 앞으로 몇 달 안에 훨씬 더 좋아질 것으로 기대합니다. 이 비디오에서는 파이어베이스 스튜디오가 정확히 무엇인지 설명하고, 실제로 파이어베이스를 사용하여 앱, 특히 올드스쿨 포켓몬에서 영감을 받은 생산성 앱을 바이브 코딩할 것입니다. 이를 통해 파이어베이스 내에서 개발하는 것이 어떤 것인지 제대로 알 수 있고, 그 과정에서 기능들을 보여드릴 수 있을 것입니다.
자, 파이어베이스 스튜디오는 무엇일까요? 파이어베이스 스튜디오는 사용자 친화적인 웹 기반 AI 앱 빌더입니다. 파이어베이스 스튜디오는 자신을 풀 스택 AI 작업 공간으로 홍보하며, "AI 에이전트를 통해 전체 개발 수명 주기를 가속화합니다. 백엔드, 프론트엔드, 모바일 앱을 모두 한 곳에서 구축합니다"라고 말합니다. 기본적으로 파이어베이스 위에 구축된 사용자 친화적인 AI 기반 앱 빌더입니다.
그리고 이 제품을 둘러싼 엄청난 기대감에는 세 가지 주요 이유가 있습니다. 첫째는 구글 제품이라는 점입니다. 이는 최초의 대형 기술 기업이 자금을 지원하는 AI 앱 빌더이며, 사람들이 높은 기대를 가졌기 때문입니다.
둘째 이유는 다른 대부분의 구글 제품들처럼, 경쟁 제품들이 월 최소 20달러에서 30달러인 반면, 무료로 사용할 수 있다고 홍보된다는 점입니다. 그리고 세 번째 이유는 파이어베이스 스튜디오가 구글의 웹 및 모바일 앱 구축을 위한 백엔드 플랫폼인 파이어베이스 위에 구축되었다는 점입니다. 이것이 파이어베이스 스튜디오를 매우 유망하게 보이게 만듭니다.
왜냐하면 현재의 웹 기반 AI 앱 빌더들의 문제점은 매우 아름다운 프론트엔드를 만들 수 있지만, 데이터베이스, 인증, 사용자 관리와 같은 백엔드 작업에서는 완전히 망가진다는 점입니다. 그래서 이론적으로 파이어베이스 스튜디오가 파이어베이스와 같은 백엔드 플랫폼 위에 구축되었다면, 백엔드 작업도 처리할 수 있어야 하며, 이는 오늘날 앱 빌더들이 직면한 가장 큰 문제, 즉 진정한 풀 스택 앱 빌더의 문제를 이론적으로 해결할 수 있을 것입니다.
이제 실제로 사용해봅시다. 자, 여기 랜딩 페이지가 있습니다. '시작하기'를 클릭하면 매우 친숙한 인터페이스로 이동합니다. "AI로 앱을 프로토타입화하세요"라고 되어 있고, 프롬프트를 입력할 수 있습니다. 팁 계산기, 레시피 생성기 같은 기본 프롬프트가 있지만, 그것들은 지루하고 현실적이지 않습니다. 팁 계산기를 다시 만드는 것에 아무도 크게 흥분하지 않을 것이라고 생각합니다.
그래서 대신 우리는 유용한 것을 만들 것입니다. 그것은 올드스쿨 포켓몬에서 영감을 받은 생산성 앱으로, 일일 목표를 설정하고 완료하여 경험치를 얻는 방식으로 포켓몬의 레드 같은 AI 라이벌과 경쟁하는 것입니다. AI 앱 빌더를 사용한 제 경험에 따르면, 최종 앱 제품이 어떻게 보일지 명확하게 생각할 수 있다면 일반적으로 훨씬 더 좋은 결과를 얻을 수 있습니다. 그래서 이 프롬프트를 구체화하고 훨씬 더 좋은 결과를 얻기 위해, 저는 실제로 챗GPT를 사용하여 앱이 어떻게 보일지 생각하는 데 도움을 받을 것입니다.
챗GPT에 다음 프롬프트를 입력했습니다. "사용자가 일일 목표를 설정하고 완료하면 경험치를 얻는 게임화된 픽셀 아트 앱을 찾고 있습니다. 게으름을 피우면 AI 라이벌이 경험치를 얻습니다. 포켓몬의 레드 같은 픽셀 아트 게임에서 영감을 받았습니다." 저는 사용자가 AI 라이벌과 할 일(예: 50분 동안 미적분 공부하기, 물 여덟 잔 마시기, 1시간 동안 헬스장 가기)을 커스터마이즈할 수 있도록 선택할 수 있어야 한다고 적었습니다. 그리고 "나머지 앱에 대해 생각하는 것을 도와주세요. 예를 들어 게임 메커니즘 등등요"라고 적었습니다.
또한 이전에 정말 좋은 결과를 얻었던 예시 제품 요구사항 문서를 포함했습니다. 제가 바이브 코딩 애플리케이션에 대한 모범 사례를 설명한 동영상이 여기 링크되어 있으므로 이 프롬프트의 나머지 부분은 자세히 다루지 않겠습니다. 아무튼 저는 챗GPT와 대화하여 많은 것들을 다듬고 게임 메커니즘을 이해했으며, 궁극적으로는 애플리케이션의 주요 기능을 포함하는 파이어베이스 스튜디오를 위한 특정 프롬프트를 얻었습니다. 특히, 파이어베이스 파이어스토어를 사용하여 경험치를 저장하고 파이어베이스 클라우드 함수도 사용하도록 요청했습니다. 왜냐하면, 아시다시피 우리가 파이어베이스를 사용하는 이유가 바로 그것이니까요.
그리고 그것을 여기에 복사하여 붙여넣었습니다. 또한 영감을 주기 위해 주요 기능의 모형인 이 이미지를 첨부했습니다. 이제 AI로 프로토타입화하기를 클릭합니다. 작업이 진행되는 동안, 리포지토리를 가져오는 옵션과 앱 코딩을 시작할 때 선택할 수 있는 다양한 유형의 프레임워크가 있다는 점을 지적하고 싶습니다. 그리고 이것은 파이어베이스 스튜디오를 다른 AI 앱 빌더에 비해 훨씬 더 강력한 제품으로 만드는 많은 기능 중 하나일 뿐입니다.
어쨌든 여기로 돌아와서, 파이어베이스 스튜디오는 '픽셀 프로그레스'라는 계획을 제시합니다. 주요 기능으로는 사용자 및 라이벌 경험치를 숫자로 표시하는 메인 화면 UI, 자정마다 재설정되는 작업과 같은 일일 재설정, 그리고 수동 경험치 획득이 있습니다. AI 도구는 체크되지 않은 각 작업에 대해 라이벌이 수동으로 얼마의 경험치를 얻어야 하는지 계산하는 데 사용됩니다. 색상 구성, 레이아웃, 아이콘, 애니메이션에 대한 스타일 지침도 있습니다. 그리고 여기에서 제미니와 채팅하여 이 계획을 조정할 수 있습니다.
물론 이것이 구글 제품이기 때문에 모든 모델은 제미니 기반 모델이 될 것입니다. 제가 제공한 모형에서 색상 스키마를 가져왔습니다. 그러나 예를 들어 보라색을 포함하고 싶다고 말할 수 있습니다. 잘 보이지는 않지만, 어두운 보라색 4A148C를 악센트나 눈에 띄어야 하는 인터랙티브 요소에 아껴서 사용할 수 있다고 여기 적혀 있습니다.
음, 이 정도면 좋겠네요. 이 앱을 프로토타입화하기를 클릭할 수 있습니다. 그리고 이제 작업을 시작하고 모든 파일을 만들 것입니다. 잘 되기를 바랍니다. 제미니 2.0 플래시를 사용하고 있다는 것을 볼 수 있습니다. 그래서 모든 것이 정말 빨리 진행됩니다. 잠시 후 더 좋은 결과를 얻을 수 있는 제미니 2.5 프로와 같은 다른 모델로 변경하는 방법을 보여드리겠습니다. 그러나 지금은 이것으로 가겠습니다. 나중에요.
좋습니다. 문제가 발생했고 제미니 API 키를 입력하라고 요청합니다. 여기에서 자동 생성을 클릭하면 됩니다. 솔직히 이것도 좀 이상합니다. 왜냐하면 기술적으로 제미니 키가 필요하지 않기 때문입니다. 그 자체로 AI 앱은 아니니까요. 그동안 문제점들을 살펴보겠습니다. 서버 측 예외가 발생했습니다.
좋습니다. 제미니 API 키가 업데이트되었고 오류가 감지되었다고 합니다. 저보고 고쳐달라고 합니다. 그리고 그냥 '오류 수정'을 클릭하면 됩니다. 진짜 바이브 코더처럼, 무슨 오류인지 전혀 모르지만, 아마도 저절로 고쳐질 것입니다. 낮잠을 자러 가겠습니다. 잠시 후, 앱이 준비된 것 같습니다. 그리고 솔직히 그리 오래 걸리지 않았습니다. 약 3분 정도였습니다. 네, 제미니 플래시는 정말 빠릅니다.
좋습니다. 이것이 첫 번째 반복에서 우리가 얻은 것입니다. 진행 상황 추적기, 여기 사용자 경험치, 라이벌 경험치, 오늘 할 일 없음, 목표 추가, 그리고 여기에 타이머가 있습니다. 일일 초기화까지 남은 시간, 라이벌은 1시간 후에 경험치를 얻습니다. 이것을 보면 꽤 예쁩니다. 실제로 작동하는지 봅시다.
"새 작업 '바이브 코드 앱 50분'을 입력하고 경험치를 20점 정도 추가합니다." '목표 추가'를 클릭합니다. 그리고 다른 목표인 '물 여덟 잔 마시기 15XP'를 추가합니다. 그리고 여기를 클릭하면, 네, 경험치가 여기에서 증가하고, 물 여덟 잔을 마시면 여기에서도 증가하는 것 같습니다. 좋습니다.
여기에 있는 타이머를 보면, 일일 초기화까지 남은 시간이 5시간 54분 39초입니다. 그리고 이것은 실제로 맞습니다. 왜냐하면 프롬프트에 매일 초기화되기를 원한다고 적었기 때문입니다. 그리고 현재 홍콩에서 GMT+8 시간으로 오후 6시 5분입니다. 그래서 맞게 된 것 같습니다. "라이벌은 1시간 후에 경험치를 얻습니다"라고 되어 있는데, 저는 1시간을 기다리기보다는 이것이 실제로 일어나는 것을 보고 싶습니다.
그래서 제가 할 일은 라이벌이 경험치를 1분 단위로 얻게 하는 것입니다. 실제로 그렇게 하는지 1시간을 기다리지 않고 보고 싶습니다. 또한 1시간 후에는 아마 그렇게 하지 않을 것이라고 생각합니다. 왜냐하면 이것은 실제로 카운트다운하고 있지 않으니까요. 잠시 후 코드를 살펴보겠지만, 그것이 제 추측입니다. "트리거 라이벌 XP 업데이트를 시간 대신 분 단위로 라이벌 XP를 계산하도록 수정합니다"라고 되어 있습니다. 라이벌은 이제 미완료 작업당 1분마다 1XP를 얻습니다.
이것이 진행되는 동안, 파이어베이스 스튜디오가 가진 멋진 기능을 보여드리고 싶습니다. 그래서 지금은 분명히 웹 기반입니다. 그러나 여기를 클릭하면 '미리보기 공개'를 클릭할 수 있고, 여기에 QR 코드가 있습니다. 휴대폰을 들고 카메라 앱을 사용하여 스캔하면 휴대폰에서 어떻게 보이는지 확인할 수 있습니다.
그래서 그렇게 해보겠습니다. 그리고 여기 있습니다. 현재 로딩 중입니다. 웹 기반 앱 빌더의 큰 장점 중 하나는 이러한 모든 프로세스를 직접 설정할 필요가 없다는 것입니다. 좋습니다. 이것을 보실 수 있을지 모르겠습니다. 모바일에서도 정말 멋지게 보입니다.
이제 이것을 새로고침해 보겠습니다. 그리고 뭔가 제대로 되지 않고 있습니다. "0 0초 후에 XP를 얻습니다." 이것은 제대로 보이지 않습니다. 1분 기다렸다가 실제로 1분 후에 경험치를 얻는지 보겠습니다. 일종의 논리적 문제가 발생하고 있는 것 같습니다.
그래서 저는 잠시 후 코드 보기로 들어가서 이 실제 파일을 살펴보고 정확히 무슨 일이 일어나고 있는지 확인해 볼 것입니다. 그러나 일단 그것은 나중에 하고, 파이어베이스가 프론트엔드 디자인과 관련하여 가지고 있는 멋진 작은 기능들을 보여드리고 싶습니다. 예를 들어, 이 '선택' 버튼이 있습니다. 이것을 클릭하면 수정하고 싶은 특정 항목을 선택할 수 있습니다. 예를 들어 이 버튼처럼요. 제가 "이 버튼을 보라색으로 바꿔주세요"라고 말할 수 있습니다.
새로고침을 하면, 자, 이렇게 됩니다. 꽤 멋지죠? 또 다른 것은 이 주석 스크리블리 버튼이 있다는 것입니다. 이것은 변경하고 싶은 것을 문자 그대로 주석을 달고 그릴 수 있게 해줍니다. 예를 들어 여기에서 아래쪽에 작은 푸터를 추가하고 싶고, 초록색으로 만들고 싶습니다. 그리고 "라이벌에게 지지 마세요"라고 쓰고 싶습니다.
아마도 조금 더 크게 만들거나 하는 식입니다. 그리고 선도 몇 개 그려보겠습니다. 제가 더 못생기게 만들고 있는지도 모르겠지만, 요점을 증명하는 것입니다. 그리고 여기에 '이 구성 요소를 추가하세요'라고 쓰고 '그림 보내기'를 클릭합니다. "라이벌에게 지지 마세요"라고는 했지만, 제 선은 추가되지 않았습니다.
그래서 다시 시도해 보겠습니다. 바이브 코딩의 비밀 기술은 그냥 다시 하고 이번에는 되기를 바라는 것입니다. 진행 상황 추적기 아래에 선을 추가하세요. 야호, 이 선이 추가되었습니다. 멋지네요. 이제 코드 편집기로 전환해 봅시다. 이것도 정말 멋진 기능입니다. VS 코드 UI가 있다는 점이 정말 마음에 듭니다. 코드를 더 깊이 파고들고 싶은 분들을 위한 것입니다. 이것은 또한 파이어베이스 스튜디오가 정말 많은 잠재력을 가지고 있다는 것을 보여줍니다.
이 제품에는 커서와 윈드서프 같은 인터페이스인 코드 보기가 내장되어 있습니다. 이는 완전히 코드 없이 모든 작업을 수행할 수 있고, 동시에 코드 자체를 매우 쉽게 깊이 파고들 수 있다는 의미입니다. 웹 기반이면서 이렇게 유연하게 작업할 수 있는 다른 제품은 없다고 생각합니다.
이제 여기서 무슨 일이 일어나고 있는지 살펴보겠습니다. 여기 미리보기가 있고, 그 옆에는 제미니와 직접 채팅할 수 있는 제미니가 있습니다. 제가 가장 먼저 할 일은 모델을 바꾸는 것입니다. 여기서는 더 가볍고 빠른 모델인 제미니 2.0 플래시를 사용하고 있었습니다. 그것을 제미니 2.5 프로로 바꾸고 API 키를 얻겠습니다. 'API 키 생성'을 클릭하고, 프로젝트를 추가한 다음, 'API 키 생성'을 클릭하고 복사합니다.
이것은 실제로 보여주면 안 됩니다. 이 비디오가 나갈 때쯤에는 비활성화할 것입니다. 다른 사람들에게 API 키를 보여주지 마세요. 이것을 복사하여 여기에 붙여넣을 수 있습니다. 그리고 멋지네요. 이제 제미니 2.5 프로 미리보기가 생겼고, 바라건대 더 좋은 결과를 줄 것입니다. 제가 가장 먼저 할 일은 이 프로젝트의 구조를 설명해달라고 요청하는 것입니다. 왜냐하면 프론트엔드와 백엔드에 무엇이 사용되고 있는지 알고 싶기 때문입니다. 특히 파이어베이스가 실제로 백엔드에 사용되고 있는지 아닌지를요. 프로젝트 구조와 사용된 프레임워크를 설명해 주세요. 특히 프론트엔드에 무엇이 사용되고 백엔드에 무엇이 사용되고 있는지 알려주세요. 해당하는 파일을 참조해 주세요.
아, 죄송합니다. 프로 실험용 모델을 사용해야 합니다. 그래서 그렇게 하고 사용자 정의 모델에 이것을 입력하고 다시 시도하겠습니다. 좋습니다. 무엇이 있는지 봅시다. 프레임워크가 있다고 말합니다. 그래서 넥스트.js 등등 모든 것이 프론트엔드에 구축되어 있다고 알려줍니다. 기본 프레임워크인 타입스크립트, 테일윈드 CSS, 이 모든 것들이 말이 됩니다.
그런데 코딩 방법을 모르는 분들도 당황하지 마세요. 저는 적어도 애플리케이션에 구축되는 주요 프레임워크들을 이해하는 과정을 거치는 것을 정말 추천합니다. 이러한 것들을 직접 코딩할 필요는 없지만, 프레임워크들이 어떻게 결합되는지에 대한 지식을 가지고 있는 것만으로도 앱을 구축하고 조각들을 다시 맞추려고 할 때 정말 큰 도움이 될 것이라고 믿으세요. 여기 제가 바이브 코딩 비디오를 링크해 드릴 텐데, 기술적이지 않더라도 바이브 코딩을 하면서 이러한 것들을 어떻게 배울 수 있는지에 대해 더 자세히 설명합니다.
좋습니다. 백엔드가 파이어베이스 파이어스토어이고 데이터베이스나 백엔드로 사용될 가능성이 있다고 말합니다. 음, 있는 것 같습니다. 그리고 서버 측에 넥스트.js도 있습니다. 그래서 서버 컴포넌트 내의 백엔드 기능 코드와 다른 프로젝트 구조도 제공합니다.
그래서 제가 할 일은 이것을 빠르게 확인하는 것입니다. 너무 기술적으로 들어가지 않고, 백엔드가 실제로 저장되고 있는지 확인하고 저에게 거짓말을 하는 것은 아닌지 확인하고 싶습니다. file store.ts 아래에서 이 모든 것들이 설정되어 있다는 것을 볼 수 있습니다. 그러나 이것들이 지금 실제로 정의되어 있다고는 생각하지 않습니다. 왜냐하면 process.M에 있어야 하기 때문입니다. 그래서 process나 M, 네, M.local local로 가면 이것이 제대로 구성되지 않았다는 것을 볼 수 있습니다.
그래서 제미니에게 파이어베이스 파이어스토어를 구성해달라고 요청할 것입니다. 그리고 제미니는 파이어베이스 파이어스토어를 구성하려면 구성 세부 정보가 필요하다고 말합니다. 파이어베이스 프로젝트 콘솔로 이동하여 그것을 클릭하면 구성 정보를 여기에서 찾을 수 있고, 제가 직접 제공해야 합니다.
물론 제가 이것을 할 수 있습니다. 그러나 파이어베이스 스튜디오가 이것을 할 수 있어야 한다고 생각합니다. 왜냐하면 파이어베이스 위에 구축되어 있기 때문입니다. 그래서 이것을 할 수 있어야 합니다. 저는 괜찮다고 생각하지만, 비기술적인 사람이 이것과 같은 것을 만들려고 한다면 훨씬 더 어려움을 겪을 것이라고 생각합니다.
저는 앞으로 몇 달 안에 구글이 이것을 개선하고 파이어베이스 자체와 더 밀접하게 통합하여 이 전체 제품을 훨씬 더 강력하게 만들기를 바랍니다. 파이어베이스 스튜디오는 AI 앱을 프로토타입화하기 위한 출발점이지만, 보시다시피 한계가 있습니다. 더 나아가 더 많은 확장성과 기능을 가진 앱을 만들고, 구글 모델 외의 다른 모델과 파이어베이스 외의 다른 백엔드 서비스를 사용할 수 있으려면, 결국 윈드서프와 같은 풀 스위트 AI 코드 편집기로 업데이트해야 할 것입니다. 윈드서프는 이 비디오의 이 부분의 스폰서라고 말씀드리게 되어 매우 기쁩니다.
윈드서프는 단순한 일반 코드 편집기가 아닙니다. 사실, 단순한 일반 AI 코드 편집기도 아닙니다. 그것은 다른 서비스 전반에 걸쳐 강력한 컨텍스트 처리를 통해 최대의 플로우 상태를 유지하도록 특별히 구축되었습니다. 코드를 덜 쓰고 더 많이 생각하며, AI가 여러분의 아이디어를 현실로 만드는 데 도움을 줍니다. 윈드서프는 캐스케이드라는 코딩 에이전트 기능을 가지고 있으며, 여러분이 만들고 싶은 모든 앱을 통해 안내합니다. 또한 코드를 작성하고 미리보고 배포하는 것을 매우 쉽게 만드는 다른 모든 AI 기능의 전체 스위트도 있습니다. 윈드서프를 사용하여 코딩을 시작한 후, 저는 코드 없이 코딩하는 것을 상상할 수 없습니다. 윈드서프를 사용하여 코딩을 시작하려면, 이 링크에서 무료로 사용해 볼 수 있습니다. 설명에도 링크되어 있습니다. 이 비디오의 이 부분을 후원해 주신 윈드서프에게 진심으로 감사드립니다.
이제 비디오로 돌아가서, 다음으로 할 일은 라이벌이 특정 시간 동안 경험치를 얻는 것에 대해 앞서 이야기했던 로직으로 돌아가는 것입니다. 제미니에게 라이벌이 얻는 경험치의 양을 정의하는 로직이 어디에 있는지 물어볼 것입니다. 제미니 2.5 프로는 사고 모델이며, 아마 여기에 있을 것이라고 말하는 식의 생각의 흐름을 보여줍니다. 그리고 실제로 모든 것을 확인하여 위치를 식별합니다.
요약하자면, 라이벌은 사용자가 완료하지 않은 각 작업에 대해 1분마다 1XP를 얻습니다. 이 로직은 이 파일에 정의되어 있습니다. 이것을 다크 모드로 바꿔보겠습니다. 왜냐하면 라이트 모드에 익숙하지 않기 때문입니다. 아, 이제 훨씬 나아졌네요. 스크린샷을 찍고 여기에 적겠습니다. 라이벌이 매분 경험치를 얻는 것이 보이지 않습니다. 코드에 따르면, 라이벌은 미완료 작업을 기반으로 매분 경험치를 얻는 것이 의도된 것입니다. 미완료 작업을 추가하고 무슨 일이 일어나는지 보겠습니다. 여기에 제시된 것처럼, 트리거 라이벌 업데이트 함수에는 여러 개의 console.log 문이 있어서 표시되어야 합니다.
그리고 실제로 여기에서 업데이트되었습니다. 말하자면, 터미널을 열 수도 있습니다. 여기 웹 콘솔을 보면, 시간이 지남에 따라 실제로 경험치를 추가하고 있는 것 같습니다. 그리고 라이벌 XP 바에도 경험치가 추가되는 것을 볼 수 있습니다. 매우 멋집니다. 좋습니다. 그래서 실제로 일어나고 있는 것 같고, 이것은 UI 문제입니다. 그래서 스크린샷을 찍겠습니다. 라이벌 XP는 업데이트되고 있지만, 타이머가 올바르게 표시되지 않고 있습니다. 매번 1분부터 카운트다운해야 합니다. 파일을 업데이트합니다. 그리고 변경했다고 말합니다. 그래서 어떻게 됐는지 보겠습니다. 좋습니다. 60초는 맞았지만, 카운트다운하고 있지 않습니다. 좋습니다. 이것을 좀 더 만져보겠습니다. 602가 있지만, 카운트다운하고 있지 않습니다. 파일을 업데이트합니다. 여기에서 실시간으로 업데이트되는 것을 볼 수 있습니다.
그런데 파이어베이스 스튜디오 내에서 할 수 있는 다른 것들도 있습니다. 윈드서프와 커서와 정말 비슷합니다. 제미니를 사용하여 선택된 코드를 설명하고, 주석을 추가할 수 있습니다. 그리고 여기 있는 모든 것이 그렇듯, 전체 VS 코드 경험이 여기에 있습니다. 솔직히 웹 기반 무료 도구치고는 꽤 인상적입니다. "라이벌이 XP를 얻고 있는지 확인 중입니다." "타이머를 꽉 채운 50, 60초 동안 지켜보세요. 60초에서 변경되나요, 아니면 확인 중인가요? 막 업데이트되었습니다."라고 묻습니다. 확인 중이라고 합니다. 아마 제가 작업을 추가하지 않았기 때문일 수도 있습니다.
제가 실제로 그렇게 해보겠습니다. 아마 이것이 작동할 것입니다. 좋습니다. 작업을 추가하고 1분 동안 기다려보고 기대해 봅시다. 아, 인내는 미덕입니다. 더 나은 디버깅을 위해 1분 대신 1초로 설정했어야 했죠. 이런. 좋습니다. 1XP로 업데이트되었습니다. 이제 60초로 변경되어야 합니다. 콘솔, 웹 콘솔을 확인해 봅시다. 주기적 확인 간격이 지워지는 등등. 일일 초기화는 아직 필요하지 않다고 말합니다. 라이벌이 마지막 라이벌 업데이트 이후 분당 1XP를 얻을 가능성이 있습니다. 좋습니다. 이 부분은 작동하지 않을 것 같습니다. 이 비디오에서는 더 이상 이것을 하지 않을 것이지만, 이 시점에서 저는 아마 여기로 들어가서 코드를 직접 확인하고, 디버깅하고 이 문제를 해결하기 위해 단계별로 설명해달라고 요청할 것입니다.
제가 이 동영상에서 이 과정을 자세히 다룹니다. 바이브 코딩에 관심이 있고 이것을 하는 가장 좋은 방법을 배우고 싶다면요. 어쨌든 여기까지 왔고, 파이어베이스의 많은 기능을 이미 보여드렸습니다. 이 시점에서 몇 가지 더 지적하고 싶은 것이 있습니다. 첫째는 왼쪽 하단 모서리를 클릭하고 원한다면 깃허브에 연결할 수 있다는 것입니다. 제미니에게 모든 것을 깃허브에 푸시하는 과정을 함께 진행해달라고 요청할 수 있습니다. 그리고 그렇게 하면, 짜잔, 깃허브에 있습니다. 그리고 원한다면 여기에서 다운로드할 수도 있습니다. 그리고 예를 들어, 이 코드를 가져와서 윈드서버나 커서를 사용할 수도 있습니다.
그리고 마지막으로 보여드리고 싶은 것은 '게시' 버튼입니다. 준비가 되면 이 과정을 통해 앱을 게시하고, 파이어베이스 프로젝트에 연결하고, 클라우드 결제 계정을 연결하고, 환경을 설정할 수 있습니다. 호스팅 비용은 지불해야 합니다. 참고로 다른 모든 것은 잠시 후 무료입니다. 그리고 짜잔, 배포되어 인터넷에 라이브로 서비스됩니다. 이렇게 해서 파이어베이스의 주요 기능을 보여주는 데 도움이 되는 비디오였기를 바랍니다. 실제로 더 많은 기능이 있으니 더 깊이 파고들 수 있습니다.
그러나 제가 보여드리고 싶은 것은 현재로서는 파이어베이스 스튜디오가 꽤 괜찮다고 생각한다는 것입니다. 특히 무료이고, 파이어베이스 스튜디오가 가진 잠재력이 너무나 크기 때문입니다. 구글이 시간이 지남에 따라 이것을 개선하고 이러한 모든 기능이 함께 모여 정말 유용한 제품이 될 것이라고 생각합니다. 제가 파이어베이스 스튜디오가 제 작업 흐름에 어떻게 맞을지 보는 방식은, 아마도 작업 흐름에 개발될 것이라는 점입니다. 파이어베이스 스튜디오가 러버블이나 볼트 같은 것을 대체할 것이라고는 생각하지 않습니다. 왜냐하면 그것들은 코딩 경험이 전혀 없는 사람들을 대상으로 하기 때문입니다. 그리고 그것이 선호되는 부분입니다.
반면에 파이어베이스 스튜디오는 레플릿의 경쟁자라고 할 수 있습니다. 코딩 구성 요소가 있기 때문입니다. 그리고 파이어베이스 위에 구축되어 있기 때문에 레플릿보다 훨씬 더 좋을 수 있다고 생각합니다. 전반적으로, 현재로서는 7점 만점에 5점 정도의 괜찮은 제품이라고 생각합니다. 미래에는 7점 만점에 7점짜리 제품이 될 가능성이 충분하다고 봅니다. 이제 약속드린 대로, 파이어베이스에 대해 이야기한 모든 것과 기능을 기억하는 데 도움이 되는 작은 평가를 드리겠습니다. 답변을 댓글로 달아주세요. 또한 파이어베이스 스튜디오에 대해 어떻게 생각하는지, 이제 사용해보고 싶은지 알려주세요. 이 비디오를 시청해 주셔서 정말 감사합니다. 다음 비디오나 라이브 스트림에서 뵙겠습니다.
감사합니다.
## Firebase Studio 깊이 탐구: AI 앱 빌더, 과연 개발의 미래일까요?
안녕하세요! 오늘은 최근 큰 기대를 모으고 있는 Google의 웹 기반 AI 앱 빌더, Firebase Studio에 대해 깊이 있게 살펴보려 합니다. 많은 분들이 이 도구에 대해 궁금해하시리라 생각합니다. 저도 직접 사용해보며 몇 주간의 경험을 통해 얻은 솔직한 평가와 유용한 정보들을 여러분과 공유하고자 합니다.
### Firebase Studio란 무엇이며, 왜 이렇게 화제가 되었을까요?
영상 제작자가 설명하듯이, Firebase Studio는 Google이 개발한 **웹 기반 AI 앱 빌더**입니다. 이는 Lovable, Replit, Bolt와 같은 다른 웹 기반 AI 앱 빌더들의 강력한 경쟁 상대로 등장했죠. 이 도구는 스스로를 "**풀 스택 AI 워크스페이스(full stack AI workspace)**"라고 소개하며, AI 에이전트를 통해 전체 개발 수명 주기를 가속화하여 백엔드, 프론트엔드, 모바일 앱을 한곳에서 모두 구축할 수 있다고 강조합니다. 즉, Firebase 위에 구축된 사용자 친화적인 AI 기반 앱 빌더인 셈입니다.
그렇다면 왜 이렇게 큰 관심과 기대를 모았을까요? 소스 자료에서는 세 가지 주요 이유를 꼽습니다.
* **Google 제품이라는 점:** 영상 제작자가 언급하듯이, Firebase Studio는 **최초의 거대 기술 기업이 투자한 AI 앱 빌더**입니다. 이로 인해 많은 사람들이 높은 기대를 가졌던 것이죠.
* **무료 사용 가능성:** 다른 Google 제품들처럼, 이 도구 역시 **무료로 사용 가능**하다고 홍보됩니다. 경쟁사들이 월 최소 20~30달러의 비용을 청구하는 것과 비교하면 매우 큰 장점입니다.
* **Firebase 기반 구축:** 현재 웹 기반 AI 앱 빌더들의 가장 큰 문제점 중 하나는 멋진 프론트엔드는 만들 수 있지만, 데이터베이스, 인증, 사용자 관리와 같은 **백엔드 기능에서는 한계를 보인다는 점**입니다. 하지만 영상에서 지적하듯이, Firebase Studio는 Google의 백엔드 플랫폼인 Firebase 위에 구축되어 있기 때문에 이론적으로는 이러한 백엔드 작업도 처리할 수 있어, 진정한 풀 스택 앱 빌더가 될 수 있다는 기대를 모았습니다.
### 첫인상: 솔직한 평가와 잠재력
Firebase Studio가 처음 출시되었을 때 반응은 엇갈렸습니다. 어떤 사람들은 다른 모든 AI 코드 빌더 앱을 압도할 것이라고 극찬했고, 또 어떤 사람들은 시간을 낭비하지 말라고 비판하기도 했습니다.
직접 사용해 본 영상 제작자의 경험에 따르면, Firebase Studio가 다른 AI 앱 빌더들을 완전히 대체할 정도는 아니지만, 그렇다고 해서 "완전히 쓸모없는" 도구도 아닙니다. 평점으로는 **7점 만점에 5점 정도의 "괜찮은(decent)" 수준**이라고 합니다. Bolt, Replit, Lovable에 비해 **학습 곡선이 약간 더 높다**는 점은 인정하지만, 일단 익숙해지면 충분히 쓸만하다는 평가입니다. 무엇보다도 **무료라는 점이 큰 장점**이며, 아직 초기 릴리스 단계이기 때문에 앞으로 몇 달 안에 훨씬 더 나아질 것으로 기대된다고 합니다.
### 실제 앱 개발 경험: 'Pixel Progress' 앱 만들기
이 영상에서는 Firebase Studio를 활용하여 "올드 스쿨 포켓몬에서 영감을 받은 생산성 앱"을 실제로 개발하는 과정을 보여줍니다. 이 앱은 사용자가 일일 목표를 설정하고 달성하여 XP(경험치)를 얻고, 게으름을 피우면 AI 라이벌이 XP를 얻는 게임 방식입니다.
**아이디어 구체화와 프롬프트 엔지니어링:**
영상을 보면, 앱 아이디어를 구체화하기 위해 **ChatGPT의 도움**을 받았습니다. "사용자가 일일 목표를 설정하고 달성하면 XP를 얻는 픽셀 아트 앱"이라는 기본 아이디어를 ChatGPT에 입력하고, 앱의 게임 메커니즘과 세부 사항을 다듬는 데 활용했습니다. 특히, Firebase Studio용 프롬프트에는 **Firebase Firestore를 사용하여 XP를 저장하고 Firebase Cloud Functions를 사용하는 등 Firebase 백엔드 기능**을 명시적으로 요청했습니다. 또한, 앱의 주요 기능에 대한 목업 이미지를 첨부하여 AI가 이를 참고하도록 했습니다.
**AI 기반 프로토타이핑:**
프롬프트를 입력하고 "AI로 프로토타입 만들기"를 클릭하자, Firebase Studio는 "Pixel Progress"라는 이름의 계획을 제시했습니다. 이 계획에는 사용자 및 라이벌 XP를 표시하는 메인 화면 UI, 자정에 재설정되는 일일 작업, 수동 XP 획득, 그리고 색상, 레이아웃, 아이콘, 애니메이션을 포함한 스타일 가이드라인이 포함되어 있었습니다. Google 제품답게, 모든 모델은 **Gemini 기반 모델**을 사용하며, **Gemini와 채팅하여 계획을 미세 조정**할 수 있습니다. 예를 들어, 특정 색상을 추가해달라고 요청할 수도 있었습니다.
처음에는 **Gemini 2.0 Flash 모델**을 사용하여 매우 빠르게(약 3분 만에) 첫 번째 앱 버전을 만들 수 있었습니다. 하지만 더 나은 결과를 위해 나중에는 **Gemini 2.5 Pro 모델**로 전환하기도 했습니다.
**초기 문제와 해결:**
개발 과정에서 몇 가지 문제가 발생하기도 했습니다. Gemini API 키를 입력해야 하는 점(자동 생성 가능하지만, AI 앱이 아닌데 필요하다는 점이 특이하다고 언급됨)과 서버 측 예외 오류가 발생하기도 했습니다. 하지만 Firebase Studio에는 "**오류 수정(fix error)**" 버튼이 있어 이를 클릭하면 AI가 스스로 문제를 해결하려고 시도합니다. 영상 제작자는 "진정한 바이브 코더처럼, 오류가 무엇인지 모르지만 스스로 고쳐지기를 바란다"며 유머러스하게 언급하기도 했습니다.
### Firebase Studio의 핵심 기능들
첫 번째 앱 버전이 완성된 후, 영상 제작자는 Firebase Studio의 인상적인 기능들을 시연했습니다.
* **공개 미리보기 및 모바일 보기:**
웹 기반 앱 빌더의 큰 장점 중 하나는 별도의 설정 없이도 앱 미리보기를 **공개적으로 공유**할 수 있다는 점입니다. Firebase Studio는 QR 코드를 제공하여 휴대전화로 스캔하면 모바일 환경에서 앱이 어떻게 보이는지 즉시 확인할 수 있었습니다. 모바일에서도 앱이 꽤 멋지게 보인다고 평가되었습니다.
* **직관적인 프론트엔드 디자인 도구:**
* **선택 버튼:** 특정 UI 요소를 선택하여 쉽게 수정할 수 있습니다. 예를 들어, 버튼을 선택한 후 색상을 보라색으로 변경해달라고 요청하면 즉시 반영되는 것을 볼 수 있었습니다.
* **주석/그리기 도구:** 이 기능은 특히 흥미로웠습니다. 사용자가 직접 화면에 글씨를 쓰거나 그림을 그려서 변경 사항을 요청할 수 있습니다. 예를 들어, 하단에 초록색 푸터를 추가하고 특정 문구를 넣어달라고 요청하거나, 진행률 표시줄 아래에 선을 그려달라고 요청하는 식입니다. AI가 사용자의 그림과 텍스트 요청을 이해하고 UI를 수정하려고 시도합니다.
* **코드 편집기 (VS Code UI):**
Firebase Studio는 **VS Code와 유사한 사용자 인터페이스**를 가진 코드 뷰를 제공합니다. 이는 개발자가 코드에 직접 접근하여 더 깊이 있는 수정을 할 수 있게 해주는 매우 강력한 기능입니다. 영상 제작자는 "노코드(no-code)에서 완전히 코드를 파고드는(dig into the code) 것까지 매우 쉽게 전환할 수 있는 유연성"에 대해 극찬했습니다. 웹 기반 제품 중 이 정도의 유연성을 제공하는 다른 제품은 없다고 언급되었습니다. 이 코드 편집기 내에서는 터미널을 열어 콘솔 로그를 확인하는 등, 실제 개발 환경과 유사한 작업을 수행할 수 있습니다.
* **Gemini와의 직접 채팅 및 모델 전환:**
코드 편집기 옆에는 Gemini와의 채팅 창이 있어 개발 관련 질문을 직접 할 수 있습니다. 영상 제작자는 여기서 **Gemini 2.0 Flash에서 Gemini 2.5 Pro (실험용) 모델로 전환**하는 방법을 보여주었는데, 더 나은 결과를 얻기 위해 모델을 바꾸는 것이 중요함을 시사합니다.
* **프로젝트 구조 설명 요청:** Gemini에게 앱의 프로젝트 구조와 사용된 프레임워크(프론트엔드: **Next.js, TypeScript, Tailwind CSS**, 백엔드: **Firebase Firestore, Next.js 서버 측** 등)를 설명해달라고 요청할 수 있었습니다. 이는 코딩 경험이 없는 사용자라도 앱이 어떻게 구성되어 있는지 이해하는 데 큰 도움이 됩니다.
* **Firebase Firestore 구성 문제:** 여기서 한 가지 한계점이 드러났는데, Firebase Firestore를 구성하기 위해 **API 키와 설정 세부 정보를 수동으로 입력**해야 했습니다. 영상 제작자는 Firebase Studio가 Firebase 위에 구축되었으므로 이 정도는 자동으로 처리해주어야 한다고 지적했으며, 비기술적인 사용자에게는 이것이 큰 어려움이 될 수 있다고 언급했습니다. Google이 향후 몇 달 안에 이 통합을 개선하기를 바란다고 강조했습니다.
* **논리 버그 디버깅:** AI 라이벌의 XP 획득 로직을 디버깅하는 과정에서도 Gemini의 도움을 받았습니다. Gemini 2.5 Pro는 "사고 모델(thinking model)"로서, 어떤 파일에 해당 로직이 정의되어 있는지 찾기 위해 **자신의 생각 과정을 단계별로 설명**해주었습니다. 비록 초기에는 UI 타이머가 제대로 작동하지 않는 문제가 있었지만, 콘솔 로그를 통해 실제로 XP가 업데이트되고 있음을 확인할 수 있었습니다. 이는 UI 문제일 뿐, 백엔드 로직 자체는 작동하고 있음을 의미합니다.
* **GitHub 연동 및 코드 다운로드:**
개발이 끝나면 앱을 **GitHub에 연결하여 코드를 푸시**할 수 있습니다. 또한, 생성된 코드를 **다운로드하여 Windsurf나 Cursor와 같은 다른 코드 에디터에서 계속 작업**할 수도 있습니다.
* **앱 게시 (Publishing):**
앱이 준비되면 Firebase 프로젝트 연결, 클라우드 결제 계정 연결, 환경 설정과 같은 간단한 과정을 통해 앱을 **배포하고 인터넷에 라이브로 게시**할 수 있습니다. 영상 제작자는 호스팅 부분만 비용이 발생하며, 다른 모든 기능은 무료라고 강조했습니다.
### Firebase Studio의 한계점과 미래 잠재력
Firebase Studio는 AI 앱을 프로토타이핑하는 훌륭한 출발점이지만, 여전히 몇 가지 한계점을 가지고 있습니다.
* **Google 모델에 대한 의존성:** 현재는 주로 Google의 Gemini 모델에 국한되어 있습니다. 다른 AI 모델이나 백엔드 서비스를 사용하고 싶다면 Windsurf와 같은 전문 AI 코드 에디터로 전환해야 할 수도 있습니다.
* **확장성 및 기능성:** 더 높은 확장성과 다양한 기능을 갖춘 앱을 개발하거나, Google 외의 다른 백엔드 서비스를 사용하려면 결국 전문적인 AI 코드 에디터를 사용하는 것이 권장됩니다.
그럼에도 불구하고 영상 제작자는 Firebase Studio가 **뛰어난 잠재력**을 가지고 있다고 강조합니다.
* **다른 도구와의 비교:**
* Lovable이나 Bolt와 같이 코딩 경험이 전혀 없는 사람들을 위한 도구를 **대체하지는 않을 것**으로 보입니다. Firebase Studio는 코딩 요소가 있기 때문입니다.
* 오히려 **Replit의 경쟁자**에 가깝다고 평가되며, Firebase 위에 구축되었기 때문에 Replit보다 훨씬 더 나은 도구가 될 수 있다고 예상됩니다.
* **전반적인 평가:** 현재로서는 "7점 만점에 5점"으로 "괜찮은" 제품이지만, Google이 계속 개선한다면 **미래에는 "7점 만점에 7점" 제품이 될 가능성**이 충분하다고 강력하게 시사합니다.
* **개인적인 워크플로우에서의 역할:** 영상 제작자의 관점에서, Firebase Studio는 전체 개발 워크플로우에서 **프로토타이핑 단계**에 유용하게 사용될 것으로 보입니다. 복잡한 개발을 위해서는 결국 풀 에디터로 전환하는 형태가 될 것이라는 의미입니다.
### 마무리하며
Firebase Studio는 분명히 흥미로운 도구이며, 특히 **무료**라는 점과 **초기 릴리스임에도 불구하고 이미 꽤 괜찮은 기능**들을 제공한다는 점에서 주목할 만합니다. AI와 개발의 경계가 점점 허물어지는 이 시대에, Firebase Studio는 우리가 앱을 개발하는 방식을 변화시킬 수 있는 잠재력을 가진 도구임에 틀림없습니다. 여러분도 한번 직접 사용해보시길 강력히 추천합니다!