Codex로 바이브 코딩 — 2시간 라이브 실전 (세팅부터 ERP·회의록 앱 배포까지)

빌더 조쉬의 2026-05-13 라이브 편집본. Codex CLI 세팅·플러그인·스킬·바이브 코딩 워크플로우를 처음부터 끝까지 시연. “문서·하네스를 먼저 깎고 마지막에 한 번에 실행” 이 라이브의 핵심 주장.

원본 transcript: 00-Inbox/youtube/ZDfNfEGo7Fc.ko.vtt (불변 보존)

핵심 요약 (5줄)

1. Codex CLI는 한 줄 npm 설치로 시작. /permission 으로 풀 액세스(YOLO) + /fast 로 1.5× 토큰 가속이 기본 세팅.
2. 플러그인은 MCP + 스킬 패키지 — 하나만 깔면 도구 연동(MCP)과 워크플로우(스킬)가 자동 세팅됨.
3. 바이브 코딩의 성공률은 사전 4문서 하네스(Plan / 상세설계 Design / 스타일 DESIGN.md / AGENTS.md)에서 결정된다. → 4단계-문서-하네스
4. bkit 플러그인의 PDCA-바이브코딩 워크플로우로 ERP(휴가 시스템)를 무에러로 빌드.
5. goal 모드로 실시간 회의록 앱을 482초 만에 자율 구현 + Vercel 자동 배포까지 완료 (시연 도중 API 호출 실패는 Codex 스스로 재배포로 해결).

IDEAS (영상이 제시한 주장·통찰)

1. Codex가 대세인 진짜 이유는 토큰 효율 — 동일 작업을 더 적은 토큰으로 끝낸다.
2. /goal 슬래시 커맨드는 목표 → 검증 → 배포 → 보고 전체를 자율 루프로 돌린다.
3. 바이브 코딩은 “코딩을 시작”하는게 아니라 “문서를 끝까지 깎는” 작업이다.
4. 상위 기획서(Plan) 와 상세 기획서(Design) 는 분리되어야 한다 — 상세 기획서가 360줄 정도로 깊을수록 에러 없는 결과물이 나온다.
5. DESIGN.md(스타일 가이드)는 Plan/Design(설계서)과 다른 별개 문서다. 시각적 디자인 시스템을 명세한다.
6. AGENTS.md 는 Codex·Claude Code·Gemini가 공통으로 따르는 cross-tool 시스템 가이드라인 표준이다.
7. 플러그인 ≠ MCP 단독 — 플러그인 = MCP + 스킬 패키지. 설치 한 번으로 도구·워크플로우 동시 세팅.
8. 스킬은 토큰을 덜 먹는다 — 규격화된 .md라 AI가 재해석할 필요가 없어 서브에이전트보다 효율적.
9. Codex CLI는 IDE에 종속되지 않는다 — Cursor·VS Code·Antigravity 어디서든 터미널 하나로 동일하게 동작.
10. Codex의 기본 imagegen 스킬(이미지 2.0 모델)이 빌트인이라는 점이 차별점 — 별도 모델 호출 없이 PPT·랜딩 페이지에 이미지 합성 가능.
11. getdesign.md 같은 디자인 시스템 카탈로그에서 .md 한 파일을 복사하면 무미건조한 시안이 즉시 고도화된다.
12. 한국 시장 대응: 오마이디자인.kr 에는 토스·당근·배달의민족 등 한국 기업 디자인 시스템이 .md 포맷으로 정리되어 있다.
13. 풀 액세스(YOLO) 모드는 매 단계 승인 요구를 제거 — 바이브 코딩의 흐름을 끊지 않으려면 필수.
14. Fast 모드는 토큰을 1.5배 더 쓰는 대신 결과 속도를 높인다 — 시간이 토큰보다 비싸면 켠다.
15. AGENTS.md는 한글로 작성하는게 유지보수에 유리하다 (토큰 1.7배 차이는 무시할 수준).
16. 시연의 저주(Live Demo Curse) — 라이브 강의·시연에서는 평소 멀쩡한 기능이 깨진다. /goal 자율 루프로 즉시 재배포 가능.
17. Codex는 리뷰 요청 시 효과음(딩동)을 낸다 — 다른 코딩 에이전트와 차별화된 UX.
18. 모델 변경 시 일부 설정(reasoning_effort)이 새 세션에 이관되지 않는 버그가 있다.
19. Codex의 진짜 가치는 코딩이 아니라 일상 업무(피그마 디자인·PPT·문서) 자동화일 수 있다.
20. 비개발자가 OpenAI API 키 한 개로 음성 전사 앱을 482초 만에 배포 + URL 확보까지 — 진입장벽이 사실상 사라졌다.

INSIGHTS (더 깊은 의미)

I1. “코딩”이 아닌 “기획서 작성”이 본업이 됐다

바이브 코딩 성공률의 결정 변수는 LLM 성능이 아니라 사전 작성 문서의 깊이다. 이 영상은 4단계 문서 하네스(Plan → Design → DESIGN.md → AGENTS.md)를 1시간 가까이 세팅한 뒤 단 한 번의 명령으로 ERP를 완성하는 패턴을 시연한다. 개발자의 핵심 역량이 “코드를 잘 짜기”에서 “AI가 흔들리지 않게 문서로 가드레일을 친다”로 옮겨가는 하네스 엔지니어링 패러다임의 실증.

I2. AGENTS.md는 cross-tool 표준이 되고 있다

OpenAI Codex·Claude Code·Gemini가 공통으로 AGENTS.md 를 시스템 프롬프트 진입점으로 인식한다는 점은 단순 우연이 아니다. CLAUDE.md / .codex.md 같은 벤더별 파일은 사라지고, 벤더 중립 .md 표준으로 수렴 중이다. 이는 사용자가 LLM 벤더를 자유롭게 갈아탈 수 있는 환경을 만든다.

I3. 플러그인 = MCP + 스킬 패키지화

“MCP 명령어를 따로 친다”는 초기 패턴은 사라지고, 플러그인 단위로 묶인다. 스킬(.md)이 MCP(도구 연결)와 함께 포장되면서 사용자는 MCP라는 단어를 몰라도 된다. 플랫폼 추상화 계층이 한 단계 위로 올라간 사건.

I4. /goal = 자율 루프의 첫 본격적 상용화

Goal Mode는 종료 조건만 명시하면 AI가 계획·실행·검증·재배포를 자율 반복한다. 시연에서 API 호출 실패 → Codex가 진단 → 재배포 → 음성 전사 성공으로 이어진 흐름은 인간 개입 없는 자율 디버그 루프의 가능성을 보여준다. (단 모델 선택을 미디엄으로 시작하면 PRD 단계 건너뛰고 HTML을 만들어버리는 등 종료 조건 명확성이 모델 성능에 좌우됨)

I5. 토큰 효율이 새로운 차별화 축이다

GPT-5.5 + High Reasoning + Fast 조합으로도 토큰 소모량이 받아들일 만하다는 평가. Codex가 Claude Code 대비 압도적이라는 인식의 근거는 단순 정확도가 아닌 요청당 토큰 비용. 이는 다중 에이전트 운영·라이브 시연·8시간 단위 자율 루프 같은 고빈도 사용 시나리오에서 결정적이다.

I6. 디자인 시스템 .md의 표준화

getdesign.md / 오마이디자인 같은 카탈로그가 등장한 것은 디자인 시스템 = .md 파일 이라는 합의가 형성됐다는 신호. 디자이너가 만든 시각 자산을 LLM이 그대로 소비할 수 있는 포맷이 표준화되면서 디자인-개발 경계가 빠르게 무너지는 중.

I7. 비개발자 진입장벽의 본질적 해체

영상 후반의 음성 전사 앱 시연은 ① OpenAI API 키 발급 ② .env에 넣기 ③ /goal로 던지기 ④ Vercel URL 확보 — 4단계로 완결된다. 코드를 한 줄도 보지 않고 프로덕션 앱을 배포한다는 점은 “AI는 코딩을 대체하지 않는다”는 주장과 정면 충돌. 적어도 MVP 수준의 SaaS 빌딩은 이미 대체됐다.

QUOTES (인상적 발언)

• “이거 만들고 안 만들고의 차이가 너무나도 크기 때문에 저는 여러분들께 꼭 추천드리는 바이긴 합니다.” (4단계 문서 하네스에 대해)
• “바이브 코딩은 사실은 그냥 예를 들면 휴가 시스템 만들어 줘라고 시작하는게 아니고요. 말 그대로 문서와 하네스 세팅을 초반부에 열심히 열심히 깎고 깎고 한 다음에 마지막에 한 번에 쫙 실행시켜 버리는게 좋은 바이브 코딩의 방향이다.”
• “스킬은 우선은 하나 만들어 놓고 여러 반복 작업들을 계속 반복 재사용을 하는 경우도 상당히 좋지만 저거 자체가 생각보다 토큰을 되게 덜 먹는 방식 중에 하나예요.”
• “Codex는 오픈AI가 만든 이쪽의 코딩 도구다라고 보시면 좋겠고요. 토큰 면에서 정말 강점이 있는 거 같고.”
• “사실상 우리가 상상하는 모든 것들을 직접 스스로 만들 수 있는 시대가 된 거 같아요.”
• “라이브는 시연의 저주라는게 있습니다. 여러분 잘 아시죠?”
• “목표 처리 시간은 482초다.” (실시간 회의록 앱 /goal 자율 구현 종료 시점)

REFERENCES (언급된 인물·조직·도구)

[
  {"name": "OpenAI Codex", "type": "tool"},
  {"name": "OpenAI", "type": "org"},
  {"name": "Codex CLI", "type": "tool"},
  {"name": "Codex App", "type": "tool"},
  {"name": "GPT-5.5", "type": "tool"},
  {"name": "Image 2.0", "type": "tool"},
  {"name": "Cursor", "type": "tool"},
  {"name": "VS Code", "type": "tool"},
  {"name": "Antigravity", "type": "tool"},
  {"name": "Claude Code", "type": "tool"},
  {"name": "Gemini", "type": "tool"},
  {"name": "Vercel", "type": "tool"},
  {"name": "Figma", "type": "tool"},
  {"name": "Notion", "type": "tool"},
  {"name": "Slack", "type": "tool"},
  {"name": "Gmail", "type": "tool"},
  {"name": "bkit", "type": "tool"},
  {"name": "팝업 스튜디오", "type": "org"},
  {"name": "getdesign.md", "type": "tool"},
  {"name": "오마이디자인", "type": "tool"},
  {"name": "Framer Design System", "type": "concept"},
  {"name": "토스 디자인 시스템", "type": "concept"},
  {"name": "당근 디자인 시스템", "type": "concept"},
  {"name": "배달의민족 디자인 시스템", "type": "concept"},
  {"name": "프리텐다드(Pretendard)", "type": "tool"},
  {"name": "AGENTS.md", "type": "concept"},
  {"name": "DESIGN.md", "type": "concept"},
  {"name": "PDCA", "type": "concept"},
  {"name": "PRD", "type": "concept"},
  {"name": "MCP", "type": "concept"},
  {"name": "빌더 조쉬", "type": "person"},
  {"name": "비키 대표님", "type": "person"}
]

FACTS (검증 가능한 사실)

• 라이브 원본 길이: 2시간 30분 (편집본은 65분, 3871초)
• /goal 자율 구현 + Vercel 배포: 482초
• Codex CLI 설치 명령: npm install -g @openai/codex (한 줄)
• bkit 플러그인의 Plan 문서 길이: ~143줄, Design 문서: ~360줄 (휴가 시스템 ERP 기준)
• Fast 모드 토큰 사용량: 표준 대비 1.5배
• 한국어 vs 영어 토큰 효율: 한글이 영어 대비 1.7배 토큰 소모 (출연자 인용)
• 풀 액세스 모드 명칭: Full Access (코덱스 공식), 일반 호칭은 YOLO
• 새 기본 모델: GPT-5.5 + High Reasoning + Fast (출연자 권장 세팅)
• Codex의 /goal 기능은 기본 모드에 없음 — config.toml에 [features] goals = true 명시 필요

HABITS (실천 가능한 습관)

• 항상 4문서 먼저: Plan.md → Design.md(상세 설계) → DESIGN.md(스타일) → AGENTS.md(시스템 가이드) 순서로 세팅 후에만 /do 명령 실행.
• bkit /PDCA: 신규 프로젝트는 무조건 /PDCA <요구사항> 으로 시작 — Plan/Design 자동 분리 생성.
• AGENTS.md는 한글로 유지: 영어로 자동 생성된 AGENTS.md는 즉시 “한글로 다시 써줘”로 재작성 (유지보수 가독성).
• 모델·reasoning 변경 후 새 세션 확인: 모델 설정이 새 세션에 이관되는지 확인 (이관 실패 버그 존재).
• 풀 액세스 + Fast 기본 세팅: 매 작업 시작 시 /permission full-access + /fast on 으로 끊김 없는 흐름 확보.
• getdesign.md / 오마이디자인에서 .md 카피: 새 UI 작업 전 디자인 시스템 .md를 DESIGN.md로 복사.

RECOMMENDATIONS (실행 권고)

• 첫 Codex 사용자: 작은 ERP 1개를 4문서 하네스로 만들어 보기 — 빈손 프롬프트와의 품질 차이를 직접 체감.
• 회사 도입: AGENTS.md 표준을 사내 표준 시스템 프롬프트로 채택 — Codex/Claude Code/Gemini 어디서든 동작.
• 디자이너 협업: DESIGN.md 카탈로그에서 회사 톤에 맞는 .md를 골라 공용 디자인 베이스라인으로 채택.
• 자율 운영 시나리오: /goal은 명확한 종료 조건(예: Vercel URL 확인 + 기능 검증 통과)을 함께 줄 때만 사용 — 모호하면 끝없이 돌거나 잘못된 결과로 종료.
• API 키 관리: .env 파일에 OPENAI_API_KEY 저장하는 패턴을 표준화하고 .gitignore에 반드시 추가.
• 모델 선택: 단순 시연·문서 작성은 미디엄도 가능하지만, ERP·앱 빌드는 GPT-5.5 + High Reasoning 권장.

영상 흐름 타임라인 (편집본 기준)

시점	내용
0:00	하이라이트 (ERP·회의록 앱 데모 미리보기) + 라이브 소개
0:44	Codex가 대세인 이유 + /goal 소개
1:44	npm으로 Codex CLI 설치 + 초기 세팅
2:26	YOLO 모드(Full Access) + Fast 모드 + GPT-5.5 High 설정
3:05	Codex App + 플러그인 생태계 (Figma·Gmail·Notion·Slack)
4:13	[[wiki/entities/bkit
5:24	이미지·프레젠테이션 스킬로 PPT 자동 생성
6:13	getdesign.md로 DESIGN.md 추출 + Figma 랜딩 페이지 고도화
7:03	바이브 코딩 1: 회사 휴가 등록 ERP + Vercel 배포
8:20	AGENTS.md 시스템 가이드 작성 (한글로 재작성)
8:53	바이브 코딩 2: /goal로 실시간 미팅 회의록 앱
10:03	OpenAI 음성 전사 API 연동 + 시연의 저주 + 재배포 + 최종 URL 확보

관련 자료

• openai-codex — Codex 본체. 이 영상은 Codex의 실전 사용 흐름 중 “비개발자가 직접 배포까지” 시나리오를 시연.
• goal-mode-자율루프 — 이 영상이 /goal로 실증한 자율 루프 개념의 일반론.
• 4단계-문서-하네스 — 이 영상이 명시화한 Plan/Design/DESIGN.md/AGENTS.md 4문서 패턴.
• AGENTS-md — Codex/Claude Code/Gemini가 공통 인식하는 cross-tool 시스템 프롬프트 표준.
• PDCA-바이브코딩 — bkit이 구현한 Plan-Design-Check-Act 사이클의 바이브 코딩 버전.
• bkit — 이 영상에서 시연된 PDCA 자동화 플러그인.
• 빌더-조쉬 — 이 영상의 진행자.
• harness-engineering — 이 영상의 4문서 패턴은 하네스 엔지니어링의 비개발자 친화 응용.
• vibe-coding — 이 영상이 시연한 패러다임.

비교: 다른 Codex 사례

• yt-MpeuOAmctAg-Codex-하네스-엔지니어링-실습 — ZeroCho의 데스크탑 앱 빌드(Tauri+Rust) 사례. 이 영상은 그보다 비개발자 친화 시나리오에 초점.
• yt-6RdMjPYt84o-Codex-goal-AI에이전트-비법3가지 — /goal 모드의 3원칙 정리. 이 영상은 그 원칙을 실제 배포 시연으로 검증.
• yt-wG5Uot1cMv0-코덱스-초보자-가이드-2026 — Codex 초보자 가이드. 이 영상은 거기서 한 단계 더 나아간 하네스 + /goal 실전.