바이브코딩 시작 가이드 2026: 첫 앱 제작부터 배포까지

바이브코딩을 처음 시작한다면, 개념 설명을 오래 읽는 것보다 이 페이지 순서대로 따라오는 편이 빠릅니다.

이 페이지 하나로 도구 설치 → 첫 앱 만들기 → GitHub 저장 → 공개 배포까지 이어집니다. 각 단계는 실제로 해본 화면과 프롬프트로 정리했고, 더 깊게 보고 싶은 단계는 하단 링크로 연결해뒀습니다.

“바이브코딩은 코딩을 안 하는 기술이 아니라, AI가 내 의도를 잃지 않게 맥락을 관리하는 방식입니다.”

이 문장 하나만 기억하고 아래 순서를 따라오면 됩니다.

30초 요약

바이브코딩은 자연어로 AI에게 개발을 맡기고, 결과를 확인하며 수정을 반복하는 방식입니다.
비개발자는 데스크톱 앱, 자동화까지 갈 사람은 터미널로 Claude Code를 설치합니다.
첫 프로젝트는 로그인·결제가 없는 작은 로컬 앱(체크리스트 등)으로 시작합니다.
결과는 새 기능을 통째로 다시 만들지 말고, “유지할 것”과 “바꿀 것”을 나눠 수정 요청합니다.
완성한 앱은 GitHub에 저장한 뒤 Vercel 같은 서비스로 공개 링크를 만듭니다.
공개 전에는 비밀 값·개인정보·모바일 화면을 반드시 직접 확인합니다.

바이브코딩이란 무엇인가

바이브코딩은 자연어로 AI에게 원하는 결과를 설명하고, AI가 코드를 만들고 수정하게 하는 개발 방식입니다.

예전에는 웹페이지 하나를 만들려면 HTML, CSS, JavaScript를 직접 배워야 했습니다. 지금은 Claude Code 같은 AI 코딩 도구에게 이렇게 말하면 됩니다.

“브라우저에서 실행되는 작업 체크리스트 앱을 만들어줘.”

그러면 AI가 코드를 만들고, 우리는 실행해보고, 다시 고칠 부분을 말합니다. 이 반복이 바이브코딩입니다.

여기서 중요한 건 첫 결과물이 아니라 그다음 수정입니다. 바이브코딩에서 실제로 어려운 지점과, 코딩을 몰라도 되는 범위·안 되는 범위는 바이브코딩 뜻에서 더 자세히 다룹니다.

어떤 도구로 시작할까

Claude Code는 터미널(CLI)과 데스크톱 앱 두 가지 방식으로 쓸 수 있습니다. 엔진과 요금제, 설정 파일은 같고 화면만 다릅니다.

상황	추천
코딩이 처음인 비개발자	데스크톱 앱 — diff 뷰어·앱 미리보기로 눈으로 확인
화면을 계속 확인하며 만들고 싶은 사람	데스크톱 앱
반복 업무 자동화, 원격 서버 작업이 목표	터미널 — `claude -p` 자동화, SSH 원격 작업
둘 다 궁금한 사람	같은 계정으로 둘 다 설치해도 무방 (추가 비용 없음)

“엔진은 같고, 화면이 다릅니다. 코드를 눈으로 확인하고 싶으면 데스크톱, 자동화까지 가고 싶으면 터미널입니다.” 두 방식의 차이를 더 자세히 비교한 글은 클로드 코드, 터미널 vs 데스크톱 앱입니다.

Claude Code 설치

맥 기준 준비물은 세 가지입니다. macOS 13 이상, Claude 유료 플랜(Pro 이상, 무료 플랜 불가), 터미널 앱입니다.

터미널을 열고 아래 명령어 한 줄이면 설치가 끝납니다.

curl -fsSL https://claude.ai/install.sh | bash

설치 후 터미널을 재시작하고 버전을 확인합니다.

claude --version

버전 숫자가 나오면 성공입니다. 작업할 폴더에서 마우스 오른쪽 버튼 → “터미널에서 열기”를 누른 뒤 claude를 입력해 실행합니다. 처음 실행하면 브라우저에서 로그인·승인 한 번만 하면 됩니다.

설치·로그인 화면을 그대로 캡처해 정리한 글은 클로드 코드 맥 설치 방법입니다.

첫 프롬프트 복사해서 실행하기

처음 만들 프로젝트는 로그인·결제·서버가 없는 작은 로컬 앱이 좋습니다. HTML 파일 하나로 돌아가는 체크리스트 앱이 적당합니다.

아래 프롬프트를 Claude Code에 그대로 넣어볼 수 있습니다.

브라우저에서 실행되는 나만의 작업 체크리스트를 HTML 파일 하나로 만들어줘.

할 일을 입력하고 추가할 수 있게 해줘.
완료한 항목은 체크할 수 있게 해줘.
삭제 버튼도 넣어줘.
새로고침해도 목록이 남도록 브라우저 저장소를 사용해줘.

코딩을 모르는 사람도 이해할 수 있게 코드에 짧은 주석을 달아줘.

파일 이름은 index.html로 저장해줘.
완성한 뒤에는 로컬 서버를 실행해서 브라우저에서 확인할 수 있게 해줘.
예를 들면 python3 -m http.server 8000 같은 방식으로 띄우고, 접속 주소도 알려줘.

“체크리스트 앱 만들어줘”로 끝내지 않고 입력·추가·완료·삭제·저장·로컬 실행, 이 여섯 가지 조건을 나눠 준 게 핵심입니다. 저는 이걸 의도 쪼개기라고 부릅니다. AI는 마음을 읽는 도구가 아니지만, 조건을 쪼개서 주면 꽤 잘 따라옵니다.

바이브코딩으로 만든 HTML 체크리스트 앱 실행 화면 — 직접 만든 체크리스트 앱

결과 확인과 수정 프롬프트

첫 결과는 디자인보다 기능을 먼저 봅니다. 확인할 건 네 가지입니다.

할 일이 추가되는가
완료 체크가 되는가
삭제가 되는가
새로고침해도 목록이 남는가

이 네 가지가 되면 첫 결과는 성공입니다. 마음에 안 드는 부분이 있어도 새로 만들지 말고 유지할 기능과 바꿀 기능을 나눠서 수정 요청합니다.

할 일을 중요도별로 표시하고 싶어.
높음, 보통, 낮음 중 하나를 선택해서 추가할 수 있게 바꿔줘.
기존의 완료 체크와 삭제 기능은 유지해줘.

마지막 줄 기존의 완료 체크와 삭제 기능은 유지해줘가 컨텍스트 관리입니다. AI는 새 기능을 넣다가 기존 기능을 망가뜨릴 때가 있어서, 사람이 계속 “무엇은 유지하고 무엇만 바꿀지”를 잡아줘야 합니다. 이 흐름을 화면과 함께 처음부터 끝까지 따라간 글은 바이브코딩 첫 프로젝트입니다.

localhost에서 확인하기

AI가 알려준 주소가 http://localhost:3000처럼 나온다면, 인터넷에 공개된 사이트가 아니라 내 컴퓨터에서만 열리는 테스트 화면이라는 뜻입니다.

localhost는 내 컴퓨터를 뜻하고, 뒤에 붙는 숫자는 그 앱이 쓰는 임시 포트 번호입니다. 3000, 8000, 5173 등 숫자는 프로젝트마다 다를 수 있고, 숫자 자체는 중요하지 않습니다. 중요한 건 AI가 알려준 주소를 브라우저에 열어 실제 결과를 확인하는 것입니다.

다른 사람에게 이 주소를 그대로 보내도 열리지 않습니다. 다른 사람에게 보여주려면 배포가 필요합니다 — 아래 GitHub·Vercel 단계로 이어집니다.

GitHub에 저장하기

배포 서비스가 내 프로젝트를 가져가려면, 먼저 온라인 저장소가 있어야 합니다. GitHub가 그 저장소 역할을 합니다.

“GitHub는 배포 버튼이 아니라, 배포 서비스가 가져가는 온라인 프로젝트 폴더입니다.”

단계	하는 일
1	GitHub 가입
2	Repository 생성 (이름 짧게, Public/Private 선택)
3	내 컴퓨터에 Git 설치·설정 확인
4	로컬 프로젝트 폴더와 GitHub 저장소 연결
5	commit, push로 GitHub에 반영

명령어를 외우기보다 AI에게 이렇게 맡길 수 있습니다.

이 폴더를 GitHub 새 repository로 올리고 싶어.
repository 이름은 vibe-checklist로 해줘.

올리기 전에 다음을 확인해줘.
- API key, token, password 같은 비밀 값이 없는지
- node_modules 같은 불필요한 폴더가 올라가지 않는지
- README에 로컬 실행 방법이 적혀 있는지

문제가 없으면 git init, commit, GitHub repository 생성, push까지 진행해줘.
중간에 로그인이나 권한 승인이 필요하면 내가 승인할 수 있게 멈춰줘.

로그인, 권한 승인, 토큰 입력은 AI에게 맡기지 말고 직접 확인해야 하는 지점입니다. 가입부터 첫 push까지 화면으로 따라간 글은 GitHub 저장소 만들기입니다.

Vercel로 공개하기

GitHub에 push까지 끝났다면, 이제 Vercel 같은 배포 서비스가 그 저장소를 가져와 공개 링크로 만들 수 있습니다.

단계	하는 일
1	배포할 프로젝트 폴더 확인 (비밀 값 유무 포함)
2	GitHub 저장소에 프로젝트 올리기
3	Vercel 가입 (GitHub 계정으로 로그인)
4	Import Git Repository에서 프로젝트 선택
5	Deploy 후 공개 URL 확인

Vercel 배포 방법으로 생성된 Production Deployment와 공개 URL 화면 — Vercel 배포 완료 화면

이후 수정할 때는 로컬에서 고치고 GitHub에 push하면, Vercel이 변경 사항을 감지해 자동으로 다시 배포합니다. GitHub가 부담스러우면 폴더를 끌어다 놓는 Vercel Drop도 있지만, 계속 수정할 프로젝트라면 GitHub 연동이 장기적으로 덜 헷갈립니다. 전체 배포 과정을 화면과 함께 정리한 글은 바이브코딩 배포 방법입니다.

AI가 만든 결과 검증 체크리스트

공개 링크를 만들기 전, 최소한 아래는 직접 확인합니다.

API 키, 토큰, 비밀번호가 코드에 그대로 들어 있지 않은가
.env 같은 환경 변수 파일이 저장소에 올라가지 않았는가
node_modules 같은 불필요한 폴더가 포함되지 않았는가
모바일 화면에서 버튼과 글자가 겹치지 않는가
테스트 문구나 임시 이미지가 그대로 남아 있지 않은가
공개 URL을 시크릿 모드에서도 열어서 실제로 확인했는가

바이브코딩은 빠르게 만들 수 있다는 게 장점이지만, 빠르게 공개할수록 사람이 확인해야 하는 것도 함께 늘어납니다. 검증은 AI에게 맡기더라도 최종 확인은 직접 하는 게 원칙입니다.

개인정보·권한·결제 주의사항

바이브코딩은 개인 실험에는 좋지만, 실제 서비스는 보안과 데이터 책임을 따로 봐야 합니다.

목적	제 판단
개인 체크리스트, 계산기, 작은 게임	처음 해보기 좋음
개인 소개 페이지	가능 — 공유 전 모바일 화면만 확인
로그인이 있는 서비스	개발자 검토 필요
결제, 회사 업무 시스템, 개인정보 처리	혼자 바이브코딩으로 끝내면 안 됨

GitHub에 push할 때, Vercel에 배포할 때 모두 로그인·권한 승인·토큰 입력은 AI에게 넘기지 말고 직접 보고 판단해야 합니다. 바이브코딩은 시작 장벽을 낮춰주지만, 검증 책임까지 없애주지는 않습니다.

자주 막히는 문제

`claude --version`이 command not found로 나옵니다

터미널을 완전히 껐다가 다시 켜고 재시도해보세요. 그래도 안 되면 설치 명령어를 다시 실행하고, 그래도 안 되면 실행 결과를 복사해 Claude 채팅에 붙여넣고 물어보는 게 가장 빠릅니다.

`localhost:3000`을 다른 사람에게 보내도 되나요?

안 됩니다. localhost는 내 컴퓨터에서만 열리는 주소라서 다른 사람 컴퓨터에서는 열리지 않습니다. 공유하려면 GitHub·Vercel 단계까지 진행해 공개 링크를 만들어야 합니다.

GitHub 저장소는 꼭 Public이어야 하나요?

아닙니다. 연습용이고 공개해도 부담 없는 코드라면 Public, API 키나 개인정보가 들어갈 수 있다면 Private으로 시작하는 편이 낫습니다.

Vercel 배포는 무료인가요?

개인 실험과 작은 정적 사이트는 무료 플랜으로 시작하는 경우가 많습니다. 다만 요금제는 바뀔 수 있으니 실제 배포 전 Vercel 가격 페이지를 확인하는 편이 좋습니다.

코딩을 아예 몰라도 이 순서를 따라갈 수 있나요?

설치부터 배포까지는 이 페이지 순서대로 가능합니다. 다만 이후 중요한 건 코딩 지식보다 “뭘 만들고 싶은지”, “무엇을 유지하고 무엇만 바꿀지”를 구체적으로 말하는 능력입니다.

업데이트 기록

이 페이지는 새 글을 발행하거나 기준이 바뀔 때마다 날짜와 함께 업데이트합니다.

2026-08-17: 허브 본문을 30초 요약 → 개념 → 도구 선택 → 설치 → 첫 프롬프트 → 결과 확인 → localhost → GitHub → Vercel → 검증 체크리스트 → 주의사항 → FAQ 순서로 전면 개편. 운영자 관점 문장 삭제, 중복 H1 제거, 6개 글의 실제 프롬프트·단계를 이 페이지 안으로 통합.
2026-08-14: 바이브코딩 배포 글 발행 후 연결. 로컬 앱을 공개 링크로 공유하는 흐름 추가.
2026-08-14: GitHub 저장소 만들기 글 발행 후 연결. 첫 프로젝트와 배포 글 사이의 GitHub 준비 단계를 3탄으로 추가.
2026-08-14: 바이브코딩 루트 페이지 생성. 바이브코딩 뜻, 바이브코딩 첫 프로젝트 글 연결.

다음에 볼 만한 글

참고 기준

이 페이지의 개념 설명과 절차는 공식 문서, 영어권 정의, 실제 사용 흐름을 확인할 수 있는 자료를 우선했습니다.