Google Gemini와 안티 그래비티(Anti-Gravity)를 활용한 완벽한 MCP 서버 세팅 가이드
본 포스팅은 성공지식백과 유튜브 채널의 [(구글 AI 코딩 신 등극) 제미나이가 미쳐 날뛰는 MCP 세팅법, 안티그래비티 업그레이드] 영상을 기반으로 작성된 요약 및 실전 세팅 가이드입니다.
1. 안티 그래비티와 MCP 서버의 필요성
최근 AI를 활용한 ‘바이브 코딩(Vibe Coding)’이 대세가 되면서 커서(Cursor)나 윈드서프(Windsurf) 같은 AI IDE가 주목받고 있습니다. 하지만 구글의 제미나이(Gemini 1.5 Pro) 모델을 활용하는 안티 그래비티(Anti-Gravity)는 강력한 성능으로 더 높은 퀄리티의 결과물을 만들어냅니다.
AI가 최상의 결과물을 내기 위해서는 컨텍스트, 로직, 디버깅이라는 세 가지 요소가 필수적입니다. 이를 AI에게 효과적으로 전달하고 강제하기 위해 중간 다리 역할을 하는 MCP(Model Context Protocol) 서버 3가지를 세팅하는 방법을 알아보겠습니다.
2. 1단계: Context 7 (디자인 및 기술 스택 주입)
단순한 프롬프트 입력만으로는 AI가 최신 프레임워크나 디자인 시스템을 제대로 반영하기 어렵습니다. Context 7 MCP 서버를 사용하면 Next.js, Mantine과 같은 공식 문서를 AI의 컨텍스트에 직접 주입할 수 있습니다.
세팅 방법
- [Context 7 웹사이트]에 접속하여 Google/GitHub로 로그인합니다.
API Key를 생성하고 복사해 둡니다 (창을 닫으면 다시 볼 수 없으니 주의하세요).- 안티 그래비티의 우측 Agent 탭 -> 설정(점 3개) -> MCP Servers -> Manage MCP Servers로 이동합니다.
Config 파일을 열고 제공된 JSON 구성 코드에 발급받은 API 키를 넣고 저장(Ctrl+S)합니다.
💡 프롬프트 팁: “Context에서 다큐먼트들을 확인해서 뒤에 프롬프트를 실행해 줘”라고 입력하여 문서를 참조하도록 유도합니다.
3. 2단계: Sequential Thinking (로직 고도화)
최근 AI 모델들의 성능이 비약적으로 상승한 이유는 ‘추론(Thinking)’을 하기 때문입니다. Sequential Thinking MCP 서버는 AI가 스스로 복합적이고 단계적인 사고를 하도록 강제하여 결과물의 디테일을 높여줍니다.
세팅 방법
- 안티 그래비티의 MCP 서버 Config 파일에 Sequential Thinking 코드를 추가합니다.
- 기존 Context 7 코드의 끝에 쉼표(
,)를 찍고 코드를 덧붙여 줍니다. (안티 그래비티의 자동완성Tab기능을 활용하면 편리합니다.)
💡 프롬프트 팁: 프롬프트 마지막에 “Sequential Thinking을 사용해서 디테일을 놓치지 말고 만들어 줘” 라는 문장을 추가하면 모델이 툴을 호출하여 스스로 생각하며 코드를 작성합니다.
4. 3단계: TestSprite (자동 디버깅 완결판)
코드를 잘 짜는 것만큼 중요한 것이 제대로 작동하게 만드는 디버깅입니다. TestSprite MCP 서버는 기획 의도에 맞게 코드가 동작하는지 자동으로 테스트하고 결함까지 수정해 주는 강력한 툴입니다.
세팅 방법
- TestSprite에 가입 후 스타터 플랜 무료 체험을 신청하여 넉넉한 크레딧(550 크레딧)을 확보합니다.
Test Locally MCP탭에서 API Key를 발급받습니다.- 앞선 과정과 동일하게 안티 그래비티의 Config 파일에 코드를 추가하고 API 키를 입력합니다.
🚨 에러 발생 시 트러블슈팅 (환경 변수 Path 추가)
TestSprite 서버 연동 중 에러가 발생한다면, 운영체제의 Path 값을 못 찾았을 확률이 높습니다.
- 윈도우 PowerShell을 실행합니다.
- 특정 명령어를 입력해 긴 폴더 경로(Path) 값을 추출합니다.
- 안티 그래비티 MCP Config 파일 내 해당 서버의
env설정 하단에"path": "복사한 경로"를 추가해 주면 에러가 해결됩니다.
디버깅 실행 방법
- AI에게 “이 웹사이트의 프론트엔드/백엔드 디버깅을 위해 테스트해야 할 리스트를 작성해 줘”라고 요청하여
텍스트 파일로 저장합니다. (이때 TestSprite는 잠시 비활성화해 둡니다.) - TestSprite를 실행하여 모드(Frontend/Backend/Codebase)를 선택하고 개발 서버 포트를 맞춘 뒤, 방금 만든 텍스트 파일을 업로드합니다.
- AI가 폴더를 생성하고 백그라운드에서 실시간으로 코드를 점검하며 버그를 수정합니다.
5. 꿀팁: AI 코딩 중 이미지 에셋 처리하기
바이브 코딩 중 이미지가 엑스박스로 깨지거나 생성에 실패하는 경우가 많습니다. 이때 당황하지 말고 AI에게 “현재 웹사이트에 필요한 이미지들의 리스트, 필요 사이즈, 생성 프롬프트를 알려줘”라고 요청하세요. AI가 만들어준 프롬프트를 안티 그래비티의 이미지 생성 도구에 붙여넣어 에셋을 다운로드한 후 프로젝트 폴더로 옮기면, 깔끔하고 완성도 높은 UI를 구성할 수 있습니다 (한 번에 5개씩 업로드 가능).
이 세 가지 MCP 서버(Context 7, Sequential Thinking, TestSprite)를 조합하면 기존 AI 코딩의 한계를 뛰어넘는 프로급 웹사이트를 구축할 수 있습니다. 지금 바로 안티 그래비티에 적용해 보세요!
댓글남기기