바이브코딩으로 만드는 AI 웹앱: 기획부터 배포·포트폴리오까지
01
L1. 준비 (Starter) – 바이브코딩의 개념과 개발환경 이해
1.1 AI와 함께하는 새로운 코딩 방식, ‘바이브코딩(VibeCoding)’의 탄생
체험하기
1.2 GPT와 Claude로 기획하는 나만의 첫 웹앱 아이디어
체험하기
1.3 Cursor로 코딩 시작하기: 설치, 계정 연결, 기본 설정
체험하기
1.4 HTML·CSS·JavaScript로 웹의 뼈대 이해하기
1.5 GitHub와 연동해 협업·버전관리 환경 구축하기
02
L2. 시작 (Foundation) – 첫 번째 웹앱: MyToDo 제작
2.1 MyToDo App 기획: GPT와 함께 기능 목록 설계하기
2.2 Cursor에서 MyToDo App UI 빌드: HTML·CSS로 기본 화면 만들기
2.3 JavaScript로 To-Do 입력, 삭제, 완료 기능 구현하기
2.4 GPT를 활용한 디버깅과 기능 개선 — “자동 저장”과 “필터링”
2.5 GitHub Pages로 나의 첫 웹앱 배포하기
03
L3. 활용 (Practitioner) – 데이터 분석 웹앱 제작
3.1 Node·React·Vite 이해하기 — 현대 웹앱 기술스택의 기본
3.2 GPT API와 Open API 연결 실습: 프롬프트에서 코드까지
3.3 MyDataInsight App 기획: CSV 데이터로 인사이트 추출 설계
3.4 MyDataInsight App 빌드: React + GPT API 연동
3.5 MyDataInsight App 디버깅 및 시각화 기능 추가하기
3.6 Vercel로 서버리스 환경에 MyDataInsight App 배포하기
04
L4. 적용 (Portfolio) – 리서치 자동화 웹앱 제작
4.1 MyTechResearch App 기획: GPT API로 기술 R&D 리서치 자동화
4.2 MyTechResearch App 빌드: 검색 → 요약 → 인사이트 생성
4.3 MyTechResearch App 디버깅 및 결과 리포트 자동화
4.4 Vercel 배포 및 세 프로젝트 통합 포트폴리오 완성
1.1 AI와 함께하는 새로운 코딩 방식, ‘바이브코딩(VibeCoding)’의 탄생
01 L1. 준비 (Starter) – 바이브코딩의 개념과 개발환경 이해
Loading...
100%
1.1 AI와 함께하는 새로운 코딩 방식, ‘바이브코딩(VibeCoding)’의 탄생
질문하기
추가 자료
추가 자료가 없습니다
여기서 새로운 학습 자료를 확인하세요!
선생님이 추가한 자료들을 바로 확인할 수 있어요.