Vibe 코딩 가이드 1/5

 

🎯 Vibe 코딩 가이드

📚 1단계 - 기초 입문

⚠️ Vibe 코딩이란?
Vibe 코딩은 AI와 자연스러운 대화를 통해 코드를 작성하는 새로운 프로그래밍 방식입니다. 복잡한 문법을 외우지 않고도 원하는 프로그램을 만들 수 있습니다!

🤖 사용 가능한 AI 도구들

좋은 소식! 어떤 AI 도구든 사용 가능합니다. 각자 편한 도구를 선택하세요!

• Claude - 대화형 AI, 긴 코드 작성에 강함
• ChatGPT - OpenAI의 대화형 AI
• Cursor - 코딩 전용 에디터 (VS Code 기반)
• GitHub Copilot - 코드 자동완성 도우미
• Bolt.new, v0.dev - 웹 개발 특화 도구
• Gemini - Google의 AI 도구

🌟 1단계에서 배울 내용

• Vibe 코딩의 기본 개념 이해하기
• AI에게 효과적으로 요청하는 방법
• 간단한 웹 페이지 만들어보기
• 기본적인 수정 요청하기
• 코드 실행 방법 알아보기

💻 만든 코드 보는 방법 (서버 필요 없음!)

🎉 좋은 소식!
HTML 파일은 서버 없이도 바로 볼 수 있습니다!

1 AI가 만든 코드 저장하기
- AI가 만든 코드를 복사합니다
- 메모장이나 텍스트 에디터에 붙여넣기
- "내파일.html"로 저장 (확장자 .html 중요!)

2 파일 열어서 보기
- 저장한 .html 파일을 더블클릭
- 또는 파일을 웹 브라우저(크롬, 엣지 등)로 드래그
- 바로 화면에 나타납니다! ✨

3 수정 후 다시 보기
- 파일을 수정하고 저장
- 브라우저에서 새로고침 (F5키)
- 변경사항이 바로 반영됩니다!

🌐 GitHub Pages로 무료 호스팅하기 (공유용)

🎯 왜 필요한가요?
내 컴퓨터에 있는 파일은 나만 볼 수 있습니다. 다른 사람과 공유하려면 인터넷에 올려야 합니다!
GitHub Pages는 100% 무료이고 광고도 없습니다.

📋 준비물

• GitHub 계정 (없으면 github.com에서 무료 가입)
• 업로드할 HTML 파일
• 크롬이나 엣지 같은 웹 브라우저

🚀 단계별 호스팅 방법

1 GitHub에 로그인
- github.com 접속
- 로그인 (계정이 없으면 Sign up 클릭해서 가입)

2 새 저장소(Repository) 만들기
- 오른쪽 위 "+" 버튼 클릭
- "New repository" 선택
- Repository name: my-first-website (원하는 이름으로)
- Public 선택 (무료)
- "Add a README file" 체크 ✅
- "Create repository" 버튼 클릭

3 HTML 파일 업로드하기
- 생성된 저장소 페이지에서 "Add file" 버튼 클릭
- "Upload files" 선택
- 만든 HTML 파일을 드래그해서 놓기
- 파일 이름을 index.html로 변경 (중요!)
- 맨 아래 "Commit changes" 버튼 클릭

⚠️ 중요!
메인 파일 이름은 반드시 index.html이어야 합니다. 다른 이름이면 자동으로 열리지 않습니다!

4 GitHub Pages 활성화하기
- 저장소 페이지에서 "Settings" 탭 클릭
- 왼쪽 메뉴에서 "Pages" 클릭
- "Branch" 섹션에서 "None" → "main" 선택
- "Save" 버튼 클릭
- 1~2분 기다리기 ⏱️

5 내 웹사이트 주소 확인하기
- 같은 Pages 페이지 위쪽에 주소가 나타납니다
- 주소 형식: https://내아이디.github.io/my-first-website/
- 이 주소를 복사해서 친구들에게 공유! 🎉

✅ 성공 예시

만약 GitHub 아이디가 "kimcoder"이고 저장소 이름이 "my-first-website"라면:

https://kimcoder.github.io/my-first-website/

이 주소가 내 웹사이트 주소입니다!

✏️ 파일 수정하는 방법

1 GitHub에서 직접 수정
- 저장소에서 index.html 클릭
- 연필 모양 아이콘(Edit) 클릭
- 코드 수정
- "Commit changes" 클릭
- 1~2분 후 웹사이트에 자동 반영됨

💡 꿀팁:
- 수정사항이 바로 안 보이면 브라우저 새로고침 (Ctrl + F5)
- 이미지도 같은 방법으로 업로드 가능
- 저장소 하나로 여러 페이지 만들기 가능
- 완전 무료, 용량 제한 1GB (초보자에겐 충분!)

🔒 주의사항:
- Public 저장소는 누구나 코드를 볼 수 있습니다
- 비밀번호나 개인정보는 절대 코드에 넣지 마세요
- 저장소 이름에 공백이나 한글은 피하세요 (영문 추천)

💡 Vibe 코딩의 3가지 핵심 원칙

1 명확하게 말하기
AI에게 무엇을 만들고 싶은지 구체적으로 설명합니다.

2 단계별로 진행하기
한 번에 모든 것을 만들려 하지 말고, 하나씩 추가해 나갑니다.

3 피드백 주기
결과를 보고 마음에 들지 않는 부분을 수정 요청합니다.

🎨 실습 1: 첫 번째 웹 페이지 만들기

📝 AI에게 이렇게 요청해보세요:

"안녕하세요! 제 이름은 [당신의 이름]입니다."라는 제목과
"Vibe 코딩을 배우고 있어요!"라는 내용이 있는
간단한 웹 페이지를 만들어주세요.
배경은 하늘색으로 해주세요.

💡 팁: 위와 같이 요청하면 AI가 HTML 파일을 만들어줍니다. 결과물을 확인해보세요!

✏️ 실습 2: 수정 요청하기

📝 이렇게 수정을 요청할 수 있습니다:

제목 글자를 더 크게 만들어주세요.
그리고 빨간색으로 바꿔주세요.

🎯 중요!
한 번에 1~2가지만 수정을 요청하세요. 너무 많은 요청을 한 번에 하면 헷갈릴 수 있습니다.

🔍 좋은 요청 vs 나쁜 요청

✅ 좋은 요청 예시:

버튼을 하나 추가해주세요.
버튼 텍스트는 "클릭하세요"이고,
파란색 배경에 흰색 글자로 만들어주세요.

❌ 피해야 할 요청 예시:

뭔가 만들어주세요. (너무 모호함)
예쁘게 해주세요. (기준이 불명확함)

🏆 1단계 미션

1 자기소개 페이지를 만들어보세요 (이름, 좋아하는 것 포함)

2 배경색을 원하는 색으로 변경해보세요

3 글자 크기와 색을 변경해보세요

🎓 다음 단계 준비:
1단계를 완료했다면 이미지 추가, 버튼 만들기, 간단한 상호작용을 배우는 2단계로 넘어갈 준비가 되었습니다!

📌 기억하세요: Vibe 코딩은 대화하듯이 프로그래밍하는 것입니다. 실수를 두려워하지 말고 자유롭게 시도해보세요!