Search
Duplicate
⌨️

바이브코딩

YangPhago’s Mains(양파고)
목차(클릭하세요)
처음 목표로 했던 앱: 사진 자동 선별 + 보정 + AI 글쓰기 + PDF 생성"을 한번에 해주는 통합 앱
개발전 질문: 그럼 내가 클로드나 Gemini의 API키를 활용해 나만의 서비스를 만들어 학생들에게 서비스를 제공한다면 Saas에 해당되는 걸까?
Claude API나 Gemini API를 활용해 서비스를 만드는 과정을 구분해야
•
Claude/Gemini API를 사용하는 것 = MaaS 소비자 역할
•
만든 서비스를 다른 사람에게 제공하면 = SaaS 제공자 역할

1. 개발전 핵심 기초 지식

1-1. Saas가 뭔데?

•
클라우드 서비스 모델 비교 (사스, 파스, 마스)

피자 배달 비유

•
SaaS(Software as a Service) 란?
[안티그래비티]Saas개발 전체 과정 (랜딩페이지~배포·DB·결제)with AI
목차(클릭하세요)
26년을 준비하며 가장 공들였던 프로젝트 - RAG기반의 자공고2.0 이수트랙 AI추천 시스템 [양파고의 철학] 1. 바이브코딩 자체가 중요한 것이 아니라 바이브 코딩을 통해 내게 필요한 것을 만들자 2. 개인에게 유용하면서도 보다 많은 다수(학생/교사들)에게 가치로운 프로그램을 만들자 3. 이 과정 역시 학생들의 주제탐구에 하나의 방향으로 제시될 수 있도록

1. 프로그램 개발의 취지

1-1. 학생들에게 필요한 기능/전략

•
학교가 자율형 공립고라서 정말 많은 비교과 프로그램이 운영중임
•
효율적인 내신관리를 위해 본인의 희망 진로에 맞는 적합한 프로그램을 추천받을 수 있는 기능
•
단순 추천이 아닌 AI에 의한 분석후, 보다 전략적인 추천기능을 제공

1-2.담임 선생님들의 상담 및 진로상담 효율성 제고

•
사실 담임선생님들의 너무많은 행정부담으로 학교에서 진행중인 모든 프로그램을 아는 것은 쉽지 않음
•
학생들과 상담전에 해당 프로그램을 통해서 어느정도 본교에서 운영중인 프로그램을 파악하고, 보다 원활한 진로교육에 도움이 될 수 있을 것으로 판단
•
아무것도 모르고 있는 학생들과 상담하는 것 보다 어느 정도 비교과 프로그램을 알고 있는 상태의 학생들과 상담하게 할 수 있다면 담임선생님의 부담도 경감시키고, 보다 효과적인 진로상담이 가능 해질 것

1-3. 추천 로직 시각화

[안티그래비티]고등학교용 이수트랙
목차(클릭하세요)
안티그래비티로 모든 담임 선생님들의 로망: 진실의 자리바꿈을 구현해보자! 진실의 자리 바꿈이란? 같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
[배포 페이지]
•
클릭해서 전체 파일 확인가능!
[시작전 주의사항]
•
기능이 완벽하지 않을 수 있습니다. 수정을 원하시면

1. 래퍼런스 자료 찾기

•
자리바꾸기 프로그램 샘플을 찾아서

1-1. 전설중의 전설: 김명식 허명성의 과학사랑

•
김정식 수석 선생님의 자리바꾸기, 아마 교사라면 한번쯤은 이 프로그램을 보지 않았을까?
[안티그래비티]진실의 자리바꿈(배포용)
목차(클릭하세요)
안티그래비티로 모든 선생님들의 로망: 진실의 자리바꿈을 구현해보자! 진실의 자리 바꿈이란? 같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
[깃허브 페이지]
•
클릭해서 전체 파일 확인가능!
magicarrayseat
roughkyo
[시작전 주의사항]
•
기능이 많다보니 절대 한번에 완성될 수 없음을 인지하고, 중간중간 브레이크 포인트로 저장

1. 래퍼런스 자료 찾기

•
자리바꾸기 프로그램 샘플을 찾아서

1-1. 전설중의 전설: 김명식 허명성의 과학사랑

•
김정식 수석 선생님의 자리바꾸기, 아마 교사라면 한번쯤은 이 프로그램을 보지 않았을까?
•
리스펙! 그 잡채!
자리바꾸기 5.3 공개- 모둠별 자리 배치, 남녀자동 자리 배치 가능
2025.3.13>윈도우11에서 자리바꾸기 실행이 아예 안되는 선생님은 본문 맨아래 새로 올려 놓은 프로그램 다운 받아서 실행하세요. 불편하지만flashplayer_32_sa.exe 를 이용하여 실행하는 방법이 있습니다. 추후에 업그레이드 하도록 하겠습니다. 자리바꾸기 프로그램 탄생 15주년 기념으로 자리바꾸기 5.0을 공개합니다.(참고로 자리바꾸기 프로그램은 2002년에 1.0이 처음 개발되었습니다.)저에게는 갤럭시 S10 공개하는 것 같은 느낌이 드네요무엇을 상상하든 그 이상이 되도록 개선했습니다. 몇가지 문제가 발생했던 것 수정해서 최종버전을 공개합니다. 몇일전 다운 받으신 선생님은 다시 다운 받아 사용하세요 1. 책상배치가 가능해 졌습니다.,(모둠별 배치나 ㄷ 자 배치도 가능합니다.) 2. ..
https://sciencelove.com/2353
[안티그래비티]진실의 자리바꿈(로컬용)
목차(클릭하세요)
바이브 코딩 결론: 코드 짜는것 보다 해당 퀴즈게임에 들어갈 이미지를 생성하는데 더 많은 시간이 소요됨 이는 MCU관련 저작권으로 인해 직접적인 캐릭터 생성이 잘 안되기 때문 무엇보다 필요한건 집요한 프롬프팅을 통한 오류 수정
완성작 맛보기
•
이 작품은 전라남도 창의융합 교육원의 ‘2026. 동계 교원 교육정보화 연수’ 나승엽 선생님의 연수내용을 기반으로 변형되었음을 밝힙니다’
[깃허브]

1. 바이브 코딩 전 체크 포인트(=사전준비)

1-1. 교육용 퀴즈게임이 목적이므로 문제은행(=DB) 사전 준비 및 연동

1.
앱스스크립트를 사용하는 방식
2.
웹에 게시된 CSV를 사용하는 방식
3.
하지만 추후 업그레이드를 위해 앱스 스크립트 방식을 권장

1-2.캐릭터 이미지를 asset으로 사전 준비

[안티그래비티]endGame_교육용퀴즈
목차(클릭하세요)
구글은 진심으로 다르다..뭐가 다르냐구? [point1] VSC가 폴더별 관리를 지향한다면, Antigravity는 에이전트별 관리를 지향한다는 느낌 여러개의 에이전트가 각각 다른 프로젝트의 코딩 수행을 ‘동시’에 해줌 [point2] vsc가 code edit화면이 주라면, Antigravity는 Agent Manager가 주가 된다는 느낌 테슬라의 FSD와 Autopilot의 차이랄까?
[참고 영상]
드디어 커서 지웠습니다. 결국 구글이 이겼네요. 안티그래비티 Antigravity
Antigravity는 현존하는 가장 혁신적인 AI 협업 툴입니다. AI UX에 대한 구글의 생각이 아주 잘 담겨있습니다. 📕 국내 최초 클로드 코드 완벽 가이드 https://bit.ly/4lEuMvd ✉️ 최신 AI및 프로그래밍 무료 메일링 리스트 https://page.stibee.com/subscriptions/437644 ⭐️ 코드팩토리 통합링크 (모든 강의 및 서적) ⭐️ https://links.codefactory.ai 👉 바이브코딩 오픈톡방 https://open.kakao.com/o/gDUhYNDh 👉 NestJS 마스터클래스 https://bit.ly/fcnestjs 👉 플러터 초급 https://inf.run/Sjuw 👉 플러터 중급 https://inf.run/hf1E 👉 Typescript 마스터 클래스 https://inf.run/3r8Jd 👉 플러터 서적 (3판) https://bit.ly/4gXg1li
https://www.youtube.com/watch?v=B9cm-NgD-uA

1. 다운로드

•
자신의 운영체제에 맞는 안티 그래비티 설치

1-1. 설치후 최초 실행시 설정

•
vsc 기존 사용자에 따라 달라질 수 있음
•
안티그래비티 에이전트 설정 부분: 잘 모르겠으면 ‘recommended’설정 선택
•
모든 설정이 끝난 첫화면

1-2.중요옵션1: planning vs Fast

[안티 그래비티(Antigravity)] 1.설치법 & 사용법&단점 &MCP
목차(클릭하세요)
워크플로우는 특정 작업을 수행하기 위한 단계별 지침서
양파고 제작 PPT자동화 깃허브

1. 안티그래비티+PPT자동화를 추천하는 이유

•
현재 PPT자동화로 노트북 LM과 gemini를 사용하는 경우가 많은데 완벽하지 않고, 수정이 더 번거로울때가 있음

1-1. 노트북LM에서의 슬라이드 작성시 문제점

생성된 슬라이드 초안을 내부 UI에서 직접 수정하기 어려움
•
무엇보다 중간중간 깨지는 슬라이드가 있고, 한글표현이 100% 완벽하지 않음

1-2.Sam을 이용한 방법도 있긴한데 이것도100%는 아님

SAM 기반 오브젝트 분리
•
Segment Anything Model(SAM)을 활용하여 이미지 내 특정 객체를 추출하여 변경할 수 있으나 완벽하지 않음
1.
분리 정확도 저하: 복잡한 배경이나 객체 간 경계가 모호한 경우 모델이 오브젝트를 완벽하게 식별하지 못함.
[안티그래피티] PPT 자동화
목차(클릭하세요)
구글이 만든 안티 그래비티(=Antigravity)와 구글이 만든 파이어베이스(=FireBase)가 만나면? - 안티 그래비티(=Antigravity)가 딜러+힐러라면 - 파이어베이스(=FireBas는 서포터!!!

1. 고민_서비스 배포는 어떻게?

1-1. 하나의 생태계에서 프론트엔드와 벡엔드의 만남

•
안티그래비티 (아이돌): 춤추고 노래하며 실제로 퍼포먼스(기능 구현)를 보여주는 주인공.
•
파이어베이스 (기획사): 무대(호스팅)를 설치해주고, 팬레터(데이터)를 관리해주는 소속사.

핵심 요약표

1-2. 대표적인 배포 방법

•
firebase가 유리한 이유: 트래픽이 많지 않으면 무료 호스팅 가능
•
22년 6월 기준, 파이어베이스는 무료호스팅으로 10GB, 일 360MB의 데이터를 전송할 수 있음

1-3.구글 파이어베이스 기반 배포 시작을 위한 사전 준비

[안티 그래비티(Antigravity)] 2.배포 with Firebase
[바이브코딩]1.디자인툴 3인방(스플라인, 모빈, 비핸스)
목차(클릭하세요)
3D 컴포넌트 템플릿을 프롬프트에 포함하여 바이브 코딩하기 vs 3D컴포넌트 템플릿을 생성할 수 있는 리액트 라이브러리를 프롬프트에 포함하여 바이브 코딩하기
[참고 영상]

1-1. 3D디자인과 웹디자인을 레퍼런스로 제시

•
이미 준비되어 있는 템플릿과 콘텐츠를 가져오기
1.
스플라인에서 원하는 애미네이션을 선택
•
예시 디자인

1-2.구글 AI Studio에서 작업해보기

•
구글 AI studio의 ‘build’를 선택한 다음
[바이브코딩]2.3D웹사이트구축
[안티 그래비티(Antigravity)] 1.설치법 & 사용법&단점 &MCP
[안티 그래비티(Antigravity)] 2.배포 with Firebase
[안티그래피티] PPT 자동화
[안티그래비티]endGame_교육용퀴즈
[안티그래비티]진실의 자리바꿈(배포용)
[안티그래비티]진실의 자리바꿈(로컬용)
[안티그래비티]고등학교용 이수트랙
[안티그래비티]Saas개발 전체 과정 (랜딩페이지~배포·DB·결제)with AI
[바이브코딩]2.3D웹사이트구축
[바이브코딩]1.디자인툴 3인방(스플라인, 모빈, 비핸스)