​바이브코딩 #2 구글 안티그래비티(Antigravity) 웹앱 직접 만들기 : 클리앙

무려 7달만에 바이브코딩 강좌#2 입니다. 바이브코딩 #0: 파이썬 설치 및 환경설정 바이브코딩 #1: 딸깍 한번으로, 유튜브 다운로드 앱 만들기 5월에 바이브코딩 강좌를 올렸었고 이때는 vscode 기반에 파이썬 앱 만들기였습니다. 이렇게 바이브코딩 맛을 보게 되면, 로컬 프로그램을 넘어 웹에 배포를 하고 싶어집니다. 매번 exe를 만들거나, 파이썬이 깔려있는 pc에서 사용하기엔 한계가 있거든요.. 그래서 이번시간에는 웹에 배포하는 방법에 대한 강좌입니다. 요즘 제가 많이 쓰는 vercel + supabase 조합이 있는데요. 이 방법은 학습곡선이 너무 높고 초보에게는 적합하지 않습니다. 이번 강좌에서는 간단하게 구현할수있는 Streamlit 라이브러리를 사용하겠습니다. Streamlit 라이브러리는 HTML이나 CSS를 전혀 몰라도, 오직 파이썬 코드만으로 빠르게 웹 애플리케이션을 만들어주는 라이브러리입니다. 준비물 - Antigravity (코딩 에이전트, vscode나 cursor도 가능) - Google AI Studio API키 - 무료는 기사분석 가능 / 이미지 생성은 유료계정 필요 - Github 계정 - Streamlit Community Cloud 계정 요 4가지가 필요합니다. 거두절미 하고, 이번 시간에 만들 앱입니다. https://ust-webai.streamlit.app/ 페이지를 들어가보시면, 제가 설정한 RSS 피드를 Gemini-API가 분석하여 뉴스를 정리해줍니다. 너무 많은 호출이 될수있어서 수집기능은 관리자 기능으로 제한해놨습니다. 그리고 관리자 메뉴로 들어가면 1. 뉴스 수집 및 분석 저장된 RSS 피드를 긁어와서 분석해주는 기능입니다. 2. 인포그래픽 생성 Google AI Studio 계정을 유료로 설정해야 쓸수있는데요. 나노바나나(pro)로 뉴스내용을 일러스트로 만드는 기능을 추가했습니다. 3. RSS 피드 관리 뉴스기사들을 여러 수집방법을 고민했으나, 간단하게 만들기위해 크롤링은 빼고, RSS 방식만 넣었습니다. 추후 네이버 뉴스기사 긁어오기, 유튜브 최신영상 가져오기등 다양하게 활용 할 수 있겠죠 4. 통계 대시보드 마지막으로 통계 기능을 넣었습니다. 그러면 이 앱을 어떻게 하면 만들수 있는지 전체 플로우를 설명드리겠습니다. 어제 아침에 만들어봤는데요. 전체 1시간 남짓 걸렸습니다. 이미지 제한으로 인해 아주 자세한 설명은 한계가 있네요. 대략적인 흐름을 보시면 될거 같습니다. Streamlit 기반 나만의 IT 뉴스룸 프로그램 만들기 1. 기획하기 (Google AI Studio) 먼저 만들고 싶은 프로그램에 대한 구상을 브라우저 LLM에서 진행을 합니다. Gemini가 일정부분 무료이고 Google AI Studio에서 프롬프트는 무료입니다. 여기서 진행하셔도 됩니다. https://aistudio.google.com/ 구글 AI 스튜디오에 가서 계정을 만들어 줍니다. 접속하시면 플레이그라운드가 있는데 여기에 프롬프트를 넣으시면 됩니다. RSS 피드를 불러와서 구글 gemini-api가 뉴스기사를 분석해주는 Stremlit 기반 앱을 만들고 싶어 용어를 알면 이렇게 넣어주면됩니다. 스트림릿 기반이라고 하면 이 기반에 대한 답변을 해줍니다. 저는 아래와 같이 프롬프트를 넣었습니다. 국내 IT 뉴스들을 RSS 방식으로 긁어와서 날짜별로 gemini-api로 분석을 해서 1장짜리 나만의 뉴스룸을 만들고 싶어 이번에 새롭게 출시한 구글의 antigravity로 개발을 할거고 파이썬 - streamlit을 사용할거야 메인 화면에는 날짜별 주요 뉴스 브리핑이 들어가 있고, 대시보드 - 관리자권한으로 들어가는 대시보드에는 RSS 피드를 추가,삭제, 그리고 수집및 ai 분석을 할수있고, 접속자 통계도 볼수있게 해줘 이 모든 자료들은 DB를 사용하지 않고 json 파일을 저장해서 불러오는 방식으로 해줘 스토리지는 깃헙리포지토리를 쓸거야 웹으로 배포는 stramlit cloud를 쓸거야 이렇게 넣으면 답변을 줄겁니다. 그걸 보고 내가 만들고 싶은 앱에대한 아이디어 논의를 gemini와 대화를 나눕니다. 그리고 사용 시나리오를 통해 전체 흐름에 대해 한번더 점검을 합니다. 1. 대시보드에서 RSS 피드들을 등록 2. 수집버튼을 누르면 최근 3일치 피드만 불러와서 분석시작 3. gemini-1.5-flash 모델을 이용해서 핵심만 정리해서 분석 4. 분석된 자료는 토픽별로 묶고, 해당 피드 주소까지 포함해서 1장짜리 보고서를 완성 그래서 메인 화면에서는 수집된 날짜별 토픽들이 최신날짜 페이지가 가장 먼저 나오고 네비게이션 바로 다른날짜 토픽들도 볼수있게해줘 그러면 아래와 같이 답변을 해줄겁니다. 쭉 읽어보고 이제 완성이 됐다 싶으면 이제 Antigravity가 작업할수 있는 형태의 .md (마크다운) 문서로 만들어 달라고 합니다. 이렇게 antigravity가 제작을 할수있는 전체 명세서 md 파일 형태로 만들어줘 그러면 이런식으로 답변을 해줄거고. 이 전체 내용을 긁어서 메모장에 붙여넣고 PROJECT_SPEC.md 파일 형태로 저장해줍니다. 이러면 코딩에이전트와의 개발준비작업이 모두 끝나게 됩니다. 2. Google Antigravity 사실 저는 Cursor가 더 편합니다..; 하지만 커서는 유료고 (20$, 처음 가입시 1주일 무료) 구글 안티그라비티가 출시한지 얼마 안됐는데 핫하다길래 써봤습니다. 개인적으론 커서보다는 아직은 부족하지만, 프리뷰 버전이어서 무료라는 점이 좋네요. 물론 할당량이 있긴하지만 RSS 프로젝트 만드는데는 지장이 없었습니다. https://antigravity.google/ 사이트에 가서 안티그라비티 설치를 해줍니다. 설치하실때 PATH 추가가 되있어야 나중에 고생안합니다. (기본으로 되있습니다) 그리고 설치 폴더나 유저이름이 윈도우에서 한글이 껴있는지도 확인하셔야 합니다. 개발에 프로젝트 폴더에 한글이 껴있으면 에러가나는 경우가 많더라구요. 설치가 완료되면, 추천하는 설정으로 다 넘기면됩니다. 로그인 하라고 하면, 구글계정으로 로그인을 하시면됩니다. 스트림릿 라이브러리를 사용하기 위해선 파이썬 설치가 필요합니다. https://www.python.org/downloads/ 실행이 되면, 오픈폴더가 있습니다. 프로젝트의 기준은 폴더 기준으로 작업을 하시면됩니다. 오픈폴더 누르시고 폴더 만들어서 설정해주세요 안티그라비티는 1. 왼쪽 : 파일들 및 각종 상태들 관리하하는 창 2. 가운데 : 코드 및 터미널창 3. 오른쪽 : 프롬프트 입력 및 에이전트 창 이렇게 구성되있고, 모든 코딩 에이전트 IDE 툴이 유사합니다. 아까 gemini와 만든 PROJECT_SPEC.md 파일을 넣어줍니다. (탐색창에서 끌어다 던져도 됩니다.) 그리고 오른쪽 에이전트 창에 입력창에 보면 모델을 선택할 수 있는데 할당량 제한이 있기는 하나 현재 무료입니다. Gemini Pro(High) 모델이 좋은데 좀 느리고 Gemini Pro(Low) 모델이 좀 빠릅니다. 어짜피 기본 뼈대는 md로 만들었기때문에 Low 모델로 하셔도 됩니다. 그리고 프롬프트창에 @를 넣으면 현재 있는 파일들을 소환힐수있는데요 @PROJECT_SPEC.md 이 스펙문서를 보고 구현해줘 이렇게 프롬프트를 넣으면.. 거의 끝입니다 ㅎ 그러면 이렇게 Implementation Plan, 구현계획을 만들어줍니다. 이런다음에 구현해줘라고 하면됩니다. 그러면 단계별로 하나씩 필요한것들을 만들게 되는데요. 중간중간에 막히는 부분은 gemini에게 물어보면서 해결하면됩니다. 3. Google AI Studio API키 설정 github도 설정해야 하지만, 우선 로컬로 만들고 싶다고 하시면 나중으로 설정을 미룰 수 있습니다. 다만, RSS피드에 대한 분석을 하려면, AI API키는 필수입니다. ChatGPT 유료구독을 하고 계시면 gpt-api를 쓰셔도 되구요 뉴스 분석 API정도는 Google AI Studio API 무료한도내에서 이용가능합니다. (일일호출 500번 제한인가 그럴거에요) Google AI Studio 하단에 Get API Key가 있습니다. 클릭하시고 여기서 API 키를 만드시면됩니다. 저는 이미지 생성때문에... 유료전환을 했습니다 ㅜ 4. Github 설정 로컬에서 사용하는거야 json 파일을 지정해주면되지만 (각종 데이터 저장용) 웹으로 배포를 하려면 DB와 스토리지가 필요합니다. 이걸 간소하게 하기 위해 Github repo 저장소를 이용할예정입니다. 깃허브는 코드 버전관리하는 서비스라 보시면되고, 모든 개발자들이 깃헙에서 시작한다 보시면 됩니다. DB는 사용하지않고, 간단한 형식인 json 파일을 활용합니다. https://github.com/ 에 접속해서 회원가입을 합니다. 그리고 왼쪽 메뉴에 New 를 클릭해서 새 레포지토리를 만들어줍니다. 이렇게 이름을 넣고 만들어 주면 됩니다. 그리고 깃헙에 저장하려면 깃헙 토큰을 세팅해야 하는데요 1. 메인에서 오른쪽 프로필을 선택하고 아래에 세팅을 클릭합니다. 2. 그리고 디벨롭세팅을 들어가셔서 3. 클래식 토큰을 만들어 주면됩니다 그리고 안티그라비티 툴에서 secrets.toml 파일에 키값들을 넣어주면됩니다. 5. 로컬테스트 그렇게 안티그라비티 툴과 구현을 하고 나서 테스트를 합니다. 실행해줘 프롬프트를 넣으면 웹브라우저창에 localhost:8501 창이 열리면서 실행이 되면 성공입니다. 그리고 관리자 대시보드를 로그인해서 RSS 피드를 추가해 주면됩니다. 저는 테스트로 6개 RSS 피드를 넣었습니다. https://feeds.feedburner.com/zdnetkorea/news https://www.bloter.net/rss/allArticle.xml https://news.hada.io/rss/news https://yozm.wishket.com/magazine/feed/ https://techcrunch.com/feed/ https://www.wired.com/feed/rss 그리고 분석 시작을 눌러 제대로 나오는지 테스트 하면 됩니다. 그렇게 해서 원하는 기능들을 gemini와 상의해 가면서 넣으면됩니다. 원하는 요약과 내용정리가 되게 프롬프트들도 다듬어 달라고 요청해보세요. 6. 웹에 배포하기 이렇게 만들어진 로컬 프로그램을 웹에 배포하는 방법을 알려드리겠습니다. 앞서 만들었던 github에 코드를 저장하는 "푸시"를 해야 합니다. 푸시를 하기 위해서는 git 이라는 프로그램이 필요합니다. git을 깔면 코딩 에이전트에서 자동으로 커밋 및 푸시를 할 수 있습니다. https://git-scm.com/ 깃 사이트를 방문합니다 마찬가지로 설치해주시면됩니다. 설치해주시고, 안티그라비티를 재시작후에 깃헙에 클론용 링크를 복사해서 지금 프로젝트를 이 저장소에 푸시해달라고 하면 푸시해 줍니다. 이렇게 깃헙에 레포지토리를 올리게 되면 스트림릿 클라우드 커뮤니티와 연동준비는 모두 끝나게됩니다 https://streamlit.io/cloud 를 접속해서 가입하고, 깃허브 계정과 연동해줍니다. 대시보드 창에서 오른쪽 끝에 Create app 을 선택해 줍니다. 그리고 깃허브 계정에 레포지토리가 만들어 져 있으면 연동이 됩니다. 설정을 확인하고 디플로이를 해주시면됩니다. 7. 나노바나나(프로) 이미지 기능은 유료 초반에 나노바나나(프로) 무료라 해서 시도해봤는데, 접속이 폭주해서 무료는 지원되지 않는거 같습니다. (자꾸 할당량 초과됐다고 에러가 나더라구요..) 어제 오늘 테스트로 7장정도 뽑았는데, 2130원 나왔습니다. gemini-3-pro-image 기준으로 장당 300원정도인거 같습니다. 마치며.. Cursor로 작업했을때보다 많이 답답했습니다. 그래서 1주일 무료기능+유료를 쓰실 의향이 있으면 커서를 추천하구요 그래도 무료라 좋기는 합니다. 그래서 안티그라비티로 시도해보셔도 좋을거 같습니다. 구현_가이드.md 문서를 만들었습니다. 이 파일을 안티그래피티에 넣고 검토해달라고 하면 1. 로컬 환경 테스트 2. 스트림릿 배포 3. 이미지 구현(유료) 를 단계별로 만들어 볼 수 있을거에요 (필요하신분 쪽지 주시면 전달 드리겠습니다) 올해 5월부터 일반인들 대상으로 바이브코딩 강의를 진행해왔는데요 지금까지 다양한 기관에서 100명이 워크샵 참여를 했고 2시간동안은 파이썬 설치와 환경설정만 합니다. 개발자들이 들으면 뜨악할.. 이게왜? 라고 하실수 있으나.. 가장 큰 진입장벽이 개발환경 구축과 환경설정이더라구요.. 혹시나 교육관련 정보 나 질문있으시면 쪽지 주시면 답장 드리겠습니다. 영상으로도 만들고 있는데.. 그것도 완성되면 쪽지로 공유드리겠습니다. 바이브코딩이 처음엔 딸깍으로 시작했다가.. 이것도 점점 복잡해지는 기분입니다 ㅜ

www.clien.net