← 바이브 코딩 입문

프론트엔드 — 사용자가 보는 곳

← 이전 강의 다음 강의 →

커리큘럼

시작하기

인사말미리보기

1장 기초부터 시작하는 AI 코딩

바이브 코딩(Vibe Coding)?
AI를 이해하기
바둑으로 보는 AI의 진화
여러분은 오케스트라의 지휘자입니다

2장 개발 환경 준비

오리엔테이션
Windows 개발 환경 구성
Node.js 설치
Firebase Tools 설치
gcloud CLI 설치

3장 서비스 가입과 AI 편집기

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

4장 Git · GitHub

Git이란 무엇인가?
Git Bash 프로그램 설치
GitHub CLI 설치
GitHub CLI 설정
Git 브랜치와 협업 흐름

5장 바이브 코딩 시작

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

6장 바이브 코딩의 기술

Rules: AI에게 프로젝트 규칙 심기
Spec: 무엇을 만들지 먼저 정의한다
Design: 어떻게 만들지 먼저 설계한다
구현: Spec → Design → 구현 반복 루프
Skills: 반복을 기술로 만들기
Agent: 일을 쪼개 위임하기
하네스: AI가 실제로 일하는 작업 틀
Loop: AI가 스스로 도는 자율 루프

7장 웹의 3요소: HTML·CSS·JS

웹페이지는 무엇으로 이루어지나
HTML — 웹의 뼈대
CSS — 웹의 옷
JavaScript — 웹의 근육

8장 앱의 구조: 프론트엔드·백엔드·API

프론트엔드 — 사용자가 보는 곳
백엔드 — 뒤에서 일하는 곳
데이터베이스 — 정보를 저장하고 꺼내는 곳
API — 둘을 잇는 다리
전체 그림 — 요청부터 응답까지

부록 1: CLI와 바이브 코딩

CLI란 무엇이고, 왜 바이브 코딩에 중요한가
실전: 자주 쓰는 CLI 명령어

부록 2: Claude Code

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

수강 신청 후 볼 수 있는 강의입니다.

미리보기로 공개된 강의는 로그인 없이 볼 수 있습니다.

로그인하고 수강 신청