코덱스(Codex)로 바이브 코딩하는 방법VS Code에서 첫 프로그램 만들기

꿀냥숭닭 데일리 · AI 업무도구

코덱스(Codex)로 바이브 코딩하는 방법
VS Code에서 첫 프로그램 만들기

코드를 한 줄씩 직접 작성하기보다, 만들고 싶은 기능을 설명하고 결과를 확인하며 개발할 수 있을까요? 이번 글에서는 Codex에 한국어로 요청해 작은 프로그램을 만드는 과정을 따라갑니다. API를 앱에 직접 연결하는 강좌가 아니라, AI 코딩 에이전트와 함께 개발하는 입문 가이드입니다.

확인 기준: 2026년 9월 22일 · VS Code 중심 · 공식 문서 기반 설명과 자체 구성한 학습용 요청문

먼저 기억할 흐름
작업 폴더 선택 → Codex 로그인 → 계획 요청 → 구현 → 직접 실행 → 오류 수정 → 변경 검토

핵심은 “알아서 완성해 줘” 한마디가 아니라 작은 기능을 요청하고 확인하는 반복입니다.

이 글의 순서
1. Codex와 바이브 코딩의 관계
2. 설치·로그인·작업 폴더 준비
3. 첫 프로그램 만들기
4. 화면 개선·오류 수정·검토
5. AGENTS.md와 기존 프로그램 개선
6. 비용·보안·작업 마무리
7. 자주 묻는 질문

1. Codex에서 바이브 코딩한다는 것은?

이 글에서 바이브 코딩은 원하는 기능을 자연어로 설명하고, AI가 만든 결과를 보면서 요청을 수정해 나가는 개발 방식을 뜻합니다. 특정 버튼이나 별도 프로그래밍 언어를 가리키는 표현으로 사용하지 않습니다.

Codex는 코드 작성·수정·검토를 돕는 OpenAI의 코딩 에이전트입니다. VS Code 확장에서는 열린 파일과 선택한 코드를 작업 맥락으로 활용하고, 바뀐 내용을 코드 옆에서 검토할 수 있습니다. [Codex IDE 공식 안내]

예를 들어 “할 일 목록을 만들어 줘”에서 시작해 “빈 제목은 등록하지 않게 해 줘”, “완료한 일만 보이게 해 줘”, “이 오류만 고쳐 줘”처럼 기능을 구체화합니다. 다만 코드 확인과 테스트를 생략한 채 결과를 그대로 운영에 쓰는 방식은 이 글의 목표가 아닙니다.

Codex에 맡길 것: 코드 탐색, 구현, 수정안 제안, 실행 가능한 검증
사람이 결정할 것: 목표, 허용 범위, 중요한 변경의 승인, 실제 결과의 수용 여부

Codex는 데스크톱 환경, IDE 확장, CLI, 웹 등에서 이용할 수 있습니다. 이미 Codex 데스크톱 환경을 쓰고 있다면 작업 폴더를 선택하고 아래 요청문부터 적용해도 됩니다. 이 글의 클릭 경로는 Visual Studio Code의 Codex 확장을 기준으로 설명하며, Visual Studio IDE의 확장 설치 절차는 아닙니다. [이용 환경 안내]

2. VS Code에서 Codex를 시작하는 순서

① 비어 있는 연습용 폴더를 엽니다

PC에 my-vibe-app 같은 새 폴더를 만들고 VS Code의 파일 → 폴더 열기에서 선택합니다. 기존 프로그램을 개선하려는 경우에는 새 프로젝트를 생성하지 말고 해당 프로젝트 폴더를 엽니다. 중요한 기존 파일은 먼저 백업하거나 Git 체크포인트를 확보하세요. [작업 전후 체크포인트 안내]

② OpenAI 공식 Codex 확장을 설치합니다

OpenAI의 Codex IDE 안내 페이지에서 Install the extension을 선택해 설치 페이지로 이동합니다. 이름이 비슷한 다른 도구가 아니라 OpenAI 공식 Codex인지 확인합니다. 설치 후 Codex 아이콘을 열고, 보이지 않으면 명령 팔레트에서 Codex: Open Codex Sidebar를 실행합니다.

③ ChatGPT 계정으로 로그인합니다

Codex 로그인 화면에서 Sign in with ChatGPT를 선택하고 브라우저의 로그인 절차를 마칩니다. 개인 계정과 회사 워크스페이스를 함께 사용한다면 현재 계정·워크스페이스도 확인하세요. 이 경로로 시작할 때 API 키를 먼저 발급할 필요는 없습니다. [로그인 방식 안내]

④ 작업 권한을 확인합니다

처음에는 연습용 폴더만 작업 범위로 지정합니다. 분석만 맡길 때는 이용 환경에서 제공되는 읽기 전용 권한이나 계획 기능을 활용하고, 실제 구현에 들어갈 때 필요한 편집 권한을 확인하세요. “수정하지 마”라는 문장만으로 접근 통제가 완성되는 것은 아닙니다. 권한 설정과 승인 정책도 함께 적용해야 합니다. [권한·승인 안내]

Windows에서는 네이티브 샌드박스를 이용할 수 있어 WSL 설치가 언제나 필수인 것은 아닙니다. 설정이 회사 정책에 막히면 보안을 해제하기보다 담당자에게 허용된 구성을 확인하세요. [Windows 공식 안내]

3. 첫 실습: “오늘의 할 일” 프로그램 만들기

첫 실습은 할 일 등록·완료 표시·삭제·필터만 있는 작은 웹페이지로 제한합니다. 아래 요청문은 이 글을 위해 구성한 학습용 예시이며, 동일한 결과를 보장하는 실행 기록은 아닙니다. 처음부터 회원가입·결제·데이터베이스까지 넣지 않고, 눈으로 확인할 수 있는 기능부터 만듭니다.

1단계. 코딩보다 계획을 먼저 요청합니다

아래 문장을 Codex 입력창에 붙여 넣습니다. 터미널에 입력하는 명령어가 아닙니다. OpenAI도 복잡하거나 모호한 작업은 구현 전에 계획을 세우고 필요한 질문을 하도록 안내합니다. [계획 수립 가이드]

나는 코딩 입문자입니다. 이 폴더에서 학습용 '오늘의 할 일' 웹페이지를 만들고 싶습니다.
아직 파일을 생성·수정하거나 패키지를 설치하지 말고 계획만 제안해 주세요.
필요한 읽기 전용 조사만 수행해 주세요.

[목표]
할 일 등록, 완료 표시, 삭제, 전체/진행 중/완료 필터를 만들고 싶습니다.

[기술과 범위]
HTML, CSS, JavaScript만 사용합니다.
설치·빌드 없이 index.html을 브라우저로 열어 실행하는 구조로 계획해 주세요.
첫 버전에는 로그인, 서버, 데이터 저장, 외부 API를 넣지 않습니다.
새로고침하면 입력한 내용이 초기화되는 학습용 예제입니다.

[확인할 것]
현재 작업 폴더와 기존 파일부터 확인해 주세요.
기존 파일이 있으면 덮어쓰지 말고 중단하여 알려 주세요.
필요한 파일, 각 파일의 역할, 구현 순서, 완료 확인 방법을 한국어로 설명해 주세요.
모호한 내용이 있으면 먼저 질문해 주세요.

제안된 계획에서 작업 폴더가 맞는지, 기존 파일을 덮어쓰지 않는지, 처음 요청하지 않은 기능이 추가되지 않았는지 확인합니다. 문제가 있으면 구현 전에 바로잡습니다.

2단계. 승인한 범위만 구현하게 합니다

앞서 검토한 계획대로 첫 버전을 구현해 주세요.
채팅에 코드만 보여 주지 말고, 현재 승인된 작업 폴더에 실제 파일을 만들어 주세요.

[생성할 파일]
index.html, styles.css, app.js, README.md

[기능]
- 할 일 제목 입력과 등록
- 빈 제목과 공백만 입력한 제목은 등록하지 않기
- 완료/미완료 전환
- 삭제 전 확인과 취소
- 전체/진행 중/완료 필터
- 할 일이 없으면 안내 문구 표시
- 한국어 화면, 키보드 조작, 모바일 대응

[제약]
외부 패키지·폰트·CDN·API를 사용하지 마세요.
JavaScript 모듈 import나 fetch 없이 로컬 파일로 실행되게 해 주세요.
사용자 입력은 HTML로 실행하지 말고 텍스트로 표시해 주세요.
로그인, 서버, 영구 저장 기능은 만들지 마세요.
화면에 '새로고침하면 입력 내용이 초기화됩니다'라고 안내해 주세요.
현재 폴더 밖의 파일은 수정하지 마세요.

[작업 후]
생성한 파일, 실행 방법, 확인한 항목, 확인하지 못한 항목을 구분해 주세요.
브라우저를 직접 실행하지 못했다면 실행했다고 표현하지 마세요.

이번 예제는 설치 없이 실행하는 정적 웹페이지를 목표로 요청했습니다. React·Node.js·서버를 준비하는 단계는 포함하지 않았습니다. 만들어진 파일이 계획과 다른 구조라면 실행 전에 이유를 설명받고 확인하세요.

3단계. 브라우저에서 직접 확인합니다

요청한 구조대로 파일이 만들어졌다면 Windows 파일 탐색기에서 작업 폴더의 index.html을 찾아 브라우저로 엽니다. 파일을 더블클릭했을 때 다른 프로그램이 실행되면 연결 프로그램에서 브라우저를 선택하세요. 수정 후에는 파일 저장 여부를 확인하고 브라우저를 새로고침합니다.

실습 데이터로 “회의자료 준비”, “주간 일정 정리” 등을 입력합니다. 아래 항목을 하나씩 확인하며, 새로고침 때 내용이 사라지는 것은 첫 버전의 의도된 동작입니다. 자료 보관 기능까지 완성된 업무관리 시스템으로 오해하지 마세요.

확인할 동작	통과 기준
등록	입력한 제목이 목록에 한 번 추가됩니다.
입력 검증	빈칸·공백만 입력하면 등록되지 않습니다.
완료·필터	상태 변경 후 해당 필터에 맞게 목록이 갱신됩니다.
삭제 취소	삭제를 취소하면 항목이 유지됩니다.
작은 화면·키보드	버튼이 잘리지 않고 키보드로 주요 기능을 사용할 수 있습니다.

4. 바이브 코딩의 핵심: 작은 수정과 검증 반복

첫 화면이 나온 다음부터는 디자인 수정과 기능 변경을 한 번에 섞지 않는 방식을 권합니다. 무엇 때문에 동작이 달라졌는지 추적하기 쉽도록 이번 요청에서 바꿀 범위를 좁혀 보세요.

화면이 마음에 들지 않을 때

현재 기능은 그대로 두고 화면 디자인만 개선해 주세요.

- 제목은 '오늘의 할 일'로 유지
- 흰 배경에 청록색을 강조색으로 사용
- 입력창과 버튼의 간격을 넓히기
- 완료한 일은 취소선으로 표시하되 읽을 수 있게 유지
- 작은 화면에서도 버튼과 글자가 겹치지 않게 조정

등록·완료·삭제·필터의 동작은 바꾸지 마세요.
수정한 파일과 기능에 영향이 없는지 확인한 내용을 알려 주세요.

버튼이나 필터가 잘못 동작할 때

“안 돼요”만 적기보다 실행 환경, 기대 결과, 실제 결과, 재현 순서를 전달합니다. 화면을 첨부할 때는 문제 영역을 설명하고 개인정보·로그인 정보는 가립니다. 원하는 동작·맥락·제약·검증 방법을 포함하는 것이 공식 프롬프팅 안내의 핵심입니다. [Codex 프롬프팅 안내]

아래 문제를 재현할 수 있는지 확인하고 관련 부분만 최소 수정해 주세요.

[실행 환경]
운영체제, 브라우저, 실행한 파일이나 명령을 적습니다.

[기대한 동작]
예: 진행 중 필터에서 할 일을 완료하면 목록에서 사라져야 합니다.

[실제 동작]
예: 완료 표시만 바뀌고 진행 중 목록에 그대로 남습니다.

[재현 순서]
1. 새 할 일을 등록합니다.
2. 진행 중 필터를 선택합니다.
3. 해당 항목의 완료 버튼을 누릅니다.

[오류 메시지 또는 화면]
확인한 오류 원문이나 화면을 첨부합니다. 비밀정보는 먼저 가립니다.

원인, 수정 파일, 검증 결과를 설명해 주세요.
관련 없는 화면과 구조는 바꾸지 마세요.
재현하지 못했거나 테스트하지 못한 내용은 구분해 주세요.

“완료했습니다”라는 답변을 받았을 때

이번 변경사항을 검토해 주세요. 이 단계에서는 파일을 수정하지 마세요.

1. 요청한 기능 중 빠진 것이 있는지 확인
2. 빈 입력, 삭제 취소, 필터 변경 등 실패하기 쉬운 상황 확인
3. 기존 기능에 영향을 준 변경이 있는지 확인
4. 사용자 입력을 HTML로 실행하는 코드가 있는지 확인
5. 요청하지 않은 외부 통신이나 패키지 추가가 있는지 확인

결과를 다음으로 나눠 주세요.
- 실제 실행하여 확인한 항목과 결과
- 코드를 읽고 판단한 항목
- 현재 환경에서 확인하지 못한 항목

수정이 필요하면 변경안을 먼저 제안해 주세요.

코드를 읽은 검토, 실제 실행 테스트, 사용자가 직접 클릭한 확인은 구분해야 합니다. Codex가 브라우저를 열 수 없는 환경이라면 사람이 화면을 확인해야 합니다. 테스트 통과 메시지도 어떤 검사를 실행했는지 함께 읽고, 새 기능 때문에 기존 기능이 망가지지 않았는지 다시 확인하세요. [검증을 포함한 활용 가이드]

요청문을 구성하는 네 가지
무엇을 만들지 → 무엇을 참고할지 → 무엇을 바꾸지 말지 → 어떻게 완료를 확인할지

예: “검색 기능을 추가하되, 현재 목록 화면과 데이터 형식은 유지하고, 결과가 없는 경우까지 확인해 줘.”

5. 반복 규칙은 AGENTS.md에, 기존 프로그램은 분석부터

프로젝트 지침 파일을 활용합니다

AGENTS.md는 Codex가 프로젝트 작업 지침을 참고하도록 두는 파일입니다. OpenAI 문서는 전역 지침과 프로젝트·하위 폴더 지침을 조합하는 방식을 설명합니다. 처음에는 프로젝트 루트에 필요한 규칙을 짧게 작성하고, 다음 작업을 시작할 때 어떤 지침을 읽었는지 확인해 보세요. [AGENTS.md 공식 안내]

# 프로젝트 작업 규칙

## 작업 방식
- 설명은 한국어로 작성한다.
- 작업 전 현재 폴더, 기존 파일, 미커밋 변경을 확인한다.
- 복잡한 변경은 계획을 제시하고 승인 후 구현한다.
- 요청한 기능에 필요한 최소 범위만 수정한다.
- 사용자가 수정한 내용은 임의로 되돌리지 않는다.

## 승인과 정보 보호
- 새 패키지 설치, 외부 서비스 연결, 파일 삭제, 배포는 먼저 확인한다.
- 실제 개인정보, 운영 데이터, 비밀키를 예제나 로그에 넣지 않는다.
- 민감한 파일에 접근이 필요하면 이유를 설명하고 먼저 확인한다.

## 검증과 보고
- 프로젝트에 실제 존재하는 실행·검증 방법을 확인한다.
- 실행한 테스트, 코드 검토, 실행하지 못한 테스트를 구분한다.
- 바뀐 파일, 변경 이유, 남은 위험을 요약한다.
- 커밋·푸시·배포는 명시적으로 승인받은 범위에서만 실행한다.

이미 AGENTS.md가 있다면 내용을 무조건 덮어쓰지 말고 기존 규칙과 맞춰 수정합니다. 이 파일은 작업 지침이며, 운영체제 권한·샌드박스·회사 보안 통제를 대신하지 않습니다.

이미 개발 중인 프로그램을 개선하려면

기존 프로젝트에서는 “처음부터 다시 만들어 줘”보다 아래처럼 현재 구조와 변경 범위를 먼저 확인하게 하는 편이 낫습니다. 새로 만드는 실습의 파일 생성 요청을 기존 프로그램에 그대로 사용하지 마세요.

새 프로젝트를 만들지 말고 현재 프로그램의 [개선할 기능]을 분석해 주세요.
먼저 계획만 제시하고, 승인 후 구현해 주세요.

[현재 불편한 점]
문제가 생기는 상황을 적습니다.

[원하는 결과]
기대하는 동작과 예외 처리를 적습니다.

[유지할 것]
기존 기능, 공개 인터페이스, 데이터 형식, 관계없는 화면은 유지합니다.
전체 재작성, 대규모 파일 이동, 의존성 추가는 먼저 제안합니다.
기존의 미커밋 변경사항은 되돌리거나 덮어쓰지 마세요.
운영 데이터 대신 새로 만든 가상 데이터로 검증합니다.

관련 파일, 원인 후보, 최소 변경 범위, 테스트 방법,
이번 작업만 되돌리는 방법을 설명해 주세요.

6. 비용·보안·작업 마무리에서 놓치지 말 것

ChatGPT 로그인과 API 과금은 다릅니다

확인 기준일의 공식 도움말은 Codex가 Free·Go를 포함한 ChatGPT 요금제에 제공되며, 사용량 한도는 요금제에 따라 다르다고 안내합니다. 이용 가능과 무제한 사용은 같은 말이 아닙니다. 실제 계정의 사용량·워크스페이스 제한을 확인하세요. [요금제별 이용 안내]

API 키로 로그인하는 경로는 OpenAI Platform의 API 요율로 과금됩니다. 이번 글은 ChatGPT 계정 로그인과 로컬 학습 예제를 기준으로 하며, 만들어진 할 일 프로그램 자체에 GPT 호출 기능을 넣지 않습니다. [인증·과금 구분]

내 PC에서 작업해도 완전한 오프라인 개발은 아닙니다

Codex는 작업 맥락을 바탕으로 모델에 요청을 보내고 도구 실행 결과를 활용합니다. 파일이 PC에 있다는 이유만으로 코드나 관련 데이터가 외부 서비스에 전달되지 않는다고 생각하면 안 됩니다. 회사 소스는 승인된 계정·도구·정책 범위에서 다루고, 실제 개인정보와 비밀키는 실습에 사용하지 마세요. [Codex 에이전트 동작 설명]

편의를 위해 처음부터 Full Access를 허용하는 방식은 피하세요. 공식 Windows 문서도 전체 접근 모드에서 프로젝트 밖의 변경과 데이터 손실 위험을 경고합니다. 파일 삭제·새 패키지 설치·외부 연결·배포 요청은 목적과 범위를 확인한 뒤 승인합니다. [샌드박스 주의사항]

잘 작동하는 상태를 남기고 끝냅니다

이번 작업을 마무리하기 전에 변경 파일과 검증 결과를 요약해 주세요.
Git을 사용 중이면 기존 변경과 이번 변경을 구분하고,
이번 작업에 해당하는 파일만 커밋할 계획을 제안해 주세요.
승인 없이 커밋·푸시·배포·파일 삭제를 실행하지 마세요.

다음 작업을 위한 메모에는 현재 완성된 기능, 남은 문제,
실행 방법, 다음에 할 작은 작업 한 가지를 적어 주세요.

실행되는 파일을 얻는 것과 인터넷에 공개하거나 사내 운영에 적용하는 것은 별개의 단계입니다. 실제 서비스에는 인증·권한·저장·백업·보안 검토 등 추가 설계가 필요할 수 있습니다. 이번 글의 완료 기준은 작은 학습용 기능을 직접 실행하고 검토하는 것입니다.

7. 자주 묻는 질문

Q. 코딩을 전혀 몰라도 시작할 수 있나요?

작은 실습부터 시작할 수 있습니다. 다만 작업 폴더를 찾는 법, 오류를 전달하는 법, 바뀐 파일을 확인하는 법은 함께 익히세요. 기능이 보인다는 이유만으로 중요한 업무에 바로 적용하지 않는 것이 좋습니다.

Q. 일반 ChatGPT 대화창에 요청하는 것과 무엇이 다른가요?

핵심은 실제 작업 폴더와 도구가 연결되어 있는지입니다. Codex는 연결된 코드와 허용된 도구를 활용해 파일 변경을 수행할 수 있습니다. 일반 대화창에 요청했다는 사실만으로 PC의 파일이 바뀐다고 생각하지 마세요. [Codex IDE 안내]

Q. Node.js나 React가 꼭 필요한가요?

위 실습은 HTML·CSS·JavaScript 파일만 만들도록 범위를 정했습니다. React 프로젝트나 별도 개발도구를 사용하는 다음 단계에서는 그 프로젝트가 요구하는 실행 환경을 확인해야 합니다. 도구를 먼저 모두 설치하기보다 만들 프로그램에 필요한 구성을 정하세요.

Q. 어떤 모델을 선택해야 하나요?

현재 Codex 화면에서 제공되는 모델과 기본 설정부터 확인하세요. 이용 가능한 모델과 설정은 계정·워크스페이스·버전에 따라 영향을 받으므로 이 글은 특정 모델명을 필수 조건으로 두지 않습니다. [계정·모델 설정 안내]

Q. 요청을 계속했는데 점점 더 꼬이면 어떻게 하나요?

새 기능 요청을 잠시 멈추고 마지막 정상 상태와 이후 변경 파일을 비교하세요. 전체를 무작정 재작성하기보다 가장 작은 재현 사례로 원인을 좁히고, 이번 작업만 되돌릴 방안을 확인하세요.

마무리: 좋은 바이브 코딩은 “요청”보다 “확인”까지

처음 목표는 거창할 필요가 없습니다. 할 일을 등록하고 완료 처리하는 작은 화면 하나면 충분합니다. 그 안에서 계획 → 구현 → 실행 → 수정 → 검토의 흐름을 익혀 보세요.

코드는 Codex와 함께 만들되, 무엇을 만들고 어디까지 허용하며 어떤 결과를 통과로 볼지는 사람이 정합니다. “AI가 만들었다”보다 “내가 확인한 기능이 하나 늘었다”를 첫 목표로 삼아 보세요.

공식 참고자료

Codex IDE 확장 · 로그인·인증 · ChatGPT 요금제와 Codex
프롬프팅 · 모범 사례 · AGENTS.md
Windows 샌드박스 · 권한·승인 · 에이전트 동작

이 글은 공식 문서에 근거한 학습 안내이며 특정 PC에서 실습을 실행한 사용 후기는 아닙니다. 요청문은 자체 구성한 예시입니다. 메뉴·모델·요금제·사용량·지원 환경은 변경될 수 있으므로 실제 이용 시 공식 안내를 다시 확인하세요. OpenAI·Codex는 해당 권리자의 명칭이며, 이 글은 공식 제휴·후원 콘텐츠가 아닙니다.

잘못된 내용이나 변경된 정보가 있다면 댓글로 알려 주세요. 공식 자료를 확인하여 보완하겠습니다.

또 다른 포스팅 보러가기

꿀냥숭닭 데일리 네이버 블로그 바로가기 →

중소기업 인사담당자를 위한 실무형 HR 블로그 : 네이버 블로그

 

#코덱스 #Codex #바이브코딩 #코덱스사용법 #Codex사용법 #바이브코딩입문 #바이브코딩방법 #AI코딩 #AI개발 #인공지능개발 #챗GPT #ChatGPT #오픈AI #OpenAI #VSCode #비주얼스튜디오코드 #코딩입문 #비개발자코딩 #프로그램만들기 #웹개발입문 #업무자동화 #AI업무도구 #프롬프트작성법 #코딩프롬프트 #코드리뷰 #오류수정 #AGENTSmd #할일관리 #개발생산성 #꿀냥숭닭데일리