바이브코딩으로 만드는 AI 웹앱: 기획부터 배포·포트폴리오까지

🟪 강좌 소개

“AI로 코딩이 쉬워졌다는데, 그래서 진짜로 웹앱을 만들 수 있을까?”

이 강좌는 그 질문에 직접 결과물로 답하는 실습형 과정입니다.

GPT·Claude 같은 생성형 AI와 Cursor 같은 AI 코딩 도구를 활용해 아이디어를 기획하는 단계부터,

HTML/CSS/JavaScript로 “작동하는 웹앱”을 만들고, React로 더 현대적인 형태로 발전시킨 뒤,

GPT API까지 연동해 AI 기능이 들어간 웹앱을 완성합니다.

마지막에는 GitHub Pages와 Vercel로 배포하여, 수료 후에는 “내가 만든 앱 링크”를 포트폴리오로 남길 수 있어요.

이 강좌의 목표는 단순히 문법을 외우는 것이 아니라,

웹앱 개발의 전체 흐름(기획 → 개발 → 디버깅 → 배포 → 포트폴리오)을 한 번 끝까지 경험하게 만드는 것입니다.

🟪 이 강좌에서 무엇을 만들까요?

수업은 ‘작은 성공 → 확장 → 포트폴리오 완성’ 흐름으로 진행됩니다.

1) 첫 번째 웹앱: MyToDo 만들기

• GPT와 함께 기능 목록을 정리하고 화면 구성을 기획합니다.
• HTML/CSS로 기본 화면을 만들고, JavaScript로 To-Do 추가/삭제/완료 기능을 구현합니다.
• GPT를 활용해 디버깅하고, 자동 저장/필터링 같은 기능도 개선합니다.
• GitHub Pages로 배포해 “내 첫 웹앱”을 공개합니다.

2) 두 번째 웹앱: MyDataInsight 만들기

• React + Vite 개발 환경을 이해하고, 현대적인 웹앱 구조로 확장합니다.
• CSV 데이터를 기반으로 인사이트를 뽑고, GPT API를 연결해 요약/분석 기능을 구현합니다.
• Chart.js 같은 시각화 요소를 더해 “보이는 결과”를 만들고,
• Vercel로 배포해 더 완성도 높은 앱을 공개합니다.

3) 포트폴리오: 리서치 자동화 웹앱 MyTechResearch

• GPT API를 활용해 기술 리서치 흐름을 자동화하는 앱을 기획합니다.
• 검색 → 요약 → 인사이트 생성 → 결과 리포트(PDF/Markdown) 형태로 정리하는 과정을 경험합니다.
• 최종적으로 웹 포트폴리오 형태로 정리해 “결과물을 보여줄 수 있는 상태”로 마무리합니다.

🟪 이 강좌의 특징

AI를 “도구”로 제대로 쓰는 방법을 배워요

• AI에게 질문만 던지는 게 아니라, 기획서 작성, 기능 설계, 코드 작성, 오류 해결, 개선 포인트 찾기까지 업무 흐름처럼 활용합니다.

결과물이 남는 강좌예요

• 수강 후에는 “내가 만든 웹앱 링크”와 “포트폴리오”가 남습니다. 즉, 학습이 끝나는 순간 바로 보여줄 수 있는 결과물이 생겨요.

비전공자도 따라올 수 있게 구성했어요

• 복잡한 이론을 길게 설명하기보다, “왜 이게 필요한지”를 실습으로 보여주고 이해시키는 방식입니다.
• 코딩이 낯선 분도 따라 하기 → 수정하기 → 내 것으로 만들기 단계로 자연스럽게 실력이 쌓이도록 설계했습니다.

🟪 수강 후 얻는 것(학습 결과)

이 강좌를 마치면 다음을 할 수 있어요.

• 아이디어를 웹앱 형태로 정리하고 기능 목록을 설계할 수 있습니다.
• HTML/CSS/JavaScript로 간단한 웹앱을 직접 구현할 수 있습니다.
• React로 컴포넌트 기반 웹앱을 만들고 화면을 구성할 수 있습니다.
• GPT API를 연결해 “AI 기능이 들어간 웹앱”을 구현할 수 있습니다.
• GitHub로 버전 관리를 하고 GitHub Pages/Vercel로 배포할 수 있습니다.
• 포트폴리오 형태로 결과물을 정리하고 공개할 수 있습니다.

🟪 추천 대상

• AI 도움을 받아 처음부터 끝까지 웹앱을 만들어보고 싶은 비전공자/초보자
• HTML/CSS/JS를 배웠지만 실제 결과물과 배포 경험이 없는 분
• React와 API 연동을 “작은 프로젝트”로 경험하고 싶은 분
• 포트폴리오에 넣을 실제 작동하는 프로젝트 링크가 필요한 분
• 반복되는 업무(리서치/정리/보고)를 자동화하는 앱을 만들어보고 싶은 분