Google IDX + Claude Code
연동 완전 가이드
로컬 설치 없이 브라우저 하나로 Claude Code의 강력한 AI 코딩 에이전트를 사용하는 방법을 단계별로 안내합니다.
회사 PC 보안 정책으로 자유로운 개발 환경 구성이 어렵거나, 환경 세팅에 시간을 쓰고 싶지 않은 개발자라면 이 조합이 딱입니다. Google IDX(Firebase Studio)는 브라우저만 있으면 Linux 가상머신 기반의 완전한 개발 환경을 제공하고, 여기에 Claude Code를 연동하면 AI 코딩 에이전트를 곧바로 활용할 수 있습니다.
로컬 설치 불필요
브라우저만 있으면 어디서든 동일한 개발 환경
코드베이스 전체 인식
파일·에러·선택 코드를 Claude가 자동으로 파악
멀티스텝 자동화
컨트롤러→서비스→뷰까지 한 번에 처리
기기 무관
저사양 노트북, 태블릿에서도 동일한 성능
아래 두 가지만 있으면 시작할 수 있습니다.
-
1
Google IDX 워크스페이스 만들기
브라우저에서 idx.google.com (또는 Firebase Studio: studio.firebase.google.com)에 접속한 뒤 Google 계정으로 로그인합니다. New workspace를 클릭하고 원하는 템플릿을 선택합니다. 빈 Node.js 환경이나 기존 프레임워크 템플릿 모두 가능합니다.
💡 워크스페이스가 생성되면 VS Code 기반 브라우저 IDE가 열립니다. 내부에 Linux VM이 실행 중이므로 터미널을 그대로 사용할 수 있습니다. -
2
Node.js 버전 확인
IDX는 기본적으로 Node.js가 설치되어 있습니다. Claude Code는 Node.js 18 이상이 필요하므로 터미널에서 버전을 확인합니다.
# 터미널에서 실행node --version # v20.x.x 이상이면 OK npm --version⚠️ 버전이 18 미만이면nvm install 20 && nvm use 20으로 업그레이드하세요. -
3
Claude Code 설치
터미널에서 npm으로 Claude Code CLI를 전역 설치합니다.
# 설치npm install -g @anthropic-ai/claude-code# 설치 확인claude --version # 버전 번호가 출력되면 성공⚠️ 권한 오류 시sudo는 사용하지 마세요.npm config set prefix ~/.npm-global로 prefix를 변경하고 PATH에 추가하는 방법을 권장합니다. -
4
Claude 계정 인증
설치 후 처음 실행하면 인증이 필요합니다. 아래 명령어를 실행하면 브라우저가 열리며 Anthropic 계정으로 로그인할 수 있습니다.
# 인증 (브라우저 로그인)claudeAPI 키를 사용하는 경우 환경 변수로 설정할 수도 있습니다.
# API 키 방식export ANTHROPIC_API_KEY="sk-ant-..." # .bashrc에 추가하면 영구 적용 echo 'export ANTHROPIC_API_KEY="sk-ant-..."' >> ~/.bashrc source ~/.bashrc -
5
프로젝트 디렉토리에서 Claude Code 시작
인증이 완료되면 작업할 프로젝트 폴더로 이동 후
claude를 실행합니다.# 프로젝트 폴더로 이동 후 실행cd /home/user/my-project claude첫 실행 시 Claude Code 환영 화면이 표시됩니다.
/help로 사용 가능한 명령어를 확인하세요.# 유용한 슬래시 커맨드/help # 명령어 목록 /init # 프로젝트 초기화 (CLAUDE.md 생성) /status # 현재 인증 상태 확인 /resume # 이전 대화 이어서 진행 -
6
(선택) dev.nix로 환경 자동화
워크스페이스가 절전 후 재시작될 때 환경이 초기화되는 것을 막으려면
.idx/dev.nix파일에 패키지를 명시합니다.# .idx/dev.nix 예시{ pkgs, ... }: { packages = [ pkgs.nodejs_20 ]; # 워크스페이스 시작 시 자동 실행할 셸 훅 설정 가능 idx.previews.enable = true; }
# 코드베이스 구조 파악
> 이 프로젝트의 전체 구조와 사용된 기술 스택을 설명해줘
# 기능 추가
> UserController에 페이지네이션 기능을 추가하고
Service, Mapper, Thymeleaf 템플릿까지 함께 작성해줘
# 에러 디버깅
> 터미널에 표시된 NullPointerException 에러를 분석하고 수정해줘
# 리팩토링
> UserService 클래스의 중복 코드를 제거하고 정리해줘-
✔
/init명령으로 CLAUDE.md 파일을 만들어두면 프로젝트 컨텍스트(기술 스택, 코딩 규칙 등)를 매번 설명할 필요가 없습니다. -
✔
IDX 터미널에서
claude -p "명령어"형태로 비대화형 실행도 가능합니다 (자동화·스크립트 용도). - ✔ Shift+Tab을 누르면 다음 작업 단계를 자동 허용하는 화이트리스트 모드로 전환됩니다. 반복 작업 시 유용합니다.
- ✔ IDX 에디터에서 파일을 열어 선택한 코드가 있으면 Claude Code가 해당 컨텍스트를 자동으로 인식합니다. 같은 파일시스템을 공유하기 때문입니다.
-
✔
/status명령으로 현재 인증 방식(Claude Max Account / API Key)과 모델 정보를 확인할 수 있습니다.
- ⚠ IDX 무료 플랜은 VM 리소스 제한이 있어 대형 프로젝트에서 속도가 느릴 수 있습니다.
- ⚠ 일부 VS Code 확장은 IDX에서 동작하지 않습니다. Open VSX Registry 호환 확장만 지원됩니다.
-
⚠
워크스페이스를 일정 시간 사용하지 않으면 절전 모드로 전환됩니다.
dev.nix로 재시작 시 자동 설치를 구성해 두는 것을 권장합니다. - ⚠ Claude Code는 사용량에 따라 비용이 발생합니다. Pro/Max 플랜 구독자는 월정액 내에서 사용 가능하지만, API 키 방식이라면 토큰 비용을 모니터링하세요.
이 세팅 하나로 어떤 기기에서든 브라우저만 열면 Claude Code가 돌아가는 개발 환경이 완성됩니다.
로컬 환경 세팅의 번거로움 없이 바로 개발에 집중할 수 있는 게 이 조합의 가장 큰 장점입니다. 🚀