| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |
- GPT
- ChatGPT
- GTM
- YouTrack
- Antigravity
- AI 에이전트
- GA4
- Gemini
- Passkey
- 프롬프트 엔지니어링
- 가상시나리오
- AI
- 프론트엔드
- 생산성혁명
- swagger
- AI네이티브
- 위고비
- SEO
- 이커머스트렌드
- geo
- 패스키
- 실리콘밸리워크플로우
- AI에이전트
- 생산성
- 예스24
- Github Copilot
- 커리어성장
- github
- 마운자로
- Today
- Total
Beyond Frontend
Antigravity Vibe Coding Guide 본문
스킬(Skill)과 MCP로 완성하는 바이브코딩 입문
1. 패러다임의 전환: '코드 작성기'에서 '지능형 에이전트'로
우리는 지금까지 AI가 코드를 한 줄씩 자동으로 완성해 주는 도구에 익숙해져 있었습니다. 하지만 구글의 안티그래비티(Antigravity)는 차원이 다릅니다. 단순히 타이핑을 도와주는 조력자를 넘어, 스스로 계획을 세우고 실행하며 검증까지 마치는 '에이전트 퍼스트(Agent-first)' 환경을 제공합니다.
💡 바이브코딩의 핵심: 컨텍스트(문맥) 최적화 전략
에이전트와 협업할 때 가장 큰 장애물은 AI가 너무 많은 정보를 읽어 '환각(Hallucination)'을 일으키는 것입니다. 수석 디자이너로서 제안하는 첫 번째 전략은 저장소 분리(Multi-repo)입니다.
- 추천 방식: 프로젝트나 도메인별로 저장소를 철저히 분리하세요.
- 이유: 예를 들어 레거시(.NET 4.5.2 / ES5) 코드와 신규 솔루션(.NET 10 / ES6) 코드가 섞이지 않게 차단함으로써, AI가 엉뚱한 문법을 참조하지 않도록 문맥을 엄격히 통제하기 위함입니다.

2. AI에게 전문성을 가르치는 '스킬(Skill)'
스킬(Skill)은 AI 에이전트에게 매번 같은 내용을 지시(Prompting)하는 번거로움을 없애고, 특정 작업을 수행할 수 있는 '실행 권한'과 '방법'을 영구적으로 가르치는 것(Teaching)을 의미합니다.
🛠️ 스킬의 청사진 (The Blueprint)
스킬은 프로젝트 내의 .agent/skills/ 폴더에 TypeScript나 Bash 스크립트 형태로 정의됩니다. 이는 에이전트가 필요할 때마다 즉시 꺼내 쓰는 숙련된 기술자의 도구 상자와 같습니다.
실무 시나리오 기반 핵심 이익
단순한 코딩 보조를 넘어, 팀의 컨벤션을 강제하고 생산성을 높이는 스킬의 위력을 확인해 보세요.
| 스킬 명칭 | 주요 기능 및 시나리오 | 핵심 이익 (Benefit) |
| 레거시 및 접근성 검사 | 마이그레이션 시 신규 코드에 jQuery 패턴이 남아있는지, 웹 접근성(a11y) 표준을 준수하는지 자동 검사 | 품질 보증: ES5/jQuery 레거시 탈피 및 최신 프레임워크 표준 준수 강제 |
| 로컬 테스트 스킬 | 내부 개발 망의 테스트 서버로 코드를 즉시 배포하고 API 응답 상태를 실시간 확인 | 피드백 가속: 배포와 검증 과정을 자동화하여 개발 루프 시간 획기적 단축 |
3. 외부 데이터의 통로, MCP(Model Context Protocol)
MCP(Model Context Protocol)는 에디터라는 갇힌 공간을 벗어나 AI를 외부 시스템(DB, 브라우저, 업무 도구 등)과 연결해 주는 '지능형 USB-C 포트'입니다.
🔌 연결 방식 가이드
- MCP Store: 안티그래비티 패널의 메뉴에서 필요한 서버를 쇼핑하듯 즉시 설치할 수 있습니다.
- 커스텀 서버: mcp_config.json 설정을 통해 사내 데이터베이스나 고유 시스템을 안전하게 연결합니다.
현장감 넘치는 MCP 활용 예시
- Browser MCP: "경쟁사 베스트셀러 페이지의 UI 구조를 분석해 줘."라고 요청하세요. AI가 직접 브라우저를 띄워 렌더링 된 구조를 읽고, 우리 사이트에 적용할 개선안을 제안합니다.
- Database MCP (MSSQL 지원): DB 스키마를 실시간으로 읽어옵니다. AI가 API 로직을 짤 때 '재고', '가격 정보' 등 실제 컬럼명을 오타 없이 정확하게 매핑하여 런타임 에러를 방지합니다.
- GitHub/Jira MCP: 코드 내에 // TODO: 이미지 서버 최적화 필요라는 주석만 남겨도, AI가 이를 감지해 자동으로 티켓을 생성하고 담당자를 할당하는 워크플로우를 완성합니다.

4. 에이전트를 조종하는 조종석: .md 파일 백배 활용법
바이브코딩에서 마크다운(.md) 파일은 단순한 문서가 아닙니다. AI의 사고 과정을 제어하고 통제하는 '전략적 작업 지시서'입니다.
📋 3대 필수 문서 및 워크플로우
- [ ] PRD.md (제품 요구사항 정의서)
- 역할: 기획 배경, 필수 기능, SEO 최적화(메타 태그 등) 요구사항 명세.
- 타이밍: 프로젝트의 '북극성' 역할을 하도록 시작 시점에 가장 먼저 작성합니다.
- [ ] implementation_plan.md (구현 계획서) ── 중요!
- 전략: 무작정 코딩을 시키지 마세요. "요구사항을 바탕으로 계획서를 먼저 써줘"라고 지시한 후, 사람이 이를 검토 및 승인(Review/Confirm)해야 합니다. 잘못된 설계를 사전에 차단하는 가장 강력한 필터입니다.
- [ ] SUMMARY.md (세션 요약 파일)
- 역할: 대화가 길어질 때 발생하는 문맥 소실과 토큰 낭비를 막는 '앵커'.
- 꿀팁: 기능 하나가 완성될 때마다 빈번하게 요약을 업데이트하세요. 다음 작업 시 이 요약본만 전달하면 AI가 이전 맥락을 완벽하게 이어받습니다.

5. 성공적인 바이브코딩을 위한 명심보감 (Best Practices)
기획이 코드보다 앞서야 합니다: 빈 화면에 코드를 요청하기 전, .md 문서를 다듬는 데 공을 들이세요. 설계가 정교할수록 AI의 결과물은 완벽해집니다.

전략적으로 통제권을 유지하세요: AI 에이전트가 오류 해결을 위해 터미널에서 '무한 루프'를 돌며 토큰을 낭비할 수 있습니다. "테스트는 내가 직접 할 테니 코딩 계획만 세워줘"와 같이 실행 권한을 명확히 관리하는 지혜가 필요합니다.
원자 단위로 작게 지시하세요: 한 번에 거대한 기능을 요구하지 마세요. '리스트 출력 → 페이징 처리 → 검색 필터' 순으로 단계를 쪼개어 하나씩 완성하고, 각 단계 끝에서 반드시 SUMMARY.md로 정리하는 습관을 가져야 합니다.

6. 마무리: 당신은 이제 AI 오케스트라의 지휘자입니다
스킬로 전문성을 부여하고, MCP로 외부 세계와 연결하며, 마크다운 문서로 완벽하게 통제할 때 바이브코딩의 진정한 생산성 혁신이 시작됩니다. AI는 당신의 설계를 현실로 만드는 가장 충실한 실행자가 될 것입니다.
📌 핵심 개념 최종 요약
| 구분 | 주요 역할 | 핵심 도구/파일 | 기대 효과 |
| 운영 체제 | 에이전트 중심 개발 환경 | 안티그래비티 플랫폼 | 지휘 중심의 개발 패러다임 전환 |
| 행동(Skill) | 반복 작업 및 검증 자동화 | .agent/skills/ | 레거시 방지 및 코딩 표준 강제 |
| 연결(MCP) | 외부 시스템 및 데이터 연동 | mcp_config.json | 실시간 데이터(DB, 웹) 기반 정확도 향상 |
| 지시(Doc) | 작업 방향 및 문맥 관리 | PRD, Plan, SUMMARY.md | 설계 결함 사전 차단 및 토큰 절감 |
'Frontend Essentials' 카테고리의 다른 글
| AI 판독 가능한 웹 (0) | 2026.03.07 |
|---|---|
| Swagger to Postman (0) | 2026.03.01 |
| Antigravity Tips (0) | 2026.02.22 |
| Antigravity Skills (0) | 2026.02.19 |
| Antigravity & VS Code 비교 분석 (0) | 2026.02.18 |