자연어로 프로그래밍하는 새로운 시대
⏱️ 60분 | 👨💼 심재우 대표 | 💻 코덱스 · 클로드코드
자연어로 프로그래밍하는 개념과 흐름 이해
코덱스/클로드코드를 직접 사용하며 체험
실제 웹사이트를 자연어 명령으로 개발
의도→생성→검수→반복 사이클 체득
Vibe Coding (바이브 코딩)은 전통적인 코딩 문법을 외우지 않고,
자연어 지시만으로 AI에게 프로그래밍을 시키는 새로운 개발 방식입니다.
AI가 코드를 작성하고, 개발자는 의도·검수·방향만 제시합니다.
💡 핵심: 코딩 문법 불필요. 한국어로 "무엇을 만들지" 설명하면 끝.
| 단계 | 전통 코딩 | 바이브코딩 |
|---|---|---|
| 1단계 | 문법 학습 (HTML, CSS, JS) | 의도 정의 (한국어로) |
| 2단계 | 코드 작성 (손으로 타이핑) | AI 자동 생성 |
| 3단계 | 디버깅 (에러 찾기) | 검수 및 수정 요청 |
| 4단계 | 리팩토링 (코드 개선) | 반복 개선 (대화형) |
| 생산성 | 기준 (1배) | 10배 ↑ |
| 진입장벽 | 높음 (6개월 학습) | 낮음 (즉시 시작) |
"이런 사이트를 만들고 싶어"
HTML/CSS/JS 자동 생성
"이 부분을 이렇게 바꿔줘"
대화형으로 완성도 높이기
ChatGPT 기반 AI 코딩 에이전트 — 개발부터 배포까지 전 과정 지원
🔗 접속: https://openai.com/ko-KR/codex/
코딩 문법 없이 한국어로 명령하면 코드 자동 생성
HTML, CSS, JS 파일을 자동으로 생성하고 편집
커밋, 푸시 등 버전 관리 자동화
자주 쓰는 명령어를 템플릿으로 저장
여러 프로젝트를 한 화면에서 관리
초보자를 위한 친절한 안내
💻 코덱스 홈페이지
ChatGPT 기반 AI 코딩 에이전트로 개발부터 배포까지 모든 과정을 지원합니다
🗂️ 코덱스 앱 — 프로젝트 목록 및 대화형 인터페이스
🔗 https://openai.com/ko-KR/codex/
Windows 버전 또는 macOS 버전 다운로드
OpenAI 계정으로 로그인 (ChatGPT 계정 사용)
"New Project" 버튼 클릭 → 프로젝트명 입력 → 시작
Anthropic의 CLI 기반 AI 개발 도구 — 터미널에서 자연어 명령
💡 특징: 가볍고 빠른 기동전 (몽고 기마병의 마구)
터미널에서 자연어 명령으로 코드 생성
파일 읽기, 쓰기, 수정을 자동으로 처리
커밋 메시지 자동 생성, 푸시 자동화
프로젝트 전체 구조를 이해하고 일관성 유지
매우 긴 맥락(대형 프로젝트)도 한 번에 처리
군더더기 없이 빠르게 실행
| 기준 | 코덱스 | 클로드코드 |
|---|---|---|
| 인터페이스 | 웹 / 데스크톱 앱 | CLI (터미널) |
| 속도 | 보통 | ⚡ 빠름 |
| 진입장벽 | ✅ 낮음 (UI 친화적) | 중간 (터미널 필요) |
| 유연성 | 보통 | ✅ 높음 |
| 가이드 | ✅ 친절함 | 최소한 |
| 추천 대상 | 초보자 | 숙련자 |
| 비유 | 유럽 기사의 마구 (중무장) | 몽고 기마병의 마구 (경량) |
💡 병행 사용 전략: 간단한 작업은 코덱스, 복잡한 작업은 클로드코드
구성:
기능:
✨ 완성 결과물: 22개 명령어로 만든 바이브코딩 매뉴얼 홈페이지
→ AI가 index.html 생성 + 기본 구조 작성
→ AI가 nav 태그 + 메뉴 링크 자동 생성
→ AI가 CSS gradient 코드 자동 생성
22단계 중 처음 5단계를 강사가 시연
6~15단계를 수강생이 직접 명령
16~22단계를 자유롭게 개발하며 개선
수강생들이 만든 사이트 발표 및 토론
바이브코딩 22단계 매뉴얼
개발 프롬프트 템플릿 모음
예제 사이트 코드 (GitHub)
설치 및 사용법 가이드
접속 및 사용법 가이드
axeduplatform.com
🔗 자료실: axeduplatform.com/resource-vibe-coding-manual.html
바이브코딩 체험 소감 및 질의응답
📚 자료실: axeduplatform.com
💻 바이브코딩 매뉴얼: /resource-vibe-coding-manual.html
📧 문의: jaiwshim@gmail.com
👉 다음 단계: 중급 과정 (14시간)