VS Code에서 AI 코딩 도구 연결하기 — Claude Code + Codex 실전 가이드

복사 붙여넣기는 이제 끝

VS Code를 설치하고 AI 협업 환경까지 만들었다면, 이제 마지막 단계가 남았다.
바로 VS Code에서 Claude Code와 Codex 같은 AI 코딩 도구를 연결하는 것이다.

지금부터 AI를 VS Code 안에서 직접 사용하는 방법을 알려주겠다.

지금까지는 AI 채팅창에서 코드를 받아서 VS Code에 복사 붙여넣기를 했다. 채팅창 → 코드 복사 → VS Code 열기 → 붙여넣기 → 저장. 이 과정을 하루에 수십 번 반복했다.

하지만 Claude Code나 Codex를 VS Code에 연결하면, VS Code 안에서 바로 AI와 대화하면서 코드를 수정할 수 있다. 복사 붙여넣기가 필요 없다.

이번 글에서는 VS Code에 AI 코딩 도구를 연결하는 방법을 정리해보겠다.

왜 AI를 VS Code에 연결해야 할까

AI 채팅창에서 코드를 받아 붙여넣는 방식과, VS Code 안에서 AI를 직접 사용하는 방식은 완전히 다르다.

핵심은 이거다 — VS Code 안에 AI 개발 파트너를 넣는 것과 같다. 내가 “이 버튼 색상 바꿔줘”라고 말하면, AI가 알아서 해당 파일을 찾아서 수정해준다.

Claude Code와 Codex — 뭐가 다른가

VS Code에서 사용할 수 있는 대표적인 AI 코딩 도구가 두 가지 있다.

쉽게 말하면:

• Claude Code
   — 코드를 깊이 이해하고, 왜 이렇게 작성했는지 설명까지 해준다. 복잡한 버그를 찾을 때 강하다.
• Codex
   — 코드를 빠르게 생성한다. “이거 만들어줘”라고 하면 순식간에 만들어준다.

나는 둘 다 쓴다. 상황에 따라 다르게 사용하면 된다.

대박이 TIP Claude Code와 Codex 중 어떤 도구가 더 좋은지는 사람마다 다를 수 있다. 내가 사용해본 결과 둘 다 장단점이 있다. 하나만 사용하지 말고 둘 다 경험해 보길 권한다.

Claude Code 연결하기

1단계 — Node.js 설치

Claude Code를 설치하려면 먼저 Node.js가 필요하다.

Node.js는 프로그래밍 도구를 설치하고 실행하는 데 필요한 기본 프로그램이다. Claude Code는 Node.js 위에서 돌아가기 때문에, Node.js가 없으면 설치 자체가 안 된다.

Node.js 설치: https://nodejs.org 에서 LTS 버전 다운로드 → 설치 → VS Code 재시작

설치가 됐는지 확인하려면 VS Code 터미널(Ctrl + `)을 열고 아래 명령어를 입력한다.

node –version

버전 번호가 나오면 설치 완료다.

2단계 — Claude Code 설치

Claude Code를 설치하는 방법은 두 가지가 있다.

방법 1 — 터미널에서 설치 (명령어 방식)

VS Code 터미널에서 아래 명령어를 입력한다.

npm install -g @anthropic-ai/claude-code

방법 2 — 확장 프로그램으로 설치 (초보자 추천)

VS Code 왼쪽 사이드바에서 확장 프로그램 아이콘을 클릭한다. 검색창에 **”Claude”**를 입력하면 Claude 확장 프로그램이 나온다. Install 버튼을 클릭하면 설치 완료다.

(처음 설치하는 사람은 Install 또는 설치  버튼이 보인다. 클릭하면 설치 완료다)

대박이 TIP 터미널이 익숙하지 않다면 방법 2(확장 프로그램)를 추천한다. 클릭 몇 번이면 설치가 끝난다.

3단계 — Claude 계정 로그인

설치가 완료되면 Claude 계정으로 로그인해야 한다. 처음 실행하면 로그인 화면이 나온다.
Claude 계정으로 로그인하면 연결이 완료된다.

4단계 — 프로젝트에서 사용하기

VS Code에서 작업할 프로젝트 폴더를 열고, 터미널에서 claude를 입력하면 된다.

AI가 프로젝트 전체 파일을 읽고, 대화하면서 코드를 수정해준다.

“header.php에서 네비게이션 메뉴 색상을 파란색으로 바꿔줘”

이렇게 말하면 Claude Code가 해당 파일을 찾아서 수정 내용을 보여주고, 승인하면 적용된다.

주의사항 Claude Code는 Claude Pro($20/월) 또는 Max($100/월) 구독이 필요하다. 무료 플랜에서는 사용할 수 없다. API 키를 직접 등록해서 사용하는 방법도 있지만, 구독이 가장 간편하다.

Codex 연결하기

1단계 — VS Code 확장 프로그램 설치

VS Code 왼쪽 사이드바에서 확장 프로그램 아이콘을 클릭한다.

검색창에 **”Codex”**를 입력하면 OpenAI Codex가 나온다.

Install 버튼을 클릭한다.

2단계 — OpenAI 계정 로그인

설치 후 VS Code에서 Codex를 열면 로그인 화면이 나온다.

OpenAI 계정(ChatGPT 계정)으로 로그인하면 연결이 완료된다.

중간 Claude code 우 Gpt Codex

3단계 — 프로젝트에서 사용하기

로그인이 완료되면 VS Code 사이드바에 Codex 패널이 생긴다.

여기서 AI에게 직접 요청할 수 있다.

“style.css에서 본문 폰트 크기를 16px로 변경해줘”

Codex가 해당 파일을 찾아서 수정해준다.

주의사항 Codex는 ChatGPT Plus($20/월) 또는 Pro($200/월) 구독에 포함되어 있다. 초보자가 사용하기에는 두 플랜의 차이가 크지 않으니 Plus부터 시작하는 걸 추천한다. API 키를 사용하는 방법도 있다.

실제 사용 — AI가 코드를 수정하는 과정

실제로 AI 코딩 도구를 사용하면 작업 흐름이 이렇게 바뀐다.

이전 방식 (복사 붙여넣기)

1. 채팅창에서 AI에게 코드 요청
2. AI가 보내준 코드 복사
3. VS Code에서 파일 열기
4. 코드 붙여넣기
5. 저장 + 실행

지금 방식 (VS Code 내부 AI)

1. VS Code에서 AI에게 요청
2. AI가 바로 파일을 수정
3. 확인하고 승인
4. 실행

단계가 5단계에서 4단계로 줄었고, 복사 붙여넣기가 완전히 사라졌다. 파일을 찾아서 열 필요도 없다.

AI 협업 개발 루프 — 최종 버전

2부에서 설명한 AI 협업 개발 루프가 이제 이렇게 업그레이드된다.

핵심은 내가 하는 일이 줄었다는 것이다. 복사, 붙여넣기, 파일 찾기 — 이런 반복 작업을 AI가 대신 해준다. 나는 요청하고, 확인하고, 승인하는 역할만 하면 된다.

대박이 TIP 처음에는 AI가 뭘 수정했는지 이해가 안 될 수 있다. 하지만 이 루프를 반복하다 보면 코드가 조금씩 눈에 들어오기 시작한다. 그때부터 재미가 붙는다. 코드를 몰라도 코딩할 수 있는 단계가 오는 것이다.

어떤 도구를 선택해야 할까

둘 다 써본 입장에서 정리하면 이렇다.

• 코딩 경험이 없는 초보자 → Claude Code 추천. 수정 전에 확인을 받기 때문에 안전하다.
• 빠르게 코드를 만들고 싶을 때 → Codex 추천. 생성 속도가 빠르다.
• 복잡한 버그를 찾아야 할 때 → Claude Code 추천. 코드 분석 능력이 강하다.
• 둘 다 쓸 수 있으면 → 둘 다 설치하고 상황에 따라 사용. 이게 가장 좋다.

VS Code 가이드 시리즈 완료

여기까지 하면 VS Code에서 AI와 협업하는 완전한 개발 환경이 만들어진다.

• 1부 — VS Code 설치
• 2부 — AI 협업 코딩 환경 만들기
• 3부 — AI 코딩 도구 연결 (Claude Code + Codex) ← 지금 글

이제 VS Code 안에서 AI에게 말만 하면 코드가 만들어지고, 수정되고, 실행된다. 코드를 직접 작성하지 않아도 된다.

코드를 몰라도, 코딩할 수 있다.