# 0119 교원대학교 바이브코딩

강의자료

vibecoding_aistudio_antigravity.pdf

### 준비물

- [ ] **개인 **구글계정 준비

- [ ] [antigravity](http://antigravity.google/) 설치

- [ ] [node.js](https://nodejs.org/ko/download) 설치

- [ ] [aistudio](https://aistudio.google.com/) 접속하기

- [ ] [firebase](https://firebase.google.com/) 가입하기(구글 계정)

### 프롬프트(드래그 해서 붙여넣기)

> 청주시 여러지역을 소개하는 챗봇을 만들어줘. 그라운딩 기능을 사용해서 출처를 밝히고 링크도 함께 제공해줘

- 그라운딩 기능: 모델 출력을 확인 가능한 정보 소스에 연결하는 기능 

### 디자인을 보면서 수정하고 싶어요

- `annotate app` 기능을 사용해봅시다( 입력창 하단)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/052315_ndoa8imd3LtxaV8ibn?q=80&s=1280x180&t=outside&f=webp)

- `add comment` 누르고 수정하고 싶은 부분 선택 후에 내용 입력하기

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/052400_C3wiLCPFMNCU7s9G8t?q=80&s=1280x180&t=outside&f=webp)

> ui를 아기자기하게 변경

- `Add to chat`  누르기, 그러면 입력창에 스크린샷 형태로 관련정보가 들어갑니다

![Image](https://upload.cafenono.com/image/slashpageHome/20260116/182717_a44by8mSv5NRwtsx7b?q=80&s=1280x180&t=outside&f=webp)

- 결과물

![Image](https://upload.cafenono.com/image/slashpageHome/20260116/182748_vLxe155Pqt6hHf1iSa?q=80&s=1280x180&t=outside&f=webp)

---

## fewshot(예제) 이미지를 주는 방법으로 디자인하기

> 이 디자인을 보고 비슷한 스타일로 ui를 변경해줘

![Image](https://upload.cafenono.com/image/slashpageHome/20260116/182634_6LNx8JcQ7UNvUzBZ6q?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260116/182830_s5zpK18CogfvC3DQE3?q=80&s=1280x180&t=outside&f=webp)

### 디버깅 : 구현하다가 안되는 부분들이 나올수 있습니다

어 뭔가 이상하다 돌아가고 싶을때

- `Restore`를 누르세요: 직전으로 돌아갑니다

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/052113_nxt4tDgSZXcjVmCRua?q=80&s=1280x180&t=outside&f=webp)

- `Open version history`를 이용해서 과거의 버전으로 돌아갈 수 있습니다.

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/054015_12BfTKwZYjsE6ZGzCC?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/054000_7iB5gHdtDCF5ZtqUHf?q=80&s=1280x180&t=outside&f=webp)

지금까지 체크포인트 (코드)

cheongju-guide-bot.zip

google cloud로 배포하기 (결제 카드 등록 필요)

### 배포

- google cloud 프로젝트 - 결제 수단 등록 - google cloud 프로젝트 연결 - 배포

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/071046_dT0aB6RYwomnPpNR2i?q=80&s=1280x180&t=outside&f=webp)

- 결제 계정 관리 → 계정만들기 → 결제 계정 연결하기

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/071732_BH5CC3girqiOGkYiXC?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/071743_uSCTpes1BP1s5oc37I?q=80&s=1280x180&t=outside&f=webp)

결제 수단을 등록한 프로젝트에서 배포를 하면 다음과 같이 배포됨

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/071902_g2OUu2oFr3ZNX04Uvo?q=80&s=1280x180&t=outside&f=webp)

# 로컬에서 수정 후 배포하기

- 지금까지 작업은 aistudio가 작업을 하고 google cloud를 이용해서 배포하는 과정

- 작성한 코드를 다운 받아서 실제 코드를 수정하는 환경에서 수정 후 배포하는 경험이 있어야 다른 도구 제작이 가능

- Antigravity 를 사용함

### 단계

- [node.js](https://nodejs.org/ko/download)를 설치하고 컴퓨터를 종료 후 다시 키기

    - 설치시에 Automatically~ 부분 반드시 체크

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/072426_WQMD4ZJMEQD2J9yOOg?q=80&s=1280x180&t=outside&f=webp)

- [antigravity](http://antigravity.google/)를 설치할 것 (설치후 재부팅)

- terminal을 열어서 `node -v`  를 입력했을때 어떤 결과가 나오는지 확인할것

### 로컬에서 실행하기

- aistudio에서 작성한 파일을 다운받기

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/072639_44eM3FNh6Z2S9GIYxA?q=80&s=1280x180&t=outside&f=webp)

- 폴더에 파일 붙여넣기

- antigravity에서 채팅을 열어서 `@누르고 전체 파일 선택 후` 아래 프롬프트 입력하기

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/072915_QmcuYlvAwnZO9jBW1S?q=80&s=1280x180&t=outside&f=webp)

> 코드 실행에 필요한 환경설정을 하고 코드를 실행해주세요

예상 결과

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/073216_IpjPCr30jMMnBdTXvS?q=80&s=1280x180&t=outside&f=webp)

- localhost:3000 이라는 주소로 내 컴퓨터에 임시로 서버를 만들어서 거기서 웹사이트를 돌리는 중

- 그러나 gemini api key가 입력이 안되어 있기 때문에, 거기에 키를 넣어야한다는 이야기

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/073331_mSHOsWvIcfDM3zIBI0?q=80&s=1280x180&t=outside&f=webp)

- [키 발급받아서](https://aistudio.google.com/api-keys) 넣기 : AI~ 시작하는 키 넣기

- `api 키 만들기`  → `새 프로젝트 만들기`  → 프로젝트 이름 지정(chatbot) → 키 이름 지정(chatbot) 

- 발급받은 내용 확인 후  `copy api key`  버튼 찾아 클릭 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/055542_rwyrxqo8K9ak125VAr?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/055641_n6IO6ynOpd4Nzksr8b?q=80&s=1280x180&t=outside&f=webp)

- Antigravity에서 .env.local 부분 찾아서 키 입력하기

## Firebase mcp 사용하여 배포하기

전체과정

- firebase cli에 로그인 → mcp를 사용하여 배포 요청

- mcp가 프로젝트 생성 → 웹페이지 배포

필요사항

- [firebase 회원가입](https://firebase.google.com/) 및 로그인하기

- [firebase mcp](https://firebase.google.com/docs/ai-assistance/mcp-server?hl=ko) 설치하기

Antigravity에서 mcp 설치하기

- `...` 을 눌러 ` MCP servers` 를 선택

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/074327_t6Nn9l5QP5tdV2aW0t?q=80&s=1280x180&t=outside&f=webp)

- `firebase`  검색하여 설치

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/074430_nHk2C7ZUjOBBYhlxoT?q=80&s=1280x180&t=outside&f=webp)

Antigravity의 mcp 설치 후  다음과 같이 요청합니다

> 좋아 이제  firebase mcp를 사용해서 배포해줘

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/080148_F2fC4Ul5Vs4H2drzmf?q=80&s=1280x180&t=outside&f=webp)

결과물 예시: [https://sejong-2f048.web.app/](https://sejong-2f048.web.app/)

## [필독]만약 firebase mcp가 설치가 안된다면 해결방법

### Antigravity에 물어보기

![Image](https://upload.cafenono.com/image/slashpageHome/20260115/074706_0gvNffbnQtXOe2PFeV?q=80&s=1280x180&t=outside&f=webp)

- 오류 메세지 + 프롬프트

- `Firebase MCP를 추가해줘`` ` 

- `firebase mcp 로그인 하자` 

### 수동으로 하기

- [ ] 설치하기 `npm install -g firebase-tools ` 

- [ ] 로그인하기 `firebase login` 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/063719_87265yKUJV56CRaxC2?q=80&s=1280x180&t=outside&f=webp)

- [ ] 로그인  확인하기

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/070506_qiGav6SL04rL8v0c46?q=80&s=1280x180&t=outside&f=webp)

- [ ] 프로젝트 수동으로 하나 만들기

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/070936_k9Zg3L9wZwhOmLxPjP?q=80&s=1280x180&t=outside&f=webp)

- [ ] 프로젝트 id 복사해서 antigravity에게 알려주기 

> 로그인은 내가 수동으로 했어 배포해줘, 프로젝트 아이디는 { }야, 새 프로젝트로 만들어줘. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/070949_RoT3poSXHCNb7vXuS7?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/071023_jvxBYWZQwNB54K148N?q=80&s=1280x180&t=outside&f=webp)

---

### 안티그래비티

> 코드 실행에 필요한 환경설정을 하고 코드를 실행해주세요

- 라이브러리(의존성) 설치하기: npm install

- 실행하기: npm run dev

- [api key 발급](https://aistudio.google.com/api-keys)하고 등록하기

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/055232_tBdojDoJxC3tNAoik1?q=80&s=1280x180&t=outside&f=webp)

- `api 키 만들기`  → `새 프로젝트 만들기`  → 프로젝트 이름 지정(chatbot) → 키 이름 지정(chatbot) 

- 발급받은 내용 확인 후  `copy api key`  버튼 찾아 클릭 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/055542_rwyrxqo8K9ak125VAr?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/055641_n6IO6ynOpd4Nzksr8b?q=80&s=1280x180&t=outside&f=webp)

- Antigravity에서 .env.local 부분 찾아서 키 입력하기

> api키 입력햇어 호출 반영해주세요

- vite 구조에 맞게 api 키를 불러오는 코드를 재작성

생각해볼 문제

- rate limit: 무료 티어의 경우 분당 / 일일 호출 횟수 제한이 있어서 문제가 될 수 있음

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/060125_Lw2GlVr9sW2ACLJR5y?q=80&s=1280x180&t=outside&f=webp)

- 유료 티어로 변경시

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/060419_2jo5QyZ27SXGr2naV4?q=80&s=1280x180&t=outside&f=webp)

### implementation Plan 기능 소개

- 코드나 작업방법을 100% 미리 알 수 없습니다. 모르는 내용이 생길때 물어보고 AI와 협업하면서 작업을 위해서 계획 문서를 만들고 수정하면서 함께 작업합니다. 

- 구글 지도를 띄우기 위해 어떻게 해야하냐고 요청 → plan문서를 만들어줌 → `Review` 를 누르고 직접 수정가능 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/061257_VVGWu8FD0Ja5dy4WFq?q=80&s=1280x180&t=outside&f=webp)

---

### Firebase mcp 사용하여 배포하기

Antigravity의 mcp 설치 후 (슬라이드와 설명 참조) 다음과 같이 요청합니다

> 좋아 이제 배포를 위해서 ignore 부분을 설정해주면 좋겠어 . firebase mcp를 사용해

- [ ] 설치하기

`npm install -g firebase-tools ` 

- [ ] 로그인하기

`firebase login` 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/063719_87265yKUJV56CRaxC2?q=80&s=1280x180&t=outside&f=webp)

- [ ] 로그인  확인하기

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/070506_qiGav6SL04rL8v0c46?q=80&s=1280x180&t=outside&f=webp)

- [ ] 프로젝트 수동으로 하나 만들기

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/070936_k9Zg3L9wZwhOmLxPjP?q=80&s=1280x180&t=outside&f=webp)

- [ ] 프로젝트 id 복사해서 antigravity에게 알려주기 

> 로그인은 내가 수동으로 했어 배포해줘, 프로젝트 아이디는 { }야, 새 프로젝트로 만들어줘. 

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/070949_RoT3poSXHCNb7vXuS7?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/071023_jvxBYWZQwNB54K148N?q=80&s=1280x180&t=outside&f=webp)

배포 성공

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/071049_qE1GMNVxrcS6ASoqX2?q=80&s=1280x180&t=outside&f=webp)

---

정리

- 코드를 작성한다

- 안티그래비티에서 수정한다

- api key를 발급받는다(카드등록권장)

    - gemini api key

    - google console에서 googlemap api key 

- firebase 로 배포한다

    - 설치 : `npm install -g firebase-tools`

    - 로그인 :  `firebase login` 

    - 배포는 antigravity mcp로 

---

### 배포에 성공하신분들 아래에 링크를 올려주세요

[https://slashpage.com/conanssam/1q3vdn2px1yy72xy49pr](https://slashpage.com/conanssam/1q3vdn2px1yy72xy49pr)

For the site tree, see the [root Markdown](https://slashpage.com/conanssam.md).