0401 경북대학교 특강
준비물
개인 구글계정 준비
node.js 설치 → 재부팅
antigravity 설치
aistudio 접속하기
firebase 가입하기(구글 계정)
aistudio 접속하기
•
build 누르고 아래에 프롬프트 붙여넣기
프롬프트(드래그 해서 붙여넣기)
대구 여러지역을 소개하는 챗봇을 만들어줘. 그라운딩 기능을 사용해서 출처를 밝히고 링크도 함께 제공해줘
•
그라운딩 기능: 모델 출력을 확인 가능한 정보 소스에 연결하는 기능
결과물을 보고 추가 프롬프팅하기
그럼 이제 구글 지도 기반 그라운딩 기능도 추가해서 지역의 주소를 조회하는 기능도 함께 추가해줘
•
allow 누르기
디자인을 보면서 수정하고 싶어요
•
focus mode 기능을 사용해봅시다( 입력창 하단)
•
focus 누르고 수정하고 싶은 부분 선택 후에 내용 입력하기
•
Add to chat 누르기, 그러면 입력창에 스크린샷 형태로 관련정보가 들어갑니다
눈 내리는 겨울 디자인으로 변경
디자인 수정하는 두번째 방법
•
다른 사람의 디자인 참고해서 넣기
이 디자인을 보고 비슷하게 ui를 수정해줘
디버깅 : 구현하다가 안되는 부분들이 나올수 있습니다
어 뭔가 이상하다 돌아가고 싶을때
•
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로
배포에 성공하신분들 아래에 링크를 올려주세요
No posts have been created