VS Code에서 Codex 시작하는 법 — 설치부터 첫 프로젝트까지

들어가며

"AI가 코드를 짜준다"는 말은 이제 낯설지 않다.
그런데 막상 써보려 하면 어디서 시작해야 할지 막막한 경우가 많다.
OpenAI Codex는 ChatGPT 계정이 있으면 VS Code(비주얼 스튜디오 코드) 확장 형태로 설치할 수 있어 진입 장벽이 비교적 낮다.

2026년 2월 23일 기준으로 ChatGPT Free 계정으로도 이용 가능하나, 이용 조건은 이후 변경될 수 있다.
사용 전 Codex 앱의 전반적인 기능과 요금 구조를 확인해두면 도움이 된다.

 

이 글에서는 설치부터 첫 프로젝트 실행까지의 흐름을 단계별로 안내한다.
코딩 경험이 없어도 따라할 수 있도록 각 단계의 이유와 결과를 함께 설명한다.

 

▲ VS Code 마켓플레이스에서 Codex 확장을 설치하는 과정.

 

---

사전 준비: VS Code와 ChatGPT 계정

Codex를 사용하기 전에 준비해야 할 것은 두 가지다.

 

1. VS Code(비주얼 스튜디오 코드) 설치

VS Code는 Microsoft가 만든 무료 코드 에디터다(IDE, 코드 작성과 실행을 모두 할 수 있다).
Windows, Mac, Linux 모두 지원한다.
공식 사이트(code.visualstudio.com)에서 운영체제에 맞는 버전을 내려받아 설치하면 된다.
설치 과정은 일반 프로그램과 다르지 않다.

 

2. ChatGPT 계정

Codex는 OpenAI 계정으로 로그인해서 사용한다.
ChatGPT를 이미 사용하고 있다면 별도로 가입할 필요가 없다.
아직 계정이 없다면 openai.com에서 만들 수 있다.

 

---

설치: openai.com/codex 에서 시작

준비가 됐다면 설치 단계로 넘어간다.

1. 브라우저에서 openai.com/codex 에 접속한다.
2. " IDE 에서 사용하기(Try in your IDE)" 버튼을 클릭한다.
3. IDE(통합 개발 환경) 선택 화면에서 VS Code를 선택한다.
4. 자동으로 VS Code 확장 마켓플레이스 페이지가 열린다. Install(설치) 버튼을 누른다.
5. VS Code가 열리면서 Codex 확장이 설치되고, 왼쪽 사이드바에 Codex 아이콘이 생긴다.

cf. VS Code를 실행하고 extensions에서 codex를 검색하고 설치해도 된다(처음 그림 참고).

Windows 사용자 참고:
Codex VS Code 확장은 macOS와 Linux에서 안정적으로 지원되며,
Windows 지원은 현재 experimental(실험적) 상태다.
Windows 환경에서는 WSL(Windows Subsystem for Linux)을 통한 사용을 권고한다.

---

로그인: ChatGPT 계정으로 연결

 

사이드바의 Codex 아이콘을 클릭하면 로그인 안내가 표시된다.
ChatGPT 계정(이메일과 비밀번호)으로 로그인하면 된다.

 

로그인이 완료되면 Codex 패널이 활성화되고 프롬프트 입력창이 나타난다.

 

---

권장 설정: 처음에는 기본값으로 충분

Codex 패널에는 몇 가지 설정 항목이 있다. 처음 사용한다면 아래 기준을 참고한다.

 

▲ Codex 패널의 모델 및 추론 노력 설정 화면. 처음에는 GPT-5.3-Codex와 Medium 설정을 권장한다.

 

• 모델: GPT-5.3-Codex를 선택한다.
  영상 기준 최신 모델로, 코드 작업 전반에 걸쳐 균형 잡힌 성능을 낸다.
  같은 확장에서 GPT-5.3-Codex-Spark도 선택할 수 있는데, Spark는 실시간에 가까운 속도를 목표로 하는 소형 모델이다.
  처음에는 GPT-5.3-Codex를 쓰고, 빠른 응답이 필요할 때 Spark를 시도해볼 수 있다.
• Reasoning Effort(추론 노력): Medium으로 설정한다.
  Low는 결과가 단순하고, High는 시간이 오래 걸린다.
  Medium이 속도와 품질의 균형이 가장 좋다.
• 실행 권한: 기본값인 로컬 프로젝트 샌드박스로 유지한다.
  이 설정에서는 Codex가 로컬 프로젝트 폴더 안에서만 작업하므로 시스템 전체에 영향을 주지 않아 안전하다.

 

---

첫 프롬프트: 구체적일수록 좋은 결과

설정을 마쳤으면 이제 첫 번째 프롬프트를 입력할 차례다.
프롬프트란 Codex에게 전달하는 작업 지시문이다.

이전 ChatGPT에 작성하는 것과 같은 방식이다.

프롬프트 작성 원칙

• 영어로 작성한다.
  Codex는 영어 프롬프트에서 더 정확한 결과를 낸다.
• 원하는 기능을 구체적으로 설명한다.
  "웹앱 만들어줘"보다는 "React로 파일 저장/열기 기능이 있는 워드패드 클론을 만들어줘"처럼 기능을 명시한다.
• 사용할 기술 스택을 함께 적는다.
  React, Vue, 순수 HTML 등 원하는 방식이 있다면 명시한다. 지정하지 않으면 Codex가 임의로 선택한다.

예시 프롬프트:

Create a Wordpad clone in React with bold, italic, font size controls, and file save/open functionality.

이 수준의 지시만으로도 Codex는 프로젝트 폴더를 만들고, 필요한 패키지를 설치하고, 코드 자동 생성 과정을 자동으로 진행한다.

 

---

명령 승인 흐름: Codex가 먼저 물어본다

Codex가 코드 생성 외에 터미널 명령(예: npm install, npm run build)을 실행해야 할 때는 먼저 해당 명령을 보여주고 사용자의 승인을 요청한다.

이것은 Codex의 안전장치다.

예를 들어 "터미널에서 다음 명령을 실행하려 합니다(macOS/Linux 터미널 또는 WSL 기준): npm install"이라는 안내가 뜨면,
내용을 확인하고 Approve(승인) 버튼을 누르면 된다.

 

명령이 낯설거나 이해하기 어려운 경우에는 Codex에게 "이 명령이 하는 일을 설명해줘"라고 물어볼 수도 있다.

 

이것은 ChatGPT를 웹페이지에서 사용하던 사람들에게는 낯선 과정이라고 할 수 있다.
하지만 지금 Codex는 내 컴퓨터에서 실행되고 있다.
따라서 내 컴퓨터에 파일을 작성하거나, 직접적으로 파일을 변경하는 과정에서 사용자의 승인은 필수라고 할 수 있다.

 

---

결과 확인: 브라우저에서 바로 확인

Codex가 작업을 마치면 프로젝트 폴더에 파일들이 생성된다.
웹앱의 경우, 터미널에서 아래 명령을 입력하면 로컬 서버가 실행된다.

npm run dev

 

명령 실행 후 터미널에 http://localhost:3000 같은 주소가 표시되면,

브라우저에서 해당 주소를 열어 결과물을 확인할 수 있다.

 

직접 눈으로 보는 단계이므로 기대했던 기능이 제대로 작동하는지 꼼꼼히 살펴본다.

 

---

오류 대처: 에러 메시지를 Codex에 붙여넣기

처음 만든 앱에서 오류가 발생하는 건 흔한 일이다.
당황할 필요 없다. 해결 방법은 단순하다.

 

▲ Chrome 개발자 도구 Console 탭에서 에러 메시지를 확인하는 모습. 에러 메시지를 Codex에 그대로 붙여넣으면 자동으로 수정 방향을 제안한다.

 

1. 브라우저 개발자 도구를 연다.
   Chrome 기준 단축키는 F12 또는 Ctrl+Shift+I다. Mac에서는 Cmd+Option+I를 사용한다.
   다른 브라우저(Firefox, Edge 등)도 동일한 기능을 제공하며 단축키가 유사하다.
2. Console(콘솔) 탭을 클릭한다.
   빨간색 에러 메시지가 보일 것이다.
3. 에러 메시지를 복사해서 Codex 프롬프트 창에 붙여넣는다.

그러면 Codex가 오류를 분석하고 수정 방향을 제안하거나 직접 코드를 수정한다.

 

수정 후 같은 파일에서 동일한 오류가 반복되는 경우도 있다.
React 임포트 누락이 대표적인 예다.
이때는 에러를 다시 붙여넣거나, 문제가 발생한 파일 위치를 구체적으로 알려주면 더 빠르게 해결된다.

 

---

마무리

Codex는 자연어 지시만으로 코드를 생성하고, 버그를 수정하고, 리팩토링까지 자동으로 처리한다.
AI 코딩 자동화 도구 중에서도 특히 아이디어를 빠르게 구현해보는 프로토타이핑 단계에서 효율이 높다.

 

앞서 안내한 세 가지 동작—프롬프트 입력, 명령 승인, 에러 메시지 붙여넣기—만 숙지해도 충분히 시작할 수 있다.

 

처음부터 복잡한 프로젝트를 목표로 하기보다, 간단한 기능 하나를 Codex로 만들어보는 것부터 시작해보자.
설치하고, 프롬프트 하나 입력하고, 결과를 브라우저에서 확인하는 그 한 사이클이 Codex를 이해하는 가장 빠른 방법이다.

 

이 글이 도움이 됐다면, 코딩을 처음 시작하는 주변 분들에게 공유해 보세요.