소개
Firebase Studio의 프로토타이핑 기능을 사용해서 해커뉴스 기반의 AI 뉴스 요약 웹사이트를 만들어보았습니다. 원래는 유명 AI 뉴스 사이트 몇 개를 하루 한 번씩 주기적으로 크롤링해서 DB에 저장하고, 이를 웹앱에서 불러오는 구조로 만들 계획이었습니다.
Firebase Studio에서 제공하는 개발 시작 방법이 두가지가 있는데요. 프로토타이핑 에이전트로 시작하는 방법과 템플릿에서 시작하는 방법 두가지가 있습니다. 그런데 문제는 프로토타이핑 에이전트 방식은 생각했던 것과 달리 현재는 프론트엔드(Web)만 개발 가능한 상태라, 서버 쪽 로직을 구현하는 데 한계가 있었습니다. 백엔드 서버나 DB 처리하는 앱을 만들려면 템플릿 방식으로 시작해야 합니다.
관련 내용은 아래 Firebase Studio 레퍼런스 문서에 나와 있습니다. 추후 다른 플랫폼과 프레임워크도 지원한다고 하네요.
https://firebase.google.com/docs/studio/get-started-ai
데이터 수집 관련해서는 지난 토요일 오프모임에서 유민수 스터디장님과 논의한 결과 해커뉴스 API를 사용하면 될 것 같다고 추천해주시고, 살펴보니 크롤링하는 것보다는 이게 훨씬 더 쉬운 방법이라고 생각해서 데이터 수집은 해커뉴스 API를 사용하기로 결정했습니다. 이에 따라, 계획을 바꾸어 우선 프론트엔드에서 직접 해커뉴스 API를 호출하고, AI로 요약한 결과를 보여주는 형태로 빠르게 개발을 진행했습니다. 이 방식으로도 충분히 작동하는 MVP를 만들 수 있었고, Firebase App Hosting을 통해 배포까지 완료했습니다 🚀
진행 방법
사용한 도구 및 기술 스택
IDE: Firebase Studio, Cursor
AI 요약: Genkit, Gemini
프론트엔드: TypeScript, Next.js, Tailwind CSS
호스팅: Firebase App Hosting
개발 방식
Firebase Studio의 프로토타이핑 에이전트 모드를 활용해 웹앱 개발 시작
아래는 사용한 프롬프트 입니다.
https://hn.algolia.com/api/v1/search_by_date?query=ai&tags=story api를 호출해서 응답 결과를 보여주는 웹사이트를 만들고 싶어. 아래는 api 호출 응답 결과야.
{
"exhaustive": {
"nbHits": false,
"typo": true
},
"exhaustiveNbHits": false,
"exhaustiveTypo": true,
"hits": [
{
"_highlightResult": {
"author": {
"matchLevel": "none",
"matchedWords": [],
"value": "rbanffy"
},
"title": {
"fullyHighlighted": false,
"matchLevel": "full",
"matchedWords": [
"ai"
],
"value": "\u003Cem\u003EAI\u003C/em\u003E Is Deciphering Animal Speech. Should We Try to Talk Back?"
},
"url": {
"fullyHighlighted": false,
"matchLevel": "full",
"matchedWords": [
"ai"
],
"value": "https://gizmodo.com/\u003Cem\u003Eai\u003C/em\u003E-is-deciphering-animal-speech-should-we-try-to-talk-back-2000598783"
}
},
"_tags": [
"story",
"author_rbanffy",
"story_44020412"
],
"author": "rbanffy",
"created_at": "2025-05-18T10:51:59Z",
"created_at_i": 1747565519,
"num_comments": 0,
"objectID": "44020412",
"points": 1,
"story_id": 44020412,
"title": "AI Is Deciphering Animal Speech. Should We Try to Talk Back?",
"updated_at": "2025-05-18T11:05:26Z",
"url": "https://gizmodo.com/ai-is-deciphering-animal-speech-should-we-try-to-talk-back-2000598783"
},
...Firebase Studio에서 프롬프트 기반으로 작성해준 앱 블루프린트
Prototype this App 버튼 클릭하면 아래와 같이 개발해주고, 중간에 Gemini API 키 설정해주면 앱 완성
사이트가 영어로 되어 있어서 한국어로 수정 요청하면, 알아서 한국어로 나오도록 코드 수정
실행 중 에러가 나면 바로 수정 가능해서 스스로 버그 수정
AI 요약 결과가 영어라 이 부분도 한국어로 수정 요청
Firebase Studio 의 오른쪽 상단의 Publish 버큰 클릭하면 Firebase App Hosting 기능을 통해 바로 배포(아래의 캡쳐 화면은 초기 배포 화면을 캡쳐하지 못해서 이미 배포한 이후의 화면입니다.)
배포하는데 약 10분 정도 소요
최종 배포된 웹 사이트
결과와 배운 점
Firebase Studio는 빠른 프로토타이핑에는 매우 적합하지만, 현재는 서버로직 구성에 제약이 있음
공식 문서를 꼼꼼히 보면서 템플릿 방식으로 시작해야만 백엔드 로직을 포함할 수 있다는 점을 확인함
이 경험을 통해 제품 구상 → 빠른 MVP 제작 → 기능 확장 가능성까지 빠르게 실험해볼 수 있었음
다음 단계에서는 템플릿 방식으로 앱을 다시 구성하고, DB 저장 및 주기적 API 호출 방식으로 개선 예정
핵심 인사이트
Firebase Studio는 빠르게 웹앱을 개발하고 호스팅까지 한 번에 해결할 수 있는 매우 좋은 도구입니다. 단순한 프로토타입을 만들 때 특히 강력합니다.
하지만 Code View에서 제공하는 AI 기반 '바이브 코딩' 기능은 아직 Cursor 같은 전용 IDE에 비해 부족하다고 느꼈습니다.
그래서 실제로 기능을 확장하거나, 정교한 코드 작업을 하려면 GitHub 레포를 연동한 후 Cursor와 같은 IDE에서 개발을 이어가는 것을 추천드립니다.
도움 받은 글 (옵션)
🔥 빠르게 AI 기능을 실험해보고 싶은 분들께 Firebase Studio의 프로토타이핑 기능은 정말 추천드립니다. 단, 복잡한 서버 로직이 필요하다면 템플릿 방식으로 시작하는 것을 잊지 마세요!