바이브코딩 10회차 과정 · 3회차 집중 강의

시민 활동가를 위한
웹앱 탄생 6단계 가이드

AI와 비유로 배우는 웹앱 제작 여정.
초보자도 두렵지 않은 코딩의 첫걸음.

Node.jsPythonGitGitHubVercelDomain

오늘의 목표

1웹앱이 탄생하는 6단계를 건물 짓기 비유로 이해

2내 컴퓨터에 Node.js/Python/Git 기초 설치

3AI 스튜디오로 첫 index.html 생성

4GitHub → Vercel 자동 배포로 실제 웹사이트 공개

웹앱 탄생 6단계

엔진부터 간판까지 — 건물을 짓는 과정으로 이해하기

1단계

Node.js

엔진 / 발전소

웹앱이 움직이는 근본 에너지

2단계

Python

공구 / 맥가이버 칼

AI 실무의 보조 도구

3단계

Git

수레 / 운반기

코드를 금고로 실어 나르는 수단

4단계

GitHub

금고 / 보관소

전 세계 어디서든 꺼낼 수 있는 코드 금고

5단계

Vercel

전시장 / 빌딩

실제로 사람들이 접속하는 웹사이트

6단계

Domain

간판 / 주소

사람들이 찾기 쉬운 이름 붙이기

이 6단계는 순서대로 진행됩니다 — 앞 단계가 준비되어야 다음 단계로 나아갈 수 있어요.

오늘 강의 흐름 (3교시 구성)

1교시

내 컴퓨터에 기초 공사

필수 프로그램 설치부터 첫 설계도 생성까지

엔진 설치

Node.js & Python 설치

엔진 점검

터미널에서 버전 확인 (node -v)

작업장 만들기

citizen-app 폴더 생성 후 에디터로 열기

설계도 뽑기

AI 스튜디오로 index.html 생성

2교시

내 웹앱을 전 세계에 배포

안티그래비티 → GitHub → Vercel

수레에 싣기

Publish 버튼으로 내가 만든 파일을 Git에 실어 올림

금고에 보관

GitHub 저장소 — 전 세계 어디서든 꺼낼 수 있는 코드 금고

빌딩 완공

Vercel 자동 배포 — 실제 접속 가능한 웹사이트 완성

3교시

멋진 간판 달기 & 보안 관리

나만의 주소를 갖고, 더 안전하게 세상과 연결

Step 1

기본 URL로 시작

yourapp.vercel.app으로 먼저 공개

Step 2

호스팅KR에서 도메인 구매

.kr / .com 주소 등록 (동네 간판 가게)

Step 3

클라우드플레어 보안

전 세계 통하는 큰길 확보 + 해킹 방어

바이브 코딩 철학

AI와 대화하며 만드는 즐거움

시민 활동가 × 바이브 코딩 × AI 협업 — 오늘부터 시작합니다

문법보다 대화

완벽한 코드 문법 대신 AI에게 자연스럽게 말을 걸어보세요

빠른 결과물

오늘 배우고 오늘 만드는 것이 바이브 코딩의 핵심입니다

즐거움이 원동력

두려움 없이 시도하고, 실패해도 AI와 함께 다시 시작하면 됩니다

“코딩을 배우는 게 아니라, 만들고 싶은 걸 만드는 겁니다.”

실습에 필요한 도구

Node.js 다운로드 Python 다운로드 Git 다운로드 GitHub Vercel 호스팅KR 클라우드플레어 Google AI Studio

바이브코딩 전체 커리큘럼

다음 회차

4회차 — 안티그래비티로 이주하기 (준비 중)