목차(클릭하세요)
바이브 코딩을 시작하고, 보안/품질의 관점에서 리뷰
1.바이브 코딩에서 AI모델이란?
1-1. 엔트로픽 모델
•
주종은 Sonet, Opus, Fables
◦
Sonet: 일을 잘함(빠르게, 싸게)
◦
Opus: 팀장 역할, 사용토큰이 비쌈
1-2.구글 gemini모델
•
구글의 LLM모델은 Flash와 pro모델로 나눌 수 있음
◦
flash: 일을 잘함(빠르게, 싸게)
◦
Pro: 팀장역할, 사용 토큰이 비쌈
◦
Low와 HIGH의 차이: High는 굉장히 고차원적인 추론이 필요할때
•
결과적으로 깊은 사고와 복잡한 추론이 필요한 작업에는 3.1 Pro를, 빠르고 즉각적인 반응이나 가성비가 중요한 작업에는 3.5 Flash를 선택하는 것이 가장 효율적이라는 의견
1-3.물리 선생님의 아이디어
•
교실컴퓨터 Tracking Idea
◦
교실 컴퓨터의 학생 무단사용을 기록, 추척하는 프로그램
•
학생들 Idea: 축구 감독AI, 4방향 테트리스
2. AI업계의 Trend와 Future
2-1. A라는 서비스를 만들때?
•
학교의 식단을 가져오는 서비스를 만든다고 가져올때
◦
API서버에서 json형태로 답변을 가져왔음
◦
지금은 MCP를 활용하는 경우가 더 많아짐
자동완성에서 자율 에이전트로(feat.AI현업 개발자의 입장에서)
목차(클릭하세요)
현재 지속적 업데이트 중
작업 원칙(7개) + 하네스 엔지니어링(카파시 4원칙) 통합 버전
#Gemini.md파일 저장 위치
[GEMINI.md]
1. 글로벌 Rules 전체 구조
[안티그래비티]global rules 업데이트
목차(클릭하세요)
사용 모델: gemini 3.1pro
제작 환경: AI studio
**앱 설명: 교사가 입력한 채점 기준(루브릭)과 만점 샘플을 바탕으로, AI가 다수의 학생 서술형 답안을 한 번에 분석하여 점수, 표절율, 맞춤형 피드백을 자동 산출해 주는 평가 보조 도구
**핵심 기능: 수행평가 채점에 소요되는 교사의 막대한 시간과 업무 부담을 획기적으로 줄이고, 학생들에게는 보다 일관되고 상세한 피드백을 제공(수행평가 AI 채점 도우미)
1. 제작 취지
이미 이런 서비스는 있지요.. 이걸 사용할 도니가 없을뿐..•
클리포 링크: 
클리포 기능 | 채점은 쉽게, 기록은 빠르게
클리포 기능 | 채점은 쉽게, 기록은 빠르게•
내돈으로 결제하기엔 뭔가 아깝고, 학교엔 이런걸 결재해줄 예산은 없고..
[AI studio]수행평가 Ai채점 도우미
목차(클릭하세요)
노트북LM의 슬라이드기능의 최대 약점1: 한글이 일부 깨짐
노트북LM의 슬라이드기능의 최대 약점2: 텍스트 수정이 되지 않음
참고 사이트: 
YouTube인지언어연구회
YouTube인지언어연구회1. 원인분석
1-1. 왜 이런 문제가 생길까?
•
지식의 응집도(Cohesion) 문제
◦
노트북LM은 소스 자료들을 전역적으로 참조하여 하나의 응집된 요약을 생성함.
◦
특정 문구 하나를 수정할 경우, 해당 문구가 참조하고 있는 여러 소스 간의 논리적 연결성(Grounding)이 깨질 위험이 있어 시스템적으로 수정을 보수적으로 제한함.
•
객체 지향적 생성 방식
◦
슬라이드나 가이드는 '텍스트 데이터'가 아닌, 렌더링된 '객체(Object)' 형태로 생성되는 경우가 많음.
◦
제미나이 캔버스가 '에디터'라면, 노트북LM은 '퍼블리셔(Publisher)'에 가까운 특성을 보임.
•
UI/UX 디자인 의도
◦
노트북LM은 사용자가 정보를 '소비'하고 '학습'하는 데 초점을 맞춤.
◦
반면, 캔버스는 사용자가 정보를 '생산'하고 '다듬는' 과정에 최적화되어 있어 편집 인터페이스의 깊이가 다름.
1-2.그럼에도 불구하고 노트북LM이 gemini Canvas와 다른 이유
비교 항목 | 노트북LM (NotebookLM) | 제미나이 캔버스 (Gemini Canvas) |
핵심 철학 | 소스 중심 (Source-Centric): 다수의 소스를 통합하여 새로운 '지식 객체' 생성 | 작성 중심 (Author-Centric): 사용자의 초안을 바탕으로 '실시간 협업 및 수정' |
구조적 특성 | 여러 소스 간의 관계를 매핑하는 복잡한 그래프 구조를 가짐. | 단일 문서(Markdown 기반) 내의 선형적 또는 계층적 구조를 가짐. |
수정 제약 | 생성된 요약문이나 슬라이드는 '최종 결과물(Artifact)'로 취급되어 부분 수정이 어려움. | 캔버스 내에서 특정 문단을 드래그하여 부분 수정, 톤 조절, 길이 조정을 즉시 수행함. |
데이터 활용 | N개의 외부 소스 (S1, S2, ..., Sn) | 단일 컨텍스트 (C) |
2. [솔루션1]텍스트 수정을 위한 앱
2-1. 링크
2-2.사용법
[AI studio]pdf to PPT(with 노트북LM)
목차(클릭하세요)
처음 목표로 했던 앱: 사진 자동 선별 + 보정 + AI 글쓰기 + PDF 생성"을 한번에 해주는 통합 앱
[현재 작성중]장기플랜으로 계속적 업데이트
개발전 질문: 그럼 내가 클로드나 Gemini의 API키를 활용해 나만의 서비스를 만들어 학생들에게 서비스를 제공한다면 Saas에 해당되는 걸까? Claude API나 Gemini API를 활용해 서비스를 만드는 과정을 구분해야 •
Claude/Gemini API를 사용하는 것 = MaaS 소비자 역할
•
만든 서비스를 다른 사람에게 제공하면 = SaaS 제공자 역할
1. 개발전 핵심 기초 지식
1-1. Saas가 뭔데?
•
클라우드 서비스 모델 비교 (사스, 파스, 마스)
구분 | SaaS | PaaS | MaaS |
정식 명칭 | Software as a Service | Platform as a Service | Model as a Service |
제공 항목 | 완성된 소프트웨어 | 개발 플랫폼 + 인프라 | AI 모델 API |
사용자 | 일반 사용자, 기업 직원 | 개발자, 개발팀 | AI 개발자, 데이터 과학자 |
관리 범위 | 데이터만 관리 | 애플리케이션 코드 관리 | API 호출 및 통합 관리 |
기술 지식 | 불필요 | 프로그래밍 필요 | API 사용법 필요 |
커스터마이징 | 제한적 | 높음 | 중간 (프롬프트/파라미터) |
구체적 예시 | 줌, 노션, 캔바등 | MS Azure, Vercel | Claude, Gemini API |
특징 | 설치없이 브라우저에서 바로 사용 | 서버 관리 없이 코드만 작성하여 배포 | API 호출로 AI 기능을 자신의 서비스에 통합 |
피자 배달 비유
서비스 | 비유 | 설명 |
SaaS | 배달 피자 주문 | 완성된 피자를 받아서 바로 먹기만 하면 됨 |
PaaS | 피자 키트 배달 | 재료와 도구는 제공, 직접 조리해서 먹음 |
MaaS | 피자 레시피 구독 | 전문 셰프의 레시피를 받아 자신의 재료로 활용 |
•
SaaS(Software as a Service) 란?
[안티그래비티]Saas개발 전체 과정 (랜딩페이지~배포·DB·결제)with AI
목차(클릭하세요)
26년을 준비하며 가장 공들였던 프로젝트
- RAG기반의 자공고2.0 이수트랙 AI추천 시스템
[양파고의 철학]
1. 바이브코딩 자체가 중요한 것이 아니라 바이브 코딩을 통해 내게 필요한 것을 만들자
2. 개인에게 유용하면서도 보다 많은 다수(학생/교사들)에게 가치로운 프로그램을 만들자
3. 이 과정 역시 학생들의 주제탐구에 하나의 방향으로 제시될 수 있도록
1. 프로그램 개발의 취지
1-1. 학생들에게 필요한 기능/전략
•
학교가 자율형 공립고라서 정말 많은 비교과 프로그램이 운영중임
[안티그래비티]고등학교용 이수트랙
목차(클릭하세요)
안티그래비티로 모든 담임 선생님들의 로망: 진실의 자리바꿈을 구현해보자!
진실의 자리 바꿈이란?
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
[배포 페이지]
•
클릭해서 전체 파일 확인가능!
[안티그래비티]진실의 자리바꿈(배포용)
목차(클릭하세요)
안티그래비티로 모든 선생님들의 로망: 진실의 자리바꿈을 구현해보자!
진실의 자리 바꿈이란?
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
[깃허브 페이지]
•
클릭해서 전체 파일 확인가능!
[안티그래비티]진실의 자리바꿈(로컬용)
목차(클릭하세요)
바이브 코딩 결론: 코드 짜는것 보다 해당 퀴즈게임에 들어갈 이미지를 생성하는데 더 많은 시간이 소요됨
이는 MCU관련 저작권으로 인해 직접적인 캐릭터 생성이 잘 안되기 때문
무엇보다 필요한건 집요한 프롬프팅을 통한 오류 수정
완성작 맛보기
•
이 작품은 전라남도 창의융합 교육원의 ‘2026. 동계 교원 교육정보화 연수’ 나승엽 선생님의 연수내용을 기반으로 변형되었음을 밝힙니다’
[깃허브]
[안티그래비티]endGame_교육용퀴즈
목차(클릭하세요)
구글은 진심으로 다르다..뭐가 다르냐구?
[point1]
VSC가 폴더별 관리를 지향한다면, Antigravity는 에이전트별 관리를 지향한다는 느낌
여러개의 에이전트가 각각 다른 프로젝트의 코딩 수행을 ‘동시’에 해줌
[point2]
vsc가 code edit화면이 주라면, Antigravity는 Agent Manager가 주가 된다는 느낌
테슬라의 FSD와 Autopilot의 차이랄까?
여러개의 에이전트가 각각 다른 프로젝트의 코딩 수행을 ‘동시’에 해줌
[point2]
vsc가 code edit화면이 주라면, Antigravity는 Agent Manager가 주가 된다는 느낌
테슬라의 FSD와 Autopilot의 차이랄까?
[참고 영상]
1. 다운로드
•
자신의 운영체제에 맞는 안티 그래비티 설치
[안티 그래비티(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. 하나의 생태계에서 프론트엔드와 벡엔드의 만남
•
안티그래비티 (아이돌): 춤추고 노래하며 실제로 퍼포먼스(기능 구현)를 보여주는 주인공.
•
파이어베이스 (기획사): 무대(호스팅)를 설치해주고, 팬레터(데이터)를 관리해주는 소속사.
핵심 요약표
구분 | Google Antigravity (IDE) | Google Firebase (BaaS) | 결합 시너지 |
정의 | AI 에이전트 기반 자율 개발 환경 | 서버리스 백엔드 인프라 플랫폼 | 완전 자동화된 풀스택 개발 |
주요 역할 | 코드 작성, 테스트, UI 생성 (프론트) | DB, 인증, 호스팅 제공 (백엔드) | 개발자 없는 1인 유니콘 기업 가능 |
핵심 가치 | "무에서 유를 창조" (Creation) | "유를 영속적으로 관리" (Management) | 아이디어에서 배포까지 10분 컷 |
1-2. 대표적인 배포 방법
항목 | Firebase | AWS | GitHub |
초기 설정 | 5-10분 | 1-2시간 | DB 미지원 |
학습 난이도 | | | |
무료 한도 | 충분함 | 복잡함 | 무제한(정적) |
실시간 DB | 내장 | 별도 설정 | |
인증 시스템 | 원클릭 | 복잡함 | |
배포 속도 | 1분 | 10-30분 | 1분 |
•
firebase가 유리한 이유: 트래픽이 많지 않으면 무료 호스팅 가능
•
22년 6월 기준, 파이어베이스는 무료호스팅으로 10GB, 일 360MB의 데이터를 전송할 수 있음
1-3.구글 파이어베이스 기반 배포 시작을 위한 사전 준비
[안티 그래비티(Antigravity)] 2.배포 with Firebase
목차(클릭하세요)
바이브 코딩시에 만들어지는 웹 페이지의 느낌이 다 고만고만하기 때문에 시각적 요소를 더하기 위한 사이트: 스플라인 + 모빈
1. 3D디자인_스플라인
•
3d랜딩 페이지 제작을 위한 사이트
•
메인 베너 디자인을 3D디자인으로 구성하고 싶을 유용
•
브라우저에서 실시간으로 돌아가는 도구
1-1. 커뮤니티 활용
•
일반 사람들이 만든 디자인을 서로 공유하는 곳
1-2.실제 remix과정
•
remix버튼을 눌러 일부 텍스트나 간단 수정이 가능함
[바이브코딩]디자인툴 3인방(스플라인, 모빈, 비핸스)
목차(클릭하세요)
3D 컴포넌트 템플릿을 프롬프트에 포함하여 바이브 코딩하기 vs 3D컴포넌트 템플릿을 생성할 수 있는 리액트 라이브러리를 프롬프트에 포함하여 바이브 코딩하기
[참고 영상]
1. 기초 방법
1-1. 3D디자인과 웹디자인을 레퍼런스로 제시
•
이미 준비되어 있는 템플릿과 콘텐츠를 가져오기
1.
스플라인에서 원하는 애미네이션을 선택
•
예시 디자인
1-2.구글 AI Studio에서 작업해보기
•
구글 AI studio의 ‘build’를 선택한 다음
[AI studio]2.3D웹사이트구축
목차(클릭하세요)
안티그래비티로 모든 담임 선생님들의 로망: 진실의 자리바꿈을 구현해보자!
진실의 자리 바꿈이란?
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템 Open Workcare: 학교 부서별 업무 Link Hub 핵심 요약
1. 프로젝트 개요
•
프로젝트명: Open Workcare (학교 부서별 업무 Link Hub)
•
한 줄 소개: 학교 내 수많은 행정 및 교육 웹페이지 링크를 마인드맵 형태의 시각적 캔버스 및 모바일 아코디언 트리 뷰로 직관적으로 관리할 수 있게 돕는 오픈소스 CMS 템플릿입니다.
•
특징:
◦
특정 학교 전용이 아닌 범용적인 템플릿으로 설계되어 타 학교나 단체에서 복제(Fork)하여 바로 사용 가능합니다.
◦
복잡한 DB 설정 대신 누구나 다루기 쉬운 Google Sheets(구글 스프레드시트)를 원격 데이터베이스로 사용합니다.
2. 핵심 기술 스택
•
프론트엔드: Next.js 15 (App Router), TypeScript, Tailwind CSS v4, Lucide React (아이콘)
•
데이터 베이스: Google Sheets + Google Apps Script Web App API (양방향 연동)
•
인증 & 보안: Next.js Route Handler(서버 백엔드) + SHA-256 HMAC 세션 암호화 + HttpOnly 세션 쿠키 + XSS 방어 필터 적용
•
성능 최적화: 5분 단위 조회 캐시 정책 도입 (Google Sheets API의 트래픽 초과 및 로드 지연 방지)
[안티그래비티]학교업무 Hub