Codex + Claude Code 실험 진행 중

바이브코딩 실험실

Codex와 Claude Code를 활용해 아이디어를 실제 작동하는 웹앱으로 만드는 AI Product Build 실험을 기록하는 공간입니다. 강좌 따라하기가 아니라, 기획부터 배포까지 완주하는 과정과 결과물을 누적합니다.

바이브코딩 실험실이란

AI 코딩 에이전트를 활용하면 아이디어를 빠르게 작동하는 결과물로 만들 수 있습니다. 하지만 코드가 생성된다고 해서 제품이 완성되는 것은 아닙니다. 무엇을 만들지 정의하고, 어떤 순서로 AI에게 지시할지 설계하고, 결과를 검증하고, 배포까지 연결하는 흐름을 사람이 직접 설계해야 합니다.

바이브코딩 실험실은 그 과정을 처음부터 끝까지 실제로 해보고 기록하는 공간입니다. 각 실험은 소규모 MVP 수준의 AI Product Build 학습 결과물로, 정식 서비스가 아닌 실험 기록으로 공개됩니다.

실험 흐름

각 실험은 다음 흐름으로 진행합니다.

Plan — 아이디어와 기능 범위를 정의합니다.
Design — DESIGN.md 또는 AGENTS.md 형태로 설계 기준을 문서화합니다.
Do — Codex 또는 Claude Code를 활용해 구현합니다.
Check — 로컬 빌드, lint, 기능 검증으로 결과를 확인합니다.
Deploy — GitHub → Cloudflare Pages로 배포합니다.
Asset — 실험 과정과 결과를 chulbuji.com Log / Insight에 기록 자산으로 남깁니다.

개발 환경은 Codex CLI와 Claude Code CLI를 중심으로 운영하며, 로컬에서 시작해 GitHub 버전 관리 → Cloudflare Pages 배포 → chulbuji.com 기록 연결 순서로 완주합니다.

Codex 실습 사례

OpenAI Codex를 활용해 진행한 AI Product Build 실험입니다. 각 사례는 하나의 독립적인 웹앱으로, 기획부터 Cloudflare Pages 배포까지 전 과정을 Codex와 함께 완주한 결과물입니다.

001 Codex MVP 배포 완료 · 실험 기록

Commit Hero

GitHub username을 입력하면 공개 GitHub 활동 데이터를 바탕으로 RPG 스타일 개발자 카드를 생성하는 웹앱입니다. Codex Master Class 학습 과정에서 Plan, Design, Do, Check, GitHub 배포, Cloudflare Pages 배포까지 연결해 본 AI Product Build 실험입니다. 개발 과정과 기술 선택 배경은 제작 기록에서 확인할 수 있습니다.

Vite React TypeScript GitHub API Cloudflare Pages

MVP 실행해 보기 ↗ 제작 기록 보기 →

Claude Code 실습 사례

Claude Code는 Codex와 다른 방식으로 활용하고 있습니다. Codex가 아이디어를 새로운 웹앱으로 빠르게 구현하는 데 강점이 있다면, Claude Code는 실제 운영 중인 프로젝트의 구조를 이해하고 그 안에서 정밀하게 작업하는 데 강점이 있습니다.

현재 chulbuji.com의 Log·Insight 콘텐츠 추가, 빌드 검증, 파일 구조 정합성 유지 등 반복적인 운영 자산 생성에 Claude Code를 활용하고 있습니다. 외부에 독립 배포하는 웹앱 형태의 실험 사례는 현재 기록을 정리하는 중입니다.

현재 Claude Code 활용 상태

Claude Code는 chulbuji.com의 운영 자동화, 콘텐츠 구조화, 빌드 검증 작업에 사용 중입니다. 독립 배포형 실험은 결과가 정리되는 순서대로 이 섹션에 추가합니다.

바이브코딩 실험실