안녕하세요, 올리브입니다! 🫒 최근까지 제미나이(Gemini)와 안티그래비티(Antigravity) 조합으로 쾌적한 스펙 주도형(Spec-driven) 개발을 즐기고 계셨던 분들 많으시죠? 저 역시 시각적인 UI가 주는 안정감에 만족하고 있었는데요. 하지만 가끔은 에디터 창 안에서 내 손과 발이 되어 스스로 에러를 잡고 테스트까지 돌려주는 ‘자율주행’ 에이전트가 아쉬울 때가 있습니다. 이런 갈증을 완벽하게 해결하는 방법, 지금부터 제 방식대로 완벽하게 짚어드릴게요!
1단계: Claude Code vs. Gemini + Antigravity, 무엇이 다를까?
생각은 코드로, 일상은 디자인으로 풀어내는 우리 같은 ‘디자이너 + 개발자’에게 작업 환경은 매우 중요합니다. 두 가지 툴은 접근 방식부터 완전히 다릅니다.
- Gemini + Antigravity: 체계적인 계획을 세우고 사용자의 검토를 거치는 방식입니다. 브라우저 목업 등 시각적인 피드백이 강력하죠.
- Claude Code: 터미널(CLI) 네이티브 환경에서 작동합니다.
VS Code창을 벗어나지 않고, 명령어 한 줄로 파일 분석부터 수정, 테스트, Git 커밋까지 스스로 해내는 극강의 자율성을 보여줍니다. 불필요한 장식을 걷어낸 미니멀리즘 워크플로우의 끝판왕입니다.
2단계: API 종량제로 가볍게 시작하는 셋업 가이드
월 $20의 구독료가 부담스럽다면, 딱 5달러만 충전해서 **사용한 만큼만 지불(Pay-as-you-go)**하는 API 방식이 정답입니다.
1. Anthropic 콘솔 가입 및 소액 충전 API 콘솔(console.anthropic.com)에 가입 후, Billing 메뉴에서 딱 $5만 충전합니다.
2. 글로벌 패키지 설치 터미널을 열고 아래 명령어를 입력해 패키지를 설치합니다.
Bash
# 글로벌로 Claude Code를 설치합니다. (Node.js 18 이상 필수)
npm install -g @anthropic-ai/claude-code
3. 프로젝트 연동 및 실행
Bash
# 작업할 프론트엔드 프로젝트 폴더(예: app/layout.tsx 가 있는 곳)로 이동 후 실행합니다.
claude
실행 후 방향키로 “Anthropic Console account”를 선택하고 브라우저에서 승인(Approve)해 줍니다. 복잡한 API 키 관리 없이 끝납니다.
⚠️ [주의사항] 실무자를 위한 텅장(텅 빈 통장) 방지 체크리스트
터미널에서 바로 실행된다고 무턱대고 아무 명령이나 치면 안 되겠죠? 실무에서 가장 많이 실수하는 과금 방어 포인트를 짚어드립니다.
- (X) 무작정 켜두고 광범위한 질문 던지기: 프로젝트 전체를 계속 읽게 만들면 컨텍스트 토큰이 누적되어 API 비용이 줄줄 샙니다.
- (O) 비용 확인 명령어 습관화하기: 작업 중 수시로 터미널에
/cost명령어를 입력해 현재 세션의 누적 비용을 직관적으로 확인하세요.
💡새로운 바이브 코딩의 시작
기존에 쓰던 에디터를 버릴 필요 없이, 터미널 탭 하나만 더 열면 든든하고 똑똑한 시니어 개발자를 한 명 옆에 두는 셈입니다. 오늘 세팅한 Claude Code로 여러분의 퇴근 시간이 조금 더 빨라지길 바랍니다.
읽어주셔서 감사합니다, 지금까지 올리브였습니다! 🫒