JYP Garden

Codex가 최고라는 소문 직접 검증합니다 — 세팅부터 실전 앱 개발까지

Properties1
tagscodex-cli, vibe-coding, ai-coding, openai, 바이브코딩, 하네스, 라이브, knowledge

10 min read

Codex가 최고라는 소문 직접 검증합니다 — 세팅부터 실전 앱 개발까지

채널: 빌더-조쉬 | 64분 라이브 세션 | OpenAI Codex CLI 세팅 + 바이브 코딩 실습

핵심 주제

Codex CLI를 처음 설치하는 과정부터 4문서 방법론으로 실제 ERP 앱을 만드는 전 과정을 라이브 시연.

IDEAS (핵심 아이디어)

  1. Codex CLI는 터미널에서 동작하는 OpenAI의 코딩 도구로, npm으로 한 줄 설치 가능
  2. Fast 모드는 토큰을 1.5배 소비하지만 결과 속도를 높여줌 — 토큰 예산과 trade-off 필요
  3. Permission 모드(Auto Review vs Full Access)로 AI 승인 요청 빈도를 조절
  4. Codex 내장 모델로 이미지 2.0(DALL·E) 활용 가능 — 타 도구 대비 토큰 효율 우위
  5. Plugin = MCP + Skill 패키지 — 별도 MCP 설정 없이 플러그인 하나로 통합 설치
  6. AntiGravity 등 여러 IDE(커서, VS Code)에서 Codex CLI를 터미널로 불러와 사용 가능
  7. Skill(.md) = 재사용 가능한 워크플로우 파일 — 토큰 절감 효과 있음 (규격화된 루틴)
  8. $ 명령어로 설치된 스킬 목록을 호출하고 선택하여 실행
  9. Figma 플러그인 연동 시 디자인 파일, 랜딩 페이지, 문서를 Codex로 직접 생성 가능
  10. design.md 파일로 디자인 시스템을 정의하면 산출물 품질이 크게 향상됨
  11. getdesign.md 사이트에서 대기업 디자인 시스템 .md 파일 무료 다운로드 가능
  12. OhMyDesign.ai — 한국 기업(배민, 토스, 당근) 디자인 시스템 모음, 한국어 친화적
  13. Vixi(비킷) 플러그인 — PRD/설계 문서 자동 생성에 특화된 플러그인 (저자 즐겨 사용)
  14. PDCA 스킬 (Vixi 제공) — Plan-Design-Code-Analysis 단계로 개발 진행
  15. 바이브 코딩 성공의 핵심 = 코딩 전 문서화 품질 (플랜 > 설계 > 스타일 > 에이전트 순)
  16. agent.md 파일 = 프로젝트 전반의 원칙·규칙·서브에이전트 지시 모음 (지속 업데이트)
  17. 플랜 문서(상위 기획서)와 디자인 문서(상세 기획서)를 분리하면 에러율 감소
  18. 휴가 관리 ERP를 단일 프롬프트 세션으로 완성 → Vercel에 URL 배포까지 자동
  19. 실시간 미팅 기록 앱도 단일 세션으로 완성 → 배포 + DB 세팅 포함
  20. Codex CLI는 멀티 창으로 병렬 작업 가능 (PPT 생성 + 피그마 디자인 동시 진행)
  21. /goal 명령 — 목표 지정 후 배포까지 한 번에 수행하는 자동화 모드
  22. 에이전트.md 파일은 영어 대신 한국어로 작성하는 것을 저자는 선호
  23. Vixi는 비발자(비개발자)도 바이브 코딩 진입 장벽을 낮추는 실용적 플러그인
  24. 이미지+스킬을 PPT에 붙여 넣기 가능 — 이미지 생성과 프레젠테이션 워크플로우 통합

INSIGHTS (통찰)

  1. 문서 우선 바이브코딩: 좋은 결과물은 “코딩을 잘 시키는 것”이 아니라 “AI에게 충분한 컨텍스트 문서를 주는 것”에서 나온다. 플랜·설계·스타일·에이전트 4문서 체계가 에러율을 낮추는 핵심.
  2. 플러그인 = MCP + Skill 통합 패키지: 개별 MCP 설정의 복잡성을 플러그인 하나로 추상화. Codex 생태계가 Claude Code의 skills 패러다임과 동일한 방향으로 수렴 중.
  3. Skill 파일의 토큰 경제: 프롬프트를 매번 재해석하는 것보다, 규격화된 Skill.md를 재사용하면 AI의 추론 부담이 줄어 토큰 효율이 향상됨.
  4. 디자인.md = 시각적 컨텍스트의 전달 방식: 피그마 플러그인 없이도 오픈소스 디자인 시스템 문서를 붙여넣어 일관된 UI를 생성할 수 있음. 프롬프트만으로 UI 품질을 높이는 저비용 방법.
  5. Codex CLI의 포지셔닝: Claude Code와 기능적으로 유사하나, 이미지 생성·피그마 통합·자체 앱 UI 측면에서 비개발자 접근성이 더 높음. “개발자용 Claude Code” vs “디자이너·기획자용 Codex CLI” 구도.

QUOTES (인용)

  • “바이브 코딩은 그냥 예를 들면 휴가 시스템 만들어 줘라고 시작하는게 아니고요. 문서와 하네스 세팅을 초반에 열심히 깎고 한 다음에 마지막에 한 번에 쫙 실행시켜 버리는게 좋은 바이브 코딩의 방향입니다.”
  • “스킬 파일을 하나 만들어 두게 되면은 이거 자체가 어느 정도는 딱 규격화된 내용으로 AI가 별다른 생각을 할 필요가 없이 딱 저 내용만 팔로업을 잘 하기 때문에 큰 효율적인 형태로 쓸 수 있는 장점들이 있는 재사용 가능한 워크플로우 파일이다.”
  • “플러그인이라고 하는 개념을 제가 아는 바에서만 설명을 드리면 MCP랑 스킬이 같이 들어가 있는 패키지예요.”
  • “이것들을 만들고 만드는 것과 만들지 않는 것이 차이가 너무나도 크기 때문에 여러분들께 꼭 추천드리는 바이긴 합니다.”
  • “코덱스 CLI는 어디서 돌아가느냐? 터미널이라는 데서 돌아갑니다.”

REFERENCES

이름유형비고
[[wiki/entities/openai-codexCodex CLI]]tool
빌더-조쉬person유튜버, 디자이너, AX 실무자
AntiGravitytoolIDE (저자 사용)
Vixi(비킷)toolPRD 문서화 특화 플러그인
Figmatool디자인 도구, Codex 플러그인 연동
getdesign.mdservice디자인 시스템 .md 파일 저장소
OhMyDesign.aiservice한국 기업 디자인 시스템 모음
PDCAconceptPlan-Design-Code-Analysis 방법론
Vercelservice배포 플랫폼
이미지 2.0modelOpenAI 이미지 생성 모델

FACTS

  • Codex CLI Fast 모드는 토큰을 1.5배 더 사용
  • Vixi PDCA 방법론에서 플랜 문서 = ~143줄, 설계 문서 = ~360줄
  • 라이브 세션에서 휴가 관리 ERP + 실시간 미팅 기록 앱 2개를 단일 세션에서 완성
  • Permission 모드: auto_review(권장) vs full_access(스킵 모드)
  • Codex CLI 설치: npm install -g @openai/codex (한 줄)
  • agent.md는 OpenCode, Gemini, Codex에서 공통으로 사용되는 업계 표준 규약

HABITS

  • 바이브 코딩 시작 전 항상 4개 문서를 먼저 완성 (플랜 → 설계 → 스타일 → 에이전트)
  • 코딩 IDE는 무료 플랜으로도 충분 — 도구 비용보다 워크플로우가 중요
  • agent.md는 한국어로 작성하여 AI 컨텍스트를 언어 장벽 없이 유지

RECOMMENDATIONS

  • 비개발자 입문: Codex 앱 → 플러그인 탐색 → Skill 호출 순서로 시작
  • 바이브 코딩 품질 향상: 플랜 문서 + 설계 문서 + design.md + agent.md 4개 준비 후 개발
  • 디자인 시스템 빠른 적용: getdesign.md 또는 OhMyDesign.ai에서 기업 디자인 시스템 .md 다운로드
  • 토큰 절감: Skill 파일 재사용으로 반복 프롬프트 비용 절감
  • Figma 사용자: Figma 플러그인 설치 → design.md 작성 → $use-figma 스킬로 자동 디자인

그래프 뷰