바이브코딩은 설명을 오래 읽는 것보다, 작은 앱 하나를 만들어볼 때 훨씬 빨리 이해됩니다.
오늘 만들 것은 거창한 서비스가 아닙니다.
HTML 파일 하나로 돌아가는 작업 체크리스트입니다.
이 글의 목표는 코드를 완벽히 이해하는 것이 아닙니다. AI에게 어떤 식으로 요청하고, 결과를 확인하고, 다시 수정하는지 감을 잡는 것입니다.
이 글은 바이브코딩 시작 가이드의 첫 실습 글입니다. 바이브코딩의 뜻부터 보고 싶다면 바이브코딩 뜻 정리를 먼저 읽어도 됩니다.
처음 결과물이 허술해도 괜찮습니다.
바이브코딩은 한 번에 완성하는 일이 아니라, 결과물을 보면서 AI와 맥락을 이어가는 일이기 때문입니다.
“바이브코딩 첫 프로젝트의 목표는 완벽한 앱이 아니라, 만들고 확인하고 다시 수정하는 루프를 경험하는 것입니다.”
이 기준으로 따라오면 됩니다.
지금 확인할 것
- 준비물 3가지 — AI 코딩 도구, 작업 폴더, 브라우저
- 첫 프롬프트를 그대로 복사해 넣고, 추가·체크·삭제·새로고침 저장 4가지만 확인
- 마음에 안 들면 새로 만들지 말고 “유지할 것”과 “바꿀 것”을 나눠 수정 요청
준비물은 많지 않습니다
처음에는 AI 코딩 도구, 작업 폴더, 브라우저만 있으면 체크리스트 앱을 만들 수 있습니다.
필요한 건 세 가지입니다.
- AI 코딩 도구
- 작업할 폴더
- 브라우저
Claude Code, Cursor, Codex 중 무엇을 써도 흐름은 비슷합니다.
이 글에서는 특정 도구 사용법보다, 처음 프롬프트를 어떻게 넣고 결과를 어떻게 확인하는지에 집중하겠습니다.
Claude Code 설치부터 막힌다면 클로드 코드 맥 설치 방법을 먼저 보면 됩니다.
첫 프롬프트는 이렇게 넣습니다
첫 요청은 기능을 한 문장으로 뭉치지 말고 입력, 저장, 실행 조건으로 나눠서 적는 게 좋습니다.
AI 코딩 도구에 아래 프롬프트를 그대로 넣어볼 수 있습니다.
브라우저에서 실행되는 나만의 작업 체크리스트를 HTML 파일 하나로 만들어줘.
할 일을 입력하고 추가할 수 있게 해줘.
완료한 항목은 체크할 수 있게 해줘.
삭제 버튼도 넣어줘.
새로고침해도 목록이 남도록 브라우저 저장소를 사용해줘.
코딩을 모르는 사람도 이해할 수 있게 코드에 짧은 주석을 달아줘.
파일 이름은 index.html로 저장해줘.
완성한 뒤에는 로컬 서버를 실행해서 브라우저에서 확인할 수 있게 해줘.
예를 들면 python3 -m http.server 8000 같은 방식으로 띄우고, 접속 주소도 알려줘.
여기서 중요한 건 “체크리스트 앱 만들어줘”로 끝내지 않았다는 점입니다.
입력, 추가, 완료, 삭제, 저장, 로컬 실행.
이 여섯 가지 조건을 줬습니다.
AI는 마음을 읽는 도구가 아닙니다. 하지만 조건을 나눠서 주면 꽤 잘 따라옵니다.
저는 이걸 의도 쪼개기라고 부르고 싶습니다.
바이브코딩을 잘하려면 멋진 문장보다, 원하는 결과를 작은 조건으로 쪼개는 게 먼저입니다.
첫 결과는 이것만 확인하면 됩니다
첫 결과는 디자인보다 추가, 체크, 삭제, 새로고침 저장이 되는지만 확인하면 됩니다.
AI가 index.html 파일을 만들었다면, 먼저 브라우저에서 열어봅니다.
로컬 서버를 실행했다면 주소는 이런 식으로 나올 수 있습니다.
http://localhost:8000
http://localhost:3000
http://localhost:5173
숫자는 달라도 괜찮습니다.
중요한 건 AI가 알려준 주소를 브라우저에 열어 실제 화면을 확인하는 것입니다.
처음 결과물은 대체로 단순합니다.
그래도 괜찮습니다. 첫 단계에서는 “돌아가는가”만 보면 됩니다.
확인할 것은 네 가지입니다.
- 할 일이 추가되는가
- 완료 체크가 되는가
- 삭제가 되는가
- 새로고침해도 목록이 남는가
이 네 가지가 되면 첫 결과는 성공입니다.
마음에 안 들면 다시 만들지 말고 수정합니다
첫 결과가 마음에 안 들어도 새로 만들기보다 유지할 기능과 바꿀 기능을 나눠서 수정해야 합니다.
AI가 처음 만든 결과물은 대부분 애매합니다.
디자인이 별로일 수도 있고, 버튼 위치가 불편할 수도 있습니다. 저장 기능이 빠질 수도 있습니다.
여기서 포기하면 그냥 “AI가 대충 만들어준 코드”로 끝납니다.
바이브코딩은 여기서부터 시작됩니다.
예를 들어 이렇게 이어갈 수 있습니다.
체크리스트가 너무 밋밋해.
왼쪽에는 오늘 할 일, 오른쪽에는 완료한 일을 나눠서 보여줘.
전체 색감은 흰색 배경에 초록색 포인트로 해줘.
또는 이렇게 말할 수도 있습니다.
할 일을 중요도별로 표시하고 싶어.
높음, 보통, 낮음 중 하나를 선택해서 추가할 수 있게 바꿔줘.
기존의 완료 체크와 삭제 기능은 유지해줘.
마지막 줄이 중요합니다.
기존의 완료 체크와 삭제 기능은 유지해줘.
이런 말이 컨텍스트 관리입니다.
AI는 새 기능을 넣다가 기존 기능을 망가뜨릴 때가 있습니다. 그래서 사람이 계속 “무엇은 유지하고, 무엇만 바꿀지”를 잡아줘야 합니다.
수정 요청을 반영하면 화면은 조금 더 앱처럼 바뀝니다.
다시 말하면, 바이브코딩 첫 프로젝트의 목표는 완벽한 앱이 아니라, 만들고 확인하고 다시 수정하는 루프를 경험하는 것입니다.
localhost:3000이 뭔가요?
localhost는 내 컴퓨터에서만 열리는 테스트 주소이고, 3000은 그 앱이 쓰는 임시 포트 번호입니다.
localhost는 내 컴퓨터를 뜻합니다.
뒤에 붙는 3000은 포트 번호입니다.
쉽게 말하면, 내 컴퓨터 안에서 임시로 열린 웹앱 입구라고 보면 됩니다.
AI 코딩 도구가 http://localhost:3000으로 접속하라고 말한다면, 인터넷에 공개된 사이트가 아니라 내 컴퓨터에서만 열리는 테스트 화면을 보라는 뜻입니다.
이 글의 예시는 HTML 파일 하나라서 꼭 3000일 필요는 없습니다. 8000, 5173, 8765처럼 다른 숫자가 나올 수도 있습니다.
중요한 건 숫자 자체가 아닙니다.
AI가 알려준 주소를 브라우저에 열어 실제 결과를 확인하는 것입니다.
다른 사람에게 공유하려면 어떻게 하나요?
다른 사람에게 보여주려면 로컬 파일을 인터넷 호스팅에 올리는 배포 과정이 필요합니다.
내 컴퓨터에서만 열리는 HTML 파일은 나만 볼 수 있습니다.
다른 사람에게 링크로 보내려면 배포가 필요합니다.
배포는 내 파일을 인터넷에서 접근 가능한 서버나 호스팅 서비스에 올리는 과정입니다.
처음에는 GitHub Pages, Netlify, Vercel 같은 무료 호스팅을 쓰는 방식이 쉽습니다.
다만 공유 전에 확인할 게 있습니다.
- 개인정보를 저장하지 않는가
- API 키 같은 비밀 값이 코드에 들어가지 않았는가
- 모바일에서도 화면이 깨지지 않는가
- 새로고침했을 때 데이터가 예상대로 남거나 사라지는가
처음에는 로컬에서 만들고, 그다음 공유 가능한 링크로 배포하는 순서가 좋습니다.
자주 묻는 질문
수정은 어떻게 요청해야 하나요?
기존 기능과 새로 바꿀 기능을 나눠서 말하면 됩니다. 예를 들어 “완료 체크와 삭제 기능은 유지하고, 완료한 일만 오른쪽으로 이동하게 바꿔줘”처럼 말하는 식입니다.
만든 앱은 어떻게 공유하나요?
처음에는 GitHub Pages, Netlify, Vercel 같은 무료 호스팅을 쓰면 됩니다. 다만 공유 전에 API 키, 개인정보, 모바일 화면 깨짐 여부는 꼭 확인해야 합니다.
localhost:3000은 인터넷 주소인가요?
아닙니다. localhost:3000은 내 컴퓨터에서만 열리는 테스트 주소입니다. 다른 사람에게 보내도 그 사람은 같은 화면을 볼 수 없습니다.
정리
첫 프로젝트의 핵심은 완성도보다 만들기, 실행하기, 수정하기 루프를 한 번 경험하는 것입니다.
바이브코딩 첫 프로젝트는 복잡할 필요가 없습니다.
HTML 파일 하나로 돌아가는 체크리스트만 만들어도 충분합니다.
이 과정에서 배울 수 있는 건 세 가지입니다.
- AI에게 원하는 기능을 조건으로 쪼개서 말하는 법
- 결과물을 브라우저에서 확인하는 법
- 기존 기능을 유지하면서 한 부분씩 수정하는 법
처음부터 완벽한 앱을 만들려고 하지 않아도 됩니다.
먼저 작게 만들고, 실행하고, 다시 말해보면 됩니다.
그 반복이 바이브코딩의 시작입니다.
오늘 이 글에서 하나만 해본다면, 첫 프롬프트를 그대로 넣어보면 됩니다.
결과물이 마음에 안 들면 이렇게 한 줄만 더 붙여보세요.
“기존 기능은 유지하고, 디자인만 조금 더 보기 좋게 바꿔줘.”
이 한 줄을 말하는 순간, 바이브코딩이 단순한 코드 생성이 아니라 컨텍스트를 이어가는 작업이라는 걸 느낄 수 있습니다.
다음 단계에서는 이렇게 만든 결과물을 실제 링크로 공유하는 방법을 정리해보겠습니다.
참고 자료:
– Google Cloud — What is vibe coding?
– GitHub — What Is Vibe Coding?