firebase studio에게 대충 일시켜보기.. (아직은 한계가 있는듯.. 도전ing기)

소개

firebase studio도 어느 정도 수준인지 확인해보고 싶어서 가벼운 아이디어는 이걸로 해봐야지 하다가..

이 컨셉에 대한걸 만들 수 있을까? 생각들어서 PRD같은거 없이도 잘 만드나 궁금해서 시도하는 부분까지 공유합니다!

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

firebase studio : 지금은 최대한 이것만 사용해보려고 합니다.
* db도 firebase, 배포도 firebase..
** 진짜 firebase studio가 cursor급이 되면.. 원스탑 될텐데..
chatGPT : 서비스 화면 이미지 생성

뭐 대략 아래 이미지와 같은 서비스를 만들어보려고 하는거죠..

한국 채팅 메신저 - 스크린 샷

하고 싶은 말이겠지만 관계를 위해서는 말하기 전에 생각해야 합니다..

제대로 만들려면 PRD도 만들어야겠지만 firebase studio가 알잘딱깔센으로 하나 궁금해서 그냥 평문으로 던집니다.

채팅앱을 만들어볼꺼야. 1:1 대화만 가능한 채팅앱이야. 이 앱의 목적은 남자와 여자가 표현의 방식이 달라서 싸우게 되는 경우가 많은데 채팅을 할때 AI가 개입해서 지금 하려는 말을 상대방에 맞게 제안을 해주는 기능을 제공하는게 주요 목적이야. db는 firebase를 사용할꺼야. 채팅앱이라서 firestore를 사용해야될지 realtime database를 써야될지는 모르겠어. 제안해줘. firebase project는 생성해놨고, 우선은 웹앱 버전으로만 만들어볼꺼야. 이걸 위한 npm은 아래와 같아.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "---apiKey---",
  authDomain: "---projectId---.firebaseapp.com",
  projectId: "---projectId---",
  storageBucket: "---projectId---.firebasestorage.app",
  messagingSenderId: "---messagingSenderId---",
  appId: "---appId---",
  measurementId: "---measurementId---"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

오.. 뭔가 합니다.

gemini API를 넣어야 한다고 넣으라고 합니다.
화면구성도 뭔가 나왔어요!
(잘 구현되면 정상 최고!!!라고 생각했지만..)

등록 양식을 보여주는 웹 페이지의 스크린 샷

gemini API도 입력하고 화면도 확인해봅니다.
회원가입은 잘 만들어서 돌아갑니다. 오오..

하하.. 드디어 뭐가 안되기 시작합니다 ㅠㅠㅋㅋㅋ
그래도 에러가 있으면 셀프로 에러 고친다는 메세지가?
그래.. 저렇게 되서라도 잘되면 좋겠다..

근데 Fix Error를 눌러봐야 뱅뱅 돌기만 하네요..
대화모드에서만 잘되면.. lovable이나 v0같은거 안쓰겠죠..

어휴 여기선 안되겠다 싶어서 dev mode도 구경좀 해보자..

cursor와 같은 IDE와 비슷한 형태로 생겼네요!
그럼 여기서 Gemini랑 대화하면서 코드도 바꿔주고, 터미널 명령어도 돌려주고!
까지는 아직 좀 라이트하게만 동작하는 것 같아요.
* 터미널은 default로 보이진 않고 메뉴에서 열어줘야 합니다.

Gemini에서 코드 삽입하는건 되고, 터미널 명령도 되는거 같은데..
local.. cloud여도 local인가요.. 뭐 암튼..
port번호는 왜 잘 안바뀌는지..

아직은 회원가입, 로그인까지 동작하고 남/녀 나눠서 채팅 리스트까지는 나오는데,
채팅 화면 진입이 안됩니다 ㅎㅎㅎ

그래도 dev mode에서 코드를 보니까 docs 폴더를 만들어서 blueprint.md파일을 만들었더라고요!

# **App Name**: Empath Chat

## Core Features:

- Direct Messaging: Real-time 1:1 chat interface for direct communication.
- AI-Powered Message Suggestions: AI-powered suggestion tool that analyzes user input and proposes alternative phrasings for better understanding.
- Suggestion Toggle: Simple UI to switch between the original message and AI-generated suggestions.
- User Authentication: User authentication and profile management.
- Firebase Integration: Firebase integration for the AI message processing and user authentication.

## Style Guidelines:

- Primary color: Calm blue (#64B5F6) to foster trust and open communication.
- Background color: Light blue-gray (#F0F4F7) for a gentle, unobtrusive backdrop.
- Accent color: Warm orange (#FFAB40) to highlight AI suggestions and important actions.
- Headline font: 'Space Grotesk' sans-serif for a modern, clean look.
- Body font: 'Inter' sans-serif for readability and clarity in chat messages.
- Simple, clear icons to represent different actions and suggestions.
- Clean and intuitive layout, emphasizing message clarity and ease of use.
- Subtle animations to indicate new messages and AI suggestions.

제 개떡같은 명령을 잘 정리해놓긴 했지만..
이 파일을 PRD로 잘 정리해놓으면 일잘하려나..

조금 더 테스트해보려고요!

결과와 배운 점

google님의 생태계 장악을 위한 초석인가..

툴 사용법을 좀더 익혀봐야겠다.

더 좋아지면 front랑 back.. 한번에 될지도?

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려주세요.

MCP를 동료로 만들려다가 Agent 둘을 영입함 (flowith와 genspark의 시장조사)

다른 아이디어 개발하려다가 저 글 읽고 급 만들어보게 되었습니다!

2
1개의 답글

👉 이 게시글도 읽어보세요