말로 설명하면
AI가 코드를 만듭니다
AI에게 원하는 것을 말(프롬프트)로 설명하고, AI가 코드를 생성하면 결과를 확인·수정해 나가는 새로운 개발 방식입니다.
아이디어 설명
만들고 싶은 기능을 자연어로 AI에게 설명합니다. 코딩 문법을 몰라도 됩니다.
AI가 코드 생성
Claude Code 같은 AI 도구가 실제 동작하는 코드를 작성해줍니다.
확인 · 반복
결과를 브라우저에서 확인하고, 수정할 부분을 다시 AI에게 말합니다.
교육자료
바이브코딩을 시작하기 위한 단계별 교육자료입니다. 설치부터 실습까지 순서대로 따라해보세요.
Claude Code 터미널 설치 가이드
PowerShell(Windows) 또는 터미널(Mac)에서 명령어 한 줄로 Claude Code를 설치하는 방법을 단계별로 안내합니다. 사전 준비부터 첫 실행까지 모두 담았습니다.
- › Windows: PowerShell 한 줄 명령어로 설치
- › Mac: curl 또는 Homebrew로 설치
- › 설치 확인 · 브라우저 로그인 · 첫 실행까지
바이브코딩 워크숍
AI와 대화해서 나만의 웹 서비스를 만드는 2시간 실습 과정입니다. 달력 메모 서비스를 처음부터 배포까지 직접 만들어봅니다.
- › Git & GitHub 설정부터 프로젝트 생성까지
- › Claude Code로 달력 메모 앱 구축
- › Vercel 무료 배포로 전 세계 공개
Vibe Coding training & materials courtesy of 방소영
Supabase 설치 및 Vercel 연동
백엔드 없이 PostgreSQL 데이터베이스를 사용하고, Vercel에 환경변수를 연결하여 실제 DB 기반 서비스를 만드는 방법을 안내합니다.
- › Supabase 가입 · 프로젝트 생성
- › SQL Editor로 테이블 생성
- › Vercel 환경변수 등록 · 자동 배포
Vibe Coding training & materials courtesy of 방소영
하네스 엔지니어링
실수를 구조적으로 불가능하게 만드는 기술. CLAUDE.md, 자동 강제 시스템, 에이전트 팀 파이프라인, 자기치유 루프까지 실전 운영 방법을 안내합니다.
- › 7명의 전문 에이전트 팀 구성
- › ESLint 3중 보안 + Pre-commit 자동 검증
- › 22분 만에 217개 테스트 통과 실전 사례
Vibe Coding training & materials courtesy of 방소영
기타
Step 가이드 외에 바이브코딩에 도움이 되는 다양한 스킬·팁·활용법을 하나로 모았습니다. 실전에서 발견한 유용한 도구와 프롬프트를 지속적으로 추가해 나갑니다.
- › Claude Code에서 Codex 공식 스킬 사용
- › 프로젝트 HTML 가이드 자동 생성 프롬프트
- › 추후 다양한 스킬·팁이 추가될 예정
포트폴리오
Claude Code로 직접 만든 실무형 프로젝트입니다. 코딩 경험이 없어도 이런 것들을 만들 수 있습니다.
회의실 예약시스템
사내 회의실을 예약·관리하는 시스템. 타임라인 그리드, 관리자 페이지, 통계 대시보드까지 포함된 풀스택 앱입니다.
- › 회의실 CRUD · 예약 차단 기능
- › 타임라인 뷰 · 카드 뷰 지원
- › 관리자 통계 · 예약 이력 조회
사원증 신청시스템
계열사 관리자가 직원 사원증을 신청하고, 취합 후 제작 업체에 일괄 의뢰하는 워크플로우 시스템입니다.
- › 계열사별 신청 · 엑셀 업로드/다운로드
- › 신규 · 재발급 구분 처리
- › 글래스모피즘 다크 히어로 디자인
학습 로드맵
이 순서대로 따라오면 여러분도 똑같이 만들 수 있습니다.
Claude Code 설치
첫 진입단계Node.js 설치 → Claude Code CLI 설치 → API 키 연결. 가이드 페이지에 단계별 스크린샷이 있습니다.
첫 프롬프트 작성
만들고 싶은 화면을 말로 설명해봅니다. 처음엔 간단한 UI부터 시작하세요.
실무 프로젝트 도전
포트폴리오회의실 예약, 사원증 신청 같은 실제 필요한 시스템을 직접 만들어봅니다.
자기개발 및 업무 효율 높이기
실천바이브코딩으로 만든 도구를 실무에 적용하고, 반복 업무를 자동화하며, 나만의 워크플로우를 구축해 업무 생산성을 높여봅니다.