Vibe Coding: Building a website that finishes alone with Claude AI
바이브코딩 : Claude AI로 나 혼자 끝내는 웹사이트 구축
Cursor AI
Claude AI
MariaDB
AWS
Github
바이브코딩(대화형 코딩)으로 기획 → 구현 → 배포까지 end-to-end 웹 서비스 제작 역량을 갖춥니다.Claude·MCP / Cursor를 활용해 프론트(React)와 백엔드(Spring Boot·JPA·MariaDB)를 연결하고,실전형 자동화·API 연동을 익히고,
AWS(EC2·RDS)로 실제 서비스 배포까지 완료하여 포트폴리오로 증명 가능한 결과물을 만듭니다.
Introduction
- 이제 AI를 이용해서 웹사이트를 제작할 수 있습니다
-
본 과정은 AI (Claude·MCP / Cursor)를 활용해 학습 장벽을 낮추고 시행착오를 줄이므로, 비전공자도 빠르게 실전 코드를 완성할 수 있습니다.
현업 표준 스택(React·Spring Boot·JPA·MariaDB·AWS)을 한 코스에서 경험해 이력서에 바로 적을 수 있는 스킬셋을 단기간에 확보합니다.
기획→UI→API→DB→배포의 전 과정을 한 프로젝트로 끝내 포트폴리오 임팩트와 취업·이직 경쟁력을 동시에 높입니다.
-
- 대면, 비대면 강의
-
- 4주 과정 / 3시간 강의
-
- 매 수업 1:1 피드백
-
- 20명 내외
-
- 초급~중급
-
- 042-369-5804
-
- 교육 목표
-
· AI (Claude·MCP / Cursor) 를 통한 설계 /분석
· AI를 통한 실무적인 웹사이트 개발
· 실무 바로 적용 가능한 사례 습득
Curriculum
- 코드를 ‘묻고 답하며’ 완성한다—AI와 함께 8주 만에 기획부터 배포까지.”
- 프론트엔드 CRUD → API 연동 → 백엔드(with DB) → AWS 배포까지, AI 협업으로 12스텝 완성.
STEP 01
바이브코딩 시작 & 환경 세팅
- 오리엔테이션·개발 흐름
- 에디터/Git 기본 설정
Claude
Cursor AI
VS Code
GitHub
STEP 02
MCP로 AI↔클라우드 연동 이해
- MCP 개념·동작
- 간단 실습으로 데이터 연결
Claude
MCP
Cursor AI
STEP 03
웹 기본기 & 프로젝트 뼈대
- HTTP/클라이언트·서버
- 폴더 구조·라우팅 기초
React
VS Code
STEP 04
GitHub 협업 & 형상관리
- 레포 생성·브랜치
- PR·이슈 트래킹 베이직
GitHub
STEP 05
프론트엔드 CRUD ① 게시판/폼
- 게시판 목록·상세
- 폼 상태·유효성
React
Cursor AI
Claude
STEP 06
프론트엔드 CRUD ② To‑do·비동기
- To‑do 상태관리
- 비동기 통신(Fetch)
React
Cursor AI
Claude
STEP 07
외부 API 활용 & 갤러리
- 공공/날씨 등 API 연동
- 갤러리 UI·페이지네이션
React
STEP 08
백엔드 기초 & 데이터베이스
- Java/Spring 부트스트랩
- MariaDB 설치·SQL 실습
Spring Boot
MariaDB
STEP 09
DB 연동 CRUP API 만들기
- 서버와 DB를 연결
- Rest API를 통한 CRUD 검증
Spring Boot
MariaDB
STEP 10
FE↔BE 연동 & 인증 기본
- 프론트에서 API 호출
- 세션/토큰 개념
React
Spring Boot
STEP 11
AWS 배포 ① EC2·RDS
- EC2 환경 구성
- RDS 스키마 연결
AWS EC2
AWS RDS
STEP 12
운영 배포 & 점검 루틴
- 백엔드 빌드·배포
- 모니터링·로그·이슈대응
GitHub
AWS EC2
AWS RDS
facilities
실습 중심 인프라, 모두 여기에!
최신 장비와 안전한 실습 동선으로 수업 몰입도를 높였습니다.
Inquiry
간편하게 관심있는