바이브 코딩 실전 — 오늘 첫 웹앱 만드는 5단계 입문 가이드

이론은 그만, 오늘 저녁에 첫 결과물을 만들어 봅시다. 코딩 경험이 전혀 없어도 따라올 수 있는 바이브 코딩 5단계 입문 루틴입니다. 준비물은 AI 챗봇(무료 버전으로 충분)과 웹 브라우저뿐입니다.

1단계. 만들 것을 한 문단으로 정의한다

예시: "하루 물 마신 양을 기록하는 웹페이지. 버튼을 누르면 한 잔씩 추가되고, 목표(8잔) 달성률이 퍼센트로 보이면 좋겠어. 배경은 파란색 계열."

기능(무엇을), 화면(어떻게 보이길), 취향(색·분위기) 세 가지가 들어가면 좋은 프롬프트입니다.

2단계. AI에게 통째로 요청한다

"위 내용을 HTML 파일 하나로 만들어줘. 파일 하나에 CSS와 자바스크립트를 모두 포함해줘"라고 요청하세요. '파일 하나'라는 조건이 입문자에게 중요합니다. 관리할 것이 하나뿐이니까요.

3단계. 실행해 본다

받은 코드를 메모장에 붙여넣고 물마시기.html처럼 저장한 뒤 더블클릭하면 브라우저에서 열립니다. 이 순간이 첫 배포입니다.

4단계. 말로 고친다

써보면 아쉬운 점이 보입니다. 그대로 AI에게 말하세요. "버튼이 너무 작아", "새로고침해도 기록이 남게 해줘", "다크모드 추가해줘". 수정된 코드를 다시 저장하고 확인하는 반복 — 이것이 바이브 코딩의 핵심 루프입니다.

5단계. 하나만 이해하고 끝낸다

마지막으로 AI에게 물어보세요. "이 코드에서 버튼을 누르면 어떤 일이 일어나는지 초등학생에게 설명하듯 알려줘." 매 프로젝트마다 개념 하나씩만 가져가면, 어느새 코드를 읽는 눈이 생깁니다.

다음 단계

같은 방법으로 단어장, 타이머, 간단한 퀴즈로 확장해 보세요. 게임을 만들고 싶다면 로블록스의 AI 창작 도구 '빌드'가 같은 경험을 제공합니다. 바이브 코딩의 개념과 주의점은 이전 두 글에서 확인하세요.