안티그래비티
초보자 교육자료

전체 커리큘럼

앞에서 만든 것을 뒤에서 계속 씁니다. 순서대로 따라오세요.

1~2장은 개념과 설치, 3~5장은 도구 연결, 6장은 앞의 모든 것을 합치는 실습입니다.

먼저, 무엇이 달라졌나

AI 개발 도구는 3세대를 거쳐 왔습니다. 안티그래비티는 3세대입니다.

그래서 비개발자도 결과물을 만들 수 있게 되었습니다. 대신 「잘 설명하는 능력」이 실력이 됩니다.

안티그래비티(Antigravity)란?

구글이 만든 ‘에이전트 우선(agent-first)’ 개발 도구입니다.

출처 Google Antigravity 공식 문서 (antigravity.google/docs)

에이전트(Agent)란 무엇인가

한 줄 정의 — 스스로 계획을 세우고 도구를 써서 일을 끝까지 해내는 AI 일꾼

에이전트 · GEMINI.md · Skill · MCP — 이 4가지가 이번 교육에서 배울 전부입니다. 하나씩 채워 넣으면 에이전트의 결과물이 좋아집니다.

안티그래비티의 두 가지 화면

에디터 뷰에서 결과물을 보고, 에이전트 매니저에서 일을 시킵니다.

GEMINI.md 를 설정해야 하는 이유

에이전트가 매 대화마다 자동으로 읽는 「우리 프로젝트 규정집」입니다.

규칙 파일은 어디에 두는가

적용 범위에 따라 두 곳으로 나뉩니다. 둘 다 있으면 프로젝트 규칙이 더 구체적으로 작동합니다.

규칙 파일 1개는 12,000자까지 쓸 수 있습니다. 길게 쓰기보다 짧고 분명하게 쓰는 편이 더 잘 지켜집니다.

스킬(Skill)이란 무엇인가

특정 업무를 「어떻게 하는지」 적어둔 작업 매뉴얼 폴더입니다.

my-skill/
  SKILL.md      ← 필수. 작업 방법을 적은 문서
  scripts/      ← 선택. 반복 작업용 스크립트
  examples/     ← 선택. 참고 예시
  resources/    ← 선택. 템플릿 · 이미지

---
name: brainstorming
description: 막연한 아이디어를 질문으로
  구조화된 설계로 바꿀 때 사용
---

# 진행 방법
1. 사용자에게 목적을 되묻는다 ...

정리 — 규칙 · 스킬 · MCP는 어떻게 다른가

세 가지를 헷갈리지 않는 것이 1장의 목표입니다.

설치하기 — 4단계

공식 사이트에서 내려받아 설치합니다. 다른 경로로 받지 마세요.

첫 프로젝트 만들기

프로젝트 = 에이전트가 들어갈 수 있는 「울타리」입니다. 이 안의 파일만 읽고 씁니다.

실행 모드 Local Mode = 지금 폴더에서 바로 작업  /  Worktree Mode = 복사본에서 안전하게 실험

첫 명령을 내려봅시다

에이전트가 파일 · 터미널 · 브라우저를 실제로 쓰는지 눈으로 확인하는 단계입니다.

이 폴더에 hello.html 파일을 만들어줘.
화면 가운데에 "안티그래비티 첫 실습" 이라고 크게 보이게 해줘.
다 만들면 브라우저로 직접 열어서 화면을 캡처해 보여줘.

왜 스킬을 따로 설치할까

기본 에이전트는 똑똑하지만 「우리 일의 요령」은 모릅니다. 스킬이 그 요령을 채워 줍니다.

스킬 설치 — 명령 한 줄

터미널에 아래 명령을 붙여넣고 Enter 를 누르세요.

npx skills add https://github.com/anthropics/skills --skill canvas-design

전역 설정 vs 지역(프로젝트) 설정

같은 스킬을 어디에 두느냐에 따라 적용 범위가 달라집니다.

처음에는 전역으로 설치해 쓰다가, 팀과 공유할 스킬만 프로젝트로 옮기는 방식을 권합니다.

스킬 검색 예제 — canvas-design

원하는 스킬을 검색한 후, 상세 페이지의 설치 명령을 복사해서 사용합니다.

03 · 설치한 스킬을 대화하듯 사용하기

스킬 이름을 부르고, 원하는 화면을 자세히 설명할수록 결과가 좋아집니다.

[canvas-design](slashCommand;canvas-design)
[Role & Persona]
당신은 세계적인 수준의 UI/UX 디자이너이자 수석 프론트엔드 엔지니어입니다.
사용자 경험을 극대화하면서도 심미적으로 뛰어난 웹 인터페이스를 설계하고, 이를 실제 코드로 구현하기 좋은 구조로 기획하는 데 탁월한 능력을 가지고 있습니다.

[Core Task]
'AI 바이브 코딩(Vibe Coding) 개발자를 위한 통합 에이전트 대시보드'의 메인 화면을 캔버스로 디자인하세요.
단순한 레이아웃 구성을 넘어, 실제 작동할 것 같은 정교한 디테일과 인터랙션 요소가 시각적으로 분명하게 드러나야 합니다.

[Tech Stack & Environment (Visual Tone)]
- Framework: React, Vite 기반의 SPA 느낌
- Styling: Tailwind CSS의 유틸리티 클래스 기반 디자인 시스템 적용 (4배수 여백 규칙)
- UI Components: shadcn/ui 스타일의 미니멀하고 직관적이며 접근성 높은 컴포넌트 룩앤필

[Design System & Principles]
1. Color Palette: 세련된 다크 모드(Deep Midnight Blue & Slate 계열)를 배경으로 사용하고, Primary 컬러로 형광빛이 도는 블루(#3B82F6)와 퍼플(#8B5CF6) 그라데이션을 포인트로 활용하세요.
2. Typography: 가독성이 뛰어난 모던 산세리프 폰트를 사용하고, 정보의 위계(Hierarchy)를 폰트 크기, 굵기, 색상 대비(Contrast)로 명확히 구분하세요.
3. Layout Structure:
   - 좌측: 얇고 미니멀한 사이드바 (프로젝트, 설정, AI 에이전트 라우팅, 로컬 브라우저 스토리지 상태 아이콘)
   - 중앙 (메인 캔버스): Split View 형태의 실시간 코드 에디터 및 AI 프롬프트 채팅 인터페이스
   - 우측 또는 하단: 리소스 사용량 및 AI 모델(Claude 4.5 등) API 상태를 보여주는 플로팅 패널
4. Visual Details:
   - 카드 및 정보 패널에는 미세한 Glassmorphism 효과(반투명 배경 및 블러)와 1px의 은은한 테두리(border-white/10)를 적용하세요.
   - 주요 액션 버튼(CTA)과 인터랙티브 요소에는 Hover 상태를 암시하는 부드러운 글로우(Glow) 효과를 배치하세요.

[Specific Output Requirements]
- 화면의 빈 공간을 단순한 여백이 아닌 '의도된 공간(White Space)'으로 활용하여 복잡한 개발 도구임에도 깔끔한 인상을 주어야 합니다.
- 데이터 시각화 요소(예: 최근 프로젝트 기여도, 시간대별 생산성 패턴 등)를 스파크라인(Sparkline)이나 미니멀한 그래프 형태로 반드시 1개 이상 포함하여 전문성을 높여주세요.

이미지 생성 결과

스킬 등록 후 사용 — slack-gif-creator

설치 → 새 대화에서 한국어로 요청 → 결과물 생성까지의 흐름입니다.

나만의 스킬 등록하기 — prd-writer

요구사항 정의서(PRD)를 순서대로 물어보며 작성해 주는 스킬을 전역으로 등록합니다.

아래의 내용을 전역 스킬로 등록해줘.  # skill명 : prd-writer
- 아래 -
너는 전문 IT 서비스 기획자(PO)야.
나는 PRD(요구사항 정의서)를 작성하려고 해.

# 절대 규칙 (반드시 지켜야 함)
- 아래 8개 항목을 순서대로 하나씩만 질문해.
- 내가 "다음 진행"이라고 말하기 전까지는 절대로 다음 항목으로 넘어가지 마.
- 현재 항목의 질문에만 집중하고, 내 답변을 바탕으로 해당 항목을 정리해줘.
- 항목이 정리되면 "다음 진행이라고 말씀해 주시면 다음 항목으로 넘어가겠습니다."라고 안내해.

# PRD 작성 순서 (이 순서대로 진행)
1. 프로젝트 개요
2. 사용자 시나리오
3. 핵심 기능 목록
4. 기술 스택
5. 화면 구성
6. 상세 기능 명세
7. 디자인 가이드
8. 제약 사항

# 시작
지금 바로 첫 번째 항목인 **프로젝트 개요**부터 시작해줘.
앱 이름, 한 줄 설명, 서비스 유형(개인용/팀용 등), 난이도(초급/중급/고급)를 정하기 위한 질문을 해줘.

/learn 명령어 한눈에 보기

설치가 끝나면 에이전트 입력창에서 바로 쓸 수 있습니다.

설치된 스킬은 이름 앞에 「/」를 붙여 부르거나, 그냥 한국어로 설명만 해도 에이전트가 알아서 골라 씁니다.

MCP 란 무엇인가

Model Context Protocol — AI와 외부 서비스를 잇는 「표준 규격」입니다.

안티그래비티에는 MCP 서버 목록(스토어)이 내장되어 있어, 유명한 서비스는 클릭 몇 번으로 연결됩니다.

구글 Stitch 란

말로 설명하면 앱 · 웹 화면 디자인을 만들어 주는 구글의 AI 디자인 도구입니다.

① Stitch API 키 발급받기

안티그래비티가 내 Stitch 계정에 접근하려면 열쇠(API 키)가 필요합니다.

출처 Google Codelabs — Design-to-Code with Antigravity and Stitch MCP

② 안티그래비티에 Stitch 연결하기

에이전트 매니저의 MCP 서버 목록에서 클릭 몇 번이면 끝납니다.

③ 연결이 잘 됐는지 확인하기

List my Stitch projects.
(또는 한국어로) 내 Stitch 프로젝트 목록을 보여줘.

목록이 비어 있다고 나오면 연결은 됐지만 디자인이 없는 것입니다. Stitch에서 디자인을 하나 만들어 보세요.

참고 — 직접 설정 파일을 여는 방법

목록에 없는 MCP 서버를 붙이거나, 설정을 확인하고 싶을 때만 보면 됩니다.

{
  "mcpServers": {
    "my-remote-server": {
      "serverUrl": "https://api.example.com/mcp/",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

헷갈리기 쉬운 부분부터 정리

안티그래비티 속의 Gemini 와, 내 앱이 쓰는 Gemini 는 서로 다른 통로입니다.

API 키 발급 — 4단계

2분이면 끝납니다.

출처 Google AI for Developers — Using Gemini API keys

어떤 모델을 고를까

모델 이름은 코드에 한 줄로 적습니다. 바꾸기도 쉽습니다.

모델 이름은 계속 새로 나옵니다. 확실하지 않을 땐 에이전트에게 “지금 쓸 수 있는 최신 모델로 바꿔줘” 라고 하세요.
출처 ai.google.dev/gemini-api/docs/models (2026년 9월 기준)

API 키 보안 3원칙

이 장에서 가장 중요한 부분입니다. 키가 새면 요금이 나에게 청구됩니다.

6장 실습의 프롬프트에는 이 구조가 이미 반영되어 있습니다. 그대로 붙여넣기만 하면 됩니다.

무엇을 만드나

한 페이지짜리 웹 프로그램입니다.

동작 흐름

시작 전 최종 점검

5개가 모두 준비되었는지 확인하세요. 하나라도 빠지면 중간에 막힙니다.

체크가 안 된 항목이 있으면 해당 장으로 돌아가 먼저 채우고 오세요.