# 0103 세종시교육청 바이브코딩 고급 ### 준비물 - [ ] **개인 **구글계정 준비 - [ ] [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) For the site tree, see the [root Markdown](https://slashpage.com/conanssam.md).