바이브 코딩 입문전체 60강

목차

1장 기초부터 시작하는 AI 코딩 1-1바이브 코딩(Vibe Coding)?1-2AI를 이해하기 1-3바둑으로 보는 AI의 진화 1-4여러분은 오케스트라의 지휘자입니다

2장 개발 환경 준비 2-1오리엔테이션 2-2Windows 개발 환경 구성 2-3Node.js 설치 2-4Firebase Tools 설치 2-5gcloud CLI 설치

3장 서비스 가입과 AI 편집기 3-1개발 및 배포를 위한 사이트 가입 3-2각 서비스 실제 가입 및 설정 하기 3-3AI 편집기 설치 3-4Kiro 설치와 시작하기 3-5AI 편집기 설치 및 둘러보기 (참고자료)

4장 Git · GitHub 4-1Git이란 무엇인가?4-2Git Bash 프로그램 설치 4-3GitHub CLI 설치 4-4GitHub CLI 설정 4-5Git 브랜치와 협업 흐름

5장 바이브 코딩 시작 5-1바이브 코딩의 시작: 폴더 구조 5-2바이브 코딩을 위한 프롬프트 5-3프롬프트로 웹앱 1차 완성하기 5-4다듬고 테스트하고 마무리 5-5실제로 배포하기 5-6실전 사례: 홍보용 원페이지 만들기

6장 바이브 코딩의 기술 6-1Rules: AI에게 프로젝트 규칙 심기 6-2Spec: 무엇을 만들지 먼저 정의한다 6-3Design: 어떻게 만들지 먼저 설계한다 6-4구현: Spec → Design → 구현 반복 루프 6-5Skills: 반복을 기술로 만들기 6-6Agent: 일을 쪼개 위임하기 6-7하네스: AI가 실제로 일하는 작업 틀 6-8Loop: AI가 스스로 도는 자율 루프

7장 웹의 3요소: HTML·CSS·JS 7-1웹페이지는 무엇으로 이루어지나 7-2HTML — 웹의 뼈대 7-3CSS — 웹의 옷 7-4JavaScript — 웹의 근육

8장 앱의 구조: 프론트엔드·백엔드·API 8-1프론트엔드 — 사용자가 보는 곳 8-2백엔드 — 뒤에서 일하는 곳 8-3데이터베이스 — 정보를 저장하고 꺼내는 곳 8-4API — 둘을 잇는 다리 8-5전체 그림 — 요청부터 응답까지

부록

부록 1: CLI와 바이브 코딩 A1-1CLI란 무엇이고, 왜 바이브 코딩에 중요한가 A1-2실전: 자주 쓰는 CLI 명령어

부록 2: Claude Code A2-1Claude Code 설치와 사용법 A2-2프롬프트 하나로, 앱이 통째로 만들어진다 A2-3CLI만으로 GitHub에 올리기 A2-4Vercel 배포와 GitHub 자동배포 연결 A2-5막혔을 때: 화면을 찍어서 던진다

바이브 코딩 입문

학습 시작하기 →

바이브 코딩 강의

목차

1장 기초부터 시작하는 AI 코딩 1-1바이브 코딩(Vibe Coding)?1-2AI를 이해하기 1-3바둑으로 보는 AI의 진화 1-4여러분은 오케스트라의 지휘자입니다

2장 개발 환경 준비 2-1오리엔테이션 2-2Windows 개발 환경 구성 2-3Node.js 설치 2-4Firebase Tools 설치 2-5gcloud CLI 설치

3장 서비스 가입과 AI 편집기 3-1개발 및 배포를 위한 사이트 가입 3-2각 서비스 실제 가입 및 설정 하기 3-3AI 편집기 설치 3-4Kiro 설치와 시작하기 3-5AI 편집기 설치 및 둘러보기 (참고자료)

4장 Git · GitHub 4-1Git이란 무엇인가?4-2Git Bash 프로그램 설치 4-3GitHub CLI 설치 4-4GitHub CLI 설정 4-5Git 브랜치와 협업 흐름

5장 바이브 코딩 시작 5-1바이브 코딩의 시작: 폴더 구조 5-2바이브 코딩을 위한 프롬프트 5-3프롬프트로 웹앱 1차 완성하기 5-4다듬고 테스트하고 마무리 5-5실제로 배포하기 5-6실전 사례: 홍보용 원페이지 만들기

6장 바이브 코딩의 기술 6-1Rules: AI에게 프로젝트 규칙 심기 6-2Spec: 무엇을 만들지 먼저 정의한다 6-3Design: 어떻게 만들지 먼저 설계한다 6-4구현: Spec → Design → 구현 반복 루프 6-5Skills: 반복을 기술로 만들기 6-6Agent: 일을 쪼개 위임하기 6-7하네스: AI가 실제로 일하는 작업 틀 6-8Loop: AI가 스스로 도는 자율 루프

7장 웹의 3요소: HTML·CSS·JS 7-1웹페이지는 무엇으로 이루어지나 7-2HTML — 웹의 뼈대 7-3CSS — 웹의 옷 7-4JavaScript — 웹의 근육

8장 앱의 구조: 프론트엔드·백엔드·API 8-1프론트엔드 — 사용자가 보는 곳 8-2백엔드 — 뒤에서 일하는 곳 8-3데이터베이스 — 정보를 저장하고 꺼내는 곳 8-4API — 둘을 잇는 다리 8-5전체 그림 — 요청부터 응답까지

부록

부록 1: CLI와 바이브 코딩 A1-1CLI란 무엇이고, 왜 바이브 코딩에 중요한가 A1-2실전: 자주 쓰는 CLI 명령어

부록 2: Claude Code A2-1Claude Code 설치와 사용법 A2-2프롬프트 하나로, 앱이 통째로 만들어진다 A2-3CLI만으로 GitHub에 올리기 A2-4Vercel 배포와 GitHub 자동배포 연결 A2-5막혔을 때: 화면을 찍어서 던진다