Google Antigravity와 Claude Code의 만남: 새로운 개발 워크플로우 발견기
원문
I Tried Claude Code In Google Antigravity (And Discovered a New Insane Workflow)
서론: 두 AI 코딩 도구의 협업 실험
과연 두 개의 AI 코딩 도구가 하나의 프로젝트에서 협업할 수 있을까? 이는 언뜻 보기에 과도한 시도처럼 보일 수 있다. 하지만 최고의 터미널 코딩 도구와 최신 AI 코딩 IDE를 결합하면 어떤 가능성이 열릴지 궁금했다. Joe Njenga는 바로 이 질문에 답하기 위해 실험을 진행했고, 그 결과 놀라운 빌드 속도를 경험하게 되었다.
물론 과정이 완벽하지만은 않았다. 몇 가지 문제점도 발견되었고, 두 도구 중 어느 것이 빠른 버그 수정에 더 신뢰할 수 있는지도 명확해졌다. 이 실험은 각 도구의 강점을 활용하여 빠를 뿐만 아니라 의미 있는 결과를 제공하는 궁극의 코딩 조합을 만들려는 계획적인 시도였다.
실험 환경 설정
이번 실험에서 사용된 도구는 Google Antigravity의 Gemini 3 Pro 모델과 Claude Code의 Claude Sonnet 4.5였다. 이 아이디어는 거의 일주일 동안 Google Antigravity를 테스트한 후에 떠올랐다. 일상적인 워크플로우에서 Claude Code를 사용하는 열렬한 사용자로서, Google Antigravity 내부에서 Claude Code를 실행하여 하나의 프로젝트에서 협업하게 만들면 어떨까 하는 생각이 든 것이다.
전략은 명확했다. Gemini Pro를 실행하는 Google Antigravity는 백엔드 작업에 이상적일 것이고, Sonnet 4.5를 실행하는 Claude Code는 프론트엔드 빌드를 담당할 것이다. 하지만 더 큰 질문이 있었다. 대부분의 워크플로우에서 Claude Code와 함께 VS Code를 사용하는데, Google Antigravity가 VS Code를 대체할 수 있을까?
테스트 프로젝트: 도서 추천 앱
두 도구를 제대로 테스트하려면 실용적인 프로젝트가 필요했다. Gemini API를 사용하는 도서 추천 앱이 완벽한 프로젝트로 선정되었다. 최근 AI 코딩에 도움이 되는 최고의 책들을 연구하고 있었기 때문에, 이 주제는 매우 적절했다.
백엔드는 Gemini를 사용하여 도서 추천을 생성하는 Node.js Express API로 구성될 예정이었다. 하나의 엔드포인트, 간단한 입력, JSON 출력만으로 충분했다. 프론트엔드는 바닐라 JavaScript와 CSS를 사용한 깔끔한 HTML 페이지로 계획되었다. 선호도를 입력할 텍스트 필드, 추천을 받기 위한 버튼, 그리고 제목, 저자, 추천 이유를 포함한 세 권의 책을 표시할 영역이 필요했다.
각 도구는 자체 폴더에서 작업할 것이었다. Antigravity는 백엔드 폴더에서, Claude Code는 프론트엔드 폴더에서 동일한 프로젝트를 병렬로 개발하는 방식이었다. 흥미롭게도 이 방식은 예상을 뛰어넘을 정도로 잘 작동했다.
워크플로우 구축 과정
Google Antigravity의 에디터 레이아웃은 깔끔하고 직관적이었다. 터미널을 열고 프로젝트를 위한 폴더 antigravity-claude-code-combo를 생성했다. Google Antigravity의 에디터 레이아웃은 세 가지 주요 영역을 보여준다. 중앙의 코딩 영역, 오른쪽 끝의 에이전트 패널, 그리고 하단의 터미널이다.
에이전트 패널에서는 워크스페이스를 선택하고, 계획 모드 또는 빠른 모드 중에서 선택하며, 모델을 선택할 수 있다. 이번 테스트에서는 Gemini 3 Pro를 선택했다.
프로젝트 폴더 내에서 Claude Code를 실행했다. Claude Code는 기본 경고와 함께 이 폴더에서 작업할 것인지 물었고, 확인을 클릭하자 Google Antigravity 내부에서 Claude Code가 로드되었다. 상태 확인 결과 모든 것이 원활하게 실행되고 있었다. Claude Code는 버전 세부 정보, 세션 ID, 그리고 사용 중인 모델이 Claude Sonnet 4.5임을 보여주었다.
이 시점에서 Google Antigravity와 VS Code의 유사성이 명백해졌다. Visual Studio Code를 기반으로 구축되었기 때문에 레이아웃, 터미널 경험, 컨트롤이 동일했다.
역할 분담 및 프로젝트 구조
각 도구에 대한 프롬프트는 구체적으로 작성되었다. Google Antigravity를 위한 백엔드 프롬프트는 Gemini를 사용하여 책을 추천하는 Node.js Express API를 구축하고, 사용자 선호도를 입력으로 받아 세 권의 책 추천 데이터를 JSON 형식으로 출력하는 하나의 엔드포인트 POST /api/recommendations를 생성하라는 내용이었다. CORS를 활성화하고 포트 3000에서 실행하도록 했다.
Claude Code를 위한 프론트엔드 프롬프트는 HTML, 바닐라 JavaScript, CSS를 사용하여 간단한 도서 추천 페이지를 만들라는 것이었다. 사용자 선호도를 입력할 텍스트 필드, 추천을 받기 위한 버튼, 제목, 저자, 이유를 보여주는 세 권의 책을 표시할 영역을 포함한 하나의 HTML 파일을 만들도록 했다. 버튼을 클릭하면 백엔드 API로 POST 요청을 보내고 결과를 표시해야 했다.
메인 프로젝트 폴더 ase-book-app을 사이드바에서 생성했다. 그런 다음 각 도구가 자체 폴더 내에서 작업할 수 있도록 두 프롬프트를 구체적인 지침으로 업데이트했다. Google Antigravity에는 “이 워크스페이스 내의 AI-software-engineer-book-app이라는 디렉토리를 사용하고 이 프로젝트를 위한 backend라는 폴더를 생성하세요”라고 지시했고, Claude Code에는 “이 워크스페이스 내의 AI-software-engineer-book-app이라는 디렉토리를 사용하고 이 프로젝트를 위한 frontend라는 폴더를 생성하세요”라고 지시했다.
두 프롬프트를 동시에 전송했다. Claude Code는 즉시 프론트엔드 폴더를 생성한 반면, Google Antigravity는 사고 모드로 들어가 상세한 작업 목록과 함께 구현 계획을 생성했다.
개발 과정의 차이점
Claude Code의 작업 속도는 놀라웠다. 몇 초 만에 프론트엔드 폴더를 생성하고 코드 생성을 시작했다. 터미널은 HTML 구조를 구축하고, JavaScript 로직을 추가하고, CSS로 모든 것을 스타일링하는 과정을 명확하게 보여주었다.
Google Antigravity는 다른 접근 방식을 취했다. 먼저 구현 계획을 표시하고, 작업을 체크리스트로 분류한 다음 실행을 시작했다. 계획 모드는 코딩을 시작하기 전에 정확히 무엇을 할 것인지 볼 수 있다는 것을 의미했다. 작업 목록에는 프로젝트 설정, Express 서버 생성, Gemini API 통합 구현, 추천 엔드포인트 추가, CORS 활성화가 포함되어 있었다.
Claude Code는 몇 분 만에 프론트엔드를 완성했다. 모든 것이 포함된 단일 index.html 파일을 생성했다. 깔끔한 HTML 구조, fetch 로직을 위한 바닐라 JavaScript, 그리고 스타일링을 위한 CSS가 모두 들어 있었다. 코드에는 사용자 선호도를 위한 텍스트 입력 필드, “추천 받기”라는 레이블이 붙은 버튼, 제목, 저자, 이유를 보여주는 세 권의 책 결과를 표시할 영역이 포함되어 있었다.
파일을 검토했을 때 모든 것이 견고해 보였다. JavaScript는 http://localhost:3000/api/recommendations로의 POST 요청을 처리하고, 사용자의 입력을 선호도로 보내며, 응답 데이터를 표시했다. Claude Code는 “완료했습니다. frontend/index.html에 도서 추천 페이지를 생성했습니다. 브라우저에서 열어 테스트할 수 있습니다”라는 메시지를 제공했다. 심지어 기능과 fetch 로직이 작동하는 방식에 대한 기술적 세부 사항도 제공했다.
Antigravity로 돌아가보니 체크리스트가 실시간으로 업데이트되고 있었다. 프로젝트 설정 완료, index.js 파일 생성 중, package.json 생성 중, Node.js 모듈 설치 중 등의 상태가 표시되었다. 각 파일이 생성될 때마다 수락을 클릭해야 했다.
몇 분 내에 백엔드 구현이 완료되었다. 작업 목록은 모든 항목에 체크 표시를 보여주었다. Express 서버가 구성되었고, Gemini API 통합이 준비되었으며, 적절한 오류 처리와 함께 /api/recommendations 엔드포인트가 구현되었다. CORS가 활성화되었고, 서버는 포트 3000에서 실행되도록 설정되었다.
코드 품질 검증
테스트하기 전에 두 코드베이스를 검토했다. 프론트엔드 코드는 깔끔하고 직관적이었다. 불필요한 복잡성이 없었고, UI를 기능적으로 만드는 데 필요한 것만 포함되어 있었다. 백엔드 코드는 잘 구조화되어 있었다. API 키를 위한 환경 변수, 적절한 요청 검증, 명확한 오류 메시지, 깔끔한 응답 형식이 모두 갖춰져 있었다.
두 도구 모두 별다른 수정 없이 프로덕션 준비가 된 코드를 제공했다는 점이 인상적이었다.
테스트 및 디버깅 과정
먼저 프론트엔드부터 시작했다. Claude Code에 “프론트엔드를 테스트하기 위해 라이브 서버를 실행할 수 있나요?”라고 요청했다. 즉시 명령을 준비하고 실행했다. 처음에는 작은 포트 충돌이 나타났지만, Claude Code가 즉시 포착하고 개입 없이 수정했다. 라이브 서버가 열리고 앱 미리보기가 로드되었다.
백엔드의 경우 Google Antigravity에 “백엔드 서버를 실행하여 테스트할 수 있나요?”라고 요청했다. Antigravity는 서버를 시작하기 전에 백엔드 파일을 분석하기 시작했다. 종속성을 확인하고, 구성을 검증한 다음 Express 서버를 실행하려고 시도했다.
서버는 시작되었지만 테스트 요청이 즉시 실패했다. Google Antigravity는 명확한 메시지를 제공했다. “백엔드 서버를 성공적으로 실행했지만, backend.env 파일의 Gemini API 키가 ‘your_api_key_here’로 설정되어 있어 테스트 요청이 실패했습니다.”
실제 API 키 없이는 백엔드가 Gemini에 연결할 수 없었다. Google AI Studio에서 키를 생성하고, Google Cloud Console에서 프로젝트를 설정하고, .env 파일을 실제 키로 업데이트해야 했다.
키를 생성하고 파일을 업데이트한 후 Antigravity에 다시 요청했다. “Gemini API 키를 업데이트했습니다. 다시 테스트할 수 있나요?” Antigravity는 자동으로 다양한 Gemini 모델 간에 전환하기 시작했다. Gemini Pro, Gemini 2.0 Flash 등을 테스트하여 사용 가능한 모델을 찾았다. 여러 시도와 모델 전환 끝에 마침내 연결되었다.
“백엔드가 가동되고 실행 중이며, 테스트 POST 요청이 성공했습니다.” 이제 두 서버가 모두 실행되고 있었다. 프론트엔드는 라이브 서버에서, 백엔드는 localhost 포트 3000에서 실행되고 있었다.
오류 수정: Claude Code vs Google Antigravity
앱 미리보기로 돌아가서 입력 필드에 “AI engineering”을 입력했다. “추천 받기”를 클릭했지만 백엔드로의 fetch 요청이 실패했다. 이때 Claude Code의 디버깅 강점이 명확해졌다.
브라우저 콘솔의 오류 스크린샷을 찍어 Claude Code로 드래그하면서 “해당 함수에서 fetch가 실패합니다. 백엔드 문제인가요, 프론트엔드 문제인가요?”라는 메시지를 함께 보냈다.
Claude Code는 스크린샷을 즉시 분석했다. 오류에 대한 상세한 분석을 제공하고, fetch 로직의 정확한 문제를 식별했다. Google Antigravity도 도움이 될 수 있는지 테스트하기 위해 터미널 오류 메시지를 복사하여 채팅에 붙여넣었다. Antigravity도 잘 분석하고 문제를 정확하게 식별했다.
하지만 디버깅에는 Claude Code가 더 선호되었다. 더 정확하고 실행 가능한 수정 사항을 더 빠르게 제공했다. Claude Code에 “이것을 수정하고 업데이트하세요”라고 말했다. Antigravity 쪽에서는 두 도구가 동시에 같은 문제를 작업하는 것을 피하기 위해 업데이트를 중지했다.
Claude Code는 몇 초 만에 파일을 업데이트했다. 문제가 무엇이었는지, 무엇이 원인이었는지, 수정이 어떻게 작동하는지를 설명하는 명확한 메시지를 제공했다. 몇 번의 반복 후, “완벽합니다. 문제를 수정하고 백엔드 서버를 재시작했습니다”라는 또 다른 메시지를 보냈다.
Claude Code가 두 서버를 모두 인수했다. 프론트엔드와 백엔드가 이제 Claude Code의 터미널에서 실행되고 있었다. 에디터 하단에서 두 서버가 활성화되었음을 확인하는 두 개의 백그라운드 작업 메시지를 볼 수 있었다.
앱 미리보기로 돌아가서 다시 “AI engineering”을 입력했다. “추천 받기”를 클릭했다. 세 권의 책 추천이 나타났다. 앱이 완전히 작동했다. Google Antigravity와 Claude Code를 사용하여 각각 자체 폴더에서 작업하고, 다른 역할을 처리하며, 병렬로 결과를 제공하는 방식으로 구축한 것이다.
최종 평가 및 통찰
이 실험에서 가장 두드러진 특징은 병렬 개발 워크플로우였다. Google Antigravity는 백엔드 작업에 적합했고, Claude Code는 프론트엔드와 디버깅에 탁월했다. 빠른 실행, 깔끔한 코드, 그리고 오류를 수정할 때의 정밀함이 Claude Code의 강점이었다.
계획 모드는 복잡한 작업을 관리 가능한 단계로 분해했다. 코드가 작성되기 전에 구현 계획을 볼 수 있었다. 백엔드 API, 데이터베이스 통합, 서버 측 로직의 경우 Gemini Pro를 사용하는 Antigravity가 견고한 결과를 제공했다.
Google Antigravity와 Claude Code의 조합은 둘 중 하나만 사용하는 것보다 더 빠르고 효율적인 워크플로우를 만들어냈다. 백엔드-프론트엔드 분할은 각 도구의 강점을 활용했다. Gemini Pro는 서버 로직을 처리했고, Claude Sonnet 4.5는 인터페이스를 구축하고 문제를 디버깅했다.
간단한 프로젝트에는 과도할 수 있다는 점은 인정해야 한다. 하지만 AI 코딩 도구로 가능한 것의 경계를 확장하는 데 관심이 있다면, 이 조합을 시도해볼 가치가 있다. 각 도구가 자신의 영역에서 최선을 다하고, 함께 작동하여 어느 하나만으로는 달성하기 어려운 결과를 만들어내는 워크플로우는 미래의 개발 방식에 대한 흥미로운 통찰을 제공한다.
이 실험은 단순히 두 도구를 동시에 사용하는 것 이상의 의미를 갖는다. 각 AI 도구의 특성을 이해하고, 적재적소에 활용하며, 그들의 강점을 결합하여 시너지를 창출하는 것이 핵심이다. VS Code를 대체할 수 있을까라는 초기 질문에 대한 답은 상황에 따라 다르지만, 적어도 특정 시나리오에서는 Google Antigravity가 충분히 강력한 대안이 될 수 있음을 확인했다.
원문 출처: Joe Njenga, “I Tried Claude Code In Google Antigravity (And Discovered a New Insane Workflow)”, Medium, 2025년 12월 15일