0103 세종시교육청 바이브코딩 고급
준비물
개인 구글계정 준비
antigravity 설치
node.js 설치
aistudio 접속하기
firebase 가입하기(구글 계정)
프롬프트(드래그 해서 붙여넣기)
세종시 여러지역을 소개하는 챗봇을 만들어줘. 그라운딩 기능을 사용해서 출처를 밝히고 링크도 함께 제공해줘
•
그라운딩 기능: 모델 출력을 확인 가능한 정보 소스에 연결하는 기능
그럼 이제 구글 지도 기반 그라운딩 기능도 추가해서 지역의 주소를 조회하는 기능도 함께 추가해줘
•
allow 누르기
디자인을 보면서 수정하고 싶어요
•
annotate app 기능을 사용해봅시다( 입력창 하단)
•
add comment 누르고 수정하고 싶은 부분 선택 후에 내용 입력하기
겨울 스타일로 디자인 변경(눈이 오도록하기)
•
Add to chat 누르기, 그러면 입력창에 스크린샷 형태로 관련정보가 들어갑니다
눈 내리는 겨울 디자인으로 변경
디버깅 : 구현하다가 안되는 부분들이 나올수 있습니다
어 뭔가 이상하다 돌아가고 싶을때
•
Restore를 누르세요: 직전으로 돌아갑니다
•
프롬프트로 수정을 요청하세요
구글 지도 임베드 코드로 띄운걸까? 지금 연결 거부가 나오네
•
Open version history를 이용해서 과거의 버전으로 돌아갈 수 있습니다.
지금까지 체크포인트 파일
안티그래비티
코드 실행에 필요한 환경설정을 하고 코드를 실행해주세요
•
api key 발급하고 등록하기
•
api 키 만들기 → 새 프로젝트 만들기 → 프로젝트 이름 지정(chatbot) → 키 이름 지정(chatbot)
•
발급받은 내용 확인 후 copy api key 버튼 찾아 클릭
•
Antigravity에서 .env.local 부분 찾아서 키 입력하기
api키 입력햇어 호출 반영해주세요
•
vite 구조에 맞게 api 키를 불러오는 코드를 재작성
생각해볼 문제
•
rate limit: 무료 티어의 경우 분당 / 일일 호출 횟수 제한이 있어서 문제가 될 수 있음
•
유료 티어로 변경시
•
로컬에서 API 호출까지 성공한 버전(안에 키는 직접 변경하기)
implementation Plan 기능 소개
•
코드나 작업방법을 100% 미리 알 수 없습니다. 모르는 내용이 생길때 물어보고 AI와 협업하면서 작업을 위해서 계획 문서를 만들고 수정하면서 함께 작업합니다.
•
구글 지도를 띄우기 위해 어떻게 해야하냐고 요청 → plan문서를 만들어줌 → Review 를 누르고 직접 수정가능
Google Maps 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...)를 복사합니다.
•
최종 코드 버전 체크포인트: 
Google Docs03. 지도연동까지 성공.zip
Google Docs03. 지도연동까지 성공.zipFirebase mcp 사용하여 배포하기
Antigravity의 mcp 설치 후 (슬라이드와 설명 참조) 다음과 같이 요청합니다
좋아 이제 배포를 위해서 ignore 부분을 설정해주면 좋겠어 . firebase mcp를 사용해
설치하기
npm install -g firebase-tools
로그인하기
firebase login
로그인 확인하기
프로젝트 수동으로 하나 만들기
프로젝트 id 복사해서 antigravity에게 알려주기
로그인은 내가 수동으로 했어 배포해줘, 프로젝트 아이디는 { }야, 새 프로젝트로 만들어줘.
배포 성공
정리
•
코드를 작성한다
•
안티그래비티에서 수정한다
•
api key를 발급받는다(카드등록권장)
◦
gemini api key
◦
google console에서 googlemap api key
•
firebase 로 배포한다
◦
설치 : npm install -g firebase-tools
◦
로그인 : firebase login
◦
배포는 antigravity mcp로
