0103 세종시교육청 바이브코딩 고급

Fri, 02 Jan 2026 20:02:03 GMT

### 준비물

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

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

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

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

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

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

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

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

> 그럼 이제 구글 지도 기반 그라운딩 기능도 추가해서 지역의 주소를 조회하는 기능도 함께 추가해줘

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

- allow 누르기

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

- `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)

> 겨울 스타일로 디자인 변경(눈이 오도록하기)

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

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

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

눈 내리는 겨울 디자인으로 변경

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

### 디자인 수정하는 두번째 방법

- 다른 사람의 디자인 참고해서 넣기

- [https://www.behance.net/](https://www.behance.net/)

> 이 디자인을 보고 비슷하게 ui를 수정해줘

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

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

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

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

- 프롬프트로 수정을 요청하세요

> 구글 지도 임베드 코드로 띄운걸까? 지금 연결 거부가 나오네

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/053008_2tYj0975FE70SAkVZ1?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)

지금까지 체크포인트 파일

https://drive.google.com/file/d/1vYXv0xqJI4LBup777VndOHW4Uerhfh8h/view?usp=sharing

---

### 안티그래비티

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

- [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)

- 로컬에서 API 호출까지 성공한 버전(안에 키는 직접 변경하기)

https://drive.google.com/file/d/194Gc7tF2roHMugUumxw2CF8FOttc3ALG/view?usp=sharing

### implementation Plan 기능 소개

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

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

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

[https://slashpage.com/conanssam/dk58wg2eg35e72nqevxz](https://slashpage.com/conanssam/dk58wg2eg35e72nqevxz)

[https://slashpage.com/conanssam/7916x82rn375624kpyg3](https://slashpage.com/conanssam/7916x82rn375624kpyg3)

---

### Google Maps API 키 발급 방법 (상세)

구글 지도를 사용하려면 [Google Cloud Platform (GCP)](https://console.cloud.google.com/)에서 API 키를 발급받아야 합니다.

- [ ] 1단계: 프로젝트 생성 및 결제 설정

Google Cloud Console에 접속하여 로그인합니다.

상단 프로젝트 선택 메뉴에서 `새 프로젝트`를 클릭하여 프로젝트를 생성합니다 (예: sejong-smart-guide).

좌측 메뉴에서 `결제(Billing)`로 이동하여 결제 계정을 연결합니다. (구글 지도는 결제 수단 등록이 필수이지만, 매월 일정량의 무료 크레딧이 제공됩니다).

( 이 부분은 제가 api키를 예제코드에 넣어서 드리는 형태로 임시 대체가능)

- [ ] 2단계: Maps Embed API 활성화

상단 검색창에 `Maps Embed API`를 검색합니다.

검색 결과에서 Maps Embed API를 선택하고 `사용(Enable)` 버튼을 클릭합니다.

- [ ] 3단계: API 키 생성

좌측 메뉴에서 `사용자 인증 정보(Credentials)`를 선택합니다.

상단의 `+ 사용자 인증 정보 만들기`> `API 키`를 클릭합니다.

생성된 API 키(예: AIzaSy...)를 복사합니다.

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

---

- 최종 코드 버전 체크포인트: Google Docs03. 지도연동까지 성공.zip

---

### 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)

![Image](https://upload.cafenono.com/image/slashpageHome/20260103/071529_iw2UQVIJzSa84Jvdd6)

---

정리

- 코드를 작성한다

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

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

- gemini api key

- google console에서 googlemap api key

- firebase 로 배포한다

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

- 로그인 : `firebase login`

- 배포는 antigravity mcp로

---

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

[https://slashpage.com/conanssam/y9e1xp2x5epkwm7k35vz](https://slashpage.com/conanssam/y9e1xp2x5epkwm7k35vz)