바이브코딩 시작 가이드

이 가이드를 따라 하면 30분 안에 내가 원하는 도구를 만들 수 있습니다.

코딩을 배우는 게 아닙니다. AI에게 말하는 겁니다. 타이핑만 할 수 있으면 충분합니다.

필요한 것: 컴퓨터, 인터넷
비용: 0원

1단계. 준비

AI에 접속하기

ChatGPT 또는 Claude 중 하나를 선택해서 접속합니다.

• ChatGPT: chat.openai.com 접속 → 구글 계정으로 가입 (무료)
• Claude: claude.ai 접속 → 구글 계정으로 가입 (무료)

💡 둘 다 무료이고, 둘 다 잘 만들어줍니다. 아무거나 고르세요.

이게 끝입니다. 준비 완료.

2단계. 만들기

원리

AI에게 "이런 걸 만들어줘"라고 말하면 AI가 파일을 만들어줍니다. 그 파일을 다운로드해서 더블클릭하면 브라우저에서 내가 만든 도구가 열립니다. 이게 바이브코딩의 전부입니다.

Step 1: AI에게 요청하기

AI 대화창에 아래처럼 입력합니다.

나는 [본인 상황]인데, [원하는 도구]를 만들고 싶어.
HTML, CSS, JavaScript를 사용해서 하나의 HTML 파일로 만들어줘.

💡 뭘 만들지 모르겠다면, 아래에서 골라보세요.

Step 2: 파일 다운로드하기

AI가 만들어준 파일을 다운로드합니다.

• ChatGPT: 코드 블록 위에 미리보기 아이콘을 클릭하면 코드 파일 다운로드 아이콘을 확인할 수 있습니다.
• Claude: 코드 블록 아래에 Download 버튼이 있습니다. 클릭하면 다운로드됩니다.

다운로드된 파일을 바탕화면으로 옮겨두면 찾기 쉽습니다.

Step 3: 실행하기

다운로드한 .html 파일을 더블클릭합니다. 브라우저가 열리면서 내가 만든 도구가 나타납니다.

🎉 축하합니다! 방금 바이브코딩으로 첫 번째 도구를 만들었습니다.

3단계. 수정하기

원리

마음에 안 드는 부분이 있으면 AI에게 그냥 말하면 됩니다. 수정된 파일을 다시 다운로드하면 끝입니다.

Step 4: 수정 요청하기

아까 AI와 대화하던 창에서 이어서 말합니다. 예시:

• "색상을 파란색 계열로 바꿔줘"
• "버튼을 더 크게 만들어줘"
• "완료한 항목은 취소선으로 보이게 해줘"
• "여기에 ~기능도 추가해줘"

수정된 파일을 받으면:

1. 다운로드
2. 기존 파일에 덮어쓰기 (같은 이름으로 같은 위치에 저장)
3. 브라우저에서 새로고침 (F5 또는 ⌘+R)

에러가 나면?

당황하지 마세요. AI에게 "에러가 났어"라고 말하고, 화면에 보이는 에러 내용을 그대로 복사해서 붙여넣으세요. AI가 고쳐줍니다.

이 과정이 반복입니다. 요청 → 수정 → 확인. 완벽하지 않아도 됩니다. 일단 만들어보세요.

다음 단계 (선택, 궁금한 사람만)

"AI에게 더 잘 요청하고 싶어요"

방금은 예시를 따라 했지만, 앞으로는 내가 원하는 걸 직접 말해야 합니다. 처음엔 "만들어줘" 한마디로 시작해서, 점점 구체적으로 말하는 연습을 하면 됩니다. AI에게 잘 요청하는 법에서 이어집니다.

"더 복잡한 걸 만들고 싶어요"

무료 AI로도 꽤 복잡한 도구까지 만들 수 있습니다.

• 가계부, 포트폴리오 페이지, 퀴즈 앱, 일정 관리 등
• 한계가 느껴질 때 유료 구독을 고려하면 됩니다 (월 약 3만원, Claude 또는 Gemini 추천)
• 유료를 쓰면 더 똑똑한 AI가 더 복잡한 것도 만들어줍니다

"제대로 배우고 싶어요"

• 여기까지가 채팅창에서 가능한 바이브코딩입니다. 다음은 AI를 내 컴퓨터로 데려와 파일까지 맡기는 단계입니다. 바이브코딩 시작 코스 2부에서 순서대로 이어집니다
• 미리 알아둘 것: 내 컴퓨터에서 쓰는 클로드코드 구간부터는 Claude 유료 플랜(월 약 3만원)이 필요합니다. 채팅 실습까지는 무료로 충분합니다
• 궁금한 점은 공지의 질문 폼을 통해 물어봐주세요

핵심 요약

1. 코딩을 배우는 게 아닙니다. AI에게 말하는 겁니다.
2. 완벽하지 않아도 됩니다. 일단 만들어보세요.
3. 에러가 나면 AI한테 그대로 보여주세요. AI가 고칩니다.